diff --git a/packages/frontend/index.html b/packages/frontend/index.html
index 7323683..70cdfeb 100644
--- a/packages/frontend/index.html
+++ b/packages/frontend/index.html
@@ -5,6 +5,9 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/x-icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
   <title>Recommender</title>
 </head>
 
@@ -13,4 +16,4 @@
   <script type="module" src="/src/main.tsx"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/packages/frontend/src/components/Cards.css b/packages/frontend/src/components/Cards.css
index 444d391..301bdc9 100644
--- a/packages/frontend/src/components/Cards.css
+++ b/packages/frontend/src/components/Cards.css
@@ -3,20 +3,30 @@
 .cards-grid {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  margin-bottom: 32px;
+  gap: var(--sp-3);
+  margin-bottom: var(--sp-8);
 }
 
 .card {
-  background: var(--bg-surface);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 100%),
+    rgba(28, 25, 42, 0.7);
+  backdrop-filter: blur(14px) saturate(150%);
   border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 16px;
-  transition: border-color 0.15s;
+  border-radius: var(--radius-md);
+  padding: var(--sp-4);
+  box-shadow:
+    0 8px 28px rgba(0, 0, 0, 0.18),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
 }
 
 .card:hover {
-  border-color: var(--bg-surface-3);
+  border-color: rgba(232, 168, 124, 0.28);
+  transform: translateY(-1px);
+  box-shadow:
+    0 12px 36px rgba(0, 0, 0, 0.24),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
 
 .card-header {
@@ -31,35 +41,41 @@
   font-size: 11px;
   font-weight: 600;
   padding: 2px 8px;
-  border-radius: 100px;
+  border-radius: var(--radius-pill);
   text-transform: uppercase;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.08em;
   flex-shrink: 0;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
 }
 
 .badge-green {
-  background: rgba(34, 197, 94, 0.15);
+  background: rgba(34, 197, 94, 0.14);
   color: #4ade80;
+  box-shadow: 0 0 18px rgba(34, 197, 94, 0.14);
 }
 
 .badge-blue {
   background: rgba(59, 130, 246, 0.15);
   color: #60a5fa;
+  box-shadow: 0 0 18px rgba(59, 130, 246, 0.14);
 }
 
 .badge-yellow {
   background: rgba(234, 179, 8, 0.15);
   color: #facc15;
+  box-shadow: 0 0 18px rgba(234, 179, 8, 0.12);
 }
 
 .badge-red {
   background: rgba(239, 68, 68, 0.15);
   color: #f87171;
+  box-shadow: 0 0 18px rgba(239, 68, 68, 0.12);
 }
 
 .badge-magenta {
   background: rgba(217, 70, 239, 0.15);
   color: #e879f9;
+  box-shadow: 0 0 18px rgba(217, 70, 239, 0.14);
 }
 
 .badge-verified {
@@ -81,16 +97,16 @@
 }
 
 .card-explanation {
-  font-size: 13px;
+  font-size: 14px;
   color: var(--text-muted);
-  line-height: 1.5;
-  margin-bottom: 8px;
+  line-height: 1.6;
+  margin-bottom: 10px;
 }
 
 .genre-badge {
   font-size: 10px;
   font-weight: 500;
-  background: rgba(148, 163, 184, 0.12);
+  background: rgba(245, 240, 232, 0.08);
   color: var(--text-dim);
   display: inline-block;
   text-transform: none;
@@ -182,7 +198,7 @@
 
 .btn-rerank {
   padding: 12px 28px;
-  background: var(--bg-surface-2);
+  background: rgba(255, 255, 255, 0.05);
   color: var(--text);
   border: 1px solid var(--border);
   border-radius: var(--radius);
@@ -193,9 +209,9 @@
 }
 
 .btn-rerank:hover:not(:disabled) {
-  background: var(--bg-surface-3);
-  border-color: var(--accent);
-  color: var(--accent);
+  background: rgba(255, 255, 255, 0.09);
+  border-color: rgba(232, 168, 124, 0.24);
+  color: var(--text);
 }
 
 .btn-rerank:disabled {
diff --git a/packages/frontend/src/components/Modal.css b/packages/frontend/src/components/Modal.css
index e537d9a..2b9b624 100644
--- a/packages/frontend/src/components/Modal.css
+++ b/packages/frontend/src/components/Modal.css
@@ -7,9 +7,9 @@
   justify-content: center;
   padding: 24px;
   background:
-    radial-gradient(circle at top, rgba(56, 189, 248, 0.12), transparent 32%),
-    radial-gradient(circle at bottom right, rgba(251, 191, 36, 0.12), transparent 28%),
-    rgba(6, 8, 12, 0.76);
+    radial-gradient(circle at top, rgba(232, 168, 124, 0.12), transparent 32%),
+    radial-gradient(circle at bottom right, rgba(245, 240, 232, 0.08), transparent 28%),
+    rgba(10, 8, 15, 0.78);
   backdrop-filter: blur(12px);
 }
 
@@ -21,7 +21,7 @@
   border-radius: 28px;
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 18%),
-    linear-gradient(145deg, rgba(15, 23, 42, 0.97), rgba(17, 24, 39, 0.96));
+    linear-gradient(145deg, rgba(28, 25, 42, 0.96), rgba(22, 19, 34, 0.97));
   box-shadow:
     0 32px 90px rgba(0, 0, 0, 0.45),
     inset 0 1px 0 rgba(255, 255, 255, 0.05);
@@ -41,13 +41,13 @@
   font-size: clamp(1.8rem, 3vw, 2.35rem);
   line-height: 1.05;
   letter-spacing: -0.03em;
-  color: #f8fafc;
+  color: var(--text);
 }
 
 .modal-hero-copy {
   max-width: 560px;
   margin-top: 12px;
-  color: rgba(226, 232, 240, 0.72);
+  color: rgba(245, 240, 232, 0.7);
   font-size: 1rem;
   line-height: 1.6;
 }
