From 942634c98e61806a56023dde5ee34fd8c86046ff Mon Sep 17 00:00:00 2001
From: hamed <15238-genius.ha@users.noreply.drupalcode.org>
Date: Wed, 10 Jun 2026 12:30:14 +0330
Subject: [PATCH] refactor: update UI components for consistency and dark mode
 support

- Refactored PaymentsPage, RatingsPage, RepresentationDetailPage, RepresentationsPage, SecretariesPage, SettlementsPage, SmsPage, UserDetailPage, and UsersPage to use consistent class names for styling.
- Updated button styles to use new utility classes for primary, secondary, and danger buttons.
- Enhanced dark mode support across various components by adjusting text and background colors.
- Introduced new utility classes for form inputs, labels, and info rows to standardize styling.
- Implemented Zustand for persistent UI state management, including dark mode toggle functionality.
- Updated CSS to include new styles for skeleton loading and animations.
- Added optional dependencies for improved compatibility with different platforms.
---
 .../admin/components/layout/AdminLayout.tsx   |  15 +-
 assets/admin/components/layout/Sidebar.tsx    | 112 +++---
 assets/admin/components/layout/Topbar.tsx     |  74 ++--
 assets/admin/components/ui/ConfirmDialog.tsx  |  36 +-
 assets/admin/components/ui/DataTable.tsx      |  77 ++--
 assets/admin/components/ui/Modal.tsx          |  43 ++-
 assets/admin/components/ui/PageHeader.tsx     |  23 +-
 assets/admin/components/ui/Pagination.tsx     |  25 +-
 assets/admin/components/ui/StatusBadge.tsx    |  80 ++---
 assets/admin/pages/AppointmentDetailPage.tsx  |  18 +-
 assets/admin/pages/AppointmentsPage.tsx       |   8 +-
 assets/admin/pages/BlogFormPage.tsx           |  26 +-
 assets/admin/pages/BlogsPage.tsx              |  12 +-
 assets/admin/pages/CategoriesPage.tsx         |  34 +-
 assets/admin/pages/ClinicDetailPage.tsx       |  12 +-
 assets/admin/pages/ClinicsPage.tsx            |  10 +-
 assets/admin/pages/CommentsPage.tsx           |   8 +-
 assets/admin/pages/DashboardPage.tsx          | 336 ++++++++++++------
 assets/admin/pages/DoctorDetailPage.tsx       |  12 +-
 assets/admin/pages/DoctorsPage.tsx            |  14 +-
 assets/admin/pages/LoginPage.tsx              | 187 +++++++---
 assets/admin/pages/PaymentDetailPage.tsx      |  12 +-
 assets/admin/pages/PaymentsPage.tsx           |   8 +-
 assets/admin/pages/RatingsPage.tsx            |   4 +-
 .../admin/pages/RepresentationDetailPage.tsx  |  30 +-
 assets/admin/pages/RepresentationsPage.tsx    |  30 +-
 assets/admin/pages/SecretariesPage.tsx        |  14 +-
 assets/admin/pages/SettlementsPage.tsx        |  16 +-
 assets/admin/pages/SmsPage.tsx                |  32 +-
 assets/admin/pages/UserDetailPage.tsx         |  12 +-
 assets/admin/pages/UsersPage.tsx              |  12 +-
 assets/admin/stores/uiStore.ts                |  31 +-
 assets/admin/styles.css                       | 136 ++++++-
 package-lock.json                             |  11 +-
 package.json                                  |   6 +
 35 files changed, 967 insertions(+), 549 deletions(-)

diff --git a/assets/admin/components/layout/AdminLayout.tsx b/assets/admin/components/layout/AdminLayout.tsx
index fe7e5e1b..0d76c445 100644
--- a/assets/admin/components/layout/AdminLayout.tsx
+++ b/assets/admin/components/layout/AdminLayout.tsx
@@ -1,15 +1,22 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Outlet } from 'react-router-dom';
 import Sidebar from './Sidebar';
 import Topbar from './Topbar';
