diff --git a/templates/index.html b/templates/index.html
index 27a5720..a3cb952 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,59 +2,150 @@
 <html lang="it">
 <head>
     <meta charset="UTF-8">
-    <title>Calcolo Calcestruzzo v2.1</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Software Cemento Rev.0</title>
     <style>
-        body { font-family: sans-serif; background-color: #f4f7f6; padding: 20px; }
-        .container { display: flex; max-width: 900px; margin: auto; background: white; padding: 20px; border: 1px solid #ccc; gap: 20px; }
-        .panel { flex: 1; }
-        .output { border: 1px solid #999; padding: 15px; min-height: 350px; white-space: pre-wrap; }
-        input, select { padding: 4px; border: 1px solid #ccc; width: 100%; box-sizing: border-box; }
-        .btn-stampa { padding: 10px; cursor: pointer; background: #fff3e0; border: 1px solid #999; flex: 1; }
+        :root { --mac-bg: #f2f2f7; --mac-blue: #007aff; --mac-red: #ff3b30; --mac-green: #34c759; --mac-purple: #5856d6; }
+        body { font-family: -apple-system, system-ui, sans-serif; background: var(--mac-bg); padding: 20px; font-size: 14px; color: #1c1c1e; }
+        .container { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; max-width: 1200px; margin: auto; }
+        .panel { background: rgba(255,255,255,0.8); backdrop-filter: blur(10px); border-radius: 12px; padding: 20px; flex: 1; min-width: 320px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
+        
+        table { width: 100%; border-collapse: collapse; margin-bottom: 15px; background: white; border-radius: 8px; overflow: hidden; }
+        th { padding: 10px; font-size: 14px; color: white; text-transform: uppercase; }
+        td { padding: 8px; text-align: center; border: 1px solid #e5e5ea; font-size: 14px; }
+        .h-blue { background: var(--mac-blue); }
+        .h-red { background: var(--mac-red); }
+        
+        .input-group { position: relative; display: inline-block; width: 90%; }
+        input { width: 100%; border: 1px solid #d1d1d6; border-radius: 5px; padding: 6px 5px; text-align: center; font-size: 14px; box-sizing: border-box; }
+        .unit-label { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: #8e8e93; pointer-events: none; }
+        select { border: 1px solid #d1d1d6; border-radius: 5px; padding: 5px; font-size: 14px; }
+
+        .btn { width: 100%; padding: 12px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; margin-top: 10px; font-size: 15px; color: white; text-transform: uppercase; transition: opacity 0.2s; }
+        .btn:hover { opacity: 0.8; }
+        .btn-calc { background: var(--mac-green); }
+        .btn-exp { background: var(--mac-purple); margin-top: 20px; }
+        .btn-cups { background: var(--mac-blue); margin-top: 10px; }
+        
+        .res-section { margin-bottom: 15px; }
+        .res-section h4 { margin: 0 0 5px 0; text-transform: uppercase; font-size: 12px; color: #8e8e93; }
+        .res-box { background: white; padding: 15px; border-radius: 10px; border: 1px solid #d1d1d6; line-height: 1.6; }
+        hr { border: 0; border-top: 1px solid #d1d1d6; margin: 15px 0; }
+
+        @media print { .no-print { display: none !important; } .res-box { border: none; } }
     </style>
 </head>
 <body>
     <div class="container">
-        <div class="panel">
+        <div class="panel no-print">
             <form method="POST">
                 <table>
-                    <tr><td>Larghezza</td><td><input type="text" name="l" value="{{form.get('l','1')}}"></td><td><select name="ul"><option value="m">m</option></select></td></tr>
-                    <tr><td>Profondità</td><td><input type="text" name="p" value="{{form.get('p','1')}}"></td><td><select name="up"><option value="m">m</option></select></td></tr>
-                    <tr><td>Altezza</td><td><input type="text" name="a" value="{{form.get('a','1')}}"></td><td><select name="ua"><option value="m">m</option></select></td></tr>
-                    <tr><td colspan="3"><hr></td></tr>
-                    <tr><td>P. Cemento</td><td><input type="text" name="p_cem" value="{{form.get('p_cem','1')}}"></td></tr>
-                    <tr><td>P. Sabbia</td><td><input type="text" name="p_sab" value="{{form.get('p_sab','3')}}"></td></tr>
-                    <tr><td>P. Ghiaia</td><td><input type="text" name="p_ghi" value="{{form.get('p_ghi','5')}}"></td></tr>
+                    <tr class="h-blue"><th colspan="3">Dimensioni</th></tr>
+                    <tr><td>Altezza</td><td><input type="text" name="a" value="{{form.get('a','0')}}"></td><td><select name="ua">{% for u in ['m','cm','mm'] %}<option value="{{u}}" {% if form.get('ua','m')==u %}selected{% endif %}>{{u}}</option>{% endfor %}</select></td></tr>
+                    <tr><td>Larghezza</td><td><input type="text" name="l" value="{{form.get('l','0')}}"></td><td><select name="ul">{% for u in ['m','cm','mm'] %}<option value="{{u}}" {% if form.get('ul','m')==u %}selected{% endif %}>{{u}}</option>{% endfor %}</select></td></tr>
+                    <tr><td>Profondità</td><td><input type="text" name="p" value="{{form.get('p','0')}}"></td><td><select name="up">{% for u in ['m','cm','mm'] %}<option value="{{u}}" {% if form.get('up','m')==u %}selected{% endif %}>{{u}}</option>{% endfor %}</select></td></tr>
                 </table>
-                <button type="submit" style="width:100%; padding:10px;">Calcola</button>
+
+                <table>
+                    <tr class="h-red"><th colspan="3">Miscela (Parti)</th></tr>
+                    <tr>
+                        <td>Cemento:<br><input type="text" name="p_cem" value="{{form.get('p_cem','1')}}"></td>
+                        <td>Sabbia:<br><input type="text" name="p_sab" value="{{form.get('p_sab','3')}}"></td>
+                        <td>Ghiaia:<br><input type="text" name="p_ghi" value="{{form.get('p_ghi','5')}}"></td>
+                    </tr>
+                </table>
+
+                <table>
+                    <tr class="h-red"><th colspan="3">Peso sacchette (Kg)</th></tr>
+                    <tr>
+                        <td>Cemento:<br><div class="input-group"><input type="text" name="w_cem" value="{{form.get('w_cem','25')}}"><span class="unit-label">Kg</span></div></td>
+                        <td>Sabbia:<br><div class="input-group"><input type="text" name="w_sab" value="{{form.get('w_sab','25')}}"><span class="unit-label">Kg</span></div></td>
+                        <td>Ghiaia:<br><div class="input-group"><input type="text" name="w_ghi" value="{{form.get('w_ghi','25')}}"><span class="unit-label">Kg</span></div></td>
+                    </tr>
+                </table>
+
+                <table>
+                    <tr class="h-red"><th colspan="3">Costo sacchette (€)</th></tr>
+                    <tr>
+                        <td>Cemento:<br><div class="input-group"><input type="text" name="c_cem" value="{{form.get('c_cem','1')}}"><span class="unit-label">€</span></div></td>
+                        <td>Sabbia:<br><div class="input-group"><input type="text" name="c_sab" value="{{form.get('c_sab','1')}}"><span class="unit-label">€</span></div></td>
+                        <td>Ghiaia:<br><div class="input-group"><input type="text" name="c_ghi" value="{{form.get('c_ghi','1')}}"><span class="unit-label">€</span></div></td>
+                    </tr>
+                </table>
+
+                <table>
+                    <tr class="h-red"><th>Attrezzatura</th></tr>
+                    <tr><td>Volume Betoniera: <div class="input-group" style="width:80px;"><input type="text" name="v_bet" value="{{form.get('v_bet','160')}}"><span class="unit-label">L</span></div></td></tr>
+                </table>
+
+                <button type="submit" class="btn btn-calc">Esegui Calcolo</button>
             </form>
         </div>
-        <div class="panel output">
-<strong>Risultati:</strong>
-{% if res %}
-Volume: {{ res.vol }} m3 | Peso: {{ res.peso }} kg
-Cemento: {{ res.s_cem }} sacchetti
-Sabbia: {{ res.s_sab }} sacchetti
-Ghiaia: {{ res.s_ghi }} sacchetti
-<strong>TOTALE: {{ res.tot_sacc }} sacchetti</strong>
 
-<div style="display:flex; gap:10px; margin-top:20px;">
-    <button type="button" onclick="stampa()" class="btn-stampa">Stampa PDF (CUPS)</button>
-</div>
-<div id="status" style="margin-top:10px; font-weight:bold; text-align:center;"></div>
-{% endif %}
+        <div class="panel">
+            <h3>Risultati</h3>
+            {% if res %}
+            <div class="res-box">
+                <div class="res-section">
+                    <b>Volume:</b> {{ res.vol }} m³ | <b>Peso:</b> {{ res.peso }} Kg
+                </div>
+                <hr>
+                <div class="res-section">
+                    <h4>Acquisti</h4>
+                    Cemento: {{ res.s_cem }} sacchetti (€ {{ res.cost_cem }})<br>
+                    Sabbia: {{ res.s_sab }} sacchetti (€ {{ res.cost_sab }})<br>
+                    Ghiaia: {{ res.s_ghi }} sacchetti (€ {{ res.cost_ghi }})<br>
+                    Acqua: {{ res.acqua }} L<br>
+                    <b>Totale materiale:</b> {{ res.tot_sacc }} sacchetti
+                </div>
+                <div class="res-section">
+                    <h4>Costo stimato</h4>
+                    <b>Costo totale: {{ res.costo_tot }} €</b>
+                </div>
+                <hr>
+                <div class="res-section">
+                    <h4>Per ogni carico ({{ res.n_c }} carichi):</h4>
+                    • Cemento: {{ res.bc_cem }} sacchetti<br>
+                    • Sabbia: {{ res.bc_sab }} sacchetti<br>
+                    • Ghiaia: {{ res.bc_ghi }} sacchetti<br>
+                    • Acqua: {{ res.bc_aq }} L
+                </div>
+            </div>
+
+            <div class="no-print">
+                <form action="/download" method="POST">
+                    <input type="hidden" name="res_vol" value="{{res.vol}}"><input type="hidden" name="res_peso" value="{{res.peso}}">
+                    <input type="hidden" name="res_aq" value="{{res.acqua}}"><input type="hidden" name="res_tot_s" value="{{res.tot_sacc}}">
+                    <input type="hidden" name="res_costo_t" value="{{res.costo_tot}}"><input type="hidden" name="res_s_cem" value="{{res.s_cem}}">
+                    <input type="hidden" name="res_c_cem" value="{{res.cost_cem}}"><input type="hidden" name="res_s_sab" value="{{res.s_sab}}">
+                    <input type="hidden" name="res_c_sab" value="{{res.cost_sab}}"><input type="hidden" name="res_s_ghi" value="{{res.s_ghi}}">
+                    <input type="hidden" name="res_c_ghi" value="{{res.cost_ghi}}"><input type="hidden" name="res_nc" value="{{res.n_c}}">
+                    <input type="hidden" name="res_bc_cem" value="{{res.bc_cem}}"><input type="hidden" name="res_bc_sab" value="{{res.bc_sab}}">
+                    <input type="hidden" name="res_bc_ghi" value="{{res.bc_ghi}}"><input type="hidden" name="res_bc_aq" value="{{res.bc_aq}}">
+                    <input type="hidden" name="a" value="{{form.get('a')}}"><input type="hidden" name="ua" value="{{form.get('ua')}}">
+                    <input type="hidden" name="l" value="{{form.get('l')}}"><input type="hidden" name="ul" value="{{form.get('ul')}}">
+                    <input type="hidden" name="p" value="{{form.get('p')}}"><input type="hidden" name="up" value="{{form.get('up')}}">
+                    <input type="hidden" name="p_cem" value="{{form.get('p_cem')}}"><input type="hidden" name="p_sab" value="{{form.get('p_sab')}}"><input type="hidden" name="p_ghi" value="{{form.get('p_ghi')}}">
+                    <input type="hidden" name="w_cem" value="{{form.get('w_cem')}}"><input type="hidden" name="w_sab" value="{{form.get('w_sab')}}"><input type="hidden" name="w_ghi" value="{{form.get('w_ghi')}}">
+                    <input type="hidden" name="c_cem" value="{{form.get('c_cem')}}"><input type="hidden" name="c_sab" value="{{form.get('c_sab')}}"><input type="hidden" name="c_ghi" value="{{form.get('c_ghi')}}">
+                    <input type="hidden" name="v_bet" value="{{form.get('v_bet')}}">
+                    <button type="submit" class="btn btn-exp">Esporta TXT Completo</button>
+                </form>
+
+                <form action="/stampa_pdf" method="POST" target="_blank">
+                    <input type="hidden" name="res_vol" value="{{res.vol}}">
+                    <input type="hidden" name="res_peso" value="{{res.peso}}">
+                    <input type="hidden" name="res_tot_s" value="{{res.tot_sacc}}">
+                    <input type="hidden" name="res_costo_t" value="{{res.costo_tot}}">
+                    <button type="submit" class="btn btn-cups">Stampa PDF (CUPS)</button>
+                </form>
+
+                <button onclick="window.print()" class="btn" style="background:#d1d1d6; color:#1c1c1e; margin-top:10px;">Stampa Pagina</button>
+            </div>
+            {% else %}
+            <p style="color:#8e8e93; text-align:center;">Inserisci i dati e premi "Esegui Calcolo".</p>
+            {% endif %}
         </div>
     </div>
-    <script>
-    function stampa() {
-        const s = document.getElementById('status');
-        s.innerText = "Invio...";
-        const fd = new FormData();
-        fd.append('v', '{{res.vol if res else ""}}');
-        fd.append('p', '{{res.peso if res else ""}}');
-        fd.append('ts', '{{res.tot_sacc if res else ""}}');
-        fetch('/stampa_pdf', { method: 'POST', body: fd })
-        .then(r => r.text()).then(m => { s.innerText = m; s.style.color = m.includes("OK") ? "green" : "red"; });
-    }
-    </script>
 </body>
 </html>
\ No newline at end of file

Dimensioni
Larghezza
Profondità
Altezza

P. Cemento
P. Sabbia
P. Ghiaia
Altezza
Larghezza
Profondità