@@ -58,8 +58,8 @@
   margin-bottom: 14px;
   padding: 6px 10px;
   border-radius: 999px;
-  background: rgba(56, 189, 248, 0.14);
-  color: #7dd3fc;
+  background: rgba(232, 168, 124, 0.14);
+  color: var(--accent);
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.12em;
@@ -84,9 +84,9 @@
 .modal-close:hover:not(:disabled),
 .modal-back:hover:not(:disabled) {
   transform: translateY(-1px);
-  color: #f8fafc;
-  border-color: rgba(125, 211, 252, 0.34);
-  background: rgba(56, 189, 248, 0.08);
+  color: var(--text);
+  border-color: rgba(232, 168, 124, 0.34);
+  background: rgba(232, 168, 124, 0.08);
 }
 
 .modal-close:disabled,
@@ -118,7 +118,8 @@
   border-radius: 24px;
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 100%),
-    rgba(15, 23, 42, 0.58);
+    rgba(28, 25, 42, 0.58);
+  backdrop-filter: blur(16px) saturate(160%);
 }
 
 .modal-section-header {
@@ -131,7 +132,7 @@
 .modal-section-header h3,
 .settings-card-header h3 {
   font-size: 1.08rem;
-  color: #f8fafc;
+  color: var(--text);
 }
 
 .modal-section-header p,
@@ -148,8 +149,8 @@
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(251, 191, 36, 0.16));
-  color: #f8fafc;
+  background: linear-gradient(135deg, rgba(232, 168, 124, 0.22), rgba(245, 240, 232, 0.14));
+  color: var(--text);
   font-weight: 700;
 }
 
@@ -177,7 +178,7 @@
   border-radius: 22px;
   background:
     linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 100%),
-    rgba(30, 41, 59, 0.68);
+    rgba(36, 33, 56, 0.68);
   color: inherit;
   text-align: left;
   cursor: pointer;
