/* Pannello di Modella AI. Stessa palette scura della Mini App, pensato per
   il desktop e usabile dal telefono (margini di 16px, nessuno scorrimento
   orizzontale). Nessun framework, nessuna build. */
/* ── Tema scuro: rosso scuro (6/10) ─────────────────────────────────────
   Fondo bordeaux scuro (6/10: meno cupo, su richiesta), riquadri vinaccia, accento
   lampone. Testo ≥ 7:1 sul fondo, secondario ≥ 4.5:1. È :root: lo usa
   data-tema="scuro"; il chiaro (sotto) lo ridefinisce. */
:root {
  --bg: #221318;
  --bg-2: #2a171e;
  --fg: #f8eef1;
  --hint: #bba2ab;
  --card: #301b23;
  --card-2: #3b222c;
  --bordo: rgba(255, 170, 195, 0.13);
  --accent: #e0426f;
  --accent-2: #a8164a;
  --accent-fg: #ffffff;
  --ok: #4cc38a;
  --warn: #f0b429;
  --err: #ff6b7d;
  --radius: 16px;
  --r-small: 10px;
  /* Colori derivati: tutti qui, così il tema chiaro li ridefinisce in un posto. */
  --topbar: rgba(34, 19, 24, 0.86);
  --laterale: #28161c;
  --bordo-forte: rgba(255, 170, 195, 0.24);
  --campo: rgba(0, 0, 0, 0.32);
  --codice: rgba(255, 255, 255, 0.08);
  --accent-testo: #ff7ea1;
  --accent-velo: rgba(224, 66, 111, 0.14);
  --accent-bordo: rgba(224, 66, 111, 0.5);
  --ok-testo: #5fd49b;
  --ok-velo: rgba(76, 195, 138, 0.13);
  --warn-testo: #f3c04e;
  --warn-velo: rgba(240, 180, 41, 0.11);
  --avviso-testo: #f7d58a;
  --err-testo: #ffb3bd;
  --err-velo: rgba(255, 107, 125, 0.13);
  --err-bordo: rgba(255, 107, 125, 0.42);
  --info-testo: #ffc6d5;
  --velo-gen: rgba(34, 19, 24, 0.68);
  --velo-gen-coda: rgba(34, 19, 24, 0.4);
  --ombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.25);
  --ombra-accento: 0 6px 18px rgba(224, 66, 111, 0.32);
  /* Le schede della modella: sfondi tenui, uno per scheda, tutti nella
     famiglia del rosso (pesca, lampone, corallo, ambra, rosa, prugna), e un
     filo più deciso per il bordo di sinistra. */
  --pillola: #3b222c;
  --scheda-seed: #331d24;
  --scheda-seed-filo: #b0606f;
  --scheda-libera: #331c2e;
  --scheda-libera-filo: #a3528f;
  --scheda-varianti: #381e25;
  --scheda-varianti-filo: #d0606f;
  --scheda-lora: #36251c;
  --scheda-lora-filo: #b98250;
  --scheda-voce: #371b26;
  --scheda-voce-filo: #d24d72;
  --scheda-profili: #2f1e33;
  --scheda-profili-filo: #9064a6;
  color-scheme: dark;
}

/* ── Tema chiaro: rosa (6/10, il DEFAULT) ──────────────────────────────────
   Fondo cipria, riquadri quasi bianchi appena rosati, testo prugna scuro
   (~14:1), secondario ~6:1; l'accento lampone, più scuro dove è testo. La
   pagina nasce con data-tema="chiaro" (index.html). */
:root[data-tema="chiaro"] {
  --bg: #fbf2f5;
  --bg-2: #f5e4eb;
  --fg: #2b1520;
  --hint: #7a5a67;
  --card: #fffafb;
  --card-2: #f8eaf0;
  --bordo: rgba(140, 40, 80, 0.12);
  --bordo-forte: rgba(140, 40, 80, 0.26);
  --accent: #d63a6c;
  --accent-2: #b0205a;
  --err: #b42343;
  --topbar: rgba(255, 250, 251, 0.86);
  --laterale: #fdf0f4;
  --campo: #ffffff;
  --codice: rgba(140, 40, 80, 0.07);
  --accent-testo: #ad1f57;
  --accent-velo: rgba(214, 58, 108, 0.10);
  --accent-bordo: rgba(214, 58, 108, 0.40);
  --ok-testo: #13633b;
  --ok-velo: rgba(76, 195, 138, 0.16);
  --warn-testo: #6f4a00;
  --warn-velo: rgba(240, 180, 41, 0.18);
  --avviso-testo: #6e4a00;
  --err-testo: #a3203e;
  --err-velo: rgba(220, 60, 90, 0.12);
  --err-bordo: rgba(180, 35, 67, 0.42);
  --info-testo: #8c1b4b;
  --velo-gen: rgba(255, 250, 251, 0.82);
  --velo-gen-coda: rgba(255, 250, 251, 0.52);
  --ombra: 0 1px 2px rgba(120, 30, 70, 0.06), 0 8px 24px rgba(120, 30, 70, 0.07);
  --ombra-accento: 0 6px 18px rgba(214, 58, 108, 0.28);
  --pillola: #ffffff;
  --scheda-seed: #fdf0ec;
  --scheda-seed-filo: #e0a08b;
  --scheda-libera: #fbedf5;
  --scheda-libera-filo: #d488b3;
  --scheda-varianti: #fdeff1;
  --scheda-varianti-filo: #e3949e;
  --scheda-lora: #fdf4ea;
  --scheda-lora-filo: #d9ab78;
  --scheda-voce: #fdeef3;
  --scheda-voce-filo: #e2829f;
  --scheda-profili: #f7eef9;
  --scheda-profili-filo: #bf97d4;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}
a { color: var(--accent-testo); }
button { font: inherit; }

/* ── Barra in alto ─────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 20px;
  background: var(--topbar);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bordo);
}
.marchio { font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.marchio span { color: var(--hint); font-weight: 500; }
.aree { display: flex; gap: 4px; flex: 1; }
.aree a {
  color: var(--hint); text-decoration: none; padding: 6px 12px;
  border-radius: 999px; font-weight: 600;
}
.aree a.attiva { background: var(--card); color: var(--fg); }
.aree a.spenta { opacity: 0.45; pointer-events: none; }
.utente { display: flex; align-items: center; gap: 10px; color: var(--hint); font-size: 0.9rem; }
/* 2/10: la barra va a capo da sola quando non ci sta tutto (fra 640 e ~950 px
   la pillola fal finiva fuori dallo schermo): i comandi dell'utente e i saldi
   scendono su una seconda riga, a destra, invece di uscire dalla pagina. */
.topbar { flex-wrap: wrap; row-gap: 6px; }
.utente { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }

main { max-width: 1180px; margin: 0 auto; padding: 20px 20px 80px; }
@media (max-width: 640px) {
  main { padding: 16px 16px 80px; }
  .topbar { padding: 10px 16px; gap: 10px; }
  .marchio span { display: none; }
}

h1 { font-size: 1.5rem; margin: 4px 0 16px; }
h2 { font-size: 1.1rem; margin: 28px 0 12px; }
.sotto { color: var(--hint); font-size: 0.88rem; }

/* ── Bottoni ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--bordo); background: var(--card-2); color: var(--fg);
  padding: 8px 14px; border-radius: var(--r-small); cursor: pointer;
  font-weight: 600; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--bordo-forte); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primario { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn.pericolo { color: var(--err); border-color: var(--err-bordo); background: transparent; }
.btn.piccolo { padding: 5px 10px; font-size: 0.85rem; }
.btn.fantasma { background: transparent; }
.riga-btn { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Schede e griglie ──────────────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--bordo);
  border-radius: var(--radius); padding: 14px;
}
.griglia-modelle {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.modella {
  display: block; color: inherit; text-decoration: none; padding: 0; overflow: hidden;
}
.modella:hover { border-color: var(--accent-bordo); }
.modella .foto { aspect-ratio: 3 / 4; background: var(--bg-2); }
.modella .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modella .testo { padding: 10px 12px 12px; }
.modella .nome { font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chip {
  font-size: 0.72rem; padding: 2px 8px; border-radius: 999px;
  background: var(--card-2); color: var(--hint);
}
.chip.ok { color: var(--ok-testo); background: var(--ok-velo); }
.chip.warn { color: var(--warn-testo); background: var(--warn-velo); }

.griglia-seed {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.seed .testa { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.seed .titolo { font-weight: 700; font-size: 1.02rem; }
.seed .foto, .candidato .foto {
  margin: 10px 0; aspect-ratio: 3 / 4; background: var(--bg-2);
  border-radius: var(--r-small); overflow: hidden; display: flex;
  align-items: center; justify-content: center; color: var(--hint);
  text-align: center; padding: 0;
}
.seed .foto img, .candidato .foto img {
  width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in;
}
.storico { margin-top: 10px; }
.storico summary { cursor: pointer; color: var(--hint); font-size: 0.88rem; }
.versioni { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; margin-top: 8px; }
.versione { position: relative; border-radius: 7px; overflow: hidden; background: var(--bg-2); aspect-ratio: 3 / 4; }
.versione img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.versione .etichetta {
  position: absolute; left: 0; right: 0; bottom: 0; font-size: 0.7rem;
  background: rgba(0, 0, 0, 0.65); color: #f2f2f7; padding: 2px 4px; display: flex;
  justify-content: space-between; align-items: center;
}
.versione.attiva { outline: 2px solid var(--ok); }
.versione button { font-size: 0.68rem; padding: 1px 5px; border-radius: 4px; border: none;
  background: var(--accent); color: #fff; cursor: pointer; }

.candidato { border-color: var(--accent-bordo); }
.candidato .foto { max-height: 70vh; aspect-ratio: auto; min-height: 240px; }
.candidato-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 760px) { .candidato-layout { grid-template-columns: 1fr; } }

.avviso {
  border-radius: var(--r-small); padding: 10px 12px; margin: 10px 0;
  background: var(--warn-velo); color: var(--avviso-testo); font-size: 0.9rem;
}
.avviso.errore { background: var(--err-velo); color: var(--err-testo); }
.avviso.info { background: var(--accent-velo); color: var(--info-testo); }

/* ── Lavoro in corso ───────────────────────────────────────────────────── */
.lavoro { border-color: var(--accent-bordo); }
.barra { height: 8px; background: var(--bg-2); border-radius: 999px; overflow: hidden; margin: 8px 0; }
.barra > div { height: 100%; background: var(--accent); width: 0; transition: width 0.4s; }
.diario { max-height: 180px; overflow: auto; font-size: 0.82rem; color: var(--hint); margin-top: 6px; }
.diario div { padding: 2px 0; border-top: 1px solid var(--bordo); }

/* ── Profili ───────────────────────────────────────────────────────────── */
.griglia-profili {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.profilo { padding: 0; overflow: hidden; }
.profilo .foto { aspect-ratio: 3 / 4; background: var(--bg-2); display: flex;
  align-items: center; justify-content: center; color: var(--hint); font-size: 0.85rem; }
.profilo .foto img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.profilo .testo { padding: 8px 10px 10px; font-size: 0.86rem; }
.profilo .num { font-weight: 700; }

/* ── Moduli ────────────────────────────────────────────────────────────── */
label.campo { display: block; margin: 12px 0; }
label.campo > span { display: block; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--hint); margin-bottom: 6px; }
input[type=text], input[type=password], textarea {
  width: 100%; border: 1px solid var(--bordo); border-radius: var(--r-small);
  background: var(--campo); color: var(--fg); font: inherit; padding: 9px 11px;
}
textarea { resize: vertical; min-height: 80px; }
input:focus, textarea:focus { outline: none; border-color: var(--accent); }
.anteprima { max-width: 260px; max-height: 340px; border-radius: var(--r-small); margin-top: 8px; display: block; }

.login { max-width: 360px; margin: 10vh auto 0; }
.login h1 { text-align: center; }

/* ── Finestre: immagine intera e conferme ──────────────────────────────── */
.velo {
  position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.88);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.velo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.velo .chiudi { position: absolute; top: 14px; right: 14px; }
.dialogo { max-width: 520px; width: 100%; }
.dialogo h3 { margin: 0 0 8px; }
.dialogo .riga-btn { justify-content: flex-end; margin-top: 16px; }
.costo { font-weight: 700; color: var(--warn-testo); }

.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60;
  background: var(--card-2); border: 1px solid var(--bordo); padding: 10px 16px;
  border-radius: var(--r-small); max-width: calc(100% - 32px);
}
.toast.errore { border-color: var(--err-bordo); color: var(--err-testo); }
.caricamento { color: var(--hint); padding: 30px 0; text-align: center; }
pre.prompt { white-space: pre-wrap; word-break: break-word; background: var(--bg-2);
  padding: 10px; border-radius: var(--r-small); font-size: 0.82rem; max-height: 40vh; overflow: auto; }
