Redesign main app: slim top bar, dynamic sky hero, nowcast, scrub chart, unified palette

- One slate/blue palette across the app, dashboard, account/login pages (data colours
  stay orange = warm, blue = cool on the dashboard)
- Slim sticky top bar with location chip, gear (settings) and ? (learn); 4-tab nav
  (Now, Station, Map, Alerts) with a thumb-reach bottom bar on phones
- Hero sky gradient by condition/time with rain, storm, snow and star effects
  (respects reduced motion); keeps the searched city and badges when temps come from your station
- One-line summary, 'Next 2 hours' bars and rain countdown from 15-minute precipitation,
  rain/cold-aware 'Bring' chips; yesterday + 'vs usual' context from the station
- Scrubbable hourly chart (temp, rain chance, wind), 7-day range bars, AQI gauge,
  details tiles instead of drawers, taller radar with location marker + alert polygons
- Skeleton loading instead of a full-screen spinner, sticky section headers, safe areas
- Server: minutely_15 precipitation, public /api/station/summary

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

app/public/style.css

@@ -1,15 +1,15 @@
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
 :root {
-  --ink: #1a1a1a;
-  --ink-mid: #3d3730;
-  --ink-light: #5f5649;
-  --paper: #f5f2ec;
-  --paper-dark: #ece7db;
-  --paper-darker: #ddd6c7;
-  --border: #b9ae9b;
-  --accent: #c25a2a;
-  --cool: #2a6b8a;
+  --ink: #0d1b2a;
+  --ink-mid: #2b3f55;
+  --ink-light: #5a7089;
+  --paper: #edf2f7;
+  --paper-dark: #ffffff;
+  --paper-darker: #e3eaf2;
+  --border: #ccd6e2;
+  --accent: #2563eb;
+  --cool: #0e7490;
   --mono: 'Segoe UI Rounded', 'Trebuchet MS', 'Avenir Next', 'Segoe UI', sans-serif;
   --serif: 'Segoe UI Rounded', 'Trebuchet MS', 'Avenir Next', 'Segoe UI', sans-serif;
   --card-bg: var(--paper-dark);
@@ -25,28 +25,28 @@
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    --ink: #ece7dc;
-    --ink-mid: #d2c8b1;
-    --ink-light: #beb399;
-    --paper: #191510;
-    --paper-dark: #201c16;
-    --paper-darker: #2b2620;
-    --border: #3a342a;
-    --accent: #e07848;
-    --cool: #5ab0d8;
+    --ink: #dce6f0;
+    --ink-mid: #b7c6d6;
+    --ink-light: #8aa2b8;
+    --paper: #070c14;
+    --paper-dark: #0d1720;
+    --paper-darker: #101c29;
+    --border: #22405c;
+    --accent: #60a5fa;
+    --cool: #38bdf8;
   }
 }
 
 :root[data-theme="dark"] {
-  --ink: #ece7dc;
-  --ink-mid: #d2c8b1;
-  --ink-light: #beb399;
-  --paper: #191510;
-  --paper-dark: #201c16;
-  --paper-darker: #2b2620;
-  --border: #3a342a;
-  --accent: #e07848;
-  --cool: #5ab0d8;
+  --ink: #dce6f0;
+  --ink-mid: #b7c6d6;
+  --ink-light: #8aa2b8;
+  --paper: #070c14;
+  --paper-dark: #0d1720;
+  --paper-darker: #101c29;
+  --border: #22405c;
+  --accent: #60a5fa;
+  --cool: #38bdf8;
 }
 
 html, body {
@@ -366,7 +366,7 @@ a:hover { text-decoration: underline; }
 .map-location-dot {
   width: 12px;
   height: 12px;
-  background: #e07848;
+  background: #60a5fa;
   border: 2px solid #fff;
   border-radius: 50%;
   box-shadow: 0 1px 4px rgba(0,0,0,0.5);