@@ -187,17 +188,17 @@
 .type-card:hover,
 .mode-card:hover {
   transform: translateY(-2px);
-  border-color: rgba(125, 211, 252, 0.4);
+  border-color: rgba(232, 168, 124, 0.36);
   box-shadow: 0 18px 32px rgba(2, 8, 23, 0.25);
 }
 
 .type-card--selected,
 .mode-card--active {
-  border-color: rgba(125, 211, 252, 0.55);
+  border-color: rgba(232, 168, 124, 0.55);
   background:
-    linear-gradient(180deg, rgba(56, 189, 248, 0.12), rgba(251, 191, 36, 0.06)),
-    rgba(17, 24, 39, 0.92);
-  box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.14);
+    linear-gradient(180deg, rgba(232, 168, 124, 0.12), rgba(245, 240, 232, 0.04)),
+    rgba(28, 25, 42, 0.92);
+  box-shadow: inset 0 0 0 1px rgba(232, 168, 124, 0.16);
 }
 
 .type-card-icon {
@@ -211,7 +212,7 @@
 
 .type-card-label,
 .mode-card-label {
-  color: #f8fafc;
+  color: var(--text);
   font-size: 1.04rem;
   font-weight: 700;
 }
@@ -224,7 +225,7 @@
 
 .type-card-desc,
 .mode-card-desc {
-  color: rgba(226, 232, 240, 0.72);
+  color: rgba(245, 240, 232, 0.66);
   line-height: 1.55;
   font-size: 0.92rem;
 }
@@ -234,8 +235,8 @@
   align-items: center;
   padding: 4px 10px;
   border-radius: 999px;
-  background: rgba(251, 191, 36, 0.14);
-  color: #fcd34d;
+  background: rgba(232, 168, 124, 0.14);
+  color: var(--accent);
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.04em;
@@ -263,15 +264,15 @@
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.08);
-  color: #e2e8f0;
+  color: var(--text);
   font-size: 0.8rem;
   font-weight: 600;
 }
 
 .summary-pill--accent {
-  background: rgba(56, 189, 248, 0.12);
-  border-color: rgba(125, 211, 252, 0.22);
-  color: #7dd3fc;
+  background: rgba(232, 168, 124, 0.12);
+  border-color: rgba(232, 168, 124, 0.22);
+  color: var(--accent);
 }
 
 .summary-caption {
@@ -304,7 +305,7 @@
 }
 
 .form-group label {
-  color: #e2e8f0;
+  color: var(--text);
   font-size: 0.92rem;
   font-weight: 600;
 }
@@ -321,8 +322,8 @@
   padding: 13px 14px;
   border: 1px solid rgba(255, 255, 255, 0.09);
   border-radius: 16px;
-  background: rgba(15, 23, 42, 0.66);
-  color: #f8fafc;
+  background: rgba(18, 16, 26, 0.85);
+  color: var(--text);
   font: inherit;
   outline: none;
   transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
@@ -330,14 +331,14 @@
 
 .form-input::placeholder,
 .form-textarea::placeholder {
-  color: #64748b;
+  color: var(--text-dim);
 }
 
 .form-input:focus,
 .form-textarea:focus {
-  border-color: rgba(125, 211, 252, 0.52);
-  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
-  background: rgba(15, 23, 42, 0.86);
+  border-color: rgba(232, 168, 124, 0.52);
+  box-shadow: 0 0 0 4px rgba(232, 168, 124, 0.12);
+  background: rgba(18, 16, 26, 0.94);
 }
 
 .form-input[type='range'] {
@@ -365,15 +366,15 @@
   border: 1px solid rgba(255, 255, 255, 0.07);
   border-radius: 24px;
   background:
-    radial-gradient(circle at top right, rgba(56, 189, 248, 0.07), transparent 28%),
-    rgba(15, 23, 42, 0.58);
+    radial-gradient(circle at top right, rgba(232, 168, 124, 0.08), transparent 28%),
+    rgba(28, 25, 42, 0.58);
 }
 
 .slider-card {
   padding: 16px 18px;
   border-radius: 18px;
   border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(15, 23, 42, 0.72);
+  background: rgba(18, 16, 26, 0.72);
 }
 
 .slider-card--compact {
@@ -390,7 +391,7 @@
 
 .slider-label {
   display: block;
-  color: #f8fafc;
+  color: var(--text);
   font-weight: 600;
 }
 
@@ -406,8 +407,8 @@
   min-width: 48px;
   padding: 8px 10px;
   border-radius: 12px;
-  background: rgba(56, 189, 248, 0.12);
-  color: #7dd3fc;
+  background: rgba(232, 168, 124, 0.12);
+  color: var(--accent);
   font-weight: 700;
   text-align: center;
 }
@@ -422,7 +423,7 @@
   padding: 15px 16px;
   border-radius: 18px;
   border: 1px solid rgba(255, 255, 255, 0.07);
-  background: rgba(15, 23, 42, 0.6);
+  background: rgba(28, 25, 42, 0.6);
 }
 
 .toggle-card--disabled {
@@ -443,7 +444,7 @@
 }
 
 .toggle-title {
-  color: #f8fafc;
+  color: var(--text);
   font-weight: 600;
 }
 
