v1.7.0: piani Basic/Pro/Premium/Annual + quota giornaliera

Pricing model: subscription mensili (Basic 2.99 / Pro 5.99 / Premium 9.99)
piu' Annual 49.90 one-time. Feature gating per piano (Basic = solo audio,
Pro+ = tutto). Quota giornaliera (10/30/150) con reset mezzanotte Europe/Rome.

Server: tabella daily_usage, endpoint /api/usage/consume e /status,
webhook LS gestisce subscription_* events + mappatura variant_id -> plan
via .env (LS_VARIANT_BASIC|PRO|PREMIUM|ANNUAL).

Client: gating tab in sidebar in base ai features del piano, contatore
"X/Y oggi" + bottone Upgrade, modal blocco con CTA verso landing.

webui/index.html

@@ -21,23 +21,23 @@
       <div class="divider"></div>
 
       <nav class="nav">
-        <button class="nav-item active" data-view="download">
+        <button class="nav-item active" data-view="download" data-feature="audio">
           <span class="nav-icon">⬇</span>
           <span>Scarica</span>
         </button>
-        <button class="nav-item" data-view="video">
+        <button class="nav-item" data-view="video" data-feature="video">
           <span class="nav-icon">🎬</span>
           <span>Video</span>
         </button>
-        <button class="nav-item" data-view="upgrade">
+        <button class="nav-item" data-view="upgrade" data-feature="upgrade">
           <span class="nav-icon">⚡</span>
           <span>Upgrade</span>
         </button>
-        <button class="nav-item" data-view="meta">
+        <button class="nav-item" data-view="meta" data-feature="metadata">
           <span class="nav-icon">🏷</span>
           <span>Metadati</span>
         </button>
-        <button class="nav-item" data-view="record">
+        <button class="nav-item" data-view="record" data-feature="record">
           <span class="nav-icon">●</span>
           <span>Registra</span>
         </button>
@@ -51,6 +51,19 @@
         </button>
       </nav>
 
+      <div class="quota-box" id="quotaBox" hidden>
+        <div class="quota-label">Oggi</div>
+        <div class="quota-value">
+          <span id="quotaUsed">0</span>
+          <span class="quota-sep">/</span>
+          <span id="quotaLimit">10</span>
+        </div>
+        <div class="quota-plan" id="quotaPlanName">Basic</div>
+        <button type="button" class="quota-upgrade" id="quotaUpgradeBtn" hidden>
+          Upgrade
+        </button>
+      </div>
+
       <div class="footer">
         <div class="footer-by">by LuZa</div>
         <div class="footer-version" id="footerVersion">v1.0</div>
@@ -892,6 +905,23 @@
     </div>
   </div>
 
+  <!-- ============== MODAL: Upgrade richiesto ============== -->
+  <div class="modal-backdrop" id="upgradeModal" hidden>
+    <div class="modal">
+      <div class="modal-head">
+        <h2 id="upgradeModalTitle">Passa a un piano superiore</h2>
+        <button class="modal-close" id="upgradeCloseBtn">×</button>
+      </div>
+      <div class="modal-body" id="upgradeModalBody">
+        <!-- popolato dinamicamente -->
+      </div>
+      <div class="modal-foot">
+        <button class="btn btn-primary pill" id="upgradeOpenBtn">Vedi i piani</button>
+        <button class="btn btn-ghost pill" id="upgradeCloseBtn2">Chiudi</button>
+      </div>
+    </div>
+  </div>
+
   <!-- ============== TOAST ============== -->
   <div class="toast" id="toast"></div>