.largo { width: 100%; }
.testata { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.testata h1 { margin: 4px 0; }
.nascosto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.spazio-su { margin-top: 8px; }
.candidato .titolo { margin-bottom: 6px; }
.largo-dialogo { max-width: 860px; max-height: 90vh; overflow: auto; }
.versioni-grandi { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.img-assente { display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; padding: 8px; }
@media (max-width: 640px) {
  #nome-utente { display: none; }
  .aree a { padding: 6px 8px; }
  .topbar { gap: 6px; }
}

/* ── Miniguide ─────────────────────────────────────────────────────────── */
.ancora-guide { margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.guida { background: var(--accent-velo); border: 1px solid var(--accent-bordo);
  border-radius: var(--r-small); }
.guida > summary { cursor: pointer; padding: 7px 10px; font-weight: 600; font-size: 0.9rem;
  color: var(--info-testo); list-style: none; }
.guida > summary::-webkit-details-marker { display: none; }
.guida > summary::before { content: "▸ "; display: inline-block; }
.guida[open] > summary::before { content: "▾ "; }
.guida[open] > summary { border-bottom: 1px solid var(--accent-bordo); }
.guida-corpo { padding: 8px 12px 12px; font-size: 0.92rem; }
.guida-corpo p { margin: 6px 0; }
.guida-corpo ul, .guida-corpo ol { margin: 6px 0; padding-left: 22px; }
.guida-corpo code { background: var(--codice); padding: 1px 5px; border-radius: 5px; }
.guida-immagini { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin-top: 8px; }
.guida-immagini figure { margin: 0; }
.guida-immagini img { width: 100%; border-radius: 7px; cursor: zoom-in; display: block; }
.guida-immagini figcaption { font-size: 0.8rem; color: var(--hint); margin-top: 4px; }
.guida-strumenti { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--bordo); }
.aggiungi-guida { align-self: flex-start; color: var(--hint); }
.guida-editor { display: flex; flex-direction: column; gap: 8px; }
.guida-anteprima { border: 1px dashed var(--bordo); border-radius: var(--r-small); padding: 8px 12px; }
select { width: 100%; border: 1px solid var(--bordo); border-radius: var(--r-small);
  background: var(--campo); color: var(--fg); font: inherit; padding: 8px; }
.seconda-foto { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--bordo);
  display: flex; flex-direction: column; gap: 6px; }
.seconda-foto img { width: 96px; border-radius: 7px; cursor: zoom-in; }
.seconda-foto .testa { display: flex; justify-content: space-between; align-items: center; gap: 6px; }

/* Interruttore del tema, nella barra in alto. */
.tema { min-width: 34px; }
/* Il visore delle immagini resta scuro in entrambi i temi: un'immagine si
   giudica meglio su un fondo neutro scuro, e il velo chiaro la sbiadirebbe. */
.guida > summary .chip { margin-left: 8px; }
.casella { display: flex; gap: 8px; align-items: flex-start; font-size: 0.88rem; color: var(--hint); }
.casella input { margin-top: 3px; }

/* La card «Nuova modella», prima della griglia: stessa forma delle altre. */
.nuova-modella .foto { display: flex; align-items: center; justify-content: center;
  border-bottom: 2px dashed var(--bordo-forte); }
.nuova-modella .piu { font-size: 4.5rem; font-weight: 300; line-height: 1; color: var(--accent-testo); }
.nuova-modella:hover .piu { color: var(--accent); }
.nuova-modella .nome { color: var(--accent-testo); }

/* Saldi nella barra: due pillole ben visibili, «Kie 9 948 crediti» e «fal
   $9,13»; un clic porta alle Impostazioni. Di avviso sotto la soglia del
   config, rosse se la lettura fallisce. Su telefono restano, compatte. */
.saldi { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.pillola-saldo { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 11px;
  border-radius: 999px; text-decoration: none; font-size: 0.92rem; line-height: 1.2;
  background: var(--pillola); color: var(--fg); border: 1px solid var(--bordo-forte); }
.pillola-saldo:hover { border-color: var(--accent-bordo); }
.pillola-saldo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pillola-nome { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.02em; color: var(--hint); }
.pillola-valore { font-weight: 700; font-variant-numeric: tabular-nums; }
.pillola-valore.corto { display: none; }
.pillola-saldo.basso { background: var(--warn-velo); border-color: var(--warn); color: var(--avviso-testo); }
.pillola-saldo.basso .pillola-nome { color: var(--avviso-testo); }
.pillola-saldo.errore { background: var(--err-velo); border-color: var(--err-bordo); color: var(--err-testo); }
.pillola-saldo.errore .pillola-nome { color: var(--err-testo); }
.pillola-saldo.attesa { opacity: 0.75; }
.impostazione input[type=password] { font-family: ui-monospace, monospace; }
@media (max-width: 640px) {
  .saldi { gap: 4px; }
  .pillola-saldo { padding: 3px 8px; font-size: 0.8rem; gap: 4px; }
  .pillola-nome { font-size: 0.7rem; }
  .pillola-valore.lungo { display: none; }
  .pillola-valore.corto { display: inline; }
}
/* Telefono: con «Impostazioni» le voci non stanno più accanto al marchio e
   ai bottoni; vanno su una seconda riga della barra. */
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; row-gap: 6px; }
  .aree { order: 3; flex-basis: 100%; }
  .utente { margin-left: auto; }
  /* Con «Prove» (3/10) le voci non stanno più in 390 px: la riga scorre di
     lato, lei sola, invece di allargare la pagina. */
  .aree { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .aree::-webkit-scrollbar { display: none; }
  .aree a { white-space: nowrap; flex: 0 0 auto; }
}

/* ── Indicatore di generazione sulle card ──────────────────────────────
   Un velo dentro il .foto: l'immagine precedente resta visibile sotto. */
.seed .foto, .profilo .foto { position: relative; }
.gen-velo {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 12px; text-align: center;
  background: var(--velo-gen); color: var(--fg);
}
.gen-velo.coda { background: var(--velo-gen-coda); }
/* Card vuota: niente sotto da mostrare, il velo copre il segnaposto e lo
   spinner resta solo, al centro. */
.gen-velo.vuoto { background: var(--bg-2); }
.passo .testa .chip { white-space: nowrap; }
.gen-velo.coda .gen-spinner, .gen-velo.fatto .gen-spinner,
.gen-velo.fallito .gen-spinner, .gen-velo.errore .gen-spinner { display: none; }
.gen-velo.fatto { background: transparent; justify-content: flex-start; align-items: flex-end; }
.gen-velo.fatto .gen-titolo { font-size: 0.72rem; padding: 2px 8px; border-radius: 999px;
  background: var(--ok-velo); color: var(--ok-testo); backdrop-filter: blur(4px); }
.gen-velo.fallito .gen-titolo, .gen-velo.errore .gen-titolo { color: var(--err-testo); }
.gen-titolo { font-weight: 700; font-size: 0.95rem; }
.gen-tempo { font-variant-numeric: tabular-nums; font-size: 1.5rem; font-weight: 600; }
.gen-tempo:empty, .gen-kie:empty, .gen-errore:empty { display: none; }
.gen-kie { font-size: 0.8rem; color: var(--hint); max-width: 30ch; }
.gen-errore { font-size: 0.82rem; color: var(--err-testo); max-width: 36ch; overflow: auto;
  max-height: 60%; }
.profilo .gen-tempo { font-size: 1.15rem; }
.profilo .gen-titolo { font-size: 0.82rem; }
.gen-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--accent-bordo); border-top-color: var(--accent);
  animation: gen-gira 0.9s linear infinite;
}
.gen-spinner.mini { width: 12px; height: 12px; border-width: 2px; }
@keyframes gen-gira { to { transform: rotate(360deg); } }
/* Chi chiede meno movimento: niente rotazione. Resta un anello pieno, e il
   cronometro dice comunque che il lavoro va avanti. */
@media (prefers-reduced-motion: reduce) {
  .gen-spinner { animation: none; border-top-color: var(--accent-bordo); }
  .barra > div { transition: none; }
}
.card.in-generazione { border-color: var(--accent-bordo); }
.modella .foto { position: relative; }
.gen-segno {
  position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.74rem; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--velo-gen); color: var(--fg); backdrop-filter: blur(4px);
}