@@ -466,8 +467,8 @@
 }
 
 .toggle-switch.on {
-  background: linear-gradient(135deg, rgba(56, 189, 248, 0.95), rgba(14, 165, 233, 0.85));
-  border-color: rgba(125, 211, 252, 0.4);
+  background: rgba(232, 168, 124, 0.3);
+  border-color: rgba(232, 168, 124, 0.4);
 }
 
 .toggle-switch-disabled {
@@ -481,12 +482,14 @@
   width: 22px;
   height: 22px;
   border-radius: 50%;
-  background: #fff;
+  background: var(--text-muted);
   transition: transform 0.2s ease;
 }
 
 .toggle-switch.on .toggle-knob {
   transform: translateX(22px);
+  background: var(--accent);
+  box-shadow: 0 0 8px rgba(232, 168, 124, 0.4);
 }
 
 .expansive-options {
@@ -495,8 +498,8 @@
   gap: 14px;
   padding: 16px;
   border-radius: 18px;
-  border: 1px solid rgba(125, 211, 252, 0.14);
-  background: rgba(8, 47, 73, 0.15);
+  border: 1px solid rgba(232, 168, 124, 0.14);
+  background: rgba(232, 168, 124, 0.08);
 }
 
 .segmented-control {
@@ -509,7 +512,7 @@
   padding: 12px 14px;
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(15, 23, 42, 0.66);
+  background: rgba(18, 16, 26, 0.66);
   color: var(--text-muted);
   cursor: pointer;
   font: inherit;
@@ -518,9 +521,9 @@
 }
 
 .segmented-control-btn--active {
-  background: rgba(56, 189, 248, 0.12);
-  border-color: rgba(125, 211, 252, 0.34);
-  color: #7dd3fc;
+  background: rgba(232, 168, 124, 0.12);
+  border-color: rgba(232, 168, 124, 0.34);
+  color: var(--accent);
 }
 
 .modal-actions {
diff --git a/packages/frontend/src/components/PipelineProgress.css b/packages/frontend/src/components/PipelineProgress.css
index d03f3e0..101d329 100644
--- a/packages/frontend/src/components/PipelineProgress.css
+++ b/packages/frontend/src/components/PipelineProgress.css
@@ -1,14 +1,14 @@
 /* ── Pipeline Progress ──────────────────────────────────── */
 
 .pipeline-progress {
-  padding: 40px 0;
+  padding: var(--sp-8) 0;
 }
 
 .pipeline-title {
   font-size: 18px;
   font-weight: 600;
   color: var(--text);
-  margin-bottom: 24px;
+  margin-bottom: var(--sp-6);
 }
 
 .pipeline-steps {
@@ -23,15 +23,21 @@
   align-items: center;
   gap: 12px;
   padding: 12px 16px;
-  background: var(--bg-surface);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 100%),
+    var(--bg-surface);
+  backdrop-filter: blur(14px) saturate(150%);
   border: 1px solid var(--border);
-  border-radius: var(--radius);
+  border-radius: var(--radius-md);
   font-size: 14px;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
 }
 
 .pipeline-step--running {
-  border-color: var(--accent);
-  background: var(--accent-dim);
+  border-color: rgba(232, 168, 124, 0.3);
+  background:
+    linear-gradient(180deg, rgba(232, 168, 124, 0.08), transparent 100%),
+    rgba(28, 25, 42, 0.82);
 }
 
 .pipeline-step--done {
diff --git a/packages/frontend/src/components/Sidebar.css b/packages/frontend/src/components/Sidebar.css
index cd9e37c..75d8534 100644
--- a/packages/frontend/src/components/Sidebar.css
+++ b/packages/frontend/src/components/Sidebar.css
@@ -2,16 +2,20 @@
 
 .sidebar {
   width: var(--sidebar-width);
-  background: var(--bg-surface);
-  border-right: 1px solid var(--border);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 100%),
+    rgba(28, 25, 42, 0.82);
+  backdrop-filter: blur(20px) saturate(160%);
+  border-right: 1px solid rgba(255, 255, 255, 0.07);
   display: flex;
   flex-direction: column;
   overflow: hidden;
   flex-shrink: 0;
+  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.02);
 }
 
 .sidebar-header {
-  padding: 20px 16px 12px;
+  padding: var(--sp-5) var(--sp-4) var(--sp-3);
   border-bottom: 1px solid var(--border);
   text-align: center;
 }
