Add hand-drawn sketch favicon and PWA icons, align popup form labels above inputs, and compact shopping list typography

app/static/favicon.svg

@@ -0,0 +1,82 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="100%" height="100%">
+  <defs>
+    <filter id="sketch-shadow" x="-8%" y="-8%" width="120%" height="120%">
+      <feDropShadow dx="3" dy="5" stdDeviation="6" flood-color="#1e4d3b" flood-opacity="0.18"/>
+    </filter>
+  </defs>
+
+  <!-- Background: Warm Cream Rounded Sketch Card -->
+  <rect x="24" y="24" width="464" height="464" rx="105" ry="105" fill="#FAF6F0" filter="url(#sketch-shadow)"/>
+  
+  <!-- Outer Hand-drawn Sketch Border (Double Organic Ring) -->
+  <rect x="36" y="36" width="440" height="440" rx="95" ry="95" fill="none" stroke="#1E4D3B" stroke-width="7" stroke-dasharray="1200" stroke-linecap="round"/>
+  <rect x="44" y="44" width="424" height="424" rx="88" ry="88" fill="none" stroke="#1E4D3B" stroke-width="2.5" stroke-opacity="0.45" stroke-linecap="round"/>
+
+  <!-- Sketch Doodles / Sparkles -->
+  <!-- Top Right Sparkle -->
+  <path d="M 405 105 L 405 135 M 390 120 L 420 120" stroke="#D4A338" stroke-width="4.5" stroke-linecap="round"/>
+  <!-- Top Left Sparkle -->
+  <path d="M 105 135 L 105 155 M 95 145 L 115 145" stroke="#D98A72" stroke-width="3.5" stroke-linecap="round"/>
+
+  <!-- Rising Steam Swirls (Playful Hand-drawn Lines) -->
+  <path d="M 215 185 C 205 150 230 135 220 100" fill="none" stroke="#D4A338" stroke-width="6" stroke-linecap="round"/>
+  <path d="M 256 180 C 265 145 245 130 260 90" fill="none" stroke="#1E4D3B" stroke-width="6.5" stroke-linecap="round"/>
+  <path d="M 295 185 C 310 155 285 135 305 105" fill="none" stroke="#D98A72" stroke-width="5.5" stroke-linecap="round"/>
+
+  <!-- Sketched Crossed Wooden Spoon & Fork behind pot -->
+  <!-- Spoon (Diagonal Top-Left to Bottom-Right) -->
+  <g stroke="#1E4D3B" stroke-linecap="round" stroke-linejoin="round">
+    <!-- Spoon Handle -->
+    <path d="M 145 125 L 345 375" stroke="#1E4D3B" stroke-width="9" stroke-linecap="round"/>
+    <!-- Spoon Bowl -->
+    <ellipse cx="135" cy="115" rx="26" ry="34" transform="rotate(-40 135 115)" fill="#F5EFE0" stroke="#1E4D3B" stroke-width="7"/>
+    <!-- Spoon inner accent -->
+    <ellipse cx="135" cy="115" rx="14" ry="20" transform="rotate(-40 135 115)" fill="none" stroke="#D4A338" stroke-width="3"/>
+
+    <!-- Fork (Diagonal Top-Right to Bottom-Left) -->
+    <path d="M 365 125 L 165 375" stroke="#1E4D3B" stroke-width="9" stroke-linecap="round"/>
+    <!-- Fork Head & Prongs -->
+    <path d="M 365 125 L 395 90 M 355 135 L 380 98 M 375 115 L 410 82" stroke="#1E4D3B" stroke-width="6" stroke-linecap="round"/>
+  </g>
+
+  <!-- Cooking Pot Body & Lid -->
+  <g filter="url(#sketch-shadow)">
+    <!-- Pot Body Fill & Outline -->
+    <path d="M 150 250 L 165 390 C 170 425 210 435 256 435 C 302 435 342 425 347 390 L 362 250 Z" 
+          fill="#1E4D3B" stroke="#1E4D3B" stroke-width="7" stroke-linejoin="round"/>
+    
+    <!-- Pot Body Inner Highlight / Paper Wash Accent -->
+    <path d="M 165 260 L 176 385 C 180 410 215 420 256 420 C 297 420 332 410 336 385 L 347 260 Z" 
+          fill="#27614B"/>
+
+    <!-- Sketch Hatching Lines on Pot for Hand-drawn Look -->
+    <path d="M 185 285 L 215 410" stroke="#FAF6F0" stroke-width="3.5" stroke-linecap="round" opacity="0.35"/>
+    <path d="M 205 285 L 230 415" stroke="#FAF6F0" stroke-width="2.5" stroke-linecap="round" opacity="0.3"/>
+    
+    <!-- Pot Accent Stripe -->
+    <path d="M 158 320 Q 256 345 354 320" fill="none" stroke="#D4A338" stroke-width="4.5" stroke-linecap="round"/>
+
+    <!-- Left Pot Handle -->
+    <path d="M 152 275 C 115 275 115 320 155 320" fill="none" stroke="#1E4D3B" stroke-width="8" stroke-linecap="round"/>
+    <path d="M 152 280 C 125 280 125 315 155 315" fill="none" stroke="#FAF6F0" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
+
+    <!-- Right Pot Handle -->
+    <path d="M 360 275 C 397 275 397 320 357 320" fill="none" stroke="#1E4D3B" stroke-width="8" stroke-linecap="round"/>
+    <path d="M 360 280 C 387 280 387 315 357 315" fill="none" stroke="#FAF6F0" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
+
+    <!-- Pot Rim -->
+    <ellipse cx="256" cy="250" rx="108" ry="19" fill="#2E7057" stroke="#1E4D3B" stroke-width="7"/>
+
+    <!-- Tilted Pot Lid with Cute Sketch Handle -->
+    <!-- Lid Knob -->
+    <ellipse cx="256" cy="200" rx="16" ry="12" fill="#D4A338" stroke="#1E4D3B" stroke-width="5"/>
+    <path d="M 256 212 L 256 220" stroke="#1E4D3B" stroke-width="7" stroke-linecap="round"/>
+    <!-- Lid Base -->
+    <path d="M 156 240 Q 256 210 356 240 Q 256 254 156 240 Z" fill="#FAF6F0" stroke="#1E4D3B" stroke-width="6.5" stroke-linejoin="round"/>
+    <!-- Lid Accent Line -->
+    <path d="M 180 234 Q 256 218 332 234" fill="none" stroke="#D98A72" stroke-width="3" stroke-linecap="round"/>
+  </g>
+
+  <!-- Little Cheerful Heart / Chef Touch on Pot Center -->
+  <path d="M 256 360 C 256 360 240 345 240 334 C 240 326 247 320 256 327 C 265 320 272 326 272 334 C 272 345 256 360 256 360 Z" fill="#D98A72" stroke="#FAF6F0" stroke-width="2"/>
+</svg>

app/static/sw.js

@@ -1,13 +1,16 @@
-// What To Cook? - PWA Service Worker (v1.0.0)
-const CACHE_NAME = 'wtc-cache-v1';
+// What To Cook? - PWA Service Worker (v1.1.0)
+const CACHE_NAME = 'wtc-cache-v2';
 const PRECACHE_URLS = [
   '/',
   '/cookbook',
   '/shopping-list',
   '/manifest.json',
+  '/favicon.ico',
+  '/static/favicon.svg',
   '/static/cookbook.css',
   '/static/icon-192.png',
-  '/static/icon-512.png'
+  '/static/icon-512.png',
+  '/static/apple-touch-icon.png'
 ];
 
 // Install: Pre-cache shell assets