+import { useUiStore } from '../../stores/uiStore';
 
 export default function AdminLayout() {
+  const darkMode = useUiStore((s) => s.darkMode);
+
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', darkMode);
+  }, [darkMode]);
+
   return (
-    <div className="flex h-screen overflow-hidden bg-[#f1f5f9]">
+    <div className="flex h-screen overflow-hidden bg-slate-100 dark:bg-gray-950 transition-colors duration-200">
       <Sidebar />
-      <div className="flex flex-col flex-1 overflow-hidden">
+      <div className="flex flex-col flex-1 overflow-hidden min-w-0">
         <Topbar />
-        <main className="flex-1 overflow-y-auto p-6">
+        <main className="flex-1 overflow-y-auto p-5 lg:p-6">
           <Outlet />
         </main>
       </div>
diff --git a/assets/admin/components/layout/Sidebar.tsx b/assets/admin/components/layout/Sidebar.tsx
index 71de9acc..6010d5ec 100644
--- a/assets/admin/components/layout/Sidebar.tsx
+++ b/assets/admin/components/layout/Sidebar.tsx
@@ -15,9 +15,7 @@ import {
   TagIcon,
   DocumentTextIcon,
   KeyIcon,
-  ChevronRightIcon,
-  ChevronLeftIcon,
-  MagnifyingGlassIcon,
+  Bars3Icon,
   ArrowLeftOnRectangleIcon,
 } from '@heroicons/react/24/outline';
 import { useUiStore } from '../../stores/uiStore';
@@ -66,96 +64,100 @@ export default function Sidebar() {
   const logout = useAuthStore((s) => s.logout);
   const navigate = useNavigate();
 
-  const handleLogout = () => {
-    logout();
-    navigate('/admin/login');
-  };
-
   return (
     <aside
-      style={{ transition: 'width 300ms cubic-bezier(0.4,0,0.2,1)' }}
-      className={`${open ? 'w-[260px]' : 'w-[72px]'} shrink-0 bg-[#0f172a] flex flex-col h-screen overflow-hidden`}
+      className={`
+        ${open ? 'w-64' : 'w-[70px]'}
+        shrink-0 flex flex-col h-screen overflow-hidden
+        transition-[width] duration-300 ease-in-out
+        bg-[#100c22] dark:bg-gray-950
+        border-l border-white/5
+      `}
     >
-      {/* Logo */}
-      <div className="flex items-center justify-between px-4 py-5 border-b border-slate-700/50">
+      {/* ── Header ─────────────────────────────── */}
+      <div className={`flex items-center h-16 px-3 shrink-0 border-b border-white/[0.06] ${open ? 'gap-3' : 'justify-center'}`}>
         {open && (
-          <span className="text-white font-bold text-lg tracking-tight">ClinicPro</span>
+          <div className="flex items-center gap-2.5 flex-1 min-w-0">
+            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-violet-500 to-purple-700 flex items-center justify-center shadow-lg shadow-violet-900/40 shrink-0">
+              <HeartIcon className="w-4 h-4 text-white" />
+            </div>
+            <div className="min-w-0">
+              <p className="text-white font-bold text-sm leading-none truncate">ClinicPro</p>
+              <p className="text-slate-500 text-[10px] leading-none mt-0.5">پنل مدیریت</p>
+            </div>
+          </div>
         )}
         <button
           onClick={toggle}
-          className="text-slate-400 hover:text-white p-1 rounded-md hover:bg-slate-700/50 transition-colors"
+          className="w-8 h-8 flex items-center justify-center rounded-lg text-slate-500 hover:text-slate-200 hover:bg-white/8 transition-colors shrink-0"
+          title={open ? 'بستن منو' : 'باز کردن منو'}
         >
-          {open ? <ChevronRightIcon className="w-5 h-5" /> : <ChevronLeftIcon className="w-5 h-5" />}
+          <Bars3Icon className="w-5 h-5" />
         </button>
       </div>
 
-      {/* Search */}
-      {open && (
-        <div className="px-3 py-3 border-b border-slate-700/50">
-          <div className="flex items-center gap-2 bg-slate-800 rounded-lg px-3 py-2">
-            <MagnifyingGlassIcon className="w-4 h-4 text-slate-400 shrink-0" />
-            <input
-              type="text"
-              placeholder="جستجوی سریع..."
-              className="bg-transparent text-sm text-slate-300 placeholder-slate-500 outline-none w-full"
-            />
-          </div>
-        </div>
-      )}
-
-      {/* Navigation */}
-      <nav className="flex-1 overflow-y-auto py-3 space-y-1 scrollbar-thin">
-        {sections.map((section) => (
-          <div key={section.label} className="mb-2">
-            {open && (
-              <p className="text-[11px] font-semibold text-slate-500 uppercase tracking-wider px-4 py-1">
+      {/* ── Navigation ─────────────────────────── */}
+      <nav className="flex-1 overflow-y-auto py-3 px-2 space-y-0.5">
+        {sections.map((section, si) => (
+          <div key={section.label} className={si > 0 ? 'mt-4' : ''}>
+            {open ? (
+              <p className="text-[10px] font-semibold text-slate-600 uppercase tracking-widest px-3 py-1.5 mb-0.5">
                 {section.label}
               </p>
+            ) : (
+              <div className="border-t border-white/[0.06] mx-1 my-2" />
             )}
             {section.items.map(({ to, icon: Icon, label }) => (
               <NavLink
                 key={to}
                 to={to}
-                className={({ isActive }) =>
-                  `flex items-center gap-3 mx-2 px-3 py-2.5 rounded-lg text-sm transition-colors group ${
-                    isActive
-                      ? 'bg-primary-500/15 text-primary-400 font-semibold border-r-4 border-primary-500'
-                      : 'text-slate-400 hover:text-slate-200 hover:bg-slate-700/40'
-                  }`
-                }
                 title={!open ? label : undefined}
+                className={({ isActive }) => `
+                  relative flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm
+                  transition-all duration-150 group
+                  ${isActive
+                    ? 'bg-violet-500/15 text-violet-300 font-semibold'
+                    : 'text-slate-500 hover:text-slate-200 hover:bg-white/[0.06]'}
+                `}
               >
-                <Icon className="w-5 h-5 shrink-0" />
-                {open && <span>{label}</span>}
+                {({ isActive }) => (
+                  <>
+                    {isActive && (
+                      <span className="absolute right-0 top-1/2 -translate-y-1/2 w-[3px] h-5 bg-violet-400 rounded-l-full" />
+                    )}
+                    <Icon className={`w-5 h-5 shrink-0 transition-transform duration-150 group-hover:scale-105 ${isActive ? 'text-violet-400' : ''}`} />
+                    {open && <span className="truncate">{label}</span>}
+                  </>
+                )}
               </NavLink>
             ))}
           </div>
         ))}
       </nav>
 
-      {/* User card */}
-      <div className="border-t border-slate-700/50 p-3">
+      {/* ── User footer ────────────────────────── */}
+      <div className="shrink-0 border-t border-white/[0.06] p-2.5">
         {open ? (
-          <div className="flex items-center gap-3 bg-slate-800 rounded-xl p-3">
-            <div className="w-8 h-8 rounded-full bg-primary-600 flex items-center justify-center text-white text-sm font-bold shrink-0">
+          <div className="flex items-center gap-3 rounded-xl px-3 py-2.5 hover:bg-white/[0.06] transition-colors group">
+            <div className="w-8 h-8 rounded-full bg-gradient-to-br from-violet-500 to-purple-700 flex items-center justify-center text-white text-xs font-bold shrink-0 shadow-md shadow-violet-900/30">
               A
             </div>
             <div className="flex-1 min-w-0">
-              <p className="text-white text-sm font-medium truncate">Admin</p>
-              <p className="text-slate-400 text-xs truncate">مدیر سیستم</p>
+              <p className="text-sm font-medium text-slate-300 truncate leading-none">Admin</p>
+              <p className="text-[11px] text-slate-600 truncate mt-0.5">مدیر سیستم</p>
             </div>
             <button
-              onClick={handleLogout}
-              className="text-slate-400 hover:text-red-400 transition-colors"
+              onClick={() => { logout(); navigate('/admin/login'); }}
+              className="text-slate-600 hover:text-red-400 transition-colors p-1 rounded-lg hover:bg-red-400/10 opacity-0 group-hover:opacity-100"
               title="خروج"
             >
-              <ArrowLeftOnRectangleIcon className="w-5 h-5" />
+              <ArrowLeftOnRectangleIcon className="w-4 h-4" />
             </button>
           </div>
         ) : (
           <button
-            onClick={handleLogout}
-            className="w-full flex justify-center py-2 text-slate-400 hover:text-red-400 transition-colors"
+            onClick={() => { logout(); navigate('/admin/login'); }}
+            className="w-full flex justify-center py-2.5 text-slate-600 hover:text-red-400 transition-colors rounded-xl hover:bg-red-400/10"
             title="خروج"
           >
             <ArrowLeftOnRectangleIcon className="w-5 h-5" />
diff --git a/assets/admin/components/layout/Topbar.tsx b/assets/admin/components/layout/Topbar.tsx
index f5680144..3dde1d20 100644
--- a/assets/admin/components/layout/Topbar.tsx
+++ b/assets/admin/components/layout/Topbar.tsx
@@ -1,53 +1,55 @@
 import React from 'react';
-import { Bars3Icon, BellIcon } from '@heroicons/react/24/outline';
+import { BellIcon, SunIcon, MoonIcon, Bars3Icon } from '@heroicons/react/24/outline';
 import { useUiStore } from '../../stores/uiStore';
 
-interface TopbarProps {
-  pageTitle?: string;
-  breadcrumbs?: { label: string; to?: string }[];
-}
-
-export default function Topbar({ pageTitle, breadcrumbs }: TopbarProps) {
-  const toggle = useUiStore((s) => s.toggleSidebar);
+export default function Topbar() {
+  const toggleSidebar = useUiStore((s) => s.toggleSidebar);
+  const darkMode = useUiStore((s) => s.darkMode);
+  const toggleDarkMode = useUiStore((s) => s.toggleDarkMode);
 
   return (
-    <header className="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 shrink-0">
-      <div className="flex items-center gap-4">
+    <header className="h-14 bg-white dark:bg-gray-900 border-b border-slate-200 dark:border-gray-700/50 flex items-center justify-between px-4 lg:px-6 shrink-0 transition-colors duration-200">
+      {/* Left side (RTL: right side visually) */}
+      <button
+        onClick={toggleSidebar}
+        className="lg:hidden w-9 h-9 flex items-center justify-center rounded-xl text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors"
+      >
+        <Bars3Icon className="w-5 h-5" />
+      </button>
+
+      <div className="flex-1" />
+
+      {/* Right side actions */}
+      <div className="flex items-center gap-1">
+        {/* Dark mode toggle */}
         <button
-          onClick={toggle}
-          className="text-gray-500 hover:text-gray-700 p-1 rounded-md hover:bg-gray-100 transition-colors md:hidden"
+          onClick={toggleDarkMode}
+          className="w-9 h-9 flex items-center justify-center rounded-xl text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors"
+          title={darkMode ? 'حالت روشن' : 'حالت تاریک'}
         >
-          <Bars3Icon className="w-5 h-5" />
+          {darkMode
+            ? <SunIcon className="w-5 h-5 text-amber-400" />
+            : <MoonIcon className="w-5 h-5" />}
         </button>
 
-        <div>
-          {pageTitle && <h2 className="text-base font-semibold text-gray-800">{pageTitle}</h2>}
-          {breadcrumbs && breadcrumbs.length > 0 && (
-            <nav className="flex items-center gap-1 text-xs text-gray-500">
-              {breadcrumbs.map((crumb, i) => (
-                <React.Fragment key={i}>
-                  {i > 0 && <span>/</span>}
-                  <span className={i === breadcrumbs.length - 1 ? 'text-gray-700 font-medium' : ''}>
-                    {crumb.label}
-                  </span>
-                </React.Fragment>
-              ))}
-            </nav>
-          )}
-        </div>
-      </div>
-
-      <div className="flex items-center gap-3">
-        <button className="relative text-gray-500 hover:text-gray-700 p-2 rounded-lg hover:bg-gray-100 transition-colors">
+        {/* Notifications */}
+        <button className="relative w-9 h-9 flex items-center justify-center rounded-xl text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors">
           <BellIcon className="w-5 h-5" />
-          <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full" />
+          <span className="absolute top-2 right-2 w-1.5 h-1.5 bg-red-500 rounded-full ring-2 ring-white dark:ring-gray-900" />
         </button>
 
-        <div className="flex items-center gap-2 cursor-pointer">
-          <div className="w-8 h-8 rounded-full bg-primary-600 flex items-center justify-center text-white text-sm font-bold">
+        {/* Divider */}
+        <div className="w-px h-6 bg-slate-200 dark:bg-gray-700 mx-1" />
+
+        {/* Avatar */}
+        <div className="flex items-center gap-2.5 cursor-pointer pl-1">
+          <div className="w-8 h-8 rounded-full bg-gradient-to-br from-violet-500 to-purple-700 flex items-center justify-center text-white text-sm font-bold shadow-sm">
             A
           </div>
-          <span className="text-sm font-medium text-gray-700 hidden sm:block">Admin</span>
+          <div className="hidden sm:block">
+            <p className="text-sm font-semibold text-slate-700 dark:text-slate-200 leading-none">Admin</p>
+            <p className="text-[11px] text-slate-400 dark:text-slate-500 leading-none mt-0.5">مدیر سیستم</p>
+          </div>
         </div>
       </div>
     </header>
diff --git a/assets/admin/components/ui/ConfirmDialog.tsx b/assets/admin/components/ui/ConfirmDialog.tsx
index f00a6115..6cea2edf 100644
--- a/assets/admin/components/ui/ConfirmDialog.tsx
+++ b/assets/admin/components/ui/ConfirmDialog.tsx
@@ -27,39 +27,43 @@ export default function ConfirmDialog({
   if (!open) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="absolute inset-0 bg-black/40" onClick={onCancel} />
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-fade-in">
+      <div className="absolute inset-0 bg-black/50 dark:bg-black/70 backdrop-blur-sm" onClick={onCancel} />
       <div
-        className="relative bg-white rounded-2xl shadow-2xl w-full max-w-sm mx-4 p-6"
-        style={{ animation: 'scale-in 200ms ease' }}
+        className="relative bg-white dark:bg-gray-900 rounded-2xl shadow-2xl dark:shadow-black/40 border border-slate-200/60 dark:border-gray-700/50 w-full max-w-sm p-6 animate-scale-in"
       >
         <div className="flex items-start gap-4">
-          <div className={`shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${danger ? 'bg-red-100' : 'bg-yellow-100'}`}>
-            <ExclamationTriangleIcon className={`w-5 h-5 ${danger ? 'text-red-600' : 'text-yellow-600'}`} />
+          <div className={`shrink-0 w-10 h-10 rounded-xl flex items-center justify-center ${danger ? 'bg-red-100 dark:bg-red-500/10' : 'bg-amber-100 dark:bg-amber-500/10'}`}>
+            <ExclamationTriangleIcon className={`w-5 h-5 ${danger ? 'text-red-600 dark:text-red-400' : 'text-amber-600 dark:text-amber-400'}`} />
           </div>
-          <div>
-            <h3 className="font-semibold text-gray-900 text-base">{title}</h3>
-            <p className="text-sm text-gray-500 mt-1">{message}</p>
+          <div className="flex-1 min-w-0">
+            <h3 className="font-semibold text-slate-900 dark:text-slate-100 text-base leading-snug">{title}</h3>
+            <p className="text-sm text-slate-500 dark:text-slate-400 mt-1.5 leading-relaxed">{message}</p>
           </div>
         </div>
+
         <div className="flex gap-3 mt-6 justify-end">
           <button
             onClick={onCancel}
             disabled={loading}
-            className="px-4 py-2 rounded-[10px] border border-gray-300 text-sm text-gray-700 hover:bg-gray-50 disabled:opacity-50 transition-colors"
+            className="cp-btn-secondary px-5 py-2"
           >
             {cancelLabel}
           </button>
           <button
             onClick={onConfirm}
             disabled={loading}
-            className={`px-4 py-2 rounded-[10px] text-sm text-white font-medium disabled:opacity-50 transition-colors ${
-              danger
-                ? 'bg-red-600 hover:bg-red-700'
-                : 'bg-primary-600 hover:bg-primary-700'
-            }`}
+            className={`px-5 py-2 text-white font-medium ${danger ? 'cp-btn-danger' : 'cp-btn-primary'}`}
           >
-            {loading ? 'در حال انجام...' : confirmLabel}
+            {loading ? (
+              <span className="flex items-center gap-2">
+                <svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z" />
+                </svg>
+                در حال انجام...
+              </span>
+            ) : confirmLabel}
           </button>
         </div>
       </div>
diff --git a/assets/admin/components/ui/DataTable.tsx b/assets/admin/components/ui/DataTable.tsx
index 8bacc567..b326e122 100644
--- a/assets/admin/components/ui/DataTable.tsx
+++ b/assets/admin/components/ui/DataTable.tsx
@@ -6,6 +6,7 @@ export interface Column<T> {
   header: string;
   render?: (row: T) => React.ReactNode;
   sortable?: boolean;
+  className?: string;
 }
 
 interface Props<T> {
@@ -18,14 +19,15 @@ interface Props<T> {
   actions?: (row: T) => React.ReactNode;
   emptyMessage?: string;
   emptyAction?: React.ReactNode;
+  headerExtra?: React.ReactNode;
 }
 
 function SkeletonRow({ cols }: { cols: number }) {
   return (
     <tr>
       {Array.from({ length: cols }).map((_, i) => (
-        <td key={i} className="px-4 py-3">
-          <div className="h-4 bg-gray-200 rounded animate-pulse w-full" />
+        <td key={i} className="px-4 py-3.5">
+          <div className="h-4 rounded-lg skeleton" style={{ width: `${60 + (i * 17) % 40}%` }} />
         </td>
       ))}
     </tr>
@@ -42,73 +44,86 @@ export default function DataTable<T extends object>({
   actions,
   emptyMessage = 'هیچ موردی یافت نشد',
   emptyAction,
+  headerExtra,
 }: Props<T>) {
   const allColumns = actions
-    ? [...columns, { key: '__actions', header: 'اقدامات' }]
+    ? [...columns, { key: '__actions', header: 'اقدامات', className: 'w-28' }]
     : columns;
 
   return (
     <div>
-      {onSearchChange !== undefined && (
-        <div className="mb-4">
-          <div className="relative max-w-xs">
-            <MagnifyingGlassIcon className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
-            <input
-              type="text"
-              value={searchValue}
-              onChange={(e) => onSearchChange(e.target.value)}
-              placeholder={searchPlaceholder}
-              className="w-full h-10 pr-9 pl-3 border border-gray-300 rounded-[10px] text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
-            />
-          </div>
+      {/* Search + extras header bar */}
+      {(onSearchChange !== undefined || headerExtra) && (
+        <div className="flex items-center justify-between gap-3 mb-4 flex-wrap">
+          {onSearchChange !== undefined && (
+            <div className="relative w-72 max-w-full">
+              <MagnifyingGlassIcon className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-slate-500 pointer-events-none" />
+              <input
+                type="text"
+                value={searchValue}
+                onChange={(e) => onSearchChange(e.target.value)}
+                placeholder={searchPlaceholder}
+                className="cp-input pr-9"
+              />
+            </div>
+          )}
+          {headerExtra && <div className="flex items-center gap-2">{headerExtra}</div>}
         </div>
       )}
 
-      <div className="overflow-x-auto rounded-xl border border-gray-200">
+      <div className="overflow-x-auto rounded-xl border border-slate-200 dark:border-gray-700/50">
         <table className="w-full text-sm">
           <thead>
-            <tr className="bg-gray-50 border-b border-gray-200">
+            <tr className="bg-slate-50 dark:bg-gray-800/60 border-b border-slate-200 dark:border-gray-700/50">
               {allColumns.map((col) => (
                 <th
                   key={col.key}
-                  className="px-4 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wide whitespace-nowrap"
+                  className={`px-4 py-3 text-right text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide whitespace-nowrap ${col.className ?? ''}`}
                 >
                   {col.header}
                 </th>
               ))}
             </tr>
           </thead>
-          <tbody className="divide-y divide-gray-100">
+          <tbody className="divide-y divide-slate-100 dark:divide-gray-700/40">
             {loading ? (
-              Array.from({ length: 5 }).map((_, i) => (
+              Array.from({ length: 6 }).map((_, i) => (
                 <SkeletonRow key={i} cols={allColumns.length} />
               ))
             ) : data.length === 0 ? (
               <tr>
-                <td colSpan={allColumns.length} className="text-center py-16">
-                  <div className="flex flex-col items-center gap-3 text-gray-400">
-                    <svg className="w-12 h-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
-                        d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
-                    </svg>
-                    <p className="text-sm">{emptyMessage}</p>
+                <td colSpan={allColumns.length} className="py-16 text-center">
+                  <div className="flex flex-col items-center gap-3">
+                    <div className="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-gray-800 flex items-center justify-center">
+                      <svg className="w-7 h-7 text-slate-400 dark:text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
+                          d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+                      </svg>
+                    </div>
+                    <p className="text-sm text-slate-500 dark:text-slate-400">{emptyMessage}</p>
                     {emptyAction}
                   </div>
                 </td>
               </tr>
             ) : (
               data.map((row, rowIdx) => (
-                <tr key={rowIdx} className="hover:bg-gray-50 transition-colors">
+                <tr
+                  key={rowIdx}
+                  className="hover:bg-slate-50/80 dark:hover:bg-gray-800/40 transition-colors"
+                >
                   {columns.map((col) => (
-                    <td key={col.key} className="px-4 py-3 text-gray-700 whitespace-nowrap">
+                    <td
+                      key={col.key}
+                      className="px-4 py-3.5 text-slate-700 dark:text-slate-300 whitespace-nowrap"
+                    >
                       {col.render
                         ? col.render(row)
                         : ((row as Record<string, unknown>)[col.key] as React.ReactNode) ?? '—'}
                     </td>
                   ))}
                   {actions && (
-                    <td className="px-4 py-3 whitespace-nowrap">
-                      <div className="flex items-center gap-2">{actions(row)}</div>
+                    <td className="px-4 py-3.5 whitespace-nowrap">
+                      <div className="flex items-center gap-1">{actions(row)}</div>
                     </td>
                   )}
                 </tr>
diff --git a/assets/admin/components/ui/Modal.tsx b/assets/admin/components/ui/Modal.tsx
index fc80b137..3618bcbf 100644
--- a/assets/admin/components/ui/Modal.tsx
+++ b/assets/admin/components/ui/Modal.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 
 type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
@@ -20,27 +20,50 @@ interface Props {
 }
 
 export default function Modal({ open, title, size = 'md', onClose, children, footer }: Props) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+
   if (!open) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      <div className="absolute inset-0 bg-black/40" onClick={onClose} />
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-fade-in">
+      {/* Backdrop */}
       <div
-        className={`relative bg-white rounded-2xl shadow-2xl w-full ${sizeMap[size]} flex flex-col max-h-[90vh]`}
-        style={{ animation: 'scale-in 200ms ease' }}
+        className="absolute inset-0 bg-black/50 dark:bg-black/70 backdrop-blur-sm"
+        onClick={onClose}
+      />
+
+      {/* Panel */}
+      <div
+        className={`
+          relative bg-white dark:bg-gray-900
+          rounded-2xl shadow-2xl dark:shadow-black/40
+          border border-slate-200/60 dark:border-gray-700/50
+          w-full ${sizeMap[size]} flex flex-col max-h-[90vh]
+          animate-scale-in
+        `}
       >
-        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 shrink-0">
-          <h2 className="font-semibold text-gray-900 text-base">{title}</h2>
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-slate-100 dark:border-gray-700/50 shrink-0">
+          <h2 className="font-semibold text-slate-900 dark:text-slate-100 text-base">{title}</h2>
           <button
             onClick={onClose}
-            className="text-gray-400 hover:text-gray-600 transition-colors p-1 rounded-md hover:bg-gray-100"
+            className="w-8 h-8 flex items-center justify-center rounded-lg text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors"
           >
             <XMarkIcon className="w-5 h-5" />
           </button>
         </div>
-        <div className="flex-1 overflow-y-auto px-6 py-4">{children}</div>
+
+        {/* Body */}
+        <div className="flex-1 overflow-y-auto px-6 py-5">{children}</div>
+
+        {/* Footer */}
         {footer && (
-          <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200 shrink-0">
+          <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-slate-100 dark:border-gray-700/50 shrink-0 bg-slate-50/50 dark:bg-gray-800/30 rounded-b-2xl">
             {footer}
           </div>
         )}
diff --git a/assets/admin/components/ui/PageHeader.tsx b/assets/admin/components/ui/PageHeader.tsx
index 93b31977..2e8f6bf5 100644
--- a/assets/admin/components/ui/PageHeader.tsx
+++ b/assets/admin/components/ui/PageHeader.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { ChevronLeftIcon } from '@heroicons/react/24/outline';
 
 interface Crumb {
   label: string;
@@ -10,31 +11,35 @@ interface Props {
   title: string;
   breadcrumbs?: Crumb[];
   action?: React.ReactNode;
+  description?: string;
 }
 
-export default function PageHeader({ title, breadcrumbs, action }: Props) {
+export default function PageHeader({ title, breadcrumbs, action, description }: Props) {
   return (
-    <div className="flex items-start justify-between mb-6">
-      <div>
-        <h1 className="text-xl font-bold text-gray-900">{title}</h1>
+    <div className="flex items-start justify-between mb-6 gap-4">
+      <div className="min-w-0">
         {breadcrumbs && breadcrumbs.length > 0 && (
-          <nav className="flex items-center gap-1 mt-1 text-sm text-gray-500">
+          <nav className="flex items-center gap-0.5 mb-1.5 text-xs text-slate-500 dark:text-slate-400">
             {breadcrumbs.map((crumb, i) => (
               <React.Fragment key={i}>
-                {i > 0 && <span className="text-gray-300">/</span>}
+                {i > 0 && <ChevronLeftIcon className="w-3 h-3 text-slate-300 dark:text-slate-600 mx-0.5 shrink-0" />}
                 {crumb.to ? (
-                  <Link to={crumb.to} className="hover:text-primary-600 transition-colors">
+                  <Link to={crumb.to} className="hover:text-primary-600 dark:hover:text-primary-400 transition-colors truncate">
                     {crumb.label}
                   </Link>
                 ) : (
-                  <span className="text-gray-700">{crumb.label}</span>
+                  <span className="text-slate-700 dark:text-slate-300 font-medium truncate">{crumb.label}</span>
                 )}
               </React.Fragment>
             ))}
           </nav>
         )}
+        <h1 className="text-xl font-bold text-slate-900 dark:text-slate-50 leading-tight">{title}</h1>
+        {description && (
+          <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">{description}</p>
+        )}
       </div>
-      {action && <div>{action}</div>}
+      {action && <div className="shrink-0">{action}</div>}
     </div>
   );
 }
diff --git a/assets/admin/components/ui/Pagination.tsx b/assets/admin/components/ui/Pagination.tsx
index 886f209f..34e8dde9 100644
--- a/assets/admin/components/ui/Pagination.tsx
+++ b/assets/admin/components/ui/Pagination.tsx
@@ -22,47 +22,48 @@ export default function Pagination({ page, total, limit, onPageChange }: Props)
   } else {
     pages.push(1);
     if (page > 3) pages.push('...');
-    for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) {
-      pages.push(i);
-    }
+    for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) pages.push(i);
     if (page < totalPages - 2) pages.push('...');
     pages.push(totalPages);
   }
 
   return (
-    <div className="flex items-center justify-between mt-4 text-sm">
-      <span className="text-gray-500">
-        نمایش {formatNumber(from)}–{formatNumber(to)} از {formatNumber(total)}
+    <div className="flex items-center justify-between mt-5 pt-4 border-t border-slate-100 dark:border-gray-700/40 text-sm flex-wrap gap-3">
+      <span className="text-slate-500 dark:text-slate-400 text-xs">
+        نمایش {formatNumber(from)}–{formatNumber(to)} از {formatNumber(total)} مورد
       </span>
+
       <div className="flex items-center gap-1">
         <button
           onClick={() => onPageChange(page - 1)}
           disabled={page === 1}
-          className="p-1.5 rounded-lg hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+          className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 dark:hover:bg-gray-700 text-slate-500 dark:text-slate-400 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
         >
           <ChevronRightIcon className="w-4 h-4" />
         </button>
+
         {pages.map((p, i) =>
           p === '...' ? (
-            <span key={`dots-${i}`} className="px-2 text-gray-400">...</span>
+            <span key={`dots-${i}`} className="w-8 text-center text-slate-400 dark:text-slate-500 text-xs">…</span>
           ) : (
             <button
               key={p}
               onClick={() => onPageChange(p as number)}
-              className={`w-8 h-8 rounded-lg text-sm transition-colors ${
+              className={`w-8 h-8 rounded-lg text-sm font-medium transition-colors ${
                 p === page
-                  ? 'bg-primary-600 text-white font-semibold'
-                  : 'text-gray-600 hover:bg-gray-100'
+                  ? 'bg-primary-600 text-white shadow-sm shadow-primary-500/30'
+                  : 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-gray-700'
               }`}
             >
               {formatNumber(p as number)}
             </button>
           )
         )}
+
         <button
           onClick={() => onPageChange(page + 1)}
           disabled={page === totalPages}
-          className="p-1.5 rounded-lg hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+          className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 dark:hover:bg-gray-700 text-slate-500 dark:text-slate-400 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
         >
           <ChevronLeftIcon className="w-4 h-4" />
         </button>
diff --git a/assets/admin/components/ui/StatusBadge.tsx b/assets/admin/components/ui/StatusBadge.tsx
index 7ba4d175..bc7cd08b 100644
--- a/assets/admin/components/ui/StatusBadge.tsx
+++ b/assets/admin/components/ui/StatusBadge.tsx
@@ -2,62 +2,62 @@ import React from 'react';
 import type { AppointmentStatus, PaymentStatus, SmsTemplateStatus, SettlementStatus } from '../../types';
 
 const variants: Record<string, string> = {
-  yellow: 'bg-yellow-100 text-yellow-800',
-  blue: 'bg-blue-100 text-blue-800',
-  purple: 'bg-purple-100 text-purple-800',
-  orange: 'bg-orange-100 text-orange-800',
-  indigo: 'bg-indigo-100 text-indigo-800',
-  green: 'bg-green-100 text-green-800',
-  red: 'bg-red-100 text-red-800',
-  gray: 'bg-gray-100 text-gray-700',
-  rose: 'bg-rose-100 text-rose-800',
+  yellow: 'bg-yellow-100 dark:bg-yellow-400/10 text-yellow-800 dark:text-yellow-300',
+  blue:   'bg-blue-100   dark:bg-blue-400/10   text-blue-800   dark:text-blue-300',
+  purple: 'bg-purple-100 dark:bg-purple-400/10 text-purple-800 dark:text-purple-300',
+  orange: 'bg-orange-100 dark:bg-orange-400/10 text-orange-800 dark:text-orange-300',
+  indigo: 'bg-indigo-100 dark:bg-indigo-400/10 text-indigo-800 dark:text-indigo-300',
+  green:  'bg-green-100  dark:bg-green-400/10  text-green-800  dark:text-green-300',
+  red:    'bg-red-100    dark:bg-red-400/10    text-red-800    dark:text-red-300',
+  gray:   'bg-slate-100  dark:bg-slate-400/10  text-slate-700  dark:text-slate-400',
+  rose:   'bg-rose-100   dark:bg-rose-400/10   text-rose-800   dark:text-rose-300',
 };
 
 const dots: Record<string, string> = {
   yellow: 'bg-yellow-500',
-  blue: 'bg-blue-500',
+  blue:   'bg-blue-500',
   purple: 'bg-purple-500',
   orange: 'bg-orange-500',
   indigo: 'bg-indigo-500',
-  green: 'bg-green-500',
-  red: 'bg-red-500',
-  gray: 'bg-gray-400',
-  rose: 'bg-rose-500',
+  green:  'bg-green-500',
+  red:    'bg-red-500',
+  gray:   'bg-slate-400',
+  rose:   'bg-rose-500',
 };
 
 const appointmentMap: Record<AppointmentStatus, { color: string; label: string }> = {
-  waiting_for_payment: { color: 'yellow', label: 'در انتظار پرداخت' },
-  reserved: { color: 'blue', label: 'رزرو شده' },
-  checked_in: { color: 'purple', label: 'ورود به مطب' },
-  waiting: { color: 'orange', label: 'در صف انتظار' },
-  in_progress: { color: 'indigo', label: 'در حال ویزیت' },
-  visited: { color: 'green', label: 'ویزیت شده' },
-  completed: { color: 'green', label: 'تکمیل شده' },
-  cancelled_by_user: { color: 'red', label: 'لغو توسط بیمار' },
-  cancelled_by_doctor: { color: 'red', label: 'لغو توسط پزشک' },
-  cancelled_by_admin: { color: 'red', label: 'لغو توسط ادمین' },
-  auto_cancel_unpaid: { color: 'gray', label: 'لغو خودکار' },
-  no_show: { color: 'rose', label: 'غیبت' },
+  waiting_for_payment: { color: 'yellow', label: 'انتظار پرداخت' },
+  reserved:            { color: 'blue',   label: 'رزرو شده' },
+  checked_in:          { color: 'purple', label: 'ورود به مطب' },
+  waiting:             { color: 'orange', label: 'صف انتظار' },
+  in_progress:         { color: 'indigo', label: 'در حال ویزیت' },
+  visited:             { color: 'green',  label: 'ویزیت شده' },
+  completed:           { color: 'green',  label: 'تکمیل شده' },
+  cancelled_by_user:   { color: 'red',    label: 'لغو بیمار' },
+  cancelled_by_doctor: { color: 'red',    label: 'لغو پزشک' },
+  cancelled_by_admin:  { color: 'red',    label: 'لغو ادمین' },
+  auto_cancel_unpaid:  { color: 'gray',   label: 'لغو خودکار' },
+  no_show:             { color: 'rose',   label: 'غیبت' },
 };
 
 const paymentMap: Record<PaymentStatus, { color: string; label: string }> = {
-  pending: { color: 'yellow', label: 'در انتظار' },
-  received: { color: 'green', label: 'موفق' },
-  canceled: { color: 'red', label: 'لغو شده' },
-  refund: { color: 'blue', label: 'استرداد' },
+  pending:  { color: 'yellow', label: 'در انتظار' },
+  received: { color: 'green',  label: 'موفق' },
+  canceled: { color: 'red',    label: 'لغو شده' },
+  refund:   { color: 'blue',   label: 'استرداد' },
 };
 
 const smsMap: Record<SmsTemplateStatus, { color: string; label: string }> = {
-  draft: { color: 'gray', label: 'پیش‌نویس' },
-  pending: { color: 'yellow', label: 'در انتظار تأیید' },
-  approved: { color: 'green', label: 'تأیید شده' },
-  rejected: { color: 'red', label: 'رد شده' },
+  draft:    { color: 'gray',   label: 'پیش‌نویس' },
+  pending:  { color: 'yellow', label: 'در انتظار تأیید' },
+  approved: { color: 'green',  label: 'تأیید شده' },
+  rejected: { color: 'red',    label: 'رد شده' },
 };
 
 const settlementMap: Record<SettlementStatus, { color: string; label: string }> = {
-  pending: { color: 'yellow', label: 'در انتظار' },
-  approved: { color: 'green', label: 'تأیید شده' },
-  rejected: { color: 'red', label: 'رد شده' },
+  pending:  { color: 'yellow', label: 'در انتظار' },
+  approved: { color: 'green',  label: 'تأیید شده' },
+  rejected: { color: 'red',    label: 'رد شده' },
 };
 
 interface Props {
@@ -88,14 +88,12 @@ export default function StatusBadge({ type, value }: Props) {
 
   return (
     <span className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium ${variants[color] ?? variants.gray}`}>
-      <span className={`w-1.5 h-1.5 rounded-full ${dots[color] ?? dots.gray}`} />
+      <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${dots[color] ?? dots.gray}`} />
       {label}
     </span>
   );
 }
 
 export function ActiveBadge({ active }: { active: boolean }) {
-  return (
-    <StatusBadge type="active" value={active ? 'active' : 'inactive'} />
-  );
+  return <StatusBadge type="active" value={active ? 'active' : 'inactive'} />;
 }
diff --git a/assets/admin/pages/AppointmentDetailPage.tsx b/assets/admin/pages/AppointmentDetailPage.tsx
index 389640a0..19d04e33 100644
--- a/assets/admin/pages/AppointmentDetailPage.tsx
+++ b/assets/admin/pages/AppointmentDetailPage.tsx
@@ -25,9 +25,9 @@ const ALL_STATUSES: { value: AppointmentStatus; label: string }[] = [
 
 function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
   return (
-    <div className="flex items-center justify-between py-3 border-b border-gray-100 last:border-0">
-      <span className="text-sm text-gray-500">{label}</span>
-      <span className="text-sm font-medium text-gray-900">{value ?? '—'}</span>
+    <div className="cp-info-row">
+      <span className="cp-info-label text-sm">{label}</span>
+      <span className="cp-info-value">{value ?? '—'}</span>
     </div>
   );
 }
@@ -78,7 +78,7 @@ export default function AppointmentDetailPage() {
         ]}
         action={
           <button onClick={() => navigate('/admin/appointments')}
-            className="flex items-center gap-2 text-sm text-gray-500 hover:text-gray-800 transition-colors">
+            className="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-100 transition-colors">
             <ArrowRightIcon className="w-4 h-4" />
             بازگشت
           </button>
@@ -86,9 +86,9 @@ export default function AppointmentDetailPage() {
       />
 
       {isLoading ? (
-        <div className="bg-white rounded-2xl border border-gray-100 p-6 space-y-3">
+        <div className="cp-card p-6 space-y-3">
           {Array.from({ length: 6 }).map((_, i) => (
-            <div key={i} className="h-8 bg-gray-100 rounded-lg animate-pulse" />
+            <div key={i} className="h-8 rounded-lg skeleton" />
           ))}
         </div>
       ) : appt ? (
@@ -113,12 +113,12 @@ export default function AppointmentDetailPage() {
             </div>
 
             <div className="mt-6">
-              <label className="block text-sm font-medium text-gray-700 mb-2">تغییر وضعیت:</label>
+              <label className="cp-label mb-2">تغییر وضعیت:</label>
               <div className="flex gap-2">
                 <select
                   value={newStatus}
                   onChange={(e) => setNewStatus(e.target.value)}
-                  className="flex-1 h-10 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
+                  className="cp-input flex-1"
                 >
                   <option value="">انتخاب وضعیت...</option>
                   {ALL_STATUSES.map((s) => (
@@ -128,7 +128,7 @@ export default function AppointmentDetailPage() {
                 <button
                   onClick={() => newStatus && statusMutation.mutate(newStatus)}
                   disabled={!newStatus || statusMutation.isPending}
-                  className="px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 disabled:opacity-50 transition-colors"
+                  className="cp-btn-primary"
                 >
                   اعمال
                 </button>
diff --git a/assets/admin/pages/AppointmentsPage.tsx b/assets/admin/pages/AppointmentsPage.tsx
index f144d2c4..604fe19e 100644
--- a/assets/admin/pages/AppointmentsPage.tsx
+++ b/assets/admin/pages/AppointmentsPage.tsx
@@ -47,7 +47,7 @@ export default function AppointmentsPage() {
       header: 'بیمار',
       render: (a) => (
         <div>
-          <p className="font-medium text-gray-900">{a.patient_name || '—'}</p>
+          <p className="font-medium text-slate-800 dark:text-slate-100">{a.patient_name || '—'}</p>
           <p className="text-xs text-gray-400 dir-ltr">{maskMobile(a.patient_mobile)}</p>
         </div>
       ),
@@ -87,7 +87,7 @@ export default function AppointmentsPage() {
         breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'نوبت‌ها' }]}
       />
 
-      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
+      <div className="cp-card p-6">
         <div className="flex items-center gap-3 mb-4 flex-wrap">
           {STATUS_FILTERS.map((f) => (
             <button
@@ -96,7 +96,7 @@ export default function AppointmentsPage() {
               className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
                 statusFilter === f.value
                   ? 'bg-primary-600 text-white'
-                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                  : 'bg-slate-100 dark:bg-gray-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-gray-600'
               }`}
             >
               {f.label}
@@ -115,7 +115,7 @@ export default function AppointmentsPage() {
           actions={(appt) => (
             <button
               onClick={() => navigate(`/admin/appointments/${appt.uuid}`)}
-              className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+              className="cp-action-view"
               title="مشاهده"
             >
               <EyeIcon className="w-4 h-4" />
diff --git a/assets/admin/pages/BlogFormPage.tsx b/assets/admin/pages/BlogFormPage.tsx
index d289a02e..774bee1c 100644
--- a/assets/admin/pages/BlogFormPage.tsx
+++ b/assets/admin/pages/BlogFormPage.tsx
@@ -83,9 +83,9 @@ export default function BlogFormPage() {
 
   if (isEdit && isLoading) {
     return (
-      <div className="bg-white rounded-2xl border border-gray-100 p-6 space-y-3">
+      <div className="cp-card p-6 space-y-3">
         {Array.from({ length: 5 }).map((_, i) => (
-          <div key={i} className="h-10 bg-gray-100 rounded-lg animate-pulse" />
+          <div key={i} className="h-10 rounded-lg skeleton" />
         ))}
       </div>
     );
@@ -102,40 +102,40 @@ export default function BlogFormPage() {
         ]}
       />
 
-      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
+      <div className="cp-card p-6">
         <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
           <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
             <div className="lg:col-span-2 space-y-5">
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">عنوان مقاله *</label>
+                <label className="cp-label">عنوان مقاله *</label>
                 <input {...register('title')} placeholder="عنوان جذاب بنویسید..."
-                  className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" />
+                  className="cp-input h-11" />
                 {errors.title && <p className="text-red-500 text-xs mt-1">{errors.title.message}</p>}
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">خلاصه</label>
+                <label className="cp-label">خلاصه</label>
                 <textarea {...register('summary')} rows={2} placeholder="خلاصه کوتاه مقاله..."
-                  className="w-full border border-gray-300 rounded-[10px] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 resize-none" />
+                  className="cp-textarea resize-none" />
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">محتوا *</label>
+                <label className="cp-label">محتوا *</label>
                 <textarea {...register('content')} rows={16} placeholder="محتوای مقاله را بنویسید..."
-                  className="w-full border border-gray-300 rounded-[10px] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 resize-none font-mono" />
+                  className="cp-textarea resize-none font-mono" />
                 {errors.content && <p className="text-red-500 text-xs mt-1">{errors.content.message}</p>}
               </div>
             </div>
 
             <div className="space-y-5">
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">وضعیت انتشار</label>
+                <label className="cp-label">وضعیت انتشار</label>
                 <Controller
                   control={control}
                   name="status"
                   render={({ field }) => (
                     <select {...field}
-                      className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500">
+                      className="cp-input h-11">
                       <option value="draft">پیش‌نویس</option>
                       <option value="published">منتشر</option>
                     </select>
@@ -144,9 +144,9 @@ export default function BlogFormPage() {
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">تگ‌ها (با ویرگول جدا کنید)</label>
+                <label className="cp-label">تگ‌ها (با ویرگول جدا کنید)</label>
                 <input {...register('tags')} dir="ltr" placeholder="tag1, tag2, tag3"
-                  className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" />
+                  className="cp-input h-11" />
               </div>
 
               <div className="pt-4 space-y-3">
diff --git a/assets/admin/pages/BlogsPage.tsx b/assets/admin/pages/BlogsPage.tsx
index e8a6f154..2251598c 100644
--- a/assets/admin/pages/BlogsPage.tsx
+++ b/assets/admin/pages/BlogsPage.tsx
@@ -56,7 +56,7 @@ export default function BlogsPage() {
           {b.cover_image ? (
             <img src={b.cover_image} alt="" className="w-10 h-7 rounded object-cover shrink-0" />
           ) : (
-            <div className="w-10 h-7 rounded bg-gray-100 shrink-0" />
+            <div className="w-10 h-7 rounded bg-slate-100 dark:bg-slate-700 shrink-0" />
           )}
           <span className="font-medium text-gray-900 line-clamp-1">{b.title}</span>
         </div>
@@ -102,19 +102,19 @@ export default function BlogsPage() {
         breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'بلاگ' }]}
         action={
           <button onClick={() => navigate('/admin/blogs/new')}
-            className="flex items-center gap-2 px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 transition-colors">
+            className="cp-btn-primary">
             <PlusIcon className="w-4 h-4" />
             نوشتن مقاله
           </button>
         }
       />
 
-      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
+      <div className="cp-card p-6">
         <div className="flex items-center gap-3 mb-4">
           {STATUS_FILTERS.map((f) => (
             <button key={f.value} onClick={() => { setStatusFilter(f.value); setPage(1); }}
               className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
-                statusFilter === f.value ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                statusFilter === f.value ? 'bg-primary-600 text-white' : 'bg-slate-100 dark:bg-gray-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-gray-600'
               }`}>
               {f.label}
             </button>
@@ -138,11 +138,11 @@ export default function BlogsPage() {
           actions={(blog) => (
             <>
               <button onClick={() => navigate(`/admin/blogs/${blog.uuid}/edit`)}
-                className="p-1.5 text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors" title="ویرایش">
+                className="cp-action-edit" title="ویرایش">
                 <PencilIcon className="w-4 h-4" />
               </button>
               <button onClick={() => setDeleteTarget(blog)}
-                className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="حذف">
+                className="cp-action-delete" title="حذف">
                 <TrashIcon className="w-4 h-4" />
               </button>
             </>
diff --git a/assets/admin/pages/CategoriesPage.tsx b/assets/admin/pages/CategoriesPage.tsx
index 1169d558..313ac61e 100644
--- a/assets/admin/pages/CategoriesPage.tsx
+++ b/assets/admin/pages/CategoriesPage.tsx
@@ -101,7 +101,7 @@ export default function CategoriesPage() {
       key: 'bundle',
       header: 'نوع',
       render: (c) => (
-        <span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">{c.bundle}</span>
+        <span className="text-xs bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 px-2 py-0.5 rounded-full">{c.bundle}</span>
       ),
     },
     {
@@ -129,21 +129,21 @@ export default function CategoriesPage() {
         breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'دسته‌بندی‌ها' }]}
         action={
           <button onClick={() => setAddOpen(true)}
-            className="flex items-center gap-2 px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 transition-colors">
+            className="cp-btn-primary">
             <PlusIcon className="w-4 h-4" />
             افزودن
           </button>
         }
       />
 
-      <div className="bg-white rounded-2xl shadow-sm border border-gray-100">
-        <div className="flex flex-wrap border-b border-gray-200 px-6 pt-4 gap-1">
+      <div className="cp-card">
+        <div className="flex flex-wrap border-b border-slate-200 dark:border-gray-700 px-6 pt-4 gap-1">
           {TABS.map((t) => (
             <button key={t.key} onClick={() => handleTabChange(t.key)}
               className={`pb-3 px-4 text-sm font-medium border-b-2 transition-colors -mb-px ${
                 activeTab === t.key
                   ? 'border-primary-600 text-primary-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700'
+                  : 'border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200'
               }`}>
               {t.label}
             </button>
@@ -162,11 +162,11 @@ export default function CategoriesPage() {
             actions={(cat) => (
               <>
                 <button onClick={() => openEdit(cat)}
-                  className="p-1.5 text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors" title="ویرایش">
+                  className="cp-action-edit" title="ویرایش">
                   <PencilIcon className="w-4 h-4" />
                 </button>
                 <button onClick={() => setDeleteTarget(cat)}
-                  className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="حذف">
+                  className="cp-action-delete" title="حذف">
                   <TrashIcon className="w-4 h-4" />
                 </button>
               </>
@@ -181,11 +181,11 @@ export default function CategoriesPage() {
         footer={
           <>
             <button onClick={() => { setAddOpen(false); reset(); }}
-              className="px-4 py-2 border border-gray-300 text-sm text-gray-700 rounded-[10px] hover:bg-gray-50 transition-colors">
+              className="cp-btn-secondary">
               لغو
             </button>
             <button form="cat-form" type="submit" disabled={isSubmitting}
-              className="px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 disabled:opacity-50 transition-colors">
+              className="cp-btn-primary">
               ذخیره
             </button>
           </>
@@ -193,16 +193,16 @@ export default function CategoriesPage() {
       >
         <form id="cat-form" onSubmit={handleSubmit((d) => createMutation.mutate(d))} className="space-y-4">
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">نام</label>
+            <label className="cp-label">نام</label>
             <input {...register('label')}
-              className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" />
+              className="cp-input h-11" />
             {errors.label && <p className="text-red-500 text-xs mt-1">{errors.label.message}</p>}
           </div>
           {activeTab === 'city' && (
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">شناسه استان</label>
+              <label className="cp-label">شناسه استان</label>
               <input {...register('parent_id')} dir="ltr" placeholder="ID عددی استان"
-                className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" />
+                className="cp-input h-11" />
             </div>
           )}
         </form>
@@ -214,11 +214,11 @@ export default function CategoriesPage() {
         footer={
           <>
             <button onClick={() => { setEditTarget(null); reset(); }}
-              className="px-4 py-2 border border-gray-300 text-sm text-gray-700 rounded-[10px] hover:bg-gray-50 transition-colors">
+              className="cp-btn-secondary">
               لغو
             </button>
             <button form="edit-cat-form" type="submit" disabled={isSubmitting}
-              className="px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 disabled:opacity-50 transition-colors">
+              className="cp-btn-primary">
               ذخیره
             </button>
           </>
@@ -228,9 +228,9 @@ export default function CategoriesPage() {
           onSubmit={handleSubmit((d) => editTarget && updateMutation.mutate({ id: editTarget.id, d }))}
           className="space-y-4">
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">نام</label>
+            <label className="cp-label">نام</label>
             <input {...register('label')}
-              className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" />
+              className="cp-input h-11" />
             {errors.label && <p className="text-red-500 text-xs mt-1">{errors.label.message}</p>}
           </div>
         </form>
diff --git a/assets/admin/pages/ClinicDetailPage.tsx b/assets/admin/pages/ClinicDetailPage.tsx
index 90874360..d2690363 100644
--- a/assets/admin/pages/ClinicDetailPage.tsx
+++ b/assets/admin/pages/ClinicDetailPage.tsx
@@ -11,9 +11,9 @@ import { ActiveBadge } from '../components/ui/StatusBadge';
 
 function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
   return (
-    <div className="flex items-center justify-between py-3 border-b border-gray-100 last:border-0">
-      <span className="text-sm text-gray-500">{label}</span>
-      <span className="text-sm font-medium text-gray-900">{value ?? '—'}</span>
+    <div className="cp-info-row">
+      <span className="cp-info-label text-sm">{label}</span>
+      <span className="cp-info-value">{value ?? '—'}</span>
     </div>
   );
 }
@@ -41,7 +41,7 @@ export default function ClinicDetailPage() {
         ]}
         action={
           <button onClick={() => navigate('/admin/clinics')}
-            className="flex items-center gap-2 text-sm text-gray-500 hover:text-gray-800 transition-colors">
+            className="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-100 transition-colors">
             <ArrowRightIcon className="w-4 h-4" />
             بازگشت
           </button>
@@ -49,9 +49,9 @@ export default function ClinicDetailPage() {
       />
 
       {isLoading ? (
-        <div className="bg-white rounded-2xl border border-gray-100 p-6 space-y-3">
+        <div className="cp-card p-6 space-y-3">
           {Array.from({ length: 5 }).map((_, i) => (
-            <div key={i} className="h-8 bg-gray-100 rounded-lg animate-pulse" />
+            <div key={i} className="h-8 rounded-lg skeleton" />
           ))}
         </div>
       ) : clinic ? (
diff --git a/assets/admin/pages/ClinicsPage.tsx b/assets/admin/pages/ClinicsPage.tsx
index 129e6c7a..2e0a5052 100644
--- a/assets/admin/pages/ClinicsPage.tsx
+++ b/assets/admin/pages/ClinicsPage.tsx
@@ -52,7 +52,7 @@ export default function ClinicsPage() {
               {c.name?.[0]}
             </div>
           )}
-          <span className="font-medium text-gray-900">{c.name}</span>
+          <span className="font-medium text-slate-800 dark:text-slate-100">{c.name}</span>
         </div>
       ),
     },
@@ -80,7 +80,7 @@ export default function ClinicsPage() {
         breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'کلینیک‌ها' }]}
       />
 
-      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
+      <div className="cp-card p-6">
         <DataTable<Clinic>
           columns={columns}
           data={items}
@@ -92,15 +92,15 @@ export default function ClinicsPage() {
           actions={(clinic) => (
             <>
               <button onClick={() => navigate(`/admin/clinics/${clinic.uuid}`)}
-                className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" title="مشاهده">
+                className="cp-action-view" title="مشاهده">
                 <EyeIcon className="w-4 h-4" />
               </button>
               <button onClick={() => navigate(`/admin/clinics/${clinic.uuid}?edit=1`)}
-                className="p-1.5 text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors" title="ویرایش">
+                className="cp-action-edit" title="ویرایش">
                 <PencilIcon className="w-4 h-4" />
               </button>
               <button onClick={() => setDeleteTarget(clinic)}
-                className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="حذف">
+                className="cp-action-delete" title="حذف">
                 <TrashIcon className="w-4 h-4" />
               </button>
             </>
diff --git a/assets/admin/pages/CommentsPage.tsx b/assets/admin/pages/CommentsPage.tsx
index 5bc7413c..375c7e66 100644
--- a/assets/admin/pages/CommentsPage.tsx
+++ b/assets/admin/pages/CommentsPage.tsx
@@ -59,7 +59,7 @@ export default function CommentsPage() {
     {
       key: 'patient_name',
       header: 'کاربر',
-      render: (c) => <span className="font-medium text-gray-900">{c.patient_name}</span>,
+      render: (c) => <span className="font-medium text-slate-800 dark:text-slate-100">{c.patient_name}</span>,
     },
     { key: 'doctor_name', header: 'پزشک', render: (c) => `دکتر ${c.doctor_name}` },
     { key: 'title', header: 'عنوان' },
@@ -88,12 +88,12 @@ export default function CommentsPage() {
         breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'نظرات' }]}
       />
 
-      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
+      <div className="cp-card p-6">
         <div className="flex items-center gap-3 mb-4">
           {FILTERS.map((f) => (
             <button key={f.value} onClick={() => { setApprovedFilter(f.value); setPage(1); }}
               className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
-                approvedFilter === f.value ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                approvedFilter === f.value ? 'bg-primary-600 text-white' : 'bg-slate-100 dark:bg-gray-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-gray-600'
               }`}>
               {f.label}
             </button>
@@ -117,7 +117,7 @@ export default function CommentsPage() {
                 </button>
               )}
               <button onClick={() => setDeleteTarget(comment)}
-                className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="حذف">
+                className="cp-action-delete" title="حذف">
                 <TrashIcon className="w-4 h-4" />
               </button>
             </>
diff --git a/assets/admin/pages/DashboardPage.tsx b/assets/admin/pages/DashboardPage.tsx
index 82f17337..96c627e6 100644
--- a/assets/admin/pages/DashboardPage.tsx
+++ b/assets/admin/pages/DashboardPage.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useQuery } from '@tanstack/react-query';
+import { Link } from 'react-router-dom';
 import {
   UserGroupIcon,
   HeartIcon,
@@ -9,10 +10,11 @@ import {
   ChatBubbleLeftEllipsisIcon,
   BanknotesIcon,
   ArrowPathIcon,
+  UserPlusIcon,
 } from '@heroicons/react/24/outline';
 import { api } from '../lib/api';
 import type { ApiResponse } from '../lib/api';
-import { formatNumber, formatRial } from '../lib/utils';
+import { formatNumber, formatRial, formatDateTime } from '../lib/utils';
 
 interface DashboardStats {
   total_users: number;
@@ -28,150 +30,270 @@ interface DashboardStats {
   pending_settlements: number;
 }
 
-interface StatCardProps {
+interface RecentAppointment {
+  uuid: string;
+  slot_start: string;
+  status: string;
+  doctor_name: string;
+  user_mobile: string;
+  user_name: string | null;
+  created_at: string;
+}
+
+interface RecentPayment {
+  uuid: string;
+  amount: number;
+  status: string;
+  gateway: string;
+  user_mobile: string;
+  user_name: string | null;
+  created_at: string;
+}
+
+interface RecentUser {
+  uuid: string;
+  mobile: string;
+  name: string | null;
+  email: string | null;
+  created_at: string;
+}
+
+interface RecentData {
+  appointments: RecentAppointment[];
+  payments: RecentPayment[];
+  users: RecentUser[];
+}
+
+const APPT_STATUS: Record<string, { label: string; cls: string }> = {
+  waiting_for_payment: { label: 'انتظار پرداخت', cls: 'bg-yellow-100 dark:bg-yellow-400/10 text-yellow-700 dark:text-yellow-300' },
+  reserved:            { label: 'رزرو شده',      cls: 'bg-blue-100 dark:bg-blue-400/10 text-blue-700 dark:text-blue-300' },
+  checked_in:          { label: 'ورود به مطب',   cls: 'bg-indigo-100 dark:bg-indigo-400/10 text-indigo-700 dark:text-indigo-300' },
+  waiting:             { label: 'صف انتظار',     cls: 'bg-orange-100 dark:bg-orange-400/10 text-orange-700 dark:text-orange-300' },
+  in_progress:         { label: 'در حال ویزیت',  cls: 'bg-purple-100 dark:bg-purple-400/10 text-purple-700 dark:text-purple-300' },
+  visited:             { label: 'ویزیت شده',     cls: 'bg-emerald-100 dark:bg-emerald-400/10 text-emerald-700 dark:text-emerald-300' },
+  completed:           { label: 'تکمیل شده',     cls: 'bg-green-100 dark:bg-green-400/10 text-green-700 dark:text-green-300' },
+  cancelled_by_doctor: { label: 'لغو پزشک',      cls: 'bg-red-100 dark:bg-red-400/10 text-red-700 dark:text-red-300' },
+  cancelled_by_user:   { label: 'لغو بیمار',     cls: 'bg-red-100 dark:bg-red-400/10 text-red-700 dark:text-red-300' },
+  auto_cancel_unpaid:  { label: 'لغو خودکار',    cls: 'bg-slate-100 dark:bg-slate-400/10 text-slate-600 dark:text-slate-400' },
+  no_show:             { label: 'غیبت',           cls: 'bg-slate-100 dark:bg-slate-400/10 text-slate-600 dark:text-slate-400' },
+};
+
+const PAY_STATUS: Record<string, { label: string; cls: string }> = {
+  pending:  { label: 'در انتظار', cls: 'bg-yellow-100 dark:bg-yellow-400/10 text-yellow-700 dark:text-yellow-300' },
+  received: { label: 'موفق',      cls: 'bg-green-100 dark:bg-green-400/10 text-green-700 dark:text-green-300' },
+  canceled: { label: 'لغو شده',   cls: 'bg-red-100 dark:bg-red-400/10 text-red-700 dark:text-red-300' },
+  refund:   { label: 'استرداد',   cls: 'bg-blue-100 dark:bg-blue-400/10 text-blue-700 dark:text-blue-300' },
+};
+
+function MicroBadge({ status, map }: { status: string; map: Record<string, { label: string; cls: string }> }) {
+  const s = map[status] ?? { label: status, cls: 'bg-slate-100 dark:bg-slate-400/10 text-slate-600 dark:text-slate-400' };
+  return (
+    <span className={`shrink-0 text-[10px] font-medium px-2 py-0.5 rounded-full ${s.cls}`}>{s.label}</span>
+  );
+}
+
+interface StatCard {
   label: string;
-  value: string | number;
+  value: string;
   sub?: string;
   icon: React.ElementType;
   iconBg: string;
   iconColor: string;
-  loading?: boolean;
 }
 
-function StatCard({ label, value, sub, icon: Icon, iconBg, iconColor, loading }: StatCardProps) {
+function StatCardSkeleton() {
   return (
-    <div className="bg-white rounded-2xl shadow-[0_1px_3px_rgba(0,0,0,.08)] p-6">
-      <div className="flex items-start justify-between">
-        <div className="min-w-0 flex-1">
-          <p className="text-sm text-gray-500 mb-1">{label}</p>
-          {loading ? (
-            <div className="h-8 w-24 bg-gray-100 rounded animate-pulse mt-1" />
-          ) : (
-            <p className="text-2xl font-bold text-gray-900 truncate">{value}</p>
-          )}
-          {sub && !loading && (
-            <p className="text-xs text-gray-400 mt-1.5">{sub}</p>
-          )}
-          {sub && loading && (
-            <div className="h-3 w-32 bg-gray-100 rounded animate-pulse mt-2" />
-          )}
-        </div>
-        <div className={`w-12 h-12 rounded-xl flex items-center justify-center shrink-0 mr-3 ${iconBg}`}>
-          <Icon className={`w-6 h-6 ${iconColor}`} />
-        </div>
+    <div className="cp-card p-5 flex items-start gap-4">
+      <div className="w-11 h-11 rounded-xl skeleton shrink-0" />
+      <div className="flex-1 space-y-2 pt-0.5">
+        <div className="h-3 rounded skeleton w-2/3" />
+        <div className="h-6 rounded skeleton w-1/2" />
+        <div className="h-3 rounded skeleton w-3/4" />
       </div>
     </div>
   );
 }
 
+function RecentSkeleton() {
+  return (
+    <div className="space-y-3 mt-1">
+      {[...Array(4)].map((_, i) => (
+        <div key={i} className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-full skeleton shrink-0" />
+          <div className="flex-1 space-y-1.5">
+            <div className="h-3 rounded skeleton w-3/4" />
+            <div className="h-3 rounded skeleton w-1/2" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 export default function DashboardPage() {
-  const { data, isLoading, isError, refetch } = useQuery({
+  const statsQ = useQuery({
     queryKey: ['dashboard-stats'],
     queryFn: () => api.get<ApiResponse<DashboardStats>>('/api/v1/admin/dashboard/stats'),
     staleTime: 60_000,
   });
 
-  const stats: DashboardStats | undefined = (data?.data as any)?.data ?? data?.data;
+  const recentQ = useQuery({
+    queryKey: ['dashboard-recent'],
+    queryFn: () => api.get<ApiResponse<RecentData>>('/api/v1/admin/dashboard/recent'),
+    staleTime: 30_000,
+  });
 
-  const fn = (n: number | undefined) => (n !== undefined ? formatNumber(n) : '—');
+  const stats: DashboardStats | undefined = (statsQ.data?.data as any)?.data ?? statsQ.data?.data;
+  const recent: RecentData | undefined   = (recentQ.data?.data as any)?.data ?? recentQ.data?.data;
+  const fn = (n?: number) => (n !== undefined ? formatNumber(n) : '—');
 
-  const cards: StatCardProps[] = [
-    {
-      label: 'کل کاربران',
-      value: fn(stats?.total_users),
-      icon: UserGroupIcon,
-      iconBg: 'bg-violet-100',
-      iconColor: 'text-violet-600',
-    },
-    {
-      label: 'پزشکان فعال',
-      value: fn(stats?.active_doctors),
-      sub: stats ? `از ${formatNumber(stats.total_doctors)} پزشک` : undefined,
-      icon: HeartIcon,
-      iconBg: 'bg-emerald-100',
-      iconColor: 'text-emerald-600',
-    },
-    {
-      label: 'کلینیک‌ها',
-      value: fn(stats?.total_clinics),
-      icon: BuildingOffice2Icon,
-      iconBg: 'bg-blue-100',
-      iconColor: 'text-blue-600',
-    },
-    {
-      label: 'نوبت‌های امروز',
-      value: fn(stats?.today_appointments),
-      sub: stats ? `مجموع: ${formatNumber(stats.total_appointments)} نوبت` : undefined,
-      icon: CalendarDaysIcon,
-      iconBg: 'bg-orange-100',
-      iconColor: 'text-orange-600',
-    },
-    {
-      label: 'درآمد امروز',
-      value: stats?.today_payments_amount !== undefined ? formatRial(stats.today_payments_amount) : '—',
-      sub: stats ? `${formatNumber(stats.today_payments_count)} تراکنش` : undefined,
-      icon: CreditCardIcon,
-      iconBg: 'bg-pink-100',
-      iconColor: 'text-pink-600',
-    },
-    {
-      label: 'کل درآمد',
-      value: stats?.total_payments_amount !== undefined ? formatRial(stats.total_payments_amount) : '—',
-      icon: CreditCardIcon,
-      iconBg: 'bg-indigo-100',
-      iconColor: 'text-indigo-600',
-    },
-    {
-      label: 'نظرات در انتظار',
-      value: fn(stats?.pending_comments),
-      icon: ChatBubbleLeftEllipsisIcon,
-      iconBg: 'bg-yellow-100',
-      iconColor: 'text-yellow-600',
-    },
-    {
-      label: 'درخواست‌های تسویه',
-      value: fn(stats?.pending_settlements),
-      icon: BanknotesIcon,
-      iconBg: 'bg-teal-100',
-      iconColor: 'text-teal-600',
-    },
+  const cards: StatCard[] = [
+    { label: 'کل کاربران',       value: fn(stats?.total_users),          icon: UserGroupIcon,             iconBg: 'bg-violet-100 dark:bg-violet-400/10', iconColor: 'text-violet-600 dark:text-violet-400' },
+    { label: 'پزشکان فعال',      value: fn(stats?.active_doctors),       sub: stats ? `از ${fn(stats.total_doctors)} پزشک` : undefined, icon: HeartIcon, iconBg: 'bg-emerald-100 dark:bg-emerald-400/10', iconColor: 'text-emerald-600 dark:text-emerald-400' },
+    { label: 'کلینیک‌ها',        value: fn(stats?.total_clinics),        icon: BuildingOffice2Icon,       iconBg: 'bg-blue-100 dark:bg-blue-400/10',    iconColor: 'text-blue-600 dark:text-blue-400' },
+    { label: 'نوبت‌های امروز',   value: fn(stats?.today_appointments),   sub: stats ? `مجموع: ${fn(stats.total_appointments)}` : undefined, icon: CalendarDaysIcon, iconBg: 'bg-orange-100 dark:bg-orange-400/10', iconColor: 'text-orange-600 dark:text-orange-400' },
+    { label: 'درآمد امروز',      value: stats?.today_payments_amount !== undefined ? formatRial(stats.today_payments_amount) : '—', sub: stats ? `${fn(stats.today_payments_count)} تراکنش` : undefined, icon: CreditCardIcon, iconBg: 'bg-pink-100 dark:bg-pink-400/10', iconColor: 'text-pink-600 dark:text-pink-400' },
+    { label: 'کل درآمد',         value: stats?.total_payments_amount !== undefined ? formatRial(stats.total_payments_amount) : '—', icon: CreditCardIcon, iconBg: 'bg-indigo-100 dark:bg-indigo-400/10', iconColor: 'text-indigo-600 dark:text-indigo-400' },
+    { label: 'نظرات در انتظار',  value: fn(stats?.pending_comments),     icon: ChatBubbleLeftEllipsisIcon, iconBg: 'bg-yellow-100 dark:bg-yellow-400/10', iconColor: 'text-yellow-600 dark:text-yellow-400' },
+    { label: 'درخواست تسویه',    value: fn(stats?.pending_settlements),  icon: BanknotesIcon,             iconBg: 'bg-teal-100 dark:bg-teal-400/10',    iconColor: 'text-teal-600 dark:text-teal-400' },
   ];
 
   return (
-    <div>
-      <div className="mb-6 flex items-center justify-between">
+    <div className="animate-slide-up">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
         <div>
-          <h1 className="text-2xl font-bold text-gray-900">داشبورد</h1>
-          <p className="text-sm text-gray-500 mt-1">خلاصه وضعیت سیستم</p>
+          <h1 className="text-xl font-bold text-slate-900 dark:text-slate-50">داشبورد</h1>
+          <p className="text-sm text-slate-500 dark:text-slate-400 mt-0.5">خلاصه وضعیت سیستم</p>
         </div>
-        {isError && (
-          <button
-            onClick={() => refetch()}
-            className="flex items-center gap-1.5 text-sm text-gray-500 hover:text-primary-600 transition-colors"
-          >
+        {statsQ.isError && (
+          <button onClick={() => statsQ.refetch()} className="flex items-center gap-1.5 text-sm text-slate-500 dark:text-slate-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">
             <ArrowPathIcon className="w-4 h-4" />
             تلاش مجدد
           </button>
         )}
       </div>
 
-      {isError && (
-        <div className="mb-4 bg-red-50 border border-red-200 rounded-xl px-4 py-3 text-sm text-red-600">
-          خطا در دریافت اطلاعات — اطلاعات نمایش داده شده ممکن است به‌روز نباشند.
+      {statsQ.isError && (
+        <div className="mb-5 cp-card border-red-200 dark:border-red-500/20 bg-red-50 dark:bg-red-500/5 px-4 py-3 text-sm text-red-600 dark:text-red-400">
+          خطا در دریافت آمار — اطلاعات ممکن است به‌روز نباشند.
         </div>
       )}
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
-        {cards.map((card) => (
-          <StatCard key={card.label} {...card} loading={isLoading} />
-        ))}
+      {/* Stats grid */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        {statsQ.isLoading
+          ? Array.from({ length: 8 }).map((_, i) => <StatCardSkeleton key={i} />)
+          : cards.map((c) => (
+            <div key={c.label} className="cp-card p-5 flex items-start gap-4">
+              <div className={`cp-stat-icon ${c.iconBg}`}>
+                <c.icon className={`w-5 h-5 ${c.iconColor}`} />
+              </div>
+              <div className="min-w-0 flex-1">
+                <p className="text-xs text-slate-500 dark:text-slate-400 mb-1">{c.label}</p>
+                <p className="text-xl font-bold text-slate-900 dark:text-slate-50 leading-none">{c.value}</p>
+                {c.sub && <p className="text-xs text-slate-400 dark:text-slate-500 mt-1.5">{c.sub}</p>}
+              </div>
+            </div>
+          ))
+        }
       </div>
 
-      <div className="mt-6 bg-white rounded-2xl shadow-[0_1px_3px_rgba(0,0,0,.08)] p-6">
-        <h3 className="text-base font-semibold text-gray-800 mb-4">فعالیت‌های اخیر</h3>
-        <div className="text-center py-10 text-gray-400 text-sm">
-          در حال توسعه...
+      {/* Recent activities */}
+      <div className="mt-5 grid grid-cols-1 lg:grid-cols-3 gap-4">
+
+        {/* Recent Appointments */}
+        <div className="cp-card p-5">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200">آخرین نوبت‌ها</h3>
+            <Link to="/admin/appointments" className="text-xs text-primary-600 dark:text-primary-400 hover:underline">مشاهده همه</Link>
+          </div>
+          {recentQ.isLoading ? <RecentSkeleton /> : recentQ.isError ? (
+            <p className="text-center py-6 text-sm text-slate-400">خطا در دریافت اطلاعات</p>
+          ) : !recent?.appointments?.length ? (
+            <p className="text-center py-6 text-sm text-slate-400 dark:text-slate-500">نوبتی ثبت نشده</p>
+          ) : (
+            <ul className="space-y-3">
+              {recent.appointments.map((a) => (
+                <li key={a.uuid}>
+                  <Link to={`/admin/appointments/${a.uuid}`} className="flex items-start justify-between gap-2 group">
+                    <div className="min-w-0">
+                      <p className="text-sm font-medium text-slate-800 dark:text-slate-200 truncate group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
+                        {a.user_name || a.user_mobile}
+                      </p>
+                      <p className="text-xs text-slate-500 dark:text-slate-400 truncate">دکتر {a.doctor_name}</p>
+                      <p className="text-[11px] text-slate-400 dark:text-slate-500 mt-0.5">{formatDateTime(a.slot_start)}</p>
+                    </div>
+                    <MicroBadge status={a.status} map={APPT_STATUS} />
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          )}
         </div>
+
+        {/* Recent Payments */}
+        <div className="cp-card p-5">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200">آخرین پرداخت‌ها</h3>
+            <Link to="/admin/payments" className="text-xs text-primary-600 dark:text-primary-400 hover:underline">مشاهده همه</Link>
+          </div>
+          {recentQ.isLoading ? <RecentSkeleton /> : recentQ.isError ? (
+            <p className="text-center py-6 text-sm text-slate-400">خطا در دریافت اطلاعات</p>
+          ) : !recent?.payments?.length ? (
+            <p className="text-center py-6 text-sm text-slate-400 dark:text-slate-500">پرداختی ثبت نشده</p>
+          ) : (
+            <ul className="space-y-3">
+              {recent.payments.map((p) => (
+                <li key={p.uuid}>
+                  <Link to={`/admin/payments/${p.uuid}`} className="flex items-start justify-between gap-2 group">
+                    <div className="min-w-0">
+                      <p className="text-sm font-medium text-slate-800 dark:text-slate-200 truncate group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
+                        {p.user_name || p.user_mobile}
+                      </p>
+                      <p className="text-xs text-slate-500 dark:text-slate-400">{formatRial(p.amount)}</p>
+                      <p className="text-[11px] text-slate-400 dark:text-slate-500 mt-0.5">{formatDateTime(p.created_at)}</p>
+                    </div>
+                    <MicroBadge status={p.status} map={PAY_STATUS} />
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+
+        {/* Recent Users */}
+        <div className="cp-card p-5">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200">کاربران جدید</h3>
+            <Link to="/admin/users" className="text-xs text-primary-600 dark:text-primary-400 hover:underline">مشاهده همه</Link>
+          </div>
+          {recentQ.isLoading ? <RecentSkeleton /> : recentQ.isError ? (
+            <p className="text-center py-6 text-sm text-slate-400">خطا در دریافت اطلاعات</p>
+          ) : !recent?.users?.length ? (
+            <p className="text-center py-6 text-sm text-slate-400 dark:text-slate-500">کاربری ثبت نشده</p>
+          ) : (
+            <ul className="space-y-3">
+              {recent.users.map((u) => (
+                <li key={u.uuid}>
+                  <Link to={`/admin/users/${u.uuid}`} className="flex items-center gap-3 group">
+                    <div className="w-8 h-8 rounded-full bg-violet-100 dark:bg-violet-400/10 flex items-center justify-center shrink-0">
+                      <UserPlusIcon className="w-4 h-4 text-violet-600 dark:text-violet-400" />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <p className="text-sm font-medium text-slate-800 dark:text-slate-200 truncate group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
+                        {u.name || u.mobile}
+                      </p>
+                      {u.name && <p className="text-xs text-slate-500 dark:text-slate-400 truncate" dir="ltr">{u.mobile}</p>}
+                      <p className="text-[11px] text-slate-400 dark:text-slate-500">{formatDateTime(u.created_at)}</p>
+                    </div>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+
       </div>
     </div>
   );
diff --git a/assets/admin/pages/DoctorDetailPage.tsx b/assets/admin/pages/DoctorDetailPage.tsx
index be0e8644..4e6216fb 100644
--- a/assets/admin/pages/DoctorDetailPage.tsx
+++ b/assets/admin/pages/DoctorDetailPage.tsx
@@ -11,9 +11,9 @@ import { ActiveBadge } from '../components/ui/StatusBadge';
 
 function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
   return (
-    <div className="flex items-center justify-between py-3 border-b border-gray-100 last:border-0">
-      <span className="text-sm text-gray-500">{label}</span>
-      <span className="text-sm font-medium text-gray-900">{value ?? '—'}</span>
+    <div className="cp-info-row">
+      <span className="cp-info-label text-sm">{label}</span>
+      <span className="cp-info-value">{value ?? '—'}</span>
     </div>
   );
 }
@@ -42,7 +42,7 @@ export default function DoctorDetailPage() {
         action={
           <button
             onClick={() => navigate('/admin/doctors')}
-            className="flex items-center gap-2 text-sm text-gray-500 hover:text-gray-800 transition-colors"
+            className="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-100 transition-colors"
           >
             <ArrowRightIcon className="w-4 h-4" />
             بازگشت
@@ -51,9 +51,9 @@ export default function DoctorDetailPage() {
       />
 
       {isLoading ? (
-        <div className="bg-white rounded-2xl border border-gray-100 p-6 space-y-3">
+        <div className="cp-card p-6 space-y-3">
           {Array.from({ length: 6 }).map((_, i) => (
-            <div key={i} className="h-8 bg-gray-100 rounded-lg animate-pulse" />
+            <div key={i} className="h-8 rounded-lg skeleton" />
           ))}
         </div>
       ) : doctor ? (
diff --git a/assets/admin/pages/DoctorsPage.tsx b/assets/admin/pages/DoctorsPage.tsx
index 7ed5e022..7bac91c9 100644
--- a/assets/admin/pages/DoctorsPage.tsx
+++ b/assets/admin/pages/DoctorsPage.tsx
@@ -52,7 +52,7 @@ export default function DoctorsPage() {
               {d.first_name?.[0] ?? '?'}
             </div>
           )}
-          <span className="font-medium text-gray-900">{d.first_name} {d.last_name}</span>
+          <span className="font-medium text-slate-800 dark:text-slate-100">{d.first_name} {d.last_name}</span>
         </div>
       ),
     },
@@ -60,7 +60,7 @@ export default function DoctorsPage() {
     {
       key: 'degree',
       header: 'درجه',
-      render: (d) => <span className="text-xs bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full">{d.degree}</span>,
+      render: (d) => <span className="text-xs bg-blue-50 dark:bg-blue-400/10 text-blue-700 dark:text-blue-300 px-2 py-0.5 rounded-full">{d.degree}</span>,
     },
     {
       key: 'gender',
@@ -73,7 +73,7 @@ export default function DoctorsPage() {
       render: (d) => (
         <div className="flex flex-wrap gap-1">
           {d.specialties?.slice(0, 2).map((s) => (
-            <span key={s.uuid} className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">{s.name}</span>
+            <span key={s.uuid} className="text-xs bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 px-2 py-0.5 rounded-full">{s.name}</span>
           ))}
           {(d.specialties?.length ?? 0) > 2 && (
             <span className="text-xs text-gray-400">+{d.specialties.length - 2}</span>
@@ -103,7 +103,7 @@ export default function DoctorsPage() {
         breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'پزشکان' }]}
       />
 
-      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
+      <div className="cp-card p-6">
         <DataTable<Doctor>
           columns={columns}
           data={items}
@@ -116,21 +116,21 @@ export default function DoctorsPage() {
             <>
               <button
                 onClick={() => navigate(`/admin/doctors/${doctor.uuid}`)}
-                className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+                className="cp-action-view"
                 title="مشاهده"
               >
                 <EyeIcon className="w-4 h-4" />
               </button>
               <button
                 onClick={() => navigate(`/admin/doctors/${doctor.uuid}?edit=1`)}
-                className="p-1.5 text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors"
+                className="cp-action-edit"
                 title="ویرایش"
               >
                 <PencilIcon className="w-4 h-4" />
               </button>
               <button
                 onClick={() => setDeleteTarget(doctor)}
-                className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                className="cp-action-delete"
                 title="حذف"
               >
                 <TrashIcon className="w-4 h-4" />
diff --git a/assets/admin/pages/LoginPage.tsx b/assets/admin/pages/LoginPage.tsx
index 331c4625..2b0b3b16 100644
--- a/assets/admin/pages/LoginPage.tsx
+++ b/assets/admin/pages/LoginPage.tsx
@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { toast } from 'sonner';
+import { EyeIcon, EyeSlashIcon, HeartIcon, SunIcon, MoonIcon } from '@heroicons/react/24/outline';
 import { useAuthStore } from '../stores/authStore';
+import { useUiStore } from '../stores/uiStore';
 
 const schema = z.object({
   mobile: z.string().min(10, 'شماره موبایل معتبر نیست'),
@@ -14,10 +16,18 @@ type FormData = z.infer<typeof schema>;
 
 export default function LoginPage() {
   const login = useAuthStore((s) => s.login);
+  const darkMode = useUiStore((s) => s.darkMode);
+  const toggleDarkMode = useUiStore((s) => s.toggleDarkMode);
+  const [showPass, setShowPass] = useState(false);
+
   const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm<FormData>({
     resolver: zodResolver(schema),
   });
 
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', darkMode);
+  }, [darkMode]);
+
   const onSubmit = async (data: FormData) => {
     try {
       const res = await fetch('/api/v1/user/login', {
@@ -28,66 +38,153 @@ export default function LoginPage() {
 
       if (!res.ok) {
         const err = await res.json();
-        toast.error(err.message || 'خطا در ورود');
+        toast.error(err?.errors?.[0]?.message ?? 'خطا در ورود');
         return;
       }
 
       const json = await res.json();
       login(json.access_token, json.refresh_token ?? '');
-      toast.success('ورود موفق');
+      toast.success('خوش آمدید');
     } catch {
       toast.error('خطا در اتصال به سرور');
     }
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-[#f1f5f9]">
-      <div className="bg-white rounded-2xl shadow-lg p-8 w-full max-w-sm">
-        <div className="text-center mb-8">
-          <h1 className="text-2xl font-bold text-gray-900">ClinicPro</h1>
-          <p className="text-gray-500 text-sm mt-1">پنل مدیریت</p>
+    <div className="min-h-screen flex bg-slate-50 dark:bg-gray-950 transition-colors duration-200">
+
+      {/* ── Left panel: branding ───────────────── */}
+      <div className="hidden lg:flex flex-col flex-1 relative overflow-hidden bg-[#100c22]">
+        {/* Gradient orbs */}
+        <div className="absolute top-1/4 right-1/4 w-72 h-72 bg-violet-600/30 rounded-full blur-3xl" />
+        <div className="absolute bottom-1/4 left-1/4 w-96 h-96 bg-purple-800/20 rounded-full blur-3xl" />
+
+        <div className="relative z-10 flex flex-col h-full p-12">
+          {/* Logo */}
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500 to-purple-700 flex items-center justify-center shadow-lg shadow-violet-900/50">
+              <HeartIcon className="w-5 h-5 text-white" />
+            </div>
+            <span className="text-white font-bold text-xl tracking-tight">ClinicPro</span>
+          </div>
+
+          {/* Center content */}
+          <div className="flex-1 flex flex-col items-center justify-center text-center px-8">
+            <div className="w-20 h-20 rounded-3xl bg-gradient-to-br from-violet-500/20 to-purple-700/20 border border-violet-500/20 flex items-center justify-center mb-8">
+              <HeartIcon className="w-10 h-10 text-violet-400" />
+            </div>
+            <h2 className="text-3xl font-bold text-white mb-4 leading-snug">
+              سیستم مدیریت<br />کلینیک هوشمند
+            </h2>
+            <p className="text-slate-400 text-base leading-relaxed max-w-sm">
+              مدیریت نوبت‌دهی، پزشکان، کلینیک‌ها و پرداخت‌ها در یک پنل یکپارچه
+            </p>
+
+            {/* Feature pills */}
+            <div className="flex flex-wrap justify-center gap-2 mt-8">
+              {['نوبت‌دهی آنلاین', 'مدیریت پزشکان', 'گزارش‌گیری', 'پرداخت امن'].map((f) => (
+                <span key={f} className="px-3 py-1.5 rounded-full text-xs font-medium bg-white/5 text-slate-300 border border-white/10">
+                  {f}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          {/* Bottom note */}
+          <p className="text-slate-600 text-xs text-center">نسخه ۱.۰.۰ — تمامی حقوق محفوظ است</p>
+        </div>
+      </div>
+
+      {/* ── Right panel: form ──────────────────── */}
+      <div className="flex flex-col w-full lg:w-[480px] shrink-0 relative">
+        {/* Dark mode toggle */}
+        <div className="absolute top-5 left-5">
+          <button
+            onClick={toggleDarkMode}
+            className="w-9 h-9 flex items-center justify-center rounded-xl bg-slate-200/70 dark:bg-gray-800 hover:bg-slate-300 dark:hover:bg-gray-700 text-slate-500 dark:text-slate-400 transition-colors"
+            title={darkMode ? 'حالت روشن' : 'حالت تاریک'}
+          >
+            {darkMode
+              ? <SunIcon className="w-5 h-5 text-amber-400" />
+              : <MoonIcon className="w-5 h-5" />}
+          </button>
         </div>
 
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              شماره موبایل
-            </label>
-            <input
-              {...register('mobile')}
-              type="tel"
-              dir="ltr"
-              placeholder="09xxxxxxxxx"
-              className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-right focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
-            />
-            {errors.mobile && (
-              <p className="text-red-500 text-xs mt-1">{errors.mobile.message}</p>
-            )}
+        <div className="flex flex-col flex-1 items-center justify-center px-8 sm:px-12 py-12">
+          {/* Mobile logo */}
+          <div className="lg:hidden flex items-center gap-3 mb-10">
+            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500 to-purple-700 flex items-center justify-center shadow-md">
+              <HeartIcon className="w-5 h-5 text-white" />
+            </div>
+            <span className="text-slate-900 dark:text-white font-bold text-xl">ClinicPro</span>
           </div>
 
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              رمز عبور
-            </label>
-            <input
-              {...register('password')}
-              type="password"
-              placeholder="••••••••"
-              className="w-full h-11 border border-gray-300 rounded-[10px] px-3 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
-            />
-            {errors.password && (
-              <p className="text-red-500 text-xs mt-1">{errors.password.message}</p>
-            )}
-          </div>
+          <div className="w-full max-w-sm">
+            <div className="mb-8">
+              <h1 className="text-2xl font-bold text-slate-900 dark:text-slate-50">ورود به پنل</h1>
+              <p className="text-slate-500 dark:text-slate-400 text-sm mt-1.5">اطلاعات حساب مدیریتی خود را وارد کنید</p>
+            </div>
 
-          <button
-            type="submit"
-            disabled={isSubmitting}
-            className="w-full h-11 bg-primary-600 hover:bg-primary-700 disabled:opacity-60 text-white font-medium rounded-[10px] transition-colors"
-          >
-            {isSubmitting ? 'در حال ورود...' : 'ورود'}
-          </button>
-        </form>
+            <form onSubmit={handleSubmit(onSubmit)} className="space-y-5" noValidate>
+              {/* Mobile number */}
+              <div>
+                <label className="cp-label">شماره موبایل</label>
+                <input
+                  {...register('mobile')}
+                  type="tel"
+                  dir="ltr"
+                  placeholder="09xxxxxxxxx"
+                  autoComplete="username"
+                  className={`cp-input text-left placeholder:text-right placeholder:dir-rtl ${errors.mobile ? 'border-red-400 dark:border-red-500 focus:ring-red-400/30' : ''}`}
+                />
+                {errors.mobile && (
+                  <p className="text-red-500 dark:text-red-400 text-xs mt-1.5">{errors.mobile.message}</p>
+                )}
+              </div>
+
+              {/* Password */}
+              <div>
+                <label className="cp-label">رمز عبور</label>
+                <div className="relative">
+                  <input
+                    {...register('password')}
+                    type={showPass ? 'text' : 'password'}
+                    placeholder="••••••••"
+                    autoComplete="current-password"
+                    className={`cp-input pl-10 ${errors.password ? 'border-red-400 dark:border-red-500 focus:ring-red-400/30' : ''}`}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPass((v) => !v)}
+                    className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
+                  >
+                    {showPass ? <EyeSlashIcon className="w-4 h-4" /> : <EyeIcon className="w-4 h-4" />}
+                  </button>
+                </div>
+                {errors.password && (
+                  <p className="text-red-500 dark:text-red-400 text-xs mt-1.5">{errors.password.message}</p>
+                )}
+              </div>
+
+              {/* Submit */}
+              <button
+                type="submit"
+                disabled={isSubmitting}
+                className="w-full h-11 bg-primary-600 hover:bg-primary-700 active:bg-primary-800 disabled:opacity-60 text-white font-semibold rounded-xl transition-all duration-150 shadow-md shadow-primary-500/25 hover:shadow-lg hover:shadow-primary-500/30 mt-2"
+              >
+                {isSubmitting ? (
+                  <span className="flex items-center justify-center gap-2">
+                    <svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z" />
+                    </svg>
+                    در حال ورود...
+                  </span>
+                ) : 'ورود به سیستم'}
+              </button>
+            </form>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/assets/admin/pages/PaymentDetailPage.tsx b/assets/admin/pages/PaymentDetailPage.tsx
index 874c8e81..d7e256dd 100644
--- a/assets/admin/pages/PaymentDetailPage.tsx
+++ b/assets/admin/pages/PaymentDetailPage.tsx
@@ -11,9 +11,9 @@ import StatusBadge from '../components/ui/StatusBadge';
 
 function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
   return (
-    <div className="flex items-center justify-between py-3 border-b border-gray-100 last:border-0">
-      <span className="text-sm text-gray-500">{label}</span>
-      <span className="text-sm font-medium text-gray-900">{value ?? '—'}</span>
+    <div className="cp-info-row">
+      <span className="cp-info-label text-sm">{label}</span>
+      <span className="cp-info-value">{value ?? '—'}</span>
     </div>
   );
 }
@@ -41,7 +41,7 @@ export default function PaymentDetailPage() {
         ]}
         action={
           <button onClick={() => navigate('/admin/payments')}
-            className="flex items-center gap-2 text-sm text-gray-500 hover:text-gray-800 transition-colors">
+            className="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-100 transition-colors">
             <ArrowRightIcon className="w-4 h-4" />
             بازگشت
           </button>
@@ -49,9 +49,9 @@ export default function PaymentDetailPage() {
       />
 
       {isLoading ? (
-        <div className="bg-white rounded-2xl border border-gray-100 p-6 space-y-3">
+        <div className="cp-card p-6 space-y-3">
           {Array.from({ length: 6 }).map((_, i) => (
-            <div key={i} className="h-8 bg-gray-100 rounded-lg animate-pulse" />
+            <div key={i} className="h-8 rounded-lg skeleton" />
           ))}
         </div>
       ) : payment ? (
diff --git a/assets/admin/pages/PaymentsPage.tsx b/assets/admin/pages/PaymentsPage.tsx
index 1eb42f74..89ac872d 100644
--- a/assets/admin/pages/PaymentsPage.tsx
+++ b/assets/admin/pages/PaymentsPage.tsx
@@ -56,7 +56,7 @@ export default function PaymentsPage() {
       key: 'gateway',
       header: 'درگاه',
       render: (p) => (
-        <span className="text-xs bg-gray-100 text-gray-700 px-2 py-0.5 rounded-full uppercase">
+        <span className="text-xs bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-200 px-2 py-0.5 rounded-full uppercase">
           {p.gateway}
         </span>
       ),
@@ -88,14 +88,14 @@ export default function PaymentsPage() {
         breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'پرداخت‌ها' }]}
       />
 
-      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
+      <div className="cp-card p-6">
         <div className="flex items-center gap-3 mb-4 flex-wrap">
           {STATUS_FILTERS.map((f) => (
             <button key={f.value} onClick={() => { setStatusFilter(f.value); setPage(1); }}
               className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
                 statusFilter === f.value
                   ? 'bg-primary-600 text-white'
-                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                  : 'bg-slate-100 dark:bg-gray-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-gray-600'
               }`}>
               {f.label}
             </button>
@@ -112,7 +112,7 @@ export default function PaymentsPage() {
           emptyMessage="هیچ پرداختی یافت نشد"
           actions={(payment) => (
             <button onClick={() => navigate(`/admin/payments/${payment.uuid}`)}
-              className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" title="مشاهده">
+              className="cp-action-view" title="مشاهده">
               <EyeIcon className="w-4 h-4" />
             </button>
           )}
diff --git a/assets/admin/pages/RatingsPage.tsx b/assets/admin/pages/RatingsPage.tsx
index 50850459..5b482a46 100644
--- a/assets/admin/pages/RatingsPage.tsx
+++ b/assets/admin/pages/RatingsPage.tsx
@@ -71,7 +71,7 @@ export default function RatingsPage() {
         breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'امتیازها' }]}
       />
 
-      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
+      <div className="cp-card p-6">
         <DataTable<Rating>
           columns={columns}
           data={items}
@@ -82,7 +82,7 @@ export default function RatingsPage() {
           emptyMessage="هیچ امتیازی یافت نشد"
           actions={(rating) => (
             <button onClick={() => setDeleteTarget(rating)}
-              className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="حذف">
+              className="cp-action-delete" title="حذف">
               <TrashIcon className="w-4 h-4" />
             </button>
           )}
diff --git a/assets/admin/pages/RepresentationDetailPage.tsx b/assets/admin/pages/RepresentationDetailPage.tsx
index 9c3c9905..f790a7d1 100644
--- a/assets/admin/pages/RepresentationDetailPage.tsx
+++ b/assets/admin/pages/RepresentationDetailPage.tsx
@@ -14,9 +14,9 @@ import Modal from '../components/ui/Modal';
 
 function DetailRow({ label, value }: { label: string; value: React.ReactNode }) {
   return (
-    <div className="flex items-start gap-4 py-3 border-b border-gray-100 last:border-0">
+    <div className="cp-info-row items-start gap-4">
       <span className="text-sm text-gray-500 w-40 shrink-0">{label}</span>
-      <span className="text-sm text-gray-800 font-medium">{value ?? '—'}</span>
+      <span className="cp-info-value">{value ?? '—'}</span>
     </div>
   );
 }
@@ -122,7 +122,7 @@ export default function RepresentationDetailPage() {
             { label: 'نمایندگان', to: '/admin/representations' },
           ]}
         />
-        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-12 text-center text-gray-400">
+        <div className="cp-card p-12 text-center text-slate-400 dark:text-slate-500">
           نماینده‌ای با این شناسه یافت نشد.
         </div>
       </div>
@@ -176,7 +176,7 @@ export default function RepresentationDetailPage() {
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         {/* Basic Info */}
-        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
+        <div className="cp-card p-6">
           <h2 className="text-sm font-semibold text-gray-700 mb-4">اطلاعات پایه</h2>
           <DetailRow label="نام کامل" value={rep.full_name} />
           <DetailRow label="موبایل" value={
@@ -191,7 +191,7 @@ export default function RepresentationDetailPage() {
         </div>
 
         {/* Bank Account */}
-        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
+        <div className="cp-card p-6">
           <h2 className="text-sm font-semibold text-gray-700 mb-4">اطلاعات بانکی</h2>
           {rep.bank_account ? (
             <>
@@ -219,7 +219,7 @@ export default function RepresentationDetailPage() {
         footer={
           <>
             <button onClick={() => setEditOpen(false)}
-              className="px-4 py-2 border border-gray-300 text-sm text-gray-700 rounded-[10px] hover:bg-gray-50 transition-colors">
+              className="cp-btn-secondary">
               لغو
             </button>
             <button
@@ -230,7 +230,7 @@ export default function RepresentationDetailPage() {
                 commission_percent: parseFloat(formData.commission_percent) || rep.commission_percent,
               } as any)}
               disabled={updateMutation.isPending}
-              className="px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 disabled:opacity-50 transition-colors">
+              className="cp-btn-primary">
               {updateMutation.isPending ? 'در حال ذخیره...' : 'ذخیره'}
             </button>
           </>
@@ -238,16 +238,16 @@ export default function RepresentationDetailPage() {
       >
         <div className="space-y-4">
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">نام کامل</label>
+            <label className="cp-label">نام کامل</label>
             <input value={formData.full_name} onChange={(e) => setFormData((p) => ({ ...p, full_name: e.target.value }))}
-              className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" />
+              className="cp-input h-11" />
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">شهر</label>
+            <label className="cp-label">شهر</label>
             <select
               value={formData.city_id}
               onChange={(e) => setFormData((p) => ({ ...p, city_id: e.target.value }))}
-              className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white"
+              className="cp-input h-11"
             >
               <option value="">انتخاب شهر</option>
               {cities.map((c) => (
@@ -256,15 +256,15 @@ export default function RepresentationDetailPage() {
             </select>
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">موبایل</label>
+            <label className="cp-label">موبایل</label>
             <input value={formData.mobile_number} onChange={(e) => setFormData((p) => ({ ...p, mobile_number: e.target.value }))}
-              dir="ltr" className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" />
+              dir="ltr" className="cp-input h-11" />
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">درصد کمیسیون</label>
+            <label className="cp-label">درصد کمیسیون</label>
             <input value={formData.commission_percent} onChange={(e) => setFormData((p) => ({ ...p, commission_percent: e.target.value }))}
               type="number" min="0" max="100" dir="ltr"
-              className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" />
+              className="cp-input h-11" />
           </div>
         </div>
       </Modal>
diff --git a/assets/admin/pages/RepresentationsPage.tsx b/assets/admin/pages/RepresentationsPage.tsx
index 8373fd9b..50ab1772 100644
--- a/assets/admin/pages/RepresentationsPage.tsx
+++ b/assets/admin/pages/RepresentationsPage.tsx
@@ -113,20 +113,20 @@ export default function RepresentationsPage() {
         breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'نمایندگان' }]}
         action={
           <button onClick={() => setAddOpen(true)}
-            className="flex items-center gap-2 px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 transition-colors">
+            className="cp-btn-primary">
             <PlusIcon className="w-4 h-4" />
             افزودن نماینده
           </button>
         }
       />
 
-      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
+      <div className="cp-card p-6">
         {/* City filter */}
         <div className="mb-4 flex items-center gap-3">
           <select
             value={cityFilter}
             onChange={(e) => { setCityFilter(e.target.value); setPage(1); }}
-            className="h-10 border border-gray-300 rounded-[10px] px-3 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white min-w-[160px]"
+            className="cp-input min-w-[160px]"
           >
             <option value="">همه شهرها</option>
             {cities.map((c) => (
@@ -154,11 +154,11 @@ export default function RepresentationsPage() {
           actions={(rep) => (
             <>
               <button onClick={() => navigate(`/admin/representations/${rep.uuid}`)}
-                className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" title="مشاهده">
+                className="cp-action-view" title="مشاهده">
                 <EyeIcon className="w-4 h-4" />
               </button>
               <button onClick={() => setDeleteTarget(rep)}
-                className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="حذف">
+                className="cp-action-delete" title="حذف">
                 <TrashIcon className="w-4 h-4" />
               </button>
             </>
@@ -171,11 +171,11 @@ export default function RepresentationsPage() {
         footer={
           <>
             <button onClick={() => { setAddOpen(false); reset(); }}
-              className="px-4 py-2 border border-gray-300 text-sm text-gray-700 rounded-[10px] hover:bg-gray-50 transition-colors">
+              className="cp-btn-secondary">
               لغو
             </button>
             <button form="add-rep-form" type="submit" disabled={isSubmitting}
-              className="px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 disabled:opacity-50 transition-colors">
+              className="cp-btn-primary">
               {isSubmitting ? 'در حال ذخیره...' : 'ذخیره'}
             </button>
           </>
@@ -183,21 +183,21 @@ export default function RepresentationsPage() {
       >
         <form id="add-rep-form" onSubmit={handleSubmit((d) => createMutation.mutate(d))} className="space-y-4">
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">نام کامل</label>
+            <label className="cp-label">نام کامل</label>
             <input {...register('full_name')} placeholder="علی محمدی"
-              className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" />
+              className="cp-input h-11" />
             {errors.full_name && <p className="text-red-500 text-xs mt-1">{errors.full_name.message}</p>}
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">شماره موبایل</label>
+            <label className="cp-label">شماره موبایل</label>
             <input {...register('mobile_number')} dir="ltr" placeholder="09xxxxxxxxx"
-              className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" />
+              className="cp-input h-11" />
             {errors.mobile_number && <p className="text-red-500 text-xs mt-1">{errors.mobile_number.message}</p>}
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">شهر</label>
+            <label className="cp-label">شهر</label>
             <select {...register('city_id')}
-              className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white">
+              className="cp-input h-11">
               <option value="">انتخاب شهر</option>
               {cities.map((c) => (
                 <option key={c.id} value={c.id}>{c.label}</option>
@@ -205,9 +205,9 @@ export default function RepresentationsPage() {
             </select>
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">درصد کمیسیون</label>
+            <label className="cp-label">درصد کمیسیون</label>
             <input {...register('commission_percent')} type="number" min="0" max="100" placeholder="10" dir="ltr"
-              className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" />
+              className="cp-input h-11" />
             {errors.commission_percent && <p className="text-red-500 text-xs mt-1">{errors.commission_percent.message}</p>}
           </div>
         </form>
diff --git a/assets/admin/pages/SecretariesPage.tsx b/assets/admin/pages/SecretariesPage.tsx
index e3d0bfeb..689186f7 100644
--- a/assets/admin/pages/SecretariesPage.tsx
+++ b/assets/admin/pages/SecretariesPage.tsx
@@ -94,7 +94,7 @@ function PermissionsMatrix({
             const allActions = ['view', 'create', 'update', 'delete', 'cancel', 'update_status'];
             return (
               <tr key={section} className="border-t border-gray-100">
-                <td className="py-3 pr-0 text-gray-700 font-medium">{config.label}</td>
+                <td className="py-3 pr-0 text-slate-700 dark:text-slate-300 font-medium">{config.label}</td>
                 {allActions.map((action) => {
                   const actionConfig = config.actions.find((a) => a.key === action);
                   if (!actionConfig) {
@@ -168,7 +168,7 @@ export default function SecretariesPage() {
     {
       key: 'user_name',
       header: 'نام',
-      render: (s) => <span className="font-medium text-gray-900">{s.user_name}</span>,
+      render: (s) => <span className="font-medium text-slate-800 dark:text-slate-100">{s.user_name}</span>,
     },
     {
       key: 'mobile_number',
@@ -190,7 +190,7 @@ export default function SecretariesPage() {
         breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'منشی‌ها' }]}
       />
 
-      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
+      <div className="cp-card p-6">
         <DataTable<Secretary>
           columns={columns}
           data={items}
@@ -202,11 +202,11 @@ export default function SecretariesPage() {
           actions={(sec) => (
             <>
               <button onClick={() => openEdit(sec)}
-                className="p-1.5 text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors" title="ویرایش دسترسی‌ها">
+                className="cp-action-edit" title="ویرایش دسترسی‌ها">
                 <PencilIcon className="w-4 h-4" />
               </button>
               <button onClick={() => setDeleteTarget(sec)}
-                className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="حذف">
+                className="cp-action-delete" title="حذف">
                 <TrashIcon className="w-4 h-4" />
               </button>
             </>
@@ -223,13 +223,13 @@ export default function SecretariesPage() {
         footer={
           <>
             <button onClick={() => setEditTarget(null)}
-              className="px-4 py-2 border border-gray-300 text-sm text-gray-700 rounded-[10px] hover:bg-gray-50 transition-colors">
+              className="cp-btn-secondary">
               لغو
             </button>
             <button
               onClick={() => editTarget && updatePermsMutation.mutate({ uuid: editTarget.uuid, permissions: editPerms })}
               disabled={updatePermsMutation.isPending}
-              className="px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 disabled:opacity-50 transition-colors">
+              className="cp-btn-primary">
               {updatePermsMutation.isPending ? 'در حال ذخیره...' : 'ذخیره دسترسی‌ها'}
             </button>
           </>
diff --git a/assets/admin/pages/SettlementsPage.tsx b/assets/admin/pages/SettlementsPage.tsx
index a427ef78..5aba0ac7 100644
--- a/assets/admin/pages/SettlementsPage.tsx
+++ b/assets/admin/pages/SettlementsPage.tsx
@@ -82,12 +82,12 @@ export default function SettlementsPage() {
         breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'تسویه‌حساب' }]}
       />
 
-      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
+      <div className="cp-card p-6">
         <div className="flex items-center gap-3 mb-4">
           {STATUS_FILTERS.map((f) => (
             <button key={f.value} onClick={() => { setStatusFilter(f.value); setPage(1); }}
               className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
-                statusFilter === f.value ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                statusFilter === f.value ? 'bg-primary-600 text-white' : 'bg-slate-100 dark:bg-gray-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-gray-600'
               }`}>
               {f.label}
             </button>
@@ -102,7 +102,7 @@ export default function SettlementsPage() {
           actions={(s) => (
             <>
               <button onClick={() => navigate(`/admin/settlements/${s.uuid}`)}
-                className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" title="مشاهده">
+                className="cp-action-view" title="مشاهده">
                 <EyeIcon className="w-4 h-4" />
               </button>
               {s.status === 'pending' && (
@@ -112,7 +112,7 @@ export default function SettlementsPage() {
                     <CheckIcon className="w-4 h-4" />
                   </button>
                   <button onClick={() => setRejectTarget(s)}
-                    className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="رد">
+                    className="cp-action-delete" title="رد">
                     <XMarkIcon className="w-4 h-4" />
                   </button>
                 </>
@@ -140,25 +140,25 @@ export default function SettlementsPage() {
         footer={
           <>
             <button onClick={() => { setRejectTarget(null); setRejectReason(''); }}
-              className="px-4 py-2 border border-gray-300 text-sm text-gray-700 rounded-[10px] hover:bg-gray-50 transition-colors">
+              className="cp-btn-secondary">
               لغو
             </button>
             <button
               onClick={() => rejectTarget && rejectMutation.mutate({ s: rejectTarget, reason: rejectReason })}
               disabled={!rejectReason || rejectMutation.isPending}
-              className="px-4 py-2 bg-red-600 text-white text-sm rounded-[10px] hover:bg-red-700 disabled:opacity-50 transition-colors">
+              className="cp-btn-danger">
               {rejectMutation.isPending ? 'در حال ارسال...' : 'رد کردن'}
             </button>
           </>
         }
       >
-        <label className="block text-sm font-medium text-gray-700 mb-2">دلیل رد:</label>
+        <label className="cp-label mb-2">دلیل رد:</label>
         <textarea
           value={rejectReason}
           onChange={(e) => setRejectReason(e.target.value)}
           rows={4}
           placeholder="دلیل رد درخواست را بنویسید..."
-          className="w-full border border-gray-300 rounded-[10px] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 resize-none"
+          className="cp-textarea resize-none"
         />
       </Modal>
     </div>
diff --git a/assets/admin/pages/SmsPage.tsx b/assets/admin/pages/SmsPage.tsx
index d522861b..965c7f07 100644
--- a/assets/admin/pages/SmsPage.tsx
+++ b/assets/admin/pages/SmsPage.tsx
@@ -164,7 +164,7 @@ export default function SmsPage() {
         action={
           activeTab === 'samples' ? (
             <button onClick={() => setAddOpen(true)}
-              className="flex items-center gap-2 px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 transition-colors">
+              className="cp-btn-primary">
               <PlusIcon className="w-4 h-4" />
               افزودن قالب
             </button>
@@ -172,14 +172,14 @@ export default function SmsPage() {
         }
       />
 
-      <div className="bg-white rounded-2xl shadow-sm border border-gray-100">
-        <div className="flex border-b border-gray-200 px-6 pt-4">
+      <div className="cp-card">
+        <div className="flex border-b border-slate-200 dark:border-gray-700 px-6 pt-4">
           {tabs.map((t) => (
             <button key={t.key} onClick={() => handleTabChange(t.key)}
               className={`pb-3 px-4 text-sm font-medium border-b-2 transition-colors -mb-px ${
                 activeTab === t.key
                   ? 'border-primary-600 text-primary-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700'
+                  : 'border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200'
               }`}>
               {t.label}
             </button>
@@ -196,7 +196,7 @@ export default function SmsPage() {
                 emptyMessage="هیچ قالبی یافت نشد"
                 actions={(t) => (
                   <button onClick={() => setDeleteTarget(t)}
-                    className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="حذف">
+                    className="cp-action-delete" title="حذف">
                     <TrashIcon className="w-4 h-4" />
                   </button>
                 )}
@@ -224,7 +224,7 @@ export default function SmsPage() {
                       <CheckIcon className="w-4 h-4" />
                     </button>
                     <button onClick={() => setRejectTarget(t)}
-                      className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="رد">
+                      className="cp-action-delete" title="رد">
                       <XMarkIcon className="w-4 h-4" />
                     </button>
                   </>
@@ -262,11 +262,11 @@ export default function SmsPage() {
         footer={
           <>
             <button onClick={() => setAddOpen(false)}
-              className="px-4 py-2 border border-gray-300 text-sm text-gray-700 rounded-[10px] hover:bg-gray-50 transition-colors">
+              className="cp-btn-secondary">
               لغو
             </button>
             <button form="add-sms-form" type="submit" disabled={isSubmitting}
-              className="px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 disabled:opacity-50 transition-colors">
+              className="cp-btn-primary">
               {isSubmitting ? 'در حال ذخیره...' : 'ذخیره'}
             </button>
           </>
@@ -274,15 +274,15 @@ export default function SmsPage() {
       >
         <form id="add-sms-form" onSubmit={handleSubmit((d) => createMutation.mutate(d))} className="space-y-4">
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">نام قالب</label>
+            <label className="cp-label">نام قالب</label>
             <input {...register('name')} placeholder="مثال: تأیید نوبت"
-              className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" />
+              className="cp-input h-11" />
             {errors.name && <p className="text-red-500 text-xs mt-1">{errors.name.message}</p>}
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">متن قالب</label>
+            <label className="cp-label">متن قالب</label>
             <textarea {...register('body')} rows={4} placeholder="متن پیامک..."
-              className="w-full border border-gray-300 rounded-[10px] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 resize-none" />
+              className="cp-textarea resize-none" />
             {errors.body && <p className="text-red-500 text-xs mt-1">{errors.body.message}</p>}
           </div>
         </form>
@@ -293,22 +293,22 @@ export default function SmsPage() {
         footer={
           <>
             <button onClick={() => { setRejectTarget(null); setRejectReason(''); }}
-              className="px-4 py-2 border border-gray-300 text-sm text-gray-700 rounded-[10px] hover:bg-gray-50 transition-colors">
+              className="cp-btn-secondary">
               لغو
             </button>
             <button
               onClick={() => rejectTarget && rejectMutation.mutate({ t: rejectTarget, reason: rejectReason })}
               disabled={!rejectReason || rejectMutation.isPending}
-              className="px-4 py-2 bg-red-600 text-white text-sm rounded-[10px] hover:bg-red-700 disabled:opacity-50 transition-colors">
+              className="cp-btn-danger">
               رد کردن
             </button>
           </>
         }
       >
-        <label className="block text-sm font-medium text-gray-700 mb-2">دلیل رد:</label>
+        <label className="cp-label mb-2">دلیل رد:</label>
         <textarea value={rejectReason} onChange={(e) => setRejectReason(e.target.value)}
           rows={4} placeholder="دلیل رد را بنویسید..."
-          className="w-full border border-gray-300 rounded-[10px] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 resize-none" />
+          className="cp-textarea resize-none" />
       </Modal>
 
       <ConfirmDialog
diff --git a/assets/admin/pages/UserDetailPage.tsx b/assets/admin/pages/UserDetailPage.tsx
index 4b63b4a7..3ece5d98 100644
--- a/assets/admin/pages/UserDetailPage.tsx
+++ b/assets/admin/pages/UserDetailPage.tsx
@@ -11,9 +11,9 @@ import { ActiveBadge } from '../components/ui/StatusBadge';
 
 function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
   return (
-    <div className="flex items-center justify-between py-3 border-b border-gray-100 last:border-0">
-      <span className="text-sm text-gray-500">{label}</span>
-      <span className="text-sm font-medium text-gray-900">{value ?? '—'}</span>
+    <div className="cp-info-row">
+      <span className="cp-info-label text-sm">{label}</span>
+      <span className="cp-info-value">{value ?? '—'}</span>
     </div>
   );
 }
@@ -42,7 +42,7 @@ export default function UserDetailPage() {
         action={
           <button
             onClick={() => navigate('/admin/users')}
-            className="flex items-center gap-2 text-sm text-gray-500 hover:text-gray-800 transition-colors"
+            className="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-100 transition-colors"
           >
             <ArrowRightIcon className="w-4 h-4" />
             بازگشت
@@ -51,9 +51,9 @@ export default function UserDetailPage() {
       />
 
       {isLoading ? (
-        <div className="bg-white rounded-2xl border border-gray-100 p-6 space-y-3">
+        <div className="cp-card p-6 space-y-3">
           {Array.from({ length: 6 }).map((_, i) => (
-            <div key={i} className="h-8 bg-gray-100 rounded-lg animate-pulse" />
+            <div key={i} className="h-8 rounded-lg skeleton" />
           ))}
         </div>
       ) : user ? (
diff --git a/assets/admin/pages/UsersPage.tsx b/assets/admin/pages/UsersPage.tsx
index b044ad88..a974eb95 100644
--- a/assets/admin/pages/UsersPage.tsx
+++ b/assets/admin/pages/UsersPage.tsx
@@ -44,7 +44,7 @@ export default function UsersPage() {
       key: 'name',
       header: 'نام',
       render: (u) => (
-        <span className="font-medium text-gray-900">
+        <span className="font-medium text-slate-800 dark:text-slate-100">
           {u.name || (u.first_name || u.last_name ? `${u.first_name ?? ''} ${u.last_name ?? ''}`.trim() : '—')}
         </span>
       ),
@@ -58,7 +58,7 @@ export default function UsersPage() {
       key: 'roles',
       header: 'نقش',
       render: (u) => (
-        <span className="text-xs bg-gray-100 text-gray-700 px-2 py-0.5 rounded-full">
+        <span className="text-xs bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-200 px-2 py-0.5 rounded-full">
           {u.roles.includes('ROLE_ADMIN')
             ? 'ادمین'
             : u.roles.includes('ROLE_DOCTOR')
@@ -89,7 +89,7 @@ export default function UsersPage() {
         breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'کاربران' }]}
       />
 
-      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
+      <div className="cp-card p-6">
         <DataTable<User>
           columns={columns}
           data={items}
@@ -102,21 +102,21 @@ export default function UsersPage() {
             <>
               <button
                 onClick={() => navigate(`/admin/users/${user.uuid}`)}
-                className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+                className="cp-action-view"
                 title="مشاهده"
               >
                 <EyeIcon className="w-4 h-4" />
               </button>
               <button
                 onClick={() => navigate(`/admin/users/${user.uuid}?edit=1`)}
-                className="p-1.5 text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors"
+                className="cp-action-edit"
                 title="ویرایش"
               >
                 <PencilIcon className="w-4 h-4" />
               </button>
               <button
                 onClick={() => setDeleteTarget(user)}
-                className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                className="cp-action-delete"
                 title="حذف"
               >
                 <TrashIcon className="w-4 h-4" />
diff --git a/assets/admin/stores/uiStore.ts b/assets/admin/stores/uiStore.ts
index c2011830..50b9fa2f 100644
--- a/assets/admin/stores/uiStore.ts
+++ b/assets/admin/stores/uiStore.ts
@@ -1,13 +1,34 @@
 import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
 
 interface UiState {
   sidebarOpen: boolean;
+  darkMode: boolean;
   toggleSidebar: () => void;
   setSidebarOpen: (open: boolean) => void;
+  toggleDarkMode: () => void;
 }
 
-export const useUiStore = create<UiState>((set) => ({
-  sidebarOpen: true,
-  toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),
-  setSidebarOpen: (open) => set({ sidebarOpen: open }),
-}));
+export const useUiStore = create<UiState>()(
+  persist(
+    (set, get) => ({
+      sidebarOpen: true,
+      darkMode: false,
+      toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),
+      setSidebarOpen: (open) => set({ sidebarOpen: open }),
+      toggleDarkMode: () => {
+        const next = !get().darkMode;
+        set({ darkMode: next });
+        document.documentElement.classList.toggle('dark', next);
+      },
+    }),
+    {
+      name: 'clinicpro-ui',
+      onRehydrateStorage: () => (state) => {
+        if (state?.darkMode) {
+          document.documentElement.classList.add('dark');
+        }
+      },
+    },
+  ),
+);
diff --git a/assets/admin/styles.css b/assets/admin/styles.css
index 6db9e5db..0de1447a 100644
--- a/assets/admin/styles.css
+++ b/assets/admin/styles.css
@@ -1,7 +1,11 @@
 @import "tailwindcss";
+@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');
+
+/* Class-based dark mode for Tailwind v4 */
+@custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
-  --color-primary-50: #f5f3ff;
+  --color-primary-50:  #f5f3ff;
   --color-primary-100: #ede9fe;
   --color-primary-200: #ddd6fe;
   --color-primary-300: #c4b5fd;
@@ -12,27 +16,137 @@
   --color-primary-800: #5b21b6;
   --color-primary-900: #4c1d95;
 
-  --color-bg-body: #f1f5f9;
-  --color-bg-card: #ffffff;
-  --color-bg-sidebar: #0f172a;
-  --color-bg-sidebar-active: rgba(139, 92, 246, 0.15);
-
-  --font-sans: "Vazirmatn", "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-sans: "Vazirmatn", ui-sans-serif, system-ui, sans-serif;
 }
 
-* {
+*, *::before, *::after {
   font-family: var(--font-sans);
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
-  background-color: var(--color-bg-body);
   direction: rtl;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
+/* ── Scrollbar ──────────────────────────────── */
+::-webkit-scrollbar { width: 5px; height: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
+.dark ::-webkit-scrollbar-thumb { background: #334155; }
+::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
+.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }
+
+/* ── Animations ─────────────────────────────── */
 @keyframes scale-in {
-  from { opacity: 0; transform: scale(0.95); }
-  to   { opacity: 1; transform: scale(1); }
+  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
+  to   { opacity: 1; transform: scale(1)    translateY(0); }
+}
+@keyframes slide-up {
+  from { opacity: 0; transform: translateY(10px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes shimmer {
+  0%   { background-position: -200% 0; }
+  100% { background-position:  200% 0; }
 }
 
+.animate-scale-in { animation: scale-in  200ms cubic-bezier(0.34, 1.2, 0.64, 1) both; }
+.animate-slide-up  { animation: slide-up  200ms ease both; }
+.animate-fade-in   { animation: fade-in   150ms ease both; }
+
+/* ── Skeleton shimmer ───────────────────────── */
+.skeleton {
+  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.4s infinite;
+}
+.dark .skeleton {
+  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
+  background-size: 200% 100%;
+}
+
+/* ── Utility classes ────────────────────────── */
 .line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
 .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
+
+/* ── Admin component tokens ─────────────────── */
+@layer components {
+  /* Card / panel */
+  .cp-card {
+    @apply bg-white dark:bg-gray-900 rounded-2xl border border-slate-200/70 dark:border-gray-700/50 shadow-sm;
+  }
+
+  /* Form inputs */
+  .cp-input {
+    @apply w-full h-10 bg-white dark:bg-gray-800 border border-slate-300 dark:border-gray-600
+           rounded-xl px-3 text-sm text-slate-900 dark:text-slate-100
+           placeholder-slate-400 dark:placeholder-slate-500
+           focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500
+           transition-colors;
+  }
+  .cp-textarea {
+    @apply bg-white dark:bg-gray-800 border border-slate-300 dark:border-gray-600
+           rounded-xl px-3 py-2 text-sm text-slate-900 dark:text-slate-100
+           placeholder-slate-400 dark:placeholder-slate-500
+           focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500
+           transition-colors w-full;
+  }
+  .cp-select {
+    @apply w-full h-10 bg-white dark:bg-gray-800 border border-slate-300 dark:border-gray-600
+           rounded-xl px-3 text-sm text-slate-900 dark:text-slate-100
+           focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500
+           transition-colors;
+  }
+  .cp-label {
+    @apply block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5;
+  }
+
+  /* Buttons — base styles inlined to avoid @apply on component classes */
+  .cp-btn-primary {
+    @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed bg-primary-600 hover:bg-primary-700 active:bg-primary-800 text-white shadow-sm;
+  }
+  .cp-btn-secondary {
+    @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed bg-slate-100 dark:bg-gray-700 hover:bg-slate-200 dark:hover:bg-gray-600 text-slate-700 dark:text-slate-200;
+  }
+  .cp-btn-danger {
+    @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed bg-red-600 hover:bg-red-700 active:bg-red-800 text-white shadow-sm;
+  }
+  .cp-btn-ghost {
+    @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-100 dark:hover:bg-gray-700 text-slate-600 dark:text-slate-300;
+  }
+
+  /* Table action buttons */
+  .cp-action-view   { @apply p-1.5 rounded-lg text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-500/10 dark:hover:text-blue-400 transition-colors; }
+  .cp-action-edit   { @apply p-1.5 rounded-lg text-slate-400 hover:text-primary-600 hover:bg-primary-50 dark:hover:bg-primary-500/10 dark:hover:text-primary-400 transition-colors; }
+  .cp-action-delete { @apply p-1.5 rounded-lg text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-500/10 dark:hover:text-red-400 transition-colors; }
+
+  /* Stat card — cp-card inlined to avoid @apply on component class */
+  .cp-stat {
+    @apply bg-white dark:bg-gray-900 rounded-2xl border border-slate-200/70 dark:border-gray-700/50 shadow-sm p-5 flex items-start gap-4;
+  }
+  .cp-stat-icon {
+    @apply w-11 h-11 rounded-xl flex items-center justify-center shrink-0;
+  }
+
+  /* Section heading inside a card */
+  .cp-section-title {
+    @apply text-sm font-semibold text-slate-700 dark:text-slate-200 mb-4;
+  }
+
+  /* Info rows (label + value pairs) */
+  .cp-info-row {
+    @apply flex items-center justify-between py-2.5 border-b border-slate-100 dark:border-gray-700/50 last:border-0;
+  }
+  .cp-info-label { @apply text-xs text-slate-500 dark:text-slate-400; }
+  .cp-info-value { @apply text-sm font-medium text-slate-800 dark:text-slate-200; }
+}
diff --git a/package-lock.json b/package-lock.json
index 3c5a81f0..48690285 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,6 +41,12 @@
                 "typescript": "^5.0.0",
                 "webpack": "^5.72",
                 "webpack-cli": "^6.0.0"
+            },
+            "optionalDependencies": {
+                "@tailwindcss/oxide-darwin-arm64": "^4.3.0",
+                "@tailwindcss/oxide-linux-arm64-gnu": "^4.3.0",
+                "lightningcss-darwin-arm64": "^1.32.0",
+                "lightningcss-linux-arm64-gnu": "^1.32.0"
             }
         },
         "node_modules/@adobe/css-tools": {
@@ -2839,7 +2845,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -2907,7 +2912,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "license": "MIT",
             "optional": true,
             "os": [
@@ -3308,7 +3312,6 @@
             "version": "19.2.17",
             "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
             "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "csstype": "^3.2.2"
@@ -5630,7 +5633,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "license": "MPL-2.0",
             "optional": true,
             "os": [
@@ -5714,7 +5716,6 @@
             "cpu": [
                 "arm64"
             ],
-            "dev": true,
             "license": "MPL-2.0",
             "optional": true,
             "os": [
diff --git a/package.json b/package.json
index 59777ebb..7ca7d9c0 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,12 @@
         "zod": "^3.0.0",
         "zustand": "^5.0.0"
     },
+    "optionalDependencies": {
+        "lightningcss-darwin-arm64": "^1.32.0",
+        "lightningcss-linux-arm64-gnu": "^1.32.0",
+        "@tailwindcss/oxide-darwin-arm64": "^4.3.0",
+        "@tailwindcss/oxide-linux-arm64-gnu": "^4.3.0"
+    },
     "license": "UNLICENSED",
     "private": true,
     "scripts": {