@@ -20,7 +24,7 @@
   font-size: 24px;
   font-weight: 700;
   color: var(--text);
-  letter-spacing: -0.3px;
+  letter-spacing: -0.03em;
   text-decoration: none;
   display: inline-block;
   transition: color 0.15s ease;
@@ -32,28 +36,31 @@
 }
 
 .btn-new {
-  margin: 12px;
+  margin: var(--sp-3);
   padding: 10px 14px;
   background: var(--accent);
-  color: #fff;
+  color: #1a141f;
   border: none;
   border-radius: var(--radius);
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
-  transition: background 0.15s;
+  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
   text-align: left;
+  box-shadow: 0 8px 24px rgba(232, 168, 124, 0.18);
 }
 
 .btn-new:hover {
   background: var(--accent-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 12px 30px rgba(232, 168, 124, 0.22);
 }
 
 .sidebar-section-label {
   padding: 8px 16px 4px;
   font-size: 11px;
   font-weight: 600;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-dim);
 }
@@ -76,21 +83,27 @@
   align-items: center;
   gap: 8px;
   padding: 8px 10px;
-  border-radius: var(--radius-sm);
+  border-radius: 10px;
   cursor: pointer;
   color: var(--text-muted);
   font-size: 13px;
-  transition: background 0.1s, color 0.1s;
+  border: 1px solid transparent;
+  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
   user-select: none;
 }
 
 .sidebar-item:hover {
-  background: var(--bg-surface-2);
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.06);
   color: var(--text);
+  transform: translateX(1px);
 }
 
 .sidebar-item.selected {
-  background: var(--accent-dim);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 100%),
+    rgba(232, 168, 124, 0.12);
+  border-color: rgba(232, 168, 124, 0.22);
   color: var(--text);
 }
 
@@ -129,7 +142,7 @@
   font-size: 10px;
   font-weight: 600;
   padding: 2px 5px;
-  border-radius: 4px;
+  border-radius: var(--radius-xs);
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
@@ -163,4 +176,13 @@
 
 .sidebar-item-delete:hover {
   color: var(--red);
-}
\ No newline at end of file
+}
+
+@media (max-width: 720px) {
+  .sidebar {
+    width: 100%;
+    max-height: 42vh;
+    border-right: none;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+  }
+}
diff --git a/packages/frontend/src/components/Sidebar.tsx b/packages/frontend/src/components/Sidebar.tsx
index 92762a8..d7c292c 100644
--- a/packages/frontend/src/components/Sidebar.tsx
+++ b/packages/frontend/src/components/Sidebar.tsx
@@ -1,4 +1,5 @@
 import './Sidebar.css';
+import { route } from 'preact-router';
 import type { RecommendationSummary } from '../types/index.js';
 
 interface SidebarProps {
@@ -30,10 +31,27 @@ export function Sidebar({ list, selectedId, onSelect, onNewClick }: SidebarProps
   return (
     <aside class="sidebar">
       <div class="sidebar-header">
-        <a href="/" class="sidebar-title">Recommender</a>
+        <a
+          href="/"
+          class="sidebar-title"
+          onClick={(event) => {
+            event.preventDefault();
+            route('/');
+          }}
+        >
+          Recommender
+        </a>
       </div>
 
-      <button class="btn-new" onClick={onNewClick}>
+      <button
+        type="button"
+        class="btn-new"
+        onClick={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          onNewClick();
+        }}
+      >
         + New Recommendation
       </button>
 
diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css
index 31d0f14..e962338 100644
--- a/packages/frontend/src/index.css
+++ b/packages/frontend/src/index.css
@@ -7,29 +7,47 @@
 }
 
 :root {
-  --bg: #0f1117;
-  --bg-surface: #1a1d27;
-  --bg-surface-2: #222535;
-  --bg-surface-3: #2a2e42;
-  --border: #2e3248;
-  --text: #e2e4ed;
-  --text-muted: #8a8fa8;
-  --text-dim: #5a5f77;
-  --accent: #6366f1;
-  --accent-hover: #4f52d9;
-  --accent-dim: rgba(99, 102, 241, 0.15);
+  --bg: #13111a;
+  --bg-surface: rgba(28, 25, 42, 0.72);
+  --bg-surface-2: rgba(36, 33, 56, 0.65);
+  --bg-surface-3: rgba(48, 45, 72, 0.6);
+  --border: rgba(245, 240, 232, 0.08);
+  --border-strong: rgba(245, 240, 232, 0.16);
+  --text: #f5f0e8;
+  --text-muted: #a09890;
+  --text-dim: #686070;
+  --accent: #e8a87c;
+  --accent-hover: #d4956a;
+  --accent-dim: rgba(232, 168, 124, 0.12);
   --green: #22c55e;
   --blue: #3b82f6;
   --yellow: #eab308;
   --red: #ef4444;
-  --radius: 8px;
-  --radius-sm: 4px;
+  --magenta: #d946ef;
+  --radius-xs: 4px;
+  --radius: 12px;
+  --radius-md: 16px;
+  --radius-lg: 20px;
+  --radius-xl: 28px;
+  --radius-pill: 999px;
+  --sp-1: 4px;
+  --sp-2: 8px;
+  --sp-3: 12px;
+  --sp-4: 16px;
+  --sp-5: 20px;
+  --sp-6: 24px;
+  --sp-8: 32px;
+  --sp-10: 40px;
+  --sp-12: 48px;
   --sidebar-width: 260px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: 14px;
   color: var(--text);
   background: var(--bg);
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 400;
+  letter-spacing: -0.01em;
 }
 
 html,
@@ -40,6 +58,43 @@ body,
   overflow: hidden;
 }
 
