style: redesign Daily Scrapper UI/UX to match Sikomo layout and color palette

frontend/app/globals.css

@@ -3,53 +3,103 @@
 @tailwind utilities;
 
 @layer utilities {
-  /* Glassmorphism effects */
-  .glass-panel {
-    background: rgba(15, 23, 42, 0.65);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+  /* Sikomo-style card panel */
+  .card-panel {
+    background: #ffffff;
+    border-radius: 1rem;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
+    border: 1px solid rgba(226, 232, 240, 0.6);
   }
 
-  .glass-input {
-    background: rgba(255, 255, 255, 0.05);
-    backdrop-filter: blur(4px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+  /* Clean form inputs */
+  .form-input {
+    appearance: none;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid #cbd5e1;
+    border-radius: 0.5rem;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    font-size: 0.875rem;
+    color: #1e293b;
+    background: #ffffff;
+    transition: all 150ms ease;
   }
 
-  .glass-input:focus {
-    background: rgba(255, 255, 255, 0.08);
-    border-color: rgba(45, 212, 191, 0.5);
-    box-shadow: 0 0 15px rgba(45, 212, 191, 0.2);
+  .form-input::placeholder {
+    color: #94a3b8;
+  }
+
+  .form-input:focus {
+    outline: none;
+    border-color: #1e3a8a;
+    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
+  }
+
+  /* Select dropdown styling */
+  .form-select {
+    appearance: none;
+    width: 100%;
+    padding: 0.5rem 2rem 0.5rem 0.75rem;
+    border: 1px solid #cbd5e1;
+    border-radius: 0.5rem;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    font-size: 0.875rem;
+    color: #1e293b;
+    background-color: #ffffff;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right 0.5rem center;
+    background-repeat: no-repeat;
+    background-size: 1.5em 1.5em;
+    transition: all 150ms ease;
+  }
+
+  .form-select:focus {
+    outline: none;
+    border-color: #1e3a8a;
+    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
   }
 }
 
-/* Custom Scrollbar for Logs */
-::-webkit-scrollbar {
+/* Terminal Scrollbar (dark context) */
+.terminal-scrollbar::-webkit-scrollbar {
   width: 6px;
   height: 6px;
 }
 
-::-webkit-scrollbar-track {
+.terminal-scrollbar::-webkit-scrollbar-track {
   background: rgba(15, 23, 42, 0.8);
 }
 
-::-webkit-scrollbar-thumb {
+.terminal-scrollbar::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.15);
   border-radius: 3px;
 }
 
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(45, 212, 191, 0.4);
+.terminal-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
 }
 
-/* Animations */
-@keyframes glow {
-  0%, 100% { opacity: 0.4; transform: scale(1); }
-  50% { opacity: 0.6; transform: scale(1.05); }
+/* General Scrollbar (light context) */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(148, 163, 184, 0.4);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(148, 163, 184, 0.6);
 }
 
-.animate-glow {
-  animation: glow 8s ease-in-out infinite alternate;
+/* Smooth transitions */
+* {
+  transition-property: color, background-color, border-color, box-shadow;
+  transition-timing-function: ease;
 }

frontend/app/layout.tsx

@@ -5,8 +5,8 @@ import { Inter } from 'next/font/google'
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: 'Sikomo Daily Scraper Portal',
-  description: 'Premium Automated Commodity Price Scraper & Control Panel',
+  title: 'Daily Scraper - SIKOMO',
+  description: 'Panel kontrol scraping harga komoditas otomatis - Sistem Informasi Komoditas Kabupaten Batang',
 }
 
 export default function RootLayout({
@@ -16,7 +16,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="id" className="scroll-smooth">
-      <body className={`${inter.className} bg-slate-900 text-slate-100 min-h-screen antialiased selection:bg-teal-500 selection:text-white`}>
+      <body className={`${inter.className} bg-[#f8fafc] text-slate-800 min-h-screen antialiased selection:bg-primary selection:text-white`}>
         {children}
       </body>
     </html>

frontend/app/page.tsx

@@ -20,7 +20,12 @@ import {
   AlertTriangle, 
   Info, 
   X,
-  Layers
+  Layers,
+  Clock,
+  TrendingUp,
+  BarChart3,
+  Settings,
+  Zap
 } from 'lucide-react'
 
 // Auto-detect base path/URL if running exported on FastAPI or standalone Next.js
@@ -247,58 +252,79 @@ export default function Dashboard() {
   // --- RENDER LOGIN GATE ---
   if (!isAuthenticated) {
     return (
-      <div className="min-h-screen relative overflow-hidden flex items-center justify-center p-4">
-        {/* Background glowing blobs */}
-        <div className="absolute w-[500px] h-[500px] bg-teal-500/20 rounded-full blur-3xl -top-32 -left-32 animate-glow pointer-events-none" />
-        <div className="absolute w-[600px] h-[600px] bg-indigo-500/20 rounded-full blur-3xl -bottom-48 -right-48 animate-glow pointer-events-none" style={{ animationDelay: '3s' }} />
-
-        <div className="w-full max-w-md glass-panel rounded-2xl p-8 relative z-10 border border-white/10 shadow-2xl">
-          <div className="text-center mb-8">
-            <div className="w-16 h-16 bg-gradient-to-tr from-teal-500 to-indigo-500 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg shadow-teal-500/25">
-              <Lock className="w-8 h-8 text-white" />
-            </div>
-            <h1 className="text-3xl font-bold bg-gradient-to-r from-white via-slate-100 to-slate-400 bg-clip-text text-transparent">
-              Sikomo Scraper Portal
-            </h1>
-            <p className="text-slate-400 text-sm mt-2">
-              Masukkan kata sandi untuk mengakses panel kontrol scraping harga otomatis.
-            </p>
-          </div>
-
-          <form onSubmit={handleLogin} className="space-y-6">
+      <div className="min-h-screen flex">
+        {/* Left: Login Form */}
+        <div className="flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
+          <div className="mx-auto w-full max-w-sm lg:w-96">
             <div>
-              <label className="block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-2">
-                Kata Sandi
-              </label>
-              <input
-                type="password"
-                value={passwordInput}
-                onChange={(e) => setPasswordInput(e.target.value)}
-                placeholder="••••••••••••"
-                className={`w-full glass-input rounded-xl px-4 py-3.5 text-slate-100 placeholder:text-slate-500 focus:outline-none transition-all ${
-                  authError ? 'border-rose-500/50 focus:border-rose-500 focus:box-shadow-[0_0_15px_rgba(244,63,94,0.2)]' : ''
-                }`}
-                autoFocus
-              />
-              {authError && (
-                <p className="text-xs text-rose-400 mt-2 flex items-center gap-1">
-                  <AlertTriangle className="w-3.5 h-3.5" /> Kata sandi tidak cocok.
-                </p>
-              )}
+              <div className="flex items-center gap-2 mb-8">
+                <div className="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-white shadow-sm">
+                  <TrendingUp className="w-5 h-5" />
+                </div>
+                <span className="font-bold text-2xl text-primary tracking-tight">SIKOMO<span className="text-primary">.</span></span>
+              </div>
+              <h2 className="mt-6 text-3xl font-extrabold text-slate-900">
+                Masuk ke Scraper Portal
+              </h2>
+              <p className="mt-2 text-sm text-slate-600">
+                Sistem Informasi Komoditas Kabupaten Batang — Panel Kontrol Scraping Otomatis
+              </p>
             </div>
 
-            <button
-              type="submit"
-              className="w-full bg-gradient-to-r from-teal-500 to-indigo-500 hover:from-teal-400 hover:to-indigo-400 text-white font-semibold py-3.5 px-4 rounded-xl shadow-lg shadow-indigo-500/20 active:scale-[0.98] transition-all duration-200"
-            >
-              Masuk ke Portal
-            </button>
-          </form>
+            <div className="mt-8">
+              <form onSubmit={handleLogin} className="space-y-6">
+                {authError && (
+                  <div className="bg-red-50 border border-red-200 text-red-600 rounded-lg p-4 text-sm flex items-center gap-2">
+                    <AlertTriangle className="w-4 h-4 flex-shrink-0" />
+                    Kata sandi tidak cocok. Silakan coba lagi.
+                  </div>
+                )}
 
-          <div className="mt-6 text-center border-t border-white/5 pt-4">
-            <span className="text-[11px] text-slate-500">
-              Sistem Informasi Komoditas & Pasar Kabupaten Batang
-            </span>
+                <div>
+                  <label htmlFor="password" className="block text-sm font-medium text-slate-700">
+                    Kata Sandi
+                  </label>
+                  <div className="mt-1">
+                    <input
+                      id="password"
+                      type="password"
+                      value={passwordInput}
+                      onChange={(e) => setPasswordInput(e.target.value)}
+                      placeholder="Masukkan kata sandi"
+                      className="form-input py-2.5"
+                      autoFocus
+                    />
+                  </div>
+                </div>
+
+                <button
+                  type="submit"
+                  className="w-full flex justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-semibold text-white bg-primary hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors duration-200"
+                >
+                  Masuk
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+        
+        {/* Right: Decorative Panel */}
+        <div className="hidden lg:block relative w-0 flex-1">
+          <div className="absolute inset-0 h-full w-full bg-dark overflow-hidden">
+            <div className="absolute inset-0 bg-primary opacity-90 mix-blend-multiply"></div>
+            <div className="absolute inset-0 flex items-center justify-center p-12">
+              <div className="max-w-xl text-center">
+                <div className="w-20 h-20 bg-white/10 backdrop-blur rounded-2xl flex items-center justify-center mx-auto mb-8">
+                  <Activity className="w-10 h-10 text-white" />
+                </div>
+                <h1 className="text-4xl font-bold text-white mb-6">
+                  Automated Price Scraping
+                </h1>
+                <p className="text-lg text-blue-100 leading-relaxed">
+                  Pantau dan kelola proses pengambilan data harga komoditas secara otomatis dari berbagai sumber pasar di Kabupaten Batang.
+                </p>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -307,137 +333,150 @@ export default function Dashboard() {
 
   // --- RENDER DASHBOARD ---
   return (
-    <div className="min-h-screen relative overflow-hidden pb-16">
-      {/* Subtle Background Glows */}
-      <div className="absolute top-0 right-1/4 w-96 h-96 bg-teal-500/10 rounded-full blur-3xl pointer-events-none" />
-      <div className="absolute bottom-10 left-10 w-96 h-96 bg-indigo-500/10 rounded-full blur-3xl pointer-events-none" />
-
-      {/* Top Navbar */}
-      <header className="border-b border-slate-800 bg-slate-900/80 backdrop-blur sticky top-0 z-30 px-6 py-4">
-        <div className="max-w-7xl mx-auto flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div className="w-10 h-10 bg-gradient-to-tr from-teal-500 to-indigo-500 rounded-xl flex items-center justify-center shadow-md">
-              <Activity className="w-5 h-5 text-white" />
-            </div>
-            <div>
-              <h1 className="font-bold text-lg leading-tight bg-gradient-to-r from-white to-slate-300 bg-clip-text text-transparent">
-                Sikomo Daily Scraper
-              </h1>
-              <div className="flex items-center gap-2 mt-0.5">
-                <span className="flex h-2 w-2 relative">
-                  <span className={`animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 ${status?.is_running ? 'bg-teal-400' : 'bg-rose-400'}`} />
-                  <span className={`relative inline-flex rounded-full h-2 w-2 ${status?.is_running ? 'bg-teal-500' : 'bg-rose-500'}`} />
-                </span>
-                <span className="text-[11px] font-medium text-slate-400 uppercase tracking-wider">
-                  Engine: {status?.is_running ? 'Active' : 'Inactive'}
-                </span>
-              </div>
+    <div className="min-h-screen pb-16">
+
+      {/* Top Navbar — Sikomo Style */}
+      <header className="h-16 bg-white/80 backdrop-blur-xl border-b border-slate-200/60 flex items-center justify-between px-6 z-30 sticky top-0 transition-all">
+        <div className="flex items-center gap-4">
+          {/* Brand */}
+          <div className="flex items-center gap-2.5">
+            <div className="w-8 h-8 bg-gradient-to-br from-primary to-indigo-600 rounded flex items-center justify-center text-white shadow-lg shadow-primary/20">
+              <TrendingUp className="w-4 h-4" />
             </div>
+            <span className="text-slate-900 font-black text-lg tracking-tight">SIKOMO<span className="text-primary">.</span></span>
           </div>
 
-          <div className="flex items-center gap-3">
-            {currentTime && (
-              <div className="hidden sm:flex items-center gap-2 bg-slate-950/60 px-3 py-1.5 rounded-xl border border-white/5 font-mono text-xs text-teal-400">
-                <span className="w-1.5 h-1.5 rounded-full bg-teal-400 animate-pulse" />
-                <span>{currentTime} WIB</span>
-              </div>
-            )}
+          <div className="hidden sm:flex items-center gap-2 ml-2">
+            <div className="h-6 w-1 bg-primary rounded-full"></div>
+            <h1 className="text-base font-bold text-slate-800 tracking-tight">Daily Scraper</h1>
+          </div>
+        </div>
 
-            <button
-              onClick={handleLogout}
-              className="flex items-center gap-2 px-3.5 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white text-xs font-medium border border-slate-700 transition"
-            >
-              <LogOut className="w-3.5 h-3.5" />
-              Keluar
-            </button>
+        <div className="flex items-center gap-4">
+          {/* Engine Status Indicator */}
+          <div className="hidden md:flex items-center gap-2">
+            <span className="flex h-2 w-2 relative">
+              <span className={`animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 ${status?.is_running ? 'bg-emerald-400' : 'bg-rose-400'}`} />
+              <span className={`relative inline-flex rounded-full h-2 w-2 ${status?.is_running ? 'bg-emerald-500' : 'bg-rose-500'}`} />
+            </span>
+            <span className="text-xs font-semibold text-slate-500 uppercase tracking-wider">
+              Engine {status?.is_running ? 'Active' : 'Inactive'}
+            </span>
           </div>
+
+          {/* Date / Time */}
+          {currentTime && (
+            <div className="hidden lg:flex items-center gap-2 px-3 py-1.5 bg-slate-50 rounded-lg border border-slate-100">
+              <Clock className="w-3.5 h-3.5 text-slate-400" />
+              <span className="text-xs font-semibold text-slate-600 font-mono">{currentTime} WIB</span>
+            </div>
+          )}
+
+          <div className="w-px h-8 bg-slate-200"></div>
+
+          {/* Logout */}
+          <button
+            onClick={handleLogout}
+            className="flex items-center gap-2 px-3.5 py-2 rounded-lg text-slate-600 hover:bg-red-50 hover:text-red-600 text-xs font-semibold border border-transparent hover:border-red-200 transition-all duration-200"
+          >
+            <LogOut className="w-3.5 h-3.5" />
+            Keluar
+          </button>
         </div>
       </header>
 
       {/* Main Container */}
-      <main className="max-w-7xl mx-auto px-6 mt-8 grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8 grid grid-cols-1 lg:grid-cols-3 gap-6">
         
         {/* LEFT & CENTER COLUMNS: Status & Controls */}
         <div className="lg:col-span-2 space-y-6">
           
+          {/* Page Title */}
+          <div className="mb-2">
+            <h1 className="text-2xl font-black text-slate-900 tracking-tight">Scraper Dashboard</h1>
+            <p className="text-sm text-slate-500 mt-1">Kelola dan pantau proses scraping harga komoditas otomatis.</p>
+          </div>
+
           {/* SECTION 1: Status & Quick Actions Bento */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             
             {/* Status Overview Card */}
-            <div className="glass-panel rounded-2xl p-6 border border-white/5 relative overflow-hidden flex flex-col justify-between">
+            <div className="card-panel p-6 relative overflow-hidden flex flex-col justify-between group hover:shadow-md transition-all duration-300">
               <div>
                 <div className="flex items-center justify-between mb-4">
-                  <h2 className="text-sm font-semibold text-slate-400 uppercase tracking-wider flex items-center gap-2">
-                    <Activity className="w-4 h-4 text-teal-400" /> Status Scheduler
+                  <h2 className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-2">
+                    <Activity className="w-4 h-4 text-primary" /> Status Scheduler
                   </h2>
                   <span className={`px-2.5 py-1 rounded-full text-[11px] font-bold ${
-                    status?.is_running ? 'bg-teal-500/10 text-teal-400 border border-teal-500/20' : 'bg-rose-500/10 text-rose-400 border border-rose-500/20'
+                    status?.is_running 
+                      ? 'bg-emerald-50 text-emerald-600 border border-emerald-200' 
+                      : 'bg-rose-50 text-rose-600 border border-rose-200'
                   }`}>
                     {status?.is_running ? 'RUNNING' : 'STOPPED'}
                   </span>
                 </div>
 
                 <div className="space-y-3 mt-4">
-                  <div className="bg-slate-900/50 rounded-xl p-3 border border-white/5">
+                  <div className="bg-slate-50 rounded-xl p-3 border border-slate-100">
                     <span className="text-xs text-slate-500 block">Jadwal Aktif</span>
-                    <span className="text-lg font-bold text-slate-200 mt-0.5">
+                    <span className="text-lg font-black text-slate-800 mt-0.5">
                       {status?.active_schedules_count || 0} <span className="text-xs font-normal text-slate-400">tugas rutin</span>
                     </span>
                   </div>
 
-                  <div className="bg-slate-900/50 rounded-xl p-3 border border-white/5">
+                  <div className="bg-slate-50 rounded-xl p-3 border border-slate-100">
                     <span className="text-xs text-slate-500 block">Eksekusi Rutin Berikutnya</span>
-                    <span className="text-sm font-bold text-teal-400 block truncate mt-0.5">
+                    <span className="text-sm font-bold text-primary block truncate mt-0.5">
                       {status?.next_run ? new Date(status.next_run).toLocaleString('id-ID', { dateStyle: 'medium', timeStyle: 'short' }) : 'Tidak ada jadwal terdaftar'}
                     </span>
                   </div>
                 </div>
               </div>
 
+              {/* Toggle Button */}
               <button
                 onClick={handleToggleScheduler}
-                className={`w-full mt-4 py-2.5 px-4 rounded-xl text-xs font-bold flex items-center justify-center gap-2 border transition ${
+                className={`w-full mt-4 py-2.5 px-4 rounded-xl text-xs font-bold flex items-center justify-center gap-2 border transition-all duration-200 ${
                   status?.is_running 
-                    ? 'bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 border-rose-500/20' 
-                    : 'bg-teal-500/10 hover:bg-teal-500/20 text-teal-400 border-teal-500/20'
+                    ? 'bg-rose-50 hover:bg-rose-100 text-rose-600 border-rose-200' 
+                    : 'bg-emerald-50 hover:bg-emerald-100 text-emerald-600 border-emerald-200'
                 }`}
               >
                 {status?.is_running ? <Square className="w-3.5 h-3.5" /> : <Play className="w-3.5 h-3.5" />}
                 {status?.is_running ? 'Matikan Scheduler Otomatis' : 'Nyalakan Scheduler Otomatis'}
               </button>
+
+              {/* Gradient icon background */}
+              <div className="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-emerald-400 to-green-600 rounded-2xl opacity-[0.07] rotate-12 pointer-events-none group-hover:-translate-y-1 transition-transform duration-300" />
             </div>
 
             {/* Manual Scrape Card */}
-            <div className="glass-panel rounded-2xl p-6 border border-white/5 flex flex-col justify-between relative overflow-hidden">
-              <div className="absolute top-0 right-0 p-8 opacity-5 text-teal-500 pointer-events-none">
-                <Layers className="w-32 h-32" />
-              </div>
-
+            <div className="card-panel p-6 flex flex-col justify-between relative overflow-hidden group hover:shadow-md transition-all duration-300">
               <div>
-                <h2 className="text-sm font-semibold text-slate-400 uppercase tracking-wider flex items-center gap-2 mb-2">
-                  <RefreshCw className="w-4 h-4 text-indigo-400" /> Aksi Cepat Manual
+                <h2 className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-2 mb-2">
+                  <Zap className="w-4 h-4 text-indigo-500" /> Aksi Cepat Manual
                 </h2>
-                <p className="text-xs text-slate-400 leading-relaxed mb-6">
+                <p className="text-xs text-slate-500 leading-relaxed mb-5">
                   Picu mesin scraper sekarang juga untuk mengambil harga terbaru dari server website sumber tanpa menunggu jadwal.
                 </p>
 
                 {/* Last Run Snippet */}
                 {status?.last_result?.stats && (
-                  <div className="bg-slate-900/60 rounded-xl p-3 border border-white/5 mb-4 text-xs">
-                    <div className="flex items-center justify-between text-slate-400 mb-1.5 pb-1.5 border-b border-white/5 font-medium">
+                  <div className="bg-slate-50 rounded-xl p-3 border border-slate-100 mb-4 text-xs">
+                    <div className="flex items-center justify-between text-slate-500 mb-1.5 pb-1.5 border-b border-slate-200/60 font-medium">
                       <span>Statistik Scrape Terakhir</span>
                       <button 
                         onClick={() => { setSelectedStats(status.last_result.stats); setShowStatsModal(true); }}
-                        className="text-teal-400 hover:underline flex items-center gap-1"
+                        className="text-primary hover:underline flex items-center gap-1 font-semibold"
                       >
                         Detail Breakdown <Info className="w-3 h-3" />
                       </button>
                     </div>
                     <div className="grid grid-cols-4 gap-1 text-center pt-0.5">
-                      <div><span className="block text-[10px] text-slate-500">Insert</span><span className="font-bold text-teal-400">{status.last_result.stats.total_insert}</span></div>
-                      <div><span className="block text-[10px] text-slate-500">Update</span><span className="font-bold text-indigo-400">{status.last_result.stats.total_update}</span></div>
-                      <div><span className="block text-[10px] text-slate-500">Skip</span><span className="font-bold text-slate-400">{status.last_result.stats.total_skip}</span></div>
-                      <div><span className="block text-[10px] text-slate-500">Harga 0</span><span className="font-bold text-amber-400">{status.last_result.stats.total_harga_0}</span></div>
+                      <div><span className="block text-[10px] text-slate-400">Insert</span><span className="font-bold text-emerald-600">{status.last_result.stats.total_insert}</span></div>
+                      <div><span className="block text-[10px] text-slate-400">Update</span><span className="font-bold text-indigo-600">{status.last_result.stats.total_update}</span></div>
+                      <div><span className="block text-[10px] text-slate-400">Skip</span><span className="font-bold text-slate-500">{status.last_result.stats.total_skip}</span></div>
+                      <div><span className="block text-[10px] text-slate-400">Harga 0</span><span className="font-bold text-amber-600">{status.last_result.stats.total_harga_0}</span></div>
                     </div>
                   </div>
                 )}
@@ -447,7 +486,7 @@ export default function Dashboard() {
                 <button
                   onClick={handleManualScrape}
                   disabled={loadingScrape}
-                  className="w-full bg-gradient-to-r from-teal-500 to-indigo-500 hover:from-teal-400 hover:to-indigo-400 text-white font-semibold py-3 px-4 rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-teal-500/10 disabled:opacity-50 transition active:scale-[0.98]"
+                  className="w-full bg-primary hover:bg-blue-800 text-white font-semibold py-3 px-4 rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-primary/10 disabled:opacity-50 transition-all duration-200 active:scale-[0.98]"
                 >
                   {loadingScrape ? (
                     <>
@@ -467,12 +506,12 @@ export default function Dashboard() {
                     type="date"
                     value={customDate}
                     onChange={(e) => setCustomDate(e.target.value)}
-                    className="flex-1 glass-input rounded-xl px-3 py-2 text-xs text-slate-200 focus:outline-none bg-slate-900/50 border border-white/10 h-[42px]"
+                    className="flex-1 form-input text-xs h-[42px]"
                   />
                   <button
                     onClick={handleCustomScrape}
                     disabled={loadingScrape || !customDate}
-                    className="bg-indigo-500/20 hover:bg-indigo-500/30 text-indigo-400 font-semibold px-4 rounded-xl flex items-center justify-center gap-2 shadow-lg disabled:opacity-50 transition active:scale-[0.98] border border-indigo-500/30 text-xs h-[42px]"
+                    className="bg-indigo-50 hover:bg-indigo-100 text-indigo-700 font-semibold px-4 rounded-xl flex items-center justify-center gap-2 shadow-sm disabled:opacity-50 transition-all duration-200 active:scale-[0.98] border border-indigo-200 text-xs h-[42px]"
                   >
                     <Calendar className="w-3.5 h-3.5" /> Scrape Tanggal
                   </button>
@@ -481,48 +520,51 @@ export default function Dashboard() {
                 {loadingScrape && (
                   <button
                     onClick={handleStopScrape}
-                    className="w-full bg-rose-500/20 hover:bg-rose-500/30 text-rose-400 font-medium py-2 px-4 rounded-xl flex items-center justify-center gap-2 border border-rose-500/30 transition animate-pulse"
+                    className="w-full bg-rose-50 hover:bg-rose-100 text-rose-600 font-medium py-2 px-4 rounded-xl flex items-center justify-center gap-2 border border-rose-200 transition-all duration-200 animate-pulse"
                   >
                     <Square className="w-3.5 h-3.5 fill-current" />
                     Hentikan Proses
                   </button>
                 )}
               </div>
+
+              {/* Gradient icon background */}
+              <div className="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-blue-400 to-indigo-600 rounded-2xl opacity-[0.07] rotate-12 pointer-events-none group-hover:-translate-y-1 transition-transform duration-300" />
             </div>
 
           </div>
 
           {/* SECTION 2: Multiple Schedules Manager */}
-          <div className="glass-panel rounded-2xl p-6 border border-white/5">
+          <div className="card-panel p-6">
             <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
               <div>
-                <h2 className="text-base font-bold text-slate-100 flex items-center gap-2">
-                  <Calendar className="w-5 h-5 text-teal-400" />
-                  Manajemen Jadwal Rutin (Multiple Schedules)
+                <h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
+                  <Calendar className="w-5 h-5 text-primary" />
+                  Manajemen Jadwal Rutin
                 </h2>
-                <p className="text-xs text-slate-400 mt-1">
+                <p className="text-xs text-slate-500 mt-1">
                   Atur waktu pengambilan harga otomatis. Anda dapat menambahkan lebih dari satu jadwal per hari.
                 </p>
               </div>
 
               {/* Quick Presets */}
-              <div className="flex flex-wrap gap-1.5 bg-slate-900/60 p-1.5 rounded-xl border border-white/5 self-start sm:self-auto">
-                <span className="text-[10px] font-semibold text-slate-500 px-2 self-center">Preset:</span>
+              <div className="flex flex-wrap gap-1.5 bg-slate-50 p-1.5 rounded-xl border border-slate-100 self-start sm:self-auto">
+                <span className="text-[10px] font-bold text-slate-400 px-2 self-center uppercase tracking-wider">Preset:</span>
                 <button
                   onClick={() => addPresetCron('08', '00', 'Pagi Hari (08:00)')}
-                  className="px-2 py-1 bg-slate-800 hover:bg-slate-700 text-slate-300 text-[11px] rounded-lg transition"
+                  className="px-2.5 py-1 bg-white hover:bg-primary/5 hover:text-primary text-slate-600 text-[11px] rounded-lg transition-all duration-200 border border-slate-200 font-medium"
                 >
                   08:00
                 </button>
                 <button
                   onClick={() => addPresetCron('12', '00', 'Siang Hari (12:00)')}
-                  className="px-2 py-1 bg-slate-800 hover:bg-slate-700 text-slate-300 text-[11px] rounded-lg transition"
+                  className="px-2.5 py-1 bg-white hover:bg-primary/5 hover:text-primary text-slate-600 text-[11px] rounded-lg transition-all duration-200 border border-slate-200 font-medium"
                 >
                   12:00
                 </button>
                 <button
                   onClick={() => addPresetCron('17', '00', 'Sore Hari (17:00)')}
-                  className="px-2 py-1 bg-slate-800 hover:bg-slate-700 text-slate-300 text-[11px] rounded-lg transition"
+                  className="px-2.5 py-1 bg-white hover:bg-primary/5 hover:text-primary text-slate-600 text-[11px] rounded-lg transition-all duration-200 border border-slate-200 font-medium"
                 >
                   17:00
                 </button>
@@ -530,49 +572,49 @@ export default function Dashboard() {
             </div>
 
             {/* Add Schedule Form */}
-            <form onSubmit={handleAddSchedule} className="grid grid-cols-1 md:grid-cols-12 gap-3 mb-6 bg-slate-900/40 p-4 rounded-xl border border-white/5">
+            <form onSubmit={handleAddSchedule} className="grid grid-cols-1 md:grid-cols-12 gap-3 mb-6 bg-slate-50/80 p-4 rounded-xl border border-slate-100">
               <div className="md:col-span-3">
-                <label className="block text-[11px] font-medium text-slate-400 mb-1">Jam (WIB)</label>
+                <label className="block text-[11px] font-semibold text-slate-500 mb-1 uppercase tracking-wider">Jam (WIB)</label>
                 <select
                   value={selectedHour}
                   onChange={(e) => setSelectedHour(e.target.value)}
-                  className="w-full glass-input rounded-lg px-3 py-2 text-xs text-slate-200 focus:outline-none"
+                  className="form-select text-sm"
                 >
                   {Array.from({ length: 24 }).map((_, i) => (
-                    <option key={i} value={i.toString().padStart(2, '0')} className="bg-slate-900">
+                    <option key={i} value={i.toString().padStart(2, '0')}>
                       {i.toString().padStart(2, '0')}
                     </option>
                   ))}
                 </select>
               </div>
               <div className="md:col-span-3">
-                <label className="block text-[11px] font-medium text-slate-400 mb-1">Menit</label>
+                <label className="block text-[11px] font-semibold text-slate-500 mb-1 uppercase tracking-wider">Menit</label>
                 <select
                   value={selectedMinute}
                   onChange={(e) => setSelectedMinute(e.target.value)}
-                  className="w-full glass-input rounded-lg px-3 py-2 text-xs text-slate-200 focus:outline-none"
+                  className="form-select text-sm"
                 >
                   {Array.from({ length: 60 }).map((_, i) => (
-                    <option key={i} value={i.toString().padStart(2, '0')} className="bg-slate-900">
+                    <option key={i} value={i.toString().padStart(2, '0')}>
                       {i.toString().padStart(2, '0')}
                     </option>
                   ))}
                 </select>
               </div>
               <div className="md:col-span-4">
-                <label className="block text-[11px] font-medium text-slate-400 mb-1">Label Jadwal</label>
+                <label className="block text-[11px] font-semibold text-slate-500 mb-1 uppercase tracking-wider">Label Jadwal</label>
                 <input
                   type="text"
                   value={newLabel}
                   onChange={(e) => setNewLabel(e.target.value)}
                   placeholder="Contoh: Scraping Pagi"
-                  className="w-full glass-input rounded-lg px-3 py-2 text-xs text-slate-200 placeholder:text-slate-600 focus:outline-none"
+                  className="form-input text-sm"
                 />
               </div>
               <div className="md:col-span-2 flex items-end">
                 <button
                   type="submit"
-                  className="w-full bg-teal-500 hover:bg-teal-400 text-slate-900 font-bold py-2 px-3 rounded-lg text-xs flex items-center justify-center gap-1 shadow transition"
+                  className="w-full bg-primary hover:bg-blue-800 text-white font-bold py-2 px-3 rounded-lg text-xs flex items-center justify-center gap-1 shadow-sm transition-all duration-200"
                 >
                   <Plus className="w-3.5 h-3.5 stroke-[3]" /> Tambah
                 </button>
@@ -583,28 +625,28 @@ export default function Dashboard() {
             <div className="overflow-x-auto">
               <table className="w-full text-left border-collapse">
                 <thead>
-                  <tr className="border-b border-slate-800 text-[11px] text-slate-500 font-semibold uppercase">
+                  <tr className="border-b border-slate-200 text-[11px] text-slate-400 font-bold uppercase tracking-wider">
                     <th className="pb-3 px-3">Label Jadwal</th>
                     <th className="pb-3 px-3">Waktu (WIB)</th>
                     <th className="pb-3 px-3">Estimasi Run Berikutnya</th>
                     <th className="pb-3 px-3 text-right">Aksi</th>
                   </tr>
                 </thead>
-                <tbody className="divide-y divide-slate-800/60 text-xs text-slate-300">
+                <tbody className="divide-y divide-slate-100 text-sm text-slate-700">
                   {schedules.length === 0 ? (
                     <tr>
-                      <td colSpan={4} className="text-center py-8 text-slate-500 italic">
+                      <td colSpan={4} className="text-center py-8 text-slate-400 italic text-sm">
                         Belum ada jadwal yang didaftarkan. Gunakan form di atas untuk menambah jadwal.
                       </td>
                     </tr>
                   ) : (
                     schedules.map((item) => (
-                      <tr key={item.id} className="hover:bg-slate-800/30 transition">
-                        <td className="py-3 px-3 font-medium text-slate-200">
+                      <tr key={item.id} className="hover:bg-slate-50 transition-colors duration-150">
+                        <td className="py-3.5 px-3 font-semibold text-slate-900">
                           {item.label}
                         </td>
-                        <td className="py-3 px-3">
-                          <span className="font-mono text-teal-400 font-bold bg-teal-500/10 py-1 px-2 rounded-lg border border-teal-500/20">
+                        <td className="py-3.5 px-3">
+                          <span className="font-mono text-primary font-bold bg-primary/5 py-1 px-2.5 rounded-lg border border-primary/10 text-sm">
                             {(() => {
                               const parts = item.cron_expression.split(' ');
                               if (parts.length >= 2 && !isNaN(parseInt(parts[0])) && !isNaN(parseInt(parts[1]))) {
@@ -614,13 +656,13 @@ export default function Dashboard() {
                             })()}
                           </span>
                         </td>
-                        <td className="py-3 px-3 text-slate-400">
+                        <td className="py-3.5 px-3 text-slate-500 text-sm">
                           {item.next_run ? new Date(item.next_run).toLocaleString('id-ID', { dateStyle: 'medium', timeStyle: 'short' }) : '-'}
                         </td>
-                        <td className="py-3 px-3 text-right">
+                        <td className="py-3.5 px-3 text-right">
                           <button
                             onClick={() => handleRemoveSchedule(item.id)}
-                            className="p-1.5 text-slate-500 hover:text-rose-400 hover:bg-rose-500/10 rounded-lg transition"
+                            className="p-1.5 text-slate-400 hover:text-rose-600 hover:bg-rose-50 rounded-lg transition-all duration-200"
                             title="Hapus Jadwal"
                           >
                             <Trash2 className="w-4 h-4" />
@@ -634,10 +676,10 @@ export default function Dashboard() {
             </div>
 
             {/* Hint */}
-            <div className="mt-4 pt-4 border-t border-white/5 flex items-start gap-2 text-[11px] text-slate-500">
-              <Info className="w-3.5 h-3.5 mt-0.5 flex-shrink-0 text-slate-400" />
+            <div className="mt-4 pt-4 border-t border-slate-100 flex items-start gap-2 text-[11px] text-slate-400">
+              <Info className="w-3.5 h-3.5 mt-0.5 flex-shrink-0 text-slate-300" />
               <span>
-                Format standar Cron: <code>(Menit) (Jam) (Hari) (Bulan) (Hari/Minggu)</code>. Waktu server saat ini mengikuti zona waktu sistem lokal.
+                Format standar Cron: <code className="bg-slate-100 px-1.5 py-0.5 rounded text-slate-600 text-[10px] font-mono">(Menit) (Jam) (Hari) (Bulan) (Hari/Minggu)</code>. Waktu server saat ini mengikuti zona waktu sistem lokal.
               </span>
             </div>
           </div>
@@ -645,26 +687,26 @@ export default function Dashboard() {
         </div>
 
         {/* RIGHT COLUMN: Terminal Logs */}
-        <div className="glass-panel rounded-2xl p-6 border border-white/5 flex flex-col h-[500px] lg:h-[700px]">
+        <div className="card-panel p-6 flex flex-col h-[500px] lg:h-[700px]">
           
           {/* Logs Header */}
-          <div className="flex items-center justify-between pb-4 mb-4 border-b border-white/5">
-            <h2 className="text-sm font-bold text-slate-100 flex items-center gap-2">
-              <Terminal className="w-4 h-4 text-indigo-400" />
+          <div className="flex items-center justify-between pb-4 mb-4 border-b border-slate-200/60">
+            <h2 className="text-sm font-bold text-slate-900 flex items-center gap-2">
+              <Terminal className="w-4 h-4 text-indigo-500" />
               Log Eksekusi Real-time
             </h2>
 
-            {/* Controls */}
+            {/* Filter Controls */}
             <div className="flex items-center gap-1.5">
-              <div className="flex bg-slate-900/80 rounded-lg p-0.5 border border-white/5">
+              <div className="flex bg-slate-100 rounded-lg p-0.5 border border-slate-200">
                 {['ALL', 'INFO', 'WARNING', 'ERROR'].map((lvl) => (
                   <button
                     key={lvl}
                     onClick={() => setLogLevelFilter(lvl)}
-                    className={`px-2 py-1 rounded-md text-[10px] font-bold transition ${
+                    className={`px-2 py-1 rounded-md text-[10px] font-bold transition-all duration-200 ${
                       logLevelFilter === lvl 
-                        ? 'bg-slate-700 text-white' 
-                        : 'text-slate-500 hover:text-slate-300'
+                        ? 'bg-primary text-white shadow-sm' 
+                        : 'text-slate-500 hover:text-slate-700'
                     }`}
                   >
                     {lvl}
@@ -674,10 +716,10 @@ export default function Dashboard() {
             </div>
           </div>
 
-          {/* Terminal Box */}
-          <div ref={logsContainerRef} className="flex-1 bg-slate-950 rounded-xl p-4 font-mono text-xs overflow-y-auto border border-black/50 shadow-inner flex flex-col space-y-2">
+          {/* Terminal Box — stays dark for readability */}
+          <div ref={logsContainerRef} className="flex-1 bg-dark rounded-xl p-4 font-mono text-xs overflow-y-auto border border-slate-800 shadow-inner flex flex-col space-y-2 terminal-scrollbar">
             {logs.length === 0 ? (
-              <div className="m-auto text-slate-600 text-center italic">
+              <div className="m-auto text-slate-500 text-center italic">
                 [ Log buffer kosong / Menunggu aktivitas baru... ]
               </div>
             ) : (
@@ -690,7 +732,7 @@ export default function Dashboard() {
                 const timeStr = new Date(log.timestamp).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit' })
 
                 return (
-                  <div key={idx} className="leading-relaxed break-words hover:bg-white/[0.02] px-1 rounded transition-colors">
+                  <div key={idx} className="leading-relaxed break-words hover:bg-white/[0.03] px-1 rounded transition-colors duration-100">
                     <span className="text-slate-600 select-none">[{timeStr}]</span>{' '}
                     <span className={`font-semibold ${levelColor} select-none`}>[{log.level}]</span>{' '}
                     <span className="text-slate-500 select-none">({log.source})</span>{' '}
@@ -702,10 +744,10 @@ export default function Dashboard() {
             <div ref={logsEndRef} />
           </div>
 
-          {/* Logs Footer status */}
-          <div className="mt-3 flex items-center justify-between text-[11px] text-slate-500 px-1">
-            <span className="flex items-center gap-1">
-              <span className="w-1.5 h-1.5 rounded-full bg-teal-500 animate-pulse" /> Live polling aktif
+          {/* Logs Footer */}
+          <div className="mt-3 flex items-center justify-between text-[11px] text-slate-400 px-1">
+            <span className="flex items-center gap-1.5">
+              <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" /> Live polling aktif
             </span>
             <span>Total buffer: {logs.length} baris</span>
           </div>
@@ -715,40 +757,40 @@ export default function Dashboard() {
 
       {/* --- STATS BREAKDOWN MODAL --- */}
       {showStatsModal && selectedStats && (
-        <div className="fixed inset-0 z-50 bg-slate-950/80 backdrop-blur-sm flex items-center justify-center p-4">
-          <div className="glass-panel w-full max-w-2xl rounded-2xl p-6 border border-white/10 shadow-2xl relative animate-in fade-in zoom-in-95 duration-200">
+        <div className="fixed inset-0 z-50 bg-slate-900/50 backdrop-blur-sm flex items-center justify-center p-4">
+          <div className="bg-white w-full max-w-2xl rounded-2xl p-6 border border-slate-200 shadow-2xl relative animate-in fade-in zoom-in-95 duration-200">
             
             <button
               onClick={() => setShowStatsModal(false)}
-              className="absolute top-4 right-4 p-2 text-slate-400 hover:text-white rounded-lg transition"
+              className="absolute top-4 right-4 p-2 text-slate-400 hover:text-slate-700 hover:bg-slate-100 rounded-lg transition-all duration-200"
             >
               <X className="w-5 h-5" />
             </button>
 
-            <h3 className="text-lg font-bold text-white mb-1 flex items-center gap-2">
-              <CheckCircle className="w-5 h-5 text-teal-400" /> Laporan Eksekusi Scraping
+            <h3 className="text-lg font-bold text-slate-900 mb-1 flex items-center gap-2">
+              <CheckCircle className="w-5 h-5 text-emerald-500" /> Laporan Eksekusi Scraping
             </h3>
-            <p className="text-xs text-slate-400 mb-6 pb-4 border-b border-white/5">
+            <p className="text-xs text-slate-500 mb-6 pb-4 border-b border-slate-100">
               Breakdown lengkap hasil sinkronisasi harga komoditas dan pasar hari ini.
             </p>
 
             {/* Grid Summaries */}
             <div className="grid grid-cols-4 gap-4 mb-6">
-              <div className="bg-slate-900/60 p-3 rounded-xl border border-white/5 text-center">
-                <span className="text-[11px] text-slate-500 block">Insert Baru</span>
-                <span className="text-xl font-bold text-teal-400">{selectedStats.total_insert}</span>
+              <div className="bg-emerald-50 p-3 rounded-xl border border-emerald-100 text-center">
+                <span className="text-[11px] text-emerald-600 block font-medium">Insert Baru</span>
+                <span className="text-xl font-black text-emerald-700">{selectedStats.total_insert}</span>
               </div>
-              <div className="bg-slate-900/60 p-3 rounded-xl border border-white/5 text-center">
-                <span className="text-[11px] text-slate-500 block">Diperbarui</span>
-                <span className="text-xl font-bold text-indigo-400">{selectedStats.total_update}</span>
+              <div className="bg-indigo-50 p-3 rounded-xl border border-indigo-100 text-center">
+                <span className="text-[11px] text-indigo-600 block font-medium">Diperbarui</span>
+                <span className="text-xl font-black text-indigo-700">{selectedStats.total_update}</span>
               </div>
-              <div className="bg-slate-900/60 p-3 rounded-xl border border-white/5 text-center">
-                <span className="text-[11px] text-slate-500 block">Data Lewat / Skip</span>
-                <span className="text-xl font-bold text-slate-400">{selectedStats.total_skip}</span>
+              <div className="bg-slate-50 p-3 rounded-xl border border-slate-200 text-center">
+                <span className="text-[11px] text-slate-500 block font-medium">Data Lewat / Skip</span>
+                <span className="text-xl font-black text-slate-600">{selectedStats.total_skip}</span>
               </div>
-              <div className="bg-slate-900/60 p-3 rounded-xl border border-white/5 text-center">
-                <span className="text-[11px] text-slate-500 block">Harga Rp 0</span>
-                <span className="text-xl font-bold text-amber-400">{selectedStats.total_harga_0}</span>
+              <div className="bg-amber-50 p-3 rounded-xl border border-amber-200 text-center">
+                <span className="text-[11px] text-amber-600 block font-medium">Harga Rp 0</span>
+                <span className="text-xl font-black text-amber-700">{selectedStats.total_harga_0}</span>
               </div>
             </div>
 
@@ -756,53 +798,53 @@ export default function Dashboard() {
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
               
               {/* Pasar Sukses */}
-              <div className="bg-slate-900/40 p-4 rounded-xl border border-white/5">
-                <span className="font-bold text-slate-300 block mb-2 text-[11px] uppercase tracking-wider text-teal-400 flex items-center gap-1.5">
+              <div className="bg-slate-50 p-4 rounded-xl border border-slate-100">
+                <span className="font-bold block mb-2 text-[11px] uppercase tracking-wider text-emerald-600 flex items-center gap-1.5">
                   <Check className="w-3.5 h-3.5" /> Pasar Tersinkronisasi ({selectedStats.pasar_berhasil?.length || 0})
                 </span>
                 {selectedStats.pasar_berhasil?.length > 0 ? (
-                  <ul className="space-y-1 text-slate-300">
+                  <ul className="space-y-1 text-slate-700">
                     {selectedStats.pasar_berhasil.map((psr: string, i: number) => (
                       <li key={i} className="flex items-center gap-1.5">
-                        <span className="w-1 h-1 rounded-full bg-teal-400" /> {psr}
+                        <span className="w-1 h-1 rounded-full bg-emerald-500" /> {psr}
                       </li>
                     ))}
                   </ul>
                 ) : (
-                  <span className="text-slate-500 italic">- Tidak ada -</span>
+                  <span className="text-slate-400 italic">- Tidak ada -</span>
                 )}
               </div>
 
               {/* Pasar Harga 0 */}
-              <div className="bg-slate-900/40 p-4 rounded-xl border border-white/5">
-                <span className="font-bold text-slate-300 block mb-2 text-[11px] uppercase tracking-wider text-amber-400 flex items-center gap-1.5">
+              <div className="bg-slate-50 p-4 rounded-xl border border-slate-100">
+                <span className="font-bold block mb-2 text-[11px] uppercase tracking-wider text-amber-600 flex items-center gap-1.5">
                   <AlertTriangle className="w-3.5 h-3.5" /> Pasar Harga Kosong/Nol ({selectedStats.pasar_harga_0?.length || 0})
                 </span>
                 {selectedStats.pasar_harga_0?.length > 0 ? (
-                  <ul className="space-y-1 text-slate-400">
+                  <ul className="space-y-1 text-slate-600">
                     {selectedStats.pasar_harga_0.map((psr: string, i: number) => (
                       <li key={i} className="flex items-center gap-1.5">
-                        <span className="w-1 h-1 rounded-full bg-amber-400" /> {psr}
+                        <span className="w-1 h-1 rounded-full bg-amber-500" /> {psr}
                       </li>
                     ))}
                   </ul>
                 ) : (
-                  <span className="text-slate-500 italic">- Tidak ada -</span>
+                  <span className="text-slate-400 italic">- Tidak ada -</span>
                 )}
               </div>
 
             </div>
 
             {/* Bottom info */}
-            <div className="mt-6 pt-4 border-t border-white/5 flex items-center justify-between text-slate-400 text-[11px]">
-              <span>Total Komoditas Diperbarui: <strong>{selectedStats.komoditas_berhasil_count || 0} item</strong></span>
-              <span>Komoditas Harga Nol: <strong>{selectedStats.komoditas_harga_0_count || 0} item</strong></span>
+            <div className="mt-6 pt-4 border-t border-slate-100 flex items-center justify-between text-slate-500 text-[11px]">
+              <span>Total Komoditas Diperbarui: <strong className="text-slate-700">{selectedStats.komoditas_berhasil_count || 0} item</strong></span>
+              <span>Komoditas Harga Nol: <strong className="text-slate-700">{selectedStats.komoditas_harga_0_count || 0} item</strong></span>
             </div>
 
             <div className="mt-6 text-right">
               <button
                 onClick={() => setShowStatsModal(false)}
-                className="bg-slate-800 hover:bg-slate-700 text-slate-200 font-medium py-2 px-4 rounded-xl transition"
+                className="bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold py-2 px-5 rounded-xl transition-all duration-200 border border-slate-200 text-sm"
               >
                 Tutup Jendela
               </button>

frontend/tailwind.config.js

@@ -4,7 +4,15 @@ module.exports = {
     './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primary: '#1e3a8a',
+        dark: '#0f172a',
+      },
+      fontFamily: {
+        sans: ['Inter', 'sans-serif'],
+      },
+    },
   },
   plugins: [],
 }