diff --git a/src/app.css b/src/app.css
index 516c499..91870f8 100644
--- a/src/app.css
+++ b/src/app.css
@@ -4,12 +4,34 @@
 :root {
   --min-col-width: 160px;
   --grid-gap: 1rem;
+
+  /* Warm neutral palette */
+  --pico-background-color: #F7F5F2;
+  --pico-card-background-color: #FDFCFB;
+  --pico-card-border-color: #E8E4DF;
+  --pico-color: #2C2C2C;
+  --pico-muted-color: #888880;
+  --pico-muted-border-color: #E0DCD7;
+  --pico-primary: #5B7FA6;
+  --pico-primary-background: rgba(91, 127, 166, 0.08);
+  --pico-secondary-background: rgba(0, 0, 0, 0.03);
+
+  /* Shadow for card elevation */
+  --shadow-color: 30deg 8% 20%;
+  --shadow-low:
+    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.06),
+    0.6px 1px 1.4px hsl(var(--shadow-color) / 0.06),
+    1.2px 2px 2.8px hsl(var(--shadow-color) / 0.07);
+  --shadow-medium:
+    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.07),
+    1.2px 2px 2.8px hsl(var(--shadow-color) / 0.08),
+    3px 5px 7px hsl(var(--shadow-color) / 0.09);
 }
 
 /* ── Results grid ──────────────────────────────────────────────────────────── */
 .results-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--min-col-width), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(var(--min-col-width), 1fr));
   gap: var(--grid-gap);
   margin-top: 1.5rem;
 }
@@ -18,23 +40,27 @@
 .result-tile {
   cursor: pointer;
   padding: 0.75rem 1rem;
-  border: 1px solid var(--pico-muted-border-color, #ccc);
+  background-color: var(--pico-card-background-color);
+  border: 1px solid var(--pico-card-border-color);
   border-radius: var(--pico-border-radius, 0.25rem);
+  box-shadow: var(--shadow-low);
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
-  transition: background-color 0.15s ease, border-color 0.15s ease;
+  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
   user-select: none;
 }
 
 .result-tile:hover {
-  background-color: var(--pico-secondary-background, rgba(0, 0, 0, 0.04));
-  border-color: var(--pico-primary, #1095c1);
+  background-color: var(--pico-card-background-color);
+  border-color: var(--pico-primary);
+  box-shadow: var(--shadow-medium);
 }
 
 .result-tile.highlighted {
-  border-color: var(--pico-primary, #1095c1);
-  background-color: var(--pico-primary-background, rgba(16, 149, 193, 0.08));
+  background-color: var(--pico-card-background-color);
+  border-color: var(--pico-primary);
+  box-shadow: var(--shadow-medium);
 }
 
 .result-value {
@@ -61,8 +87,9 @@
   padding: 2rem 1rem;
   margin-bottom: 1.5rem;
   border-radius: var(--pico-border-radius, 0.25rem);
-  background-color: var(--pico-primary-background, rgba(16, 149, 193, 0.08));
-  border: 2px solid var(--pico-primary, #1095c1);
+  background-color: var(--pico-card-background-color);
+  border: 2px solid var(--pico-primary);
+  box-shadow: var(--shadow-medium);
   display: flex;
   flex-direction: column;
   align-items: center;