+body {
+  position: relative;
+  color: var(--text);
+  background:
+    radial-gradient(ellipse 80% 60% at 15% 10%, rgba(232, 168, 124, 0.07), transparent 55%),
+    radial-gradient(ellipse 70% 50% at 85% 90%, rgba(245, 240, 232, 0.05), transparent 50%),
+    var(--bg);
+}
+
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%),
+    radial-gradient(circle at top left, rgba(255, 214, 170, 0.05), transparent 28%);
+}
+
+a {
+  color: inherit;
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+}
+
+button:focus-visible,
+input:focus-visible,
+textarea:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(232, 168, 124, 0.12);
+}
+
 /* ── Layout ────────────────────────────────────────────── */
 
 .layout {
@@ -51,7 +106,7 @@ body,
 .main-content {
   flex: 1;
   overflow-y: auto;
-  padding: 32px;
+  padding: var(--sp-8);
 }
 
 /* ── Shared content areas ───────────────────────────────── */
@@ -62,7 +117,7 @@ body,
   align-items: center;
   justify-content: center;
   height: 100%;
-  gap: 12px;
+  gap: var(--sp-3);
   color: var(--text-muted);
   text-align: center;
 }
@@ -73,26 +128,56 @@ body,
   color: var(--text);
 }
 
+.surface-glass {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 100%),
+    var(--bg-surface);
+  backdrop-filter: blur(18px) saturate(160%);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow:
+    0 8px 40px rgba(0, 0, 0, 0.28),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.label-eyebrow {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+}
+
 /* ── Buttons ────────────────────────────────────────────── */
 
 .btn-primary {
   padding: 10px 20px;
   background: var(--accent);
-  color: #fff;
+  color: #1a141f;
   border: none;
   border-radius: var(--radius);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
-  transition: background 0.15s;
+  transition:
+    background 0.15s ease,
+    transform 0.15s ease,
+    box-shadow 0.15s ease;
 }
 
 .btn-primary:hover:not(:disabled) {
   background: var(--accent-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 6px 20px rgba(232, 168, 124, 0.28);
+}
+
+.btn-primary:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: 0 2px 8px rgba(232, 168, 124, 0.15);
 }
 
 .btn-primary:disabled {
-  opacity: 0.5;
+  opacity: 0.45;
   cursor: not-allowed;
 }
 