/* ── Seed: i quattro passi ─────────────────────────────────────────── */
.passi { list-style: none; margin: 10px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.passi li {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px;
  border-radius: 999px; background: var(--card); border: 1px solid var(--bordo);
  font-size: 0.86rem;
}
.passi .n, .passo .n {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%; font-weight: 700; font-size: 0.82rem;
  background: var(--card-2); color: var(--hint);
}
.passi li.fatto .n, .passo.fatto .n { background: var(--ok-velo); color: var(--ok-testo); }
.passi li.prossimo, .passi li.in-corso { border-color: var(--accent-bordo); background: var(--accent-velo); }
.passi li.prossimo .n, .passi li.in-corso .n,
.passo.prossimo .n, .passo.in-corso .n { background: var(--accent); color: var(--accent-fg); }
.passi li.bloccato { opacity: 0.7; }
.passi .stato { color: var(--hint); }
.griglia-seed.quattro { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.passo .testa .titolo { display: inline-flex; align-items: center; gap: 8px; }
.card.passo.prossimo { border-color: var(--accent-bordo); box-shadow: 0 0 0 1px var(--accent-bordo); }
.card.passo.bloccato .foto { opacity: 0.55; }
.segnaposto { padding: 16px; color: var(--hint); font-size: 0.9rem; }
.segnaposto strong { display: block; color: var(--fg); margin-bottom: 4px; }
.motivo { font-size: 0.84rem; color: var(--avviso-testo); background: var(--warn-velo);
  border-radius: var(--r-small); padding: 6px 10px; margin: 6px 0; }

/* ── Frecce ‹ › sulle card: tutte le immagini di un ruolo o di un profilo ── */
.foto.galleria { position: relative; touch-action: pan-y; }
.galleria-freccia {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--bordo-forte);
  background: var(--velo-gen); color: var(--fg); font-size: 1.5rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0 0 3px;
}
.galleria-freccia:hover { border-color: var(--accent-bordo); }
.galleria-freccia:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.galleria-freccia.indietro { left: 6px; }
.galleria-freccia.avanti { right: 6px; }
.profilo .galleria-freccia { width: 30px; height: 30px; font-size: 1.2rem; }
.segnaposto-galleria { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; }
.galleria-barra { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 6px; }
.galleria-riga { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.galleria-conta { font-variant-numeric: tabular-nums; font-size: 0.84rem; color: var(--hint); }
.galleria-azioni:empty { display: none; }
.profilo .galleria-barra { padding: 6px 10px 0; margin: 0; }
.card[tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Il visore a schermo intero, con le sue frecce e il contatore. */
.velo .galleria-freccia { position: fixed; width: 48px; height: 48px; font-size: 2rem;
  background: rgba(0, 0, 0, 0.55); color: #fff; border-color: rgba(255, 255, 255, 0.25); }
.velo .galleria-freccia.indietro { left: 12px; }
.velo .galleria-freccia.avanti { right: 12px; }
/* La barra in basso dello schermo intero: didascalia e «3 di 7», lo stato
   (… mentre arriva la grande) e il bottone «Originale». */
.visore-barra { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px);
  background: rgba(0, 0, 0, 0.6); color: #f2f2f7; font-size: 0.85rem; padding: 4px 6px 4px 12px;
  border-radius: 999px; }
.visore-conta { text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visore-conta:empty { display: none; }
.visore-stato { color: #c8c8d0; font-size: 0.78rem; }
.visore-stato:empty { display: none; }
.visore-originale { background: rgba(255, 255, 255, 0.14); color: #f2f2f7; border-color: rgba(255, 255, 255, 0.3); }
.visore-originale[hidden] { display: none; }

/* ── Riferimenti dei profili: caselle con miniatura ───────────────────── */
.rif-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin: 8px 0; }
.rif-casella {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px;
  border: 1px solid var(--bordo); border-radius: var(--r-small); background: var(--card-2);
  cursor: pointer; font-size: 0.8rem;
}
.rif-casella:has(input:checked) { border-color: var(--accent); background: var(--accent-velo); }
.rif-casella input { position: absolute; top: 10px; left: 10px; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.rif-casella input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rif-casella img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; background: var(--bg-2); }
.rif-nome { font-weight: 600; color: var(--fg); }
.rif-tipo { color: var(--hint); font-size: 0.72rem; line-height: 1.25; }
.rif-scelta .motivo[hidden] { display: none; }
.dialogo h4 { margin: 12px 0 0; font-size: 0.92rem; }
.dialogo { max-height: 92vh; overflow: auto; }

/* ── Addestramento LoRA: sezione chiusa di default ─────────────────────── */
details.training { margin-top: 24px; }
details.training > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
details.training > summary::-webkit-details-marker { display: none; }
details.training > summary::before { content: "▸"; color: var(--hint); transition: transform 0.15s; }
details.training[open] > summary::before { transform: rotate(90deg); }
details.training > summary .titolo { font-weight: 700; font-size: 1.05rem; }
.training-corpo { margin-top: 12px; }
.griglia-training { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); margin: 10px 0; }
.voce-training { background: var(--card-2); border-radius: var(--r-small); padding: 6px; font-size: 0.78rem; min-width: 0; }
.voce-training img, .voce-training .segnaposto { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px;
  background: var(--bg-2); display: flex; align-items: center; justify-content: center; cursor: zoom-in; padding: 0; }
.voce-training.manca { opacity: 0.6; }
.voce-training .num { font-weight: 600; margin-top: 4px; }
.voce-training .caption { color: var(--hint); overflow-wrap: anywhere; max-height: 7.5em; overflow: auto; }
@media (prefers-reduced-motion: reduce) { details.training > summary::before { transition: none; } }

/* ── Immagini libere e varianti ────────────────────────────────────────── */
.card.libera textarea { width: 100%; }
.riga-campi { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.riga-campi label { display: flex; flex-direction: column; gap: 4px; font-size: 0.84rem; color: var(--hint); }
.riga-campi select, .in-riga select { background: var(--campo); color: var(--fg); border: 1px solid var(--bordo-forte);
  border-radius: 7px; padding: 5px 8px; font: inherit; }
.in-riga { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; color: var(--hint); }
.rif-casella.aggiungi { align-items: center; justify-content: center; min-height: 140px; color: var(--accent-testo);
  font: inherit; border-style: dashed; }
.rif-casella.aggiungi .piu { font-size: 2.2rem; line-height: 1; }
.rif-casella button { align-self: flex-start; }
.galleria-libere { max-width: 520px; }
.lavori-liberi { display: grid; gap: 8px; margin: 12px 0; }

/* ── «Mostra prompt»: la finestra grande al centro ─────────────────────── */
.prompt-profilo { padding: 0 10px; }
.velo-prompt { align-items: center; justify-content: center; padding: 24px; }
.finestra-prompt { width: min(1180px, 96vw); max-width: none; max-height: 92vh; display: flex;
  flex-direction: column; gap: 12px; overflow: hidden; }
.finestra-testa h3 { margin: 0 0 4px; }
.finestra-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px;
  min-height: 0; flex: 1; }
.finestra-corpo .colonna { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.colonna-titolo { font-size: 0.78rem; color: var(--hint); }
.finestra-prompt textarea { flex: 1; min-height: 50vh; width: 100%; resize: vertical;
  font-family: ui-monospace, monospace; font-size: 0.84rem; line-height: 1.45;
  background: var(--campo); color: var(--fg); border: 1px solid var(--bordo-forte); border-radius: 8px; padding: 10px; }
.prompt-traduzione { flex: 1; min-height: 50vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 0.9rem; line-height: 1.5; background: var(--card-2); color: var(--fg); border-radius: 8px; padding: 10px; }
.prompt-avviso { font-size: 0.84rem; color: var(--avviso-testo); background: var(--warn-velo);
  border-radius: var(--r-small); padding: 6px 10px; }
.prompt-traduzione[hidden], .prompt-avviso[hidden] { display: none; }
.finestra-prompt .riga-btn { justify-content: flex-end; margin: 0; }
/* Telefono: a tutto schermo, la traduzione sotto il prompt. */
@media (max-width: 760px) {
  .velo-prompt { padding: 0; }
  .finestra-prompt { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; overflow: auto; }
  .finestra-corpo { grid-template-columns: 1fr; }
  .finestra-prompt textarea, .prompt-traduzione { min-height: 34vh; }
}

/* Immagini libere e varianti in generazione: una tessera per immagine, col
   velo delle card dei seed. */
.griglia-in-generazione { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 12px; }
.tessera-libera { padding: 0; overflow: hidden; }
.tessera-libera .foto { position: relative; aspect-ratio: 3 / 4; background: var(--bg-2); }
.tessera-libera .testo { padding: 6px 8px 8px; font-size: 0.78rem; }
.gen-spinner { flex: none; }   /* nelle tessere strette non si schiaccia in un ovale */
.nota-multipli { color: var(--info-testo); background: var(--accent-velo); border-radius: var(--r-small); padding: 6px 10px; }

/* «Traduci in inglese» sotto i campi di testo */
.traduci-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.traduci-msg:empty { display: none; }

/* ── Generazione libera, compatta (30/9): riferimenti in alto, poi il testo
   e, accanto, le opzioni con costo e «Genera». Accanto solo se c'è spazio
   nella card (container query), altrimenti sotto. */
.libera-compatta { container-type: inline-size; padding: 12px 14px; }
.rif-compatti .rif-griglia { grid-template-columns: repeat(auto-fill, minmax(84px, 96px)); gap: 6px; margin: 4px 0 6px; }
.rif-compatti .rif-casella { padding: 4px; font-size: 0.74rem; gap: 2px; }
.rif-compatti .rif-casella input { top: 7px; left: 7px; }
.rif-compatti .rif-tipo { display: none; }
.rif-compatti .sotto { font-size: 0.76rem; margin: 2px 0; }
.rif-compatti .nota-multipli { padding: 3px 8px; }
.libera-corpo { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin-top: 6px; }
.libera-testo textarea { width: 100%; min-height: 9.5em; resize: vertical; }
.libera-testo .traduci-riga { margin: 4px 0 0; }
.nota-traduzione { font-size: 0.76rem; margin: 4px 0 0; }
.libera-comandi { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.libera-comandi label, .libera-costo { display: flex; flex-direction: column; gap: 3px; font-size: 0.78rem; color: var(--hint); }
.libera-comandi select { background: var(--campo); color: var(--fg); border: 1px solid var(--bordo-forte);
  border-radius: 7px; padding: 5px 8px; font: inherit; font-size: 0.9rem; }
.libera-costo .costo { color: var(--fg); font-size: 0.88rem; }
@container (min-width: 560px) {
  .libera-corpo { grid-template-columns: minmax(0, 1fr) 180px; }
  .libera-comandi { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .libera-comandi select { width: 100%; }
  .libera-comandi .btn { width: 100%; margin-top: 4px; }
}
/* «Mostra prompt» di un'immagine libera: sola lettura, alta quanto serve. */
.finestra-prompt .testi-libera { min-height: 0; }

/* ── Libera e varianti: il modulo e, accanto, le sue immagini (30/9) ────────
   Punti di passaggio (larghezza della SCHEDA, non della finestra):
   - da 900 px: due colonne, modulo a sinistra e galleria a destra;
   - sotto: la galleria subito sotto il modulo.
   Con la pagina larga fino a 1180 px (1480 da 1600 px di finestra) la scheda
   è a due colonne a 1280, 1440 e 1920 px; una finestra stretta passa a una. */
.scheda-libere { container-type: inline-size; }
.libere-colonne { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.libere-risultati { min-width: 0; }
.libere-risultati .titolo-risultati { margin: 0 0 6px; font-size: 0.95rem; }
.libere-risultati .galleria-libere { max-width: none; }
.libere-risultati .griglia-in-generazione { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
@container (min-width: 900px) {
  .libere-colonne { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
@media (min-width: 1600px) { main { max-width: 1480px; } }
/* La foto della galleria accanto al modulo: alta al massimo quanto lo schermo
   permette senza scorrere (l'immagine intera, con object-fit: contain). */
.libere-risultati .galleria-libere .foto { aspect-ratio: auto; height: min(56vh, 520px); }

/* ── Profili e addestramento LoRA: una sezione sola (30/9) ─────────────── */
.sezione-profili-lora > summary { padding: 2px 0; }
.sezione-profili-lora #sezione-profili { margin-top: 12px; }
.sezione-profili-lora .testata h3 { margin: 0; }
.titolo-training { margin: 22px 0 6px; padding-top: 14px; border-top: 1px solid var(--bordo); }
.training-comandi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 8px 0; }
.training-comandi .btn { margin-left: auto; }
.training-precedenti ul { margin: 4px 0 8px; padding-left: 20px; }

/* ── Le schede della pagina della modella (30/9) ───────────────────────────
   Riquadri separati: intestazione (titolo, stato in breve, apri/chiudi),
   bordo, sfondo suo e spazio fra l'uno e l'altro. */
.barra-schede { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 4px; }
.barra-voce { font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--fg); cursor: pointer;
  border: 1px solid var(--bordo-forte); border-radius: 999px; padding: 5px 12px; background: var(--card); }
.barra-voce:hover { border-color: var(--accent-bordo); }
.barra-voce:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.voce-seed { background: var(--scheda-seed); }
.voce-libera { background: var(--scheda-libera); }
.voce-varianti { background: var(--scheda-varianti); }
.voce-profili-lora { background: var(--scheda-profili); }
.scheda-pagina { margin: 18px 0; border: 1px solid var(--bordo-forte); border-left-width: 5px;
  border-radius: var(--radius); scroll-margin-top: 70px; }
.scheda-seed { background: var(--scheda-seed); border-left-color: var(--scheda-seed-filo); }
.scheda-libera { background: var(--scheda-libera); border-left-color: var(--scheda-libera-filo); }
.scheda-varianti { background: var(--scheda-varianti); border-left-color: var(--scheda-varianti-filo); }
.scheda-profili-lora { background: var(--scheda-profili); border-left-color: var(--scheda-profili-filo); }
.scheda-testa { list-style: none; cursor: pointer; display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 4px 12px; padding: 12px 16px; }
.scheda-testa::-webkit-details-marker { display: none; }
.scheda-titolo { font-weight: 700; font-size: 1.12rem; color: var(--fg); }
.scheda-stato { color: var(--hint); font-size: 0.86rem; }
.scheda-freccia { margin-left: auto; color: var(--hint); }
.scheda-freccia::before { content: "▸ apri"; font-size: 0.8rem; }
.scheda-pagina[open] > .scheda-testa .scheda-freccia::before { content: "▾ chiudi"; }
.scheda-pagina[open] > .scheda-testa { border-bottom: 1px solid var(--bordo); }
.scheda-testa:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius); }
.scheda-corpo { padding: 10px 16px 16px; }
.scheda-corpo > h2:first-child { margin-top: 4px; }
@media (max-width: 640px) {
  .scheda-testa { padding: 10px 12px; }
  .scheda-corpo { padding: 8px 10px 12px; }
  .scheda-pagina { border-left-width: 4px; }
}

/* ── Gallerie di libera e varianti (30/9): una grande alla volta, e la vista
   d'insieme a miniature, dalla più recente. */
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.guarda-galleria { margin-top: 8px; }
.galleria-insieme .testata { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.griglia-miniature { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.miniatura { padding: 0; border: 1px solid var(--bordo); border-radius: var(--r-small); background: var(--bg-2);
  cursor: pointer; overflow: hidden; aspect-ratio: 3 / 4; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura:hover, .miniatura:focus-visible { border-color: var(--accent); outline: none; }

/* ── Scheda «Voce» (30/9) ──────────────────────────────────────────────── */
.scheda-voce { background: var(--scheda-voce); border-left-color: var(--scheda-voce-filo); }
.voce-voce { background: var(--scheda-voce); }
.scheda-voce-radice { container-type: inline-size; }
/* Scheda «Voce» rivista (1/10): righe compatte, un lettore solo, niente
   player del browser in vista. */
.voce-modulo { margin-bottom: 12px; }
.voce-modulo h3 { margin: 0; font-size: 0.98rem; }
.voce-testata { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.voce-nuova { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bordo); }
.voce-nuova textarea, .voce-modulo .libera-testo textarea { width: 100%; }
.voce-modulo .libera-testo textarea { min-height: 7.5em; }
.voci-elenco, .audio-elenco { display: grid; gap: 6px; }
.voce-riga, .audio-riga { background: var(--card); border: 1px solid var(--bordo); border-radius: var(--r-small);
  padding: 6px 8px; min-width: 0; }
.voce-riga.attiva { border-color: var(--accent-bordo); }
.voce-riga.suona, .audio-riga.suona { border-color: var(--accent); }
.riga-linea { display: flex; align-items: center; gap: 8px; min-width: 0; }
.btn-suona { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--accent-bordo);
  background: var(--accent-velo); color: var(--accent-testo); font-size: 0.9rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.btn-suona:hover { background: var(--accent); color: var(--accent-fg); }
.btn-suona:focus-visible, .riga-apri:focus-visible, .barra-audio:focus-visible, .menu-scarica > summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }
.riga-apri { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; text-align: left;
  background: none; border: 0; padding: 2px 0; color: var(--fg); font: inherit; cursor: pointer; }
.riga-nome { font-weight: 600; font-size: 0.9rem; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.audio-testo .riga-nome { font-weight: 500; flex: 1 1 100%; }
.riga-meta { font-size: 0.76rem; color: var(--hint); min-width: 0; overflow-wrap: anywhere; }
.voce-dettagli, .audio-dettagli { margin: 6px 0 2px 42px; font-size: 0.86rem; }
.voce-dettagli p, .audio-dettagli p { margin: 0 0 6px; }
.audio-dettagli .testo-audio { white-space: pre-wrap; overflow-wrap: anywhere; }
.audio-centro { flex: 1; min-width: 0; display: grid; gap: 3px; }
.audio-avanzamento { display: flex; align-items: center; gap: 8px; }
.barra-audio { flex: 1; height: 6px; border-radius: 3px; background: var(--card-2); cursor: pointer; position: relative;
  overflow: hidden; }
.barra-audio::before { content: ""; position: absolute; inset: -8px 0; }   /* più facile da prendere col dito */
.barra-piena { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; }
.tempo-audio { flex: none; font-size: 0.76rem; color: var(--hint); font-variant-numeric: tabular-nums; }
.menu-scarica { position: relative; flex: none; }
.menu-scarica > summary { list-style: none; cursor: pointer; width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--hint); border: 1px solid var(--bordo); }
.menu-scarica > summary::-webkit-details-marker { display: none; }
.menu-scarica > summary:hover { color: var(--fg); border-color: var(--bordo-forte); }
.menu-voci { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; min-width: 190px; display: grid;
  background: var(--card-2); border: 1px solid var(--bordo-forte); border-radius: var(--r-small); padding: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); }
.menu-voci a { padding: 6px 8px; border-radius: 6px; color: var(--fg); text-decoration: none; font-size: 0.86rem; }
.menu-voci a:hover { background: var(--accent-velo); }
.audio-riga.in-corso .gen-titolo { font-size: 0.88rem; font-weight: 600; }
.audio-riga.in-corso.coda .gen-spinner { animation-play-state: paused; opacity: 0.5; }
.audio-riga.fallito { border-color: var(--err-bordo); background: var(--err-velo); }
.segno-fallito { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 700; color: var(--err-testo); border: 1px solid var(--err-bordo); }
.motivo-audio { font-size: 0.82rem; color: var(--err-testo); overflow-wrap: anywhere; }
.voce-lavori { margin-bottom: 12px; display: grid; gap: 6px; }
.mostra-altri { margin-top: 8px; }

/* La nota fissa della scheda «Profili e addestramento LoRA»: leggibile (testo
   pieno, contrasto del tema) ma discreta (niente colore d'avviso, un filo a
   sinistra nel colore della scheda). */
.nota-profili { margin: 2px 0 12px; padding: 6px 10px; font-size: 0.86rem; line-height: 1.4;
  color: var(--fg); background: var(--card); border-left: 3px solid var(--scheda-profili-filo);
  border-radius: var(--r-small); }

/* Varianti formose (30/9): la foto corpo, sempre inclusa, fra le caselle dei
   riferimenti; le figure intere in più spente finché il testo non è approvato. */
.rif-casella.fissa { cursor: default; border-style: dashed; justify-content: center; min-height: 80px; background: var(--accent-velo); }
.rif-casella.spenta { opacity: 0.5; cursor: not-allowed; }
.rif-casella.spenta input { cursor: not-allowed; }
.rif-compatti .rif-casella.fissa .rif-tipo { display: block; }

/* ── Scheda «Genera con LoRA» (30/9) ─────────────────────────────────── */
.scheda-lora { background: var(--scheda-lora); border-left-color: var(--scheda-lora-filo); }
.voce-lora { background: var(--scheda-lora); }
.scheda-pagina.scheda-spenta > .scheda-testa .scheda-titolo { color: var(--hint); }
.tessera-fallita { border-color: var(--err-bordo); }
.tessera-fallita .gen-velo.fallito { background: var(--err-velo); color: var(--fg);
  display: flex; flex-direction: column; justify-content: center; gap: .4rem; padding: .8rem; text-align: center; }
.tessera-fallita .gen-titolo { color: var(--err-testo); font-weight: 600; }
.tessera-fallita .gen-motivo { font-size: .85rem; overflow-wrap: anywhere; }
/* Gli URL lunghi (file LoRA) vanno a capo invece di allargare la pagina sul telefono. */
.sotto code { overflow-wrap: anywhere; word-break: break-all; }
/* ▶ e ⏸ del lettore della voce, disegnati: il glifo ⏸ manca in molti font. */
.btn-suona .icona-suona { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor; }
.btn-suona.pausa .icona-suona { width: 10px; height: 12px; margin-left: 0; border-width: 0 3px; border-color: currentColor;
  box-sizing: border-box; }
/* Varianti (2/10): il selettore del modello e la nota sotto un'immagine (filtro di fal). */
.modello-varianti { align-items: center; margin-bottom: 6px; }
.nota-immagine { font-size: 0.8rem; color: var(--warn-testo); background: var(--warn-velo); border-radius: 6px; padding: 2px 8px; }
/* «Viso col LoRA» (2/10): casella e testo sulla stessa riga. */
.viso-lora { align-items: center; }
.viso-lora label.casella { flex-direction: row; align-items: center; gap: 6px; color: var(--fg); font-size: 0.9rem; }

/* ── Pagina «Video» (3/10) ─────────────────────────────────────────────── */
.video-modulo h4 { margin: 12px 0 6px; }
.video-modulo textarea { width: 100%; }
.video-img-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; margin: 4px 0 8px; }
.video-img { position: relative; padding: 0; border: 2px solid var(--bordo); border-radius: 8px; overflow: hidden;
  background: var(--card-2); cursor: pointer; aspect-ratio: 3 / 4; }
.video-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-img.scelta { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-velo); }
.video-img .ordine { position: absolute; top: 4px; left: 4px; min-width: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--accent); color: var(--accent-fg); font-size: 0.75rem; font-weight: 700; }
.video-img .ordine:empty { display: none; }
.video-img.aggiungi { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--accent-testo);
  border-style: dashed; }
.video-parametri label.video-sino { flex-direction: row; align-items: center; gap: 6px; color: var(--fg); }
.video-filtri { margin: 6px 0 10px; }
.video-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.video-card { padding: 8px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.video-card .sotto { overflow-wrap: anywhere; }
.video-schermo { position: relative; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #000;
  aspect-ratio: 9 / 16; width: 100%; cursor: pointer; }
.video-schermo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.video-play { position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid;
  border-width: 18px 0 18px 30px; border-color: transparent transparent transparent rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.6)); }
.video-schermo.vuoto { cursor: default; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 12px;
  text-align: center; background: var(--err-velo); color: var(--fg); }
.video-schermo.vuoto .gen-titolo { color: var(--err-testo); font-weight: 600; }
.video-schermo.vuoto .gen-motivo { font-size: 0.85rem; overflow-wrap: anywhere; }
.video-card.fallito { border-color: var(--err-bordo); }
.video-player { width: 100%; aspect-ratio: 9 / 16; background: #000; border-radius: 8px; }
/* Video (3/10): la miniatura col «×» per togliere dalla selezione e, per le
   caricate mai usate, «Elimina» dal disco. */
.video-img-scegli { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.video-img-scegli:focus-visible, .video-img-togli:focus-visible, .video-img-elimina:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px; }
.video-img-togli { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 16px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.video-img-togli[hidden] { display: none; }
.video-img-togli:hover { background: var(--err); }
.video-img-elimina { position: absolute; left: 3px; right: 3px; bottom: 3px; padding: 2px 0; border-radius: 6px; border: 0;
  background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 0.7rem; cursor: pointer; }
.video-img-elimina:hover { background: var(--err); }
.video-img .ordine { white-space: nowrap; }
/* Prove (3/10): i confronti importati. */
.prove-elenco { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; }
.prova-card { display: block; padding: 10px; border: 1px solid var(--bordo); border-radius: var(--radius); background: var(--card);
  color: inherit; text-decoration: none; }
.prova-card:hover { border-color: var(--accent); }
.prova-miniature { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 8px; }
.prova-miniature img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; background: var(--bg-2); }
.prova-titolo { font-weight: 600; }
.prova-nota { margin-top: 4px; white-space: pre-wrap; }
.prova-immagini { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 14px; }
.prova-immagine { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.prova-apri { padding: 0; border: 1px solid var(--bordo); border-radius: var(--r-small); overflow: hidden; background: var(--bg-2); cursor: zoom-in; }
.prova-apri img { display: block; width: 100%; height: auto; }
.prova-immagine figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.prova-etichetta { font-weight: 600; flex: 1 1 auto; }
.prova-azioni { margin-top: 18px; }
/* «Forme corpo» (3/10): la prima scelta, «Dalla stessa foto», senza miniatura. */
.corpo-composta .stessa-foto { display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 3 / 4; padding: 8px; border: 1px dashed var(--bordo-forte); border-radius: var(--r-small);
  color: var(--hint); font-size: 0.8rem; }
/* «Mostra prompt» (3/10): la parte fissa che va sempre in testa, solo da leggere. */
.prompt-fisso { margin-bottom: 8px; }
.prompt-fisso summary { cursor: pointer; color: var(--hint); font-size: 0.85rem; }
.prompt-fisso-testo { margin-top: 6px; padding: 8px; max-height: 220px; overflow: auto; white-space: pre-wrap;
  font-size: 0.8rem; color: var(--hint); background: var(--bg-2); border: 1px solid var(--bordo); border-radius: var(--r-small); }
/* «Pose» delle varianti (4/10). */
.pose-varianti { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.pose-varianti .posa-riga { display: flex; align-items: center; gap: 6px; }
.pose-varianti .posa-riga .casella { flex: 1 1 auto; }

/* ── Social (5/10) ───────────────────────────────────────────────────── */
.chip.errore { color: var(--err-testo); background: var(--err-velo); }
.stato-social.stato-programmato, .stato-social.stato-in_coda { color: var(--info-testo); background: var(--accent-velo); }
.stato-social.stato-pubblicato { color: var(--ok-testo); background: var(--ok-velo); }
.stato-social.stato-parziale { color: var(--warn-testo); background: var(--warn-velo); }
.stato-social.stato-fallito { color: var(--err-testo); background: var(--err-velo); }
.cal-testa { align-items: center; }
.cal-titolo { min-width: 160px; text-align: center; text-transform: capitalize; }
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 12px 0 20px; }
/* 9/10: i giorni della settimana ben visibili, oggi col bordo giallo */
.cal-intestazione { font-size: 13px; font-weight: 700; color: var(--fg); text-align: center; padding: 8px 0; border-radius: 8px;
  background: var(--card-2); text-transform: uppercase; letter-spacing: .04em; }
.cal-intestazione.fine-settimana { color: var(--accent); }
.cal-int-corto { display: none; }
.cal-giorno { min-height: 104px; background: var(--card); border: 1px solid var(--bordo); border-radius: 10px; padding: 6px;
  display: flex; flex-direction: column; gap: 4px; overflow: hidden; min-width: 0; }
.cal-giorno.fine-settimana { background: color-mix(in srgb, var(--card) 88%, var(--accent) 12%); }
.cal-giorno.passato { opacity: .55; }
.cal-giorno.vuoto { background: transparent; border-color: transparent; }
.cal-giorno.cal-oggi { border: 2px solid var(--warn); box-shadow: 0 0 0 3px var(--warn-velo); }
.cal-numero { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--fg); }
.cal-oggi .cal-numero > span:first-child { background: var(--warn); color: #2b1a00; border-radius: 999px; min-width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.cal-oggi-etichetta { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--warn-testo); }
.cal-post { display: flex; gap: 6px; align-items: center; font-size: 11.5px; line-height: 1.25; padding: 4px; border-radius: 8px;
  background: var(--card-2); color: var(--fg); text-decoration: none; border-left: 3px solid var(--hint); min-width: 0; }
.cal-post:hover { outline: 1px solid var(--accent); }
.cal-mini { width: 30px; height: 38px; object-fit: cover; border-radius: 5px; flex: 0 0 auto; }
.cal-post-testo { display: flex; flex-direction: column; min-width: 0; }
.cal-riga, .cal-stato { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-stato { font-size: 10px; color: var(--hint); }
.cal-post.stato-programmato, .cal-post.stato-in_coda { border-left-color: var(--accent); }
.cal-post.stato-pubblicato { border-left-color: var(--ok); }
.cal-post.stato-parziale { border-left-color: var(--warn); }
.cal-post.stato-fallito { border-left-color: var(--err); }
.cal-ora { font-weight: 700; }
.elenco-post { padding-left: 18px; }
.post-card { text-decoration: none; color: var(--fg); }
.post-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-small); }
.media-post { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 10px 0; }
.media-voce { margin: 0; position: relative; }
.media-voce img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.media-video { position: absolute; top: 6px; left: 6px; }
.media-voce figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.galleria-scelta { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; max-height: 60vh; overflow-y: auto; margin-top: 10px; }
.scelta-media { padding: 0; border: 2px solid transparent; border-radius: var(--r-small); background: var(--bg-2); cursor: pointer; display: flex; flex-direction: column; overflow: hidden; color: var(--fg); }
.scelta-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.scelta-media.scelta { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-velo); }
.contatori-social { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.anteprima-img { width: 100%; max-width: 360px; border-radius: var(--r-small); display: block; }
.anteprima-testo { white-space: pre-wrap; font-size: 14px; }
.nota-post { white-space: pre-wrap; }
.riga-account { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--bordo); }
.riga-account.spento { opacity: 0.55; }
.scheda-json { max-height: 60vh; overflow: auto; font-size: 12px; background: var(--codice); padding: 10px; border-radius: var(--r-small); white-space: pre-wrap; }
.idea .testi-idea { padding-left: 18px; }
.lora-viso .esclusa img { opacity: 0.4; }
@media (max-width: 720px) {
  .cal-giorno { min-height: 64px; padding: 3px; }
  .cal-post { font-size: 10px; }
  .cal-mini, .cal-stato { display: none; }
  .cal-int-lungo { display: none; }
  .cal-int-corto { display: inline; }
}

/* ── Chat (5/10) ─────────────────────────────────────────────────────── */
.albero { margin: 4px 0 4px 8px; padding: 0; }
.albero details > summary { cursor: pointer; text-transform: capitalize; color: var(--hint); }
.albero-riga { display: flex; gap: 8px; font-size: 13.5px; }
.albero-riga dt { color: var(--hint); min-width: 170px; }
.albero-riga dd { margin: 0; }
.editor-prompt { width: 100%; font-family: ui-monospace, monospace; font-size: 13px; }
.versioni li { margin: 6px 0; }
.tabella { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabella th, .tabella td { text-align: left; padding: 6px; border-bottom: 1px solid var(--bordo); }
.messaggi-chat { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.fumetto { max-width: 75%; padding: 8px 12px; border-radius: 14px; white-space: pre-wrap; }
.fumetto.fan { align-self: flex-start; background: var(--card-2); }
.fumetto.lei { align-self: flex-end; background: var(--accent-velo); border: 1px solid var(--accent-bordo); }
.prova-immagine.spento { opacity: 0.55; }

/* Video: i modi delle immagini come schede (5/10) */
.modi-video { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.modo-video { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r-small);
  border: 1px solid var(--bordo); background: var(--card-2); color: var(--fg); cursor: pointer; }
.modo-video.scelto { border-color: var(--accent-bordo); background: var(--accent-velo); }
.modi-video > p { grid-column: 1 / -1; margin: 0; }

/* Video: la legenda dell'audio e l'ascolto della voce scelta (5/10) */
.legenda-audio { margin-top: 4px; }
.video-audio-ascolta { width: 100%; max-width: 360px; margin-top: 6px; }
.spiega-audio p { margin: 4px 0; }
.titolo-audio { display: block; margin-top: 8px; }

/* Seed: «Cosa riceve il modello» (6/10) */
.testo-inviato { white-space: pre-wrap; max-height: 50vh; overflow: auto; }
.rif-mini { margin: 0; text-align: center; }
.rif-mini img { border-radius: 6px; display: block; }


/* ════════════════════════════════════════════════════════════════════════
   Guscio e rifiniture (6/10): barra in alto con le aree, barra laterale con
   le sezioni dell'area, componenti più morbidi.
   ════════════════════════════════════════════════════════════════════════ */
html, body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; }
body { background:
  radial-gradient(1200px 500px at 85% -10%, var(--accent-velo), transparent 60%), var(--bg); background-attachment: fixed; }
h1 { font-size: 1.65rem; font-weight: 750; letter-spacing: -0.015em; }
h2 { font-weight: 700; letter-spacing: -0.01em; }
::selection { background: var(--accent-velo); }

/* Barra in alto */
.topbar { padding: 10px 22px; gap: 18px; box-shadow: 0 1px 0 var(--bordo); border-bottom: none; }
.marchio { display: inline-flex; align-items: center; gap: 9px; color: var(--fg); text-decoration: none;
  font-weight: 650; font-size: 1.08rem; letter-spacing: -0.01em; }
.marchio b { font-weight: 800; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.marchio-segno { width: 26px; height: 26px; border-radius: 9px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: var(--ombra-accento); position: relative; }
.marchio-segno::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.9); }
.aree { gap: 2px; }
.aree a { padding: 7px 13px; font-weight: 600; font-size: 0.92rem; transition: background 0.15s, color 0.15s; }
.aree a:hover { color: var(--fg); background: var(--accent-velo); }
.aree a.attiva { background: var(--accent-velo); color: var(--accent-testo); box-shadow: inset 0 0 0 1px var(--accent-bordo); }
.tema { min-width: 36px; height: 34px; border-radius: 999px; font-size: 1rem; }

/* Guscio: barra laterale + pagina */
.guscio { display: block; }
.guscio.con-laterale { display: grid; grid-template-columns: 236px minmax(0, 1fr); align-items: start; }
.guscio.con-laterale > main { margin: 0; max-width: 1240px; width: 100%; }
.laterale { position: sticky; top: 57px; height: calc(100vh - 57px); overflow-y: auto; padding: 18px 12px 30px;
  background: var(--laterale); border-right: 1px solid var(--bordo); }
.laterale-titolo { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--hint); padding: 0 10px 8px; }
.laterale-voci { display: flex; flex-direction: column; gap: 2px; }
.laterale-gruppo { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--hint); padding: 16px 10px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.laterale-voce { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; align-items: center;
  width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px; border: none; background: transparent;
  color: var(--fg); text-decoration: none; font: inherit; font-weight: 600; font-size: 0.93rem; cursor: pointer;
  transition: background 0.15s, color 0.15s; }
.laterale-voce:hover { background: var(--accent-velo); }
.laterale-voce:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.laterale-voce.attiva { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-fg);
  box-shadow: var(--ombra-accento); }
.laterale-voce.attiva .laterale-sotto, .laterale-voce.attiva .laterale-icona { color: rgba(255, 255, 255, 0.85); }
.laterale-voce.secondaria { font-weight: 500; color: var(--hint); }
.laterale-voce.secondaria:hover { color: var(--fg); }
.laterale-icona { grid-column: 1; text-align: center; color: var(--accent-testo); font-size: 0.95rem; }
.laterale-testo { grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.laterale-sotto { grid-column: 2; font-size: 0.75rem; font-weight: 500; color: var(--hint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.laterale-voce:not(:has(.laterale-icona)) .laterale-testo,
.laterale-voce:not(:has(.laterale-icona)) .laterale-sotto { grid-column: 1 / -1; }
/* Telefono e finestre strette: la barra laterale diventa una riga che scorre
   di lato, sotto quella in alto. */
@media (max-width: 900px) {
  .guscio.con-laterale { display: block; }
  .laterale { position: sticky; top: 0; z-index: 9; height: auto; overflow-x: auto; overflow-y: hidden;
    padding: 8px 12px; border-right: none; border-bottom: 1px solid var(--bordo); scrollbar-width: none; }
  .laterale::-webkit-scrollbar { display: none; }
  .laterale-titolo, .laterale-gruppo, .laterale-sotto { display: none; }
  .laterale-voci { flex-direction: row; gap: 6px; }
  .laterale-voce { width: auto; flex: 0 0 auto; display: inline-flex; gap: 6px; padding: 6px 12px;
    border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--bordo); }
  .laterale-voce.secondaria { display: none; }
  .laterale-voce.secondaria:first-child { display: inline-flex; }
}

/* Componenti */
.card { box-shadow: var(--ombra); border-color: var(--bordo); }
.btn { border-radius: 11px; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.05s; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primario { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent;
  box-shadow: var(--ombra-accento); }
.btn.primario:hover:not(:disabled) { filter: brightness(1.06); }
.btn.fantasma:hover { background: var(--accent-velo); }
input[type=text], input[type=password], textarea, select { border-radius: 11px; transition: border-color 0.15s, box-shadow 0.15s; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-velo); }
.chip { font-weight: 600; }
.testata-scheda { margin: 6px 0 4px; }
.testata-scheda h2 { font-size: 1.35rem; margin: 10px 0 2px; }
.testata-scheda p { margin: 0 0 6px; }
.scheda-pagina { border-radius: var(--radius); box-shadow: var(--ombra); border-color: var(--bordo); }
.modella { transition: transform 0.15s, box-shadow 0.15s; }
.modella:hover { transform: translateY(-2px); box-shadow: var(--ombra), var(--ombra-accento); }
.dialogo { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); }
.velo { backdrop-filter: blur(3px); }
@media (max-width: 640px) {
  .marchio .marchio-segno { display: block; }
}
@media (max-width: 900px) {
  .laterale { position: static; }
}

/* Varianti (6/10): pose in un menu, opzioni e ritocco del viso ben visibili */
.scelta-posa { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.scelta-posa > label { display: flex; flex-direction: column; gap: 4px; min-width: 240px; flex: 1 1 260px; }
.scelta-posa > label > span { font-size: 0.78rem; color: var(--hint); }
.opzioni-forti { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 6px 0 12px; }
.opzione-forte, .riquadro-viso-testa { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px;
  align-items: start; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--bordo-forte); background: var(--card); transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.opzione-forte:hover, .riquadro-viso-testa:hover { border-color: var(--accent-bordo); }
.opzione-forte.accesa { border-color: var(--accent); background: var(--accent-velo); box-shadow: inset 0 0 0 1px var(--accent-bordo); }
.opzione-forte > input, .riquadro-viso-testa > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opzione-testo { display: flex; flex-direction: column; gap: 2px; grid-column: 2; }
.opzione-testo strong, .riquadro-viso-testa strong { font-size: 0.98rem; color: var(--fg); }
.opzione-dentro { grid-column: 2; display: flex; gap: 8px; align-items: center; margin-top: 6px; font-size: 0.85rem; color: var(--hint); }
.opzione-dentro select { width: auto; }
.interruttore { grid-column: 1; grid-row: 1; width: 40px; height: 22px; margin-top: 1px; border-radius: 999px;
  background: var(--bordo-forte); position: relative; transition: background 0.15s; }
.interruttore::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.15s; }
input:checked + .interruttore { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
input:checked + .interruttore::after { transform: translateX(18px); }
input:focus-visible + .interruttore { outline: 2px solid var(--accent); outline-offset: 2px; }
input:disabled + .interruttore { opacity: 0.45; }
.riquadro-viso { margin: 14px 0; padding: 4px; border-radius: 16px; border: 2px solid var(--accent-bordo);
  background: linear-gradient(135deg, var(--accent-velo), transparent 70%); }
.riquadro-viso.acceso { border-color: var(--accent); box-shadow: var(--ombra-accento); }
.riquadro-viso-testa { border: none; background: transparent; }
.riquadro-viso-testa > span:last-child { grid-column: 2; display: flex; flex-direction: column; }
.riquadro-viso-testa strong { font-size: 1.08rem; }
.riquadro-viso .viso-lora { padding: 0 14px 12px 70px; }
@media (max-width: 640px) { .riquadro-viso .viso-lora { padding: 0 12px 12px; } }

/* Marchio (6/10): «Musa», col logo */
.marchio-logo { display: block; width: 30px; height: 30px; filter: drop-shadow(0 4px 10px rgba(214, 58, 108, 0.35)); }
.marchio .marchio-nome { font-weight: 800; font-size: 1.18rem; letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 640px) { .marchio .marchio-nome { display: inline; } }
.login-marchio { text-align: center; margin-bottom: 8px; }
.login-marchio img { display: block; margin: 0 auto 6px; filter: drop-shadow(0 8px 20px rgba(214, 58, 108, 0.35)); }
.login-marchio h1 { margin: 0; font-size: 1.9rem; }
.login-marchio p { margin: 2px 0 0; }

/* Barra laterale (6/10): avatar col volto, menu delle altre modelle */
.laterale-avatar { grid-column: 1; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; display: inline-flex;
  align-items: center; justify-content: center; background: var(--accent-velo); color: var(--accent-testo);
  font-size: 0.75rem; font-weight: 700; box-shadow: 0 0 0 2px var(--card); }
.laterale-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.laterale-voce.attiva .laterale-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8); }
.laterale-voce:has(.laterale-avatar) .laterale-testo { grid-column: 2; }
.laterale-menu { margin: 6px 4px 0; width: calc(100% - 8px); font-size: 0.88rem; padding: 7px 10px; }
@media (max-width: 900px) { .laterale-menu { width: auto; margin: 0; flex: 0 0 auto; } }
/* ★ sulla card: la modella nella barra laterale */
.modella .foto { position: relative; }
.stella-modella { position: absolute; top: 8px; right: 8px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  border: none; cursor: pointer; font-size: 1.05rem; line-height: 1; color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(4px); transition: transform 0.1s, background 0.15s; }
.stella-modella:hover { transform: scale(1.08); }
.stella-modella.accesa { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: var(--ombra-accento); }
.condivisa.accesa { color: var(--accent-testo); background: var(--accent-velo); }

/* La modella attiva nella barra in alto (6/10) */
.modella-attiva { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px;
  border: 1px solid var(--accent-bordo); background: var(--accent-velo); color: var(--fg); cursor: pointer; font: inherit;
  max-width: 230px; margin-left: auto; transition: box-shadow 0.15s; }
.modella-attiva:hover { box-shadow: var(--ombra-accento); }
.modella-attiva + .tema { margin-left: 0; }
.attiva-avatar { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; display: inline-flex;
  align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-weight: 700; box-shadow: 0 0 0 2px var(--card); }
.attiva-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.attiva-testo { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; text-align: left; }
.attiva-etichetta { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-testo); }
.attiva-nome { font-weight: 700; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attiva-freccia { color: var(--hint); font-size: 0.8rem; }
.menu-attiva { position: fixed; top: 58px; right: 16px; z-index: 40; width: 260px; max-height: 70vh; overflow-y: auto;
  padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.utente { margin-left: 0; }
@media (max-width: 640px) {
  .modella-attiva { max-width: 170px; padding-right: 8px; }
  .attiva-etichetta { display: none; }
  .menu-attiva { left: 12px; right: 12px; width: auto; top: 110px; }
}

/* NSFW (6/10): la foto di partenza scelta fra le foto corpo e la sezione */
.nsfw-partenze .rif-casella input[type=radio] { position: absolute; top: 6px; left: 6px; z-index: 1; }
.rif-casella.scelta { outline: 3px solid var(--accent); outline-offset: -3px; }
.nessuna-partenza { display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px;
  aspect-ratio: 3 / 4; color: var(--hint); font-size: 0.85rem; background: var(--bg-2); border-radius: 8px; }
/* Riferimenti volto e ritocco del viso affiancati, in alto (6/10) */
.rif-e-viso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.rif-e-viso .riquadro-viso { margin: 10px 0 0; }
@container (max-width: 760px) { .rif-e-viso { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .rif-e-viso { grid-template-columns: 1fr; } }

/* Posa ed espressione affiancate, la posa in un menu di card con la figurina (6/10) */
.posa-e-espressione { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 10px; }
@media (max-width: 760px) { .posa-e-espressione { grid-template-columns: 1fr; } }
.etichetta-campo { display: block; font-size: 0.78rem; color: var(--hint); margin-bottom: 4px; }
.campo-posa .riga-btn { margin-top: 6px; }
.campo-espressione select { width: 100%; }
.tendina-posa { position: relative; }
.tendina-posa-bottone { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 12px 6px 6px; cursor: pointer;
  border: 1px solid var(--bordo-forte); border-radius: 12px; background: var(--campo); color: var(--fg); font: inherit; text-align: left; }
.tendina-posa-bottone:hover { border-color: var(--accent-bordo); }
.tendina-posa-bottone .posa-nome { flex: 1 1 auto; font-weight: 600; }
.tendina-posa-pannello { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; min-width: 300px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; padding: 10px; max-height: 420px; overflow-y: auto;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22); }
.card-posa { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--bordo); background: var(--card); color: var(--fg); font: inherit; font-size: 0.8rem; text-align: center; }
.card-posa:hover { border-color: var(--accent-bordo); background: var(--accent-velo); }
.card-posa.scelta { border-color: var(--accent); background: var(--accent-velo); box-shadow: inset 0 0 0 1px var(--accent); }
.figura-posa { width: 46px; height: 46px; flex: 0 0 auto; fill: none; stroke: var(--accent-testo); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round; }
.card-posa .figura-posa { width: 58px; height: 58px; }
.figura-posa .pieno { fill: var(--accent-testo); stroke: none; }
.figura-posa .suolo { stroke: var(--hint); stroke-width: 1.6; opacity: 0.7; fill: none; }
.figura-posa .freccia { stroke-width: 2; fill: none; }
.tendina-posa-bottone .figura-posa { background: var(--accent-velo); border-radius: 9px; padding: 3px; }

/* La colonna dei risultati resta in vista mentre si scorre il modulo (6/10) */
@container (min-width: 900px) {
  .libere-risultati { position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow-y: auto; }
}

/* Personalità della modella (6/10) */
.personalita { display: grid; gap: 16px; }
.personalita .card h2 { margin-top: 2px; }
.scheda-personalita { border: 1px solid var(--bordo); border-radius: 14px; padding: 14px 16px; background: var(--bg-2); margin: 10px 0; }
.scheda-personalita-testa { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.scheda-personalita-nome { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; }
.scheda-personalita dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 14px; margin: 0; }
.scheda-personalita dt { color: var(--hint); font-size: 0.82rem; font-weight: 600; padding-top: 1px; }
.scheda-personalita dd { margin: 0; }
@media (max-width: 640px) { .scheda-personalita dl { grid-template-columns: 1fr; } .scheda-personalita dd { margin-bottom: 6px; } }
.proposta-personalita { border: 2px solid var(--accent-bordo); background: var(--accent-velo); }
.testo-chat { font-size: 0.92rem; line-height: 1.5; }
.avviso .gen-spinner { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; }

/* Chat (6/10): il cruscotto e le conversazioni affiancate */
.cruscotto { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 14px; }
.tessera-numero { background: var(--card); border: 1px solid var(--bordo); border-radius: 16px; padding: 14px 16px; box-shadow: var(--ombra); }
.tessera-numero.allarme { border-color: var(--accent); background: var(--accent-velo); }
.tessera-titolo { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hint); }
.tessera-valore { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; margin: 2px 0; }
.cruscotto-colonne { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 14px; }
@media (max-width: 860px) { .cruscotto-colonne { grid-template-columns: 1fr; } }
.riga-fare, .riga-conv { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; color: var(--fg);
  text-decoration: none; border: 1px solid var(--bordo); margin-bottom: 6px; background: var(--card); }
