diff --git a/src/App.css b/src/App.css
index 70523da..f4ea189 100644
--- a/src/App.css
+++ b/src/App.css
@@ -17,6 +17,17 @@
   --danger: #dc2626;
   --danger-light: #fee2e2;
   --gold: #b8860b;
+  --brand-icon: #3b82f6;
+  --brand-text: #1e3a5f;
+  --text-inverse: #ffffff;
+  --warning-bg: #fef3c7;
+  --warning-text: #92400e;
+  --warning-border: #fcd34d;
+  --accent-hover: #1d4ed8;
+  --purple: #7c3aed;
+  --muted-light: #f1f5f9;
+  --dark-surface: #1e293b;
+  --dark-muted: #94a3b8;
   --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
   --shadow: 0 4px 12px rgba(0,0,0,0.08);
   --radius: 12px;
@@ -72,7 +83,7 @@ html[dir="rtl"] {
 .error-container button {
   padding: 10px 20px;
   background: var(--text-primary);
-  color: white;
+  color: var(--text-inverse);
   border: none;
   border-radius: 6px;
   cursor: pointer;
@@ -129,7 +140,7 @@ html[dir="rtl"] {
 .empty-state-action {
   padding: 10px 20px;
   background: var(--primary);
-  color: white;
+  color: var(--text-inverse);
   border: none;
   border-radius: 8px;
   font-weight: 500;
@@ -139,7 +150,7 @@ html[dir="rtl"] {
 }
 
 .empty-state-action:hover {
-  background: #1d4ed8;
+  background: var(--accent-hover);
 }
 
 /* Skeleton Loader */
@@ -192,14 +203,14 @@ html[dir="rtl"] {
 }
 
 .nav-brand-icon {
-  color: #3b82f6;
+  color: var(--brand-icon);
 }
 
 .nav-brand-text {
   font-family: 'DM Sans', 'Inter', -apple-system, sans-serif;
   font-size: 1.25rem;
   font-weight: 700;
-  color: #1e3a5f;
+  color: var(--brand-text);
   letter-spacing: -0.02em;
 }
 
@@ -208,13 +219,13 @@ html[dir="rtl"] {
   -webkit-appearance: none;
   background: transparent;
   border: none;
-  color: #3b82f6;
+  color: var(--brand-icon);
   font-family: inherit;
   font-size: inherit;
   font-weight: 500;
   cursor: pointer;
   padding: 2px 20px 2px 6px;
-  margin-left: 4px;
+  margin-inline-start: 4px;
   border-radius: 6px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2.5' 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;
@@ -233,13 +244,13 @@ html[dir="rtl"] {
 }
 
 .data-source-select option {
-  color: #1e3a5f;
-  background: white;
+  color: var(--brand-text);
+  background: var(--surface);
   font-weight: 500;
 }
 
 .data-source-select option:disabled {
-  color: #94a3b8;
+  color: var(--text-muted);
 }
 
 .nav-links {
@@ -279,7 +290,7 @@ html[dir="rtl"] {
 
 .nav-link.active {
   background: var(--primary);
-  color: white;
+  color: var(--text-inverse);
   border-color: var(--primary);
 }
 
@@ -327,12 +338,12 @@ html[dir="rtl"] .nav-lang-toggle {
   align-items: center;
   gap: 5px;
   padding: 6px 12px;
-  background: #fef3c7;
-  color: #92400e;
+  background: var(--warning-bg);
+  color: var(--warning-text);
   border-radius: 6px;
   font-size: 0.75rem;
   font-weight: 600;
-  border: 1px solid #fcd34d;
+  border: 1px solid var(--warning-border);
 }
 
 .offline-badge svg {
@@ -538,7 +549,7 @@ html[dir="rtl"] .nav-lang-toggle {
 }
 
 .chart-container {
-  height: 380px;
+  height: clamp(280px, 30vw, 420px);
   position: relative;
 }
 
@@ -564,7 +575,7 @@ table th {
   border-bottom: 2px solid var(--border);
 }
 
-table th:first-child { text-align: left; }
+table th:first-child { text-align: start; }
 
 table td {
   padding: 14px 12px;
@@ -573,7 +584,7 @@ table td {
   color: var(--text-secondary);
 }
 
-table td:first-child { text-align: left; }
+table td:first-child { text-align: start; }
 
 table tbody tr:hover {
   background: var(--bg);
@@ -582,7 +593,7 @@ table tbody tr:hover {
 .bold { font-weight: 700; color: var(--text-primary); }
 .muted { color: var(--text-muted); }
 .primary { color: var(--accent); font-weight: 600; }
-.purple { color: #7c3aed; font-weight: 600; }
+.purple { color: var(--purple); font-weight: 600; }
 .positive { color: var(--success); font-weight: 600; }
 .negative { color: var(--danger); font-weight: 600; }
 
@@ -844,8 +855,8 @@ table tbody tr:hover {
 }
 
 .metric-change.pending {
-  background: var(--muted-light, #f1f5f9);
-  color: var(--text-muted, #64748b);
+  background: var(--muted-light);
+  color: var(--text-muted);
 }
 
 .metric-change .pending-msg {
@@ -1032,9 +1043,15 @@ table tbody tr:hover {
   width: 8px;
   height: 8px;
   border-radius: 4px;
-  padding: 0;
+  padding: 8px;
+  background-clip: content-box;
   cursor: pointer;
   transition: all 0.3s ease;
+  min-width: 24px;
+  min-height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .carousel-dot .dot-label {
@@ -1083,7 +1100,7 @@ table tbody tr:hover {
 }
 
 .carousel-dots.labeled .carousel-dot.active .dot-label {
-  color: white;
+  color: var(--text-inverse);
 }
 
 /* Chart Sections */
@@ -1520,11 +1537,11 @@ table tbody tr:hover {
 
 .btn-primary {
   background: var(--accent);
-  color: white;
+  color: var(--text-inverse);
 }
 
 .btn-primary:hover {
-  background: #2563eb;
+  background: var(--accent);
 }
 
 .btn-secondary {
@@ -1568,7 +1585,7 @@ table tbody tr:hover {
   margin-top: 16px;
   padding: 8px 16px;
   background: var(--accent);
-  color: white;
+  color: var(--text-inverse);
   border: none;
   border-radius: 6px;
   cursor: pointer;
@@ -1654,8 +1671,8 @@ table tbody tr:hover {
 }
 
 .slide-actions button.delete:hover {
-  background: #fee2e2;
-  color: #dc2626;
+  background: var(--danger-light);
+  color: var(--danger);
 }
 
 /* Slide Editor */
@@ -1793,7 +1810,7 @@ table tbody tr:hover {
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+  background: linear-gradient(135deg, var(--text-primary) 0%, var(--dark-surface) 100%);
   z-index: 1000;
   display: flex;
   flex-direction: column;
@@ -1809,7 +1826,7 @@ table tbody tr:hover {
 }
 
 .preview-title {
-  color: #f8fafc;
+  color: var(--bg);
   font-size: 2.5rem;
   font-weight: 600;
   margin-bottom: 40px;
@@ -1838,11 +1855,11 @@ table tbody tr:hover {
 }
 
 .preview-content .preview-kpis .kpi-label {
-  color: #94a3b8;
+  color: var(--dark-muted);
 }
 
 .preview-footer {
-  color: #64748b;
+  color: var(--text-muted);
   font-size: 14px;
   margin-top: 40px;
 }
@@ -1858,7 +1875,7 @@ table tbody tr:hover {
 .preview-controls button {
   padding: 10px 24px;
   background: rgba(255, 255, 255, 0.1);
-  color: white;
+  color: var(--text-inverse);
   border: none;
   border-radius: 8px;
   cursor: pointer;
@@ -2040,7 +2057,7 @@ html[dir="rtl"] .chart-export-btn.visible {
 }
 
 .skeleton-card {
-  background: #f1f5f9;
+  background: var(--muted-light);
   border-radius: 12px;
   padding: 20px;
   animation: skeleton-pulse 1.5s ease-in-out infinite;
@@ -2051,7 +2068,7 @@ html[dir="rtl"] .chart-export-btn.visible {
 }
 
 .skeleton-line {
-  background: #e2e8f0;
+  background: var(--border);
   border-radius: 6px;
 }
 
diff --git a/src/App.tsx b/src/App.tsx
index 94017e6..8422ffb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -224,6 +224,14 @@ function App() {
             </svg>
             <span>{t('nav.compare')}</span>
           </NavLink>
+          <NavLink to="/slides" className="mobile-nav-item">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <rect x="2" y="3" width="20" height="14" rx="2"/>
+              <line x1="8" y1="21" x2="16" y2="21"/>
+              <line x1="12" y1="17" x2="12" y2="21"/>
+            </svg>
+            <span>{t('nav.slides')}</span>
+          </NavLink>
           <button
             className="mobile-nav-item"
             onClick={switchLanguage}