@@ -103,16 +188,154 @@ body,
 
 .btn-secondary {
   padding: 10px 20px;
-  background: var(--bg-surface-2);
+  background: rgba(255, 255, 255, 0.05);
   color: var(--text-muted);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
-  transition: background 0.15s;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
 }
 
 .btn-secondary:hover:not(:disabled) {
-  background: var(--bg-surface-3);
+  background: rgba(255, 255, 255, 0.09);
+  border-color: var(--border-strong);
+  color: var(--text);
+}
+
+.btn-ghost {
+  padding: 8px 16px;
+  background: transparent;
+  color: var(--text-dim);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: var(--radius);
+  font-size: 13px;
+  font-weight: 400;
+  cursor: pointer;
+  transition: color 0.15s ease, border-color 0.15s ease;
+}
+
+.btn-ghost:hover:not(:disabled) {
+  color: var(--text-muted);
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+.btn-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 16px;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease,
+    transform 0.15s ease;
+}
+
+.btn-icon:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.14);
+  color: var(--text);
+  transform: translateY(-1px);
+}
+
+.btn-danger {
+  padding: 8px 16px;
+  background: transparent;
+  color: #f87171;
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  border-radius: var(--radius);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: rgba(239, 68, 68, 0.1);
+  border-color: rgba(239, 68, 68, 0.5);
+}
+
+input[type='text'],
+input[type='search'],
+textarea {
+  background: rgba(18, 16, 26, 0.85);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: var(--radius);
+  color: var(--text);
+  padding: 10px 14px;
+  font-size: 14px;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
+  outline: none;
+}
+
+input[type='text']:focus,
+input[type='search']:focus,
+textarea:focus {
+  border-color: rgba(232, 168, 124, 0.5);
+  box-shadow: 0 0 0 3px rgba(232, 168, 124, 0.12);
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--text-dim);
+}
+
+input[type='range'] {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 100px;
+  outline: none;
+}
+
+input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  background: var(--accent);
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 0 0 3px rgba(232, 168, 124, 0.2);
+  transition: box-shadow 0.15s ease;
+}
+
+input[type='range']::-webkit-slider-thumb:hover {
+  box-shadow: 0 0 0 5px rgba(232, 168, 124, 0.3), 0 0 12px rgba(232, 168, 124, 0.3);
+}
+
+@media (max-width: 860px) {
+  .main-content {
+    padding: var(--sp-6);
+  }
+}
+
+@media (max-width: 720px) {
+  html,
+  body,
+  #app {
+    overflow: auto;
+  }
+
+  .layout {
+    flex-direction: column;
+    height: auto;
+    min-height: 100vh;
+  }
+
+  .main-content {
+    padding: var(--sp-5);
+  }
 }
diff --git a/packages/frontend/src/pages/Home.css b/packages/frontend/src/pages/Home.css
index 39ae785..5097617 100644
--- a/packages/frontend/src/pages/Home.css
+++ b/packages/frontend/src/pages/Home.css
@@ -5,22 +5,30 @@
   height: 100vh;
   position: relative;
   overflow: hidden;
+  isolation: isolate;
 }
 
 .landing-bg {
   position: absolute;
-  inset: -6px;
-  /* overflow slightly to hide blur edges */
+  inset: -10px;
   background: url('/wallpaper.png') center / cover no-repeat;
-  filter: blur(3px) brightness(0.35);
+  filter: blur(5px) brightness(0.28) saturate(0.85);
   z-index: 0;
 }
 
