diff --git a/iframe.html b/iframe.html
index 6f9df01..c171ab3 100644
--- a/iframe.html
+++ b/iframe.html
@@ -235,7 +235,7 @@
         }
 
         .dog-calculator-collapsible {
-            background: var(--bg-secondary);
+            background: var(--bg-primary);
             border: 1px solid var(--border-color);
             border-top: none;
             margin-bottom: 0;
diff --git a/sundog-dog-food-calculator.js b/sundog-dog-food-calculator.js
index d9e04ba..eb812ce 100644
--- a/sundog-dog-food-calculator.js
+++ b/sundog-dog-food-calculator.js
@@ -21,6 +21,20 @@
     
     // Inject widget styles
     const CSS_STYLES = `/* Sundog Dog Food Calorie Calculator Styles */
+        
+        /* CSS Variables for theming */
+        :root {
+            --bg-primary: #fdfcfe;
+            --bg-secondary: #ffffff;
+            --border-color: #e8e3ed;
+            --text-primary: #6f3f6d;
+            --text-secondary: #8f7a8e;
+            --accent-color: #f19a5f;
+            --text-label: #635870;      /* For form labels, secondary UI text */
+            --success-color: #7fa464;   /* Green for success states */
+            --bg-tertiary: #f8f5fa;     /* Light background variant */
+            --error-color: #e87159;     /* Error states and messages */
+        }
 
         body {
             margin: 0;
@@ -29,7 +43,7 @@
             overflow-x: hidden;
             font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
             line-height: 1.5;
-            color: #6f3f6d;
+            color: var(--text-primary);
         }
 
         .dog-calculator-container {
@@ -52,8 +66,8 @@
         }
 
         .dog-calculator-section {
-            background: #fdfcfe;
-            border: 1px solid #e8e3ed;
+            background: var(--bg-primary);
+            border: 1px solid var(--border-color);
             border-radius: 8px 8px 0 0;
             padding: 24px;
             margin-bottom: 0;
@@ -71,7 +85,7 @@
 
         .dog-calculator-section h2 {
             margin: 0;
-            color: #6f3f6d;
+            color: var(--text-primary);
             font-size: 1.5rem;
             font-weight: 600;
         }
@@ -86,12 +100,12 @@
         .dog-calculator-unit-label {
             font-size: 0.9rem;
             font-weight: 500;
-            color: #635870;
+            color: var(--text-label);
             transition: color 0.2s ease;
         }
 
         .dog-calculator-unit-label.active {
-            color: #6f3f6d;
+            color: var(--text-primary);
             font-weight: 600;
         }
 
@@ -115,7 +129,7 @@
             left: 0;
             right: 0;
             bottom: 0;
-            background-color: #e8e3ed;
+            background-color: var(--border-color);
             transition: 0.3s;
             border-radius: 24px;
         }
@@ -149,7 +163,7 @@
             display: block;
             margin-bottom: 8px;
             font-weight: 500;
-            color: #6f3f6d;
+            color: var(--text-primary);
             font-size: 1rem;
         }
 
@@ -158,12 +172,12 @@
         .dog-calculator-form-group input[type="text"] {
             width: 100%;
             padding: 12px 16px;
-            border: 1px solid #e8e3ed;
+            border: 1px solid var(--border-color);
             border-radius: 6px;
             font-size: 1rem;
             font-family: inherit;
-            background-color: #ffffff;
-            color: #6f3f6d;
+            background-color: var(--bg-secondary);
+            color: var(--text-primary);
             transition: all 0.2s ease;
             -webkit-appearance: none;
             -moz-appearance: none;
@@ -176,8 +190,8 @@
         }
 
         .dog-calculator-form-group select option {
-            background-color: #ffffff;
-            color: #6f3f6d;
+            background-color: var(--bg-secondary);
+            color: var(--text-primary);
         }
 
         .dog-calculator-form-group input[type="number"],
@@ -191,14 +205,14 @@
         .dog-calculator-form-group input[type="text"]:focus {
             outline: none;
             border-color: #f19a5f;
-            background-color: #ffffff;
+            background-color: var(--bg-secondary);
             box-shadow: 0 0 0 3px rgba(241, 154, 95, 0.1);
         }
 
         .dog-calculator-form-group input[readonly] {
-            background-color: #f8f5fa;
+            background-color: var(--bg-tertiary);
             cursor: not-allowed;
-            color: #635870;
+            color: var(--text-label);
         }
 
         .dog-calculator-results {
@@ -222,13 +236,13 @@
 
         .dog-calculator-result-label {
             font-weight: 500;
-            color: #6f3f6d;
+            color: var(--text-primary);
             font-size: 0.95rem;
         }
 
         .dog-calculator-result-value {
             font-weight: 600;
-            color: #6f3f6d;
+            color: var(--text-primary);
             font-size: 1.1rem;
             padding: 4px 12px;
             background: rgba(241, 154, 95, 0.15);
@@ -236,8 +250,8 @@
         }
 
         .dog-calculator-collapsible {
-            background: #ffffff;
-            border: 1px solid #e8e3ed;
+            background: var(--bg-primary);
+            border: 1px solid var(--border-color);
             border-top: none;
             margin-bottom: 0;
             overflow: hidden;
@@ -245,15 +259,15 @@
         }
 
         .dog-calculator-collapsible-header {
-            background: #f8f5fa;
+            background: var(--bg-tertiary);
             padding: 20px 24px;
-            border-bottom: 1px solid #e8e3ed;
+            border-bottom: 1px solid var(--border-color);
         }
 
         .dog-calculator-collapsible-header h3 {
             margin: 0;
             font-size: 1.25rem;
-            color: #6f3f6d;
+            color: var(--text-primary);
             font-weight: 600;
         }
 
@@ -281,7 +295,7 @@
         }
 
         .dog-calculator-error {
-            color: #e87159;
+            color: var(--error-color);
             font-size: 0.875rem;
             margin-top: 6px;
             font-weight: 500;
@@ -297,16 +311,16 @@
             justify-content: center;
             gap: 16px;
             padding: 20px;
-            background: #f8f5fa;
-            border-left: 1px solid #e8e3ed;
-            border-right: 1px solid #e8e3ed;
+            background: var(--bg-tertiary);
+            border-left: 1px solid var(--border-color);
+            border-right: 1px solid var(--border-color);
             margin-top: -1px;
             box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
         }
 
         .dog-calculator-btn {
             padding: 8px 16px;
-            border: 1px solid #e8e3ed;
+            border: 1px solid var(--border-color);
             border-radius: 6px;
             font-size: 0.9rem;
             font-weight: 500;
@@ -317,7 +331,7 @@
             align-items: center;
             gap: 6px;
             background: white;
-            color: #6f3f6d;
+            color: var(--text-primary);
         }
 
         .dog-calculator-btn:hover {
@@ -331,15 +345,15 @@
         }
 
         .dog-calculator-btn-embed:hover {
-            border-color: #7fa464;
-            color: #7fa464;
+            border-color: var(--success-color);
+            color: var(--success-color);
         }
 
         .dog-calculator-footer {
             text-align: center;
             padding: 20px;
-            background: #fdfcfe;
-            border: 1px solid #e8e3ed;
+            background: var(--bg-primary);
+            border: 1px solid var(--border-color);
             border-radius: 0 0 8px 8px;
             border-top: none;
             margin-top: -1px;
@@ -450,18 +464,23 @@
 
         /* Dark theme - manual override */
         .dog-calculator-container.theme-dark {
-            color: #f5f3f7;
+            --bg-primary: #24202d;
+            --bg-secondary: #312b3b;
+            --border-color: #433c4f;
+            --text-primary: #f5f3f7;
+            --text-secondary: #b8b0c2;
+            color: var(--text-primary);
         }
             
         .dog-calculator-container.theme-dark .dog-calculator-section,
         .dog-calculator-container.theme-dark .dog-calculator-collapsible {
-            background: #24202d;
-            border-color: #433c4f;
+            background: var(--bg-primary);
+            border-color: var(--border-color);
         }
             
         .dog-calculator-container.theme-dark .dog-calculator-collapsible-header {
-            background: #312b3b;
-            border-color: #433c4f;
+            background: var(--bg-secondary);
+            border-color: var(--border-color);
         }
             
         .dog-calculator-container.theme-dark .dog-calculator-collapsible-header:hover {
@@ -472,45 +491,85 @@
         .dog-calculator-container.theme-dark .dog-calculator-collapsible-header h3,
         .dog-calculator-container.theme-dark .dog-calculator-form-group label,
         .dog-calculator-container.theme-dark .dog-calculator-result-label {
-            color: #f5f3f7;
+            color: var(--text-primary);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-unit-label {
-            color: #b8b0c2;
+            color: var(--text-secondary)
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-unit-label.active {
-            color: #f5f3f7;
+            color: var(--text-primary);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-slider {
-            background-color: #433c4f;
+            background-color: var(--border-color);
         }
             
         .dog-calculator-container.theme-dark .dog-calculator-form-group select,
         .dog-calculator-container.theme-dark .dog-calculator-form-group input[type="number"],
         .dog-calculator-container.theme-dark .dog-calculator-form-group input[type="text"] {
-            background-color: #312b3b;
-            border-color: #433c4f;
-            color: #f5f3f7;
+            background-color: var(--bg-secondary);
+            border-color: var(--border-color);
+            color: var(--text-primary);
             background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f3f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
         }
             
         .dog-calculator-container.theme-dark .dog-calculator-form-group select option {
-            background-color: #312b3b;
-            color: #f5f3f7;
+            background-color: var(--bg-secondary);
+            color: var(--text-primary);
         }
             
         .dog-calculator-container.theme-dark .dog-calculator-form-group select:focus,
         .dog-calculator-container.theme-dark .dog-calculator-form-group input[type="number"]:focus,
         .dog-calculator-container.theme-dark .dog-calculator-form-group input[type="text"]:focus {
-            background-color: #312b3b;
+            background-color: var(--bg-secondary);
             border-color: #f19a5f;
         }
             
         .dog-calculator-container.theme-dark .dog-calculator-form-group input[readonly] {
-            background-color: #433c4f;
-            color: #b8b0c2;
+            background-color: var(--border-color);
+            color: var(--text-secondary)
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-inline-unit {
+            background-color: var(--bg-secondary);
+            border-color: rgba(241, 154, 95, 0.5);
+            color: var(--text-primary);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f3f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-inline-unit:hover {
+            border-color: #f19a5f;
+            box-shadow: 0 2px 6px rgba(241, 154, 95, 0.3);
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-inline-unit:focus {
+            border-color: #f19a5f;
+            box-shadow: 0 0 0 3px rgba(241, 154, 95, 0.15);
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-inline-unit option {
+            background-color: var(--bg-secondary);
+            color: var(--text-primary);
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-unit-btn {
+            background-color: var(--bg-secondary);
+            border-color: var(--border-color);
+            color: var(--text-primary);
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-unit-btn:hover {
+            border-color: #f19a5f;
+            background: rgba(241, 154, 95, 0.2);
+        }
+
+        .dog-calculator-container.theme-dark .dog-calculator-unit-btn.active {
+            border-color: #f19a5f;
+            background: #f19a5f;
+            color: white;
         }
             
         .dog-calculator-container.theme-dark .dog-calculator-results {
@@ -519,24 +578,24 @@
         }
             
         .dog-calculator-container.theme-dark .dog-calculator-result-value {
-            color: #f5f3f7;
+            color: var(--text-primary);
             background: rgba(241, 154, 95, 0.2);
         }
             
         .dog-calculator-container.theme-dark .dog-calculator-footer {
-            background: #24202d;
-            border-color: #433c4f;
+            background: var(--bg-primary);
+            border-color: var(--border-color);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-action-buttons {
-            background: #312b3b;
-            border-color: #433c4f;
+            background: var(--bg-secondary);
+            border-color: var(--border-color);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-btn {
-            background: #433c4f;
-            border-color: #433c4f;
-            color: #f5f3f7;
+            background: var(--border-color);
+            border-color: var(--border-color);
+            color: var(--text-primary);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-btn:hover {
@@ -550,25 +609,30 @@
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-btn-embed:hover {
-            border-color: #7fa464;
-            color: #7fa464;
+            border-color: var(--success-color);
+            color: var(--success-color);
         }
 
         /* System theme - follows user's OS preference */
         @media (prefers-color-scheme: dark) {
             .dog-calculator-container.theme-system {
-                color: #f5f3f7;
+                --bg-primary: #24202d;
+                --bg-secondary: #312b3b;
+                --border-color: #433c4f;
+                --text-primary: #f5f3f7;
+                --text-secondary: #b8b0c2;
+                color: var(--text-primary);
             }
             
             .dog-calculator-container.theme-system .dog-calculator-section,
             .dog-calculator-container.theme-system .dog-calculator-collapsible {
-                background: #24202d;
-                border-color: #433c4f;
+                background: var(--bg-primary);
+                border-color: var(--border-color);
             }
             
             .dog-calculator-container.theme-system .dog-calculator-collapsible-header {
-                background: #312b3b;
-                border-color: #433c4f;
+                background: var(--bg-secondary);
+                border-color: var(--border-color);
             }
             
             .dog-calculator-container.theme-system .dog-calculator-collapsible-header:hover {
@@ -579,45 +643,85 @@
             .dog-calculator-container.theme-system .dog-calculator-collapsible-header h3,
             .dog-calculator-container.theme-system .dog-calculator-form-group label,
             .dog-calculator-container.theme-system .dog-calculator-result-label {
-                color: #f5f3f7;
+                color: var(--text-primary);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-unit-label {
-                color: #b8b0c2;
+                color: var(--text-secondary)
             }
 
             .dog-calculator-container.theme-system .dog-calculator-unit-label.active {
-                color: #f5f3f7;
+                color: var(--text-primary);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-slider {
-                background-color: #433c4f;
+                background-color: var(--border-color);
             }
             
             .dog-calculator-container.theme-system .dog-calculator-form-group select,
             .dog-calculator-container.theme-system .dog-calculator-form-group input[type="number"],
             .dog-calculator-container.theme-system .dog-calculator-form-group input[type="text"] {
-                background-color: #312b3b;
-                border-color: #433c4f;
-                color: #f5f3f7;
+                background-color: var(--bg-secondary);
+                border-color: var(--border-color);
+                color: var(--text-primary);
                 background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f3f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
             }
             
             .dog-calculator-container.theme-system .dog-calculator-form-group select option {
-                background-color: #312b3b;
-                color: #f5f3f7;
+                background-color: var(--bg-secondary);
+                color: var(--text-primary);
             }
             
             .dog-calculator-container.theme-system .dog-calculator-form-group select:focus,
             .dog-calculator-container.theme-system .dog-calculator-form-group input[type="number"]:focus,
             .dog-calculator-container.theme-system .dog-calculator-form-group input[type="text"]:focus {
-                background-color: #312b3b;
+                background-color: var(--bg-secondary);
                 border-color: #f19a5f;
             }
             
             .dog-calculator-container.theme-system .dog-calculator-form-group input[readonly] {
-                background-color: #433c4f;
-                color: #b8b0c2;
+                background-color: var(--border-color);
+                color: var(--text-secondary)
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-inline-unit {
+                background-color: var(--bg-secondary);
+                border-color: rgba(241, 154, 95, 0.5);
+                color: var(--text-primary);
+                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+                background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f3f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-inline-unit:hover {
+                border-color: #f19a5f;
+                box-shadow: 0 2px 6px rgba(241, 154, 95, 0.3);
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-inline-unit:focus {
+                border-color: #f19a5f;
+                box-shadow: 0 0 0 3px rgba(241, 154, 95, 0.15);
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-inline-unit option {
+                background-color: var(--bg-secondary);
+                color: var(--text-primary);
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-unit-btn {
+                background-color: var(--bg-secondary);
+                border-color: var(--border-color);
+                color: var(--text-primary);
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-unit-btn:hover {
+                border-color: #f19a5f;
+                background: rgba(241, 154, 95, 0.2);
+            }
+
+            .dog-calculator-container.theme-system .dog-calculator-unit-btn.active {
+                border-color: #f19a5f;
+                background: #f19a5f;
+                color: white;
             }
             
             .dog-calculator-container.theme-system .dog-calculator-results {
@@ -626,24 +730,24 @@
             }
             
             .dog-calculator-container.theme-system .dog-calculator-result-value {
-                color: #f5f3f7;
+                color: var(--text-primary);
                 background: rgba(241, 154, 95, 0.2);
             }
             
             .dog-calculator-container.theme-system .dog-calculator-footer {
-                background: #24202d;
-                border-color: #433c4f;
+                background: var(--bg-primary);
+                border-color: var(--border-color);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-action-buttons {
-                background: #312b3b;
-                border-color: #433c4f;
+                background: var(--bg-secondary);
+                border-color: var(--border-color);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-btn {
-                background: #433c4f;
-                border-color: #433c4f;
-                color: #f5f3f7;
+                background: var(--border-color);
+                border-color: var(--border-color);
+                color: var(--text-primary);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-btn:hover {
@@ -657,8 +761,8 @@
             }
 
             .dog-calculator-container.theme-system .dog-calculator-btn-embed:hover {
-                border-color: #7fa464;
-                color: #7fa464;
+                border-color: var(--success-color);
+                color: var(--success-color);
             }
         }
 
@@ -682,10 +786,10 @@
 
         .dog-calculator-modal-content {
             position: relative;
-            background-color: #ffffff;
+            background-color: var(--bg-secondary);
             margin: 5% auto;
             padding: 30px;
-            border: 1px solid #e8e3ed;
+            border: 1px solid var(--border-color);
             border-radius: 12px;
             width: 90%;
             max-width: 500px;
@@ -714,7 +818,7 @@
             top: 20px;
             font-size: 28px;
             font-weight: 300;
-            color: #6f3f6d;
+            color: var(--text-primary);
             cursor: pointer;
             transition: color 0.2s ease;
         }
@@ -725,7 +829,7 @@
 
         .dog-calculator-modal h3 {
             margin: 0 0 24px 0;
-            color: #6f3f6d;
+            color: var(--text-primary);
             font-size: 1.5rem;
         }
 
@@ -759,7 +863,7 @@
         .dog-calculator-share-twitter:hover { background: #1991da; transform: translateY(-1px); }
         .dog-calculator-share-linkedin { background: #0a66c2; }
         .dog-calculator-share-linkedin:hover { background: #084d95; transform: translateY(-1px); }
-        .dog-calculator-share-email { background: #6f3f6d; }
+        .dog-calculator-share-email { background: var(--text-primary); }
         .dog-calculator-share-email:hover { background: #5a3357; transform: translateY(-1px); }
         .dog-calculator-share-copy { background: #f19a5f; }
         .dog-calculator-share-copy:hover { background: #e87741; transform: translateY(-1px); }
@@ -773,12 +877,12 @@
             flex: 1;
             width: 100%;
             padding: 10px 16px;
-            border: 1px solid #e8e3ed;
+            border: 1px solid var(--border-color);
             border-radius: 6px;
             font-size: 0.9rem;
             font-family: monospace;
-            background: #f8f5fa;
-            color: #6f3f6d;
+            background: var(--bg-tertiary);
+            color: var(--text-primary);
         }
 
         /* Embed Modal */
@@ -789,7 +893,7 @@
         }
 
         .dog-calculator-embed-option {
-            border: 1px solid #e8e3ed;
+            border: 1px solid var(--border-color);
             border-radius: 8px;
             padding: 20px;
             background: #fcfafd;
@@ -797,21 +901,21 @@
 
         .dog-calculator-embed-option h4 {
             margin: 0 0 8px 0;
-            color: #6f3f6d;
+            color: var(--text-primary);
             font-size: 1.1rem;
         }
 
         .dog-calculator-embed-option p {
             margin: 0 0 16px 0;
-            color: #635870;
+            color: var(--text-label);
             font-size: 0.9rem;
         }
 
         /* Default (light theme) code containers */
         .dog-calculator-code-container {
             position: relative;
-            background: #ffffff;
-            border: 1px solid #e8e3ed;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
             border-radius: 6px;
             overflow: hidden;
         }
@@ -823,7 +927,7 @@
         }
 
         .dog-calculator-code-container code {
-            color: #312b3b;
+            color: var(--bg-secondary);
             font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
             font-size: 0.85rem;
             line-height: 1.4;
@@ -847,21 +951,21 @@
         }
 
         .dog-calculator-copy-btn:hover { background: #e87741; }
-        .dog-calculator-copy-btn.copied { background: #7fa464; }
-        .dog-calculator-copy-btn.copied:hover { background: #7fa464; }
+        .dog-calculator-copy-btn.copied { background: var(--success-color); }
+        .dog-calculator-copy-btn.copied:hover { background: var(--success-color); }
 
         /* Dark theme modal styles */
         .dog-calculator-container.theme-dark .dog-calculator-modal-content {
-            background-color: #24202d;
-            border-color: #433c4f;
+            background-color: var(--bg-primary);
+            border-color: var(--border-color);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-modal h3 {
-            color: #f5f3f7;
+            color: var(--text-primary);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-modal-close {
-            color: #f5f3f7;
+            color: var(--text-primary);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-modal-close:hover {
@@ -869,22 +973,22 @@
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-share-url input {
-            background: #312b3b;
-            border-color: #433c4f;
-            color: #f5f3f7;
+            background: var(--bg-secondary);
+            border-color: var(--border-color);
+            color: var(--text-primary);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-embed-option {
-            background: #312b3b;
-            border-color: #433c4f;
+            background: var(--bg-secondary);
+            border-color: var(--border-color);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-embed-option h4 {
-            color: #f5f3f7;
+            color: var(--text-primary);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-embed-option p {
-            color: #b8b0c2;
+            color: var(--text-secondary)
         }
 
         /* Dark theme code containers - different from embed option background */
@@ -894,22 +998,22 @@
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-code-container code {
-            color: #f5f3f7;
+            color: var(--text-primary);
         }
 
         /* System theme modal styles */
         @media (prefers-color-scheme: dark) {
             .dog-calculator-container.theme-system .dog-calculator-modal-content {
-                background-color: #24202d;
-                border-color: #433c4f;
+                background-color: var(--bg-primary);
+                border-color: var(--border-color);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-modal h3 {
-                color: #f5f3f7;
+                color: var(--text-primary);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-modal-close {
-                color: #f5f3f7;
+                color: var(--text-primary);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-modal-close:hover {
@@ -917,22 +1021,22 @@
             }
 
             .dog-calculator-container.theme-system .dog-calculator-share-url input {
-                background: #312b3b;
-                border-color: #433c4f;
-                color: #f5f3f7;
+                background: var(--bg-secondary);
+                border-color: var(--border-color);
+                color: var(--text-primary);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-embed-option {
-                background: #312b3b;
-                border-color: #433c4f;
+                background: var(--bg-secondary);
+                border-color: var(--border-color);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-embed-option h4 {
-                color: #f5f3f7;
+                color: var(--text-primary);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-embed-option p {
-                color: #b8b0c2;
+                color: var(--text-secondary)
             }
 
             /* System theme code containers - different from embed option background */
@@ -942,7 +1046,7 @@
             }
 
             .dog-calculator-container.theme-system .dog-calculator-code-container code {
-                color: #f5f3f7;
+                color: var(--text-primary);
             }
         }
 
@@ -954,8 +1058,8 @@
         }
 
         .dog-calculator-food-source-card {
-            background: #ffffff;
-            border: 1px solid #e8e3ed;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
             border-radius: 8px;
             padding: 20px;
             position: relative;
@@ -975,13 +1079,13 @@
 
         .dog-calculator-food-source-title {
             font-weight: 600;
-            color: #6f3f6d;
+            color: var(--text-primary);
             font-size: 1.1rem;
             margin: 0;
         }
 
         .dog-calculator-remove-food-btn {
-            background: #e87159;
+            background: var(--error-color);
             color: white;
             border: none;
             border-radius: 50%;
@@ -1005,14 +1109,14 @@
         .dog-calculator-percentage-group {
             margin-top: 16px;
             padding-top: 16px;
-            border-top: 1px solid #e8e3ed;
+            border-top: 1px solid var(--border-color);
         }
 
         .dog-calculator-percentage-label {
             display: block;
             margin-bottom: 8px;
             font-weight: 500;
-            color: #6f3f6d;
+            color: var(--text-primary);
             font-size: 1rem;
         }
 
@@ -1026,7 +1130,7 @@
             flex: 1;
             height: 6px;
             border-radius: 3px;
-            background: #e8e3ed;
+            background: var(--border-color);
             outline: none;
             transition: all 0.2s ease;
             -webkit-appearance: none;
@@ -1065,12 +1169,12 @@
         .dog-calculator-percentage-input {
             width: 70px;
             padding: 8px 12px;
-            border: 1px solid #e8e3ed;
+            border: 1px solid var(--border-color);
             border-radius: 6px;
             font-size: 0.9rem;
             text-align: center;
-            background-color: #ffffff;
-            color: #6f3f6d;
+            background-color: var(--bg-secondary);
+            color: var(--text-primary);
         }
 
         .dog-calculator-percentage-input:focus {
@@ -1086,10 +1190,10 @@
             gap: 8px;
             width: 100%;
             padding: 16px;
-            border: 2px dashed #e8e3ed;
+            border: 2px dashed var(--border-color);
             border-radius: 8px;
             background: transparent;
-            color: #635870;
+            color: var(--text-label);
             font-size: 1rem;
             font-weight: 500;
             cursor: pointer;
@@ -1107,14 +1211,14 @@
         .dog-calculator-add-food-btn:disabled {
             opacity: 0.5;
             cursor: not-allowed;
-            border-color: #e8e3ed;
-            color: #635870;
+            border-color: var(--border-color);
+            color: var(--text-label);
             background: transparent;
         }
 
         .dog-calculator-add-food-btn:disabled:hover {
-            border-color: #e8e3ed;
-            color: #635870;
+            border-color: var(--border-color);
+            color: var(--text-label);
             background: transparent;
         }
 
@@ -1140,12 +1244,12 @@
 
         .dog-calculator-food-result-label {
             font-weight: 500;
-            color: #6f3f6d;
+            color: var(--text-primary);
         }
 
         .dog-calculator-food-result-value {
             font-weight: 600;
-            color: #6f3f6d;
+            color: var(--text-primary);
             padding: 2px 8px;
             background: rgba(241, 154, 95, 0.15);
             border-radius: 3px;
@@ -1154,35 +1258,35 @@
 
         /* Dark theme support for food sources */
         .dog-calculator-container.theme-dark .dog-calculator-food-source-card {
-            background: #312b3b;
-            border-color: #433c4f;
+            background: var(--bg-secondary);
+            border-color: var(--border-color);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-food-source-title {
-            color: #f5f3f7;
+            color: var(--text-primary);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-percentage-label {
-            color: #f5f3f7;
+            color: var(--text-primary);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-percentage-slider {
-            background: #433c4f;
+            background: var(--border-color);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-percentage-input {
-            background: #433c4f;
+            background: var(--border-color);
             border-color: #524a5f;
-            color: #f5f3f7;
+            color: var(--text-primary);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-percentage-group {
-            border-color: #433c4f;
+            border-color: var(--border-color);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-add-food-btn {
-            border-color: #433c4f;
-            color: #b8b0c2;
+            border-color: var(--border-color);
+            color: var(--text-secondary)
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-add-food-btn:hover {
@@ -1197,46 +1301,46 @@
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-food-result-label {
-            color: #f5f3f7;
+            color: var(--text-primary);
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-food-result-value {
-            color: #f5f3f7;
+            color: var(--text-primary);
             background: rgba(241, 154, 95, 0.2);
         }
 
         /* System theme support for food sources */
         @media (prefers-color-scheme: dark) {
             .dog-calculator-container.theme-system .dog-calculator-food-source-card {
-                background: #312b3b;
-                border-color: #433c4f;
+                background: var(--bg-secondary);
+                border-color: var(--border-color);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-food-source-title {
-                color: #f5f3f7;
+                color: var(--text-primary);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-percentage-label {
-                color: #f5f3f7;
+                color: var(--text-primary);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-percentage-slider {
-                background: #433c4f;
+                background: var(--border-color);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-percentage-input {
-                background: #433c4f;
+                background: var(--border-color);
                 border-color: #524a5f;
-                color: #f5f3f7;
+                color: var(--text-primary);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-percentage-group {
-                border-color: #433c4f;
+                border-color: var(--border-color);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-add-food-btn {
-                border-color: #433c4f;
-                color: #b8b0c2;
+                border-color: var(--border-color);
+                color: var(--text-secondary)
             }
 
             .dog-calculator-container.theme-system .dog-calculator-add-food-btn:hover {
@@ -1251,11 +1355,11 @@
             }
 
             .dog-calculator-container.theme-system .dog-calculator-food-result-label {
-                color: #f5f3f7;
+                color: var(--text-primary);
             }
 
             .dog-calculator-container.theme-system .dog-calculator-food-result-value {
-                color: #f5f3f7;
+                color: var(--text-primary);
                 background: rgba(241, 154, 95, 0.2);
             }
         }
@@ -1331,7 +1435,7 @@
         }
 
         .dog-calculator-lock-icon.unlocked {
-            color: #635870;
+            color: var(--text-label);
         }
 
         .dog-calculator-lock-icon.disabled {
@@ -1346,7 +1450,7 @@
 
         /* Dark theme support for lock icons */
         .dog-calculator-container.theme-dark .dog-calculator-lock-icon.unlocked {
-            color: #b8b0c2;
+            color: var(--text-secondary)
         }
 
         .dog-calculator-container.theme-dark .dog-calculator-lock-icon.locked {
@@ -1356,7 +1460,7 @@
         /* System theme support for lock icons */
         @media (prefers-color-scheme: dark) {
             .dog-calculator-container.theme-system .dog-calculator-lock-icon.unlocked {
-                color: #b8b0c2;
+                color: var(--text-secondary)
             }
 
             .dog-calculator-container.theme-system .dog-calculator-lock-icon.locked {
@@ -1480,6 +1584,152 @@
             font-size: 1rem;
         }
 
+        /* Warning styles for missing energy content */
+        .dog-calculator-warning {
+            color: #e11d48;
+            font-weight: 500;
+            font-size: 1.2rem;
+            text-align: left;
+            cursor: help;
+        }
+
+        /* Inline unit selector in results */
+        .dog-calculator-inline-unit {
+            margin-left: 12px;
+            min-width: 110px;
+            padding: 4px 8px;
+            background: var(--bg-primary);
+            border: 1px solid rgba(241, 154, 95, 0.4);
+            border-radius: 6px;
+            color: var(--text-primary);
+            font-size: 0.9rem;
+            font-weight: 500;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            transition: all 0.2s ease;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f3f6d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+            background-repeat: no-repeat;
+            background-position: right 8px center;
+            background-size: 16px;
+            padding-right: 32px;
+        }
+
+        .dog-calculator-inline-unit:hover {
+            border-color: #f19a5f;
+            box-shadow: 0 2px 6px rgba(241, 154, 95, 0.2);
+        }
+
+        .dog-calculator-inline-unit:focus {
+            outline: none;
+            border-color: #f19a5f;
+            box-shadow: 0 0 0 3px rgba(241, 154, 95, 0.1);
+        }
+
+        /* Inline days input in breakdown header */
+        .dog-calculator-inline-days {
+            width: 60px;
+            padding: 2px 6px;
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+            text-align: center;
+            font-size: inherit;
+            font-family: inherit;
+            margin: 0 4px;
+        }
+
+        /* Unit selection buttons */
+        .dog-calculator-unit-buttons {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin: 24px auto;
+            flex-wrap: wrap;
+            width: fit-content;
+        }
+
+        .dog-calculator-unit-btn {
+            padding: 8px 14px;
+            border: 2px solid var(--border-color);
+            border-radius: 6px;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            font-size: 0.9rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            min-width: 50px;
+            text-align: center;
+        }
+
+        .dog-calculator-unit-btn:hover {
+            border-color: #f19a5f;
+            background: rgba(241, 154, 95, 0.1);
+        }
+
+        .dog-calculator-unit-btn.active {
+            border-color: #f19a5f;
+            background: #f19a5f;
+            color: white;
+        }
+
+        /* Mobile responsive adjustments for inline unit selector */
+        @media (max-width: 576px) {
+            .dog-calculator-result-item {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 8px;
+            }
+
+            .dog-calculator-result-label {
+                width: 100%;
+                text-align: center;
+                margin-bottom: 4px;
+            }
+
+            .dog-calculator-result-value {
+                display: inline-block;
+            }
+
+            .dog-calculator-inline-unit {
+                display: inline-block;
+                margin-left: 8px;
+                min-width: 90px;
+                vertical-align: middle;
+            }
+
+            /* Center the breakdown header on mobile */
+            .dog-calculator-section-title {
+                text-align: center;
+            }
+
+            /* Ensure food breakdown items stay on one line */
+            .dog-calculator-food-amount-item {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                flex-wrap: nowrap;
+                text-align: left;
+            }
+
+            .dog-calculator-food-amount-label {
+                flex: 1;
+                min-width: 0;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                text-align: left;
+            }
+
+            .dog-calculator-food-amount-value {
+                flex-shrink: 0;
+                margin-left: 8px;
+                text-align: right;
+            }
+        }
+
         .dog-calculator-total-row {
             display: flex;
             justify-content: space-between;
@@ -1562,13 +1812,28 @@
         /* Responsive adjustments */
         @media (max-width: 576px) {
             .dog-calculator-food-amount-item {
-                flex-direction: column;
+                flex-direction: row !important;
                 gap: 0.5rem;
-                text-align: center;
+                text-align: left !important;
+                justify-content: space-between !important;
+                align-items: center !important;
+                flex-wrap: nowrap !important;
             }
 
             .dog-calculator-food-amount-label {
-                justify-content: center;
+                justify-content: flex-start !important;
+                text-align: left !important;
+                flex: 1;
+                min-width: 0;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            .dog-calculator-food-amount-value {
+                flex-shrink: 0;
+                margin-left: 8px;
+                text-align: right !important;
             }
 
             .dog-calculator-food-source-name-input {
@@ -1686,6 +1951,14 @@
                         </div>
                     </div>
 
+                    <!-- Unit Selection Buttons -->
+                    <div class="dog-calculator-unit-buttons" id="unitButtons" style="display: none;">
+                        <button type="button" class="dog-calculator-unit-btn active" data-unit="g">g</button>
+                        <button type="button" class="dog-calculator-unit-btn" data-unit="kg">kg</button>
+                        <button type="button" class="dog-calculator-unit-btn" data-unit="oz">oz</button>
+                        <button type="button" class="dog-calculator-unit-btn" data-unit="lb">lb</button>
+                    </div>
+
                     <!-- Daily Total Results -->
                     <div class="dog-calculator-results" id="dailyFoodResults" style="display: none;">
                         <div class="dog-calculator-result-item">
@@ -1694,26 +1967,21 @@
                         </div>
                     </div>
 
-                    <!-- Days and Total Food Calculation -->
-                    <div class="dog-calculator-input-group" style="margin-top: 20px;">
-                        <div class="dog-calculator-form-group">
-                            <label for="days">Number of Days:</label>
-                            <input type="number" id="days" min="1" step="1" value="1" placeholder="Enter number of days" aria-describedby="daysHelp">
-                            <div id="daysError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid number of days (minimum 1)</div>
-                        </div>
-                        <div class="dog-calculator-form-group">
-                            <label for="unit">Display Unit:</label>
-                            <select id="unit" class="dog-calculator-unit-select" aria-describedby="unitHelp">
-                                <option value="g">grams (g)</option>
-                                <option value="kg">kilograms (kg)</option>
-                                <option value="oz">ounces (oz)</option>
-                                <option value="lb">pounds (lb)</option>
-                            </select>
-                        </div>
-                    </div>
+                    <!-- Hidden select for compatibility -->
+                    <select id="unit" style="display: none;" aria-describedby="unitHelp">
+                        <option value="g">grams (g)</option>
+                        <option value="kg">kilograms (kg)</option>
+                        <option value="oz">ounces (oz)</option>
+                        <option value="lb">pounds (lb)</option>
+                    </select>
 
                     <div class="dog-calculator-food-amounts-section" id="foodAmountsSection" style="display: none;">
-                        <h4 class="dog-calculator-section-title">Food Amount Breakdown:</h4>
+                        <h4 class="dog-calculator-section-title">
+                            Calculate amounts for 
+                            <input type="number" id="days" min="1" step="1" value="1" placeholder="1" aria-describedby="daysHelp" class="dog-calculator-inline-days"> 
+                            <span id="dayLabel">day</span>:
+                        </h4>
+                        <div id="daysError" class="dog-calculator-error dog-calculator-hidden">Please enter a valid number of days (minimum 1)</div>
                         <div id="foodAmountsList" class="dog-calculator-food-amounts-list">
                             <!-- Individual food amounts will be populated here -->
                         </div>
@@ -1880,6 +2148,7 @@
                 this.redistributePercentages();
                 this.renderFoodSource(foodSource);
                 this.updateAddButton();
+                this.updateRemoveButtons();
                 this.refreshAllPercentageUI();
             }
 
@@ -1903,6 +2172,7 @@
                 this.redistributePercentages();
                 this.updateFoodSourceNames();
                 this.updateAddButton();
+                this.updateRemoveButtons();
                 this.refreshAllPercentageUI();
             }
 
@@ -2281,6 +2551,18 @@
                 }
             }
 
+            updateRemoveButtons() {
+                // Show/hide remove buttons based on whether we have more than one source
+                const hasMultipleSources = this.foodSources.length > 1;
+                
+                this.foodSources.forEach(fs => {
+                    const removeBtn = document.getElementById(`remove-${fs.id}`);
+                    if (removeBtn) {
+                        removeBtn.style.display = hasMultipleSources ? 'block' : 'none';
+                    }
+                });
+            }
+
             renderFoodSource(foodSource) {
                 const container = this.container.querySelector('#foodSources');
                 if (!container) return;
@@ -2289,14 +2571,13 @@
                     <div class="dog-calculator-food-source-card" id="foodSource-${foodSource.id}">
                         <div class="dog-calculator-food-source-header">
                             <input type="text" class="dog-calculator-food-source-name-input" id="food-title-${foodSource.id}" value="${foodSource.name}" placeholder="Enter food name" maxlength="50" title="Click to edit food source name">
-                            ${this.foodSources.length > 1 ? `<button class="dog-calculator-remove-food-btn" id="remove-${foodSource.id}" type="button" title="Remove this food source">×</button>` : ''}
+                            <button class="dog-calculator-remove-food-btn" id="remove-${foodSource.id}" type="button" title="Remove this food source" style="display: ${this.foodSources.length > 1 ? 'block' : 'none'}">×</button>
                         </div>
                         
                         <div class="dog-calculator-input-group">
                             <div class="dog-calculator-form-group">
                                 <label for="energy-${foodSource.id}">Energy Content:</label>
                                 <input type="number" id="energy-${foodSource.id}" min="1" step="1" placeholder="Enter energy content" value="${foodSource.energy}">
-                                <div id="energy-error-${foodSource.id}" class="dog-calculator-error dog-calculator-hidden">Please enter a valid energy content</div>
                             </div>
                             <div class="dog-calculator-form-group">
                                 <label for="energy-unit-${foodSource.id}">Unit:</label>
@@ -2308,6 +2589,7 @@
                                 </select>
                             </div>
                         </div>
+                        <div id="energy-error-${foodSource.id}" class="dog-calculator-error dog-calculator-hidden">Please enter a valid energy content</div>
 
                         <div class="dog-calculator-percentage-group">
                             <label class="dog-calculator-percentage-label" for="percentage-slider-${foodSource.id}">
@@ -2514,11 +2796,28 @@
                 if (dogTypeSelect) dogTypeSelect.addEventListener('change', () => this.updateCalorieCalculations());
                 
                 if (daysInput) {
-                    daysInput.addEventListener('input', () => this.updateFoodCalculations());
+                    daysInput.addEventListener('input', () => {
+                        this.updateDayLabel();
+                        this.updateFoodCalculations();
+                    });
                     daysInput.addEventListener('blur', () => this.validateDays());
                 }
                 
                 if (unitSelect) unitSelect.addEventListener('change', () => this.updateFoodCalculations());
+
+                // Unit button event listeners
+                const unitButtons = this.container.querySelectorAll('.dog-calculator-unit-btn');
+                unitButtons.forEach(button => {
+                    button.addEventListener('click', (e) => {
+                        const selectedUnit = e.target.dataset.unit;
+                        this.setActiveUnitButton(selectedUnit);
+                        // Update hidden select to trigger existing logic
+                        if (unitSelect) {
+                            unitSelect.value = selectedUnit;
+                            this.updateFoodCalculations();
+                        }
+                    });
+                });
                 
                 if (unitToggle) unitToggle.addEventListener('change', () => this.toggleUnits());
 
@@ -2605,6 +2904,8 @@
                             '<option value="lb">pounds (lb)</option>' +
                             '<option value="g">grams (g)</option>' +
                             '<option value="kg">kilograms (kg)</option>';
+                        unitSelect.value = 'oz'; // Auto-select ounces for imperial
+                        this.setActiveUnitButton('oz'); // Sync unit buttons
                     }
                     
                     // Update energy units for all food sources to kcal/cup for imperial
@@ -2629,6 +2930,8 @@
                             '<option value="kg">kilograms (kg)</option>' +
                             '<option value="oz">ounces (oz)</option>' +
                             '<option value="lb">pounds (lb)</option>';
+                        unitSelect.value = 'g'; // Auto-select grams for metric
+                        this.setActiveUnitButton('g'); // Sync unit buttons
                     }
                     
                     // Update energy units for all food sources to kcal/100g for metric
@@ -2735,6 +3038,25 @@
                 }
             }
 
+            updateDayLabel() {
+                const days = this.container.querySelector('#days')?.value;
+                const dayLabel = this.container.querySelector('#dayLabel');
+                if (dayLabel && days) {
+                    const numDays = parseInt(days);
+                    dayLabel.textContent = numDays === 1 ? 'day' : 'days';
+                }
+            }
+
+            setActiveUnitButton(unit) {
+                const unitButtons = this.container.querySelectorAll('.dog-calculator-unit-btn');
+                unitButtons.forEach(button => {
+                    button.classList.remove('active');
+                    if (button.dataset.unit === unit) {
+                        button.classList.add('active');
+                    }
+                });
+            }
+
             updateCalorieCalculations() {
                 const dogTypeSelect = this.container.querySelector('#dogType');
                 const calorieResults = this.container.querySelector('#calorieResults');
@@ -2796,6 +3118,8 @@
 
                 const days = daysInput.value;
                 const unit = unitSelect.value;
+                const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
+                const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
                 
                 // Clear all food source errors first
                 this.foodSources.forEach(fs => {
@@ -2809,6 +3133,10 @@
                     foodAmountsSection.style.display = 'none';
                     dailyFoodResults.style.display = 'none';
                     if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
+                    
+                    // Hide unit buttons when validation fails
+                    const unitButtons = this.container.querySelector('#unitButtons');
+                    if (unitButtons) unitButtons.style.display = 'none';
                     return;
                 }
 
@@ -2831,11 +3159,22 @@
                             percentage: fs.percentage,
                             dailyGrams: dailyGramsForThisFood,
                             calories: dailyCaloriesForThisFood,
-                            isLocked: fs.isLocked
+                            isLocked: fs.isLocked,
+                            hasEnergyContent: true
                         });
                         
                         totalDailyGrams += dailyGramsForThisFood;
                         hasValidFoods = true;
+                    } else if (fs.percentage > 0) {
+                        // Include food sources without energy content but show them as needing energy content
+                        foodBreakdowns.push({
+                            name: fs.name,
+                            percentage: fs.percentage,
+                            dailyGrams: 0,
+                            calories: 0,
+                            isLocked: fs.isLocked,
+                            hasEnergyContent: false
+                        });
                     }
                 });
 
@@ -2849,23 +3188,71 @@
                     });
                     
                     dailyFoodResults.style.display = 'none';
-                    foodAmountsSection.style.display = 'none';
                     if (foodBreakdownResults) foodBreakdownResults.style.display = 'none';
+                    
+                    // Hide unit buttons when no valid foods
+                    const unitButtons = this.container.querySelector('#unitButtons');
+                    if (unitButtons) unitButtons.style.display = 'none';
+                    
+                    // If we have any food sources without energy content, still show the breakdown section
+                    if (foodBreakdowns.length > 0) {
+                        // Show food amounts section with warnings for missing energy content
+                        const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
+                        
+                        const foodAmountsHTML = foodBreakdowns.map(breakdown => {
+                            const lockIndicator = breakdown.isLocked ? '<span class="dog-calculator-lock-indicator">🔒</span>' : '';
+                            
+                            return `
+                                <div class="dog-calculator-food-amount-item">
+                                    <div class="dog-calculator-food-amount-label">
+                                        <span>${breakdown.name}</span>
+                                        <span class="dog-calculator-food-percentage">${breakdown.percentage}%</span>
+                                        ${lockIndicator}
+                                    </div>
+                                    <div class="dog-calculator-food-amount-value dog-calculator-warning" title="Enter energy content to calculate amount">
+                                        ⚠️
+                                    </div>
+                                </div>
+                            `;
+                        }).join('');
+                        
+                        if (foodAmountsList) {
+                            foodAmountsList.innerHTML = foodAmountsHTML;
+                        }
+                        
+                        if (totalAmountDisplay) {
+                            totalAmountDisplay.textContent = "Enter energy content for all foods";
+                        }
+                        
+                        foodAmountsSection.style.display = 'block';
+                        this.sendHeightToParent();
+                    } else {
+                        foodAmountsSection.style.display = 'none';
+                    }
                     return;
                 }
 
-                // Update daily food results (total)
-                dailyFoodValue.textContent = this.formatNumber(totalDailyGrams, 1) + ' g/day';
+                // Update daily food results (total) - will be updated with proper units later
                 dailyFoodResults.style.display = 'block';
+                
+                // Show unit buttons when daily results are shown
+                const unitButtons = this.container.querySelector('#unitButtons');
+                if (unitButtons) unitButtons.style.display = 'flex';
 
                 // Update per-food breakdown
                 if (foodBreakdownList && foodBreakdowns.length > 1) {
-                    const breakdownHTML = foodBreakdowns.map(breakdown => `
-                        <div class="dog-calculator-food-result-item">
-                            <span class="dog-calculator-food-result-label">${breakdown.name} (${breakdown.percentage}%${breakdown.isLocked ? ' - locked' : ''}):</span>
-                            <span class="dog-calculator-food-result-value">${this.formatNumber(breakdown.dailyGrams, 1)} g/day</span>
-                        </div>
-                    `).join('');
+                    const breakdownHTML = foodBreakdowns.map(breakdown => {
+                        const valueContent = breakdown.hasEnergyContent 
+                            ? `${this.formatNumber(this.convertUnits(breakdown.dailyGrams, unit), decimals)} ${unitLabel}/day`
+                            : `<span class="dog-calculator-warning" title="Enter energy content to calculate amount">⚠️</span>`;
+                        
+                        return `
+                            <div class="dog-calculator-food-result-item">
+                                <span class="dog-calculator-food-result-label">${breakdown.name} (${breakdown.percentage}%${breakdown.isLocked ? ' - locked' : ''}):</span>
+                                <span class="dog-calculator-food-result-value">${valueContent}</span>
+                            </div>
+                        `;
+                    }).join('');
                     
                     foodBreakdownList.innerHTML = breakdownHTML;
                     if (foodBreakdownResults) foodBreakdownResults.style.display = 'block';
@@ -2874,27 +3261,46 @@
                 }
 
                 // Generate individual food amount breakdown
-                const unitLabel = unit === 'g' ? 'g' : unit === 'kg' ? 'kg' : unit === 'oz' ? 'oz' : 'lb';
-                const decimals = unit === 'g' ? 0 : unit === 'kg' ? 2 : 1;
+                
+                // Update daily food value with correct units
+                const convertedDailyTotal = this.convertUnits(totalDailyGrams, unit);
+                dailyFoodValue.textContent = this.formatNumber(convertedDailyTotal, decimals) + ` ${unitLabel}/day`;
                 
                 // Build HTML for individual food amounts
                 const foodAmountsHTML = foodBreakdowns.map(breakdown => {
-                    const totalGramsForDays = breakdown.dailyGrams * numDays;
-                    const convertedAmount = this.convertUnits(totalGramsForDays, unit);
                     const lockIndicator = breakdown.isLocked ? '<span class="dog-calculator-lock-indicator">🔒</span>' : '';
                     
-                    return `
-                        <div class="dog-calculator-food-amount-item">
-                            <div class="dog-calculator-food-amount-label">
-                                <span>${breakdown.name}</span>
-                                <span class="dog-calculator-food-percentage">${breakdown.percentage}%</span>
-                                ${lockIndicator}
+                    if (!breakdown.hasEnergyContent) {
+                        // Show warning for food sources without energy content
+                        return `
+                            <div class="dog-calculator-food-amount-item">
+                                <div class="dog-calculator-food-amount-label">
+                                    <span>${breakdown.name}</span>
+                                    <span class="dog-calculator-food-percentage">${breakdown.percentage}%</span>
+                                    ${lockIndicator}
+                                </div>
+                                <div class="dog-calculator-food-amount-value dog-calculator-warning" title="Enter energy content to calculate amount">
+                                    ⚠️
+                                </div>
                             </div>
-                            <div class="dog-calculator-food-amount-value">
-                                ${this.formatNumber(convertedAmount, decimals)} ${unitLabel}
+                        `;
+                    } else {
+                        const totalGramsForDays = breakdown.dailyGrams * numDays;
+                        const convertedAmount = this.convertUnits(totalGramsForDays, unit);
+                        
+                        return `
+                            <div class="dog-calculator-food-amount-item">
+                                <div class="dog-calculator-food-amount-label">
+                                    <span>${breakdown.name}</span>
+                                    <span class="dog-calculator-food-percentage">${breakdown.percentage}%</span>
+                                    ${lockIndicator}
+                                </div>
+                                <div class="dog-calculator-food-amount-value">
+                                    ${this.formatNumber(convertedAmount, decimals)} ${unitLabel}
+                                </div>
                             </div>
-                        </div>
-                    `;
+                        `;
+                    }
                 }).join('');
                 
                 // Calculate and display total