<!-- nav-time 06nov2026: TIME con l'orologio nel menu alto accanto a DESIGN. -->
<!-- menu-fix 05nov2026: su telefono il menu dell'avatar non esce piu' dallo schermo. -->
<!-- menu-time2 05nov2026: TRASPALITY TIME anche nel menu mobile (hamburger). -->
<!-- menu-time 05nov2026: nel menu utente ("Il tuo spazio") voce TRASPALITY TIME verso /time.html. -->
<!-- 01nov2026: i testi scritti dalle persone non hanno piu' translate="no" (data-user-text: il traduttore del browser e' libero, il dizionario del sito non li tocca). I nomi restano translate="no". -->
<!-- v12 26ott2026: INTEGRAZIONE v11 (preparata in un'altra chat a partire dalla versione del 22 ott) sulla versione con FONDA CON AI. Dalla v11: DNA lineare senza "aggiunto!", proposta AI della definizione solo su richiesta, spunti senza autocompletamento e senza doppioni, "chi lo copre?" dentro il modulo con la scheda "Le persone che hai indicato", pausa strutturata ("Fai una pausa") al posto di "Salva in bozza", salvataggio bozza sicuro (prima i nuovi elementi, poi via i vecchi; copia locale 7 giorni), sequenza guidata che rientra da sola, etichette dei passi distanziate. Dal percorso AI restano: card FONDA CON AI, colonna ragione_sociale (legal_name non esiste: era la causa della bozza che non si salvava), arrivo da FONDA CON AI sul riepilogo. -->
<!-- v-fonda-ai2 26ott2026: (1) FIX bozza: syncDraftToServer scriveva la colonna legal_name, che in teams non esiste (la bozza falliva e restava "Non salvato"): ora ragione_sociale. (2) bozza ripresa: lo stato dice "Bozza salvata", non "Non salvato"; tornando dal riepilogo alle card ricompare "Salva in bozza". (3) Arrivando da FONDA CON AI (?from=fonda-ai) il Design si apre sul riepilogo del DNA (step 3) come schermata di raccordo: avanti per fondare, oppure tocchi una voce per il rating o torni alle card per aggiungerne. -->
<!-- v-fonda-ai 26ott2026: accanto alla card Team Identity l’alternativa ✦ FONDA CON AI (porta a /lab/fonda-ai.html: racconti il progetto, l’AI propone il VSR, torni qui con la bozza gia’ compilata per chi copre cosa, inviti e fondazione). Sta in cima alla card (a fianco veniva tagliata: lo spazio della pagina e’ largo 800px). Nessuna altra modifica. -->
<!-- v11 26ott2026: DNA lineare. (1) Niente piu’ schermata "aggiunto!": si conferma, il valore vola tra i chip in alto con un lampo e un avviso, il modulo si svuota per il successivo. (2) Proposta di definizione AI solo su richiesta ("Confronta con una proposta Traspality"), accanto alla tua, mai al posto della tua: "Tengo la mia" di base, "Uso la proposta" con ritorno alla propria; se non chiesta, l’AI gira in silenzio solo per le etichette. (3) Spunti: tolto l’autocompletamento della definizione dalle prime 3 lettere (Responsabilita’ prendeva la definizione di Resilienza ecc.); gli spunti escludono i nomi gia’ presenti (anche varianti, accenti, maiuscole) e riempiono solo il nome. (4) "Chi lo copre?" per servizi/ruoli dentro il modulo, prima della conferma. (5) Pausa strutturata: "Fai una pausa" mette al sicuro la bozza, schermata di congedo con nota per quando torni (salvata su questo dispositivo), al rientro la nota ricompare. Barra in basso con spazio di sicurezza iPad/iPhone, contenuti non piu’ coperti. Etichette dei passi distanziate. (6) Sequenza guidata: passando a una sezione non ancora percorsa (Servizi, Ruoli) si rientra da soli nella sequenza; le voci gia' presenti nel DNA vengono saltate; la barra dice cosa manca. (7) "Chi coprirà questo servizio/ruolo?": assegnazione provvisoria con nomi o email; alla Fondazione la scheda "Le persone che hai indicato" fa completare le email; invitati solo gli indirizzi validi. (8) Salvataggio bozza piu’ sicuro: nuovi elementi scritti prima di togliere i vecchi (un errore non svuota piu’ la bozza online); copia sul dispositivo recuperabile per 7 giorni invece di 2 ore. -->
<!-- v-ruoli 22ott2026: Mansioni → Ruoli e VSM → VSR nei testi italiani (stessa sigla in italiano e in inglese). -->
<!-- v10 16ott2026: INGLESE. Carica /i18n.js (in italiano non fa nulla); contenuti degli utenti marcati translate="no" (nome e slogan del team, nomi e definizioni degli elementi DNA, partner, nomi dei team nel menu); ora del salvataggio bozza nella lingua scelta; messaggio WhatsApp di invito via window.t; i modelli di partenza (Tipo A e B), gli esempi e le definizioni suggerite entrano nel DNA nella lingua dell’utente (window.t, in italiano identici). -->
<!-- v9 25set2026: durante la fondazione si torna indietro e si rivede. (1) '← Identity' in cima al DNA e le etichette dei passi gia' fatti cliccabili (Identity, DNA, Promessa), fino alla fondazione; rientrando nel DNA non si ripassa dal selettore dei modelli. (2) Ogni valore, servizio e ruolo del riepilogo (nel DNA e nel passo Promessa) si apre con un tocco: se e' nuovo si modifica (nome, definizione, peso) o si toglie; se e' gia' nel database si guarda e basta, perche' si cambia dal DNA in dashboard. -->
<!-- v8 21set2026: link "Serve aiuto? Scopri come creare il tuo Traspality" sotto la card Team Identity (apre come-si-crea.html in nuova scheda, la bozza resta aperta); dopo found_team() parte l'email "È nato il Traspality di NOMETEAM" al founder via edge function team-born-email (non bloccante, un solo invio per team) -->
<!-- v7 17set2026: autosave silenziosa ad ogni valore/servizio/ruolo confermato (syncDraftToServer condiviso col bottone Salva bozza), avviso beforeunload sul tasto indietro, ripresa di una bozza abbandonata da hub (?team=X su team draft/founding porta a FONDA IL TEAM, non a SALVA MODIFICHE), found_team() ora accetta p_team_id per finalizzare la bozza invece di crearne una seconda -->
<!-- v5 6set2026: v6 7set2026: settore Food & Agri con tre comparti (latte, vino, ortofrutta) come secondo livello nella stessa griglia; fix griglia che sforava su schermi stretti. || v5: RIPRISTINO CSS starter pack (Tipo A, Tipo B, modal anteprima) e sequenza guidata. Le regole erano assenti dal file: markup e JS erano intatti, il blocco style era tornato a uno stato precedente allo starter. Nessuna modifica a markup o script. -->
<!-- navbar-std 2set2026: navbar canonica allineata alle altre pagine (DESIGN/CERTIFIED/COMMUNICATION/Le mie pagine/Metodo) + hamburger, pannello mobile e logo mobile t.png -->
<!-- footer-std-v2 26ago2026: footer mobile a due colonne (tre regole a colonna unica, di cui una con !important che vinceva su tutto); rimossa regola legacy .footer-brand img con filtro brightness, il logo e' gia' bianco -->
<!-- v-jwt 07ago2026: suggest-dna-item chiamata via db.functions.invoke() (JWT utente) invece di fetch con la sola publishable key — prerequisito per attivare verify_jwt sulla function e chiudere l'endpoint aperto; risposta gestita come { data, error } -->
<!-- v-admin 29lug2026: flag Amministratore sugli inviti in fondazione (found_team.can_admin) -->
<!-- v-fix 24lug2026: invito email via db.functions.invoke (era Bearer publishable key -> 401 silenzioso) -->
<!DOCTYPE html>
<!-- footer-std-v1 10lug2026 -->
<!-- design rev 01lug2026-simplify: step 'composizione team/inviti' saltato dal percorso obbligatorio (dalla Promessa si va dritti alla Fondazione, teamData.promise salvato inline prima del salto); etichette bottoni fondazione unificate su 'FONDA IL TEAM' ovunque; testo schermata successo condizionale su presenza inviti -->
<!-- v2 03lug2026: check duplicati post-fondazione limitato agli item ATTIVI (i nomi archiviati si possono riaggiungere) + trim nel confronto. A livello DB: indice unico (team, tipo, nome case-insensitive) su dna_items attivi base. -->

<!-- nav-v4 5giu2026 -->
<!-- nav-v4 5giu2026 -->
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <script src="/i18n.js"></script>
    <title>TRASPALITY - Design Your Organization</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --blue: #175F75;
            --blue-light: #55A2B5;
            --green: #8FC55B;
            --yellow: #E6CF42;
            --purple: #B54D8D;
            --bg: #f8fafb;
            --active-color: #8FC55B;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Montserrat', sans-serif; background: #fff; color: #333; overflow-x: hidden; display: flex; flex-direction: column; min-height: 100vh; }

        /* ── HEADER ── */
        .header { text-align: center; padding: 28px 20px 18px; position: relative; z-index: 100; background: white; border-bottom: 1px solid #f0f0f0; }
        .header a { text-decoration: none; }
        .header img.logo { height: 40px; margin-bottom: 8px; cursor: pointer; }
        .header .payoff { font-size: 9px; letter-spacing: 0.85em; color: #4A4A4A; text-transform: uppercase; font-weight: 400; margin-left: 0.85em; }

        /* ── PROGRESS BAR ── */
        .progress-bar { width: 100%; height: 3px; background: #eee; position: relative; z-index: 99; }
        .progress-fill { height: 100%; background: linear-gradient(90deg, var(--green), var(--blue-light)); transition: width 0.6s ease; width: 25%; }

        /* ── STEP LABELS ── */
        .step-labels { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 6px 18px; padding: 12px 20px 0; max-width: 700px; width: 100%; box-sizing: border-box; margin: 0 auto; }
        .step-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: #ccc; transition: color 0.4s; text-align: center; }
        .step-label.active { color: var(--blue); }
        .step-label.done { color: var(--green); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
        /* v9: rivedere e tornare indietro */
        .chip-open { border: none; cursor: pointer; font-family: inherit; transition: transform .15s; }
        .chip-open:hover { transform: translateY(-1px); }
        .back-identity { background: none; border: none; font-family: Montserrat, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #175F75; cursor: pointer; padding: 4px 0; margin-bottom: 8px; }
        #item-editor { display: none; position: fixed; inset: 0; background: rgba(13,58,73,.45); z-index: 3000; align-items: center; justify-content: center; padding: 20px; }
        #item-editor.open { display: flex; }
        .ie-card { background: #fff; border-radius: 20px; padding: 24px; width: 100%; max-width: 440px; font-family: Montserrat, sans-serif; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
        .ie-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }
        .ie-name { font-size: 22px; font-weight: 700; color: #175F75; margin-bottom: 8px; }
        .ie-desc { font-size: 14px; color: #555; margin-bottom: 10px; }
        .ie-input { width: 100%; box-sizing: border-box; border: 1.5px solid #e6ecef; border-radius: 12px; padding: 12px; font-family: inherit; font-size: 16px; margin-bottom: 10px; }
        .ie-ta { min-height: 80px; font-size: 14px; resize: vertical; }
        .ie-rating { font-size: 36px; font-weight: 300; color: #175F75; }
        .ie-rating span { font-size: 14px; color: #999; }
        #item-editor input[type=range] { width: 100%; accent-color: #175F75; margin: 6px 0 16px; }
        .ie-note { font-size: 13px; color: #777; margin: 10px 0 16px; }
        .ie-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; align-items: center; }
        .ie-btn { background: #175F75; color: #fff; border: none; border-radius: 10px; padding: 11px 18px; font-family: inherit; font-weight: 700; font-size: 12px; cursor: pointer; }
        .ie-btn.ghost { background: #fff; color: #175F75; border: 1.5px solid #175F75; }
        .ie-del { margin-right: auto; background: none; border: none; color: #b33; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; }

        /* ── CREATION SPACE (Step 1 visual) ── */
        .creation-space { position: relative; width: 100%; max-width: 800px; height: 1050px; margin: 0 auto; overflow: hidden; perspective: 1000px; flex-shrink: 0; }
        .creation-space.step-2-active { height: auto !important; min-height: 600px; overflow: visible !important; }

        /* DNA */
        .filaments-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: all 1.5s ease 1s; transform-style: preserve-3d; }
        body.loaded .filaments-container { opacity: 1; }
        .filaments-container.dna-mode { transform: translateX(35%) scaleX(0.4); }
        .dna-mode .dna-strand { animation: spinHelix 6s linear infinite; }
        .dna-mode .strand-1 { animation-delay: 0s; }
        .dna-mode .strand-2 { animation-delay: -2s; }
        .dna-mode .strand-3 { animation-delay: -4s; }
        @keyframes spinHelix { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }

        /* BLOBS */
        .blob-wrapper { position: absolute; display: flex; justify-content: center; align-items: center; transition: all 1.5s cubic-bezier(0.25, 1, 0.5, 1); }
        .blob-bg { position: absolute; width: 100%; height: auto; z-index: 1; }
        .drop-green { top: 300px; left: 50%; transform: translate(-50%, -50%) scale(0.8); width: 320px; height: 320px; z-index: 10; }
        .drop-yellow { top: 300px; left: 50%; transform: translate(-50%, -50%) scale(0.5); width: 260px; height: 260px; z-index: 5; opacity: 0; }
        .drop-purple { top: 300px; left: 50%; transform: translate(-50%, -50%) scale(0.5); width: 250px; height: 250px; z-index: 6; opacity: 0; }
        body.loaded .drop-green { top: 20px; transform: translate(-50%, 0) scale(1.15); }
        body.loaded .drop-yellow { top: 550px; left: 10%; transform: translate(0,0) scale(1); opacity: 1; }
        body.loaded .drop-purple { top: 600px; left: auto; right: 10%; transform: translate(0,0) scale(1); opacity: 1; }
        .step-2-active .blob-wrapper { opacity: 0 !important; visibility: hidden; }
        .step-2-active #dna-filaments { opacity: 0.12; pointer-events: none; overflow: visible; }

        /* LIVE HEADER */
        .team-live-header { display: none; }
        .team-live-header.visible { opacity: 1; visibility: visible; transform: translateY(0); }
        .team-live-name { font-size: 42px; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 4px; line-height: 1; }
        .team-live-slogan { font-size: 15px; font-weight: 300; color: var(--green); letter-spacing: 6px; text-transform: uppercase; margin-top: 8px; }

        /* ── STEP CONTAINERS ── */
        .step-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all 0.8s ease; visibility: hidden; z-index: 50; }
        body.loaded .step-1:not(.hidden) { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
        .step-1.hidden { opacity: 0 !important; visibility: hidden !important; transform: translateY(-50px) !important; z-index: -10 !important; pointer-events: none; }
        .step-2 { display:none; opacity: 0; transform: translateX(50px); pointer-events: none; }
        .step-2.active { display:block !important; opacity: 1 !important; visibility: visible !important; transform: translateX(0) !important; z-index: 60; pointer-events: auto; }

        /* ── STEP 1 FORM ── */
        .form-overlay { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -45%); width: 90%; max-width: 450px; background: rgba(255,255,255,0.82); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.6); border-radius: 24px; padding: 40px 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.08); }
        .form-overlay h2 { font-weight: 300; font-size: 22px; color: var(--blue); text-align: center; margin-bottom: 28px; letter-spacing: 2px; }
        .input-group { margin-bottom: 18px; }
        .input-group label { display: block; font-size: 9px; font-weight: 700; color: #888; margin-bottom: 7px; text-transform: uppercase; letter-spacing: 1.5px; }
        .input-group input, .input-group textarea { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 10px; font-family: 'Montserrat'; font-size: 14px; background: #fafafa; transition: border-color 0.3s; }
        .input-group input:focus, .input-group textarea:focus { border-color: var(--green); outline: none; background: white; }
        .input-group textarea { height: 90px; resize: none; }
        .btn-submit { width: 100%; padding: 15px; background: var(--green); color: white; border: none; border-radius: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: opacity 0.3s; font-family: 'Montserrat'; font-size: 13px; }
        .btn-submit:hover { opacity: 0.85; }
        .help-guide-link { display: block; text-align: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(23,95,117,0.12); font-size: 12px; color: var(--blue); text-decoration: none; font-weight: 400; line-height: 1.5; }
        .help-guide-link strong { font-weight: 700; }
        .help-guide-link:hover { opacity: 0.75; }
        .ai-ready { background: #f6edf2; border: 1px solid #ead5e1; color: #5a2143; border-radius: 14px; padding: 14px 16px; font-size: 13px; line-height: 1.6; margin-bottom: 22px; }
        .ai-ready strong { display: block; color: #7a2b5a; margin-bottom: 2px; }
        .ai-alt { display: block; text-decoration: none; background: linear-gradient(135deg, #175F75 0%, #2a7d93 100%); color: #fff; border-radius: 16px; padding: 16px 18px; margin: -6px 0 22px; box-shadow: 0 10px 24px rgba(23,95,117,0.18); transition: transform .2s, box-shadow .2s; }
        .ai-alt:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(23,95,117,0.26); }
        .ai-alt-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 2px; opacity: .8; }
        .ai-alt-title { font-size: 17px; font-weight: 800; letter-spacing: 1.5px; margin: 2px 0 4px; }
        .ai-alt-text { font-size: 12.5px; line-height: 1.5; opacity: .92; }
        .ai-alt-cta { display: inline-block; margin-top: 10px; background: #8FC55B; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 1px; border-radius: 20px; padding: 7px 14px; }
        .ai-alt-or { display: block; text-align: center; font-size: 11px; color: #888; letter-spacing: 1px; margin: -10px 0 16px; }
        .login-link { display: block; text-align: center; margin-top: 14px; font-size: 11px; color: var(--blue-light); text-decoration: none; font-weight: 500; }

        /* ── STEP 2 — VALUES/SERVICES/ROLES ── */
        .values-interface { padding: 115px 20px 40px; max-width: 500px; margin: 0 auto; padding-right: 60px; }
        .title-identity { font-size: 50px; font-weight: 700; color: #A4D1DB; line-height: 0.9; }
        .title-values { font-size: 42px; font-weight: 700; color: var(--active-color); line-height: 1; margin-bottom: 28px; transition: color 0.5s; }
        .title-small { font-size: 17px; color: inherit; font-weight: 400; }
        .view-section { transition: opacity 0.4s ease; }
        .hidden-view { display: none !important; opacity: 0; }
        .value-input-wrapper { display: inline-flex; align-items: center; background: #E8F4F8; padding: 5px 15px; border-radius: 20px; margin-bottom: 18px; border: 1px solid transparent; }
        .value-input-wrapper:focus-within { border-color: var(--active-color); }
        .value-input-number { color: var(--blue); font-weight: 700; font-size: 14px; margin-right: 8px; }
        .value-custom-input { background: transparent; border: none; outline: none; color: var(--blue); font-weight: 700; font-size: 14px; text-transform: uppercase; width: 220px; font-family: 'Montserrat'; }
        .value-textarea { width: 100%; height: 130px; border: none; background: transparent; font-family: 'Montserrat'; font-size: 18px; font-weight: 300; line-height: 1.5; resize: none; outline: none; color: #4A4A4A; }
        .rating-display { display: flex; align-items: baseline; margin-top: 8px; }
        .rating-number { font-size: 56px; font-weight: 300; color: #111; }
        .rating-max { font-size: 18px; color: #aaa; margin-left: 5px; }
        .slider-container { margin-top: 8px; margin-bottom: 25px; }
        input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
        input[type=range]::-webkit-slider-runnable-track { height: 8px; background: var(--active-color); border-radius: 4px; }
        input[type=range]::-webkit-slider-thumb { height: 24px; width: 24px; border-radius: 50%; background: #fff; border: 6px solid var(--active-color); -webkit-appearance: none; margin-top: -8px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
        .slider-labels { display: flex; justify-content: space-between; margin-top: 5px; font-size: 9px; color: #aaa; }
        .btn-save-item { width: 100%; padding: 15px; background: var(--active-color); color: white; border: none; border-radius: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: opacity 0.3s; font-family: 'Montserrat'; font-size: 13px; }
        .btn-save-item:hover { opacity: 0.85; }
        .success-box { background: rgba(255,255,255,0.85); padding: 28px 20px; border-radius: 16px; text-align: center; border: 1px solid #eee; }
        .success-box h3 { color: var(--active-color); font-weight: 600; margin-bottom: 10px; font-size: 19px; }
        .success-box p { font-size: 13px; color: #888; margin-bottom: 20px; }
        .btn-add-another { background: var(--active-color); border: none; color: white; padding: 14px 20px; border-radius: 12px; font-weight: 700; cursor: pointer; font-family: 'Montserrat'; width: 100%; letter-spacing: 1px; text-transform: uppercase; transition: opacity 0.3s; font-size: 13px; }
        .btn-add-another:hover { opacity: 0.85; }
        /* CONSENSO FONDAZIONE */
        .consent-block { background: #fff; border: 1px solid #e8e8e8; border-radius: 16px; padding: 22px 24px; margin: 24px 0; }
        .consent-block-title { font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #175F75; margin-bottom: 16px; }
        .consent-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
        .consent-row:last-child { margin-bottom: 0; }
        .consent-checkbox { width: 20px; height: 20px; flex-shrink: 0; accent-color: #175F75; margin-top: 2px; cursor: pointer; }
        .consent-text { font-size: 12px; font-weight: 300; color: #444; line-height: 1.6; }
        .consent-text strong { font-weight: 700; color: #1a1a1a; }
        .consent-text a { color: #175F75; }
        .consent-required-badge { display: inline-block; font-size: 8px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: #fff3cd; color: #856404; padding: 2px 7px; border-radius: 10px; margin-left: 6px; vertical-align: middle; }
        .btn-found:disabled { opacity: .4; cursor: not-allowed; }
        /* AI TAG BOX */
        .ai-tags-box { margin: 14px 0 0; padding: 14px 16px; background: linear-gradient(135deg, rgba(23,95,117,.04), rgba(143,197,91,.04)); border: 1px solid rgba(23,95,117,.15); border-radius: 14px; text-align: left; }
        .ai-tags-eyebrow { font-size: 8px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #175F75; opacity: .6; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
        .ai-tags-spinner { width: 10px; height: 10px; border: 2px solid rgba(23,95,117,.2); border-top-color: #175F75; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
        .ai-def-text { font-size: 12px; font-weight: 300; color: #444; line-height: 1.55; margin-bottom: 10px; font-style: italic; }
        .own-def-text { font-size: 13px; color: #333; line-height: 1.5; margin: 2px 0 10px; padding: 8px 12px; background: #f8fafb; border-left: 3px solid #175F75; border-radius: 4px; text-align: left; }
        .accept-ai-def-btn { display: inline-block; margin: 0 0 10px; padding: 6px 14px; border-radius: 20px; font-size: 11px; font-weight: 700; border: 1.5px solid #175F75; color: #175F75; background: transparent; cursor: pointer; }
        .accept-ai-def-btn:disabled { opacity: .5; cursor: default; border-style: dashed; }
        .ai-tag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
        .ai-tag-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(23,95,117,.08); color: #175F75; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 10px 4px 10px; border-radius: 20px; border: 1px solid rgba(23,95,117,.2); }
        .ai-tag-chip .tag-x { cursor: pointer; opacity: .5; font-size: 10px; font-weight: 400; margin-left: 2px; transition: opacity .15s; line-height: 1; }
        .ai-tag-chip .tag-x:hover { opacity: 1; }
        .dynamic-nav { display: flex; flex-direction: column; gap: 12px; margin-top: 35px; }
        .big-nav-btn { display: flex; align-items: center; justify-content: center; padding: 15px; border-radius: 12px; font-weight: 600; font-family: 'Montserrat'; background: transparent; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s; width: 100%; font-size: 13px; }
        .big-nav-btn:hover { transform: scale(1.02); }
        .outline-green { border: 2px solid var(--green); color: var(--green); }
        .outline-green:hover { background: var(--green); color: white; }
        .outline-yellow { border: 2px solid var(--yellow); color: #b8a030; }
        .outline-yellow:hover { background: var(--yellow); color: white; }
        .outline-purple { border: 2px solid var(--purple); color: var(--purple); }
        .outline-purple:hover { background: var(--purple); color: white; }
        .btn-finalize { width: 100%; padding: 18px; background: var(--blue); color: white; border: none; border-radius: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; font-family: 'Montserrat'; font-size: 13px; margin-top: 20px; transition: opacity 0.3s; }
        .btn-finalize:hover { opacity: 0.85; }
        .items-count { font-size: 10px; color: #aaa; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 5px; }

        /* ── STEP 3 — RIEPILOGO ── */
        .step-panel { display: none; background: white; min-height: 100vh; padding: 40px 20px 100px; }
        .step-panel.active { display: block; animation: fadeInUp 0.5s ease; }
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        .panel-header { text-align: center; margin-bottom: 40px; }
        .panel-title { font-size: 11px; font-weight: 700; color: #aaa; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 8px; }
        .panel-headline { font-size: 32px; font-weight: 300; color: var(--blue); }
        .panel-headline strong { font-weight: 700; }
        .container { max-width: 680px; margin: 0 auto; }
        .summary-section { margin-bottom: 35px; }
        .summary-label { font-size: 9px; font-weight: 700; color: #aaa; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
        .summary-label::after { content: ''; flex: 1; height: 1px; background: #eee; }
        .chip-list { display: flex; flex-wrap: wrap; gap: 10px; }
        .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; }
        .example-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
        .example-chip { padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; border: 1.5px dashed #ccc; color: #888; background: transparent; cursor: pointer; }
        .example-chip:hover { border-color: var(--active-color, #8FC55B); color: var(--active-color, #8FC55B); }
        .chip-value { background: #EDF7E4; color: #5a8a30; }
        .chip-service { background: #FDF9E3; color: #8a7520; }
        .chip-role { background: #F9EDF5; color: #8a2060; }
        .chip-rating { font-size: 10px; opacity: 0.7; }
        .empty-chip { font-size: 12px; color: #ccc; font-style: italic; }
        .promise-box { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 100%); border-radius: 20px; padding: 35px; color: white; position: relative; overflow: hidden; margin-bottom: 35px; }
        .promise-box::before { content: '"'; position: absolute; top: -10px; left: 20px; font-size: 120px; opacity: 0.08; font-family: Georgia, serif; }
        .promise-box label { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; opacity: 0.7; margin-bottom: 12px; display: block; }
        .promise-textarea { width: 100%; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); border-radius: 12px; padding: 18px; font-family: 'Montserrat'; font-size: 16px; font-weight: 300; color: white; resize: none; height: 130px; line-height: 1.6; }
        .promise-textarea::placeholder { color: rgba(255,255,255,0.4); }
        .promise-textarea:focus { outline: none; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.18); }
        .btn-row { display: flex; gap: 12px; margin-top: 30px; }
        .btn-secondary { flex: 1; padding: 15px; border: 2px solid #ddd; border-radius: 12px; background: white; color: #888; font-family: 'Montserrat'; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: all 0.3s; }
        .btn-secondary:hover { border-color: var(--blue); color: var(--blue); }
        .btn-primary { flex: 2; padding: 15px; background: var(--green); color: white; border: none; border-radius: 12px; font-family: 'Montserrat'; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: opacity 0.3s; }
        .btn-primary:hover { opacity: 0.85; }
        .btn-primary.blue { background: var(--blue); }

        /* ── STEP 4 — INVITO PARTNER ── */
        .invite-card { background: #fafafa; border: 1px solid #eee; border-radius: 20px; padding: 30px; margin-bottom: 20px; }
        .invite-card h3 { font-size: 14px; font-weight: 700; color: var(--blue); margin-bottom: 6px; }
        .invite-card p { font-size: 12px; color: #888; margin-bottom: 18px; }
        .message-preview { background: white; border: 1px solid #e0e0e0; border-radius: 14px; padding: 22px; font-size: 13px; font-weight: 300; line-height: 1.7; color: #444; position: relative; }
        .message-preview strong { color: var(--blue); font-weight: 600; }
        .copy-btn { position: absolute; top: 12px; right: 12px; background: #f0f0f0; border: none; border-radius: 8px; padding: 6px 12px; font-size: 10px; font-weight: 700; cursor: pointer; font-family: 'Montserrat'; text-transform: uppercase; letter-spacing: 1px; color: #666; transition: all 0.2s; }
        .copy-btn:hover { background: var(--blue); color: white; }
        .partner-input-row { display: flex; gap: 10px; margin-top: 14px; }
        .partner-email-input { flex: 1; padding: 12px 15px; border: 1px solid #ddd; border-radius: 10px; font-family: 'Montserrat'; font-size: 13px; }
        .partner-email-input:focus { border-color: var(--blue-light); outline: none; }
        .btn-add-partner { padding: 12px 20px; background: var(--blue-light); color: white; border: none; border-radius: 10px; font-family: 'Montserrat'; font-weight: 700; font-size: 12px; cursor: pointer; white-space: nowrap; }
        .partners-list { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
        .partner-tag { display: inline-flex; align-items: center; gap: 6px; background: #E8F4F8; color: var(--blue); padding: 6px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; }
        .partner-tag button { background: none; border: none; cursor: pointer; color: #aaa; font-size: 14px; line-height: 1; }
        .partner-tag button:hover { color: #e74c3c; }

        /* ── STEP 5 — FONDAZIONE ── */
        .foundation-hero { text-align: center; padding: 60px 20px 40px; }
        .foundation-score { display: inline-block; }
        .score-ring { width: 160px; height: 160px; border-radius: 50%; border: 12px solid #eee; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; position: relative; }
        .score-ring::after { content: ''; position: absolute; top: -12px; left: -12px; right: -12px; bottom: -12px; border-radius: 50%; border: 12px solid var(--green); border-bottom-color: transparent; border-left-color: transparent; transform: rotate(45deg); }
        .score-big { font-size: 52px; font-weight: 200; color: #111; }
        .score-sub { font-size: 12px; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 2px; }
        .dna-breakdown { display: flex; flex-direction: column; gap: 14px; margin: 30px 0; }
        .dna-row { display: flex; align-items: center; gap: 15px; }
        .dna-label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #888; width: 110px; letter-spacing: 1px; }
        .dna-bar-bg { flex: 1; height: 8px; background: #eee; border-radius: 4px; overflow: hidden; }
        .dna-bar-fill { height: 100%; border-radius: 4px; transition: width 1.2s ease 0.3s; }
        .dna-val { font-size: 13px; font-weight: 700; width: 35px; text-align: right; }
        .foundation-cta { background: linear-gradient(135deg, var(--blue), var(--blue-light)); border-radius: 24px; padding: 40px 30px; text-align: center; color: white; margin-top: 30px; }
        .foundation-cta h2 { font-size: 28px; font-weight: 300; margin-bottom: 10px; }
        .foundation-cta p { font-size: 14px; opacity: 0.85; margin-bottom: 30px; font-weight: 300; line-height: 1.6; }
        .btn-found { background: white; color: var(--blue); border: none; padding: 18px 40px; border-radius: 14px; font-family: 'Montserrat'; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: transform 0.2s; display: inline-block; }
        .btn-found:hover { transform: scale(1.03); }
        .disclaimer { font-size: 10px; opacity: 0.6; margin-top: 15px; }

        /* ── TRASPALITY FOOTER ── */
        .trsp-footer { background: var(--blue); color: white; padding: 50px 30px 30px; margin-top: auto; }
        /* Durante il wizard di creazione il footer è nascosto: i pannelli sono absolute e lo confonderebbero */
        body.wizard-active .trsp-footer { display: none; }

        /* v11: DNA lineare */
        .ex-wrap { margin: 0 0 10px; }
        .ex-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #aaa; margin-bottom: 6px; }
        .ai-compare-link { display: inline-block; background: none; border: none; padding: 4px 0; margin: 0 0 6px; font-family: Montserrat; font-size: 12px; font-weight: 600; color: #175F75; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
        .ai-compare-link:disabled { opacity: .5; cursor: default; }
        .ai-compare-box { margin: 4px 0 16px; }
        .ai-choice { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
        .ai-choice-btn { padding: 7px 14px; border-radius: 20px; font-family: Montserrat; font-size: 11px; font-weight: 700; border: 1.5px solid #175F75; color: #175F75; background: #fff; cursor: pointer; }
        .ai-choice-btn.on { background: #175F75; color: #fff; }
        .ai-undo { font-size: 11px; color: #777; margin: 0 0 10px; }
        .ai-undo button { background: none; border: none; color: #175F75; font-family: Montserrat; font-size: 11px; font-weight: 700; cursor: pointer; text-decoration: underline; padding: 0; }
        .assign-inline { margin: 4px 0 18px; padding: 14px; background: #f8fafb; border-radius: 12px; border: 1px solid #e8e8e8; }
        .assign-inline-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #175F75; margin-bottom: 10px; }
        .assign-inline-note { font-size: 11px; color: #888; line-height: 1.5; margin-top: 8px; }
        .prov-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid #eee; }
        .prov-who { flex: 1; min-width: 140px; font-size: 13px; font-weight: 700; color: #333; }
        .prov-what { display: block; font-size: 10px; font-weight: 500; color: #999; margin-top: 2px; }
        .prov-row input { flex: 1; min-width: 180px; padding: 8px 12px; border: 1px solid #ddd; border-radius: 8px; font-family: Montserrat; font-size: 12px; }
        .prov-ok { font-size: 11px; color: #5d9a2b; font-weight: 700; }
        .assign-inline-label span { color: #aaa; font-weight: 500; letter-spacing: 0; text-transform: none; }
        .chip-new { animation: chipFlash 1.6s ease; }
        @keyframes chipFlash { 0% { transform: scale(.6); box-shadow: 0 0 0 0 rgba(143,197,91,.0); } 25% { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(143,197,91,.35); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(143,197,91,0); } }
        .item-toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px); background: #175F75; color: #fff; padding: 12px 20px; border-radius: 30px; font-family: Montserrat; font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; z-index: 450; max-width: 90vw; text-align: center; }
        .item-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
        body.wizard-active .values-interface { padding-bottom: 140px; }
        body.wizard-active .step-panel { padding-bottom: 140px; }
        .pause-btn { background: #fff !important; color: #175F75 !important; border: 1.5px solid #175F75 !important; }
        #pause-ov { display: none; position: fixed; inset: 0; background: rgba(13,58,73,.45); z-index: 3000; align-items: center; justify-content: center; padding: 20px; }
        #pause-ov.open { display: flex; }
        .pause-card { background: #fff; border-radius: 20px; padding: 28px 24px; width: 100%; max-width: 460px; font-family: Montserrat, sans-serif; box-shadow: 0 20px 60px rgba(0,0,0,.2); text-align: center; }
        .pause-check { width: 52px; height: 52px; border-radius: 50%; background: #8FC55B; color: #fff; font-size: 26px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
        .pause-title { font-size: 20px; font-weight: 600; color: #175F75; margin-bottom: 8px; }
        .pause-sub { font-size: 13px; color: #666; line-height: 1.55; margin-bottom: 18px; }
        .pause-note-label { display: block; text-align: left; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #175F75; margin-bottom: 6px; }
        .pause-note { width: 100%; min-height: 90px; border: 1px solid #ddd; border-radius: 10px; padding: 10px 12px; font-family: Montserrat; font-size: 13px; line-height: 1.5; resize: vertical; margin-bottom: 18px; box-sizing: border-box; }
        .pause-actions { display: flex; gap: 10px; flex-wrap: wrap; }
        .pause-actions button { flex: 1; min-width: 150px; padding: 13px 16px; border-radius: 10px; font-family: Montserrat; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; }
        .pause-ghost { background: #fff; color: #175F75; border: 1.5px solid #175F75; }
        .pause-primary { background: #175F75; color: #fff; border: none; }
        .resume-note { background: #E8F4F8; border: 1px solid rgba(23,95,117,.2); border-radius: 14px; padding: 14px 18px; margin: 0 0 16px; text-align: left; }
        .resume-note-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #175F75; margin-bottom: 6px; }
        .resume-note-text { font-size: 14px; color: #333; line-height: 1.5; font-style: italic; margin-bottom: 10px; white-space: pre-wrap; }
        .resume-note button { background: #175F75; color: #fff; border: none; padding: 8px 16px; border-radius: 8px; font-family: Montserrat; font-size: 11px; font-weight: 700; cursor: pointer; }
        .save-draft-bar{position:fixed;bottom:0;left:0;right:0;z-index:400;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-top:1px solid #e8e8e8;padding:12px 20px calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:12px}
        body:not(.wizard-active) .save-draft-bar{display:none}
        .save-draft-btn{background:#175F75;color:#fff;border:none;padding:12px 28px;border-radius:10px;font-family:Montserrat;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:opacity .2s}
        .save-draft-status{font-size:11px;color:#aaa;font-weight:500}
        .footer-inner { max-width: 900px; margin: 0 auto; }
        .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }

        .footer-brand p { font-size: 11px; font-weight: 300; opacity: 0.7; line-height: 1.7; }
        .footer-col h4 { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; opacity: 0.5; margin-bottom: 14px; }
        .footer-col a, .footer-col p { display: block; font-size: 12px; font-weight: 400; opacity: 0.8; text-decoration: none; color: white; margin-bottom: 8px; transition: opacity 0.2s; }
        .footer-col a:hover { opacity: 1; }
        .footer-social { display: flex; gap: 12px; margin-top: 4px; }
        .social-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background 0.2s; }
        .social-icon:hover { background: rgba(255,255,255,0.2); }
        .social-icon svg { width: 16px; height: 16px; fill: white; }
        .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
        .footer-legal { font-size: 10px; opacity: 0.4; }
        .footer-payoff { font-size: 9px; letter-spacing: 4px; text-transform: uppercase; opacity: 0.3; }

        @media (max-width: 700px) {
            .footer-top { grid-template-columns: 1fr 1fr; }
            .footer-brand { grid-column: 1 / -1; }
            .creation-space { height: 950px; }
        }
        @media (max-width: 480px) {
            .btn-row { flex-direction: column; }
            .step-labels { display: none; }
        }
    
    
        @media (max-width: 768px) {
            .creation-space { height: auto; min-height: 800px; }
            .form-overlay { width: 95%; padding: 28px 18px; }
            .values-interface { padding: 100px 12px 40px 12px; }
            .value-custom-input { width: 160px; }
            /* Step 3-5 panels */
            .panel-headline { font-size: 24px; }
            .promise-box { padding: 24px 18px; }
            .btn-row { flex-direction: column; }
            .footer-top { grid-template-columns: 1fr 1fr; }
            .footer-brand { grid-column: 1 / -1; }
        }
        @media (max-width: 480px) {
            .step-labels { display: none; }
            .form-overlay { padding: 24px 14px; }
            .team-live-name { font-size: 28px; letter-spacing: 2px; }
            .title-identity { font-size: 36px; }
            .title-values { font-size: 30px; }
            .invite-card { padding: 20px 14px; }
            .partner-input-row { flex-direction: column; }
            .btn-add-partner { width: 100%; }
            .foundation-cta { padding: 28px 18px; }
            .score-ring { width: 130px; height: 130px; }
            .score-big { font-size: 42px; }
        }
        /* ═══════════════════════════════════════
           RESPONSIVE — breakpoint iPad (≤1024px)
           e mobile (≤600px)
           ═══════════════════════════════════════ */
        @media (max-width: 1024px) {
            .footer-top { grid-template-columns: 1fr 1fr !important; }
            .footer-brand { grid-column: 1 / -1 !important; }
        }
        @media (max-width: 600px) {
            .footer-bottom { flex-direction: column; text-align: center; }
        }
    
        /* ── NAVBAR LOGGATO ── */
        .trsp-navbar { display: none; background: white; border-bottom: 1px solid #eee; padding: 0 20px; position: sticky; top: 0; z-index: 999; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
        .trsp-navbar.visible { display: flex; }
        .navbar-inner { max-width: 1100px; margin: 0 auto; width: 100%; display: flex; align-items: center; gap: 4px; height: 52px; }
        .navbar-logo { font-size: 13px; font-weight: 700; color: #175F75; letter-spacing: 2px; text-decoration: none; margin-right: 16px; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
        .navbar-logo-t { background: #175F75; color: white; width: 22px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
        .navbar-links { display: flex; align-items: center; gap: 2px; flex: 1; }
        .navbar-link { padding: 7px 12px; border-radius: 8px; font-size: 11px; font-weight: 600; color: #888; text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.2s; white-space: nowrap; }
        .navbar-link:hover { background: #f0f0f0; color: #175F75; }
        .navbar-link.active { background: #E8F4F8; color: #175F75; }
        .navbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
        .navbar-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #175F75, #55A2B5); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: white; cursor: pointer; text-decoration: none; flex-shrink: 0; }
        .navbar-avatar:hover { opacity: 0.85; }
        .navbar-signout { background: none; border: none; font-family: 'Montserrat'; font-size: 10px; font-weight: 600; color: #ccc; cursor: pointer; padding: 6px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.2s; }
        .navbar-signout:hover { color: #e74c3c; background: #fff0f0; }

        /* ══════════════════════════════════════════════════════════
           STARTER PACK — Tipo A / Tipo B / modal anteprima
           v5 6set2026: regole ripristinate (erano andate perse in una
           sovrascrittura del blocco style: markup e JS erano rimasti,
           il CSS era tornato a una versione precedente allo starter)
           ══════════════════════════════════════════════════════════ */

        .starter-panel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 34px 26px 60px; background: #fff; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s ease; z-index: 55; }
        .starter-panel.active { opacity: 1; visibility: visible; pointer-events: auto; }

        .starter-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 3.5px; text-transform: uppercase; color: var(--blue); text-align: center; margin-bottom: 10px; }
        .starter-title { font-size: 24px; font-weight: 300; letter-spacing: 1.5px; color: var(--blue); text-align: center; margin-bottom: 10px; }
        .starter-sub { font-size: 12px; font-weight: 300; line-height: 1.6; color: #888; text-align: center; max-width: 460px; margin: 0 auto 26px; }

        .starter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; max-width: 620px; margin: 0 auto; }

        .starter-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 16px; padding: 18px 14px; text-align: center; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
        .starter-card:hover { border-color: var(--green); box-shadow: 0 8px 22px rgba(0,0,0,.07); transform: translateY(-2px); }
        .starter-card.selected { border-color: var(--green); border-width: 2px; box-shadow: 0 8px 22px rgba(143,197,91,.22); }
        .starter-card-icon { font-size: 26px; line-height: 1; margin-bottom: 9px; }
        .starter-card-name { font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--blue); margin-bottom: 5px; }
        .starter-card-desc { font-size: 10.5px; font-weight: 300; line-height: 1.5; color: #999; }

        .card-zero { background: #fbfdf9; border: 2px dashed var(--green); border-radius: 16px; padding: 18px 14px; text-align: center; cursor: pointer; transition: background .2s, transform .2s; }
        .card-zero:hover { background: #f2f9ea; transform: translateY(-2px); }
        .card-zero-icon { font-size: 24px; line-height: 1; margin-bottom: 9px; color: var(--green); }
        .card-zero-name { font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--green); margin-bottom: 5px; text-transform: uppercase; }
        .card-zero-desc { font-size: 10.5px; font-weight: 300; line-height: 1.5; color: #9aa89a; }

        /* ── Modal anteprima modello ── */
        .model-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(20,30,35,.5); backdrop-filter: blur(3px); z-index: 900; padding: 20px; overflow-y: auto; }
        .model-modal-overlay.open { display: flex; align-items: center; justify-content: center; }
        .model-modal { background: #fff; border-radius: 22px; width: 100%; max-width: 440px; padding: 26px 26px 22px; box-shadow: 0 24px 60px rgba(0,0,0,.22); margin: auto; }

        .modal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
        .modal-nav-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #e8e8e8; background: #fff; color: var(--blue); font-size: 15px; line-height: 1; cursor: pointer; transition: border-color .2s, opacity .2s; font-family: 'Montserrat', sans-serif; }
        .modal-nav-btn:hover:not(:disabled) { border-color: var(--blue); }
        .modal-nav-btn:disabled { opacity: .3; cursor: default; }
        .modal-counter { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; color: #bbb; }

        .modal-icon { font-size: 34px; text-align: center; line-height: 1; margin-bottom: 8px; }
        .modal-name { font-size: 19px; font-weight: 700; letter-spacing: .5px; color: var(--blue); text-align: center; margin-bottom: 6px; }
        .modal-desc { font-size: 12px; font-weight: 300; line-height: 1.6; color: #888; text-align: center; margin-bottom: 20px; }

        .modal-vsm-section { margin-bottom: 14px; }
        .modal-vsm-label { font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 7px; }
        .modal-vsm-label.val { color: var(--green); }
        .modal-vsm-label.srv { color: var(--yellow); }
        .modal-vsm-label.rol { color: var(--purple); }
        .modal-vsm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
        .modal-chip { display: inline-block; font-size: 10.5px; font-weight: 500; padding: 5px 11px; border-radius: 20px; border: 1px solid #eee; background: #fafafa; color: #555; }
        .modal-chip.val { border-color: rgba(143,197,91,.45); background: rgba(143,197,91,.09); }
        .modal-chip.srv { border-color: rgba(230,207,66,.5); background: rgba(230,207,66,.11); }
        .modal-chip.rol { border-color: rgba(181,77,141,.35); background: rgba(181,77,141,.08); }

        .modal-actions { display: flex; gap: 10px; margin-top: 20px; }
        .modal-btn-cancel { flex: 0 0 auto; padding: 12px 18px; border-radius: 12px; border: 1px solid #e8e8e8; background: #fff; color: #999; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; font-family: 'Montserrat', sans-serif; }
        .modal-btn-cancel:hover { border-color: #ccc; color: #666; }
        .modal-btn-confirm { flex: 1; padding: 12px 16px; border-radius: 12px; border: none; background: var(--green); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; font-family: 'Montserrat', sans-serif; transition: opacity .2s; }
        .modal-btn-confirm:hover { opacity: .88; }

        /* ── Tipo B: integra con un tema ── */
        .tipo-b-bar { border: 1px solid #eee; border-radius: 16px; padding: 16px 18px; margin: 22px 0 18px; background: #fbfcfb; }
        .tipo-b-title { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--blue); margin-bottom: 11px; }
        .tipo-b-chips { display: flex; flex-wrap: wrap; gap: 7px; }
        .tipo-b-chip { font-size: 11px; font-weight: 500; padding: 7px 13px; border-radius: 20px; border: 1px solid #e8e8e8; background: #fff; color: #666; cursor: pointer; font-family: 'Montserrat', sans-serif; transition: border-color .2s, color .2s; }
        .tipo-b-chip:hover { border-color: var(--blue); color: var(--blue); }
        .tipo-b-chip.selected { border-color: var(--blue); border-width: 2px; color: var(--blue); font-weight: 700; background: rgba(23,95,117,.05); }

        .starter-preview { display: none; margin-top: 14px; border-top: 1px solid #eee; padding-top: 13px; }
        .starter-preview.open { display: block; }
        .preview-label { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #bbb; margin-bottom: 9px; }
        .preview-item { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 300; color: #555; padding: 3px 0; }
        .preview-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

        @media (max-width: 600px) {
            .starter-panel { padding: 24px 16px 60px; }
            .starter-title { font-size: 20px; }
            .starter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
            .starter-card-name, .card-zero-name { font-size: 11.5px; }
            .starter-card-desc, .card-zero-desc { font-size: 10px; }
            .starter-card, .card-zero { padding: 15px 11px; }
            .model-modal { padding: 22px 18px 18px; border-radius: 18px; }
            .modal-actions { flex-direction: column-reverse; }
            .modal-btn-cancel { width: 100%; }
        }


        /* ── Food: card di ingresso al settore e ritorno ── */
        .starter-card.is-sector { background: #fbfdf9; border-color: rgba(143,197,91,.55); }
        .starter-card.is-sector .starter-card-name { color: #5f8f33; }
        .sector-hint { display: block; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green); margin-top: 7px; }
        .starter-back { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; background: none; border: none; color: #999; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; padding: 4px 2px 10px; }
        .starter-back:hover { color: var(--blue); }

        /* ══════════════════════════════════════════════════════════
           SEQUENZA GUIDATA — stesso ripristino dello starter pack:
           markup e JS presenti, regole assenti dal file
           ══════════════════════════════════════════════════════════ */

        .guided-panel { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff; padding: 30px 22px 60px; z-index: 58; }
        .guided-panel.active { display: block; }
        .guided-inner { max-width: 460px; margin: 0 auto; }

        .guided-category-label { font-size: 10px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--blue); text-align: center; margin-bottom: 14px; }

        .guided-progress { display: flex; justify-content: center; gap: 6px; margin-bottom: 26px; flex-wrap: wrap; }
        .guided-prog-dot { width: 7px; height: 7px; border-radius: 50%; background: #e8e8e8; transition: background .3s, transform .3s; }
        .guided-prog-dot.done { background: var(--green); }
        .guided-prog-dot.current { background: var(--blue); transform: scale(1.45); }

        .guided-item-name { font-size: 21px; font-weight: 700; letter-spacing: .5px; color: var(--blue); text-align: center; line-height: 1.25; margin-bottom: 10px; }
        .guided-item-name-input { width: 100%; text-align: center; font-family: 'Montserrat', sans-serif; font-size: 19px; font-weight: 700; color: var(--blue); border: none; border-bottom: 2px solid #e8e8e8; background: transparent; padding: 6px 4px; margin-bottom: 10px; outline: none; }
        .guided-item-name-input:focus { border-bottom-color: var(--green); }
        .guided-item-desc { font-size: 12.5px; font-weight: 300; line-height: 1.65; color: #888; text-align: center; margin-bottom: 26px; }

        .guided-rating-label { font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #bbb; text-align: center; margin-bottom: 12px; }
        .guided-rating-row { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
        .guided-rating-num { font-size: 30px; font-weight: 200; color: var(--blue); min-width: 54px; text-align: center; line-height: 1; }

        .guided-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 5px; border-radius: 3px; background: #ececec; outline: none; }
        .guided-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); border: 3px solid #fff; box-shadow: 0 2px 7px rgba(0,0,0,.2); cursor: pointer; }
        .guided-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--blue); border: 3px solid #fff; box-shadow: 0 2px 7px rgba(0,0,0,.2); cursor: pointer; }
        .guided-slider.gs-green::-webkit-slider-thumb { background: var(--green); }
        .guided-slider.gs-green::-moz-range-thumb { background: var(--green); }
        .guided-slider.gs-yellow::-webkit-slider-thumb { background: var(--yellow); }
        .guided-slider.gs-yellow::-moz-range-thumb { background: var(--yellow); }
        .guided-slider.gs-purple::-webkit-slider-thumb { background: var(--purple); }
        .guided-slider.gs-purple::-moz-range-thumb { background: var(--purple); }

        .guided-warning { font-size: 11px; font-weight: 400; line-height: 1.5; color: #c98a2e; background: #fdf7ec; border-radius: 9px; padding: 9px 12px; margin-top: 12px; text-align: center; }
        .guided-warning:empty { display: none; }

        .guided-btn-row { display: flex; gap: 10px; margin-top: 26px; }
        .guided-btn-confirm { flex: 1; padding: 14px; border: none; border-radius: 12px; background: var(--green); color: #fff; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: opacity .2s; }
        .guided-btn-confirm:hover { opacity: .88; }
        .guided-btn-skip { flex: 0 0 auto; padding: 14px 20px; border: 1px solid #e8e8e8; border-radius: 12px; background: #fff; color: #aaa; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
        .guided-btn-skip:hover { border-color: #ccc; color: #777; }

        .guided-cat-transition { text-align: center; padding: 30px 0 10px; }
        .guided-cat-icon { font-size: 40px; line-height: 1; margin-bottom: 14px; }
        .guided-cat-title { font-size: 19px; font-weight: 700; letter-spacing: .5px; color: var(--blue); margin-bottom: 8px; }
        .guided-cat-sub { font-size: 12.5px; font-weight: 300; line-height: 1.6; color: #888; max-width: 340px; margin: 0 auto 24px; }
        .guided-cat-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
        .guided-btn-yes { padding: 12px 20px; border: 1px solid var(--green); border-radius: 12px; background: #fff; color: var(--green); font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 1px; cursor: pointer; transition: background .2s, color .2s; }
        .guided-btn-yes:hover { background: var(--green); color: #fff; }
        .guided-btn-no { padding: 12px 20px; border: none; border-radius: 12px; background: var(--blue); color: #fff; font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 1px; cursor: pointer; transition: opacity .2s; }
        .guided-btn-no:hover { opacity: .88; }

        @media (max-width: 600px) {
            .guided-panel { padding: 22px 16px 60px; }
            .guided-item-name { font-size: 18px; }
            .guided-rating-num { font-size: 26px; min-width: 46px; }
            .guided-btn-row { flex-direction: column; }
            .guided-btn-skip { width: 100%; }
        }

        </style>
</head>
<body onload="document.body.classList.add('loaded')">
    <!-- ═══════════════════════════════════════════════════════════════
     TRASPALITY GLOBAL NAVBAR — incolla in cima a ogni pagina
     Richiede: Supabase client già inizializzato come `db`
     oppure lo inizializza autonomamente se non presente
     ═══════════════════════════════════════════════════════════════ -->

<style>
/* ── NAVBAR GLOBALE ───────────────────────────────────────────── */
.trsp-nav {
    background:#fff;
    border-bottom:1px solid #e8e8e8;
    padding:0 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;
    top:0;
    z-index:200;
    height:56px;
    gap:16px;
}

.trsp-nav-logo {
    display:flex;
    align-items:center;
    text-decoration:none;
    flex-shrink:0;
}
.trsp-nav-logo img { height:24px; }

.trsp-nav-center {
    display:flex;
    align-items:center;
    gap:2px;
    flex:1;
    justify-content:center;
}

.trsp-nav-link {
    font-size:11px;
    font-weight:600;
    letter-spacing:.5px;
    color:#888;
    text-decoration:none;
    padding:7px 12px;
    border-radius:8px;
    transition:all .2s;
    white-space:nowrap;
    border:none;
    background:none;
    cursor:pointer;
    font-family:'Montserrat',sans-serif;
}
.trsp-nav-link:hover { color:#175F75; background:rgba(23,95,117,.06); }

/* DROPDOWN wrapper */
.trsp-dropdown { position:relative; }

.trsp-dropdown-btn {
    display:flex;
    align-items:center;
    gap:5px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.5px;
    color:#888;
    padding:7px 12px;
    border-radius:8px;
    transition:all .2s;
    white-space:nowrap;
    border:none;
    background:none;
    cursor:pointer;
    font-family:'Montserrat',sans-serif;
}
.trsp-dropdown-btn:hover { color:#175F75; background:rgba(23,95,117,.06); }
.trsp-dropdown-btn .chevron {
    width:12px; height:12px;
    transition:transform .2s;
    stroke:#888;
}
.trsp-dropdown.open .trsp-dropdown-btn .chevron { transform:rotate(180deg); }

/* Panel dropdown */
.trsp-dropdown-panel {
    display:none;
    position:absolute;
    top:calc(100% + 6px);
    left:50%;
    transform:translateX(-50%);
    background:#fff;
    border:1px solid #e8e8e8;
    border-radius:14px;
    padding:6px;
    min-width:200px;
    box-shadow:0 8px 32px rgba(0,0,0,.1);
    z-index:300;
}
.trsp-dropdown-panel.right-aligned {
    left:auto;
    right:0;
    transform:none;
}
.trsp-dropdown.open .trsp-dropdown-panel { display:block; }

.trsp-dd-item {
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 12px;
    border-radius:9px;
    font-size:12px;
    font-weight:500;
    color:#333;
    text-decoration:none;
    cursor:pointer;
    transition:background .15s;
    white-space:nowrap;
    border:none;
    background:none;
    width:100%;
    font-family:'Montserrat',sans-serif;
    text-align:left;
}
.trsp-dd-item:hover { background:#f5f6f4; color:#175F75; }
.trsp-dd-item.danger { color:#cc4444; }
.trsp-dd-item.danger:hover { background:#fff5f5; }
.trsp-dd-separator { height:1px; background:#f0f0f0; margin:4px 6px; }
.trsp-dd-label {
    font-size:9px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#bbb;
    padding:6px 12px 4px;
}
.trsp-dd-loading { font-size:11px; color:#bbb; padding:10px 12px; font-style:italic; }

/* Avatar utente */
.trsp-nav-avatar {
    width:32px;
    height:32px;
    border-radius:50%;
    background:#175F75;
    color:#fff;
    font-size:11px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

/* User button */
.trsp-user-btn {
    display:flex;
    align-items:center;
    gap:8px;
    padding:5px 10px 5px 5px;
    border-radius:20px;
    border:1px solid #e8e8e8;
    background:#fff;
    cursor:pointer;
    transition:all .2s;
    font-family:'Montserrat',sans-serif;
}
.trsp-user-btn:hover { border-color:#175F75; background:rgba(23,95,117,.03); }
.trsp-user-name {
    font-size:11px;
    font-weight:700;
    color:#175F75;
    letter-spacing:.5px;
    max-width:100px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Pages badge */
.trsp-pages-badge {
    background:#E05454;
    color:#fff;
    font-size:9px;
    font-weight:800;
    width:16px;
    height:16px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

/* HAMBURGER MOBILE */
.trsp-hamburger-btn { display:none; background:none; border:none; cursor:pointer; padding:8px; flex-shrink:0; }
.trsp-hamburger-btn svg { width:22px; height:22px; stroke:#175F75; }
.trsp-mobile-panel { display:none; flex-direction:column; background:#fff; border-top:1px solid #e8e8e8; padding:8px 16px 16px; }
.trsp-mobile-panel.open { display:flex; }
.trsp-mobile-panel a.trsp-nav-link, .trsp-mobile-panel .trsp-dropdown-btn { display:block; width:100%; text-align:left; padding:12px 8px; border-bottom:1px solid #f5f5f5; }
.trsp-mobile-panel .trsp-dropdown-panel { position:static; box-shadow:none; border:none; transform:none; left:0; top:0; padding-left:16px; }
.trsp-mobile-panel .trsp-dropdown.open .trsp-dropdown-panel { display:block; }

/* LOGO responsive: scritta intera su desktop, sola icona T su mobile */
.logo-mobile { display:none; }

@media(max-width:600px) {
    .trsp-nav { padding:0 16px; height:52px; }
    .trsp-nav-center { display:none; }
    .trsp-hamburger-btn { display:flex; align-items:center; }
    .logo-desktop { display:none; }
    .logo-mobile { display:block; height:28px; }
    /* Avatar compatto: solo il tondo con le iniziali, niente nome né freccia */
    .trsp-user-name, .trsp-user-btn svg { display:none; }
    .trsp-user-btn { padding:0; border:none; background:none; }
}
</style>

<style>/* menu-fix 05nov2026: su telefono il menu dell'avatar usciva dallo schermo a sinistra; ora occupa la larghezza dello schermo sotto la barra */@media(max-width:600px){#trsp-user-dd .trsp-dropdown-panel{position:fixed;left:12px;right:12px;top:auto;min-width:0;max-height:75vh;overflow-y:auto}}</style>
<nav class="trsp-nav" id="trsp-global-nav">
    <!-- Logo → Home pubblica -->
    <a class="trsp-nav-logo" href="/index.html">
        <img src="/logo.png" alt="Traspality" class="logo-desktop">
        <img src="/t.png" alt="Traspality" class="logo-mobile">
    </a>

    <!-- Centro: DESIGN · CERTIFIED · COMMUNICATION · Le mie pagine · Metodo -->
    <div class="trsp-nav-center">
        <a class="trsp-nav-link" href="/design.html" title="Progetta l&rsquo;organizzazione che vuoi diventare">DESIGN</a>
        <a class="trsp-nav-link" href="/time.html" title="Il tempo colorato da Traspality" style="display:inline-flex;align-items:center;gap:5px;color:#111"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" aria-hidden="true" style="vertical-align:-2px"><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 14"/></svg>TIME</a>
        <a class="trsp-nav-link" href="/teams.html" title="La prova, ogni giorno, che fate quello che dite">CERTIFIED</a>
        <a class="trsp-nav-link" href="/communicate.html" title="Racconta il tuo team a chi non c&rsquo;&egrave; ancora dentro">COMMUNICATION</a>

        <!-- PAGES dropdown -->
        <div class="trsp-dropdown" id="trsp-pages-dd">
            <button class="trsp-dropdown-btn" onclick="trspToggleDD('trsp-pages-dd')">
                Le mie pagine
                <svg class="chevron" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
            </button>
            <div class="trsp-dropdown-panel" id="trsp-pages-panel">
                <div class="trsp-dd-loading">Carico le pagine...</div>
            </div>
        </div>

        <a class="trsp-nav-link" href="/metodologia.html">Metodo</a>
    </div>

    <!-- Destra: avatar + nome utente dropdown -->
    <div class="trsp-dropdown" id="trsp-user-dd" style="display:none">
        <button class="trsp-user-btn" onclick="trspToggleDD('trsp-user-dd')">
            <div class="trsp-nav-avatar" id="trsp-nav-avatar">?</div>
            <span class="trsp-user-name" id="trsp-nav-username">—</span>
            <svg class="chevron" style="width:10px;height:10px;stroke:#aaa" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
        </button>
        <div class="trsp-dropdown-panel right-aligned">
            <div class="trsp-dd-label">Il tuo spazio</div>
            <a class="trsp-dd-item" href="/hub.html">
                <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
                PERSONAL HUB
            </a>
            <a class="trsp-dd-item" href="/time.html"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 14"/></svg>
                TRASPALITY TIME</a>
            <a class="trsp-dd-item" href="/profile.html">
                <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                Profilo e impostazioni
            </a>
            <div class="trsp-dd-separator"></div>
            <div class="trsp-dd-label">Piano</div>
            <div class="trsp-dd-item" id="trsp-plan-item">
                <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                <span id="trsp-plan-label">Carico...</span>
            </div>
            <div class="trsp-dd-separator"></div>
            <button class="trsp-dd-item danger" onclick="trspSignOut()">
                <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
                Esci
            </button>
        </div>
    </div>

    <!-- Accedi (se non loggato) -->
    <a href="/login.html" id="trsp-login-btn" class="trsp-nav-link" style="display:none;color:#175F75;font-weight:700">Accedi →</a>

    <button class="trsp-hamburger-btn" onclick="trspToggleMobileMenu()" aria-label="Menu">
        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
    </button>
</nav>

<!-- PANNELLO MENU MOBILE (hamburger) -->
<div class="trsp-mobile-panel" id="trsp-mobile-panel">
    <a class="trsp-nav-link" href="/design.html">DESIGN</a>
    <a class="trsp-nav-link" href="/teams.html">CERTIFIED</a>
    <a class="trsp-nav-link" href="/communicate.html">COMMUNICATION</a>
    <div class="trsp-dropdown" id="trsp-pages-dd-mobile">
        <button class="trsp-dropdown-btn" onclick="trspToggleDD('trsp-pages-dd-mobile')">
            Le mie pagine
            <svg class="chevron" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
        </button>
        <div class="trsp-dropdown-panel" id="trsp-pages-panel-mobile">
            <div class="trsp-dd-loading">Carico le pagine...</div>
        </div>
    </div>
    <a class="trsp-nav-link" href="/metodologia.html">Metodo</a>
    <a class="trsp-nav-link" href="/time.html">TRASPALITY TIME</a>
</div>

<script src="/plan.js"></script>
<script>
(function() {
    /* ── DROPDOWN TOGGLE ── */
    window.trspToggleDD = function(id) {
        document.querySelectorAll('.trsp-dropdown.open').forEach(function(el) {
            if (el.id !== id) el.classList.remove('open');
        });
        document.getElementById(id).classList.toggle('open');
    };

    window.trspToggleMobileMenu = function() {
        document.getElementById('trsp-mobile-panel').classList.toggle('open');
    };

    document.addEventListener('click', function(e) {
        if (!e.target.closest('.trsp-dropdown')) {
            document.querySelectorAll('.trsp-dropdown.open').forEach(function(el) {
                el.classList.remove('open');
            });
        }
    });

    /* ── INIT NAVBAR ── */
    async function trspNavInit() {
        try {
            // Usa db globale se esiste, altrimenti inizializza
            var client = window.db || window.supabaseClient;
            if (!client && window.supabase) {
                client = supabase.createClient(
                    'https://otllbwtdbfubmeaewyze.supabase.co',
                    'sb_publishable_hgD8skYCfzIe0CiUu0hIKg_7kCc7nBZ',
                    { auth:{ persistSession:true, autoRefreshToken:true, detectSessionInUrl:false, storage:window.localStorage } }
                );
                window._trspNavClient = client;
            }
            if (!client) return;

            var session = await client.auth.getSession();
            var user = session.data && session.data.session ? session.data.session.user : null;
            if (!user) {
                document.getElementById('trsp-login-btn').style.display = 'inline-block';
                var loginHtml = '<a class="trsp-dd-item" href="/login.html">Accedi per vedere le tue pagine</a>';
                document.getElementById('trsp-pages-panel').innerHTML = loginHtml;
                var mp0 = document.getElementById('trsp-pages-panel-mobile');
                if (mp0) mp0.innerHTML = loginHtml;
                return;
            }

            // Mostra utente
            var fullName = (user.user_metadata && user.user_metadata.full_name) ? user.user_metadata.full_name : user.email.split('@')[0];
            var firstName = fullName.split(' ')[0];
            var initials  = fullName.split(' ').map(function(w){return w[0]}).join('').toUpperCase().slice(0,2);

            document.getElementById('trsp-nav-avatar').innerText   = initials;
            document.getElementById('trsp-nav-username').innerText = firstName;
            document.getElementById('trsp-user-dd').style.display  = 'block';

            // Piano utente
            var planRes = await client.from('profiles').select('plan,trial_ends_at,is_active').eq('id', user.id).maybeSingle();
            var planLabel = 'Free';
            if (planRes.data) {
                var p = planRes.data;
                if (p.plan === 'pro') {
                    planLabel = '★ Piano Pro';
                } else if (p.trial_ends_at && new Date(p.trial_ends_at) > new Date()) {
                    var days = Math.ceil((new Date(p.trial_ends_at) - new Date()) / 86400000);
                    planLabel = 'Trial Pro — ' + days + ' gg';
                } else {
                    planLabel = 'Piano Free — Attiva Pro';
                }
            }
            document.getElementById('trsp-plan-label').innerText = planLabel;

            // Pagine pubbliche
            var foundedRes  = await client.from('teams').select('id,name,is_public,slug').eq('founder_id', user.id).order('name');
            var partnerRes  = await client.from('partners').select('team_id, teams(id,name,is_public,slug)')
                .eq('user_id', user.id).in('status', ['active','accepted','founding']);

            var founderIds = new Set((foundedRes.data||[]).map(function(t){return t.id}));
            var partnerTeams = (partnerRes.data||[]).map(function(r){return r.teams}).filter(function(t){return t && !founderIds.has(t.id)});
            var allTeams = (foundedRes.data||[]).concat(partnerTeams);

            var panel = document.getElementById('trsp-pages-panel');
            var panelMobile = document.getElementById('trsp-pages-panel-mobile');
            function setPanelsHTML(h) {
                panel.innerHTML = h;
                if (panelMobile) panelMobile.innerHTML = h;
            }
            if (!allTeams.length) {
                setPanelsHTML('<div class="trsp-dd-loading">Nessun team ancora</div>' +
                    '<div class="trsp-dd-separator"></div>' +
                    '<a class="trsp-dd-item" href="/design.html"><svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> Fonda un team</a>' +
                    (planRes.data && planRes.data.is_active ? '<div class="trsp-dd-separator"></div><a class="trsp-dd-item" href="/profile-dna.html?user=' + user.id + '" target="_blank"><svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg> Il mio DNA</a>' : ''));
                return;
            }

            var publicTeams  = allTeams.filter(function(t){return t.is_public});
            var privateTeams = allTeams.filter(function(t){return !t.is_public});

            var html = '';
            if (publicTeams.length) {
                html += '<div class="trsp-dd-label">Pagine pubbliche</div>';
                html += publicTeams.map(function(t) {
                    return '<a class="trsp-dd-item" href="/public.html?team=' + t.id + '" target="_blank">' +
                        '<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>' +
                        '<span translate="no">' + t.name + '</span></a>';
                }).join('');
            }
            if (privateTeams.length) {
                html += '<div class="trsp-dd-label">Private</div>';
                html += privateTeams.map(function(t) {
                    return '<a class="trsp-dd-item" href="/dashboard.html?team=' + t.id + '">' +
                        '<svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>' +
                        '<span translate="no">' + t.name + '</span></a>';
                }).join('');
            }
            if (planRes.data && planRes.data.is_active) {
                html += '<div class="trsp-dd-separator"></div>';
                html += '<a class="trsp-dd-item" href="/profile-dna.html?user=' + user.id + '" target="_blank"><svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg> Il mio DNA</a>';
            }
            html += '<div class="trsp-dd-separator"></div>';
            html += '<a class="trsp-dd-item" href="/design.html"><svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> Fonda un nuovo team</a>';
            setPanelsHTML(html);

        } catch(e) {
            console.error('trspNavInit:', e);
        }
    }

    window.trspSignOut = async function() {
        var client = window.db || window.supabaseClient || window._trspNavClient;
        if (client) await client.auth.signOut();
        window.location.href = '/login.html';
    };

    // Aspetta che Supabase sia caricato
    if (window.supabase) {
        trspNavInit();
    } else {
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(trspNavInit, 500);
        });
    }
})();
</script>


    <!-- HEADER -->
    <!-- header logo rimosso -->

    <!-- PROGRESS -->
    <div class="progress-bar"><div class="progress-fill" id="progress-fill"></div></div>
    <div class="step-labels">
        <span class="step-label active" id="lbl-1" onclick="jumpToStep(1)">Identity</span>
        <span class="step-label" id="lbl-2" onclick="jumpToStep(2)">DNA</span>
        <span class="step-label" id="lbl-3" onclick="jumpToStep(3)">Promessa</span>
        <span class="step-label" id="lbl-4" onclick="jumpToStep(4)">Team</span>
        <span class="step-label" id="lbl-5">Fondazione</span>
        <span class="step-label" id="lbl-6">Visibilità</span>
    </div>

    <!-- ══════════════════════════════ STEP 1 + 2 (area con blob) -->
    <main class="creation-space" id="main-space">
        <svg class="filaments-container" id="dna-filaments" viewBox="0 0 100 120" preserveAspectRatio="none">
            <path class="dna-strand strand-1" fill="#E6CF42" opacity="0.6" d="M 50,0 C 90,20 90,40 50,60 C 10,80 10,100 50,120 C 15,100 15,80 50,60 C 85,40 85,20 50,0 Z" />
            <path class="dna-strand strand-2" fill="#8FC55B" opacity="0.6" d="M 50,0 C 10,20 10,40 50,60 C 90,80 90,100 50,120 C 85,100 85,80 50,60 C 15,40 15,20 50,0 Z" />
            <path class="dna-strand strand-3" fill="#B54D8D" opacity="0.6" d="M 50,-20 C 90,0 90,20 50,40 C 10,60 10,80 50,100 C 15,80 15,60 50,40 C 85,20 85,0 50,-20 Z" />
        </svg>
        <div class="blob-wrapper drop-green"><img src="blob-green.png" alt="" class="blob-bg"></div>
        <div class="blob-wrapper drop-yellow"><img src="blob-yellow.png" alt="" class="blob-bg"></div>
        <div class="blob-wrapper drop-purple"><img src="blob-purple.png" alt="" class="blob-bg"></div>

        <div class="team-live-header" id="live-header">
            <div class="team-live-name" id="display-name" translate="no">Team Name</div>
            <div class="team-live-slogan" id="display-slogan" data-user-text>Slogan</div>
        </div>

        <!-- STEP 1 -->
        <div class="step-container step-1" id="step1">
            <div class="form-overlay">
                <h2>TEAM IDENTITY</h2>
                <a href="/lab/fonda-ai.html" class="ai-alt" id="ai-alt">
                    <div class="ai-alt-eyebrow">NOVITÀ</div>
                    <div class="ai-alt-title">&#10022; FONDA CON AI</div>
                    <div class="ai-alt-text">Racconta il tuo progetto: l&rsquo;AI ti propone valori, servizi e ruoli tutti insieme. Tu correggi e confermi.</div>
                    <span class="ai-alt-cta">Inizia &rarr;</span>
                </a>
                <span class="ai-alt-or">oppure compila tu, passo passo</span>
                <div id="step1-form">
                    <div class="input-group">
                        <label>Nome del Team</label>
                        <input type="text" id="input-name" placeholder="Es. Stramba" required>
                    </div>
                    <div class="input-group">
                        <label>Ragione Sociale (Opzionale)</label>
                        <input type="text" id="input-ragione" placeholder="Es. Stramba S.r.l.">
                    </div>
                    <div class="input-group">
                        <label>Slogan / Pay-off</label>
                        <input type="text" id="input-slogan" placeholder="Es. Do what you say">
                    </div>
                    <button type="button" class="btn-submit" onclick="goToStep2()">DEFINE DNA →</button>
                    <a href="login.html" class="login-link" id="login-link-step1">Sei già registrato? Accedi qui</a>
                </div>
                <a href="come-si-crea.html?from=design" target="_blank" rel="noopener" class="help-guide-link">Serve aiuto? <strong>Scopri come creare il tuo Traspality</strong> &rarr;</a>
            </div>
        </div>

        <!-- STEP 1B — MODEL SELECTOR (Tipo A) -->
        <div class="starter-panel" id="step1b">
            <div class="starter-eyebrow">DNA Starter Pack — Tipo A</div>
            <div class="starter-title">Che tipo di team sei?</div>
            <div class="starter-sub">Scegli un modello di partenza. Caricheremo i VSR per te — aggiungi solo il rating. Puoi modificare tutto in seguito.</div>
            <div class="starter-grid" id="tipo-a-grid"></div>

        </div>

        <!-- MODAL ANTEPRIMA MODELLO -->
        <div class="model-modal-overlay" id="model-modal-overlay" onclick="closeModelModal(event)">
            <div class="model-modal">
                <div class="modal-nav">
                    <button class="modal-nav-btn" id="modal-prev" onclick="navigateModal(-1)">&#8592;</button>
                    <span class="modal-counter" id="modal-counter">1 / 8</span>
                    <button class="modal-nav-btn" id="modal-next" onclick="navigateModal(1)">&#8594;</button>
                </div>
                <div class="modal-icon" id="modal-icon">🚀</div>
                <div class="modal-name" id="modal-name">Startup</div>
                <div class="modal-desc" id="modal-desc"></div>
                <div class="modal-vsm-section">
                    <div class="modal-vsm-label val">Valori</div>
                    <div class="modal-vsm-chips" id="modal-values"></div>
                </div>
                <div class="modal-vsm-section">
                    <div class="modal-vsm-label srv">Servizi</div>
                    <div class="modal-vsm-chips" id="modal-services"></div>
                </div>
                <div class="modal-vsm-section">
                    <div class="modal-vsm-label rol">Ruoli</div>
                    <div class="modal-vsm-chips" id="modal-roles"></div>
                </div>
                <div class="modal-actions">
                    <button class="modal-btn-cancel" onclick="closeModelModal()">Annulla</button>
                    <button class="modal-btn-confirm" onclick="useSelectedModel()">Usa questo modello →</button>
                </div>
            </div>
        </div>

        <!-- MODAL TRIAL PRO — scatta quando si sceglie un modello da utente Free -->
        <div id="trial-gate-overlay" style="display:none;align-items:center;justify-content:center;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999">
            <div style="max-width:400px;width:90%;padding:36px 32px;background:#fff;border-radius:16px;text-align:center">
                <div style="font-size:28px;margin-bottom:12px">⭐</div>
                <div style="font-size:18px;font-weight:800;color:#175F75;margin-bottom:8px">I modelli sono una feature Pro</div>
                <div style="font-size:13px;color:#666;margin-bottom:24px;line-height:1.6">Attiva <strong>30 giorni gratis</strong> di Piano Pro per usare i modelli di partenza, il rating certificato e tutte le feature avanzate. Nessuna carta di credito richiesta.</div>
                <button id="btn-activate-trial" onclick="activateTrialAndProceed()" style="width:100%;padding:14px;background:#8FC55B;color:#1a1a1a;border:none;border-radius:10px;font-family:Montserrat;font-size:13px;font-weight:800;letter-spacing:1px;cursor:pointer;margin-bottom:10px">Attiva 30 giorni gratis →</button>
                <button onclick="closeTrialModal()" style="background:none;border:none;color:#aaa;font-family:Montserrat;font-size:12px;cursor:pointer">Fonda senza modello</button>
            </div>
        </div>

        <div id="login-gate-overlay" style="display:none;align-items:center;justify-content:center;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999">
            <div style="max-width:380px;width:90%;padding:32px;background:#fff;border-radius:16px">
                <div style="font-size:20px;font-weight:700;color:#175F75;margin-bottom:6px">Accedi per continuare</div>
                <div style="font-size:13px;color:#666;margin-bottom:20px">Il tuo DNA è già pronto. Accedi (o registrati) per salvarlo — non perderai nulla.</div>
                <input type="email" id="lg-email" placeholder="Email" style="width:100%;padding:10px;margin-bottom:8px;border:1px solid #ddd;border-radius:8px;font-family:Montserrat;box-sizing:border-box">
                <input type="password" id="lg-password" placeholder="Password" style="width:100%;padding:10px;margin-bottom:12px;border:1px solid #ddd;border-radius:8px;font-family:Montserrat;box-sizing:border-box">
                <button style="width:100%;margin-bottom:8px;background:#8FC55B;color:#fff;border:none;padding:12px;border-radius:8px;font-weight:700;cursor:pointer" onclick="loginGateSubmit()">Accedi →</button>
                <button style="width:100%;margin-bottom:8px;background:#fff;color:#175F75;border:1px solid #175F75;padding:12px;border-radius:8px;font-weight:700;cursor:pointer" onclick="loginGateGoogle()">Continua con Google</button>
                <div id="lg-error" style="color:#B54D8D;font-size:12px;margin-top:6px"></div>
                <div style="font-size:11px;color:#999;margin-top:12px;text-align:center">
                    Non hai un account? <a href="#" onclick="loginGateSignup();return false;" style="color:#175F75;font-weight:700">Registrati</a>
                </div>
            </div>
        </div>

        <!-- STEP GUIDED — Sequenza VSR guidata dal modello -->
        <div class="guided-panel" id="step-guided">
            <div class="guided-inner">
            <div class="guided-category-label" id="guided-cat-label">VALORI</div>
            <div class="guided-progress" id="guided-progress"></div>
            <!-- Vista singolo item -->
            <div id="guided-item-view">
                <div id="guided-name-static" class="guided-item-name"></div>
                <input type="text" id="guided-name-input" class="guided-item-name-input" style="display:none" placeholder="Nome servizio...">
                <div class="guided-item-desc" id="guided-item-desc"></div>
                <div class="guided-rating-label">RATING — proposto dal modello</div>
                <div class="guided-rating-row">
                    <div class="guided-rating-num" id="guided-rating-num">8</div>
                    <input type="range" class="guided-slider" id="guided-slider" min="1" max="10" step="0.5" value="8"
                        oninput="onGuidedSlider(this.value)">
                </div>
                <div class="guided-warning" id="guided-warning"></div>
                <div class="guided-btn-row">
                    <button class="guided-btn-confirm" onclick="confirmGuidedItem()">Conferma →</button>
                    <button class="guided-btn-skip" onclick="skipGuidedItem()">Salta</button>
                </div>
            </div>
            <!-- Transizione categoria -->
            <div id="guided-cat-transition" class="guided-cat-transition" style="display:none">
                <div class="guided-cat-icon" id="guided-trans-icon"></div>
                <div class="guided-cat-title" id="guided-trans-title"></div>
                <div class="guided-cat-sub" id="guided-trans-sub"></div>
                <div class="guided-cat-btns">
                    <button class="guided-btn-yes" onclick="addMoreInCategory()">Sì, aggiungo altri</button>
                    <button class="guided-btn-no" onclick="nextGuidedCategory()">No, avanti →</button>
                </div>
            </div>
            </div><!-- /guided-inner -->
        </div>

        <!-- STEP 2 — VALUES / SERVICES / ROLES -->
        <div class="step-container step-2" id="step2">
            <div class="values-interface">
                <button type="button" class="back-identity" onclick="backToIdentity()">← Identity</button>
                <div class="items-count" id="items-count"></div>
                <div class="chip-list" id="running-recap" style="margin-bottom:14px"></div>
                <div class="title-identity" id="cat-main-title">IDENTITY</div>
                <div class="title-values" id="cat-sub-title"><span class="title-small">YOUR</span> VALUES</div>

                <div id="view-input" class="view-section">
                    <div class="ex-wrap" id="ex-wrap">
                        <div class="ex-label">Ti servono spunti?</div>
                        <div class="example-chips" id="example-chips"></div>
                    </div>
                    <div class="value-input-wrapper">
                        <span class="value-input-number" id="item-number">1.</span>
                        <input type="text" id="main-item-input" class="value-custom-input" placeholder="SCRIVI QUI..." oninput="onNameInput(this.value)">
                    </div>
                    <textarea id="desc-textarea" translate="no" class="value-textarea" placeholder="La tua definizione: che cosa significa per il tuo team?"></textarea>
                    <button type="button" class="ai-compare-link" id="ai-compare-link" onclick="requestAiCompare()">&#10022; Confronta con una proposta Traspality</button>
                    <div id="ai-tags-box" class="ai-tags-box ai-compare-box" style="display:none">
                        <div class="ai-tags-eyebrow">
                            <span id="ai-tags-spinner" class="ai-tags-spinner"></span>
                            <span id="ai-tags-label">TRASPALITY sta pensando&hellip;</span>
                        </div>
                        <div id="ai-def-text" translate="no" class="ai-def-text" style="display:none"></div>
                        <div class="ai-choice" id="ai-choice" style="display:none">
                            <button type="button" id="ai-keep-btn" class="ai-choice-btn on" onclick="aiKeepMine()">Tengo la mia</button>
                            <button type="button" id="ai-use-btn" class="ai-choice-btn" onclick="aiUseProposal()">Uso la proposta</button>
                        </div>
                        <div class="ai-undo" id="ai-undo" style="display:none">La proposta è nel campo qui sopra: puoi ritoccarla. <button type="button" onclick="aiKeepMine()">Torna alla mia</button></div>
                        <div id="ai-tag-chips" class="ai-tag-chips" translate="no"></div>
                    </div>
                    <div class="rating-display">
                        <div class="rating-number" id="rating-val">8</div>
                        <div class="rating-max">/10</div>
                    </div>
                    <div class="slider-container">
                        <input type="range" min="1" max="10" value="8" id="valueRange" oninput="document.getElementById('rating-val').innerText = this.value">
                        <div class="slider-labels"><span>poco<br>importante</span><span style="text-align:right">molto<br>importante</span></div>
                    </div>
                    <div id="assign-wrap" class="assign-inline" style="display:none">
                        <div class="assign-inline-label"><b id="assign-label">Chi lo coprirà?</b> <span>facoltativo</span></div>
                        <div style="display:flex;gap:8px;margin-bottom:8px">
                            <input type="text" id="assign-input" placeholder="Nome o email" autocomplete="off" onkeydown="if(event.key==='Enter'){event.preventDefault();doAssign();}" style="flex:1;padding:9px 12px;border:1px solid #ddd;border-radius:8px;font-family:Montserrat;font-size:12px;background:#fff">
                            <button type="button" onclick="doAssign()" style="background:#175F75;color:#fff;border:none;border-radius:8px;padding:9px 14px;font-family:Montserrat;font-size:10px;font-weight:700;cursor:pointer">+ Aggiungi</button>
                        </div>
                        <div id="assign-list" translate="no" style="display:flex;flex-wrap:wrap;gap:6px"></div>
                        <div class="assign-inline-note">Puoi indicare i nomi o le email delle persone a cui lo affiderai. Alla fine del Design del tuo Traspality potrai invitarle a far parte del team.</div>
                    </div>
                    <button class="btn-save-item" onclick="saveItem()">CONFERMA <span id="btn-save-label">VALORE</span></button>
                </div>
                <div id="view-success" style="display:none"></div>
                <div id="item-toast" class="item-toast" aria-live="polite"></div>

                <div class="dynamic-nav" id="dynamic-nav"></div>
                <!-- TIPO B — Pacchetti tematici integrativi -->
                <div id="guided-resume-bar" style="display:none;background:#E8F4F8;border-radius:14px;padding:14px 18px;margin-bottom:12px;border:1px solid rgba(23,95,117,.2)">
                    <div style="font-size:10px;font-weight:700;letter-spacing:2px;color:#175F75;text-transform:uppercase;margin-bottom:6px">SEQUENZA GUIDATA IN CORSO</div>
                    <div style="font-size:12px;color:#555;margin-bottom:10px" id="guided-resume-msg">Sequenza guidata in corso.</div>
                    <button onclick="resumeGuidedSequence()" style="background:#175F75;color:#fff;border:none;padding:9px 18px;border-radius:8px;font-family:Montserrat;font-size:11px;font-weight:700;cursor:pointer">Riprendi ora →</button>
                    <button onclick="document.getElementById('guided-resume-bar').style.display='none'" style="background:none;border:none;color:#aaa;font-family:Montserrat;font-size:11px;cursor:pointer;margin-left:10px">Più tardi</button>
                </div>
                <div class="tipo-b-bar" id="tipo-b-bar" style="display:none">
                    <div class="tipo-b-title">Integra con un tema →</div>
                    <div class="tipo-b-chips" id="tipo-b-chips"></div>
                    <div class="starter-preview" id="tipo-b-preview">
                        <div class="preview-label">VSR da aggiungere</div>
                        <div id="tipo-b-preview-items"></div>
                        <button onclick="applyTipoBPack()" style="margin-top:10px;background:#175F75;color:#fff;border:none;padding:8px 18px;border-radius:8px;font-family:Montserrat;font-size:10px;font-weight:700;letter-spacing:1px;cursor:pointer">Aggiungi al mio DNA ✓</button>
                    </div>
                </div>
                <button class="btn-finalize" onclick="goToStep3()">CREA IL DNA DEL TUO NUOVO TRASPALITY</button>
                <div style="text-align:center;font-size:11px;color:#aaa;margin-top:8px">Potrai modificarlo in seguito.</div>
            </div>
        </div>
    </main>

    <!-- ══════════════════════════════ STEP 3 — RIEPILOGO + PROMESSA -->
    <div class="step-panel" id="step3">
        <div class="container">
            <div class="panel-header">
                <div class="panel-title">Step 3 di 5</div>
                <div class="panel-headline">Il DNA di <strong id="recap-name" translate="no">—</strong></div>
            </div>

            <div class="ai-ready" id="ai-ready" style="display:none">
                <strong>&#10022; Il DNA proposto con l&rsquo;AI è salvato.</strong>
                Puoi lasciarlo così com&rsquo;è e andare avanti, oppure toccare una voce per cambiarne il rating, o tornare al DNA per aggiungerne altre.
            </div>

            <div class="promise-box">
                <label>La Promessa del Team (Purpose)</label>
                <textarea class="promise-textarea" id="promise-text" placeholder="Scrivi in 2-3 righe cosa promette il vostro team al mercato e tra di voi…"></textarea>
            </div>

            <div class="summary-section">
                <div class="summary-label">Valori</div>
                <div class="chip-list" id="recap-values"><span class="empty-chip">Nessun valore aggiunto</span></div>
            </div>
            <div class="summary-section">
                <div class="summary-label">Servizi</div>
                <div class="chip-list" id="recap-services"><span class="empty-chip">Nessun servizio aggiunto</span></div>
            </div>
            <div class="summary-section">
                <div class="summary-label">Ruoli</div>
                <div class="chip-list" id="recap-roles"><span class="empty-chip">Nessun ruolo aggiunto</span></div>
            </div>

            <div class="btn-row">
                <button class="btn-secondary" onclick="goBack(3)">← Modifica DNA</button>
                <button class="btn-primary" onclick="teamData.promise = document.getElementById('promise-text').value; goToStep5();">GUARDA IL TUO TRASPALITY →</button>
            </div>
        </div>
    </div>

    <!-- ════════════════════════════ STEP 4 — COMPOSIZIONE TEAM -->
    <div class="step-panel" id="step4">
        <div class="container">
            <div class="panel-header">
                <div class="panel-title">Step 4 di 5</div>
                <div class="panel-headline">Composizione del <strong>Team</strong></div>
            </div>
            <p style="font-size:13px;font-weight:300;color:#888;margin-bottom:24px;line-height:1.7">
                Rivedi chi copre ogni servizio e ruolo. Puoi aggiungere o modificare le assegnazioni.
                Gli inviti partono tutti insieme quando fondi il team.
            </p>
            <div id="team-assignments-wrap"></div>
            <div class="invite-card" style="margin-top:20px">
                <h3>Partner aggiuntivi</h3>
                <p style="color:#aaa;font-size:12px;margin-bottom:12px">Partner senza un ruolo specifico assegnato.</p>
                <div class="partner-input-row">
                    <input type="text" class="partner-email-input" id="partner-name-input" placeholder="Nome" style="max-width:140px">
                    <input type="email" class="partner-email-input" id="partner-input" placeholder="email@partner.com">
                    <button class="btn-add-partner" onclick="addPartner()">+ Aggiungi</button>
                </div>
                <div class="partners-list" id="partners-list" translate="no"></div>
            </div>
            <!-- v-admin — chi ti affianca nella gestione -->
            <div class="invite-card" id="admin-pick-card" style="margin-top:20px;display:none">
                <h3>Chi ti affianca nella gestione</h3>
                <p style="color:#aaa;font-size:12px;margin-bottom:12px">
                    Gli amministratori possono attivare e disattivare i moduli del team. Il ruolo diventa effettivo quando la persona accetta l&rsquo;invito, e puoi cambiarlo quando vuoi dalla dashboard.
                </p>
                <div id="admin-pick-list"></div>
            </div>
            <div class="btn-row">
                <button class="btn-secondary" onclick="goBack(4)">← Indietro</button>
                <button class="btn-primary blue" onclick="goToStep5()">SALVA E INVITA NUOVI PARTNER →</button>
            </div>
        </div>
    </div>

    <!-- ══════════════════════════════ STEP 5 — FONDAZIONE -->
    <div class="step-panel" id="step5">
        <div class="container">
            <div class="panel-header">
                <div class="panel-title">Step 5 di 5</div>
                <div class="panel-headline"><strong id="found-name" translate="no">—</strong> è quasi realtà</div>
            </div>

            <div class="foundation-hero">
                <div class="score-ring">
                    <div>
                        <div class="score-big" id="dna-score-val">—</div>
                    </div>
                </div>
                <div class="score-sub">DNA Score Iniziale</div>
            </div>

            <div class="dna-breakdown" id="dna-breakdown"></div>

            <!-- CONSENSO OBBLIGATORIO FONDAZIONE -->
            <!-- v11: assegnazioni provvisorie fatte nel DNA (nomi o email) -->
            <div class="invite-card" id="prov-card" style="margin-bottom:20px;display:none">
                <h3>Le persone che hai indicato</h3>
                <p style="color:#aaa;font-size:12px;margin-bottom:8px">Chi ha l&rsquo;email riceve l&rsquo;invito quando fondi il team. A chi hai indicato solo con il nome aggiungi l&rsquo;email, oppure lascia vuoto: potrai invitarlo pi&ugrave; avanti dalla dashboard.</p>
                <div id="prov-list" translate="no"></div>
            </div>
            <div class="consent-block">
                <div class="consent-block-title">Prima di fondare il team</div>
                <div class="consent-row">
                    <input type="checkbox" class="consent-checkbox" id="consent-cert" onchange="checkFoundBtn()">
                    <label class="consent-text" for="consent-cert">
                        <strong>Accetto che i dati VSR aggregati e anonimi del team</strong> contribuiscano al catalogo TRASPALITY e al sistema di benchmarking. Comprendo che senza questo consenso il team non può ottenere il DNA Score certificato.
                        <span class="consent-required-badge">Obbligatorio</span>
                        <br><a href="privacy.html" target="_blank">Leggi come vengono usati i dati →</a>
                    </label>
                </div>
                <div class="consent-row">
                    <input type="checkbox" class="consent-checkbox" id="consent-comm">
                    <label class="consent-text" for="consent-comm">
                        <strong>Accetto di ricevere comunicazioni da TRASPALITY</strong> con suggerimenti di miglioramento basati sui dati del mio team, aggiornamenti sul servizio e nuove funzionalità.
                    </label>
                </div>
            </div>

            <div class="foundation-cta">
                <h2>Fondate il Team</h2>
                <p>Quando tutti i partner avranno votato, l'algoritmo di <strong id="found-name-2" translate="no">—</strong> verrà generato. Da quel momento il DNA si alimenta giorno per giorno attraverso lo storytelling.</p>
                <button class="btn-found" onclick="foundTeam(false)" disabled>✦ FONDA IL TEAM</button>
                <div class="disclaimer" id="consent-hint" style="color:#B54D8D;font-weight:600">Spunta il consenso obbligatorio qui sopra per poter fondare il team.</div>
                <div class="disclaimer">I partner riceveranno il tuo invito via email.</div>
            </div>

            <div class="btn-row" style="margin-top: 30px;">
                <button class="btn-secondary" onclick="goBack(5)">← Rivedi</button>
                <button class="btn-primary" id="btn-found-and-moduli" onclick="foundTeam(true)" disabled>FONDA E POTENZIA CON I MODULI →</button>
            </div>
        </div>
    </div>

    <!-- ══════════════════════════════ STEP 6 — VISIBILITÀ (opzionale) -->
    <div class="step-panel" id="step6">
        <div class="container">
            <div class="panel-header">
                <div class="panel-title">Passo opzionale</div>
                <div class="panel-headline">Fatti <strong>trovare</strong></div>
            </div>

            <div style="background:#EDF7E4;border-radius:16px;padding:24px 28px;margin-bottom:32px;border:1px solid #c5e8a0;">
                <div style="font-size:11px;font-weight:700;color:#5a8a30;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;">✦ Perché compilare questo?</div>
                <p style="font-size:13px;font-weight:300;color:#444;line-height:1.7;">Questi dati fanno apparire il tuo team nel catalogo <strong>Certified Teams</strong> di Traspality, dove altri team e professionisti ti cercano per settore, area geografica e competenze. Puoi aggiungerli adesso o in qualsiasi momento dal profilo del team.</p>
            </div>

            <div class="input-group">
                <label>Tipo di Team</label>
                <select id="vis-type" style="width:100%;padding:15px;border:1px solid #ddd;border-radius:10px;font-family:Montserrat;font-size:14px;background:#fafafa;">
                    <option value="">Seleziona…</option>
                    <option value="studenti">Studenti</option>
                    <option value="professionisti">Professionisti / Freelance</option>
                    <option value="azienda">Azienda</option>
                    <option value="rti">RTI / Raggruppamento Temporaneo</option>
                    <option value="associazione">Associazione / No Profit</option>
                    <option value="team_specialistico">Team Specialistico</option>
                </select>
            </div>

            <div class="input-group">
                <label>Settore</label>
                <select id="vis-sector" style="width:100%;padding:15px;border:1px solid #ddd;border-radius:10px;font-family:Montserrat;font-size:14px;background:#fafafa;">
                    <option value="">Seleziona…</option>
                    <option value="tecnologia">Tecnologia & Digitale</option>
                    <option value="comunicazione">Comunicazione & Marketing</option>
                    <option value="consulenza">Consulenza & Management</option>
                    <option value="formazione">Formazione & Ricerca</option>
                    <option value="salute">Salute & Benessere</option>
                    <option value="ambiente">Ambiente & Sostenibilità</option>
                    <option value="cultura">Cultura & Arte</option>
                    <option value="manifattura">Manifattura & Industria</option>
                    <option value="finanza">Finanza & Banking</option>
                    <option value="legale">Legale & Compliance</option>
                    <option value="costruzioni">Costruzioni & Immobiliare</option>
                    <option value="agroalimentare">Agroalimentare</option>
                    <option value="turismo">Turismo & Hospitality</option>
                    <option value="sociale">Sociale & Non Profit</option>
                    <option value="altro">Altro</option>
                </select>
            </div>

            <div class="input-group">
                <label>Area Geografica</label>
                <select id="vis-location" style="width:100%;padding:15px;border:1px solid #ddd;border-radius:10px;font-family:Montserrat;font-size:14px;background:#fafafa;">
                    <option value="">Seleziona…</option>
                    <option value="nord-ovest">Nord Ovest</option>
                    <option value="nord-est">Nord Est</option>
                    <option value="centro">Centro</option>
                    <option value="sud">Sud</option>
                    <option value="isole">Isole</option>
                    <option value="estero">Internazionale</option>
                </select>
            </div>

            <div class="input-group">
                <label>Città (opzionale)</label>
                <input type="text" id="vis-city" placeholder="Es. Bologna" style="width:100%;padding:15px;border:1px solid #ddd;border-radius:10px;font-family:Montserrat;font-size:14px;background:#fafafa;">
            </div>

            <div class="input-group">
                <label>Sito Web (opzionale)</label>
                <input type="url" id="vis-website" placeholder="https://www.tuosito.it" style="width:100%;padding:15px;border:1px solid #ddd;border-radius:10px;font-family:Montserrat;font-size:14px;background:#fafafa;">
            </div>

            <div class="input-group">
                <label>Email di Contatto Pubblica (opzionale)</label>
                <input type="email" id="vis-email" placeholder="info@tuosito.it" style="width:100%;padding:15px;border:1px solid #ddd;border-radius:10px;font-family:Montserrat;font-size:14px;background:#fafafa;">
            </div>

            <div class="btn-row">
                <button class="btn-secondary" onclick="skipVisibility()">Farlo dopo →</button>
                <button class="btn-primary blue" onclick="saveVisibility()">Salva e vai all'Hub</button>
            </div>

        </div>
    </div>

    <!-- ══════════════════════════════ FOOTER TRASPALITY -->
    <!-- FOOTER-STD v1 10lug2026 — footer unico sito: +Piani e prezzi, +Metodo, +Team Certificati, mail info@, CSS scoped autoportante -->
<style>
.trsp-footer{background:var(--blue,#175F75);color:#fff;padding:50px 30px 30px;margin-top:auto}
.trsp-footer .footer-inner{max-width:900px;margin:0 auto}
.trsp-footer .footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.trsp-footer .footer-brand img{height:28px;width:auto;max-width:100%;margin-bottom:14px;display:block}
.trsp-footer .footer-brand p{font-size:11px;font-weight:300;opacity:.7;line-height:1.7}
.trsp-footer .footer-col h4{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;opacity:.5;margin-bottom:14px}
.trsp-footer .footer-col a{display:block;font-size:12px;font-weight:400;opacity:.8;text-decoration:none;color:#fff;margin-bottom:8px;transition:opacity .2s}
.trsp-footer .footer-col a:hover{opacity:1}
.trsp-footer .footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.trsp-footer .footer-legal{font-size:10px;opacity:.4}
.trsp-footer .footer-legal a{color:#fff;opacity:.6;text-decoration:none}
.trsp-footer .footer-payoff{font-size:9px;letter-spacing:4px;text-transform:uppercase;opacity:.3}
@media(max-width:900px){.trsp-footer .footer-top{grid-template-columns:1fr 1fr}.trsp-footer .footer-brand{grid-column:1/-1}}
@media(max-width:600px){.trsp-footer .footer-bottom{flex-direction:column;text-align:center}}
</style>
<footer class="trsp-footer">
    <div class="footer-inner">
        <div class="footer-top">
            <div class="footer-brand">
                <img src="/logo-white.svg" alt="Traspality">
                <p>Piattaforma digitale per creare, gestire<br>e promuovere i team di lavoro.<br>Do What You Say.</p>
            </div>
            <div class="footer-col">
                <h4>Piattaforma</h4>
                <a href="index.html">Home</a>
                <a href="design.html">Fonda un Team</a>
                <a href="teams.html">Team Certificati</a>
                <a href="pricing.html">Piani e prezzi</a>
                <a href="hub.html">Il tuo Hub</a>
                <a href="dashboard.html">Dashboard</a>
            </div>
            <div class="footer-col">
                <h4>Traspality</h4>
                <a href="about.html">Chi Siamo</a>
                <a href="manifesto.html">Manifesto</a>
                <a href="metodologia.html">Metodo</a>
                <a href="privacy.html">Privacy Policy</a>
                <a href="cookie.html">Cookie Policy</a>
            </div>
            <div class="footer-col">
                <h4>Contatti</h4>
                <a href="mailto:info@traspality.com">info@traspality.com</a>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="footer-legal">© 2026 Traspality — MNG-Crea · P.IVA 04615660406 · <a href="privacy.html">Privacy Policy</a> · <a href="cookie.html">Cookie Policy</a></div>
            <div class="footer-payoff">DO WHAT YOU SAY</div>
        </div>
    </div>
</footer>

    <div class="save-draft-bar" id="save-draft-bar"><span class="save-draft-status" id="save-draft-status">Non ancora salvato</span><button class="save-draft-btn pause-btn" onclick="openPause()">&#10074;&#10074;&nbsp; Fai una pausa</button></div>
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
    <script>
    // ── ERROR DISPLAY (debug iPad) — rimuovere dopo aver trovato il bug ──
    window.addEventListener('error', function(ev) {
        var box = document.getElementById('__errbox');
        if (!box) {
            box = document.createElement('div');
            box.id = '__errbox';
            box.style.cssText = 'position:fixed;bottom:0;left:0;right:0;z-index:99999;background:#B00020;color:#fff;font:12px/1.5 monospace;padding:14px 16px;max-height:40vh;overflow:auto;box-shadow:0 -4px 20px rgba(0,0,0,.3)';
            document.body.appendChild(box);
        }
        box.innerHTML += '<div style="border-bottom:1px solid rgba(255,255,255,.3);padding:4px 0">⚠️ ' +
            (ev.message || 'errore') + '<br><span style="opacity:.7">' +
            (ev.filename ? ev.filename.split('/').pop() : '') + ' : riga ' + (ev.lineno || '?') + '</span></div>';
    });
    </script>
    <script>
    // ── SUPABASE CLIENT ──
    const SUPABASE_URL = 'https://otllbwtdbfubmeaewyze.supabase.co';
    const SUPABASE_KEY = 'sb_publishable_hgD8skYCfzIe0CiUu0hIKg_7kCc7nBZ';
    const db = supabase.createClient(SUPABASE_URL, SUPABASE_KEY);
    window.db = db;

    // ── CONFIGURAZIONE ──
    const catConfig = {
        'VALUES':   { color: '#8FC55B', title1: 'IDENTITY', title2: 'VALUES',   singular: 'VALORE',  outlineClass: 'outline-green',  chipClass: 'chip-value'   },
        'SERVICES': { color: '#E6CF42', title1: 'DEFINE',   title2: 'SERVICES', singular: 'SERVIZIO', outlineClass: 'outline-yellow', chipClass: 'chip-service' },
        'ROLES':    { color: '#B54D8D', title1: 'ASSIGN',   title2: 'ROLES',    singular: 'RUOLO', outlineClass: 'outline-purple', chipClass: 'chip-role'   }
    };

// v11: spunti = solo nomi. Nessuna definizione preconfezionata: la definizione la scrive
    // la persona (o sceglie esplicitamente la proposta AI con "Confronta").
    const exampleLabels = {
        'VALUES':   { TRA: 'Trasparenza', INN: 'Innovazione', INC: 'Inclusività', COL: 'Collaborazione', QUA: 'Qualità', RES: 'Resilienza', ETI: 'Etica' },
        'SERVICES': { SOC: 'Social Media', WEB: 'Sito Web', CON: 'Consulenza', FOR: 'Formazione', COM: 'Comunicazione' },
        'ROLES':    { FON: 'Fondatore', PRO: 'Project Manager', SMM: 'Social Media Manager', ANA: 'Analista', LEG: 'Legale' }
    };

    // Confronto "di senso" tra nomi: maiuscole, accenti, spazi e punteggiatura non contano;
    // "Trasparenza radicale" e' vicino a "Trasparenza"; "Innovazione" a "Innovativi".
    function _normName(s) {
        return String(s || '').toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, '').replace(/[^a-z0-9]/g, '');
    }
    function _nearName(a, b) {
        a = _normName(a); b = _normName(b);
        if (!a || !b) return false;
        if (a === b) return true;
        if (Math.min(a.length, b.length) >= 4 && (a.indexOf(b) >= 0 || b.indexOf(a) >= 0)) return true;
        let k = 0; while (k < a.length && k < b.length && a[k] === b[k]) k++;
        return k >= 6;
    }

    function renderExampleChips() {
        const el = document.getElementById('example-chips');
        const wrap = document.getElementById('ex-wrap');
        if (!el) return;
        const pool = exampleLabels[currentCategory] || {};
        const have = (dataStore[currentCategory] || []).map(function(x){ return x.name; });
        const keys = Object.keys(pool).filter(function(key) {
            const lbl = _tr(pool[key]);
            return !have.some(function(h){ return _nearName(h, lbl) || _nearName(h, pool[key]); });
        });
        el.innerHTML = keys.map(function(key) {
            return '<span class="example-chip" onclick="useExample(\'' + key + '\')">' + escHtml(_tr(pool[key])) + '</span>';
        }).join('');
        const typing = (document.getElementById('main-item-input') || {}).value;
        if (wrap) wrap.style.display = (keys.length && !typing) ? 'block' : 'none';
    }

    // i18n: testi dei modelli e degli esempi nella lingua dell'utente (in italiano window.t non cambia nulla)
    function _tr(s) { return (window.t && s) ? window.t(s) : s; }

    function useExample(key) {
        const label = (exampleLabels[currentCategory] || {})[key];
        if (!label) return;
        const input = document.getElementById('main-item-input');
        input.value = _tr(label);
        onNameInput(input.value);
        document.getElementById('desc-textarea').focus(); // la definizione resta da scrivere: e' tua
    }

    let currentCategory = 'VALUES';
    let dataStore = { VALUES: [], SERVICES: [], ROLES: [] };
    let teamData = { name: '', slogan: '', ragione: '', promise: '' };
    let partners = [];
    let currentStep = 1;

    // ── EDIT MODE — carica team esistente se ?team=[uuid] ──
    const _urlParams = new URLSearchParams(location.search);
    const _editTeamId = _urlParams.get('team');

    async function loadExistingTeam() {
        if (!_editTeamId) return;
        try {
            const { data: team } = await db.from('teams').select('*').eq('id', _editTeamId).single();
            if (!team) { window.location.href = 'dashboard.html?team=' + _editTeamId; return; }

            teamData.name    = team.name    || '';
            teamData.slogan  = team.slogan  || '';
            teamData.ragione = team.ragione_sociale || '';
            teamData.promise = team.promise || '';
            // Team attivo -> stiamo aggiungendo item (addItemsToExistingTeam).
            // Team ancora 'draft'/'founding' -> stiamo riprendendo una fondazione
            // interrotta: il percorso normale porta a foundTeam(), che la finalizza.
            const _isDraftTeam = ['draft','founding'].includes(team.status);
            if (_isDraftTeam) {
                window._draftTeamId = _editTeamId;
                // v11: si riprende da una pausa: stato e nota per il ritorno
                setTimeout(function(){
                    showResumeNote(_editTeamId);
                    const st = document.getElementById('save-draft-status');
                    if (st) st.textContent = '\u2713 ' + _tr('Bozza ripresa');
                }, 400);
            } else {
                window._editMode    = true;
                window._editTeamId  = _editTeamId;
            }

            // Carica DNA items esistenti
            const { data: items } = await db.from('dna_items').select('*').eq('team_id', _editTeamId).order('display_order');
            if (items) {
                dataStore.VALUES   = items.filter(i => i.item_type === 'value').map(i => ({ name: i.name, desc: i.description||'', rating: i.founder_rating||8, assignedTo: [], existing: !_isDraftTeam }));
                dataStore.SERVICES = items.filter(i => i.item_type === 'service').map(i => ({ name: i.name, desc: i.description||'', rating: i.founder_rating||8, assignedTo: [], existing: !_isDraftTeam }));
                dataStore.ROLES    = items.filter(i => i.item_type === 'role').map(i => ({ name: i.name, desc: i.description||'', rating: i.founder_rating||8, assignedTo: [], existing: !_isDraftTeam }));
            }

            // Mostra step 2 direttamente — NON nascondere main-space (contiene step-2)
            document.body.classList.add('loaded');

            const step1 = document.querySelector('.step-1');
            const step2 = document.querySelector('.step-2');

            // Nascondi solo step-1, non il contenitore
            if (step1) {
                step1.classList.add('hidden');
                step1.style.opacity = '0';
                step1.style.visibility = 'hidden';
                step1.style.pointerEvents = 'none';
            }

            // Attiva step-2
            if (step2) {
                step2.classList.add('active');
                document.getElementById('main-space').classList.add('step-2-active');
                        step2.style.opacity = '1';
                step2.style.visibility = 'visible';
                step2.style.transform = 'translateX(0)';
                step2.style.zIndex = '60';
                step2.style.pointerEvents = 'auto';
            }

            // Header live
            const header = document.getElementById('live-header');
            if (header) {
                header.classList.add('visible');
                header.style.opacity = '1';
                header.style.visibility = 'visible';
            }
            const nameEl   = document.getElementById('display-name');
            const sloganEl = document.getElementById('display-slogan');
            if (nameEl)   nameEl.innerText   = team.name;
            if (sloganEl) sloganEl.innerText  = team.slogan || '';

            updateItemsCount();
            updateUI();
            setProgress(2);

            // v-fonda-ai2: da FONDA CON AI si arriva sul riepilogo (raccordo), non sulle card
            if (_isDraftTeam && _urlParams.get('from') === 'fonda-ai') {
                const _pt = document.getElementById('promise-text');
                if (_pt && !_pt.value) _pt.value = teamData.promise || '';
                const _ar = document.getElementById('ai-ready');
                if (_ar) _ar.style.display = 'block';
                goToStep3();
            }

            // Cambia label bottone fonda dopo il render
            setTimeout(() => {
                const btnFond = document.querySelector('.btn-found') || document.getElementById('btn-found-main');
                if (btnFond) btnFond.innerText = _isDraftTeam ? '✔ FONDA IL TEAM' : '✔ SALVA MODIFICHE';
            }, 300);

        } catch(e) {
            console.error('loadExistingTeam:', e);
        }
    }

    // ── NAVIGAZIONE STEP ──
    function setProgress(step) {
        currentStep = step;
        const pct = { 1: 17, 2: 34, 3: 50, 4: 67, 5: 83, 6: 100 };
        document.getElementById('progress-fill').style.width = pct[step] + '%';
        for (let i = 1; i <= 6; i++) {
            const lbl = document.getElementById('lbl-' + i);
            if (!lbl) continue;
            lbl.className = 'step-label' + (i < step ? ' done' : i === step ? ' active' : '');
        }
    }

    function showPanel(step) {
        [3,4,5,6].forEach(s => {
            const el = document.getElementById('step' + s);
            if (el) el.classList.remove('active');
        });
        const target = document.getElementById('step' + step);
        if (target) { target.classList.add('active'); window.scrollTo(0, 0); }
        // Step 5 = team fondato: fine wizard, il footer può riapparire
        if (step === 5) {
            document.body.classList.remove('wizard-active');
        }
        setProgress(step);
    }

    function goBack(fromStep) {
        if (fromStep === 3) {
            // v-fonda-ai2: tornando alle card torna anche la barra "Salva in bozza" (goToStep3 la nasconde)
            var _sdbBack = document.getElementById('save-draft-bar');
            if (_sdbBack) _sdbBack.style.display = '';
            document.getElementById('step3').classList.remove('active');
            document.getElementById('main-space').style.display = 'block';
            document.getElementById('step2').classList.add('active');
            document.getElementById('main-space').classList.add('step-2-active');
                setProgress(2);
            window.scrollTo(0, 0);
        } else {
            showPanel(fromStep - 1);
        }
    }

    // ── v9: TORNARE INDIETRO ──────────────────────────────────
    function escHtml(s) { const d = document.createElement('div'); d.textContent = s == null ? '' : String(s); return d.innerHTML; }

    function backToIdentity() {
        ['step3','step4'].forEach(function(id){ const el = document.getElementById(id); if (el) el.classList.remove('active'); });
        const ms = document.getElementById('main-space');
        ms.style.display = 'block';
        ms.classList.remove('step-2-active');
        const s2 = document.getElementById('step2'); s2.classList.remove('active');
        document.getElementById('dna-filaments').classList.remove('dna-mode');
        document.querySelectorAll('.blob-wrapper, #dna-filaments').forEach(function(el){ el.style.display = ''; });
        document.getElementById('step1').classList.remove('hidden');
        setProgress(1);
        window.scrollTo(0, 0);
    }

    // Salto all'indietro dalla barra dei passi (solo prima della fondazione)
    function jumpToStep(n) {
        if (currentStep >= 5 || n >= currentStep) return;
        if (n === 1) { backToIdentity(); return; }
        if (n === 2) {
            const s4 = document.getElementById('step4'); if (s4) s4.classList.remove('active');
            goBack(3); return;
        }
        if (n === 3) { showPanel(3); }
    }

    // Rivedere un elemento del DNA: nuovo durante la fondazione = si modifica o si toglie;
    // gia' salvato nel database = si guarda, e si cambia dal DNA in dashboard (voti e governance)
    function openItemEditor(cat, idx) {
        const it = dataStore[cat] && dataStore[cat][idx]; if (!it) return;
        const label = { VALUES: 'Valore', SERVICES: 'Servizio', ROLES: 'Ruolo' }[cat];
        const color = { VALUES: '#8FC55B', SERVICES: '#b59a00', ROLES: '#B54D8D' }[cat];
        const locked = !!it.id || !!it.existing;
        let ov = document.getElementById('item-editor');
        if (!ov) {
            ov = document.createElement('div'); ov.id = 'item-editor';
            ov.addEventListener('click', function(e){ if (e.target === ov) closeItemEditor(); });
            document.body.appendChild(ov);
        }
        ov.innerHTML = `<div class="ie-card" role="dialog" aria-modal="true">
            <div class="ie-eyebrow" style="color:${color}">${label}</div>
            ${locked
              ? `<div class="ie-name" translate="no">${escHtml(it.name)}</div>
                 ${it.desc ? `<p class="ie-desc" data-user-text>${escHtml(it.desc)}</p>` : ''}
                 <div class="ie-rating">${it.rating}<span>/10</span></div>
                 <p class="ie-note">\u00c8 gi\u00e0 nel DNA del team: si cambia dal DNA in dashboard, dove votano anche i partner.</p>
                 <div class="ie-actions"><button type="button" class="ie-btn" onclick="closeItemEditor()">Chiudi</button></div>`
              : `<input type="text" id="ie-name" class="ie-input" value="${escHtml(it.name).replace(/"/g,'&quot;')}">
                 <textarea id="ie-desc" class="ie-input ie-ta" placeholder="Definizione o nota (opzionale)...">${escHtml(it.desc || '')}</textarea>
                 <div class="ie-rating" id="ie-rv">${it.rating}<span>/10</span></div>
                 <input type="range" min="1" max="10" id="ie-range" value="${it.rating}" oninput="document.getElementById('ie-rv').innerHTML = this.value + '<span>/10</span>'">
                 <div class="ie-actions">
                   <button type="button" class="ie-del" onclick="deleteItem('${cat}', ${idx})">Togli dal DNA</button>
                   <button type="button" class="ie-btn ghost" onclick="closeItemEditor()">Annulla</button>
                   <button type="button" class="ie-btn" onclick="saveEditedItem('${cat}', ${idx})">Salva</button>
                 </div>`}
        </div>`;
        ov.classList.add('open');
    }
    function closeItemEditor() { const ov = document.getElementById('item-editor'); if (ov) ov.classList.remove('open'); }
    function afterItemChange() {
        autoSaveDraft(); updateItemsCount(); updateUI();
        if (currentStep === 3) goToStep3();
    }
    function saveEditedItem(cat, idx) {
        const it = dataStore[cat][idx]; if (!it) return;
        const inp = document.getElementById('ie-name');
        const name = inp.value.trim();
        if (!name) { inp.focus(); return; }
        const dup = dataStore[cat].some(function(x, k){ return k !== idx && x.name.toLowerCase() === name.toLowerCase(); });
        if (dup) { inp.style.borderColor = '#B54D8D'; inp.value = name; inp.placeholder = 'Gi\u00e0 presente'; return; }
        it.name = name;
        it.desc = document.getElementById('ie-desc').value;
        it.rating = parseInt(document.getElementById('ie-range').value, 10);
        closeItemEditor(); afterItemChange();
    }
    function deleteItem(cat, idx) {
        const it = dataStore[cat][idx]; if (!it) return;
        if (!confirm('Togli "' + it.name + '" dal DNA?')) return;
        dataStore[cat].splice(idx, 1);
        closeItemEditor(); afterItemChange();
    }

    // ── STEP 1 → 2 ──
    function goToStep2() {
        const nameVal = document.getElementById('input-name').value.trim();
        if (!nameVal) {
            document.getElementById('input-name').focus();
            document.getElementById('input-name').style.borderColor = '#B54D8D';
            setTimeout(() => document.getElementById('input-name').style.borderColor = '', 2000);
            return;
        }
        teamData.name   = nameVal;
        teamData.slogan = document.getElementById('input-slogan').value;
        teamData.ragione= document.getElementById('input-ragione').value;
        const rawSlug   = document.getElementById('input-slug')?.value.trim();
        teamData.slug   = rawSlug || nameVal.toLowerCase().replace(/[^a-z0-9]/g,'-').replace(/-+/g,'-').slice(0,40);
        document.getElementById('display-name').innerText   = teamData.name;
        document.getElementById('display-slogan').innerText = teamData.slogan;
        // Verifica unicità slug in background
        db.from('teams').select('id').eq('slug', teamData.slug).maybeSingle().then(({ data }) => {
            const fb = document.getElementById('slug-feedback');
            if (!fb) return;
            if (data) {
                fb.style.color = '#B54D8D';
                fb.innerText = '⚠ Nickname già esistente — verrà aggiunto un suffisso automatico';
                teamData.slug = teamData.slug + '-' + Math.random().toString(36).substring(2,5);
            } else {
                fb.style.color = '#8FC55B';
                fb.innerText = '✓ Nickname disponibile: ' + teamData.slug;
            }
        });
        // v9: se il DNA ha gia' elementi (sei tornato indietro), si rientra direttamente nel DNA
        if (dataStore.VALUES.length + dataStore.SERVICES.length + dataStore.ROLES.length > 0) {
            document.getElementById('step1').classList.add('hidden');
            goToDNA();
            return;
        }
        /* Mostra selector modello invece di andare subito a step2 */
        document.getElementById('step1').classList.add('hidden');
        document.getElementById('step1b').classList.add('active');
        // Nascondi blob e filamenti durante il selector
        document.querySelectorAll('.blob-wrapper, #dna-filaments').forEach(function(el) {
            el.style.display = 'none';
        });
        initStarterPacks();
    }

    // ── STEP 2 UI ──
    function updateUI() {
        const conf = catConfig[currentCategory];
        document.getElementById('cat-main-title').innerText = conf.title1;
        document.getElementById('cat-sub-title').innerHTML = `<span class="title-small">YOUR</span> ${conf.title2}`;
        document.body.style.setProperty('--active-color', conf.color);
        document.getElementById('btn-save-label').innerText = conf.singular;
        document.getElementById('item-number').innerText    = (dataStore[currentCategory].length + 1) + '.';
        updateItemsCount();
        renderExampleChips();

        const navContainer = document.getElementById('dynamic-nav');
        let navHTML = '';
        for (const key in catConfig) {
            if (key !== currentCategory) {
                const o = catConfig[key];
                const art = 'UN';   // valore, servizio, ruolo: tutti maschili
                navHTML += `<button class="big-nav-btn ${o.outlineClass}" onclick="switchCategory('${key}')">AGGIUNGI ${art} ${o.singular}</button>`;
            }
        }
        navContainer.innerHTML = navHTML;
    }

    function updateItemsCount() {
        const v = dataStore.VALUES.length;
        const s = dataStore.SERVICES.length;
        const r = dataStore.ROLES.length;
        const total = v + s + r;
        document.getElementById('items-count').innerText = total > 0
            ? `${v} valori · ${s} servizi · ${r} ruoli`
            : '';

        // Panoramica live: tutto ciò che è già stato aggiunto, sempre visibile mentre si prosegue
        const recap = document.getElementById('running-recap');
        if (recap) {
            // v9: ogni elemento si riapre con un tocco, per rileggerlo o ripensarci
            const chip = (i, cls, cat, idx) => `<button type="button" class="chip ${cls} chip-open" data-k="${cat}-${idx}" onclick="openItemEditor('${cat}', ${idx})" title="Apri per rivedere"><span translate="no">${escHtml(i.name)}</span> <span class="chip-rating">${i.rating}/10</span></button>`;
            recap.innerHTML =
                dataStore.VALUES.map((i, k) => chip(i, 'chip-value', 'VALUES', k)).join('') +
                dataStore.SERVICES.map((i, k) => chip(i, 'chip-service', 'SERVICES', k)).join('') +
                dataStore.ROLES.map((i, k) => chip(i, 'chip-role', 'ROLES', k)).join('');
        }
    }

    function switchCategory(catId) {
        // v11: se c'e' una sequenza guidata in sospeso e questa sezione non e' ancora stata
        // percorsa, si rientra nella sequenza prima di tutto (niente doppioni, niente sequenza persa)
        if (typeof _guidedPendingIndexFor === 'function') {
            const gi = _guidedPendingIndexFor(catId);
            if (gi >= 0) { currentCategory = catId; enterGuidedAt(gi); return; }
        }
        currentCategory = catId;
        updateUI();
        startNewItem();
        if (typeof updateGuidedResumeBar === 'function') updateGuidedResumeBar();
    }

    function saveItem() {
        const inp = document.getElementById('main-item-input');
        const name = inp.value.trim();
        if (!name) { inp.focus(); return; }

        // Doppioni: maiuscole, accenti e spazi non contano
        const isDuplicate = dataStore[currentCategory].some(function(x) { return _normName(x.name) === _normName(name); });
        if (isDuplicate) {
            inp.style.borderColor = '#B54D8D';
            inp.style.background = '#fff0f8';
            setTimeout(function() { inp.style.borderColor = ''; inp.style.background = ''; }, 2500);
            const _catLabel2 = { VALUES: 'valore', SERVICES: 'servizio', ROLES: 'ruolo' };
            showItemToast('"' + name + '" ' + _tr('è già presente come') + ' ' + _tr(_catLabel2[currentCategory] || 'elemento') + '.', true);
            return;
        }

        const cat = currentCategory;
        const idx = dataStore[cat].length;
        const item = {
            name,
            desc:       document.getElementById('desc-textarea').value.trim(),
            rating:     parseInt(document.getElementById('valueRange').value),
            assignedTo: (cat === 'SERVICES' || cat === 'ROLES') ? _pendingAssign.slice() : []
        };
        // Se la proposta AI e' stata chiesta per questo nome, le etichette sono gia' pronte
        if (_aiState && _aiState.ready && _normName(_aiState.forName) === _normName(name)) {
            item.aiDefinition = _aiState.definition || '';
            item.aiTags = (_aiState.tags || []).slice(0, 3);
        }
        dataStore[cat].push(item);
        autoSaveDraft();
        if (!item.aiTags) fetchAiTagsSilently(cat, idx);

        startNewItem();
        // Il valore "vola" tra i chip in alto: lampo + avviso
        const fresh = document.querySelector('#running-recap [data-k="' + cat + '-' + idx + '"]');
        if (fresh) {
            fresh.classList.add('chip-new');
            const r = document.getElementById('running-recap').getBoundingClientRect();
            if (r.top < 90) window.scrollBy({ top: r.top - 110, behavior: 'smooth' });
        }
        showItemToast('\u2713 "' + name + '" ' + _tr('\u00e8 nel DNA'));
    }

    var _toastTimer = null;
    function showItemToast(msg, warn) {
        const t = document.getElementById('item-toast');
        if (!t) return;
        t.textContent = msg;
        t.style.background = warn ? '#B54D8D' : '#175F75';
        t.classList.add('show');
        clearTimeout(_toastTimer);
        _toastTimer = setTimeout(function(){ t.classList.remove('show'); }, 2800);
    }

    // ── PROPOSTA AI: solo su richiesta, accanto alla definizione dell'utente ──
    const CAT_LABEL_IT = { VALUES: 'valore', SERVICES: 'servizio', ROLES: 'ruolo' };
    var _aiState = null; // { forName, definition, tags, ready, mine, used }

    async function _callSuggest(name, desc, category) {
        const res = await db.functions.invoke('suggest-dna-item', {
            body: { name: name, descrizione: desc || '', categoria: CAT_LABEL_IT[category] || 'elemento' }
        });
        if (res.error) {
            let msg = res.error.message || 'invoke KO';
            if (res.error.context && typeof res.error.context.json === 'function') {
                try { const p = await res.error.context.json(); if (p && p.error) msg = p.error; } catch(je) {}
                msg = 'API ' + (res.error.context.status || '?') + ': ' + msg;
            }
            throw new Error(msg);
        }
        const parsed = res.data || {};
        if (parsed.error) throw new Error(parsed.error);
        return parsed;
    }

    function resetAiBox() {
        _aiState = null;
        const box = document.getElementById('ai-tags-box');
        if (box) box.style.display = 'none';
        ['ai-def-text','ai-choice','ai-undo'].forEach(function(id){ const el = document.getElementById(id); if (el) el.style.display = 'none'; });
        const chips = document.getElementById('ai-tag-chips'); if (chips) chips.innerHTML = '';
        const link = document.getElementById('ai-compare-link'); if (link) { link.style.display = 'inline-block'; link.disabled = false; }
    }

    async function requestAiCompare() {
        const name = document.getElementById('main-item-input').value.trim();
        if (!name) { document.getElementById('main-item-input').focus(); showItemToast(_tr('Scrivi prima il nome'), true); return; }
        const category = currentCategory;
        const desc = document.getElementById('desc-textarea').value;
        const link = document.getElementById('ai-compare-link');
        const box = document.getElementById('ai-tags-box');
        const spinner = document.getElementById('ai-tags-spinner');
        const label = document.getElementById('ai-tags-label');
        link.disabled = true;
        box.style.display = 'block';
        spinner.style.display = 'inline-block';
        label.innerText = _tr('TRASPALITY sta pensando…');
        _aiState = { forName: name, ready: false, mine: desc, used: false };
        try {
            const parsed = await _callSuggest(name, desc, category);
            if (!_aiState || _aiState.forName !== name || currentCategory !== category) return; // superata
            _aiState.definition = parsed.definition || '';
            _aiState.tags = (parsed.tags || []).slice(0, 3);
            _aiState.ready = true;
            spinner.style.display = 'none';
            label.innerText = _tr('PROPOSTA TRASPALITY');
            link.style.display = 'none';
            const defEl = document.getElementById('ai-def-text');
            if (_aiState.definition) {
                defEl.innerText = _aiState.definition;
                defEl.style.display = 'block';
                document.getElementById('ai-choice').style.display = 'flex';
                setAiChoice(false);
            }
            document.getElementById('ai-tag-chips').innerHTML = _aiState.tags.map(function(t) {
                return '<span class="ai-tag-chip">' + escHtml(t) + '<span class="tag-x" data-tag="' + escHtml(t) + '" onclick="removeAiTag(this)">&times;</span></span>';
            }).join('');
            if (!_aiState.definition && !_aiState.tags.length) box.style.display = 'none';
        } catch(e) {
            console.warn('requestAiCompare:', e);
            label.innerText = _tr('Proposta non disponibile ora. Va benissimo la tua.');
            spinner.style.display = 'none';
            link.disabled = false;
        }
    }

    function setAiChoice(used) {
        document.getElementById('ai-keep-btn').classList.toggle('on', !used);
        document.getElementById('ai-use-btn').classList.toggle('on', used);
        document.getElementById('ai-undo').style.display = used ? 'block' : 'none';
    }
    function aiUseProposal() {
        if (!_aiState || !_aiState.ready) return;
        const ta = document.getElementById('desc-textarea');
        if (!_aiState.used) _aiState.mine = ta.value; // la tua resta da parte, si recupera
        ta.value = _aiState.definition;
        _aiState.used = true;
        setAiChoice(true);
    }
    function aiKeepMine() {
        if (!_aiState) return;
        if (_aiState.used) document.getElementById('desc-textarea').value = _aiState.mine || '';
        _aiState.used = false;
        setAiChoice(false);
    }
    function removeAiTag(el) {
        const tag = el.dataset.tag;
        if (_aiState && _aiState.tags) _aiState.tags = _aiState.tags.filter(function(t){ return t !== tag; });
        if (el.parentNode) el.parentNode.remove();
    }

    // Se la proposta non e' stata chiesta: l'AI gira in silenzio solo per le etichette (dna_item_tags)
    async function fetchAiTagsSilently(category, itemIdx) {
        const it = dataStore[category] && dataStore[category][itemIdx];
        if (!it) return;
        const name = it.name;
        try {
            const parsed = await _callSuggest(name, it.desc, category);
            const cur = dataStore[category][itemIdx];
            if (cur && cur.name === name) {
                cur.aiDefinition = parsed.definition || '';
                cur.aiTags = (parsed.tags || []).slice(0, 3);
            }
        } catch(e) { console.warn('fetchAiTagsSilently:', e); }
    }

    function onNameInput(val) {
        const wrap = document.getElementById('ex-wrap');
        if (wrap) {
            if (val) wrap.style.display = 'none';
            else renderExampleChips();
        }
        // proposta chiesta per un altro nome: non vale piu'
        if (_aiState && _normName(_aiState.forName) !== _normName(val)) {
            if (_aiState.used) document.getElementById('desc-textarea').value = _aiState.mine || '';
            resetAiBox();
        }
    }

    var _pendingAssign = [];
    function startNewItem() {
        document.getElementById('main-item-input').value  = '';
        document.getElementById('desc-textarea').value    = '';
        document.getElementById('valueRange').value       = 8;
        document.getElementById('rating-val').innerText   = 8;
        document.getElementById('item-number').innerText  = (dataStore[currentCategory].length + 1) + '.';
        resetAiBox();
        _pendingAssign = [];
        refreshAssignList();
        const _aw = document.getElementById('assign-wrap');
        if (_aw) {
            const show = currentCategory === 'SERVICES' || currentCategory === 'ROLES';
            _aw.style.display = show ? 'block' : 'none';
            document.getElementById('assign-label').innerText = currentCategory === 'ROLES' ? _tr('Chi coprir\u00e0 questo ruolo?') : _tr('Chi coprir\u00e0 questo servizio?');
            document.getElementById('assign-input').value = '';
        }
        const vi = document.getElementById('view-input');
        vi.style.display = 'block'; vi.classList.remove('hidden-view');
        updateUI();
    }


    // ── STEP 2 → 3 ──
    function goToStep3() {
        // aggiorna riepilogo
        document.getElementById('recap-name').innerText = teamData.name;

        const fillChips = (containerId, items, chipClass, cat) => {
            const el = document.getElementById(containerId);
            if (!items.length) { el.innerHTML = '<span class="empty-chip">Nessun elemento aggiunto</span>'; return; }
            el.innerHTML = items.map((i, k) =>
                `<button type="button" class="chip ${chipClass} chip-open" onclick="openItemEditor('${cat}', ${k})" title="Apri per rivedere"><span translate="no">${escHtml(i.name)}</span> <span class="chip-rating">${i.rating}/10</span></button>`
            ).join('');
        };
        fillChips('recap-values',   dataStore.VALUES,   'chip-value',   'VALUES');
        fillChips('recap-services', dataStore.SERVICES, 'chip-service', 'SERVICES');
        fillChips('recap-roles',    dataStore.ROLES,    'chip-role',    'ROLES');

        document.getElementById('main-space').style.display = 'none';
        var _sdb = document.getElementById('save-draft-bar');
        if (_sdb) _sdb.style.display = 'none';
        showPanel(3);
    }

    // ── STEP 3 → 4 ──
    function goToStep4() {
        teamData.promise = document.getElementById('promise-text').value;
        renderTeamAssignments();
        renderAdminPicker();
        showPanel(4);
    }

    // ── v-admin: scelta amministratori tra gli invitati ──
    var _adminEmails = {};   // email -> true, scelte dal fondatore allo step 4
    function renderAdminPicker() {
        var card = document.getElementById('admin-pick-card');
        var list = document.getElementById('admin-pick-list');
        if (!card || !list) return;
        var emails = Object.keys(collectAllInvites());
        if (!emails.length) { card.style.display = 'none'; list.innerHTML = ''; return; }
        card.style.display = 'block';
        list.innerHTML = emails.map(function(em) {
            var nm = partnerNameFor(em);
            var on = !!_adminEmails[em];
            return '<label style="display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #eee;cursor:pointer">' +
                     '<input type="checkbox" class="adm-pick" data-email="' + escAttr(em) + '"' + (on ? ' checked' : '') +
                     ' style="width:16px;height:16px;flex:none;accent-color:#8FC55B;cursor:pointer">' +
                     '<span translate="no" style="font-size:13px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' +
                     (nm ? escAttr(nm) + ' <span style="color:#aaa;font-size:11px">' + escAttr(em) + '</span>' : escAttr(em)) +
                     '</span></label>';
        }).join('');
        Array.prototype.forEach.call(list.querySelectorAll('.adm-pick'), function(cb) {
            cb.addEventListener('change', function() {
                var em = cb.getAttribute('data-email');
                if (cb.checked) { _adminEmails[em] = true; } else { delete _adminEmails[em]; }
            });
        });
    }

    function buildInviteMessage() {
        const values   = dataStore.VALUES.map(v => v.name).join(', ') || '—';
        const services = dataStore.SERVICES.map(s => s.name).join(', ') || '—';

        // teamId è disponibile dopo la fondazione; in demo usiamo un placeholder
        const baseUrl  = window.location.origin + '/';
        const teamId   = window._foundedTeamId || 'TEAM_ID';

        const joinLinks = partners.map(email =>
            `• ${email} → ${baseUrl}join.html?team=${teamId}&email=${encodeURIComponent(email)}`
        ).join('\n');

        const msg = `Ciao,

ho fondato un traspality che si chiama <strong>${teamData.name}</strong>.

<em>"${teamData.promise || '...'}"</em>

I valori chiave saranno: <strong>${values}</strong>.
I servizi offerti: <strong>${services}</strong>.

Vorrei che ne facessi parte. Clicca il tuo link personale per leggere il DNA del team e votare i valori:

${joinLinks || `→ ${baseUrl}join.html?team=${teamId}`}

Una volta che tutti avremo votato, l'algoritmo di <strong>${teamData.name}</strong> verrà generato e il traspality sarà ufficialmente fondato.

A presto!
<em>— Inviato via TRASPALITY · Do What You Say</em>`;

        const msgEl = document.getElementById('msg-text');
        if (msgEl) msgEl.innerHTML = msg;
    }

    function copyMessage() {
        const msgEl = document.getElementById('msg-text');
        if (!msgEl) return;
        const text = msgEl.innerText;
        navigator.clipboard.writeText(text).then(() => {
            const btn = document.querySelector('.copy-btn');
            btn.innerText = '✓ Copiato!';
            setTimeout(() => btn.innerText = 'Copia', 2000);
        });
    }

    function addPartner() {
        const input = document.getElementById('partner-input');
        const nameInput = document.getElementById('partner-name-input');
        const email = input.value.trim();
        const name = nameInput ? nameInput.value.trim() : '';
        if (!email) return;
        const exists = partners.some(function(p){ return (typeof p === 'string' ? p : p.email) === email; });
        if (exists) { input.value = ''; if (nameInput) nameInput.value = ''; return; }
        partners.push({ name: name, email: email });
        renderPartners();
        input.value = '';
        if (nameInput) nameInput.value = '';
        buildInviteMessage();
    }

    function removePartner(email) {
        partners = partners.filter(function(p){ return (typeof p === 'string' ? p : p.email) !== email; });
        renderPartners();
    }

    function escAttr(s) { return String(s == null ? '' : s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }

    function renderPartners() {
        const list = document.getElementById('partners-list');
        list.innerHTML = partners.map(function(p) {
            const em = typeof p === 'string' ? p : p.email;
            const nm = typeof p === 'string' ? '' : (p.name || '');
            const label = nm ? (escAttr(nm) + ' &lt;' + escAttr(em) + '&gt;') : escAttr(em);
            return '<span class="partner-tag">' + label + '<button type="button" class="partner-remove" data-email="' + escAttr(em) + '">×</button></span>';
        }).join('');
    }

    document.addEventListener('click', function(e) {
        const rb = e.target.closest ? e.target.closest('.partner-remove') : null;
        if (rb) { removePartner(rb.getAttribute('data-email')); }
    });

    // ── STEP 4 → 5 ──
    function goToStep5() {
        // Calcola DNA Score simulato basato sui rating medi
        const allItems = [...dataStore.VALUES, ...dataStore.SERVICES, ...dataStore.ROLES];
        const avg = allItems.length
            ? (allItems.reduce((s, i) => s + i.rating, 0) / allItems.length).toFixed(1)
            : '—';

        const vAvg = dataStore.VALUES.length
            ? (dataStore.VALUES.reduce((s,i) => s+i.rating, 0) / dataStore.VALUES.length * 0.6).toFixed(1)
            : '—';
        const sAvg = dataStore.SERVICES.length
            ? (dataStore.SERVICES.reduce((s,i) => s+i.rating, 0) / dataStore.SERVICES.length * 0.2).toFixed(1)
            : '—';
        const rAvg = dataStore.ROLES.length
            ? (dataStore.ROLES.reduce((s,i) => s+i.rating, 0) / dataStore.ROLES.length * 0.2).toFixed(1)
            : '—';

        document.getElementById('found-name').innerText   = teamData.name;
        document.getElementById('found-name-2').innerText = teamData.name;
        document.getElementById('dna-score-val').innerText = avg;

        document.getElementById('dna-breakdown').innerHTML = `
            <div class="dna-row">
                <div class="dna-label">Valori (60%)</div>
                <div class="dna-bar-bg"><div class="dna-bar-fill" style="width:${(vAvg/6)*100}%;background:#8FC55B"></div></div>
                <div class="dna-val" style="color:#8FC55B">${vAvg}</div>
            </div>
            <div class="dna-row">
                <div class="dna-label">Servizi (20%)</div>
                <div class="dna-bar-bg"><div class="dna-bar-fill" style="width:${(sAvg/2)*100}%;background:#E6CF42"></div></div>
                <div class="dna-val" style="color:#b8a030">${sAvg}</div>
            </div>
            <div class="dna-row">
                <div class="dna-label">Ruoli (20%)</div>
                <div class="dna-bar-bg"><div class="dna-bar-fill" style="width:${(rAvg/2)*100}%;background:#B54D8D"></div></div>
                <div class="dna-val" style="color:#B54D8D">${rAvg}</div>
            </div>
        `;
        renderProvisionalCard();
        showPanel(5);
        checkFoundBtn();
    }

    // v11: le assegnazioni del DNA sono provvisorie: nomi o email. Qui si completano le email.
    var _provNameByEmail = {};
    function _isEmail(x) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(x || '').trim()); }
    function renderProvisionalCard() {
        var card = document.getElementById('prov-card'), list = document.getElementById('prov-list');
        if (!card || !list) return;
        var people = {}; // chiave -> { label, tasks:[] }
        ['SERVICES','ROLES'].forEach(function(cat) {
            dataStore[cat].forEach(function(item) {
                (item.assignedTo || []).forEach(function(who) {
                    var k = who.toLowerCase();
                    if (!people[k]) people[k] = { who: who, tasks: [] };
                    people[k].tasks.push(item.name);
                });
            });
        });
        var keys = Object.keys(people);
        if (!keys.length) { card.style.display = 'none'; list.innerHTML = ''; return; }
        card.style.display = 'block';
        list.innerHTML = keys.map(function(k, n) {
            var p = people[k];
            var what = '<span class="prov-what">' + escHtml(p.tasks.join(' \u00b7 ')) + '</span>';
            if (_isEmail(p.who)) {
                var nm = _provNameByEmail[p.who.toLowerCase()];
                return '<div class="prov-row"><div class="prov-who">' + escHtml(nm ? nm + ' \u2014 ' + p.who : p.who) + what + '</div><span class="prov-ok">\u2713 ' + _tr('sar\u00e0 invitato') + '</span></div>';
            }
            return '<div class="prov-row"><div class="prov-who">' + escHtml(p.who) + what + '</div>' +
                '<input type="email" placeholder="' + _tr('email di') + ' ' + escHtml(p.who) + '" data-who="' + escHtml(p.who) + '" onchange="setProvisionalEmail(this)"></div>';
        }).join('');
    }
    function setProvisionalEmail(inp) {
        var who = inp.dataset.who, em = inp.value.trim();
        if (!em) return;
        if (!_isEmail(em)) { inp.style.borderColor = '#B54D8D'; return; }
        _provNameByEmail[em.toLowerCase()] = who;
        ['SERVICES','ROLES'].forEach(function(cat) {
            dataStore[cat].forEach(function(item) {
                item.assignedTo = (item.assignedTo || []).map(function(x){ return x === who ? em : x; });
            });
        });
        renderProvisionalCard();
        if (typeof renderAdminPicker === 'function') renderAdminPicker();
    }

    // ── Consenso obbligatorio: abilita CONFERMA FONDAZIONE e POTENZIA CON I MODULI solo se spuntato ──
    // Prima "POTENZIA CON I MODULI" navigava via senza fondare nulla — draft perso senza avviso.
    function checkFoundBtn() {
        var cb = document.getElementById('consent-cert');
        var ok = !!(cb && cb.checked);
        var btn = document.querySelector('.btn-found');
        if (btn) btn.disabled = !ok;
        var btnModuli = document.getElementById('btn-found-and-moduli');
        if (btnModuli) btnModuli.disabled = !ok;
        var hint = document.getElementById('consent-hint');
        if (hint) hint.style.display = ok ? 'none' : 'block';
    }

    // ── Step Visibilità ──
    function skipVisibility() {
        window.location.href = 'hub.html';
    }
    async function saveVisibility() {
        var emailEl = document.getElementById('vis-email');
        var email = emailEl ? emailEl.value.trim() : '';
        var tid = window._foundedTeamId;
        if (email && tid) {
            try {
                const { data: updVis } = await db.from('teams').update({ public_email: email }).eq('id', tid).select('id');
                if (!updVis || !updVis.length) console.warn('saveVisibility: 0 righe — verifica permessi su teams');
            }
            catch(e) { console.warn('saveVisibility:', e); }
        }
        window.location.href = 'hub.html';
    }

    // Nucleo condiviso: backup locale + upsert team/items in bozza sul server.
    // Non tocca la UI — lo chiamano sia il bottone manuale sia l'autosave silenzioso,
    // cosi' i due percorsi non possono piu' divergere.
    async function syncDraftToServer() {
        try {
            localStorage.setItem('trsp_draft_backup', JSON.stringify({
                teamData: teamData,
                dataStore: dataStore,
                savedAt: new Date().toISOString()
            }));
        } catch(le) { console.warn('localStorage backup failed:', le); }

        const {data:{user}} = await db.auth.getUser();
        if (!user) return { ok:false, needsLogin:true };
        if (!teamData.name) return { ok:false, reason:'no-name' };

        const p = { name:teamData.name, ragione_sociale:teamData.ragione||null, slogan:teamData.slogan||null, promise:teamData.promise||null, founder_id:user.id, status:'draft' };
        let tid = window._draftTeamId;
        if (tid) {
            const {data:updDraft, error:updErr} = await db.from('teams').update(p).eq('id', tid).select('id');
            if (updErr) throw updErr;
            if (!updDraft || !updDraft.length) return { ok:false, reason:'no-permission' };
        } else {
            const {data, error} = await db.from('teams').insert(p).select('id').single();
            if (error) throw error;
            tid = data.id; window._draftTeamId = tid;
        }

        // v11: prima si scrivono i nuovi elementi, poi si tolgono i vecchi.
        // Prima era il contrario: se l'inserimento falliva, la bozza online restava vuota.
        const { data: _oldRows } = await db.from('dna_items').select('id').eq('team_id', tid);
        const items = [];
        dataStore.VALUES.forEach((v,i)=>items.push({team_id:tid,item_type:'value',name:v.name,description:v.desc||'',founder_rating:v.rating,avg_rating:v.rating,display_order:i}));
        dataStore.SERVICES.forEach((v,i)=>items.push({team_id:tid,item_type:'service',name:v.name,description:v.desc||'',founder_rating:v.rating,avg_rating:v.rating,display_order:i}));
        dataStore.ROLES.forEach((v,i)=>items.push({team_id:tid,item_type:'role',name:v.name,description:v.desc||'',founder_rating:v.rating,avg_rating:v.rating,display_order:i}));
        if (items.length) {
            const {error:itemsErr} = await db.from('dna_items').insert(items);
            if (itemsErr) throw itemsErr;
        }
        const _oldIds = (_oldRows || []).map(function(r){ return r.id; });
        if (_oldIds.length) {
            const {error:delErr} = await db.from('dna_items').delete().in('id', _oldIds);
            if (delErr) console.warn('pulizia vecchi elementi bozza:', delErr);
        }
        localStorage.removeItem('trsp_draft_backup');
        return { ok:true, teamId:tid };
    }

    function _hhmm() { return new Date().toLocaleTimeString(window.TRSP_LOCALE || 'it-IT', { hour: '2-digit', minute: '2-digit' }); }

    // v11: "Fai una pausa" — gesto consapevole: mette al sicuro la bozza e congeda con una nota per il ritorno
    async function openPause() {
        const st = document.getElementById('save-draft-status');
        let ov = document.getElementById('pause-ov');
        if (!ov) {
            ov = document.createElement('div'); ov.id = 'pause-ov';
            ov.addEventListener('click', function(e){ if (e.target === ov) closePause(); });
            document.body.appendChild(ov);
        }
        ov.innerHTML = '<div class="pause-card" role="dialog" aria-modal="true"><div class="pause-sub" style="margin:10px 0">' + _tr('Sto mettendo al sicuro il tuo lavoro…') + '</div></div>';
        ov.classList.add('open');
        let r;
        try { r = await syncDraftToServer(); } catch(e) { console.error(e); r = { ok: false, reason: 'error' }; }

        if (r.needsLogin) {
            ov.innerHTML = '<div class="pause-card"><div class="pause-title">' + _tr('Accedi per salvare online') + '</div>' +
                '<div class="pause-sub">' + _tr('Il tuo lavoro è conservato su questo dispositivo. Accedi e lo ritrovi online, da qualunque dispositivo.') + '</div>' +
                '<div class="pause-actions"><button class="pause-ghost" onclick="closePause()">' + _tr('Continua') + '</button>' +
                '<button class="pause-primary" onclick="window.location.href=\'login.html?return=design.html\'">' + _tr('Accedi') + '</button></div></div>';
            if (st) st.textContent = _tr('Salvato su questo dispositivo');
            return;
        }
        if (r.reason === 'no-name') {
            ov.innerHTML = '<div class="pause-card"><div class="pause-title">' + _tr('Manca il nome del team') + '</div>' +
                '<div class="pause-sub">' + _tr('Dai un nome al team e poi potrai fermarti quando vuoi.') + '</div>' +
                '<div class="pause-actions"><button class="pause-primary" onclick="closePause()">Ok</button></div></div>';
            return;
        }
        if (!r.ok) {
            ov.innerHTML = '<div class="pause-card"><div class="pause-title">' + _tr('Salvataggio non riuscito') + '</div>' +
                '<div class="pause-sub">' + _tr('Il lavoro resta su questo dispositivo. Riprova tra un attimo prima di chiudere.') + '</div>' +
                '<div class="pause-actions"><button class="pause-ghost" onclick="closePause()">' + _tr('Chiudi') + '</button>' +
                '<button class="pause-primary" onclick="openPause()">' + _tr('Riprova') + '</button></div></div>';
            if (st) st.textContent = _tr('Non salvato');
            return;
        }
        if (st) st.textContent = '✓ ' + _tr('Salvato alle') + ' ' + _hhmm();
        const prev = readPauseNote(r.teamId);
        ov.innerHTML = '<div class="pause-card" role="dialog" aria-modal="true">' +
            '<div class="pause-check">✓</div>' +
            '<div class="pause-title">' + _tr('Il tuo Traspality è al sicuro') + '</div>' +
            '<div class="pause-sub">' + _tr('Lo ritrovi nell\u2019hub, tra i team in fondazione. Quando torni, riparti esattamente da qui.') + '</div>' +
            '<label class="pause-note-label" for="pause-note">' + _tr('Una nota per quando torni') + ' <span style="color:#aaa;font-weight:500;letter-spacing:0;text-transform:none">(' + _tr('facoltativa') + ')</span></label>' +
            '<textarea id="pause-note" class="pause-note" translate="no" placeholder="' + _tr('Es. ripensare i servizi, chiedere un parere sui valori, documentarmi su…') + '">' + escHtml(prev ? prev.note : '') + '</textarea>' +
            '<div class="pause-actions">' +
              '<button class="pause-ghost" onclick="finishPause(false)">' + _tr('Continua a lavorare') + '</button>' +
              '<button class="pause-primary" onclick="finishPause(true)">' + _tr('Vai all\u2019hub') + '</button>' +
            '</div></div>';
        ov.dataset.team = r.teamId || '';
    }
    function closePause() { const ov = document.getElementById('pause-ov'); if (ov) ov.classList.remove('open'); }
    function finishPause(toHub) {
        const ov = document.getElementById('pause-ov');
        const tid = ov && ov.dataset.team;
        const ta = document.getElementById('pause-note');
        const note = ta ? ta.value.trim() : '';
        try {
            if (tid) {
                if (note) localStorage.setItem('trsp_pause_' + tid, JSON.stringify({ note: note, at: new Date().toISOString(), cat: currentCategory }));
                else localStorage.removeItem('trsp_pause_' + tid);
            }
        } catch(e) {}
        if (toHub) { window._leavingOnPurpose = true; window.location.href = 'hub.html'; return; }
        closePause();
    }
    function readPauseNote(tid) {
        if (!tid) return null;
        try { const raw = localStorage.getItem('trsp_pause_' + tid); return raw ? JSON.parse(raw) : null; } catch(e) { return null; }
    }
    // Al rientro su una bozza: la nota lasciata in pausa ricompare in cima al DNA
    function showResumeNote(tid) {
        const n = readPauseNote(tid);
        if (!n || !n.note) return;
        const host = document.querySelector('#step2 .values-interface');
        if (!host || document.getElementById('resume-note')) return;
        const box = document.createElement('div');
        box.id = 'resume-note'; box.className = 'resume-note';
        let when = '';
        try { when = new Date(n.at).toLocaleDateString(window.TRSP_LOCALE || 'it-IT', { day: 'numeric', month: 'long' }); } catch(e) {}
        box.innerHTML = '<div class="resume-note-eyebrow">' + _tr('Bentornato — la tua nota') + (when ? ' · ' + when : '') + '</div>' +
            '<div class="resume-note-text" data-user-text></div>' +
            '<button type="button">' + _tr('Ok, riprendo') + '</button>';
        box.querySelector('.resume-note-text').textContent = n.note;
        box.querySelector('button').onclick = function() {
            try { localStorage.removeItem('trsp_pause_' + tid); } catch(e) {}
            box.remove();
        };
        const back = host.querySelector('.back-identity');
        if (back && back.nextSibling) host.insertBefore(box, back.nextSibling); else host.insertBefore(box, host.firstChild);
    }

    // compatibilita': eventuali chiamate residue a saveDraft() aprono la pausa
    function saveDraft() { return openPause(); }

    // Autosave silenzioso: parte da solo ad ogni valore/servizio/ruolo confermato
    // in saveItem(). Nessun bottone, nessun popup di login — se non sei loggato resta
    // comunque il backup locale scritto da syncDraftToServer(). Debounce breve per non
    // sovrapporre scritture se si aggiungono piu' item in rapida sequenza.
    let _autoSaveTimer = null;
    function autoSaveDraft() {
        clearTimeout(_autoSaveTimer);
        _autoSaveTimer = setTimeout(async () => {
            const st = document.getElementById('save-draft-status');
            try {
                const r = await syncDraftToServer();
                if (st && r.ok) st.textContent = '\u2713 ' + _tr('Salvato alle') + ' ' + _hhmm();
            } catch(e) { console.warn('autoSaveDraft:', e); }
        }, 600);
    }
    async function foundTeam(redirectToModuli) {
        // Se siamo in edit mode, aggiungi items al team esistente
        if (window._editMode && window._editTeamId) {
            await addItemsToExistingTeam();
            return;
        }
        const btn = document.querySelector('.btn-found');
        btn.innerText = 'Salvataggio in corso...';
        btn.disabled = true;

        try {
            // 1. Controlla se l'utente è loggato
            const { data: { user } } = await db.auth.getUser();
            if (!user) {
                alert('Devi essere loggato per fondare un team. Verrai reindirizzato al login.');
                window.location.href = 'login.html';
                return;
            }

            const dnaScore = parseFloat(document.getElementById('dna-score-val').innerText) || null;

            // 2. Prepara il payload per la RPC atomica found_team()
            const itemTypeMap = { VALUES: 'value', SERVICES: 'service', ROLES: 'role' };
            const _rpcItems = [];
            let _order = 0;
            for (const [cat, items] of Object.entries(dataStore)) {
                for (const item of items) {
                    _rpcItems.push({
                        item_type:      itemTypeMap[cat],
                        name:           item.name,
                        description:    item.desc,
                        founder_rating: item.rating,
                        display_order:  _order++
                    });
                }
            }

            const _certConsent = document.getElementById('consent-cert') ? document.getElementById('consent-cert').checked : false;
            const _commConsent = document.getElementById('consent-comm') ? document.getElementById('consent-comm').checked : false;

            const _allInv = collectAllInvites();
            const _founderName = (user.user_metadata && user.user_metadata.full_name) ? user.user_metadata.full_name : (user.email ? user.email.split('@')[0] : 'Il fondatore');
            const _rpcInvites = Object.entries(_allInv).map(function([_em, _roles]) {
                const _pr = _roles.length ? _roles[0] : null;
                return { email: _em, name: partnerNameFor(_em), role_title: _pr ? _pr.role : 'Partner',
                         can_admin: !!(typeof _adminEmails !== 'undefined' && _adminEmails[_em]) };
            });

            // 3. Un'unica chiamata atomica: o va tutto, o Postgres fa il rollback di tutto.
            //    Sostituisce le 6 scritture separate che lasciavano team a metà se una falliva.
            const { data: rpcResult, error: rpcError } = await db.rpc('found_team', {
                payload: {
                    name: teamData.name, slogan: teamData.slogan, ragione_sociale: teamData.ragione,
                    promise: teamData.promise, dna_score: dnaScore,
                    consent_benchmark: _certConsent, consent_comm: _commConsent,
                    items: _rpcItems, invites: _rpcInvites
                },
                // Se esiste una bozza (autosalvata o ripresa da hub), la finalizziamo
                // invece di creare un secondo team: found_team() lo gestisce lato server.
                p_team_id: window._draftTeamId || null
            });
            if (rpcError) throw rpcError;

            const team = { id: rpcResult.team_id, name: rpcResult.name, slug: rpcResult.slug };
            const _base = window.location.origin + '/';
            const _ilinks = (rpcResult.invites || []).map(function(inv) {
                let _url = `${_base}join.html?team=${team.id}&email=${encodeURIComponent(inv.email)}&invited_by=${encodeURIComponent(_founderName)}`;
                if (inv.name) _url += `&name=${encodeURIComponent(inv.name)}`;
                if (inv.role_title) _url += `&role=${encodeURIComponent(inv.role_title)}`;
                return { email: inv.email, roleLabel: inv.role_title || 'Partner', url: _url };
            });

            // 3b. Scrivi aiTags su dna_item_tags (lookup UUID da vsm_tags per nome)
            try {
                // Carica vocabolario vsm_tags
                const { data: vsmTags } = await db.from('vsm_tags').select('id, name');
                const vsmMap = {};
                (vsmTags || []).forEach(function(t) { vsmMap[t.name] = t.id; });

                // Carica gli item appena inseriti per avere gli UUID
                const { data: insertedItems } = await db
                    .from('dna_items')
                    .select('id, name, item_type')
                    .eq('team_id', team.id);

                const itemUuidMap = {};
                (insertedItems || []).forEach(function(it) {
                    itemUuidMap[it.name.toLowerCase()] = it.id;
                });

                const tagRecords = [];
                for (const [cat, items] of Object.entries(dataStore)) {
                    for (const item of items) {
                        if (!item.aiTags || !item.aiTags.length) continue;
                        const itemId = itemUuidMap[item.name.toLowerCase()];
                        if (!itemId) continue;
                        item.aiTags.forEach(function(tagName) {
                            const tagId = vsmMap[tagName];
                            if (tagId) tagRecords.push({ item_id: itemId, tag_id: tagId, source: 'ai' });
                        });
                    }
                }
                if (tagRecords.length > 0) {
                    await db.from('dna_item_tags').upsert(tagRecords, { onConflict: 'item_id,tag_id', ignoreDuplicates: true });
                }
            } catch(tagErr) {
                console.warn('aiTags insert warning (non bloccante):', tagErr);
            }

            // 4. Invia le email di invito (chiamata esterna Resend — resta fuori dalla transazione DB)
            for (const _lnk of _ilinks) { await sendInviteEmail(_lnk.email, _founderName, team.name, _lnk.url); }

            // 4b. Email "È nato il Traspality di NOMETEAM" al founder (non bloccante: se fallisce il team è comunque fondato)
            try {
                const _born = await db.functions.invoke('team-born-email', { body: { team_id: team.id } });
                if (_born.error) console.warn('team-born-email:', _born.error.message || _born.error);
            } catch(_bErr) { console.warn('team-born-email error (non bloccante):', _bErr); }

            window._foundedTeamId = team.id;
            if (redirectToModuli) {
                window.location.href = 'moduli.html?team=' + team.id + '&from=fondazione';
                return;
            }
            showPanel(5);
            showInviteLinks(team, _ilinks, _base);

        } catch (err) {
            console.error('Errore fondazione:', err);
            alert('Si è verificato un errore: ' + (err.message || 'Riprova tra poco.'));
            btn.innerText = '✦ FONDA IL TEAM';
            btn.disabled = false;
        }
    }

    // Mostra lo step 2 con i dati già pronti (stesso pattern di loadExistingTeam, ma per bozza locale)
    function restoreDraftIntoUI() {
        document.body.classList.add('loaded');
        const step1 = document.querySelector('.step-1');
        const step2 = document.querySelector('.step-2');
        if (step1) { step1.classList.add('hidden'); step1.style.opacity='0'; step1.style.visibility='hidden'; step1.style.pointerEvents='none'; }
        if (step2) {
            step2.classList.add('active');
            document.getElementById('main-space')?.classList.add('step-2-active');
            step2.style.opacity='1'; step2.style.visibility='visible'; step2.style.transform='translateX(0)'; step2.style.zIndex='60'; step2.style.pointerEvents='auto';
        }
        const header = document.getElementById('live-header');
        if (header) { header.classList.add('visible'); header.style.opacity='1'; header.style.visibility='visible'; }
        const nameEl = document.getElementById('display-name');
        if (nameEl) nameEl.innerText = teamData.name || '';
        const sloganEl = document.getElementById('display-slogan');
        if (sloganEl) sloganEl.innerText = teamData.slogan || '';
        const inputName = document.getElementById('input-name');
        if (inputName) inputName.value = teamData.name || '';
        const inputSlogan = document.getElementById('input-slogan');
        if (inputSlogan) inputSlogan.value = teamData.slogan || '';
        const inputRagione = document.getElementById('input-ragione');
        if (inputRagione) inputRagione.value = teamData.ragione || '';
        if (typeof renderPartners === 'function') { try { renderPartners(); } catch(e){} }
        if (typeof updateUI === 'function') { try { updateUI(); } catch(e){} }
        document.getElementById('model-modal-overlay')?.classList.remove('open');
    }

    // Avviso nativo del browser se si esce (tasto indietro, chiusura tab) con
    // lavoro non ancora fondato. L'autosave riduce il danno al minimo, ma
    // questo copre anche il nome/voce in corso di digitazione non ancora confermata.
    window.addEventListener('beforeunload', function(e) {
        if (window._foundedTeamId || window._leavingOnPurpose) return;
        const hasContent = (teamData && teamData.name) ||
            (dataStore && (dataStore.VALUES.length || dataStore.SERVICES.length || dataStore.ROLES.length));
        if (!hasContent) return;
        e.preventDefault();
        e.returnValue = '';
    });

    // partner-input enter key
    document.addEventListener('DOMContentLoaded', () => {
        document.body.classList.add('wizard-active');

        // Recupero bozza salvata in locale (es. dopo login forzato a metà compilazione)
        try {
            const backupRaw = localStorage.getItem('trsp_draft_backup');
            if (backupRaw && !_editTeamId) {
                const backup = JSON.parse(backupRaw);
                const _ageMs = backup.savedAt ? (Date.now() - new Date(backup.savedAt).getTime()) : Infinity;
                const _fromLogin = localStorage.getItem('trsp_oauth_return') === 'design.html';
                const _fresh = _ageMs < 7 * 24 * 60 * 60 * 1000; // v11: 7 giorni (prima 2 ore)
                if (_fromLogin || _fresh) {
                    if (confirm('Riprendiamo la bozza del team che stavi creando?')) {
                        teamData = backup.teamData || teamData;
                        Object.assign(dataStore, backup.dataStore || {});
                        restoreDraftIntoUI();
                    }
                }
                // in ogni caso ripuliamo: niente popup a freddo nelle aperture successive
                localStorage.removeItem('trsp_draft_backup');
                localStorage.removeItem('trsp_oauth_return');
            }
        } catch(be) { console.warn('backup restore failed:', be); }

        if (_editTeamId) { loadExistingTeam(); }
        const pi = document.getElementById('partner-input');
        if (pi) pi.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); addPartner(); } });
        // Nascondi "Sei già registrato?" se loggato
        db.auth.getSession().then(function(r) {
            if (r.data && r.data.session) {
                var lnk = document.getElementById('login-link-step1');
                if (lnk) lnk.style.display = 'none';
            }
        });
    });
    
    /* ════════════════════════════════════════════════════
       DNA STARTER PACKS — Tipo A (modelli organizzativi)
       e Tipo B (pacchetti tematici verticali)
       ════════════════════════════════════════════════════ */
    var PACKS_A = [{"id":"ORG-01","icon":"🚀","name":"Startup","desc":"Team early stage che costruiscono un prodotto scalabile.","values":[{"n":"Velocità come vantaggio","d":"Muoversi più velocemente degli altri è la prima forma di competizione.","rating":8},{"n":"Fail fast, learn faster","d":"Gli errori sono dati: raccoglierli subito vale più che evitarli.","rating":7},{"n":"Missione sopra tutto","d":"Il perché del progetto guida ogni decisione.","rating":9},{"n":"Frugalità creativa","d":"Fare molto con poco è una competenza, non una limitazione.","rating":7},{"n":"Fiducia radicale nel team","d":"In fase early stage il team è il prodotto.","rating":8}],"services":[{"n":"Product development","d":"Costruzione iterativa del prodotto con cicli rapidi.","rating":8},{"n":"Growth hacking","d":"Esperimenti data-driven per acquisire utenti.","rating":7},{"n":"Fundraising support","d":"Pitch, data room e relazioni con investitori.","rating":7},{"n":"Go-to-market","d":"Strategia di lancio, pricing e posizionamento.","rating":8}],"roles":[{"n":"CEO / Co-founder","d":"Visione, fundraising, team building.","rating":9},{"n":"CTO / Lead Dev","d":"Architettura tecnica e sviluppo del prodotto.","rating":9},{"n":"Growth / Marketing Lead","d":"Acquisizione utenti, conversione e retention.","rating":8}]},{"id":"ORG-02","icon":"🏠","name":"PMI Familiare","desc":"Imprese a conduzione familiare con storia e valori radicati.","values":[{"n":"Continuità generazionale","d":"Il lavoro di oggi è il lascito di domani.","rating":8},{"n":"Reputazione come capitale","d":"Il nome aziendale va protetto.","rating":9},{"n":"Radicamento locale","d":"Il territorio è una risorsa, non un limite.","rating":8},{"n":"Lealtà alle persone","d":"I collaboratori storici sono famiglia allargata.","rating":9},{"n":"Prudenza come saggezza","d":"Le decisioni affrettate costano di più.","rating":8}],"services":[{"n":"Produzione o servizio core","d":"L'attività principale che ha costruito la reputazione.","rating":8},{"n":"Gestione clienti storici","d":"Relazioni di lungo periodo e referral.","rating":9},{"n":"Passaggio generazionale","d":"Trasferimento di competenze e responsabilità.","rating":7},{"n":"Innovazione incrementale","d":"Miglioramento continuo senza stravolgere l'identità.","rating":7}],"roles":[{"n":"Imprenditore / Titolare","d":"Visione strategica e cultura aziendale.","rating":9},{"n":"Erede / Next Gen Manager","d":"Porta innovazione rispettando l'identità storica.","rating":8},{"n":"Responsabile Operativo","d":"Coordina le attività quotidiane.","rating":8}]},{"id":"ORG-03","icon":"🤝","name":"Cooperativa","desc":"Organizzazioni a proprietà diffusa dove i soci sono anche decisori.","values":[{"n":"Democrazia economica","d":"Una testa, un voto: il potere è distribuito.","rating":8},{"n":"Mutualità","d":"Il beneficio è condiviso tra i soci.","rating":8},{"n":"Solidarietà attiva","d":"Ci si sostiene nei momenti difficili.","rating":8},{"n":"Trasparenza gestionale","d":"I conti sono aperti a tutti i soci.","rating":9},{"n":"Radicamento nella comunità","d":"La cooperativa esiste per il territorio.","rating":7}],"services":[{"n":"Servizi ai soci","d":"Prestazioni riservate ai membri.","rating":7},{"n":"Servizi alla comunità","d":"Utilità sociale per il territorio.","rating":7},{"n":"Governance partecipativa","d":"Assemblea, voto e decisione collettiva.","rating":8},{"n":"Formazione dei soci","d":"Sviluppo competenze e consapevolezza cooperativa.","rating":7}],"roles":[{"n":"Presidente / CdA","d":"Rappresentanza legale e governance.","rating":8},{"n":"Direttore operativo","d":"Gestione quotidiana e rapporti con i soci.","rating":8},{"n":"Responsabile soci","d":"Ingresso, formazione e relazioni con i soci.","rating":7}]},{"id":"ORG-04","icon":"🌱","name":"No-Profit","desc":"Organizzazioni per finalità sociali, culturali o ambientali.","values":[{"n":"Missione come bussola","d":"Ogni decisione si misura sull'impatto verso la causa.","rating":9},{"n":"Volontariato come cultura","d":"Chi dona il tempo è il cuore dell'organizzazione.","rating":8},{"n":"Rendicontazione sociale","d":"L'uso delle risorse va raccontato con trasparenza.","rating":9},{"n":"Advocacy attiva","d":"Rappresentare la causa nel dibattito pubblico.","rating":8},{"n":"Collaborazione tra enti","d":"Le reti amplificano l'impatto.","rating":8}],"services":[{"n":"Programmi di impatto","d":"Attività dirette verso i beneficiari.","rating":8},{"n":"Raccolta fondi","d":"Campagne e relazioni con donatori.","rating":7},{"n":"Comunicazione della causa","d":"Storytelling e advocacy.","rating":8},{"n":"Gestione volontari","d":"Reclutamento e coordinamento delle risorse volontarie.","rating":7}],"roles":[{"n":"Presidente / Direttore","d":"Guida strategica e relazioni con finanziatori.","rating":8},{"n":"Responsabile Programmi","d":"Coordina le attività di impatto.","rating":8},{"n":"Fundraiser","d":"Sviluppa relazioni con donatori.","rating":7}]},{"id":"ORG-05","icon":"💼","name":"Studio Professionale","desc":"Studi dove la competenza individuale è il prodotto.","values":[{"n":"Eccellenza tecnica","d":"La qualità della prestazione è l'unico marketing.","rating":9},{"n":"Fiducia come contratto implicito","d":"Il cliente affida problemi complessi.","rating":9},{"n":"Aggiornamento permanente","d":"Il sapere va rinnovato continuamente.","rating":8},{"n":"Etica deontologica","d":"Le regole professionali sono un valore.","rating":9},{"n":"Discrezione","d":"La riservatezza è un valore culturale.","rating":9}],"services":[{"n":"Consulenza specialistica","d":"Prestazioni professionali certificate.","rating":9},{"n":"Gestione del dossier cliente","d":"Presa in carico e risoluzione pratiche.","rating":8},{"n":"Formazione e aggiornamento","d":"Percorsi interni per elevare il livello tecnico.","rating":8},{"n":"Networking professionale","d":"Relazioni con altri studi e associazioni.","rating":7}],"roles":[{"n":"Socio / Partner","d":"Gestisce clienti chiave e la qualità.","rating":9},{"n":"Collaboratore Senior","d":"Esegue prestazioni complesse in autonomia.","rating":8},{"n":"Segreteria e Back Office","d":"Agenda, pratiche e relazioni operative.","rating":7}]},{"id":"ORG-06","icon":"🔗","name":"Rete Freelance","desc":"Professionisti indipendenti che collaborano su progetti comuni.","values":[{"n":"Autonomia responsabile","d":"Libertà di metodo con piena responsabilità.","rating":8},{"n":"Complementarità delle competenze","d":"La rete vale più della somma dei singoli.","rating":8},{"n":"Reputazione condivisa","d":"Il comportamento di uno impatta su tutti.","rating":8},{"n":"Flessibilità strutturata","d":"Adattarsi ai progetti senza perdere metodo.","rating":7},{"n":"Equità nella distribuzione","d":"I compensi seguono regole chiare.","rating":8}],"services":[{"n":"Project delivery integrato","d":"Esecuzione di progetti complessi in rete.","rating":8},{"n":"Sviluppo clienti condiviso","d":"Acquisizione opportunità tra i membri.","rating":7},{"n":"Knowledge sharing","d":"Scambio di competenze e metodologie.","rating":7},{"n":"Coordinamento di progetto","d":"Gestione operativa della collaborazione.","rating":7}],"roles":[{"n":"Project Lead","d":"Coordina il team di freelance sul progetto.","rating":8},{"n":"Specialist / Expert","d":"Porta la competenza verticale.","rating":8},{"n":"Business Developer","d":"Identifica nuove opportunità per la rete.","rating":7}]},{"id":"ORG-07","icon":"🏢","name":"Team Corporate","desc":"Business unit con autonomia operativa in grande organizzazione.","values":[{"n":"Allineamento strategico","d":"Gli obiettivi del team si connettono alla missione madre.","rating":8},{"n":"Accountability sui risultati","d":"I KPI sono chiari e misurati senza ambiguità.","rating":9},{"n":"Collaborazione cross-funzionale","d":"I risultati migliori nascono con altri team.","rating":8},{"n":"Innovazione interna","d":"Proporre miglioramenti è un dovere.","rating":7},{"n":"Sviluppo delle persone","d":"Il team cresce quando ogni individuo cresce.","rating":8}],"services":[{"n":"Delivery di funzione","d":"Erogazione del servizio assegnato.","rating":8},{"n":"Gestione stakeholder interni","d":"Relazioni con altre funzioni e management.","rating":8},{"n":"Reporting e accountability","d":"Reportistica su risultati, costi e KPI.","rating":9},{"n":"Progetti trasversali","d":"Partecipazione a iniziative multi-funzione.","rating":8}],"roles":[{"n":"Team Leader / Manager","d":"Guida il team e le performance.","rating":8},{"n":"Senior Specialist","d":"Esperto di dominio e mentor.","rating":8},{"n":"Analyst / Junior","d":"Esegue attività operative e cresce.","rating":7}]},{"id":"ORG-08","icon":"🌍","name":"Comunità Territoriale","desc":"Gruppi che aggregano persone attorno a un luogo o causa comune.","values":[{"n":"Senso di appartenenza","d":"Il territorio è il collante che dà senso all'azione.","rating":9},{"n":"Partecipazione attiva","d":"Ogni membro ha voce e responsabilità.","rating":8},{"n":"Prossimità","d":"Le relazioni face-to-face costruiscono fiducia.","rating":8},{"n":"Patrimonio comune","d":"Le risorse condivise vanno custodite.","rating":8},{"n":"Inclusione senza barriere","d":"Nessuno è escluso per reddito o origine.","rating":9}],"services":[{"n":"Attivazione della comunità","d":"Iniziative per coinvolgere i membri.","rating":7},{"n":"Presidio del territorio","d":"Cura e promozione delle risorse comuni.","rating":7},{"n":"Comunicazione interna","d":"Tenere informata e connessa la comunità.","rating":7},{"n":"Rappresentanza esterna","d":"Interlocuzione con enti pubblici e media.","rating":7}],"roles":[{"n":"Coordinatore / Animatore","d":"Facilita le dinamiche di gruppo.","rating":7},{"n":"Portavoce / Rappresentante","d":"Parla a nome della comunità.","rating":7},{"n":"Custode del patrimonio","d":"Cura le risorse fisiche o culturali condivise.","rating":7}]}].concat([{"id": "FOOD-01", "group": "food", "icon": "🐄", "name": "Latte e Formaggi", "desc": "Stalle, caseifici e aziende lattiero-casearie.", "values": [{"n": "Origine dichiarata", "d": "Ogni forma si può ricondurre agli animali, al foraggio e alle persone che l'hanno prodotta.", "rating": 9}, {"n": "Benessere animale", "d": "Spazio, luce e cure adeguate: raccontiamo come vivono, non solo come sono certificati.", "rating": 9}, {"n": "Filiera corta", "d": "Foraggio, fornitori e clienti il più vicino possibile. Quando andiamo lontano, spieghiamo perché.", "rating": 8}, {"n": "Lavoro regolare e riconosciuto", "d": "Contratti, orari e compensi che possiamo raccontare senza imbarazzo, stagionali compresi.", "rating": 9}, {"n": "Suolo e foraggio curati", "d": "La qualità del latte nasce nel prato: le scelte agronomiche guardano oltre l'annata.", "rating": 8}], "services": [{"n": "Mungitura quotidiana", "d": "Il gesto che scandisce ogni giorno, mattina e sera.", "rating": 9}, {"n": "Trasformazione in caseificio", "d": "Dalla cisterna alla cagliata: caglio, temperature, rese.", "rating": 9}, {"n": "Stagionatura e cura delle forme", "d": "Rivoltatura, spazzolatura, controllo di umidità e tempo.", "rating": 8}, {"n": "Consegna e vendita diretta", "d": "Portiamo il prodotto a chi lo mangia: spaccio, mercati, consegne.", "rating": 8}], "roles": [{"n": "Conduzione della stalla", "d": "Alimentazione, mungitura, salute della mandria.", "rating": 9}, {"n": "Casaro", "d": "Responsabile della trasformazione e della resa.", "rating": 9}, {"n": "Controllo qualità e HACCP", "d": "Analisi, registri, conformità sanitaria.", "rating": 8}, {"n": "Consegne e rapporto con i clienti", "d": "Giri di consegna, ordini, relazione con negozi e ristoranti.", "rating": 8}]}, {"id": "FOOD-02", "group": "food", "icon": "🍇", "name": "Vino e Vigna", "desc": "Cantine e vignaioli che seguono il ciclo completo.", "values": [{"n": "Ciclo completo in azienda", "d": "Dalla coltivazione delle uve all'imbottigliamento: non deleghiamo l'identità del prodotto.", "rating": 9}, {"n": "Legame con il territorio", "d": "Il vino racconta un luogo preciso, non uno stile di mercato.", "rating": 9}, {"n": "Interventi minimi in vigna", "d": "Dichiariamo cosa usiamo, quanto e perché. Anche quando la risposta è scomoda.", "rating": 8}, {"n": "Lavoro regolare e riconosciuto", "d": "Chi vendemmia ha un contratto e un compenso dichiarabile.", "rating": 9}, {"n": "Trasparenza sull'annata", "d": "Le annate difficili si raccontano, non si nascondono.", "rating": 8}], "services": [{"n": "Lavoro in vigna e vendemmia", "d": "Potatura, gestione della chioma, trattamenti, raccolta.", "rating": 9}, {"n": "Vinificazione e affinamento", "d": "Fermentazioni, travasi, legni, tempi.", "rating": 9}, {"n": "Imbottigliamento e confezionamento", "d": "Il momento in cui il vino diventa prodotto.", "rating": 8}, {"n": "Degustazioni e ospitalità", "d": "Apriamo la cantina a chi vuole capire come lavoriamo.", "rating": 8}], "roles": [{"n": "Conduzione del vigneto", "d": "Decide e esegue in campo, annata per annata.", "rating": 9}, {"n": "Cantiniere", "d": "Segue il vino dalla pigiatura alla bottiglia.", "rating": 9}, {"n": "Vendita e rapporto con i canali", "d": "Enoteche, ristoranti, importatori.", "rating": 8}, {"n": "Racconto e comunicazione", "d": "Responsabile della corrispondenza tra racconto e realtà.", "rating": 8}]}, {"id": "FOOD-03", "group": "food", "icon": "🌾", "name": "Ortofrutta e Campo", "desc": "Aziende agricole, orticole e frutticole.", "values": [{"n": "Stagionalità rispettata", "d": "Lavoriamo con quello che la stagione dà, senza forzare per riempire uno scaffale.", "rating": 9}, {"n": "Filiera corta", "d": "Vendiamo vicino e compriamo vicino, e dichiariamo il raggio.", "rating": 9}, {"n": "Varietà locali", "d": "Coltiviamo tipologie che il mercato ha abbandonato, perché sparirebbero.", "rating": 8}, {"n": "Lavoro regolare e riconosciuto", "d": "Vale soprattutto per gli stagionali della raccolta.", "rating": 9}, {"n": "Suolo vivo", "d": "Rotazioni, sostanza organica, acqua: capitale, non materia prima.", "rating": 8}], "services": [{"n": "Semina e cura delle colture", "d": "Il lavoro quotidiano che precede ogni raccolto.", "rating": 9}, {"n": "Raccolta", "d": "Il gesto che decide la qualità di tutto il resto.", "rating": 9}, {"n": "Selezione e confezionamento", "d": "Cernita, pezzatura, preparazione delle cassette.", "rating": 8}, {"n": "Vendita diretta e mercati", "d": "Banchi, spaccio, cassette a domicilio.", "rating": 8}], "roles": [{"n": "Conduzione del campo", "d": "Programma le colture e decide gli interventi.", "rating": 9}, {"n": "Raccolta e post-raccolta", "d": "Coordina squadre, tempi e conservazione.", "rating": 8}, {"n": "Vendita e mercati", "d": "Presidia banchi, clienti e ordini.", "rating": 8}, {"n": "Amministrazione e tracciabilità", "d": "Registri, lotti, adempimenti.", "rating": 8}]}]);
    var PACKS_B = [{"id":"ESG-01","icon":"🌿","name":"ESG","desc":"Criteri ambientali, sociali e di governance.","values":[{"n":"Responsabilità ambientale","d":"Agire riducendo l'impatto sull'ecosistema.","rating":7},{"n":"Governance etica","d":"Decisioni trasparenti e accountable.","rating":8},{"n":"Inclusione e diversità","d":"Valorizzare le differenze come motore di innovazione.","rating":7},{"n":"Impatto misurabile","d":"Ogni azione produce dati verificabili.","rating":8},{"n":"Lungo termine","d":"Sostenibilità sistemica rispetto al profitto immediato.","rating":7}],"services":[{"n":"Reportistica ESG","d":"Report di sostenibilità secondo standard GRI/ESRS.","rating":8},{"n":"Stakeholder engagement","d":"Processi strutturati di ascolto e coinvolgimento.","rating":7},{"n":"Audit interno ESG","d":"Verifica periodica allineamento dichiarato/praticato.","rating":8},{"n":"Formazione ESG","d":"Cultura della sostenibilità in tutto il team.","rating":7}],"roles":[{"n":"ESG Manager","d":"Coordina la strategia di sostenibilità.","rating":8},{"n":"Diversity & Inclusion Officer","d":"Promuove politiche e pratiche inclusive.","rating":7},{"n":"Sustainability Analyst","d":"Raccoglie e interpreta dati ambientali e sociali.","rating":8}]},{"id":"FIN-01","icon":"📊","name":"Sostenibilità Finanziaria","desc":"Rigore, trasparenza e visione di lungo periodo.","values":[{"n":"Solidità patrimoniale","d":"Basi finanziarie robuste che resistano alle turbolenze.","rating":8},{"n":"Trasparenza contabile","d":"I numeri sono leggibili e condivisi.","rating":9},{"n":"Crescita responsabile","d":"Espandersi senza compromettere l'equilibrio strutturale.","rating":7},{"n":"Gestione del rischio","d":"Identificare e contenere i rischi prima che diventino crisi.","rating":8},{"n":"Disciplina operativa","d":"Controllo dei costi come atto culturale.","rating":8}],"services":[{"n":"Pianificazione finanziaria","d":"Budget, forecast e scenari a supporto delle decisioni.","rating":8},{"n":"Controllo di gestione","d":"Monitoraggio continuo di margini, costi e performance.","rating":9},{"n":"Risk management","d":"Identificazione e mitigazione dei rischi finanziari.","rating":8},{"n":"Investor relations","d":"Gestione della comunicazione con soci e investitori.","rating":7}],"roles":[{"n":"CFO","d":"Guida la strategia finanziaria.","rating":9},{"n":"Controller","d":"Monitora le performance economiche.","rating":8},{"n":"Risk Officer","d":"Analizza l'esposizione ai rischi.","rating":8}]},{"id":"TEC-01","icon":"💻","name":"Innovazione Tecnologica","desc":"Tecnologia come leva competitiva.","values":[{"n":"User-centricity","d":"Ogni scelta tecnologica parte dal bisogno reale dell'utente.","rating":7},{"n":"Velocità di iterazione","d":"Rilasciare presto, imparare subito, migliorare continuamente.","rating":8},{"n":"Qualità del codice","d":"Il debito tecnico è un costo reale: si gestisce.","rating":8},{"n":"Apertura alla sperimentazione","d":"Il fallimento controllato è dati, non sconfitta.","rating":7},{"n":"Sicurezza by design","d":"La protezione dei dati è un valore architetturale.","rating":9}],"services":[{"n":"Product development","d":"Progettazione e sviluppo di prodotti digitali.","rating":8},{"n":"DevOps & infrastruttura","d":"Pipeline CI/CD, cloud management e affidabilità.","rating":8},{"n":"Data & analytics","d":"Raccolta e interpretazione dei dati per decisioni informate.","rating":8},{"n":"UX/UI Design","d":"Progettazione di esperienze digitali usabili.","rating":8}],"roles":[{"n":"CTO","d":"Definisce la visione tecnologica.","rating":9},{"n":"Product Manager","d":"Traduce la strategia in roadmap.","rating":8},{"n":"Lead Developer","d":"Supervisiona la qualità tecnica del codice.","rating":8}]},{"id":"SAL-01","icon":"❤️","name":"Salute e Benessere","desc":"Welfare e wellbeing delle persone.","values":[{"n":"Cura della persona","d":"Ogni intervento mette al centro la dignità dell'individuo.","rating":9},{"n":"Prevenzione attiva","d":"Agire prima che il problema si manifesti.","rating":8},{"n":"Evidenza scientifica","d":"Le pratiche adottate sono fondate su ricerca verificata.","rating":9},{"n":"Riservatezza","d":"La fiducia del paziente è sacra e va protetta.","rating":9},{"n":"Accessibilità","d":"Il benessere non è un privilegio.","rating":8}],"services":[{"n":"Consulenza clinica o di coaching","d":"Supporto individuale o di gruppo.","rating":8},{"n":"Programmi di welfare aziendale","d":"Percorsi strutturati di benessere per team.","rating":7},{"n":"Formazione alla salute","d":"Education su temi di wellbeing.","rating":8},{"n":"Misurazione del benessere","d":"Assessment periodici con strumenti validati.","rating":8}],"roles":[{"n":"Responsabile Welfare","d":"Progetta e coordina i programmi di benessere.","rating":9},{"n":"Health Coach / Clinico","d":"Eroga le prestazioni di cura.","rating":9},{"n":"Data & Wellness Analyst","d":"Interpreta i dati di salute.","rating":8}]},{"id":"FOR-01","icon":"🎓","name":"Formazione e Cultura","desc":"Produzione e trasmissione di conoscenza.","values":[{"n":"Apprendimento continuo","d":"La crescita non si ferma mai.","rating":8},{"n":"Rigore metodologico","d":"La qualità dei contenuti è non negoziabile.","rating":9},{"n":"Accessibilità della conoscenza","d":"Il sapere deve essere comprensibile, non elitario.","rating":7},{"n":"Impatto reale","d":"La formazione vale solo se cambia comportamenti.","rating":8},{"n":"Comunità di pratica","d":"Il sapere cresce nella condivisione tra pari.","rating":7}],"services":[{"n":"Progettazione didattica","d":"Design di percorsi formativi efficaci.","rating":8},{"n":"Erogazione formativa","d":"Docenza, facilitazione e coaching.","rating":8},{"n":"Valutazione dell'apprendimento","d":"Strumenti per misurare l'efficacia della formazione.","rating":9},{"n":"Produzione di contenuti","d":"Creazione di materiali didattici e e-learning.","rating":7}],"roles":[{"n":"Learning Designer","d":"Progetta l'architettura dei percorsi formativi.","rating":8},{"n":"Formatore / Facilitatore","d":"Eroga i contenuti e guida i gruppi.","rating":8},{"n":"Responsabile Qualità Formativa","d":"Monitora standard e risultati dei programmi.","rating":9}]},{"id":"AGR-01","icon":"🌾","name":"Agrifood & Territorio","desc":"Identità, territorio e qualità alimentare.","values":[{"n":"Identità territoriale","d":"Il prodotto racconta il luogo da cui nasce.","rating":8},{"n":"Qualità artigianale","d":"Ogni fase del processo porta il segno della cura.","rating":9},{"n":"Rispetto della stagionalità","d":"Lavorare con i ritmi della natura.","rating":8},{"n":"Filiera trasparente","d":"Chi compra ha il diritto di sapere da dove viene.","rating":9},{"n":"Comunità contadina","d":"Il territorio si preserva valorizzando chi lo coltiva.","rating":7}],"services":[{"n":"Produzione primaria","d":"Coltivazione secondo standard di qualità.","rating":8},{"n":"Trasformazione e packaging","d":"Lavorazione e confezionamento identitario.","rating":8},{"n":"Distribuzione e vendita diretta","d":"Canali B2C e B2B per il consumatore finale.","rating":7},{"n":"Storytelling del prodotto","d":"Comunicazione autentica della storia e del territorio.","rating":7}],"roles":[{"n":"Responsabile di produzione","d":"Supervisiona qualità e processi.","rating":8},{"n":"Agronomo / Enologo / Tecnico","d":"Expertise tecnica specifica.","rating":9},{"n":"Brand & Territorio Manager","d":"Costruisce e racconta l'identità del brand.","rating":7}]},{"id":"COM-01","icon":"📢","name":"Comunicazione e Media","desc":"Contenuti per costruire relazioni e reputazione.","values":[{"n":"Autenticità narrativa","d":"Le storie raccontate riflettono la realtà.","rating":8},{"n":"Rilevanza per il pubblico","d":"Ogni contenuto risponde a un bisogno reale.","rating":7},{"n":"Coerenza di brand","d":"Voce, tono e visual sono riconoscibili ovunque.","rating":8},{"n":"Velocità editoriale","d":"Reagire ai temi del momento con precisione.","rating":7},{"n":"Misurazione dell'impatto","d":"I numeri guidano le scelte creative.","rating":8}],"services":[{"n":"Strategia editoriale","d":"Piano di contenuti allineato agli obiettivi di business.","rating":7},{"n":"Produzione contenuti","d":"Testi, video, audio, grafiche per ogni canale.","rating":7},{"n":"Social media management","d":"Presidio, pubblicazione e moderazione dei canali.","rating":7},{"n":"PR e media relations","d":"Gestione delle relazioni con giornalisti e media.","rating":7}],"roles":[{"n":"Content Strategist","d":"Definisce piano editoriale e tono di voce.","rating":8},{"n":"Creative Director","d":"Supervisiona la coerenza visual di tutti i materiali.","rating":8},{"n":"Social Media Manager","d":"Gestisce la presenza sui canali.","rating":7}]},{"id":"LEG-01","icon":"⚖️","name":"Professioni Legali","desc":"Rigore, etica e orientamento al cliente.","values":[{"n":"Indipendenza di giudizio","d":"Il parere professionale non è mai condizionato.","rating":9},{"n":"Riservatezza assoluta","d":"Le informazioni del cliente sono sacre.","rating":10},{"n":"Aggiornamento normativo","d":"La legge cambia: chi la applica deve essere aggiornato.","rating":9},{"n":"Chiarezza comunicativa","d":"Il diritto complesso va spiegato in modo comprensibile.","rating":8},{"n":"Etica professionale","d":"Le regole deontologiche sono un valore.","rating":9}],"services":[{"n":"Consulenza legale","d":"Pareri, contrattualistica e assistenza giuridica.","rating":8},{"n":"Compliance e regulatory","d":"Analisi e adeguamento ai requisiti normativi.","rating":9},{"n":"Contenzioso e litigation","d":"Rappresentanza in sede giudiziale.","rating":8},{"n":"Due diligence legale","d":"Analisi approfondita per M&A e investimenti.","rating":8}],"roles":[{"n":"Partner / Senior Counsel","d":"Guida i dossier più complessi.","rating":9},{"n":"Associate / Junior Lawyer","d":"Ricerca, redazione di atti e supporto operativo.","rating":8},{"n":"Compliance Officer","d":"Monitora l'aderenza ai requisiti normativi.","rating":9}]},{"id":"ARC-01","icon":"🏛️","name":"Architettura e Design","desc":"Progettazione di spazi ed esperienze.","values":[{"n":"Funzionalità come estetica","d":"Il bello serve: ogni scelta formale ha una ragione d'uso.","rating":7},{"n":"Sostenibilità del progetto","d":"Progettare pensando all'impatto nel tempo.","rating":7},{"n":"Ascolto del committente","d":"Il progetto nasce dal dialogo.","rating":8},{"n":"Ricerca e sperimentazione","d":"L'innovazione richiede studio, prove e coraggio.","rating":7},{"n":"Identità culturale","d":"Ogni progetto si radica in un contesto.","rating":7}],"services":[{"n":"Progettazione architettonica","d":"Dal concept al progetto esecutivo.","rating":8},{"n":"Interior design","d":"Progettazione degli interni con gestione materiali.","rating":7},{"n":"Industrial / product design","d":"Sviluppo di oggetti e prodotti.","rating":7},{"n":"Direzione lavori","d":"Supervisione del cantiere per garantire qualità.","rating":8}],"roles":[{"n":"Architetto / Designer Senior","d":"Guida la visione progettuale.","rating":8},{"n":"Project Manager di cantiere","d":"Coordina tempi, costi e fornitori.","rating":8},{"n":"Visualizer / BIM Specialist","d":"Produce render, modelli 3D e documentazione.","rating":8}]},{"id":"MAN-01","icon":"🔧","name":"Manifattura & Artigianato","desc":"Mestiere, materiale e processo come valore.","values":[{"n":"Mestiere come identità","d":"Ciò che sappiamo fare con le mani definisce chi siamo.","rating":9},{"n":"Qualità del processo","d":"L'eccellenza si costruisce in ogni passaggio.","rating":9},{"n":"Rispetto del materiale","d":"Conoscere la materia prima è il primo atto di rispetto.","rating":8},{"n":"Continuità della tradizione","d":"Custodire il sapere artigianale è un atto culturale.","rating":8},{"n":"Innovazione del metodo","d":"Tradizione e innovazione non si escludono.","rating":7}],"services":[{"n":"Produzione su misura","d":"Realizzazione di prodotti personalizzati.","rating":9},{"n":"Prototipazione","d":"Sviluppo rapido di prototipi per validare design.","rating":8},{"n":"Controllo qualità","d":"Verifica sistematica degli standard in ogni fase.","rating":9},{"n":"Manutenzione e riparazione","d":"Servizio post-vendita che prolunga la vita del prodotto.","rating":7}],"roles":[{"n":"Maestro artigiano / Responsabile produzione","d":"Presidia la qualità del processo.","rating":9},{"n":"Progettista / Designer di prodotto","d":"Traduce le esigenze in specifiche costruttive.","rating":8},{"n":"Tecnico di qualità","d":"Monitora standard e non conformità.","rating":9}]},{"id":"HR-01","icon":"👥","name":"HR & People Management","desc":"Attrarre, sviluppare e trattenere talenti.","values":[{"n":"Le persone prima","d":"Ogni decisione organizzativa considera l'impatto sulle persone.","rating":9},{"n":"Ascolto attivo","d":"Capire davvero cosa vive chi lavora.","rating":9},{"n":"Sviluppo continuo","d":"Ogni persona ha un potenziale da coltivare.","rating":8},{"n":"Equità e meritocrazia","d":"Le opportunità si distribuiscono con criteri chiari.","rating":8},{"n":"Cultura come strategia","d":"La cultura aziendale è il motore della performance.","rating":8}],"services":[{"n":"Talent acquisition","d":"Ricerca, selezione e onboarding delle persone giuste.","rating":8},{"n":"Learning & Development","d":"Progettazione e gestione dei percorsi di crescita.","rating":8},{"n":"Performance management","d":"Sistemi di valutazione, feedback e riconoscimento.","rating":8},{"n":"Employee experience","d":"Progettazione dell'esperienza lavorativa.","rating":8}],"roles":[{"n":"HR Director / CHRO","d":"Definisce la strategia people.","rating":9},{"n":"Talent Manager","d":"Gestisce acquisizione, sviluppo e retention dei talenti.","rating":8},{"n":"HR Business Partner","d":"Affianca i manager come consulente interno.","rating":8}]}];
    var _selectedModelId = null;
    var _selectedTipoBId = null;

    /* ── Inizializza selector Tipo A ── */
    function initStarterPacks() {
        var grid = document.getElementById('tipo-a-grid');
        if (!grid) return;
        // Card "Costruisci da zero" — prima, in evidenza
        var zeroCard = '<div class="card-zero" onclick="skipModelAndGoStep2()">' +
            '<div class="card-zero-icon">✦</div>' +
            '<div class="card-zero-name">Crea</div>' +
            '<div class="card-zero-desc">Parti da una pagina bianca e definisci i tuoi VSR.</div>' +
            '</div>';
        function cardHtml(p) {
            return '<div class="starter-card" id="card-' + p.id + '" onclick="selectModelA(\'' + p.id + '\')">' +
                '<div class="starter-card-icon">' + p.icon + '</div>' +
                '<div class="starter-card-name">' + p.name + '</div>' +
                '<div class="starter-card-desc">' + p.desc + '</div>' +
                '</div>';
        }
        var foodEntry = '<div class="starter-card is-sector" onclick="openSector(\'food\')">' +
            '<div class="starter-card-icon">\uD83E\uDD5B\uD83C\uDF3E</div>' +
            '<div class="starter-card-name">Food &amp; Agri</div>' +
            '<div class="starter-card-desc">Chi produce, trasforma e vende cibo.</div>' +
            '<span class="sector-hint">Scegli il comparto \u2192</span>' +
            '</div>';
        grid.innerHTML = zeroCard +
            PACKS_A.filter(function(p) { return !p.group; }).map(cardHtml).join('') +
            foodEntry;
        window._starterCardHtml = cardHtml;
        window._starterZeroCard = zeroCard;
        window._starterFoodEntry = foodEntry;

        /* Tipo B chips */
        var chips = document.getElementById('tipo-b-chips');
        if (chips) {
            chips.innerHTML = PACKS_B.map(function(p) {
                return '<button class="tipo-b-chip" id="chip-' + p.id + '" onclick="selectTipoB(\'' + p.id + '\')">' +
                    p.icon + ' ' + p.name + '</button>';
            }).join('');
        }
    }

    var _modalIndex = 0;

    /* ── Settori: secondo livello dentro la stessa griglia ── */
    function openSector(group) {
        var grid = document.getElementById('tipo-a-grid');
        if (!grid) return;
        grid.innerHTML = '<button type="button" class="starter-back" onclick="closeSector()">\u2190 Tutti i modelli</button>' +
            PACKS_A.filter(function(p) { return p.group === group; }).map(window._starterCardHtml).join('');
    }

    function closeSector() {
        var grid = document.getElementById('tipo-a-grid');
        if (!grid) return;
        grid.innerHTML = window._starterZeroCard +
            PACKS_A.filter(function(p) { return !p.group; }).map(window._starterCardHtml).join('') +
            window._starterFoodEntry;
    }

    function openModelModal(idx) {
        _modalIndex = idx;
        var packs = PACKS_A;
        var p = packs[idx];
        _selectedModelId = p.id;
        document.getElementById('modal-icon').textContent = p.icon || '✦';
        document.getElementById('modal-name').textContent = p.name;
        document.getElementById('modal-desc').textContent = p.desc || '';
        document.getElementById('modal-counter').textContent = (idx + 1) + ' / ' + packs.length;
        document.getElementById('modal-prev').disabled = idx === 0;
        document.getElementById('modal-next').disabled = idx === packs.length - 1;
        function chips(items, cls) {
            return (items || []).map(function(x) {
                return '<span class="modal-chip ' + cls + '">' + (x.n || x) + '</span>';
            }).join('');
        }
        document.getElementById('modal-values').innerHTML   = chips(p.values,   'val');
        document.getElementById('modal-services').innerHTML = chips(p.services,  'srv');
        document.getElementById('modal-roles').innerHTML    = chips(p.roles,     'rol');
        document.getElementById('model-modal-overlay').classList.add('open');
    }

    function closeModelModal(e) {
        if (e && e.target !== document.getElementById('model-modal-overlay')) return;
        document.getElementById('model-modal-overlay').classList.remove('open');
    }

    function navigateModal(dir) {
        var newIdx = _modalIndex + dir;
        if (newIdx >= 0 && newIdx < PACKS_A.length) openModelModal(newIdx);
    }

    function selectModelA(id) {
        _selectedModelId = id;
        document.querySelectorAll('.starter-card').forEach(function(c2) { c2.classList.remove('selected'); });
        var card = document.getElementById('card-' + id);
        if (card) card.classList.add('selected');
        /* Mostra anteprima */
        var pack = PACKS_A.find(function(p) { return p.id === id; });
        if (!pack) return;
        // Trova indice del pack selezionato e apri modal
        var _midx = PACKS_A.findIndex(function(p) { return p.id === id; });
        if (_midx >= 0) { openModelModal(_midx); return; }
        var prev = document.getElementById('model-preview');
        var items = document.getElementById('preview-items');
        if (prev && items) {
            prev.classList.add('open');
            items.innerHTML =
                pack.values.slice(0,3).map(function(v) { return '<div class="preview-item"><span class="preview-dot" style="background:#8FC55B"></span>' + v.n + '</div>'; }).join('') +
                pack.services.slice(0,2).map(function(v) { return '<div class="preview-item"><span class="preview-dot" style="background:#E6CF42"></span>' + v.n + '</div>'; }).join('') +
                pack.roles.slice(0,2).map(function(v) { return '<div class="preview-item"><span class="preview-dot" style="background:#B54D8D"></span>' + v.n + '</div>'; }).join('') +
                '<div style="font-size:10px;color:#aaa;margin-top:6px">+ altri VSR inclusi nel pacchetto</div>';
        }
        var btn = document.getElementById('btn-use-model');
        if (btn) btn.style.display = 'inline-block';
    }

    // ── LOGIN GATE: blocca l'avanzamento appena scelto il modello, senza mai lasciare la pagina ──
    var _pendingAfterLogin = null;

    async function requireLoginThen(callback) {
        const { data: { user } } = await db.auth.getUser();
        if (user) { callback(); return; }
        _pendingAfterLogin = callback;
        document.getElementById('login-gate-overlay').style.display = 'flex';
    }

    async function loginGateSubmit() {
        const email = document.getElementById('lg-email').value.trim();
        const password = document.getElementById('lg-password').value;
        const errEl = document.getElementById('lg-error');
        errEl.textContent = '';
        if (!email || !password) { errEl.textContent = 'Inserisci email e password.'; return; }
        const { error } = await db.auth.signInWithPassword({ email, password });
        if (error) { errEl.textContent = error.message; return; }
        document.getElementById('login-gate-overlay').style.display = 'none';
        if (_pendingAfterLogin) { _pendingAfterLogin(); _pendingAfterLogin = null; }
    }

    function loginGateSignup() {
        const email = document.getElementById('lg-email').value.trim();
        const password = document.getElementById('lg-password').value;
        const errEl = document.getElementById('lg-error');
        if (!email || !password) { errEl.textContent = 'Inserisci email e password per registrarti.'; return; }
        db.auth.signUp({ email, password, options: { data: { locale: window.TRSP_LANG === 'en' ? 'en' : 'it' } } }).then(function(r) {
            if (r.error) { errEl.textContent = r.error.message; return; }
            errEl.style.color = '#5a8a30';
            errEl.textContent = 'Account creato! Controlla la tua email per confermare, poi accedi qui sopra.';
        });
    }

    function loginGateGoogle() {
        // Salva il lavoro corrente prima del redirect OAuth (che lascia comunque la pagina)
        try {
            localStorage.setItem('trsp_draft_backup', JSON.stringify({
                teamData: teamData, dataStore: dataStore, savedAt: new Date().toISOString()
            }));
            localStorage.setItem('trsp_oauth_return', 'design.html');
        } catch(e) {}
        db.auth.signInWithOAuth({ provider: 'google', options: { redirectTo: window.location.origin + '/design.html' } });
    }

    function useSelectedModel() {
        requireLoginThen(function() {
            var _mm=document.getElementById('model-modal-overlay'); if(_mm) _mm.classList.remove('open');
            document.getElementById('model-modal-overlay').classList.remove('open');
            if (!_selectedModelId) return;
            var pack = PACKS_A.find(function(p) { return p.id === _selectedModelId; });
            if (!pack) return;
            // Check piano: i modelli richiedono Pro
            db.auth.getUser().then(function(r) {
                var uid = r.data && r.data.user ? r.data.user.id : null;
                if (!uid) return;
                db.from('profiles').select('plan,trial_ends_at,is_active').eq('id', uid).single().then(function(res) {
                    var p = res.data || {};
                    var isPro = p.plan && p.plan !== 'free';
                    var trialActive = p.trial_ends_at && new Date(p.trial_ends_at) > new Date();
                    if (isPro || trialActive) {
                        _applyPack(pack);
                    } else {
                        _showTrialModal(pack);
                    }
                });
            });
        });
    }

    function _applyPack(pack) {
        var normPack = {
            name: pack.name,
            values:   pack.values.map(function(v)   { return { n: _tr(v.n), d: _tr(v.d), rating: 8 }; }),
            services: pack.services.map(function(v) { return { n: _tr(v.n), d: _tr(v.d), rating: 8 }; }),
            roles:    pack.roles.map(function(v)    { return { n: _tr(v.n), d: _tr(v.d), rating: 7 }; })
        };
        startGuidedSequence(normPack);
    }

    function _showTrialModal(pack) {
        document.getElementById('trial-gate-overlay').style.display = 'flex';
        document.getElementById('trial-gate-overlay').setAttribute('data-pack-id', pack.id);
    }

    async function activateTrialAndProceed() {
        var btn = document.getElementById('btn-activate-trial');
        btn.disabled = true; btn.innerText = 'Attivazione...';
        var res = await db.rpc('activate_trial');
        if (res.error) {
            alert('Errore attivazione trial: ' + res.error.message);
            btn.disabled = false; btn.innerText = 'Attiva 30 giorni gratis';
            return;
        }
        document.getElementById('trial-gate-overlay').style.display = 'none';
        var packId = document.getElementById('trial-gate-overlay').getAttribute('data-pack-id');
        var pack = PACKS_A.find(function(p) { return p.id === packId; });
        if (pack) _applyPack(pack);
    }

    function closeTrialModal() {
        document.getElementById('trial-gate-overlay').style.display = 'none';
    }

    function skipModelAndGoStep2() {
        requireLoginThen(function() { goToDNA(); });
    }

    function goToDNA() {
        var _mm=document.getElementById('model-modal-overlay'); if(_mm) _mm.classList.remove('open');
        document.getElementById('model-modal-overlay').classList.remove('open');
        document.getElementById('step1b').classList.remove('active');
        // Nascondi guided
        document.getElementById('step-guided').classList.remove('active');
        document.getElementById('step-guided').style.display = 'none';
        // Rimostra blob
        document.querySelectorAll('.blob-wrapper, #dna-filaments').forEach(function(el) {
            el.style.display = '';
        });
        document.getElementById('step2').style.display = '';
        document.getElementById('step2').classList.add('active');
        document.getElementById('main-space').classList.add('step-2-active');
        document.getElementById('dna-filaments').classList.add('dna-mode');
        document.getElementById('live-header').classList.add('visible');
        setProgress(2);
        updateUI();
        updateItemsCount();
        /* Mostra Tipo B se ci sono già items */
        checkShowTipoB();
        if (typeof updateGuidedResumeBar === 'function') updateGuidedResumeBar();
    }

    function checkShowTipoB() {
        var total = dataStore.VALUES.length + dataStore.SERVICES.length + dataStore.ROLES.length;
        var bar = document.getElementById('tipo-b-bar');
        if (bar) bar.style.display = total > 0 ? 'block' : 'none';
    }

    function selectTipoB(id) {
        _selectedTipoBId = id;
        document.querySelectorAll('.tipo-b-chip').forEach(function(ch) { ch.classList.remove('selected'); });
        var chip = document.getElementById('chip-' + id);
        if (chip) chip.classList.add('selected');
        var pack = PACKS_B.find(function(p) { return p.id === id; });
        if (!pack) return;
        var prev = document.getElementById('tipo-b-preview');
        var items = document.getElementById('tipo-b-preview-items');
        if (prev && items) {
            prev.classList.add('open');
            items.innerHTML =
                pack.values.map(function(v) { return '<div class="preview-item"><span class="preview-dot" style="background:#8FC55B"></span>' + v.n + '</div>'; }).join('') +
                pack.services.map(function(v) { return '<div class="preview-item"><span class="preview-dot" style="background:#E6CF42"></span>' + v.n + '</div>'; }).join('') +
                pack.roles.map(function(v) { return '<div class="preview-item"><span class="preview-dot" style="background:#B54D8D"></span>' + v.n + '</div>'; }).join('');
        }
    }

    function applyTipoBPack() {
        if (!_selectedTipoBId) return;
        var pack = PACKS_B.find(function(p) { return p.id === _selectedTipoBId; });
        if (!pack) return;
        pack.values.forEach(function(v) {
            var vn = _tr(v.n);
            if (!dataStore.VALUES.find(function(x) { return x.name.toLowerCase()===vn.toLowerCase(); }))
                dataStore.VALUES.push({ name: vn, desc: _tr(v.d)||'', rating: 8, assignedTo: [] });
        });
        pack.services.forEach(function(v) {
            var vn = _tr(v.n);
            if (!dataStore.SERVICES.find(function(x) { return x.name.toLowerCase()===vn.toLowerCase(); }))
                dataStore.SERVICES.push({ name: vn, desc: _tr(v.d)||'', rating: 8, assignedTo: [] });
        });
        pack.roles.forEach(function(v) {
            var vn = _tr(v.n);
            if (!dataStore.ROLES.find(function(x) { return x.name.toLowerCase()===vn.toLowerCase(); }))
                dataStore.ROLES.push({ name: vn, desc: _tr(v.d)||'', rating: 8, assignedTo: [] });
        });
        updateItemsCount();
        var prev = document.getElementById('tipo-b-preview');
        if (prev) prev.classList.remove('open');
        document.querySelectorAll('.tipo-b-chip').forEach(function(ch) { ch.classList.remove('selected'); });
        _selectedTipoBId = null;
        alert('VSR aggiunti! Vai a Step 3 per rivederli e aggiungere i rating.');
    }


    /* ════════════════════════════════════════════════════
       SEQUENZA GUIDATA — flusso VSR uno per uno
       ════════════════════════════════════════════════════ */
    var _guidedCategories = []; // [{label, icon, key, items, minRating}]
    var _guidedCatIndex   = 0;
    var _guidedItemIndex  = 0;
    var _guidedResults    = { VALUES:[], SERVICES:[], ROLES:[] };
    var _guidedPackName   = '';
    var _guidedDone       = {}; // v11: sezioni della sequenza gia' percorse { VALUES:true, ... }

    // Indice della sezione catKey se e' ancora da percorrere nella sequenza, altrimenti -1
    function _guidedPendingIndexFor(catKey) {
        for (var i = 0; i < _guidedCategories.length; i++) {
            var c = _guidedCategories[i];
            if (c.key === catKey) return (!_guidedDone[c.key] && c.items && c.items.length) ? i : -1;
        }
        return -1;
    }
    function _nextPendingGuided(from) {
        for (var i = from; i < _guidedCategories.length; i++) {
            var c = _guidedCategories[i];
            if (!_guidedDone[c.key] && c.items && c.items.length) return i;
        }
        return -1;
    }
    function _guidedItemAlreadyIn(cat, item) {
        var have = (dataStore[cat.storeKey] || []).concat(_guidedResults[cat.storeKey] || []);
        return have.some(function(x){ return _nearName(x.name, _tr(item.n)) || _nearName(x.name, item.n); });
    }
    // Rientra nella sequenza alla sezione i
    function enterGuidedAt(i) {
        commitGuidedResults();
        _guidedCatIndex = i;
        _guidedItemIndex = 0;
        var rb = document.getElementById('guided-resume-bar'); if (rb) rb.style.display = 'none';
        document.getElementById('step2').classList.remove('active');
        document.getElementById('step2').style.display = 'none';
        document.querySelectorAll('.blob-wrapper, #dna-filaments').forEach(function(el) { el.style.display = 'none'; });
        var sg = document.getElementById('step-guided');
        sg.classList.add('active'); sg.style.display = 'block';
        window.scrollTo(0, 0);
        renderGuidedItem();
    }
    // Barra "sequenza in corso": dice cosa manca e che ci si rientra da soli
    function updateGuidedResumeBar() {
        var rb = document.getElementById('guided-resume-bar');
        var rm = document.getElementById('guided-resume-msg');
        if (!rb) return;
        var pending = _guidedCategories.filter(function(c){ return !_guidedDone[c.key] && c.items && c.items.length; });
        if (!pending.length) { rb.style.display = 'none'; return; }
        var names = pending.map(function(c){ return _tr(c.label.toLowerCase()); });
        if (rm) rm.textContent = _tr('Sequenza') + (_guidedPackName ? ' \u201c' + _guidedPackName + '\u201d' : '') + ' ' + _tr('in corso: mancano ancora') + ' ' + names.join(' ' + _tr('e') + ' ') + '. ' + _tr('Quando passi a quella sezione, ripartiamo da l\u00ec.');
        rb.style.display = 'block';
    }

    var CAT_CONFIG_GUIDED = {
        VALUES:   { label:'VALORI',   icon:'💡', key:'VALUES',   storeKey:'VALUES',   color:'#8FC55B', minDefault:7 },
        SERVICES: { label:'SERVIZI',  icon:'⚙️',  key:'SERVICES', storeKey:'SERVICES', color:'#E6CF42', minDefault:7 },
        ROLES:    { label:'RUOLI', icon:'👤', key:'ROLES',    storeKey:'ROLES',    color:'#B54D8D', minDefault:6 }
    };

    function startGuidedSequence(pack) {
        _guidedPackName  = pack.name;
        _guidedResults   = { VALUES:[], SERVICES:[], ROLES:[] };
        _guidedCatIndex  = 0;
        _guidedItemIndex = 0;
        _guidedDone      = {};

        _guidedCategories = [
            { ...CAT_CONFIG_GUIDED.VALUES,   items: pack.values   || [] },
            { ...CAT_CONFIG_GUIDED.SERVICES, items: pack.services || [] },
            { ...CAT_CONFIG_GUIDED.ROLES,    items: pack.roles    || [] }
        ];

        // Nascondi step1b, mostra guided
        document.getElementById('step1b').classList.remove('active');
        document.getElementById('step-guided').classList.add('active');
        document.getElementById('step2').classList.remove('active');
        document.getElementById('step2').style.display = 'none';
        document.querySelectorAll('.blob-wrapper, #dna-filaments').forEach(function(el) {
            el.style.display = 'none';
        });
        window.scrollTo(0, 0);

        renderGuidedItem();
    }

    function renderGuidedItem() {
        var cat  = _guidedCategories[_guidedCatIndex];
        if (!cat) {
            // Categoria non valida: fine sequenza in sicurezza
            commitGuidedResults();
            goToDNA();
            return;
        }
        if (!cat.items || cat.items.length === 0) {
            // Categoria vuota: salta direttamente alla successiva
            nextGuidedCategory();
            return;
        }
        // v11: salta le voci della sequenza gia' presenti nel DNA (anche aggiunte a mano)
        while (cat.items[_guidedItemIndex] && _guidedItemAlreadyIn(cat, cat.items[_guidedItemIndex])) _guidedItemIndex++;
        var item = cat.items[_guidedItemIndex];
        if (!item) {
            if (_guidedItemIndex > 0) { showCategoryTransition(); return; }
            // Indice fuori range: passa alla categoria successiva
            nextGuidedCategory();
            return;
        }
        var isService = cat.key === 'SERVICES';

        // Label categoria
        document.getElementById('guided-cat-label').innerText = cat.label;
        document.getElementById('guided-cat-label').style.color = cat.color;
        document.getElementById('guided-rating-num').style.color = cat.color;
        // Applica classe colore allo slider (verde/giallo/viola)
        var _gsClass = cat.key === 'VALUES' ? 'gs-green' : cat.key === 'SERVICES' ? 'gs-yellow' : 'gs-purple';
        var _gslider = document.getElementById('guided-slider');
        _gslider.classList.remove('gs-green','gs-yellow','gs-purple');
        _gslider.classList.add(_gsClass);

        // Progress dots
        var total = cat.items.length;
        var dots  = '';
        for (var i = 0; i < total; i++) {
            var cls = i < _guidedItemIndex ? 'done' : i === _guidedItemIndex ? 'current' : '';
            dots += '<div class="guided-prog-dot ' + cls + '"></div>';
        }
        document.getElementById('guided-progress').innerHTML = dots;

        // Nome: editable per servizi, statico per valori/ruoli
        var nameStatic = document.getElementById('guided-name-static');
        var nameInput  = document.getElementById('guided-name-input');
        if (isService) {
            nameStatic.style.display = 'none';
            nameInput.style.display  = 'block';
            nameInput.value = item.n;
        } else {
            nameStatic.style.display = 'block';
            nameInput.style.display  = 'none';
            nameStatic.innerText = item.n;
        }

        // Descrizione
        document.getElementById('guided-item-desc').innerText = item.d || '';

        // Rating (usa rating specifico o default categoria)
        var proposedRating = item.rating || cat.minDefault || 7;
        document.getElementById('guided-slider').value    = proposedRating;
        document.getElementById('guided-rating-num').innerText = proposedRating.toFixed ? proposedRating.toFixed(1) : proposedRating;
        document.getElementById('guided-slider').dataset.min   = cat.minDefault || 7;

        // Warning nascosto
        document.getElementById('guided-warning').classList.remove('show');

        // Vista item, nascondi transizione
        document.getElementById('guided-item-view').style.display       = 'block';
        document.getElementById('guided-cat-transition').style.display  = 'none';
    }

    function onGuidedSlider(val) {
        var num = parseFloat(val);
        document.getElementById('guided-rating-num').innerText = num.toFixed(1);
        var minRating = parseFloat(document.getElementById('guided-slider').dataset.min) || 7;
        var warn = document.getElementById('guided-warning');
        if (num < minRating) {
            warn.innerText = 'Il rating minimo consigliato per questo modello è ' + minRating.toFixed(1) + '. Puoi confermare il tuo voto o tornare al valore suggerito.';
            warn.classList.add('show');
        } else {
            warn.classList.remove('show');
        }
    }

    function confirmGuidedItem() {
        var cat    = _guidedCategories[_guidedCatIndex];
        if (!cat || !cat.items) { nextGuidedCategory(); return; }
        var item   = cat.items[_guidedItemIndex];
        if (!item) { nextGuidedCategory(); return; }
        var rating = parseFloat(document.getElementById('guided-slider').value);
        var isService = cat.key === 'SERVICES';
        var name = isService
            ? document.getElementById('guided-name-input').value.trim() || item.n
            : item.n;

        _guidedResults[cat.storeKey].push({ name: name, desc: item.d || '', rating: rating, assignedTo: [] });
        advanceGuided();
    }

    function skipGuidedItem() {
        advanceGuided();
    }

    function advanceGuided() {
        var cat = _guidedCategories[_guidedCatIndex];
        if (!cat || !cat.items) { nextGuidedCategory(); return; }
        _guidedItemIndex++;

        if (_guidedItemIndex < cat.items.length) {
            // Prossimo item nella stessa categoria
            renderGuidedItem();
        } else {
            // Fine categoria — mostra transizione
            showCategoryTransition();
        }
    }

    function showCategoryTransition() {
        var cat  = _guidedCategories[_guidedCatIndex];
        if (!cat || !cat.items) { nextGuidedCategory(); return; }
        _guidedDone[cat.key] = true;
        var _ni = _nextPendingGuided(_guidedCatIndex + 1);
        var next = _ni >= 0 ? _guidedCategories[_ni] : null;

        document.getElementById('guided-item-view').style.display      = 'none';
        document.getElementById('guided-cat-transition').style.display = 'block';

        var accepted = _guidedResults[cat.storeKey].length;
        var skipped  = cat.items.length - accepted;

        document.getElementById('guided-trans-icon').innerText  = cat.icon;
        document.getElementById('guided-trans-title').innerText = accepted + ' ' + cat.label.toLowerCase() + ' confermati' + (skipped > 0 ? ', ' + skipped + ' saltati' : '') + '.';

        if (next) {
            document.getElementById('guided-trans-sub').innerText =
                'Vuoi aggiungere altri ' + cat.label.toLowerCase() + ' personalizzati prima di passare ai ' + next.label.toLowerCase() + '?';
        } else {
            document.getElementById('guided-trans-sub').innerText =
                'Vuoi aggiungere altri ruoli personalizzati prima di finire?';
        }
    }

    function addMoreInCategory() {
        // Porta al DNA step con la categoria corrente attiva
        var cat = _guidedCategories[_guidedCatIndex];
        commitGuidedResults();
        goToDNA();
        // Imposta la categoria corretta
        var catKey = cat.storeKey;
        if (catKey === 'VALUES')   currentCategory = 'VALUES';
        if (catKey === 'SERVICES') currentCategory = 'SERVICES';
        if (catKey === 'ROLES')    currentCategory = 'ROLES';
        updateUI();
        updateItemsCount();
        // Assicura che il campo input sia visibile
        var vi = document.getElementById('view-input');
        if (vi) { vi.style.display = 'block'; vi.classList.remove('hidden-view'); }
        var inp = document.getElementById('main-item-input');
        if (inp) { inp.value = ''; inp.focus(); }
        // Segnala da dove venire per il "prossimo"
        window._guidedResumeCategory = catKey;
        _guidedDone[catKey] = true;
        updateGuidedResumeBar();
    }

    function resumeGuidedSequence() {
        document.getElementById('guided-resume-bar').style.display = 'none';
        var _ni = _nextPendingGuided(0);
        if (_ni >= 0) {
            currentCategory = _guidedCategories[_ni].key;
            enterGuidedAt(_ni);
        } else {
            commitGuidedResults();
            goToDNA();
            document.getElementById('main-space').classList.add('step-2-active');
            }
    }

    function nextGuidedCategory() {
        if (_guidedCategories[_guidedCatIndex]) _guidedDone[_guidedCategories[_guidedCatIndex].key] = true;
        var _ni = _nextPendingGuided(_guidedCatIndex + 1);
        _guidedCatIndex = _ni >= 0 ? _ni : _guidedCategories.length;
        _guidedItemIndex = 0;

        if (_guidedCatIndex < _guidedCategories.length) {
            renderGuidedItem();
        } else {
            // Fine di tutte le categorie: commit e vai a step2
            commitGuidedResults();
            document.getElementById('step-guided').classList.remove('active');
            document.getElementById('step-guided').style.display = 'none';
            goToDNA();
            document.getElementById('main-space').classList.add('step-2-active');
                updateUI();
            updateItemsCount();
        }
    }

    function commitGuidedResults() {
        // Mergia i risultati guidati nel dataStore
        ['VALUES','SERVICES','ROLES'].forEach(function(key) {
            (_guidedResults[key] || []).forEach(function(item) {
                if (!dataStore[key].find(function(x) { return x.name.toLowerCase() === item.name.toLowerCase(); })) {
                    dataStore[key].push({ name: item.name || item.n || 'Item', desc: item.desc || item.d || '', rating: item.rating || 7, assignedTo: item.assignedTo || [] });
                }
            });
        });
    }


</script>

    <script>
    // ── NAVBAR ────────────────────────────────────────────
    async function initNavbar() {
        try {
            const _db = window.db || supabase.createClient('https://otllbwtdbfubmeaewyze.supabase.co','sb_publishable_hgD8skYCfzIe0CiUu0hIKg_7kCc7nBZ');
            const { data: { user } } = await _db.auth.getUser();
            if (!user) return;
            const navbar = document.getElementById('trsp-navbar');
            if (navbar) navbar.classList.add('visible');
            const name = user.user_metadata?.full_name || user.email.split('@')[0];
            const initials = name.split(' ').map(w=>w[0]).join('').toUpperCase().slice(0,2);
            const avatarEl = document.getElementById('navbar-avatar');
            if (avatarEl) avatarEl.innerText = initials;
            const page = window.location.pathname.split('/').pop().replace('.html','');
            document.querySelectorAll('.navbar-link').forEach(l => {
                if (l.dataset.page === page) l.classList.add('active');
            });
        } catch(e) { console.log('navbar:', e); }
    }
    async function navSignOut() {
        const _db = window.db || supabase.createClient('https://otllbwtdbfubmeaewyze.supabase.co','sb_publishable_hgD8skYCfzIe0CiUu0hIKg_7kCc7nBZ');
        await _db.auth.signOut();
        window.location.href = 'index.html';
    }
    initNavbar();

    /* ─── ASSEGNAZIONE RUOLI/SERVIZI ───────────────────────────── */
    function doAssign() {
        const inp = document.getElementById('assign-input');
        const em  = inp.value.trim();
        if (!em) { inp.focus(); return; }
        if (!_pendingAssign.some(function(x){ return x.toLowerCase() === em.toLowerCase(); })) _pendingAssign.push(em);
        inp.value = '';
        refreshAssignList();
    }

    function refreshAssignList() {
        const el = document.getElementById('assign-list');
        if (!el) return;
        el.innerHTML = _pendingAssign.map(function(e, k) {
            return '<span style="display:inline-flex;align-items:center;gap:4px;background:#E8F4F8;color:#175F75;padding:4px 10px;border-radius:20px;font-size:10px;font-weight:600">' +
                escHtml(e) + '<button type="button" onclick="unAssign(' + k + ')" style="background:none;border:none;color:#aaa;cursor:pointer;font-size:12px;padding:0;margin-left:2px">x</button></span>';
        }).join('');
    }

    function unAssign(k) {
        _pendingAssign.splice(k, 1);
        refreshAssignList();
    }

    function renderTeamAssignments() {
        const wrap = document.getElementById('team-assignments-wrap');
        if (!wrap) return;
        const secs = [
            { key:'SERVICES', label:'Servizi',  color:'#E6CF42', type:'servizio' },
            { key:'ROLES',    label:'Ruoli', color:'#B54D8D', type:'mansione' }
        ];
        let html = '';
        secs.forEach(sec => {
            if (!dataStore[sec.key].length) return;
            html += `<div style="margin-bottom:20px">
                <div style="font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:${sec.color};margin-bottom:10px;padding-bottom:6px;border-bottom:2px solid ${sec.color}40">${sec.label}</div>`;
            dataStore[sec.key].forEach((item, i) => {
                const ass = item.assignedTo || [];
                html += `<div style="background:#fff;border-radius:12px;padding:14px 16px;margin-bottom:8px;border:1px solid #f0f0f0">
                    <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px">
                        <div><div style="font-size:13px;font-weight:700" translate="no">${item.name}</div>
                             <div style="font-size:10px;color:#aaa">${sec.type === 'mansione' ? 'ruolo' : sec.type} &middot; ${item.rating}/10</div></div>
                        <div style="display:flex;flex-wrap:wrap;gap:6px;align-items:center">
                            ${ass.map(e=>`<span style="background:#E8F4F8;color:#175F75;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:600">${e}</span>`).join('')}
                            ${!ass.length ? '<span style="font-size:10px;color:#ccc;font-style:italic">Non assegnato</span>' : ''}
                            <button onclick="openIA('${sec.key}',${i})" style="background:#f0f4ff;border:none;color:#175F75;padding:4px 10px;border-radius:8px;font-size:10px;font-weight:700;cursor:pointer;font-family:Montserrat">+ Assegna</button>
                        </div>
                    </div>
                    <div id="ia-${sec.key}-${i}" style="display:none;margin-top:10px">
                        <div style="display:flex;gap:8px">
                            <input type="email" id="ii-${sec.key}-${i}" placeholder="email@partner.com" style="flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:8px;font-family:Montserrat;font-size:12px">
                            <button onclick="saveIA('${sec.key}',${i})" style="background:#175F75;color:#fff;border:none;border-radius:8px;padding:8px 14px;font-family:Montserrat;font-size:10px;font-weight:700;cursor:pointer">OK</button>
                        </div>
                    </div>
                </div>`;
            });
            html += '</div>';
        });
        wrap.innerHTML = html || '<p style="color:#ccc;font-size:13px">Nessun servizio o ruolo nel DNA.</p>';
    }

    function openIA(cat, idx) {
        const el = document.getElementById(`ia-${cat}-${idx}`);
        if (el) el.style.display = el.style.display === 'none' ? 'block' : 'none';
    }

    function saveIA(cat, idx) {
        const inp = document.getElementById(`ii-${cat}-${idx}`);
        const em  = inp?.value.trim();
        if (!em || !em.includes('@')) return;
        if (!dataStore[cat][idx].assignedTo) dataStore[cat][idx].assignedTo = [];
        if (!dataStore[cat][idx].assignedTo.includes(em)) dataStore[cat][idx].assignedTo.push(em);
        inp.value = '';
        document.getElementById(`ia-${cat}-${idx}`).style.display = 'none';
        renderTeamAssignments();
    }

    function collectAllInvites() {
        const inv = {};
        ['SERVICES','ROLES'].forEach(cat => {
            const type = cat === 'SERVICES' ? 'servizio' : 'mansione';
            dataStore[cat].forEach(item => {
                (item.assignedTo || []).forEach(em => {
                    if (!_isEmail(em)) return; // solo nome: si invita piu' avanti dalla dashboard
                    if (!inv[em]) inv[em] = [];
                    inv[em].push({ role: item.name, type });
                });
            });
        });
        partners.forEach(p => {
            const em = typeof p === 'string' ? p : p.email;
            if (!inv[em]) inv[em] = [];
        });
        return inv;
    }

    function partnerNameFor(email) {
        for (var i = 0; i < partners.length; i++) {
            var p = partners[i];
            if (typeof p !== 'string' && p.email === email && p.name) return p.name;
        }
        return _provNameByEmail[String(email || '').toLowerCase()] || null;
    }

    /* ─── SCHERMATA POST-FONDAZIONE ───────────────────────────────── */
    async function addItemsToExistingTeam() {
        const btn = document.querySelector('.btn-found');
        if (btn) { btn.innerText = 'Salvataggio...'; btn.disabled = true; }
        try {
            const { data: { user } } = await db.auth.getUser();
            if (!user) { window.location.href = 'login.html'; return; }

            // Carica items esistenti ATTIVI per evitare duplicati (gli archiviati si possono riaggiungere)
            const { data: existing } = await db.from('dna_items').select('name,item_type').eq('team_id', window._editTeamId).eq('active', true);
            const existingNames = new Set((existing||[]).map(i => i.name.trim().toLowerCase()));

            const itemTypeMap = { VALUES:'value', SERVICES:'service', ROLES:'role' };
            const newItems = [];
            let order = (existing||[]).length;

            for (const [cat, items] of Object.entries(dataStore)) {
                for (const item of items) {
                    if (!existingNames.has(item.name.trim().toLowerCase())) {
                        newItems.push({
                            team_id:        window._editTeamId,
                            item_type:      itemTypeMap[cat],
                            name:           item.name,
                            description:    item.desc,
                            founder_rating: item.rating,
                            avg_rating:     item.rating,
                            proposed_by:    user.id,
                            display_order:  order++
                        });
                    }
                }
            }

            if (newItems.length) await db.from('dna_items').insert(newItems);

            // Torna al dashboard
            window.location.href = `dashboard.html?team=${window._editTeamId}`;
        } catch(e) {
            console.error(e);
            alert('Errore: ' + e.message);
            if (btn) { btn.innerText = '✦ SALVA MODIFICHE'; btn.disabled = false; }
        }
    }


    async function sendInviteEmail(to, inviterName, teamName, joinUrl) {
        try {
            // send-invite ha verify_jwt=true: serve il token di sessione, non la publishable key.
            // functions.invoke() allega da solo Authorization + apikey corretti.
            const inv = await db.functions.invoke('send-invite', {
                body: { to, inviterName, teamName, joinUrl }
            });
            if (inv.error) throw new Error(inv.error.message || 'invio non riuscito');
        } catch(e) { console.warn('sendInviteEmail error:', e); }
    }

    function showInviteLinks(team, links, base) {
        var s5 = document.getElementById('step5');
        if (!s5) return;
        var pub = base + 'public.html?team=' + team.id;
        var hub = window.location.origin + '/hub.html';

        var lHtml = '';
        if (!links.length) {
            lHtml = '<p style="color:#aaa;font-size:13px;font-style:italic">Nessun partner da invitare.</p>';
        } else {
            links.forEach(function(l) {
                var wa = encodeURIComponent((window.t ? window.t('Ciao! Ti invito in') : 'Ciao! Ti invito in') + ' ' + team.name + '.\n' + (window.t ? window.t('Ruolo:') : 'Ruolo:') + ' ' + l.roleLabel + '\n\n' + l.url + '\n\nDo What You Say');
                lHtml += '<div class="invite-link-row" style="background:#fff;border-radius:14px;padding:16px 20px;margin-bottom:10px;border:1px solid #e8e8e8">' +
                    '<div style="display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap">' +
                    '<div><div style="font-size:13px;font-weight:700">' + l.email + '</div>' +
                    '<div style="font-size:10px;color:#aaa" translate="no">' + l.roleLabel + '</div></div>' +
                    '<div style="display:flex;gap:8px;flex-wrap:wrap">' +
                    '<button class="cpL-btn" data-url="' + l.url.replace(/"/g,'&quot;') + '" style="background:#E8F4F8;color:#175F75;border:none;padding:7px 14px;border-radius:8px;font-family:Montserrat;font-size:10px;font-weight:700;cursor:pointer">Copia link</button>' +
                    '<a href="https://wa.me/?text=' + wa + '" target="_blank" style="background:#25D366;color:#fff;padding:7px 14px;border-radius:8px;font-family:Montserrat;font-size:10px;font-weight:700;text-decoration:none;display:inline-block">WhatsApp &rarr;</a>' +
                    '</div></div></div>';
            });
        }

        s5.innerHTML = '<div class="container">' +
            '<div class="panel-header"><div class="panel-title" style="color:#8FC55B">&#x2756; Team Fondato!</div>' +
            '<div class="panel-headline"><strong translate="no">' + team.name + '</strong> &egrave; attivo</div></div>' +
            '<p style="font-size:13px;font-weight:300;color:#888;margin-bottom:24px;line-height:1.7">' + (links.length ? 'Inviti pronti. Invia via WhatsApp o copia il link.' : 'Team pronto. Potrai invitare i partner quando vuoi dal tuo Hub.') + '</p>' +
            lHtml +
            '<div style="margin-top:24px;padding:16px;background:#f8fafb;border-radius:12px;border:1px solid #e8e8e8">' +
            '<div style="font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#aaa;margin-bottom:8px">Pagina pubblica</div>' +
            '<div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">' +
            '<a href="' + pub + '" target="_blank" style="font-size:12px;color:#175F75;font-weight:600;text-decoration:none;flex:1;word-break:break-all">' + pub + '</a>' +
            '<button class="cpL-btn" data-url="' + pub.replace(/"/g,'&quot;') + '" style="background:#E8F4F8;color:#175F75;border:none;padding:6px 12px;border-radius:8px;font-family:Montserrat;font-size:10px;font-weight:700;cursor:pointer">Copia</button>' +
            '</div></div>' +
            '<div class="btn-row" style="margin-top:24px">' +
            '<a href="' + pub + '" class="btn-secondary" style="text-decoration:none;text-align:center">Vedi pagina &rarr;</a>' +
            '<a href="' + hub + '" class="btn-primary blue" style="text-decoration:none;text-align:center">Vai all&rsquo;Hub &rarr;</a>' +
            '</div></div>';

        s5.addEventListener('click', function(e) {
            var btn = e.target.closest('.cpL-btn');
            if (!btn) return;
            navigator.clipboard.writeText(btn.dataset.url).then(function() {
                var o = btn.textContent; btn.textContent = 'Copiato!';
                setTimeout(function() { btn.textContent = o; }, 2000);
            });
        }, { once: true });
    }

    function cpL(url, btn) {
        navigator.clipboard.writeText(url).then(function() {
            var o = btn.innerText; btn.innerText = 'Copiato!';
            setTimeout(function() { btn.innerText = o; }, 2000);
        });
    }
    </script>
</body>
</html>