+.landing-layout::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(90deg, rgba(10, 8, 15, 0.34) 0%, rgba(10, 8, 15, 0.08) 32%, rgba(10, 8, 15, 0.28) 100%);
+  z-index: 0;
+  pointer-events: none;
+}
+
 .landing-layout .sidebar {
   position: relative;
   z-index: 1;
-  background: rgba(26, 29, 39, 0.85);
-  backdrop-filter: blur(8px);
 }
 
 .landing-main {
@@ -33,41 +41,67 @@
   text-align: center;
   position: relative;
   z-index: 1;
-  padding: 40px;
+  padding: var(--sp-10);
 }
 
 .landing-title {
-  font-size: 5rem;
-  font-weight: 800;
-  color: #fff;
-  letter-spacing: -2px;
+  font-size: clamp(3.8rem, 9vw, 5.6rem);
+  font-weight: 300;
+  color: var(--text);
+  letter-spacing: -0.03em;
   line-height: 1;
+  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
 }
 
 .landing-tagline {
-  font-size: 1.4rem;
-  color: rgba(255, 255, 255, 0.6);
+  max-width: 620px;
+  font-size: clamp(1rem, 2vw, 1.3rem);
+  color: rgba(245, 240, 232, 0.7);
   font-weight: 400;
+  line-height: 1.7;
 }
 
 .btn-gradient {
-  padding: 16px 42px;
-  font-size: 1.20rem;
-  font-weight: 700;
-  color: rgba(255, 255, 255, 0.9);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 12px;
+  padding: 14px 30px;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #1a141f;
+  border: 1px solid rgba(255, 244, 232, 0.14);
+  border-radius: var(--radius);
   cursor: pointer;
-  background: linear-gradient(135deg, rgba(113, 88, 226, 0.8), rgba(61, 59, 243, 0.8));
-  backdrop-filter: blur(6px);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.1);
-  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
-  letter-spacing: 0.02em;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 100%),
+    linear-gradient(135deg, rgba(232, 168, 124, 0.96), rgba(214, 149, 106, 0.94));
+  backdrop-filter: blur(10px);
+  box-shadow:
+    0 10px 30px rgba(232, 168, 124, 0.22),
+    inset 0 1px 0 rgba(255, 255, 255, 0.22);
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    background 0.2s ease;
+  letter-spacing: -0.01em;
 }
 
 .btn-gradient:hover {
   transform: translateY(-2px);
-  color: #fff;
-  background: linear-gradient(135deg, rgba(113, 88, 226, 0.95), rgba(41, 121, 255, 0.95));
-  box-shadow: 0 8px 24px rgba(113, 88, 226, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.2);
-}
\ No newline at end of file
+  box-shadow:
+    0 16px 38px rgba(232, 168, 124, 0.28),
+    inset 0 1px 0 rgba(255, 255, 255, 0.24);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 100%),
+    linear-gradient(135deg, rgba(232, 168, 124, 1), rgba(214, 149, 106, 0.98));
+}
+
+@media (max-width: 720px) {
+  .landing-layout {
+    flex-direction: column;
+    min-height: 100vh;
+    height: auto;
+  }
+
+  .landing-main {
+    min-height: 55vh;
+    padding: var(--sp-8) var(--sp-5);
+  }
+}
diff --git a/packages/frontend/src/pages/Recom.css b/packages/frontend/src/pages/Recom.css
index c5c1ac1..8eada48 100644
--- a/packages/frontend/src/pages/Recom.css
+++ b/packages/frontend/src/pages/Recom.css
@@ -19,11 +19,17 @@
 /* ── Request Info Panel ─────────────────────────────────── */
 
 .rec-info-panel {
-  background: var(--bg-surface);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 100%),
+    var(--bg-surface);
+  backdrop-filter: blur(18px) saturate(160%);
   border: 1px solid var(--border);
-  border-radius: var(--radius);
-  margin-bottom: 24px;
+  border-radius: var(--radius-lg);
+  margin-bottom: var(--sp-6);
   overflow: hidden;
+  box-shadow:
+    0 12px 34px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
 
 .rec-info-toggle {
@@ -40,7 +46,7 @@
 }
 
 .rec-info-toggle:hover {
-  background: var(--bg-surface-2);
+  background: rgba(255, 255, 255, 0.04);
 }
 
 .rec-info-title {
@@ -74,16 +80,16 @@
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.08em;
   color: var(--text-dim);
   flex-shrink: 0;
   width: 72px;
 }
 
 .rec-info-value {
-  font-size: 13px;
+  font-size: 14px;
   color: var(--text-muted);
-  line-height: 1.5;
+  line-height: 1.6;
 }
 
 .rec-info-badge {
@@ -91,7 +97,7 @@
   font-weight: 600;
   padding: 2px 8px;
   border-radius: 100px;
-  background: rgba(99, 102, 241, 0.15);
+  background: rgba(232, 168, 124, 0.12);
   color: var(--accent);
 }
 
@@ -130,8 +136,8 @@
 }
 
 .rec-info-delete-row .btn-rerun:hover {
-  background: var(--bg-surface-2);
-  border-color: var(--text-dim);
+  background: rgba(255, 255, 255, 0.08);
+  border-color: var(--border-strong);
   color: var(--text);
 }
 
@@ -147,3 +153,23 @@
 .error-state p {
   margin-bottom: 16px;
 }
+
+@media (max-width: 720px) {
+  .content-area {
+    max-width: 100%;
+  }
+
+  .rec-info-row {
+    flex-direction: column;
+    gap: 4px;
+    align-items: flex-start;
+  }
+
+  .rec-info-label {
+    width: auto;
+  }
+
+  .rec-info-delete-row {
+    gap: 10px;
+  }
+}