/* ── Caroselli (Crea post) ───────────────────────────────────────────── */
    .cz-topbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; }
    .cz-cap { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:18px; }
    .cz-cap .lbl { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
    .cz-cap textarea { width:100%; min-height:74px; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:10px; font-family:inherit; font-size:13px; line-height:1.5; resize:vertical; }
    .cz-deck { display:flex; flex-wrap:wrap; gap:22px; }
    .cz-card { width:360px; }
    .cz-frame { width:360px; height:450px; overflow:hidden; border-radius:12px; border:1px solid var(--border); background:#000; }
    .cz-frame > .cz-slide { transform:scale(0.33333); transform-origin:top left; }
    .cz-ctrls { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
    .cz-edit { margin-top:8px; display:none; flex-direction:column; gap:6px; }
    .cz-edit.open { display:flex; }
    .cz-edit label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:-2px; }
    .cz-edit input, .cz-edit textarea { width:100%; background:var(--surface2); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:7px 9px; font-family:inherit; font-size:12px; resize:vertical; }
    .cz-prompt { margin-top:8px; font-size:12px; color:var(--muted); }
    .cz-prompt summary { cursor:pointer; color:var(--accent); }
    .cz-prompt > div { margin-top:6px; padding:9px; background:var(--surface2); border:1px solid var(--border); border-radius:6px; line-height:1.45; }

    /* il template grafico vero, renderizzato a 1080×1350 ed esportato in PNG.
       Versione 2 (Logan 04/09/2026, sul modello di un carosello che gli
       piaceva): sfondo nero, angoli in oro, intestazione con marchio e contatore,
       etichetta a pillola, titolo grande con la parte chiave in oro, testo,
       e in fondo il TAKEAWAY: la riga che resta. La foto sta solo in copertina. */
    .cz-slide { --cz-gold:#ecbb4e; --cz-gold-d:#b9872f; --cz-ink:#f4efe6; --cz-muted:#cfc7b8; position:relative; width:1080px; height:1350px; background:#0a0a09; overflow:hidden; font-family:'Inter',system-ui,sans-serif; color:var(--cz-ink); }
    /* lo sfondo: alone dorato in alto, trama ornamentale appena accennata, due
       archi in oro in basso a destra per dare profondita' (Logan 05/09: "ancora
       un po' spento e semplice") */
    .cz-glow { position:absolute; inset:0; pointer-events:none;
      background-image:radial-gradient(900px 620px at 20% 0%, rgba(236,187,78,.16), rgba(236,187,78,0) 70%), radial-gradient(700px 500px at 100% 100%, rgba(236,187,78,.07), rgba(236,187,78,0) 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg fill='none' stroke='%23dcad4e' stroke-width='1' opacity='0.07'%3E%3Ccircle cx='50' cy='38' r='13'/%3E%3Ccircle cx='50' cy='62' r='13'/%3E%3Ccircle cx='38' cy='50' r='13'/%3E%3Ccircle cx='62' cy='50' r='13'/%3E%3Ccircle cx='0' cy='38' r='13'/%3E%3Ccircle cx='0' cy='62' r='13'/%3E%3Ccircle cx='100' cy='38' r='13'/%3E%3Ccircle cx='100' cy='62' r='13'/%3E%3Ccircle cx='38' cy='0' r='13'/%3E%3Ccircle cx='62' cy='0' r='13'/%3E%3Ccircle cx='38' cy='100' r='13'/%3E%3Ccircle cx='62' cy='100' r='13'/%3E%3C/g%3E%3C/svg%3E");
      background-repeat:no-repeat, no-repeat, repeat; }
    .cz-arc { position:absolute; border-radius:50%; border:2px solid rgba(236,187,78,.16); pointer-events:none; }
    .cz-arc.a1 { width:820px; height:820px; right:-330px; bottom:-360px; }
    .cz-arc.a2 { width:560px; height:560px; right:-200px; bottom:-230px; border-color:rgba(236,187,78,.10); }
    .cz-corner { position:absolute; width:70px; height:70px; border:2.5px solid rgba(236,187,78,.75); z-index:2; }
    .cz-corner.tl { top:40px; left:40px; border-right:0; border-bottom:0; }
    .cz-corner.tr { top:40px; right:40px; border-left:0; border-bottom:0; }
    .cz-corner.bl { bottom:40px; left:40px; border-right:0; border-top:0; }
    .cz-corner.br { bottom:40px; right:40px; border-left:0; border-top:0; }
    .cz-head { position:absolute; top:70px; left:80px; right:80px; display:flex; align-items:center; justify-content:space-between; z-index:3; }
    /* il filo d'oro sotto l'intestazione, che sfuma ai lati */
    .cz-rule { position:absolute; top:138px; left:80px; right:80px; height:1.5px; z-index:3; background:linear-gradient(90deg, rgba(236,187,78,0), rgba(236,187,78,.7) 30%, rgba(236,187,78,.7) 70%, rgba(236,187,78,0)); }
    .cz-brand { display:flex; align-items:center; gap:18px; font-weight:700; font-size:30px; color:#fff; letter-spacing:.3px; text-shadow:0 2px 12px rgba(0,0,0,.7); }
    .cz-count { font-size:26px; letter-spacing:3px; color:var(--cz-gold); font-weight:700; }
    .cz-count span { color:rgba(236,187,78,.45); }
    .cz-content { position:absolute; top:196px; left:80px; right:80px; bottom:240px; display:flex; flex-direction:column; z-index:3; }
    .cz-chip { align-self:flex-start; border:1.5px solid rgba(236,187,78,.75); background:linear-gradient(135deg, rgba(236,187,78,.22), rgba(236,187,78,.04)); color:var(--cz-gold); border-radius:999px; padding:10px 26px; font-size:26px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; margin-bottom:34px; }
    .cz-h { font-weight:800; font-size:76px; line-height:1.08; letter-spacing:-.5px; color:#fff; }
    .cz-hl { color:var(--cz-gold); }
    .cz-body { margin-top:34px; font-size:38px; line-height:1.55; color:var(--cz-muted); hyphens:none; }
    .cz-body p { margin:0 0 28px; }
    .cz-body p:last-child { margin-bottom:0; }
    .cz-body b { color:#fff; font-weight:700; }
    /* la barretta d'oro: accento sopra le frasi isolate e sotto al titolo della cover */
    .cz-bar { width:120px; height:5px; margin:36px 0 0; background:linear-gradient(90deg, var(--cz-gold), var(--cz-gold-d)); border-radius:3px; }
    .cz-intro { margin-top:30px; font-size:35px; line-height:1.45; color:var(--cz-muted); }
    .cz-list { margin-top:30px; display:flex; flex-direction:column; gap:24px; }
    .cz-li { display:flex; align-items:flex-start; gap:22px; font-size:38px; line-height:1.35; color:var(--cz-ink); }
    .cz-li i { flex:0 0 34px; width:34px; height:34px; margin-top:8px; border:2px solid var(--cz-gold); border-radius:50%; position:relative; }
    .cz-li i::after { content:''; position:absolute; inset:8px; background:var(--cz-gold); border-radius:50%; }
    .cz-li b { color:var(--cz-gold); font-weight:700; }
    /* punto: la frase sola subito sotto al titolo, con la barretta: niente buchi */
    .cz-solo { margin-top:30px; font-size:48px; line-height:1.4; color:var(--cz-ink); font-weight:400; }   /* non in grassetto (Logan 05/09); peso caricato, mai 500 */
    .cz-solo b { color:var(--cz-gold); font-weight:800; }
    /* l'a capo con la riga vuota diventa un paragrafo vero anche nel punto (Logan 26/09) */
    .cz-solo p { margin:0 0 26px; }
    .cz-solo p:last-child { margin-bottom:0; }
    /* citazione: la frase grande fra virgolette, il contesto sotto */
    /* niente corsivo (05/09): nel PNG il corsivo perdeva gli spazi fra le parole
       ("possocompetere"); la citazione resta riconoscibile per barra oro e virgolette */
    /* corsivo (Logan 11/09): il corsivo 600 e 700 sono nel link dei font e nel precarico dell'export, altrimenti il PNG perde gli spazi */
    .cz-quote { margin-top:34px; position:relative; padding-left:34px; border-left:4px solid var(--cz-gold); font-size:44px; line-height:1.35; font-weight:600; font-style:italic; color:#fff; }
    .cz-quote-ctx { margin-top:28px; font-size:34px; line-height:1.45; color:var(--cz-muted); }
    .cz-quote-ctx p { margin:0; }
    .cz-quote-ctx p + p { margin-top:18px; }
    .cz-quote-ctx b { color:#fff; font-weight:700; }
    /* il takeaway: cornice sfumata in oro, dentro scuro */
    .cz-take { position:absolute; left:80px; right:80px; bottom:92px; z-index:3; padding:2px; border-radius:22px; background:linear-gradient(135deg, #ecbb4e, rgba(236,187,78,.25) 55%, #b9872f); }
    .cz-take > div { display:flex; align-items:center; gap:24px; background:#12110d; border-radius:20px; padding:26px 34px; font-size:33px; line-height:1.35; color:var(--cz-ink); }
    .cz-take i { flex:0 0 14px; width:14px; height:14px; background:var(--cz-gold); transform:rotate(45deg); }
    /* display:inline-block: nel PNG (html2canvas) uno span con sfondo che va a capo
       veniva disegnato come un rettangolo unico sopra le parole (Logan 05/09) */
    .cz-take .cz-hl { display:inline-block; max-width:100%; background:linear-gradient(135deg, #f3cf74, #d9a63a); color:#0a0a09; padding:2px 12px; border-radius:8px; font-weight:700; }
    /* senza takeaway (Logan 05/09: il riquadro non va su tutte): in basso a
       destra un "continua" col filo d'oro, leggero, che invita a scorrere */
    /* la freccia in oro, senza scritte (Logan 05/09): un filo che sfuma e la punta */
    .cz-next { position:absolute; right:80px; bottom:104px; z-index:3; display:flex; align-items:center; }
    .cz-next i { display:block; width:170px; height:5px; border-radius:3px; background:linear-gradient(90deg, rgba(236,187,78,0), var(--cz-gold)); }
    .cz-next b { display:block; width:34px; height:34px; margin-left:-22px; border-top:5px solid var(--cz-gold); border-right:5px solid var(--cz-gold); border-radius:3px; transform:rotate(45deg); }
    /* la foto rettangolare dentro la slide (layout immagine, Logan 05/09) */
    .cz-figure { position:relative; margin-top:34px; height:520px; border-radius:18px; border:2px solid rgba(236,187,78,.6); background-color:#16140f; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.5); }
    /* il segnaposto della foto piccola: riquadro tratteggiato in oro, si clicca
       e si carica (Logan 05/09: distinguere la foto piccola dallo sfondo della cover) */
    .cz-figure.vuota { border:3px dashed rgba(236,187,78,.7); background:rgba(236,187,78,.05); display:flex; align-items:center; justify-content:center; cursor:pointer; }
    .cz-figure.vuota .cz-upload { position:static; transform:none; background:transparent; border:0; color:var(--cz-gold); font-size:30px; text-align:center; line-height:1.4; }
    .cz-figure.vuota .cz-upload small { display:block; font-size:22px; color:var(--cz-muted); margin-top:8px; }
    .cz-figline { margin-top:28px; font-size:36px; line-height:1.45; color:var(--cz-muted); }
    .cz-figline b { color:#fff; font-weight:700; }
    /* copertina: foto a tutta slide, ombra dal basso, titolo in fondo */
    .cz-photo2 { position:absolute; inset:0; background-color:#16140f; overflow:hidden; }
    /* l'inquadratura (Logan 05/09): la foto e' un livello interno che si sposta
       coi cursori e si ingrandisce con la scala, il contenitore la ritaglia */
    .cz-img { position:absolute; inset:0; background-size:cover; background-position:50% 50%; }
    .cz-inq { margin-top:8px; display:none; flex-direction:column; gap:6px; padding:10px; border:1px dashed var(--accent); border-radius:8px; background:var(--surface2); }
    .cz-inq.open { display:flex; }
    .cz-inq label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; display:flex; justify-content:space-between; }
    .cz-inq input[type=range] { width:100%; accent-color:var(--accent); }
    /* Inquadra con le frecce (20/09): una croce di tasti, si vedono solo quelli che fanno qualcosa */
    .cz-inq-pad { display:grid; grid-template-columns:38px 1fr 38px; grid-auto-rows:34px; gap:4px; align-items:center; justify-items:center; }
    .cz-inq-btn { min-width:34px; height:30px; padding:0 8px; border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--accent); font-size:13px; line-height:1; cursor:pointer; font-family:inherit; }
    .cz-inq-btn:hover { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
    .cz-inq-centro { font-size:10px; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); width:100%; }
    .cz-inq-zoom { display:flex; align-items:center; justify-content:center; gap:10px; font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
    .cz-inq-zoom span { min-width:78px; text-align:center; }
    .cz-inq-nota { font-size:11px; color:var(--muted); text-align:center; }
    /* velatura piu' decisa sulla foto (Logan 05/09): il titolo si deve leggere sempre */
    .cz-shade { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(10,10,9,.45) 0%, rgba(10,10,9,.3) 25%, rgba(10,10,9,.8) 55%, rgba(10,10,9,.99) 100%); z-index:1; }
    .cz-bottom { position:absolute; left:80px; right:80px; bottom:120px; z-index:3; }
    .cz-bottom .cz-h { font-size:84px; }
    .cz-bottom .cz-bar { margin:0 0 30px; }
    .cz-sub { margin-top:26px; font-size:36px; line-height:1.45; color:var(--cz-muted); }
    .cz-upload { position:absolute; top:44%; left:50%; z-index:4; transform:translate(-50%,-50%); cursor:pointer; background:rgba(0,0,0,.55); border:1px dashed rgba(255,255,255,.55); color:#fff; padding:14px 22px; border-radius:10px; font-size:26px; white-space:nowrap; }
    /* proposte titoli (step intermedio modalità argomento) */
    .cz-variants { display:flex; flex-direction:column; gap:8px; }
    .cz-variant { background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:13px 15px; cursor:pointer; font-size:14px; color:var(--text); transition:border-color .15s, background .15s; }
    .cz-variant:hover { border-color:var(--accent); }
    .cz-variant.selected { border-color:var(--accent); background:rgba(203,167,117,.14); box-shadow:inset 0 0 0 1px var(--accent); }

    /* il titolo originale come la trascrizione (Logan 26/09): di giorno il
       guscio fa bianche solo le textarea (!important), l'input restava beige */
    html.light #cz-titolo-originale { background: #ffffff !important; }