mantenimento-app 2.1.7 → 2.1.9

package/app.js

@@ -26,7 +26,9 @@ const defaultExpenseItems = [
     let selectedScenarioIdx = -1;
     let scenarioTransitionTimer = null;
     const SCENARIO_LAB_MAX = 3;
-    const SCENARIO_LABELS = ["A", "B", "C"];
+    const SCENARIO_LAB_MAX_FREE = 3;
+    const SCENARIO_LAB_MAX_DONOR = 6;
+    const SCENARIO_LABELS = ["A", "B", "C", "D", "E", "F"];
     const EXPENSE_DETAIL_MAX_CHARS = 560;
     const EXPENSE_DETAIL_MAX_LINES = 10;
 
@@ -134,6 +136,11 @@ const defaultExpenseItems = [
         authUserFallback: "utente",
         authLogoutDone: "Logout eseguito.",
         authLoginRequired: "Effettua prima il login.",
+        gateNeedsAuth: "Funzionalità riservata agli utenti registrati. Accedi o registrati per continuare.",
+        gateNeedsAuthTitle: "Accesso richiesto",
+        gateNeedsDonor: "Funzionalità Premium riservata ai donatori. Supporta il progetto per sbloccarla.",
+        gateNeedsDonorTitle: "Funzionalità Premium",
+        gateDonorBadge: "Premium",
         authSaveFailed: "Salvataggio profilo fallito: {message}",
         authCloudSaved: "Profilo cloud salvato. Versioni storiche: {count}.",
         authLoadFailed: "Caricamento profilo fallito: {message}",
@@ -455,6 +462,11 @@ const defaultExpenseItems = [
         authUserFallback: "user",
         authLogoutDone: "Logout completed.",
         authLoginRequired: "Please login first.",
+        gateNeedsAuth: "This feature is for registered users only. Log in or sign up to continue.",
+        gateNeedsAuthTitle: "Login required",
+        gateNeedsDonor: "Premium feature for donors. Support the project to unlock it.",
+        gateNeedsDonorTitle: "Premium feature",
+        gateDonorBadge: "Premium",
         authSaveFailed: "Cloud profile save failed: {message}",
         authCloudSaved: "Cloud profile saved. History versions: {count}.",
         authLoadFailed: "Cloud profile load failed: {message}",
@@ -710,7 +722,8 @@ const defaultExpenseItems = [
     const authSession = {
       username: null,
       userId: null,
-      keyBits: null
+      keyBits: null,
+      isDonor: false
     };
     const authUiState = {
       mode: "login",
@@ -1642,6 +1655,7 @@ const defaultExpenseItems = [
       authSession.username = username;
       authSession.userId = user.id;
       authSession.keyBits = await deriveSessionKeyBits(password, user.id);
+      authSession.isDonor = localStorage.getItem(`m_donor_${user.id}`) === "1";
       updateAuthUi();
       return msg("authLoginAs", { username });
     }
@@ -1766,6 +1780,50 @@ const defaultExpenseItems = [
       el.textContent = message;
     }
 
+    function isLoggedIn() { return !!authSession.username; }
+    function isDonorUser() { return !!authSession.isDonor; }
+
+    function getScenarioMaxForUser() {
+      if (!isLoggedIn()) return 0;
+      return isDonorUser() ? SCENARIO_LAB_MAX_DONOR : SCENARIO_LAB_MAX_FREE;
+    }
+
+    function showAuthGateMessage(triggerEl) {
+      setAuthMenuOpen(true);
+      setAuthStatus(tr("gateNeedsAuth"), true);
+      if (triggerEl) {
+        triggerEl.classList.add("gate-flash");
+        setTimeout(() => triggerEl.classList.remove("gate-flash"), 700);
+      }
+    }
+
+    function showDonorGateMessage(triggerEl) {
+      setAuthMenuOpen(true);
+      setAuthStatus(tr("gateNeedsDonor"), true);
+      if (triggerEl) {
+        triggerEl.classList.add("gate-flash");
+        setTimeout(() => triggerEl.classList.remove("gate-flash"), 700);
+      }
+      const donateBanner = document.querySelector(".donate-banner");
+      if (donateBanner) setTimeout(() => donateBanner.scrollIntoView({ behavior: "smooth", block: "center" }), 200);
+    }
+
+    function applyFeatureGates() {
+      const logged = isLoggedIn();
+      const donor = isDonorUser();
+      const authGatedIds = ["btnPdf", "btnExportJson", "btnImportJson", "btnSaveScenario"];
+      authGatedIds.forEach((id) => {
+        const btn = document.getElementById(id);
+        if (!btn) return;
+        btn.classList.toggle("gate-locked", !logged);
+        btn.classList.toggle("gate-donor", logged && !donor && id === "btnSaveScenario" && false); // donor gate placeholder
+      });
+      const authMenuBtn = document.getElementById("btnAuthMenu");
+      if (authMenuBtn) {
+        authMenuBtn.classList.toggle("has-donor-badge", logged && donor);
+      }
+    }
+
     function updateAuthModeUi() {
       const isSignup = authUiState.mode === "signup";
       const loginModeBtn = document.getElementById("btnAuthModeLogin");
@@ -1809,7 +1867,8 @@ const defaultExpenseItems = [
       if (sessionActions) sessionActions.classList.toggle("is-hidden", !logged);
       if (toggleBtn) {
         toggleBtn.classList.toggle("logged", logged);
-        toggleBtn.querySelector("span").textContent = logged ? `${tr("authUserPrefix")}: ${authSession.username}` : tr("authLogin");
+        const badge = logged && authSession.isDonor ? ` ✦` : "";
+        toggleBtn.querySelector("span").textContent = logged ? `${tr("authUserPrefix")}: ${authSession.username}${badge}` : tr("authLogin");
       }
 
       if (logged) {
@@ -1833,6 +1892,7 @@ const defaultExpenseItems = [
         setAuthStatus(tr("authNotAuthenticated"), false);
       }
 
+      applyFeatureGates();
       void syncPresenceTrackState();
     }
 
@@ -2377,6 +2437,7 @@ const defaultExpenseItems = [
       authSession.username = null;
       authSession.userId = null;
       authSession.keyBits = null;
+      authSession.isDonor = false;
       cloudProfileSession.loaded = null;
       cloudProfileSession.history = [];
       updateAuthUi();
@@ -3930,7 +3991,7 @@ const defaultExpenseItems = [
     }
 
     function saveCurrentScenario() {
-      if (scenarioLab.length >= SCENARIO_LAB_MAX) {
+      if (scenarioLab.length >= getScenarioMaxForUser()) {
         alert(tr("scenarioLabMaxReached"));
         return;
       }
@@ -4376,33 +4437,54 @@ const defaultExpenseItems = [
         ${m.incomeMode === "cu" ? `<br /><strong>${tr("calcIncomeBaseNote")}</strong> ${tr("cuNetNoteText")}` : ""}
       `;
 
-      let mainHtml = `<span class="result-main-line">${escapeHtml(tr("calcNoTransferSuggested"))}</span>`;
+      let mainHtml;
       if (m.assegnoDa1a2 > 0.005) {
+        const perChild = m.figli > 1 ? `<div class="result-transfer-child">${eur(m.assegnoDa1a2 / m.figli)}&thinsp;${escapeHtml(currentLang === "en" ? "per child" : "per figlio")}</div>` : "";
         mainHtml = `
-          <span class="result-main-flow">${escapeHtml(c1n())} &rarr; ${escapeHtml(c2n())}</span>
-          <span class="result-main-amount">${eur(m.assegnoDa1a2)} ${escapeHtml(tr("pdfPerMonth"))}</span>
+          <div class="result-transfer-dir">
+            <span class="result-chip-name">${escapeHtml(c1n())}</span>
+            <span class="result-chip-arr">&rarr;</span>
+            <span class="result-chip-name">${escapeHtml(c2n())}</span>
+          </div>
+          <div class="result-transfer-value">${eur(m.assegnoDa1a2)}<span class="result-transfer-per">&thinsp;${escapeHtml(tr("pdfPerMonth"))}</span></div>
+          ${perChild}
         `;
       } else if (m.assegnoDa2a1 > 0.005) {
+        const perChild = m.figli > 1 ? `<div class="result-transfer-child">${eur(m.assegnoDa2a1 / m.figli)}&thinsp;${escapeHtml(currentLang === "en" ? "per child" : "per figlio")}</div>` : "";
         mainHtml = `
-          <span class="result-main-flow">${escapeHtml(c2n())} &rarr; ${escapeHtml(c1n())}</span>
-          <span class="result-main-amount">${eur(m.assegnoDa2a1)} ${escapeHtml(tr("pdfPerMonth"))}</span>
+          <div class="result-transfer-dir">
+            <span class="result-chip-name">${escapeHtml(c2n())}</span>
+            <span class="result-chip-arr">&rarr;</span>
+            <span class="result-chip-name">${escapeHtml(c1n())}</span>
+          </div>
+          <div class="result-transfer-value">${eur(m.assegnoDa2a1)}<span class="result-transfer-per">&thinsp;${escapeHtml(tr("pdfPerMonth"))}</span></div>
+          ${perChild}
         `;
       } else {
         const benefitRows = getCompensativeBenefitRows(m, c1n(), c2n());
+        let benefitCardsHtml = "";
         if (benefitRows.length) {
-          const benefitsHtml = benefitRows
-            .map((row) => `<li><span>${escapeHtml(row.label)}</span><strong>${eur(row.amount)}</strong></li>`)
+          const rawBenefs = Array.isArray(m.compensativeBenefits)
+            ? m.compensativeBenefits.filter((r) => r && Number(r.amount || 0) > 0.005)
+            : [];
+          const typeIcons = { family: "\uD83C\uDFDB", "primary-home-mortgage": "\uD83C\uDFE1" };
+          const cardsHtml = benefitRows
+            .map((row, i) => {
+              const icon = (rawBenefs[i] && typeIcons[rawBenefs[i].type]) || "\u2726";
+              return `<li class="spieg-benefit-card"><span class="spieg-benefit-icon">${icon}</span><span class="spieg-benefit-label">${escapeHtml(row.label)}</span><strong class="spieg-benefit-amount">${eur(row.amount)}</strong></li>`;
+            })
             .join("");
-          mainHtml = `
-            <span class="result-main-line">${escapeHtml(tr("calcNoTransferSuggested"))}</span>
+          const total = benefitRows.reduce((s, r) => s + r.amount, 0);
+          const totalLabel = currentLang === "en" ? "Total allocated benefits" : "Totale benefici allocati";
+          benefitCardsHtml = `
             <div class="result-benefits-box">
-              <span class="result-main-sub">${escapeHtml(tr("calcCompBenefitsLabel"))}</span>
-              <ul class="result-benefits-list">${benefitsHtml}</ul>
+              <div class="spieg-benefits-label">&#127873;&ensp;${escapeHtml(tr("calcCompBenefitsLabel"))}</div>
+              <ul class="spieg-benefits-cards">${cardsHtml}</ul>
+              <div class="spieg-benefits-total"><span>${escapeHtml(totalLabel)}</span><strong>${eur(total)}</strong></div>
             </div>
           `;
-        } else if (benefitsInline) {
-          mainHtml = `<span class="result-main-line">${escapeHtml(msg("calcNoTransferWithBenefits", { benefits: benefitsInline }))}</span>`;
         }
+        mainHtml = `<div class="spieg-no-transfer-badge">&#9878;&#65039;&ensp;${escapeHtml(tr("calcNoTransferSuggested"))}</div>${benefitCardsHtml}`;
       }
       resultMain.innerHTML = mainHtml;
 
@@ -5417,10 +5499,12 @@ ${scenarioLab.length ? `
     document.getElementById("btnReset").addEventListener("click", resetAll);
 
     document.getElementById("btnExportJson").addEventListener("click", async () => {
+      if (!isLoggedIn()) { showAuthGateMessage(document.getElementById("btnExportJson")); return; }
       await exportJson();
     });
 
     document.getElementById("btnImportJson").addEventListener("click", () => {
+      if (!isLoggedIn()) { showAuthGateMessage(document.getElementById("btnImportJson")); return; }
       document.getElementById("fileJson").click();
     });
 
@@ -5433,10 +5517,12 @@ ${scenarioLab.length ? `
     });
 
     document.getElementById("btnPdf").addEventListener("click", () => {
+      if (!isLoggedIn()) { showAuthGateMessage(document.getElementById("btnPdf")); return; }
       exportPdfDirect();
     });
 
     document.getElementById("btnSaveScenario").addEventListener("click", () => {
+      if (!isLoggedIn()) { showAuthGateMessage(document.getElementById("btnSaveScenario")); return; }
       saveCurrentScenario();
     });
 

package/frontend/public/app.js

@@ -26,7 +26,9 @@ const defaultExpenseItems = [
     let selectedScenarioIdx = -1;
     let scenarioTransitionTimer = null;
     const SCENARIO_LAB_MAX = 3;
-    const SCENARIO_LABELS = ["A", "B", "C"];
+    const SCENARIO_LAB_MAX_FREE = 3;
+    const SCENARIO_LAB_MAX_DONOR = 6;
+    const SCENARIO_LABELS = ["A", "B", "C", "D", "E", "F"];
     const EXPENSE_DETAIL_MAX_CHARS = 560;
     const EXPENSE_DETAIL_MAX_LINES = 10;
 
@@ -134,6 +136,11 @@ const defaultExpenseItems = [
         authUserFallback: "utente",
         authLogoutDone: "Logout eseguito.",
         authLoginRequired: "Effettua prima il login.",
+        gateNeedsAuth: "Funzionalità riservata agli utenti registrati. Accedi o registrati per continuare.",
+        gateNeedsAuthTitle: "Accesso richiesto",
+        gateNeedsDonor: "Funzionalità Premium riservata ai donatori. Supporta il progetto per sbloccarla.",
+        gateNeedsDonorTitle: "Funzionalità Premium",
+        gateDonorBadge: "Premium",
         authSaveFailed: "Salvataggio profilo fallito: {message}",
         authCloudSaved: "Profilo cloud salvato. Versioni storiche: {count}.",
         authLoadFailed: "Caricamento profilo fallito: {message}",
@@ -455,6 +462,11 @@ const defaultExpenseItems = [
         authUserFallback: "user",
         authLogoutDone: "Logout completed.",
         authLoginRequired: "Please login first.",
+        gateNeedsAuth: "This feature is for registered users only. Log in or sign up to continue.",
+        gateNeedsAuthTitle: "Login required",
+        gateNeedsDonor: "Premium feature for donors. Support the project to unlock it.",
+        gateNeedsDonorTitle: "Premium feature",
+        gateDonorBadge: "Premium",
         authSaveFailed: "Cloud profile save failed: {message}",
         authCloudSaved: "Cloud profile saved. History versions: {count}.",
         authLoadFailed: "Cloud profile load failed: {message}",
@@ -710,7 +722,8 @@ const defaultExpenseItems = [
     const authSession = {
       username: null,
       userId: null,
-      keyBits: null
+      keyBits: null,
+      isDonor: false
     };
     const authUiState = {
       mode: "login",
@@ -1642,6 +1655,7 @@ const defaultExpenseItems = [
       authSession.username = username;
       authSession.userId = user.id;
       authSession.keyBits = await deriveSessionKeyBits(password, user.id);
+      authSession.isDonor = localStorage.getItem(`m_donor_${user.id}`) === "1";
       updateAuthUi();
       return msg("authLoginAs", { username });
     }
@@ -1766,6 +1780,50 @@ const defaultExpenseItems = [
       el.textContent = message;
     }
 
+    function isLoggedIn() { return !!authSession.username; }
+    function isDonorUser() { return !!authSession.isDonor; }
+
+    function getScenarioMaxForUser() {
+      if (!isLoggedIn()) return 0;
+      return isDonorUser() ? SCENARIO_LAB_MAX_DONOR : SCENARIO_LAB_MAX_FREE;
+    }
+
+    function showAuthGateMessage(triggerEl) {
+      setAuthMenuOpen(true);
+      setAuthStatus(tr("gateNeedsAuth"), true);
+      if (triggerEl) {
+        triggerEl.classList.add("gate-flash");
+        setTimeout(() => triggerEl.classList.remove("gate-flash"), 700);
+      }
+    }
+
+    function showDonorGateMessage(triggerEl) {
+      setAuthMenuOpen(true);
+      setAuthStatus(tr("gateNeedsDonor"), true);
+      if (triggerEl) {
+        triggerEl.classList.add("gate-flash");
+        setTimeout(() => triggerEl.classList.remove("gate-flash"), 700);
+      }
+      const donateBanner = document.querySelector(".donate-banner");
+      if (donateBanner) setTimeout(() => donateBanner.scrollIntoView({ behavior: "smooth", block: "center" }), 200);
+    }
+
+    function applyFeatureGates() {
+      const logged = isLoggedIn();
+      const donor = isDonorUser();
+      const authGatedIds = ["btnPdf", "btnExportJson", "btnImportJson", "btnSaveScenario"];
+      authGatedIds.forEach((id) => {
+        const btn = document.getElementById(id);
+        if (!btn) return;
+        btn.classList.toggle("gate-locked", !logged);
+        btn.classList.toggle("gate-donor", logged && !donor && id === "btnSaveScenario" && false); // donor gate placeholder
+      });
+      const authMenuBtn = document.getElementById("btnAuthMenu");
+      if (authMenuBtn) {
+        authMenuBtn.classList.toggle("has-donor-badge", logged && donor);
+      }
+    }
+
     function updateAuthModeUi() {
       const isSignup = authUiState.mode === "signup";
       const loginModeBtn = document.getElementById("btnAuthModeLogin");
@@ -1809,7 +1867,8 @@ const defaultExpenseItems = [
       if (sessionActions) sessionActions.classList.toggle("is-hidden", !logged);
       if (toggleBtn) {
         toggleBtn.classList.toggle("logged", logged);
-        toggleBtn.querySelector("span").textContent = logged ? `${tr("authUserPrefix")}: ${authSession.username}` : tr("authLogin");
+        const badge = logged && authSession.isDonor ? ` ✦` : "";
+        toggleBtn.querySelector("span").textContent = logged ? `${tr("authUserPrefix")}: ${authSession.username}${badge}` : tr("authLogin");
       }
 
       if (logged) {
@@ -1833,6 +1892,7 @@ const defaultExpenseItems = [
         setAuthStatus(tr("authNotAuthenticated"), false);
       }
 
+      applyFeatureGates();
       void syncPresenceTrackState();
     }
 
@@ -2377,6 +2437,7 @@ const defaultExpenseItems = [
       authSession.username = null;
       authSession.userId = null;
       authSession.keyBits = null;
+      authSession.isDonor = false;
       cloudProfileSession.loaded = null;
       cloudProfileSession.history = [];
       updateAuthUi();
@@ -3930,7 +3991,7 @@ const defaultExpenseItems = [
     }
 
     function saveCurrentScenario() {
-      if (scenarioLab.length >= SCENARIO_LAB_MAX) {
+      if (scenarioLab.length >= getScenarioMaxForUser()) {
         alert(tr("scenarioLabMaxReached"));
         return;
       }
@@ -4376,33 +4437,54 @@ const defaultExpenseItems = [
         ${m.incomeMode === "cu" ? `<br /><strong>${tr("calcIncomeBaseNote")}</strong> ${tr("cuNetNoteText")}` : ""}
       `;
 
-      let mainHtml = `<span class="result-main-line">${escapeHtml(tr("calcNoTransferSuggested"))}</span>`;
+      let mainHtml;
       if (m.assegnoDa1a2 > 0.005) {
+        const perChild = m.figli > 1 ? `<div class="result-transfer-child">${eur(m.assegnoDa1a2 / m.figli)}&thinsp;${escapeHtml(currentLang === "en" ? "per child" : "per figlio")}</div>` : "";
         mainHtml = `
-          <span class="result-main-flow">${escapeHtml(c1n())} &rarr; ${escapeHtml(c2n())}</span>
-          <span class="result-main-amount">${eur(m.assegnoDa1a2)} ${escapeHtml(tr("pdfPerMonth"))}</span>
+          <div class="result-transfer-dir">
+            <span class="result-chip-name">${escapeHtml(c1n())}</span>
+            <span class="result-chip-arr">&rarr;</span>
+            <span class="result-chip-name">${escapeHtml(c2n())}</span>
+          </div>
+          <div class="result-transfer-value">${eur(m.assegnoDa1a2)}<span class="result-transfer-per">&thinsp;${escapeHtml(tr("pdfPerMonth"))}</span></div>
+          ${perChild}
         `;
       } else if (m.assegnoDa2a1 > 0.005) {
+        const perChild = m.figli > 1 ? `<div class="result-transfer-child">${eur(m.assegnoDa2a1 / m.figli)}&thinsp;${escapeHtml(currentLang === "en" ? "per child" : "per figlio")}</div>` : "";
         mainHtml = `
-          <span class="result-main-flow">${escapeHtml(c2n())} &rarr; ${escapeHtml(c1n())}</span>
-          <span class="result-main-amount">${eur(m.assegnoDa2a1)} ${escapeHtml(tr("pdfPerMonth"))}</span>
+          <div class="result-transfer-dir">
+            <span class="result-chip-name">${escapeHtml(c2n())}</span>
+            <span class="result-chip-arr">&rarr;</span>
+            <span class="result-chip-name">${escapeHtml(c1n())}</span>
+          </div>
+          <div class="result-transfer-value">${eur(m.assegnoDa2a1)}<span class="result-transfer-per">&thinsp;${escapeHtml(tr("pdfPerMonth"))}</span></div>
+          ${perChild}
         `;
       } else {
         const benefitRows = getCompensativeBenefitRows(m, c1n(), c2n());
+        let benefitCardsHtml = "";
         if (benefitRows.length) {
-          const benefitsHtml = benefitRows
-            .map((row) => `<li><span>${escapeHtml(row.label)}</span><strong>${eur(row.amount)}</strong></li>`)
+          const rawBenefs = Array.isArray(m.compensativeBenefits)
+            ? m.compensativeBenefits.filter((r) => r && Number(r.amount || 0) > 0.005)
+            : [];
+          const typeIcons = { family: "\uD83C\uDFDB", "primary-home-mortgage": "\uD83C\uDFE1" };
+          const cardsHtml = benefitRows
+            .map((row, i) => {
+              const icon = (rawBenefs[i] && typeIcons[rawBenefs[i].type]) || "\u2726";
+              return `<li class="spieg-benefit-card"><span class="spieg-benefit-icon">${icon}</span><span class="spieg-benefit-label">${escapeHtml(row.label)}</span><strong class="spieg-benefit-amount">${eur(row.amount)}</strong></li>`;
+            })
             .join("");
-          mainHtml = `
-            <span class="result-main-line">${escapeHtml(tr("calcNoTransferSuggested"))}</span>
+          const total = benefitRows.reduce((s, r) => s + r.amount, 0);
+          const totalLabel = currentLang === "en" ? "Total allocated benefits" : "Totale benefici allocati";
+          benefitCardsHtml = `
             <div class="result-benefits-box">
-              <span class="result-main-sub">${escapeHtml(tr("calcCompBenefitsLabel"))}</span>
-              <ul class="result-benefits-list">${benefitsHtml}</ul>
+              <div class="spieg-benefits-label">&#127873;&ensp;${escapeHtml(tr("calcCompBenefitsLabel"))}</div>
+              <ul class="spieg-benefits-cards">${cardsHtml}</ul>
+              <div class="spieg-benefits-total"><span>${escapeHtml(totalLabel)}</span><strong>${eur(total)}</strong></div>
             </div>
           `;
-        } else if (benefitsInline) {
-          mainHtml = `<span class="result-main-line">${escapeHtml(msg("calcNoTransferWithBenefits", { benefits: benefitsInline }))}</span>`;
         }
+        mainHtml = `<div class="spieg-no-transfer-badge">&#9878;&#65039;&ensp;${escapeHtml(tr("calcNoTransferSuggested"))}</div>${benefitCardsHtml}`;
       }
       resultMain.innerHTML = mainHtml;
 
@@ -5417,10 +5499,12 @@ ${scenarioLab.length ? `
     document.getElementById("btnReset").addEventListener("click", resetAll);
 
     document.getElementById("btnExportJson").addEventListener("click", async () => {
+      if (!isLoggedIn()) { showAuthGateMessage(document.getElementById("btnExportJson")); return; }
       await exportJson();
     });
 
     document.getElementById("btnImportJson").addEventListener("click", () => {
+      if (!isLoggedIn()) { showAuthGateMessage(document.getElementById("btnImportJson")); return; }
       document.getElementById("fileJson").click();
     });
 
@@ -5433,10 +5517,12 @@ ${scenarioLab.length ? `
     });
 
     document.getElementById("btnPdf").addEventListener("click", () => {
+      if (!isLoggedIn()) { showAuthGateMessage(document.getElementById("btnPdf")); return; }
       exportPdfDirect();
     });
 
     document.getElementById("btnSaveScenario").addEventListener("click", () => {
+      if (!isLoggedIn()) { showAuthGateMessage(document.getElementById("btnSaveScenario")); return; }
       saveCurrentScenario();
     });
 

package/frontend/public/index.html

@@ -475,8 +475,8 @@
             <div class="live-title">⚡ Impatto in Tempo Reale sul Netto</div>
             <div class="live-grid" id="liveNet"></div>
             <div class="result-pill">
-              <div>🎯 Assegno suggerito</div>
-              <div id="risultatoMain" class="big">Calcolo in tempo reale</div>
+              <div class="result-pill-head"><span>🎯</span><span>Assegno suggerito</span></div>
+              <div id="risultatoMain">Calcolo in tempo reale</div>
             </div>
             <div id="liveBreakdown"></div>
           </div>
@@ -583,7 +583,7 @@
   <script src="supabase.min.js"></script>
   <script src="fabric.min.js"></script>
   <script src="html2pdf.bundle.min.js"></script>
-    <script src="app.js?v=2.1.7"></script>
+    <script src="app.js?v=2.1.9"></script>
 </body>
 </html>
 

package/frontend/public/styles.css

@@ -1388,6 +1388,37 @@
       border: 1px solid #c6cdc3;
     }
 
+    /* ── Feature gate ─────────────────────────────────────────────── */
+    .gate-locked {
+      position: relative;
+      opacity: 0.62;
+      cursor: pointer;
+    }
+
+    .gate-locked::after {
+      content: "\uD83D\uDD12";
+      position: absolute;
+      top: 2px;
+      right: 4px;
+      font-size: 0.65rem;
+      line-height: 1;
+      pointer-events: none;
+    }
+
+    .gate-locked:hover {
+      opacity: 0.85;
+    }
+
+    @keyframes gate-flash-anim {
+      0%   { outline: 2px solid transparent; }
+      30%  { outline: 2px solid #d04a2f; box-shadow: 0 0 0 3px rgba(208,74,47,0.22); }
+      100% { outline: 2px solid transparent; }
+    }
+
+    .gate-flash {
+      animation: gate-flash-anim 0.65s ease forwards;
+    }
+
     /* ── Scenario Lab ─────────────────────────────────────────────── */
     .scenario-lab-card {
       margin-top: 14px;
@@ -1725,8 +1756,8 @@
 
     .spieg-benefit-card {
       display: grid;
-      grid-template-columns: 28px 1fr auto;
-      align-items: center;
+      grid-template-columns: 28px minmax(0, 1fr) auto;
+      align-items: start;
       gap: 8px;
       padding: 8px 10px;
       border-radius: 10px;
@@ -1754,6 +1785,8 @@
       font-weight: 600;
       color: #1f4642;
       word-break: break-word;
+      min-width: 0;
+      padding-top: 5px;
     }
 
     .spieg-benefit-amount {
@@ -2209,7 +2242,6 @@
       box-shadow: 0 12px 26px rgba(17, 70, 64, 0.16);
       margin-bottom: 10px;
       position: relative;
-      overflow: hidden;
     }
 
     .result-pill::after {
@@ -2232,6 +2264,79 @@
       color: #123b38;
     }
 
+    .result-pill-head {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+      font-size: 0.71rem;
+      font-weight: 800;
+      text-transform: uppercase;
+      letter-spacing: 0.07em;
+      color: #3a6560;
+      padding-bottom: 9px;
+      margin-bottom: 9px;
+      border-bottom: 1px solid rgba(0,0,0,0.08);
+    }
+
+    .result-transfer-dir {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      background: linear-gradient(135deg, rgba(27, 110, 100, 0.11), rgba(27, 110, 100, 0.05));
+      border: 1.5px solid rgba(27, 110, 100, 0.24);
+      border-radius: 999px;
+      padding: 6px 16px;
+      margin-bottom: 10px;
+      max-width: 100%;
+    }
+
+    .result-chip-name {
+      font-weight: 800;
+      font-size: 0.9rem;
+      color: #124741;
+      overflow-wrap: anywhere;
+    }
+
+    .result-chip-arr {
+      font-size: 1.1rem;
+      color: #1d7d72;
+      font-weight: 900;
+      flex-shrink: 0;
+    }
+
+    .result-transfer-value {
+      display: block;
+      font-size: 2.0rem;
+      font-weight: 900;
+      color: #0b5e57;
+      line-height: 1.15;
+      letter-spacing: -0.3px;
+      text-shadow: 0 1px 0 rgba(255,255,255,0.75);
+      font-variant-numeric: tabular-nums;
+      margin-bottom: 4px;
+    }
+
+    .result-transfer-per {
+      font-size: 0.48em;
+      font-weight: 700;
+      color: #2d7068;
+      vertical-align: middle;
+      margin-left: 2px;
+    }
+
+    .result-transfer-child {
+      display: inline-block;
+      margin-top: 2px;
+      font-size: 0.78rem;
+      color: #3d6b63;
+      font-weight: 600;
+      font-variant-numeric: tabular-nums;
+      background: rgba(0,0,0,0.045);
+      border-radius: 8px;
+      padding: 3px 10px;
+      border: 1px solid rgba(0,0,0,0.08);
+    }
+
     .result-main-flow {
       display: block;
       font-size: 1.02rem;
@@ -2275,12 +2380,9 @@
     }
 
     .result-benefits-box {
-      border: 1px solid #bdd6cf;
-      border-radius: 12px;
-      background: linear-gradient(180deg, rgba(249, 253, 252, 0.92), rgba(241, 249, 246, 0.92));
-      padding: 8px;
       display: grid;
-      gap: 8px;
+      gap: 6px;
+      margin-top: 8px;
     }
 
     .result-benefits-list {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantenimento-app",
-  "version": "2.1.7",
+  "version": "2.1.9",
   "description": "Frontend + backend architecture for the mantenimento calculator",
   "type": "commonjs",
   "main": "backend/calculate-model.js",