.riga-fare.allarme { border-color: var(--accent-bordo); background: var(--accent-velo); font-weight: 600; }
.riga-conv:hover, .riga-fare:hover { border-color: var(--accent-bordo); }
.riga-conv .destra { margin-left: auto; }
.riga-stato { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.conv-colonne { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .conv-colonne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .conv-colonne > :last-child { position: sticky; top: 72px; } }
.mini-post { width: 40px; height: 52px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; background: var(--bg-2); display: inline-block; }
a.tessera-numero { color: var(--fg); text-decoration: none; }
a.tessera-numero:hover { border-color: var(--accent-bordo); }
.figura-posa .capelli { stroke-width: 2.6; }
.figura-posa .bacino { stroke-width: 3.4; }

/* Icone delle aree e pulsante Giorno/Notte (6/10) */
.aree a { display: inline-flex; align-items: center; gap: 6px; }
.area-icona { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.tema { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; }
.tema-parola { font-size: 0.85rem; font-weight: 600; }
@media (max-width: 1100px) { .tema-parola { display: none; } .tema { padding: 0; } }
.riga-menu-attiva { display: flex; align-items: center; gap: 4px; }
.riga-menu-attiva .laterale-voce { flex: 1 1 auto; }
.stella-menu { border: none; background: transparent; color: var(--bordo-forte); font-size: 1.05rem; cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.stella-menu:hover { background: var(--accent-velo); color: var(--accent-testo); }
.stella-menu.accesa { color: var(--accent); }

/* Il blocco profilo della modella in cima alla barra laterale (6/10) */
.profilo-modella { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; margin-bottom: 10px; cursor: pointer;
  border: 1px solid var(--accent-bordo); border-radius: 16px; background: linear-gradient(135deg, var(--accent-velo), transparent);
  color: var(--fg); font: inherit; text-align: left; }
.profilo-modella:hover { box-shadow: var(--ombra-accento); }
.profilo-avatar { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; display: inline-flex; align-items: center;
  justify-content: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 800; font-size: 1.3rem;
  box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--accent-bordo); }
.profilo-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.profilo-nome { font-weight: 800; font-size: 1.08rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profilo-modella .attiva-testo { flex: 1 1 auto; }
.menu-attiva-azioni { display: flex; gap: 6px; padding: 8px 4px 4px; border-top: 1px solid var(--bordo); margin-top: 6px; }
.menu-attiva-azioni .btn { flex: 1 1 auto; }
@media (max-width: 900px) { .profilo-modella { width: auto; flex: 0 0 auto; margin: 0 6px 0 0; padding: 4px 10px 4px 4px; }
  .profilo-avatar { width: 30px; height: 30px; font-size: 0.9rem; } .laterale:has(.profilo-modella) { display: flex; align-items: center; } }

/* La modella nella barra in alto: un elemento solo (6/10) */
.aree .modella-attiva { display: inline-flex; align-items: center; gap: 0; padding: 0; margin: 0 4px 0 0; max-width: 240px;
  border: 1px solid var(--accent-bordo); background: var(--accent-velo); border-radius: 999px; }
.aree .modella-attiva.attiva { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; }
.aree .modella-attiva.attiva .attiva-nome, .aree .modella-attiva.attiva .attiva-etichetta, .aree .modella-attiva.attiva .attiva-freccia { color: #fff; }
.aree .modella-attiva .attiva-vai { display: inline-flex; align-items: center; gap: 8px; padding: 3px 4px 3px 3px; border-radius: 999px;
  text-decoration: none; color: var(--fg); background: none; box-shadow: none; min-width: 0; }
.aree .modella-attiva .attiva-vai:hover { background: none; }
.aree .modella-attiva .attiva-avatar { width: 30px; height: 30px; }
.aree .modella-attiva .attiva-freccia { border: none; background: transparent; cursor: pointer; padding: 6px 10px 6px 6px; font-size: 0.85rem;
  color: var(--hint); border-radius: 0 999px 999px 0; }
.aree .modella-attiva .attiva-freccia:hover { color: var(--accent-testo); }
@media (max-width: 640px) { .aree .modella-attiva { max-width: 180px; } .aree .modella-attiva .attiva-etichetta { display: none; } }

/* «Oggi» sul telefono (6/10) */
.solo-telefono { display: none !important; }
@media (max-width: 700px) { .solo-telefono { display: inline-flex !important; } }
.oggi { display: grid; gap: 12px; max-width: 640px; margin: 0 auto; }
.oggi-modella .profilo-modella { width: 100%; }
.scorciatoie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.scorciatoia { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 14px; text-decoration: none;
  color: var(--fg); background: var(--bg-2); border: 1px solid var(--bordo); font-weight: 600; font-size: 0.85rem; }
.scorciatoia:active { transform: scale(0.98); }
.scorciatoia-icona { font-size: 1.3rem; color: var(--accent-testo); }
.oggi-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.oggi-mini { padding: 0; border: none; border-radius: 10px; overflow: hidden; aspect-ratio: 3 / 4; cursor: pointer; background: var(--bg-2); }
.oggi-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.campo-modella { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.campo-modella .etichetta-campo { flex-basis: 100%; margin: 0; }
.campo-modella .profilo-modella { width: auto; min-width: 240px; margin: 0; }
.famiglie-video { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.fam-video { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--bordo);
  background: var(--bg-2); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.fam-video .sotto { display: block; font-size: 0.8rem; }
.fam-video.attiva { border-color: var(--accent); background: var(--accent-velo); box-shadow: 0 0 0 1px var(--accent) inset; }
.fam-icona { font-size: 1.5rem; }
.menu-attiva > * { flex-shrink: 0; }
.menu-attiva { width: 290px; }

/* Ritocco viso compatto (6/10 sera) */
.riquadro-viso.compatto { padding: 2px; margin: 8px 0 0; }
.riquadro-viso.compatto .riquadro-viso-testa { grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 2px 12px; padding: 8px 12px; }
.riquadro-viso.compatto .riquadro-viso-testa .interruttore { grid-row: 1 / span 2; }
.riquadro-viso.compatto .riquadro-viso-testa strong { font-size: 1rem; grid-column: 2; white-space: nowrap; }
.riquadro-viso.compatto .chip-viso { grid-column: 2; justify-self: start; }
.chip-viso { font-size: 0.78rem; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-velo); color: var(--accent-testo); white-space: nowrap; }
.riquadro-viso.compatto .viso-compatto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 12px 10px 68px; }
.riquadro-viso.compatto .viso-compatto label { display: flex; align-items: center; gap: 8px; margin: 0; flex: 1 1 180px; }
.riquadro-viso.compatto .viso-compatto label > span { margin: 0; font-size: 0.85rem; color: var(--hint); }
.riquadro-viso.compatto .viso-compatto select { flex: 1 1 auto; min-width: 0; }
.riquadro-viso.compatto:not(.acceso) .viso-compatto { display: none; }
.rif-e-viso > * { min-width: 0; }
.rif-e-viso .riquadro-viso { max-width: 100%; box-sizing: border-box; }
.chip-viso { white-space: normal; }
.riquadro-viso.compatto .viso-compatto { padding-left: 12px; }
.chip-viso { border-radius: 10px; }
.come-funziona { padding: 12px 14px; border-radius: 14px; background: var(--accent-velo); border: 1px solid var(--accent-bordo); margin: 10px 0; }
.come-funziona ol { margin: 6px 0; padding-left: 20px; }
.come-funziona li { margin: 3px 0; }
.esempio-indicazioni { font-style: italic; margin: 6px 0 0; }
/* Il menu delle modelle nella colonna di sinistra (6/10) */
.menu-attiva.in-laterale { max-height: calc(100vh - 140px); box-shadow: var(--ombra-accento), 0 18px 40px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--accent-bordo); animation: scendi-menu 0.14s ease-out; }
@keyframes scendi-menu { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.menu-attiva { overflow: hidden; }
.menu-attiva-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.menu-attiva-lista > * { flex-shrink: 0; }
.menu-attiva-azioni { flex: 0 0 auto; background: var(--card); }
.menu-attiva-azioni { display: grid; grid-template-columns: 1fr; }
.menu-attiva-azioni .btn { justify-content: center; text-align: center; }
/* Icone colorate nella barra in alto (6/10): scuro di base, chiaro ridefinito */
.area-icona.icona-video { color: #b39bff; }
.area-icona.icona-nsfw { color: #ff7a6e; }
.area-icona.icona-prove { color: #4fd1bd; }
.area-icona.icona-social { color: #7db4ff; }
.area-icona.icona-chat { color: #ffcb47; }
.area-icona.icona-impostazioni { color: #b3b8c4; }
.area-icona.icona-oggi { color: var(--accent); }
[data-tema="chiaro"] .area-icona.icona-video { color: #7c4dff; }
[data-tema="chiaro"] .area-icona.icona-nsfw { color: #e8473c; }
[data-tema="chiaro"] .area-icona.icona-prove { color: #0f9d8a; }
[data-tema="chiaro"] .area-icona.icona-social { color: #2f80ed; }
[data-tema="chiaro"] .area-icona.icona-chat { color: #d18f00; }
[data-tema="chiaro"] .area-icona.icona-impostazioni { color: #6b7080; }
.aree a.attiva .area-icona { color: currentColor; }

/* In evidenza (6/10): la scelta del modello e il ritocco del viso */
.modello-forte { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px;
  border: 2px solid var(--accent); background: linear-gradient(135deg, var(--accent-velo), transparent); box-shadow: var(--ombra-accento); }
.modello-forte > span { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-testo); margin: 0; }
.modello-forte select { font-size: 1.02rem; font-weight: 700; padding: 10px 12px; border: 1px solid var(--accent-bordo); border-radius: 10px; }
.modello-varianti .modello-forte { flex: 1 1 320px; }
.btn.btn-viso { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none; font-weight: 800;
  padding: 9px 16px; box-shadow: var(--ombra-accento); }
.btn.btn-viso:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.btn.btn-viso:disabled { opacity: 0.6; }
.btn-viso-icona { margin-right: 6px; }
.libera-compatta > .modello-forte { margin-bottom: 12px; }

/* «Programma» e Telegram (6/10) */
.dialogo-programma { display: grid; gap: 10px; }
.mini-programma { max-height: 160px; max-width: 120px; border-radius: 10px; object-fit: cover; }
.dove-programma, .canali-tg { display: grid; gap: 6px; }
.riga-canale { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
input.stelle { width: 96px; }
.guida-tg li { margin: 4px 0; }
.stato-social.stato-da_approvare { background: var(--accent-velo); color: var(--accent-testo); }
.figura-posa .mira { stroke-width: 1.4; stroke-dasharray: 2 2; }
.consiglio-modello { margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: var(--accent-velo); color: var(--accent-testo); font-size: 0.85rem; font-weight: 600; }
.dialogo-ritocchi { display: grid; gap: 10px; }
.riquadro-ritocco { padding: 10px 12px; border: 1px solid var(--accent-bordo); border-radius: 12px; background: var(--accent-velo); display: grid; gap: 6px; }
.colonna-modello { display: grid; gap: 8px; align-content: start; }
.colonna-modello .riquadro-viso { margin-top: 4px; }
ul.consiglio-modello { margin: 0; padding: 8px 10px 8px 26px; }
ul.consiglio-modello li { margin: 3px 0; }
.colonna-modello { display: grid; gap: 8px; align-content: start; }
.colonna-modello .riquadro-viso { margin-top: 4px; }
ul.consiglio-modello { margin: 0; padding: 8px 10px 8px 26px; }
ul.consiglio-modello li { margin: 3px 0; }
body.fuori .aree, body.fuori .tema, body.fuori #barra-utente, body.fuori .laterale { display: none !important; }
.indicazioni-modello { border: 1px solid var(--accent-bordo); border-radius: 12px; background: var(--accent-velo); }
.indicazioni-modello > summary { cursor: pointer; padding: 8px 12px; font-weight: 700; color: var(--accent-testo); }
.indicazioni-modello ul.consiglio-modello { background: transparent; padding-top: 0; }
.area-icona.icona-sfw { color: #e07a1f; } [data-tema="chiaro"] .area-icona.icona-sfw { color: #c2620c; }
.corpi-di-serie { margin: 4px 0 8px; align-items: center; }
.chip.corporatura { position: absolute; top: 6px; right: 6px; background: var(--accent); color: #fff; font-size: 0.72rem; }
.rif-casella { position: relative; }
.opzione-dentro.largo { flex: 1 1 100%; } .opzione-dentro.largo input { width: 100%; }
/* Le miniature dei riferimenti (7/10, rifatte): più grandi, coi comandi sull'immagine */
.rif-compatti .rif-griglia { grid-template-columns: repeat(auto-fill, minmax(132px, 156px)); gap: 10px; }
.rif-compatti .rif-casella { padding: 6px; font-size: 0.8rem; gap: 4px; }
.rif-foto { position: relative; display: block; border-radius: 8px; overflow: hidden; }
.rif-foto img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; }
.rif-casella input { z-index: 2; }
.rif-nav, .rif-galleria { position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border: none; color: #fff; background: rgba(20, 10, 15, 0.42); backdrop-filter: blur(4px); transition: opacity .15s, background .15s; }
.rif-nav svg, .rif-galleria svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rif-galleria svg { fill: currentColor; stroke: none; width: 15px; height: 15px; }
.rif-nav { top: 0; bottom: 0; width: 30px; border-radius: 0; opacity: 0; }
.rif-nav.sinistra { left: 0; background: linear-gradient(90deg, rgba(20,10,15,.5), transparent); }
.rif-nav.destra { right: 0; background: linear-gradient(270deg, rgba(20,10,15,.5), transparent); }
.rif-galleria { top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 9px; opacity: 0.85; }
.rif-casella:hover .rif-nav, .rif-nav:focus-visible { opacity: 1; }
.rif-nav:hover { background: rgba(196, 42, 95, 0.55); }
.rif-galleria:hover { background: var(--accent); opacity: 1; }
.rif-sotto-foto { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center;
  padding: 16px 6px 5px; background: linear-gradient(0deg, rgba(20,10,15,.6), transparent); pointer-events: none; }
.rif-badge { color: #fff; font-size: 0.7rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.18); }
.rif-badge.diversa { background: var(--accent); }
.rif-pos { color: rgba(255,255,255,.85); font-size: 0.68rem; font-weight: 600; }
@media (hover: none) { .rif-nav { opacity: 0.85; } }
.galleria-rif { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 62vh; overflow-y: auto; padding: 2px; }
.galleria-rif-voce { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 12px; border: 2px solid transparent; background: var(--bg-2); cursor: pointer; }
.galleria-rif-voce img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; }
.galleria-rif-voce:hover { border-color: var(--accent-bordo); }
.galleria-rif-voce.scelta { border-color: var(--accent); box-shadow: var(--ombra-accento); }
.galleria-rif-nome { font-size: 0.8rem; font-weight: 700; color: var(--fg); }
.galleria-rif-nome.attiva { color: var(--accent-testo); }
.dialogo:has(.galleria-rif) { width: min(900px, 94vw); }
.rif-nav { top: 50%; bottom: auto; height: 48px; width: 28px; transform: translateY(-50%); }
.rif-nav.sinistra { border-radius: 0 12px 12px 0; background: rgba(20,10,15,.45); }
.rif-nav.destra { border-radius: 12px 0 0 12px; background: rgba(20,10,15,.45); }
.rif-nav:hover { background: rgba(196, 42, 95, 0.75); }
/* Varianti: i due volti sempre affiancati (7/10) */
.rif-e-viso .rif-compatti .rif-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 340px; }
/* «Dal corpo vero» (7/10) */
.dal-corpo { padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--accent-bordo); }
.dal-corpo summary { cursor: pointer; }
.dal-corpo h4 { margin: 10px 0 6px; }
.dal-corpo-foto { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.dal-corpo-foto .rif-casella.scelta { border-color: var(--accent); box-shadow: var(--ombra-accento); }
.dal-corpo-campi { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.dal-corpo-campi textarea { width: 100%; }
.dal-corpo > .btn.primario { width: 100%; }
/* Il numero delle prove e delle loro immagini (8/10) */
.prova-numero { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px; font-size: 0.78em; font-weight: 800;
  vertical-align: middle; color: #fff; background: var(--accent); }
/* «Dal corpo vero»: pose con l'omino e abito dalla galleria (8/10) */
.pose-dal-corpo { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.pose-dal-corpo .card-posa .posa-nome { font-size: 0.74rem; text-align: center; line-height: 1.2; }
.abito-scelto { display: flex; align-items: center; gap: 10px; }
.abito-scelto img { width: 64px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; border: 2px solid var(--accent); }
.abito-scelto span { font-weight: 700; }
/* «Crea» (8/10): il modulo unico SFW/NSFW */
.crea-card { padding: 14px 16px; margin-bottom: 14px; }
.crea-card > h3 { margin: 0 0 6px; }
.crea { display: flex; flex-direction: column; gap: 8px; }
.crea h4 { margin: 10px 0 2px; }
.crea textarea { width: 100%; }
.crea-foto { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.crea-foto .rif-casella.scelta { border-color: var(--accent); box-shadow: var(--ombra-accento); }
.crea-titolo-posa { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.crea-piano { padding: 10px 12px; border-radius: 12px; background: var(--accent-velo); border: 1px solid var(--accent-bordo); }
.crea-piano ol { margin: 4px 0 6px 18px; padding: 0; }
.crea-piano p { margin: 4px 0; }
.crea > .btn.primario { width: 100%; }
.crea-partenza { display: flex; align-items: center; gap: 10px; }
.crea-partenza img { width: 72px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; border: 2px solid var(--accent); }
.crea-partenza span { font-weight: 700; }
.dialogo:has(.crea.compatto) { width: min(620px, 94vw); max-height: 92vh; overflow-y: auto; }
.pose-gestione { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.pose-gestione-riga { display: flex; align-items: center; gap: 10px; }
.pose-gestione-riga .figura-posa { width: 40px; height: 40px; }
.pose-gestione-riga .spazio { flex: 1; }
.foto-corpo-sezione { padding: 10px 12px; }
.foto-corpo-sezione summary { cursor: pointer; }
.foto-corpo-sezione .rif-griglia { margin-top: 10px; }
/* «Crea»: i corpi (8/10) */
.crea-corpo { position: relative; }
.crea-corpo .crea-corpo-nota { font-size: 0.66rem; font-weight: 700; color: var(--hint); }
.crea-corpo .crea-corpo-nota.pronto { color: var(--accent-testo); }
.crea-corpo .btn.piccolo { font-size: 0.68rem; padding: 2px 6px; min-height: 0; }
/* «Crea»: modello, scena (da foto / a parole), costo (8/10) */
.crea-modi { display: flex; gap: 6px; }
.crea-modi .btn.acceso { background: var(--accent); color: #fff; border-color: var(--accent); }
.crea-zona { display: flex; flex-direction: column; gap: 8px; }
.crea-scene .rif-casella.scelta { border-color: var(--accent); box-shadow: var(--ombra-accento); }
.crea .etichetta-campo { font-size: 0.78rem; color: var(--hint); text-transform: uppercase; letter-spacing: .03em; }
.crea-vai { align-items: center; gap: 12px; }
.crea-vai .btn.primario { flex: 1; }
.area-icona.icona-lora { color: #b39ddb; }
[data-tema="chiaro"] .area-icona.icona-lora { color: #6a4fb3; }
.sezione-personalita-modella { padding: 14px 16px; margin-top: 14px; }
/* «Genera» (8/10, rifinito): pulsante blu, costo sotto, viso in evidenza */
.btn.genera-blu { flex: 1; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; border: none; font-weight: 800;
  font-size: 1rem; padding: 12px 18px; border-radius: 12px; box-shadow: 0 6px 18px rgba(37, 99, 235, .35); cursor: pointer; }
.btn.genera-blu:hover:not([disabled]) { background: linear-gradient(135deg, #1d4ed8, #1e40af); }
.btn.genera-blu[disabled] { opacity: .5; cursor: default; box-shadow: none; }
.crea-vai .mostra-prompt { flex: 0 0 auto; }
.crea-costo { margin-top: 4px; font-size: 1rem; }
.crea .colonna-modello { margin-bottom: 4px; }
.crea-corpo .metti-viso { width: 100%; justify-content: center; font-size: 0.74rem; padding: 5px 6px; margin-top: 2px; }
.crea-corpo .rif-nav { font-size: 1.1rem; font-weight: 800; }
.posa-e-espressione { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.posa-e-espressione .campo-posa { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; }
.posa-e-espressione .campo-espressione { flex: 0 1 220px; display: flex; flex-direction: column; gap: 6px; }
.crea-corpo .metti-viso { white-space: normal; line-height: 1.15; font-size: 0.7rem; padding: 5px 4px; }
/* «Genera»: zoom col clic sull'immagine; corpi col viso messo in prugna, nella palette (8/10) */
.crea img.con-zoom { cursor: zoom-in; }
.btn.viso-fatto { background: linear-gradient(135deg, #8e3a8a, #6a2468); color: #fff; border: none; font-weight: 800; }
.btn.viso-fatto:hover { filter: brightness(1.08); }
.crea-corpo.col-viso { border-color: #8e3a8a; }
.crea-corpo.col-viso.scelta { box-shadow: 0 0 0 2px #8e3a8a; }
.crea-corpo .crea-corpo-nota.pronto { color: #8e3a8a; }
:root:not([data-tema="chiaro"]) .crea-corpo .crea-corpo-nota.pronto { color: #d58ad1; }
.scelta-viso { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.scelta-viso .casella { align-items: flex-start; }
.avviso.nota-posa { border-left: 4px solid var(--accent); font-size: 0.95rem; }
.crea-piano .nota-volto { margin: 4px 0; padding: 6px 10px; border-radius: 8px; background: var(--warn-velo); color: var(--warn-testo); font-size: 0.85rem; }
.posa-italiano { min-height: 0; max-height: 30vh; font-size: 0.9rem; }
.posa-due-colonne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.posa-due-colonne textarea { width: 100%; min-height: 160px; }
.posa-due-colonne .posa-italiano { min-height: 160px; }
.dialogo:has(.posa-due-colonne) { width: min(860px, 94vw); }
@media (max-width: 700px) { .posa-due-colonne { grid-template-columns: minmax(0, 1fr); } }
/* Social → Account (9/10): una card per piattaforma, col logo */
.campo-modella-social { max-width: 320px; margin-bottom: 8px; }
.titolo-gruppo { margin: 16px 0 8px; }
.griglia-social { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.card-social { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.card-social.collegata { border-color: var(--accent); }
.card-social.presto { opacity: 0.75; }
.card-social-testa { display: flex; align-items: center; gap: 10px; }
.card-social-testa h3 { margin: 0; flex: 1; }
.logo-social { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.logo-social i { width: 24px; height: 24px; background: #fff; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.logo-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.logo-instagram i { --logo: url("/static/icone/social/instagram.svg"); }
.logo-facebook { background: #0866FF; }
.logo-facebook i { --logo: url("/static/icone/social/facebook.svg"); }
.logo-tiktok { background: #000; }
.logo-tiktok i { --logo: url("/static/icone/social/tiktok.svg"); }
.logo-telegram { background: #26A5E4; }
.logo-telegram i { --logo: url("/static/icone/social/telegram.svg"); }
.logo-threads { background: #000; }
.logo-threads i { --logo: url("/static/icone/social/threads.svg"); }
.logo-x { background: #000; }
.logo-x i { --logo: url("/static/icone/social/x.svg"); }
.logo-snapchat { background: #FFFC00; }
.logo-snapchat i { --logo: url("/static/icone/social/snapchat.svg"); background: #000; }
.account-collegato { padding: 8px 10px; border-radius: 10px; background: var(--bg-2); display: flex; flex-direction: column; gap: 6px; }
.account-collegato.spento { opacity: 0.6; }
.riga-account-testa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modulo-account { display: flex; flex-direction: column; gap: 8px; }
.altro-account summary { cursor: pointer; font-weight: 600; }
/* Social → Post (9/10): il tipo di post in evidenza */
.scelta-tipo-post { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.tipo-post { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px; border-radius: 12px; border: 1.5px solid var(--bordo); background: var(--bg-2); color: inherit; cursor: pointer; text-align: left; font: inherit; }
.tipo-post.attivo { border-color: var(--accent); background: var(--accent-velo, var(--bg-2)); box-shadow: 0 0 0 2px var(--accent-velo, transparent); }
.tipo-post:disabled { cursor: default; opacity: .7; }
.tipo-icona { font-size: 20px; line-height: 1; color: var(--accent); }
.tipo-dove { font-size: 11px; }
.contatori-social.riferimento { opacity: .85; margin-top: 4px; align-items: center; }
@media (max-width: 700px) { .scelta-tipo-post { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.filtro-stretto select { width: auto; min-width: 180px; }
/* Social → Modella (9/10): scheda e impostazioni della generazione delle idee */
.modella-social-colonne { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .modella-social-colonne { grid-template-columns: minmax(0, 1fr); } }
.barra-salva { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 8px 0; background: var(--bg); }
.imp-card { display: flex; flex-direction: column; gap: 8px; }
.imp-card h3 { margin: 0; }
.scelte-imp { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.scelta-imp { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--bordo); background: var(--bg-2); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.scelta-imp.attiva { border-color: var(--accent); background: var(--accent-velo); }
.rese-imp { display: flex; flex-direction: column; gap: 4px; }
.resa.spenta { opacity: .5; }
.doppio-cursore { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.doppio-cursore input[type=range] { width: 100%; accent-color: var(--accent); }
.conta-caratteri { align-self: flex-end; }
.conta-caratteri.errore { color: var(--err-testo); }
.esempi-caroselli { display: flex; flex-direction: column; gap: 10px; }
.esempio-carosello { border: 1px solid var(--bordo); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; background: var(--bg-2); }
.esempio-testa { display: flex; justify-content: space-between; align-items: center; }
.slide-esempio { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.slide-esempio textarea { width: 100%; min-height: 0; }
.numero-slide { font-size: 12px; font-weight: 700; color: var(--accent); padding-top: 8px; }
.scheda-sezione { border-top: 1px solid var(--bordo); padding: 8px 0; }
.scheda-sezione > summary { cursor: pointer; font-weight: 700; }
.scheda-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 6px 0; }
.scheda-dl dt { font-weight: 600; color: var(--testo-2, inherit); }
.scheda-dl dd { margin: 0; }
.scheda-elenco { margin: 4px 0; padding-left: 18px; }
.scheda-voci { display: flex; flex-direction: column; gap: 8px; }
.scheda-voce { padding: 8px 10px; border-radius: 10px; background: var(--bg-2); }
.scheda-voce-testa { display: flex; gap: 8px; align-items: center; text-transform: capitalize; }
.scheda-voce p { margin: 4px 0 0; }
.prompt-sistema-apri { margin-top: 16px; }
.prompt-sistema-apri > summary { cursor: pointer; font-weight: 700; font-size: 1.05em; padding: 8px 0; }
.prompt-colonne { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .prompt-colonne { grid-template-columns: minmax(0, 1fr); } }
.prompt-area { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.5; }
.prompt-colonne .riga-btn input { flex: 1; min-width: 220px; }
.versioni-prompt { display: flex; flex-direction: column; gap: 6px; max-height: 640px; overflow: auto; }
.riga-versione { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 10px; background: var(--bg-2); }
.riga-versione.attiva { outline: 1.5px solid var(--accent); }
/* Social → anteprima (9/10): il telefono di ogni social, nel suo formato. Colori fissi: è una simulazione. */
.anteprima-social { display: flex; flex-direction: column; gap: 8px; }
.anteprima-schede { display: flex; flex-wrap: wrap; gap: 6px; }
.telefono { width: 340px; max-width: 100%; margin: 4px auto 0; border: 10px solid #111; border-radius: 34px; overflow: hidden;
  background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.ap { position: relative; font: 13px/1.35 -apple-system, "Segoe UI", Roboto, sans-serif; color: #111; background: #fff; }
.ap-grigio { color: #737373; } .ap-testo.piccolo, .piccolo.ap-grigio { font-size: 11px; }
.anteprima-media { position: relative; width: 100%; background: #000; overflow: hidden; }
.anteprima-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anteprima-media.arrotondato { border-radius: 12px; }
.anteprima-vuota { color: #aaa; display: flex; align-items: center; justify-content: center; height: 100%; }
.anteprima-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 42px; color: rgba(255,255,255,.85); }
.anteprima-contatore { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.anteprima-freccia { position: absolute; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.85); color: #111; font-size: 18px; line-height: 1; cursor: pointer; }
.anteprima-freccia.sx { left: 8px; } .anteprima-freccia.dx { right: 8px; }
.anteprima-puntini { display: flex; gap: 4px; justify-content: center; padding: 6px 0; }
.anteprima-puntini span { width: 6px; height: 6px; border-radius: 50%; background: #c7c7c7; } .anteprima-puntini span.attivo { background: #0095f6; }
.ap-testa { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.ap-avatar { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); }
.ap-avatar.piccolo { width: 24px; height: 24px; font-size: 11px; }
.ap-nomi { display: flex; flex-direction: column; flex: 1; min-width: 0; } .ap-sotto { font-size: 11px; color: #737373; }
.ap-altro { color: #555; }
.ap-azioni { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 4px; font-size: 18px; }
.ap-azioni .anteprima-puntini { padding: 0; }
.ap-testo { padding: 2px 10px; white-space: pre-line; word-break: break-word; }
.ap-ig { padding-bottom: 10px; }
/* verticali a schermo pieno: reel, storie, TikTok, Snapchat */
.ap-ig-reel, .ap-ig-storia, .ap-tiktok, .ap-snap { background: #000; color: #fff; }
.anteprima-media.pieno { aspect-ratio: 9 / 16; }
.ap-lato { position: absolute; right: 8px; bottom: 90px; display: flex; flex-direction: column; gap: 14px; align-items: center;
  text-align: center; font-size: 12px; white-space: pre-line; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.ap-fondo-reel { position: absolute; left: 10px; right: 60px; bottom: 14px; display: flex; flex-direction: column; gap: 4px; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.ap-riga-nome { display: flex; align-items: center; gap: 6px; }
.ap-segui { border: 1px solid #fff; border-radius: 6px; padding: 0 6px; font-size: 11px; }
.ap-cap { font-size: 12px; white-space: pre-line; }
.ap-sopra { position: absolute; top: 18px; left: 0; right: 0; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.ap-sopra .ap-sotto, .ap-sopra .ap-altro { color: #eee; }
.ap-storia-barre { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 3px; }
.ap-storia-barre span { flex: 1; height: 2px; background: rgba(255,255,255,.4); border-radius: 2px; } .ap-storia-barre span.piena { background: #fff; }
.ap-storia-fondo { position: absolute; left: 10px; right: 10px; bottom: 12px; display: flex; gap: 10px; align-items: center; font-size: 18px; }
.ap-campo { flex: 1; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; padding: 6px 12px; font-size: 12px; }
.ap-tt-alto { position: absolute; top: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 14px; color: #ddd; }
.ap-tt-alto strong { color: #fff; border-bottom: 2px solid #fff; }
.ap-snap-barra { position: absolute; left: 0; right: 0; top: 55%; background: rgba(0,0,0,.55); color: #fff; text-align: center; padding: 6px 10px; font-size: 13px; }
/* Facebook */
.ap-fb { background: #fff; padding-bottom: 4px; }
.ap-fb .ap-avatar { background: #1877f2; }
.ap-fb-conti { display: flex; justify-content: space-between; padding: 6px 10px; color: #65676b; font-size: 12px; }
.ap-fb-azioni { display: flex; justify-content: space-around; border-top: 1px solid #e4e6eb; padding: 6px 0; color: #65676b; font-weight: 600; font-size: 12px; }
/* Threads e X */
.ap-th { display: flex; gap: 8px; padding: 12px 10px; }
.ap-th-corpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.ap-th-corpo .ap-testo { padding: 0; }
.ap-threads .ap-avatar { background: #000; }
.ap-x { background: #000; color: #e7e9ea; } .ap-x .ap-grigio { color: #71767b; } .ap-x .ap-avatar { background: #1d9bf0; }
.ap-x-azioni { display: flex; justify-content: space-between; color: #71767b; font-size: 12px; padding-top: 4px; }
/* Telegram */
.ap-tg { background: #a7c4a0 linear-gradient(160deg, #b9d3a8, #8fb3a3); padding-bottom: 12px; min-height: 420px; }
.ap-tg-testa { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fff; }
.ap-tg .ap-avatar { background: #2aabee; }
.ap-tg-bolla { margin: 10px 30px 0 10px; background: #fff; border-radius: 12px; padding: 4px; }
.ap-tg-bolla .ap-testo { padding: 6px 6px 0; }
.ap-tg-meta { text-align: right; color: #8e9ba5; font-size: 11px; padding: 2px 6px 2px; }
.sezione-telegram { margin-top: 20px; }
/* Social → Modella: il corpo per i post (9/10) */
.corpo-post { margin-bottom: 16px; }
.griglia-corpo-post { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.corpo-post-voce { display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 12px; border: 2px solid var(--bordo);
  background: var(--bg-2); color: inherit; font: inherit; font-size: 12px; cursor: pointer; text-align: center; }
.corpo-post-voce img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; display: block; }
.corpo-post-voce.scelto { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-velo); font-weight: 700; }
/* Social → Piano (9/10): le idee nelle caselle della settimana */
.piano-testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.piano-griglia { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.piano-giorno { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.piano-giorno-testa { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 8px; background: var(--card-2); }
.piano-giorno.oggi-piano .piano-giorno-testa { outline: 2px solid var(--warn); }
.piano-casella { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 10px; min-height: 96px; text-align: left;
  font: inherit; font-size: 12px; color: inherit; text-decoration: none; min-width: 0; }
.piano-casella.vuota { border: 1.5px dashed var(--bordo); background: transparent; align-items: center; justify-content: center; }
.piano-casella.vuota.passata { opacity: .4; }
.piano-casella.idea { border: 1.5px dashed var(--accent); background: var(--accent-velo); cursor: pointer; }
.piano-casella.idea.hot { border-color: #e0426f; background: color-mix(in srgb, #e0426f 16%, transparent); }
.piano-casella.idea:hover { border-style: solid; }
.piano-casella.post { border: 1.5px solid var(--bordo); background: var(--card); }
.piano-casella.post img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }
.piano-ora { font-weight: 700; font-size: 12px; }
.piano-testo { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.piano-scena { font-size: 11px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.piano-extra { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.chip.hot { background: color-mix(in srgb, #e0426f 22%, transparent); color: var(--fg); }
.giorni-ritmo { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; }
.slide-idea { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.slide-idea li { padding: 6px 8px; border-radius: 8px; background: var(--bg-2); }
.caption-idea { font-style: italic; white-space: pre-line; }
.togli-idea { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
@media (max-width: 900px) { .piano-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.storie-post { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
/* Preferenze per account (9/10) */
.giudizio { display: inline-flex; gap: 2px; }
.giudizio .btn.attivo { background: var(--accent-velo); outline: 1.5px solid var(--accent); }
.preferenze { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.pref-ambito { border-top: 1px solid var(--bordo); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.pref-regole { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.pref-regole li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pref-regole li.spenta span { text-decoration: line-through; opacity: .6; }
.pref-ambito .riga-btn input[type=text] { flex: 1; min-width: 220px; }
.anteprima-nota { font-size: 11px; color: #555; background: #f3f3f3; margin: 0; padding: 6px 10px; } .laterale-icona svg { display: block; }
.ritmo-tipo { border: 1px solid var(--bordo); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
.piano-casella.vuota.tipo-reel, .piano-casella.vuota.tipo-storia { min-height: 60px; }
.cal-viste { margin-bottom: 10px; }
.slide-foto-box { position: relative; display: inline-block; flex: 0 0 auto; }
.slide-foto-testo { position: absolute; left: 6%; right: 6%; top: 50%; transform: translateY(-50%); text-align: center; color: #fff;
  font-weight: 800; font-size: 11px; line-height: 1.2; -webkit-text-stroke: .4px #000; text-shadow: 0 0 3px #000, 0 0 2px #000; pointer-events: none; }
.slide-foto-motore { position: absolute; left: 4px; bottom: 4px; font-size: 9px; background: rgba(0,0,0,.6); color: #fff; padding: 1px 5px; border-radius: 999px; }
.scatto-scelta { align-items: center; }
.slide-riga { display: flex; gap: 10px; align-items: flex-start; }
.slide-foto { width: 96px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; display: block; }
.slide-foto.vuota { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; color: var(--hint);
  border: 1.5px dashed var(--bordo); padding: 4px; box-sizing: border-box; }
.slide-testo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.slide-foto.lente { cursor: zoom-in; }
.slide-foto-box { position: relative; }
.prompt-foto { white-space: pre-wrap; font-size: 12px; max-height: 50vh; overflow: auto; background: var(--bg-2); padding: 10px; border-radius: 8px; }
.btn.grande-ritmo { font-weight: 700; border: 2px solid var(--accent); background: var(--accent-velo); padding: 8px 14px; }
.orari-ritmo { display: flex; flex-wrap: wrap; gap: 6px; }
.orario { display: inline-flex; align-items: center; gap: 2px; }
.orario input[type=time] { width: auto; }
.giudizio-foto { position: absolute; top: 2px; right: 2px; background: rgba(255,255,255,.85); border-radius: 8px; } .giudizio-foto .btn { padding: 0 4px; min-height: 0; }
/* Post veloce: «Chiedi a Claude» (9/10 sera) */
.chat-claude { margin-top: 16px; }
.chat-claude > summary { cursor: pointer; font-weight: 700; font-size: 1.05em; }
.chat-claude-lista { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow: auto; margin: 10px 0; }
.chat-claude-msg { padding: 8px 10px; border-radius: 10px; background: var(--bg-2); max-width: 85%; }
.chat-claude-msg.utente { align-self: flex-end; background: var(--accent-velo); }
.chat-claude-testo { white-space: pre-wrap; }
.chat-claude .riga-btn textarea { flex: 1; min-width: 240px; }
/* «Chiedi a Claude» da ogni pagina (9/10 sera) */
.assistente-bottone { position: fixed; right: 18px; bottom: 18px; z-index: 900; height: 50px; padding: 0 16px 0 12px; border-radius: 999px;
  border: 1.5px solid #D97757; background: var(--card); color: var(--fg); box-shadow: 0 6px 20px rgba(0,0,0,.25); display: flex;
  align-items: center; gap: 8px; cursor: pointer; font: inherit; font-size: 14px; }
.assistente-bottone.nuovo { animation: assistente-pulsa 2s ease-in-out infinite; }
@keyframes assistente-pulsa { 0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,.25), 0 0 0 0 rgba(217,119,87,.5); }
  50% { box-shadow: 0 6px 20px rgba(0,0,0,.25), 0 0 0 10px rgba(217,119,87,0); } }
@media (max-width: 700px) { .assistente-scritta { display: none; } .assistente-bottone { width: 50px; padding: 0; justify-content: center; } }
.assistente-bottone:hover { transform: scale(1.05); }
.assistente-pannello { position: fixed; right: 18px; bottom: 82px; z-index: 900; width: min(420px, calc(100vw - 36px));
  max-height: min(70vh, 640px); display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--bordo); box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.assistente-pannello[hidden] { display: none; }
.assistente-testa { display: flex; align-items: center; gap: 8px; }
.assistente-testa strong { flex: 1; }
.assistente-pannello .chat-claude-lista { flex: 1; max-height: none; min-height: 120px; }
.assistente-scrivi { display: flex; gap: 6px; align-items: flex-end; }
.assistente-scrivi textarea { flex: 1; resize: vertical; }
.proposte { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .proposte ol { margin: 0; padding-left: 18px; font-size: 12px; } .proposte li .btn { margin-left: 6px; }
/* 9/10 sera: la finestra di un'idea scorre, la riga dei pulsanti («✓ Tieni») resta in vista */
.dialogo:has(.idea-dettaglio) { max-width: 680px; max-height: 92vh; overflow: auto; }
.dialogo:has(.idea-dettaglio) > .riga-btn:last-child { position: sticky; bottom: -16px; background: var(--card); padding: 10px 0 12px; margin-bottom: -12px;
  border-top: 1px solid var(--bordo); z-index: 2; }
.dialogo .ok-conferma:disabled { opacity: .5; cursor: not-allowed; }
/* «La foto è pronta» (9/10 sera) */
.notifiche { position: fixed; top: 14px; right: 14px; z-index: 950; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 28px)); }
.notifica { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--card);
  border: 1.5px solid var(--ok, #4cc38a); box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 14px; }
.notifica span { flex: 1; }
.notifica.errore { border-color: var(--err, #ff6b7d); }
.idea-dettaglio .scatto-scelta { justify-content: flex-start; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.idea-dettaglio .scatto-scelta select { width: auto; min-width: 140px; flex: 0 1 auto; padding-top: 6px; padding-bottom: 6px; }
.idea-dettaglio .scatto-scelta .sotto { min-width: 92px; }
/* Chiedi a Claude (9/10 sera): testo formattato e «sta pensando» coi puntini */
.chat-claude-testo.formattato p { margin: 0 0 6px; }
.chat-claude-testo.formattato ul, .chat-claude-testo.formattato ol { margin: 4px 0 6px; padding-left: 20px; }
.chat-claude-testo.formattato h4, .chat-claude-testo.formattato h5, .chat-claude-testo.formattato h6 { margin: 8px 0 4px; font-size: 1em; }
.chat-claude-msg.pensa .chat-claude-testo { font-style: italic; opacity: .8; }
.puntini { display: inline-flex; gap: 3px; margin-left: 5px; }
.puntini i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: puntino 1.2s infinite ease-in-out; }
.puntini i:nth-child(2) { animation-delay: .2s; } .puntini i:nth-child(3) { animation-delay: .4s; }
@keyframes puntino { 0%, 80%, 100% { opacity: .2; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
/* Post veloce (9/10 sera): il cerchio sulla foto della slide in arrivo */
.slide-velo { border-radius: 8px; gap: 4px; padding: 4px; }
.slide-velo .gen-spinner { width: 26px; height: 26px; }
.slide-velo .gen-kie { color: #fff; text-shadow: 0 0 3px #000; font-size: 11px; }
.chip .gen-spinner.mini { display: inline-block; vertical-align: -2px; }
/* Post veloce (9/10 sera): le frecce fra le foto fatte per una slide */
.slide-frecce { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center;
  justify-content: space-between; pointer-events: none; z-index: 2; }
.slide-frecce .freccia { pointer-events: auto; width: 24px; height: 30px; border: 0; border-radius: 6px; background: rgba(0,0,0,.55);
  color: #fff; font-size: 18px; line-height: 1; cursor: pointer; padding: 0; }
.slide-frecce .freccia:hover { background: rgba(0,0,0,.8); }
.slide-conta { position: absolute; top: -52px; left: 50%; transform: translateX(-50%); font-size: 10px; background: rgba(0,0,0,.6);
  color: #fff; padding: 1px 6px; border-radius: 999px; }
.slide-velo { background: rgba(30, 24, 30, .55); }
/* Social → Modella (9/10 sera): il volto frontale accanto al corpo per i post */
.volto-post { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; flex-wrap: wrap; }
.volto-post > div { flex: 1; min-width: 260px; }
.volto-post-img { width: 96px; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 2px solid var(--accent); }
.volto-post-img.spento { opacity: .35; filter: grayscale(1); border-color: var(--bordo); }
/* 9/10 sera: lo stato del post a colpo d'occhio (Post veloce e Mese) */
.etichetta-stato { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  letter-spacing: .02em; white-space: nowrap; }
.etichetta-stato.tono-ok { background: #1f9d55; color: #fff; }
.etichetta-stato.tono-fatto { background: #2563eb; color: #fff; }
.etichetta-stato.tono-avviso { background: var(--warn-velo); color: var(--avviso-testo); border: 1px solid var(--warn); }
.etichetta-stato.tono-errore { background: var(--err-velo); color: var(--err-testo); border: 1px solid var(--err); }
.etichetta-stato.tono-bozza, .etichetta-stato.tono-spento { background: var(--card-2); color: var(--hint); border: 1px dashed var(--bordo); }
.cal-post .etichetta-stato { font-size: 9.5px; padding: 1px 6px; }
.piano-casella.post.stato-programmato, .piano-casella.post.stato-in_coda { border: 2px solid #1f9d55; background: rgba(31, 157, 85, .08); }
.piano-casella.post.stato-pubblicato { border: 2px solid #2563eb; background: rgba(37, 99, 235, .07); }
.cal-post.stato-programmato, .cal-post.stato-in_coda { border-left: 4px solid #1f9d55; background: rgba(31, 157, 85, .10); }
/* La personalità composta (9/10, fase 1) */
.comp-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .comp-corpo { grid-template-columns: 1fr; } }
.comp-gruppo { border: 1px solid var(--bordo); border-radius: 12px; padding: 8px 12px 10px; margin: 0 0 12px; }
.comp-gruppo legend { font-weight: 800; padding: 0 6px; }
.comp-riga { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 0; }
@media (max-width: 600px) { .comp-riga { grid-template-columns: 1fr auto; } .comp-etichetta { grid-column: 1 / -1; } }
.comp-riga.bloccata .comp-campo { opacity: .75; }
.comp-etichetta { font-size: 13px; color: var(--hint); }
.comp-campo select, .comp-campo input[type=text] { width: 100%; }
.comp-nome { display: flex; gap: 6px; align-items: center; }
.comp-azioni { display: inline-flex; gap: 4px; align-items: center; }
.comp-lucchetto { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; cursor: pointer; }
.comp-hobby { display: flex; flex-wrap: wrap; gap: 5px; }
.chip-scelta { border: 1px solid var(--bordo); background: var(--card-2); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; color: var(--fg); }
.chip-scelta.scelto { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.chip-scelta:disabled { opacity: .45; cursor: not-allowed; }
.comp-lato { position: sticky; top: 12px; border: 1px solid var(--bordo); border-radius: 12px; padding: 10px; background: var(--card); max-height: calc(100vh - 30px); overflow: auto; }
.comp-foto-griglia { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.comp-foto { margin: 0; } .comp-foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; cursor: zoom-in; display: block; }
.comp-foto figcaption { font-size: 10.5px; color: var(--hint); text-align: center; }
.comp-salva { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.comp-salva input { flex: 1; min-width: 220px; }
.comp-esito { width: 100%; margin: 0; font-size: 13px; color: var(--avviso-testo); }
.comp-esito.ok { color: var(--ok-testo); }
.personalita-vecchia { margin-top: 18px; }
.personalita-vecchia > summary { cursor: pointer; color: var(--hint); }
/* Post veloce (9/10 sera): frase e scena modificabili */
.frase-slide { display: flex; gap: 4px; align-items: flex-start; flex-wrap: wrap; }
.frase-slide textarea { width: 100%; }
.btn.matita { padding: 0 6px; min-height: 0; line-height: 1.4; }
.scena-slide { font-size: 12px; }
.scena-testo { display: flex; flex-direction: column; gap: 1px; background: var(--card-2); border-radius: 8px; padding: 5px 8px; position: relative; }
.scena-testo.mia { border: 1px solid var(--accent); }
.scena-testo .matita { position: absolute; top: 3px; right: 3px; }
.scena-testo strong { font-size: 11px; }
.scena-modifica { display: flex; flex-direction: column; gap: 4px; }
.scena-modifica label { display: flex; flex-direction: column; }
.frase-vecchia { margin: 6px 0; padding: 6px 10px; border-left: 3px solid var(--err); background: var(--card-2); font-style: italic; }
/* Anteprima TikTok (9/10 sera): ritaglio o sfondo sfocato */
.ap-tt-formato { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; z-index: 3; }
.ap-tt-formato .btn { font-size: 10.5px; padding: 2px 8px; min-height: 0; background: rgba(0,0,0,.55); color: #fff; border-color: rgba(255,255,255,.4); }
.ap-tt-formato .btn.primario { background: var(--accent); border-color: var(--accent); }
.ap-tiktok .anteprima-media.pieno img { object-fit: contain; background: #000; }
/* Chiedi a Claude (10/10): allegati, lavoro con gli strumenti, risultati */
.chat-claude-allegati { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.chip-allegato { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 8px; border-radius: 999px;
  background: var(--card-2); border: 1px solid var(--bordo); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-allegato button { border: 0; background: none; cursor: pointer; color: var(--hint); padding: 0 2px; }
.chat-claude-risultati { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.chat-claude-file img, .chat-claude-file video { display: block; max-width: 100%; max-height: 260px; border-radius: 8px; margin-bottom: 4px; cursor: zoom-in; background: #000; }
.assistente-scrivi .btn.fantasma { align-self: stretch; font-size: 18px; padding: 0 8px; }
.chip-scelta.vietato { text-decoration: line-through; }
/* 11/10 */ .comp-dal-seed { margin: 2px 0 8px; align-items: center; }
/* Personalità, fase 2 (11/10): la scheda per la chat e i saluti */
.comp-schede { border-top: 1px solid var(--bordo); margin-top: 18px; padding-top: 10px; }
.testo-scheda { white-space: pre-wrap; font-size: 12.5px; background: var(--card-2); padding: 10px; border-radius: 8px; max-height: 50vh; overflow: auto; }
.saluti-lista { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.saluto-riga { display: grid; grid-template-columns: auto 1fr 110px auto; gap: 6px; align-items: center; }
.btn.disabilitato { opacity: .45; pointer-events: none; }
.ok-testo { color: var(--ok-testo); }
.genera-scheda { display: flex; gap: 14px; align-items: center; border: 2px solid var(--accent); background: var(--accent-velo); }
.genera-scheda .sotto { margin: 2px 0 0; }
/* Social → Modella (11/10): la scheda corretta a mano */
.scheda-modifica { border: 1px solid var(--bordo); border-radius: 10px; padding: 8px 10px; margin: 0 0 10px; }
.scheda-modifica legend { font-weight: 800; padding: 0 6px; }
.scheda-modifica textarea { width: 100%; }
.scheda-campi { display: flex; flex-direction: column; gap: 6px; }
.scheda-da-modella { margin-bottom: 14px; } .scheda-da-modella > summary { cursor: pointer; }
/* Chiedi a Claude (11/10): modifiche fatte da Claude e Registro */
.chat-claude-schede { display: flex; gap: 4px; padding: 0 0 6px; }
.chat-claude-schede button { border: 1px solid var(--bordo); background: var(--card-2); border-radius: 999px; padding: 3px 12px; font-size: 13px; cursor: pointer; color: var(--fg); }
.chat-claude-schede button.attiva { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.chat-claude-registro { overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.registro-voce { border: 1px solid var(--bordo); border-radius: 10px; padding: 6px 8px; font-size: 13px; }
.registro-voce.annullata { opacity: .55; }
.registro-diff { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; }
.registro-diff code { font-size: 11px; word-break: break-all; }
.chat-claude-modifiche { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chip-modifica { font-size: 12px; padding: 2px 8px; border-radius: 999px; }
.chip-modifica.fatta { background: #1f9d55; color: #fff; }
.chip-modifica.rifiutata { background: var(--err-velo); color: var(--err-testo); }
/* Impostazioni (11/10): logo del sito e pagina della chiave */
.testata-sito { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.testata-sito h2 { margin: 0; }
.logo-sito { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; background: #fff; border: 1px solid var(--bordo); padding: 2px; }
.link-chiave { margin-left: auto; }
.come-chiave { font-size: 12px; margin-top: 2px; }
/* Guide dei social (11/10) */
.guida-social { max-width: 820px; }
.guida-passi { padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
.guida-passo p { margin: 4px 0; }
.codice-guida { background: var(--card-2); padding: 8px 10px; border-radius: 8px; font-size: 13px; overflow-x: auto; }
.chiave-uploadpost { border: 1px dashed var(--bordo); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; }
/* I loghi dei modelli (11/10) */
.logo-modello { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; margin-right: 4px; border-radius: 3px; }
.logo-select { display: inline-flex; align-items: center; margin-right: 4px; }
.logo-select .logo-modello { width: 22px; height: 22px; margin: 0; }
.con-loghi { display: inline; }
.select-con-logo { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.select-con-logo > select { flex: 1 1 auto; min-width: 0; }
label.campo .select-con-logo, .campo .select-con-logo { display: flex; width: 100%; }
/* Statistiche dei social (11/10) */
.statistiche-social { margin-bottom: 16px; }
.griglia-stat { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.card-stat-testa { display: flex; align-items: center; gap: 8px; }
.stat-principale { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.stat-valore { font-size: 28px; font-weight: 800; }
.delta { font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--card-2); }
.delta.su { background: rgba(31, 157, 85, .15); color: #1f9d55; }
.delta.giu { background: var(--err-velo); color: var(--err-testo); }
.stat-numeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; margin: 6px 0; }
.stat-numero { display: flex; flex-direction: column; background: var(--card-2); border-radius: 8px; padding: 4px 8px; }
.grafico-stat { width: 100%; height: 110px; display: block; }
.grafico-linea { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; }
.grafico-area { fill: var(--accent); opacity: .12; }
.grafico-punto { fill: var(--accent); }
.grafico-vuoto { fill: var(--hint); font-size: 12px; }
.card-stat.vuota { opacity: .85; } .card-stat.vuota .stat-valore { color: var(--hint); }
.stat-numero .sotto { font-size: 11px; overflow-wrap: anywhere; }
.comp-corpo.solo-voci { grid-template-columns: 1fr; }
/* Post veloce (11/10): scena ridotta e post per Facebook */
details.scena-testo > summary { cursor: pointer; list-style: none; }
details.scena-testo > summary::-webkit-details-marker { display: none; }
details.scena-testo .scena-breve { color: var(--hint); }
details.scena-testo[open] .scena-breve { display: none; }
details.scena-testo .matita { position: static; align-self: flex-start; margin-top: 4px; }
.post-facebook { border: 1px solid #1877f2; border-radius: 10px; padding: 6px 10px; margin: 8px 0; }
.post-facebook > summary { cursor: pointer; }
/* Social → Modella (11/10): i post della notte */
.notte-box { border: 1px solid var(--bordo); border-radius: 12px; padding: 8px 12px; margin-top: 14px; }
.notte-box.accesa { border-color: #5b5bd6; background: rgba(91, 91, 214, .07); }
.griglia-tenute { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; max-height: 60vh; overflow: auto; }
.tenuta { border: 2px solid transparent; border-radius: 8px; padding: 0; background: none; cursor: pointer; }
.tenuta img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 6px; display: block; }
.tenuta.scelta { border-color: var(--accent); }
/* Threads (11/10): i post da discussione in Social → Account */
.threads-post { border-top: 1px solid var(--bordo); padding: 8px 0; }
.threads-post.stato-pubblicato { opacity: .8; }
.threads-corpo { display: flex; gap: 10px; align-items: flex-start; }
.threads-foto { width: 64px; height: 80px; object-fit: cover; border-radius: 6px; flex: none; }
.threads-testo { white-space: pre-wrap; margin: 4px 0; }