diff --git a/.gitignore b/.gitignore
index 5c1f99a2..6204f2bd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -53,3 +53,4 @@
 npm-debug.log
 yarn-error.log
 ###< symfony/webpack-encore-bundle ###
+clinicpro/*
\ No newline at end of file
diff --git a/assets/admin/components/layout/AdminLayout.tsx b/assets/admin/components/layout/AdminLayout.tsx
index 0d76c445..522e692d 100644
--- a/assets/admin/components/layout/AdminLayout.tsx
+++ b/assets/admin/components/layout/AdminLayout.tsx
@@ -1,22 +1,37 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } 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);
+  const darkMode      = useUiStore((s) => s.darkMode);
+  const density       = useUiStore((s) => s.density);
+  const brandHue      = useUiStore((s) => s.brandHue);
+  const sidebarOpen   = useUiStore((s) => s.sidebarOpen);
+  const setSidebarOpen = useUiStore((s) => s.setSidebarOpen);
+  const [mobileOpen, setMobileOpen] = useState(false);
 
   useEffect(() => {
-    document.documentElement.classList.toggle('dark', darkMode);
-  }, [darkMode]);
+    const root = document.documentElement;
+    root.classList.toggle('dark', darkMode);
+    root.setAttribute('data-theme', darkMode ? 'dark' : 'light');
+    root.setAttribute('data-density', density);
+    root.style.setProperty('--brand-h', String(brandHue.h));
+    root.style.setProperty('--brand-c', String(brandHue.c));
+  }, [darkMode, density, brandHue]);
 
   return (
-    <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 min-w-0">
-        <Topbar />
-        <main className="flex-1 overflow-y-auto p-5 lg:p-6">
+    <div
+      className="app"
+      data-collapsed={!sidebarOpen ? 'true' : 'false'}
+      data-mobile-open={mobileOpen ? 'true' : 'false'}
+    >
+      <div className="scrim" onClick={() => setMobileOpen(false)} />
+      <Sidebar mobileOpen={mobileOpen} onMobileClose={() => setMobileOpen(false)} />
+      <div className="main">
+        <Topbar onMobileMenuOpen={() => setMobileOpen(true)} />
+        <main className="content">
           <Outlet />
         </main>
       </div>
diff --git a/assets/admin/components/layout/Sidebar.tsx b/assets/admin/components/layout/Sidebar.tsx
index 6010d5ec..e3cd05eb 100644
--- a/assets/admin/components/layout/Sidebar.tsx
+++ b/assets/admin/components/layout/Sidebar.tsx
@@ -1,21 +1,10 @@
 import React from 'react';
 import { NavLink, useNavigate } from 'react-router-dom';
 import {
-  ChartBarIcon,
-  UserGroupIcon,
-  HeartIcon,
-  BuildingOffice2Icon,
-  CalendarDaysIcon,
-  CreditCardIcon,
-  BanknotesIcon,
-  UsersIcon,
-  ChatBubbleLeftEllipsisIcon,
-  StarIcon,
-  DevicePhoneMobileIcon,
-  TagIcon,
-  DocumentTextIcon,
-  KeyIcon,
-  Bars3Icon,
+  ChartBarIcon, UserGroupIcon, HeartIcon, BuildingOffice2Icon,
+  CalendarDaysIcon, CreditCardIcon, BanknotesIcon,
+  ChatBubbleLeftEllipsisIcon, StarIcon, DevicePhoneMobileIcon,
+  TagIcon, DocumentTextIcon, UsersIcon, KeyIcon,
   ArrowLeftOnRectangleIcon,
 } from '@heroicons/react/24/outline';
 import { useUiStore } from '../../stores/uiStore';
@@ -25,144 +14,111 @@ const sections = [
   {
     label: 'عمومی',
     items: [
-      { to: '/admin/dashboard', icon: ChartBarIcon, label: 'داشبورد' },
-      { to: '/admin/users', icon: UserGroupIcon, label: 'کاربران' },
-      { to: '/admin/doctors', icon: HeartIcon, label: 'پزشکان' },
-      { to: '/admin/clinics', icon: BuildingOffice2Icon, label: 'کلینیک‌ها' },
+      { to: '/admin/dashboard',       icon: ChartBarIcon,                 label: 'داشبورد' },
+      { to: '/admin/users',            icon: UserGroupIcon,                 label: 'کاربران' },
+      { to: '/admin/doctors',          icon: HeartIcon,                     label: 'پزشکان' },
+      { to: '/admin/clinics',          icon: BuildingOffice2Icon,           label: 'کلینیک‌ها' },
     ],
   },
   {
     label: 'مدیریت',
     items: [
-      { to: '/admin/appointments', icon: CalendarDaysIcon, label: 'نوبت‌ها' },
-      { to: '/admin/payments', icon: CreditCardIcon, label: 'پرداخت‌ها' },
-      { to: '/admin/settlements', icon: BanknotesIcon, label: 'تسویه‌حساب' },
+      { to: '/admin/appointments',    icon: CalendarDaysIcon,              label: 'نوبت‌ها' },
+      { to: '/admin/payments',        icon: CreditCardIcon,                label: 'پرداخت‌ها' },
+      { to: '/admin/settlements',     icon: BanknotesIcon,                 label: 'تسویه‌حساب' },
     ],
   },
   {
     label: 'محتوا',
     items: [
-      { to: '/admin/comments', icon: ChatBubbleLeftEllipsisIcon, label: 'نظرات' },
-      { to: '/admin/ratings', icon: StarIcon, label: 'امتیازها' },
-      { to: '/admin/blogs', icon: DocumentTextIcon, label: 'بلاگ' },
-      { to: '/admin/sms', icon: DevicePhoneMobileIcon, label: 'پیامک' },
+      { to: '/admin/comments',        icon: ChatBubbleLeftEllipsisIcon,    label: 'نظرات' },
+      { to: '/admin/ratings',         icon: StarIcon,                      label: 'امتیازها' },
+      { to: '/admin/blogs',           icon: DocumentTextIcon,              label: 'بلاگ' },
+      { to: '/admin/sms',             icon: DevicePhoneMobileIcon,         label: 'پیامک' },
     ],
   },
   {
     label: 'سیستم',
     items: [
-      { to: '/admin/categories', icon: TagIcon, label: 'دسته‌بندی‌ها' },
-      { to: '/admin/representations', icon: UsersIcon, label: 'نمایندگان' },
-      { to: '/admin/secretaries', icon: KeyIcon, label: 'منشی‌ها' },
+      { to: '/admin/categories',      icon: TagIcon,                       label: 'دسته‌بندی‌ها' },
+      { to: '/admin/representations', icon: UsersIcon,                     label: 'نمایندگان' },
+      { to: '/admin/secretaries',     icon: KeyIcon,                       label: 'منشی‌ها' },
     ],
   },
 ];
 
-export default function Sidebar() {
-  const open = useUiStore((s) => s.sidebarOpen);
-  const toggle = useUiStore((s) => s.toggleSidebar);
+interface Props {
+  mobileOpen?: boolean;
+  onMobileClose?: () => void;
+}
+
+export default function Sidebar({ mobileOpen: _mobileOpen, onMobileClose: _onMobileClose }: Props) {
+  const sidebarOpen = useUiStore((s) => s.sidebarOpen);
+  const toggleSidebar = useUiStore((s) => s.toggleSidebar);
   const logout = useAuthStore((s) => s.logout);
   const navigate = useNavigate();
 
   return (
-    <aside
-      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
-      `}
-    >
-      {/* ── Header ─────────────────────────────── */}
-      <div className={`flex items-center h-16 px-3 shrink-0 border-b border-white/[0.06] ${open ? 'gap-3' : 'justify-center'}`}>
-        {open && (
-          <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>
-        )}
+    <aside className="sidebar">
+      {/* Brand */}
+      <div className="sidebar-brand">
+        <div className="brand-logo">
+          <HeartIcon style={{ width: 20, height: 20 }} />
+        </div>
+        <div className="brand-text">
+          <b>ClinicPro</b>
+          <span>پنل مدیریت</span>
+        </div>
         <button
-          onClick={toggle}
-          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 ? 'بستن منو' : 'باز کردن منو'}
+          onClick={toggleSidebar}
+          className="icon-btn"
+          style={{ marginInlineStart: 'auto', width: 32, height: 32, flexShrink: 0 }}
+          title={sidebarOpen ? 'جمع کردن منو' : 'باز کردن منو'}
         >
-          <Bars3Icon className="w-5 h-5" />
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+            <line x1="3" y1="6" x2="21" y2="6" />
+            <line x1="3" y1="12" x2="21" y2="12" />
+            <line x1="3" y1="18" x2="21" y2="18" />
+          </svg>
         </button>
       </div>
 
-      {/* ── 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" />
-            )}
+      {/* Navigation */}
+      <nav className="nav">
+        {sections.map((section) => (
+          <div className="nav-group" key={section.label}>
+            <span className="nav-label">{section.label}</span>
             {section.items.map(({ to, icon: Icon, label }) => (
               <NavLink
                 key={to}
                 to={to}
-                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]'}
-                `}
+                title={!sidebarOpen ? label : undefined}
+                className={({ isActive }) => `nav-item${isActive ? ' active' : ''}`}
               >
-                {({ 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>}
-                  </>
-                )}
+                <Icon style={{ width: 19, height: 19, flexShrink: 0 }} />
+                <span>{label}</span>
               </NavLink>
             ))}
           </div>
         ))}
       </nav>
 
-      {/* ── User footer ────────────────────────── */}
-      <div className="shrink-0 border-t border-white/[0.06] p-2.5">
-        {open ? (
-          <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-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={() => { 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-4 h-4" />
-            </button>
+      {/* User footer */}
+      <div className="sidebar-foot">
+        <div
+          className="user-chip"
+          onClick={() => { logout(); navigate('/admin/login'); }}
+          title="خروج از سیستم"
+        >
+          <div className="cp-avatar">A</div>
+          <div className="user-meta">
+            <b>Admin</b>
+            <span>مدیر سیستم</span>
           </div>
-        ) : (
-          <button
-            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" />
-          </button>
-        )}
+          <ArrowLeftOnRectangleIcon
+            style={{ width: 16, height: 16, flexShrink: 0, color: 'var(--text-3)' }}
+          />
+        </div>
       </div>
     </aside>
   );
diff --git a/assets/admin/components/layout/Topbar.tsx b/assets/admin/components/layout/Topbar.tsx
index 3dde1d20..381b1a61 100644
--- a/assets/admin/components/layout/Topbar.tsx
+++ b/assets/admin/components/layout/Topbar.tsx
@@ -1,57 +1,221 @@
 import React from 'react';
-import { BellIcon, SunIcon, MoonIcon, Bars3Icon } from '@heroicons/react/24/outline';
-import { useUiStore } from '../../stores/uiStore';
+import { useLocation } from 'react-router-dom';
+import {
+  BellIcon, SunIcon, MoonIcon, Bars3Icon, Cog6ToothIcon,
+  MagnifyingGlassIcon, XMarkIcon, CheckIcon,
+} from '@heroicons/react/24/outline';
+import { ChevronLeftIcon } from '@heroicons/react/24/outline';
+import { useUiStore, HUES, type BrandHue } from '../../stores/uiStore';
 
-export default function Topbar() {
-  const toggleSidebar = useUiStore((s) => s.toggleSidebar);
-  const darkMode = useUiStore((s) => s.darkMode);
-  const toggleDarkMode = useUiStore((s) => s.toggleDarkMode);
+const CRUMBS: Record<string, string[]> = {
+  '/admin/dashboard':       ['داشبورد'],
+  '/admin/users':           ['کاربران'],
+  '/admin/doctors':         ['پزشکان'],
+  '/admin/clinics':         ['کلینیک‌ها'],
+  '/admin/appointments':    ['مدیریت', 'نوبت‌ها'],
+  '/admin/payments':        ['مدیریت', 'پرداخت‌ها'],
+  '/admin/settlements':     ['مدیریت', 'تسویه‌حساب'],
+  '/admin/comments':        ['محتوا', 'نظرات'],
+  '/admin/ratings':         ['محتوا', 'امتیازها'],
+  '/admin/blogs':           ['محتوا', 'بلاگ'],
+  '/admin/sms':             ['محتوا', 'پیامک'],
+  '/admin/categories':      ['سیستم', 'دسته‌بندی‌ها'],
+  '/admin/representations': ['سیستم', 'نمایندگان'],
+  '/admin/secretaries':     ['سیستم', 'منشی‌ها'],
+};
+
+function getCrumbs(pathname: string): string[] {
+  if (CRUMBS[pathname]) return CRUMBS[pathname];
+  const entry = Object.entries(CRUMBS).find(([k]) => pathname.startsWith(k + '/'));
+  return entry ? entry[1] : ['داشبورد'];
+}
+
+interface Props {
+  onMobileMenuOpen?: () => void;
+}
+
+export default function Topbar({ onMobileMenuOpen }: Props) {
+  const location           = useLocation();
+  const toggleSidebar      = useUiStore((s) => s.toggleSidebar);
+  const darkMode           = useUiStore((s) => s.darkMode);
+  const toggleDarkMode     = useUiStore((s) => s.toggleDarkMode);
+  const density            = useUiStore((s) => s.density);
+  const setDensity         = useUiStore((s) => s.setDensity);
+  const brandHue           = useUiStore((s) => s.brandHue);
+  const setBrandHue        = useUiStore((s) => s.setBrandHue);
+  const sidebarOpen        = useUiStore((s) => s.sidebarOpen);
+  const settingsPanelOpen  = useUiStore((s) => s.settingsPanelOpen);
+  const toggleSettingsPanel = useUiStore((s) => s.toggleSettingsPanel);
+
+  const crumbs = getCrumbs(location.pathname);
 
   return (
-    <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>
+    <>
+      <header className="topbar">
+        {/* Sidebar toggle — desktop only */}
+        <button className="icon-btn hidden lg:grid" onClick={toggleSidebar}
+          title={sidebarOpen ? 'جمع کردن منو' : 'باز کردن منو'}>
+          <Bars3Icon style={{ width: 20, height: 20 }} />
+        </button>
 
-      <div className="flex-1" />
+        {/* Mobile menu open — mobile only */}
+        <button className="icon-btn grid lg:hidden" onClick={onMobileMenuOpen} title="منو">
+          <Bars3Icon style={{ width: 20, height: 20 }} />
+        </button>
 
-      {/* Right side actions */}
-      <div className="flex items-center gap-1">
-        {/* Dark mode toggle */}
-        <button
-          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 ? 'حالت روشن' : 'حالت تاریک'}
-        >
+        {/* Search bar */}
+        <div className="topbar-search">
+          <MagnifyingGlassIcon style={{ width: 18, height: 18, flexShrink: 0 }} />
+          <input placeholder="جستجوی بیمار، پزشک، نوبت..." readOnly />
+          <kbd>⌘K</kbd>
+        </div>
+
+        <div style={{ flex: 1 }} />
+
+        {/* Breadcrumbs */}
+        <nav className="topbar-crumbs">
+          {crumbs.map((crumb, i) => (
+            <React.Fragment key={i}>
+              {i > 0 && <ChevronLeftIcon style={{ width: 13, height: 13 }} />}
+              {i === crumbs.length - 1 ? <b>{crumb}</b> : <span>{crumb}</span>}
+            </React.Fragment>
+          ))}
+        </nav>
+
+        <div style={{ width: 1, height: 24, background: 'var(--border)' }} />
+
+        {/* Settings */}
+        <button className="icon-btn" onClick={toggleSettingsPanel} title="شخصی‌سازی">
+          <Cog6ToothIcon style={{ width: 19, height: 19 }} />
+        </button>
+
+        {/* Dark mode */}
+        <button className="icon-btn" onClick={toggleDarkMode} title={darkMode ? 'حالت روشن' : 'حالت تاریک'}>
           {darkMode
-            ? <SunIcon className="w-5 h-5 text-amber-400" />
-            : <MoonIcon className="w-5 h-5" />}
+            ? <SunIcon  style={{ width: 19, height: 19, color: '#f59e0b' }} />
+            : <MoonIcon style={{ width: 19, height: 19 }} />}
         </button>
 
-        {/* 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-2 right-2 w-1.5 h-1.5 bg-red-500 rounded-full ring-2 ring-white dark:ring-gray-900" />
+        {/* Bell */}
+        <button className="icon-btn" title="اعلان‌ها">
+          <BellIcon style={{ width: 19, height: 19 }} />
+          <span className="dot" />
         </button>
 
-        {/* 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>
-          <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 className="cp-avatar" style={{ cursor: 'pointer' }}>A</div>
+      </header>
+
+      {/* Settings Panel */}
+      {settingsPanelOpen && (
+        <div
+          className="overlay"
+          style={{ placeItems: 'stretch', justifyContent: 'flex-start' }}
+          onClick={toggleSettingsPanel}
+        >
+          <div
+            className="modal settings-panel"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="modal-head">
+              <h2>شخصی‌سازی</h2>
+              <button className="mini-btn" onClick={toggleSettingsPanel}>
+                <XMarkIcon style={{ width: 18, height: 18 }} />
+              </button>
+            </div>
+            <div className="modal-body" style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
+
+              {/* Theme */}
+              <div className="form-row">
+                <label>حالت نمایش</label>
+                <div className="seg" style={{ width: '100%' }}>
+                  <button
+                    className={!darkMode ? 'on' : ''}
+                    style={{ flex: 1 }}
+                    onClick={() => { if (darkMode) toggleDarkMode(); }}
+                  >
+                    <SunIcon style={{ width: 15, height: 15, display: 'inline', verticalAlign: 'middle', marginInlineEnd: 6 }} />
+                    روشن
+                  </button>
+                  <button
+                    className={darkMode ? 'on' : ''}
+                    style={{ flex: 1 }}
+                    onClick={() => { if (!darkMode) toggleDarkMode(); }}
+                  >
+                    <MoonIcon style={{ width: 15, height: 15, display: 'inline', verticalAlign: 'middle', marginInlineEnd: 6 }} />
+                    تیره
+                  </button>
+                </div>
+              </div>
+
+              {/* Brand color */}
+              <div className="form-row">
+                <label>رنگ اصلی</label>
+                <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
+                  {HUES.map((hue) => (
+                    <button
+                      key={hue.h}
+                      onClick={() => setBrandHue(hue as BrandHue)}
+                      title={hue.name}
+                      style={{
+                        width: 42, height: 42, borderRadius: 12,
+                        background: `oklch(0.55 ${hue.c} ${hue.h})`,
+                        border: brandHue.h === hue.h ? '3px solid var(--text)' : '3px solid transparent',
+                        boxShadow: 'var(--shadow-sm)',
+                        display: 'grid', placeItems: 'center', color: '#fff', cursor: 'pointer',
+                      }}
+                    >
+                      {brandHue.h === hue.h && <CheckIcon style={{ width: 18, height: 18 }} />}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Density */}
+              <div className="form-row">
+                <label>تراکم اطلاعات</label>
+                <div className="seg" style={{ width: '100%' }}>
+                  <button
+                    className={density === 'comfortable' ? 'on' : ''}
+                    style={{ flex: 1 }}
+                    onClick={() => setDensity('comfortable')}
+                  >جادار</button>
+                  <button
+                    className={density === 'compact' ? 'on' : ''}
+                    style={{ flex: 1 }}
+                    onClick={() => setDensity('compact')}
+                  >فشرده</button>
+                </div>
+              </div>
+
+              {/* Sidebar */}
+              <div className="form-row">
+                <label>سایدبار</label>
+                <div className="seg" style={{ width: '100%' }}>
+                  <button
+                    className={sidebarOpen ? 'on' : ''}
+                    style={{ flex: 1 }}
+                    onClick={() => { if (!sidebarOpen) toggleSidebar(); }}
+                  >کامل</button>
+                  <button
+                    className={!sidebarOpen ? 'on' : ''}
+                    style={{ flex: 1 }}
+                    onClick={() => { if (sidebarOpen) toggleSidebar(); }}
+                  >جمع‌شده</button>
+                </div>
+              </div>
+
+              <div style={{
+                padding: 14, background: 'var(--surface-2)', borderRadius: 'var(--r)',
+                fontSize: 12.5, color: 'var(--text-2)', lineHeight: 1.9, marginTop: 8,
+              }}>
+                <Cog6ToothIcon style={{ width: 15, height: 15, verticalAlign: 'middle', marginInlineEnd: 6 }} />
+                تنظیمات شما به‌صورت خودکار ذخیره می‌شود و در بازدید بعدی حفظ می‌ماند.
+              </div>
+            </div>
           </div>
         </div>
-      </div>
-    </header>
+      )}
+    </>
   );
 }
diff --git a/assets/admin/components/ui/ConfirmDialog.tsx b/assets/admin/components/ui/ConfirmDialog.tsx
index 6cea2edf..22dfa1a7 100644
--- a/assets/admin/components/ui/ConfirmDialog.tsx
+++ b/assets/admin/components/ui/ConfirmDialog.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+import { XMarkIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 
 interface Props {
   open: boolean;
@@ -27,43 +27,36 @@ export default function ConfirmDialog({
   if (!open) return null;
 
   return (
-    <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 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-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 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 className="overlay" onClick={onCancel}>
+      <div className="modal" style={{ maxWidth: 420 }} onClick={(e) => e.stopPropagation()}>
+        <div className="modal-head">
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+            <span style={{
+              width: 36, height: 36, borderRadius: 10, display: 'grid', placeItems: 'center', flexShrink: 0,
+              background: danger ? 'var(--danger-bg)' : 'var(--warning-bg)',
+              color: danger ? 'var(--danger)' : 'var(--warning)',
+            }}>
+              <ExclamationTriangleIcon style={{ width: 18, height: 18 }} />
+            </span>
+            <h2 style={{ fontSize: 16 }}>{title}</h2>
           </div>
+          <button className="mini-btn" onClick={onCancel}>
+            <XMarkIcon style={{ width: 18, height: 18 }} />
+          </button>
         </div>
-
-        <div className="flex gap-3 mt-6 justify-end">
-          <button
-            onClick={onCancel}
-            disabled={loading}
-            className="cp-btn-secondary px-5 py-2"
-          >
+        <div className="modal-body">
+          <p style={{ color: 'var(--text-2)', lineHeight: 1.75, margin: 0 }}>{message}</p>
+        </div>
+        <div className="modal-foot" style={{ justifyContent: 'flex-end' }}>
+          <button className="btn ghost sm" onClick={onCancel} disabled={loading}>
             {cancelLabel}
           </button>
           <button
+            className={`btn ${danger ? 'danger' : 'primary'} sm`}
             onClick={onConfirm}
             disabled={loading}
-            className={`px-5 py-2 text-white font-medium ${danger ? 'cp-btn-danger' : 'cp-btn-primary'}`}
           >
-            {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}
+            {loading ? 'در حال انجام...' : confirmLabel}
           </button>
         </div>
       </div>
diff --git a/assets/admin/components/ui/DataTable.tsx b/assets/admin/components/ui/DataTable.tsx
index 3cc91153..609f1409 100644
--- a/assets/admin/components/ui/DataTable.tsx
+++ b/assets/admin/components/ui/DataTable.tsx
@@ -26,8 +26,8 @@ function SkeletonRow({ cols }: { cols: number }) {
   return (
     <tr>
       {Array.from({ length: cols }).map((_, i) => (
-        <td key={i} className="px-4 py-3.5">
-          <div className="h-4 rounded-lg skeleton" style={{ width: `${60 + (i * 17) % 40}%` }} />
+        <td key={i}>
+          <div className="skeleton" style={{ height: 14, borderRadius: 6, width: `${55 + (i * 17) % 40}%` }} />
         </td>
       ))}
     </tr>
@@ -47,83 +47,78 @@ export default function DataTable<T extends object>({
   headerExtra,
 }: Props<T>) {
   const allColumns = actions
-    ? [...columns, { key: '__actions', header: 'اقدامات', className: 'w-28' }]
+    ? [...columns, { key: '__actions', header: 'اقدامات', className: 'w-[120px]' }]
     : columns;
 
   return (
     <div>
-      {/* Search + extras header bar */}
+      {/* Toolbar row */}
       {(onSearchChange !== undefined || headerExtra) && (
-        <div className="flex items-center justify-between gap-3 mb-4 flex-wrap">
+        <div className="toolbar">
           {onSearchChange !== undefined && (
-            <div className="relative w-full sm:w-72">
-              <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" />
+            <div className="field" style={{ flex: '0 0 auto', minWidth: 240 }}>
+              <MagnifyingGlassIcon style={{ width: 16, height: 16, flexShrink: 0 }} />
               <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>}
+          {headerExtra && <>{headerExtra}</>}
         </div>
       )}
 
-      <div className="overflow-x-auto rounded-xl border border-slate-200 dark:border-gray-700/50">
-        <table className="w-full text-sm">
+      <div className="table-wrap">
+        <table className="t">
           <thead>
-            <tr className="bg-slate-50 dark:bg-gray-800/60 border-b border-slate-200 dark:border-gray-700/50">
+            <tr>
               {allColumns.map((col) => (
-                <th
-                  key={col.key}
-                  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 ?? ''}`}
-                >
+                <th key={col.key} className={col.className ?? ''}>
                   {col.header}
                 </th>
               ))}
             </tr>
           </thead>
-          <tbody className="divide-y divide-slate-100 dark:divide-gray-700/40">
+          <tbody>
             {loading ? (
               Array.from({ length: 6 }).map((_, i) => (
                 <SkeletonRow key={i} cols={allColumns.length} />
               ))
             ) : data.length === 0 ? (
               <tr>
-                <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">
+                <td colSpan={allColumns.length}>
+                  <div style={{ textAlign: 'center', padding: '48px 20px' }}>
+                    <div style={{
+                      width: 56, height: 56, borderRadius: 16, background: 'var(--surface-2)',
+                      display: 'grid', placeItems: 'center', margin: '0 auto 12px',
+                    }}>
+                      <svg style={{ width: 28, height: 28, color: 'var(--text-3)' }} 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>
+                    <p style={{ fontSize: 13.5, color: 'var(--text-3)', margin: '0 0 12px' }}>{emptyMessage}</p>
                     {emptyAction}
                   </div>
                 </td>
               </tr>
             ) : (
               data.map((row, rowIdx) => (
-                <tr
-                  key={rowIdx}
-                  className="hover:bg-slate-50/80 dark:hover:bg-gray-800/40 transition-colors"
-                >
+                <tr key={rowIdx}>
                   {columns.map((col) => (
-                    <td
-                      key={col.key}
-                      className="px-4 py-3.5 text-slate-700 dark:text-slate-300 whitespace-nowrap"
-                    >
+                    <td key={col.key} className={col.className ?? ''}>
                       {col.render
                         ? col.render(row)
                         : ((row as Record<string, unknown>)[col.key] as React.ReactNode) ?? '—'}
                     </td>
                   ))}
                   {actions && (
-                    <td className="px-4 py-3.5 whitespace-nowrap">
-                      <div className="flex items-center gap-1">{actions(row)}</div>
+                    <td>
+                      <div className="row-actions">
+                        {actions(row)}
+                      </div>
                     </td>
                   )}
                 </tr>
diff --git a/assets/admin/components/ui/Modal.tsx b/assets/admin/components/ui/Modal.tsx
index 3618bcbf..3bfab6f1 100644
--- a/assets/admin/components/ui/Modal.tsx
+++ b/assets/admin/components/ui/Modal.tsx
@@ -4,10 +4,10 @@ import { XMarkIcon } from '@heroicons/react/24/outline';
 type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
 
 const sizeMap: Record<ModalSize, string> = {
-  sm: 'max-w-sm',
-  md: 'max-w-lg',
-  lg: 'max-w-2xl',
-  xl: 'max-w-4xl',
+  sm: '420px',
+  md: '540px',
+  lg: '720px',
+  xl: '960px',
 };
 
 interface Props {
@@ -30,43 +30,20 @@ export default function Modal({ open, title, size = 'md', onClose, children, foo
   if (!open) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-fade-in">
-      {/* Backdrop */}
+    <div className="overlay" onClick={onClose}>
       <div
-        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
-        `}
+        className="modal"
+        style={{ maxWidth: sizeMap[size] }}
+        onClick={(e) => e.stopPropagation()}
       >
-        {/* 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="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" />
+        <div className="modal-head">
+          <h2>{title}</h2>
+          <button className="mini-btn" onClick={onClose}>
+            <XMarkIcon style={{ width: 18, height: 18 }} />
           </button>
         </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-slate-100 dark:border-gray-700/50 shrink-0 bg-slate-50/50 dark:bg-gray-800/30 rounded-b-2xl">
-            {footer}
-          </div>
-        )}
+        <div className="modal-body">{children}</div>
+        {footer && <div className="modal-foot">{footer}</div>}
       </div>
     </div>
   );
diff --git a/assets/admin/components/ui/PageHeader.tsx b/assets/admin/components/ui/PageHeader.tsx
index 2e8f6bf5..fee2539a 100644
--- a/assets/admin/components/ui/PageHeader.tsx
+++ b/assets/admin/components/ui/PageHeader.tsx
@@ -16,30 +16,33 @@ interface Props {
 
 export default function PageHeader({ title, breadcrumbs, action, description }: Props) {
   return (
-    <div className="flex items-start justify-between mb-6 gap-4">
-      <div className="min-w-0">
+    <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16, marginBottom: 24 }}>
+      <div style={{ minWidth: 0 }}>
         {breadcrumbs && breadcrumbs.length > 0 && (
-          <nav className="flex items-center gap-0.5 mb-1.5 text-xs text-slate-500 dark:text-slate-400">
+          <nav style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 6, fontSize: 12, color: 'var(--text-3)' }}>
             {breadcrumbs.map((crumb, i) => (
               <React.Fragment key={i}>
-                {i > 0 && <ChevronLeftIcon className="w-3 h-3 text-slate-300 dark:text-slate-600 mx-0.5 shrink-0" />}
+                {i > 0 && <ChevronLeftIcon style={{ width: 12, height: 12 }} />}
                 {crumb.to ? (
-                  <Link to={crumb.to} className="hover:text-primary-600 dark:hover:text-primary-400 transition-colors truncate">
+                  <Link to={crumb.to} style={{ color: 'var(--text-3)', textDecoration: 'none' }}
+                    onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--primary)')}
+                    onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--text-3)')}
+                  >
                     {crumb.label}
                   </Link>
                 ) : (
-                  <span className="text-slate-700 dark:text-slate-300 font-medium truncate">{crumb.label}</span>
+                  <span style={{ color: 'var(--text)', fontWeight: 600 }}>{crumb.label}</span>
                 )}
               </React.Fragment>
             ))}
           </nav>
         )}
-        <h1 className="text-xl font-bold text-slate-900 dark:text-slate-50 leading-tight">{title}</h1>
+        <h1 className="section-title">{title}</h1>
         {description && (
-          <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">{description}</p>
+          <p style={{ fontSize: 13, color: 'var(--text-3)', marginTop: 4 }}>{description}</p>
         )}
       </div>
-      {action && <div className="shrink-0">{action}</div>}
+      {action && <div style={{ flexShrink: 0 }}>{action}</div>}
     </div>
   );
 }
diff --git a/assets/admin/components/ui/Pagination.tsx b/assets/admin/components/ui/Pagination.tsx
index 34e8dde9..936b091f 100644
--- a/assets/admin/components/ui/Pagination.tsx
+++ b/assets/admin/components/ui/Pagination.tsx
@@ -14,7 +14,7 @@ export default function Pagination({ page, total, limit, onPageChange }: Props)
   if (totalPages <= 1) return null;
 
   const from = (page - 1) * limit + 1;
-  const to = Math.min(page * limit, total);
+  const to   = Math.min(page * limit, total);
 
   const pages: (number | '...')[] = [];
   if (totalPages <= 7) {
@@ -28,32 +28,29 @@ export default function Pagination({ page, total, limit, onPageChange }: Props)
   }
 
   return (
-    <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">
+    <div className="pagination">
+      <span style={{ fontSize: 12.5, color: 'var(--text-3)' }}>
         نمایش {formatNumber(from)}–{formatNumber(to)} از {formatNumber(total)} مورد
       </span>
 
-      <div className="flex items-center gap-1">
+      <div className="page-btns">
         <button
           onClick={() => onPageChange(page - 1)}
           disabled={page === 1}
-          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" />
+          <ChevronRightIcon style={{ width: 16, height: 16 }} />
         </button>
 
         {pages.map((p, i) =>
           p === '...' ? (
-            <span key={`dots-${i}`} className="w-8 text-center text-slate-400 dark:text-slate-500 text-xs">…</span>
+            <span key={`d-${i}`} style={{ minWidth: 36, height: 36, display: 'grid', placeItems: 'center', fontSize: 13, color: 'var(--text-3)' }}>
+              …
+            </span>
           ) : (
             <button
               key={p}
               onClick={() => onPageChange(p as number)}
-              className={`w-8 h-8 rounded-lg text-sm font-medium transition-colors ${
-                p === page
-                  ? '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'
-              }`}
+              className={p === page ? 'on' : ''}
             >
               {formatNumber(p as number)}
             </button>
@@ -63,9 +60,8 @@ export default function Pagination({ page, total, limit, onPageChange }: Props)
         <button
           onClick={() => onPageChange(page + 1)}
           disabled={page === totalPages}
-          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" />
+          <ChevronLeftIcon style={{ width: 16, height: 16 }} />
         </button>
       </div>
     </div>
diff --git a/assets/admin/components/ui/StatusBadge.tsx b/assets/admin/components/ui/StatusBadge.tsx
index bc7cd08b..7580e632 100644
--- a/assets/admin/components/ui/StatusBadge.tsx
+++ b/assets/admin/components/ui/StatusBadge.tsx
@@ -1,63 +1,41 @@
 import React from 'react';
 import type { AppointmentStatus, PaymentStatus, SmsTemplateStatus, SettlementStatus } from '../../types';
 
-const variants: Record<string, string> = {
-  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',
-};
+type BadgeColor = 'green' | 'amber' | 'red' | 'blue' | 'violet' | 'gray';
 
-const dots: Record<string, string> = {
-  yellow: 'bg-yellow-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-slate-400',
-  rose:   'bg-rose-500',
-};
-
-const appointmentMap: Record<AppointmentStatus, { color: string; label: string }> = {
-  waiting_for_payment: { color: 'yellow', label: 'انتظار پرداخت' },
+const appointmentMap: Record<AppointmentStatus, { color: BadgeColor; label: string }> = {
+  waiting_for_payment: { color: 'amber',  label: 'انتظار پرداخت' },
   reserved:            { color: 'blue',   label: 'رزرو شده' },
-  checked_in:          { color: 'purple', label: 'ورود به مطب' },
-  waiting:             { color: 'orange', label: 'صف انتظار' },
-  in_progress:         { color: 'indigo', label: 'در حال ویزیت' },
+  checked_in:          { color: 'violet', label: 'ورود به مطب' },
+  waiting:             { color: 'amber',  label: 'صف انتظار' },
+  in_progress:         { color: 'blue',   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: 'غیبت' },
+  no_show:             { color: 'gray',   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: 'استرداد' },
+const paymentMap: Record<PaymentStatus, { color: BadgeColor; label: string }> = {
+  pending:  { color: 'amber', 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: 'رد شده' },
+const smsMap: Record<SmsTemplateStatus, { color: BadgeColor; label: string }> = {
+  draft:    { color: 'gray',  label: 'پیش‌نویس' },
+  pending:  { color: 'amber', 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: 'رد شده' },
+const settlementMap: Record<SettlementStatus, { color: BadgeColor; label: string }> = {
+  pending:  { color: 'amber', label: 'در انتظار' },
+  approved: { color: 'green', label: 'تأیید شده' },
+  rejected: { color: 'red',   label: 'رد شده' },
 };
 
 interface Props {
@@ -66,7 +44,7 @@ interface Props {
 }
 
 export default function StatusBadge({ type, value }: Props) {
-  let color = 'gray';
+  let color: BadgeColor = 'gray';
   let label = value;
 
   if (type === 'appointment') {
@@ -87,8 +65,8 @@ 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 shrink-0 ${dots[color] ?? dots.gray}`} />
+    <span className={`badge ${color}`}>
+      <span className="bdot" />
       {label}
     </span>
   );
diff --git a/assets/admin/pages/AppointmentDetailPage.tsx b/assets/admin/pages/AppointmentDetailPage.tsx
index 19d04e33..6064921f 100644
--- a/assets/admin/pages/AppointmentDetailPage.tsx
+++ b/assets/admin/pages/AppointmentDetailPage.tsx
@@ -128,7 +128,7 @@ export default function AppointmentDetailPage() {
                 <button
                   onClick={() => newStatus && statusMutation.mutate(newStatus)}
                   disabled={!newStatus || statusMutation.isPending}
-                  className="cp-btn-primary"
+                  className="btn primary sm"
                 >
                   اعمال
                 </button>
diff --git a/assets/admin/pages/AppointmentsPage.tsx b/assets/admin/pages/AppointmentsPage.tsx
index 069dcba0..4b4dd8f6 100644
--- a/assets/admin/pages/AppointmentsPage.tsx
+++ b/assets/admin/pages/AppointmentsPage.tsx
@@ -1,27 +1,24 @@
 import React, { useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
-import { EyeIcon } from '@heroicons/react/24/outline';
+import {
+  MagnifyingGlassIcon, EyeIcon,
+  CalendarIcon, ClockIcon, CheckCircleIcon, XCircleIcon,
+} from '@heroicons/react/24/outline';
 import { api } from '../lib/api';
 import type { PaginatedResponse } from '../lib/api';
-import type { Appointment, AppointmentStatus } from '../types';
+import type { Appointment } from '../types';
 import { formatDate, formatRial, maskMobile } from '../lib/utils';
-import PageHeader from '../components/ui/PageHeader';
 import DataTable, { Column } from '../components/ui/DataTable';
 import StatusBadge from '../components/ui/StatusBadge';
 import Pagination from '../components/ui/Pagination';
 
-const STATUS_FILTERS: { value: string; label: string }[] = [
+const STATUS_FILTERS = [
   { value: '', label: 'همه' },
   { value: 'waiting_for_payment', label: 'در انتظار پرداخت' },
   { value: 'reserved', label: 'رزرو شده' },
-  { value: 'checked_in', label: 'ورود به مطب' },
-  { value: 'waiting', label: 'در صف انتظار' },
-  { value: 'in_progress', label: 'در حال ویزیت' },
   { value: 'visited', label: 'ویزیت شده' },
-  { value: 'completed', label: 'تکمیل شده' },
-  { value: 'cancelled_by_user', label: 'لغو توسط بیمار' },
-  { value: 'no_show', label: 'غیبت' },
+  { value: 'cancelled_by_user', label: 'لغو شده' },
 ];
 
 export default function AppointmentsPage() {
@@ -46,21 +43,28 @@ export default function AppointmentsPage() {
       key: 'patient',
       header: 'بیمار',
       render: (a) => (
-        <div>
-          <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 className="cell-user">
+          <div className="avatar sm" style={{
+            background: `linear-gradient(145deg, oklch(0.62 0.15 222), oklch(0.48 0.16 222))`,
+          }}>
+            {(a.patient_name ?? '؟').slice(0, 2)}
+          </div>
+          <div>
+            <b>{a.patient_name || '—'}</b>
+            <br /><small dir="ltr">{maskMobile(a.patient_mobile)}</small>
+          </div>
         </div>
       ),
     },
     { key: 'doctor_name', header: 'پزشک', render: (a) => `دکتر ${a.doctor_name}` },
-    { key: 'clinic_name', header: 'کلینیک', render: (a) => a.clinic_name ?? '—' },
+    { key: 'clinic_name', header: 'کلینیک', render: (a) => <span className="muted">{a.clinic_name ?? '—'}</span> },
     {
       key: 'appointment_date',
       header: 'تاریخ نوبت',
       render: (a) => (
         <div>
-          <p>{formatDate(a.appointment_date)}</p>
-          <p className="text-xs text-gray-400">{a.appointment_time}</p>
+          <span>{formatDate(a.appointment_date)}</span>
+          <br /><small className="muted">{a.appointment_time}</small>
         </div>
       ),
     },
@@ -72,53 +76,90 @@ export default function AppointmentsPage() {
     {
       key: 'amount',
       header: 'مبلغ',
-      render: (a) => <span className="text-sm">{formatRial(a.amount)}</span>,
+      render: (a) => <><b>{formatRial(a.amount)}</b> <span className="muted" style={{ fontSize: 11 }}>تومان</span></>,
     },
-    { key: 'created_at', header: 'تاریخ ثبت', render: (a) => formatDate(a.created_at) },
+    { key: 'created_at', header: 'تاریخ ثبت', render: (a) => <span className="muted">{formatDate(a.created_at)}</span> },
   ];
 
   const items = data?.data ?? [];
   const total = data?.meta?.totalRecords ?? 0;
 
-  return (
-    <div>
-      <PageHeader
-        title="نوبت‌ها"
-        breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'نوبت‌ها' }]}
-      />
+  const statCards = [
+    { label: 'کل نوبت‌ها',  value: total > 0 ? String(total) : null, bg: 'var(--info-bg)',    color: 'var(--info)',    Icon: CalendarIcon },
+    { label: 'در انتظار',    value: null,                              bg: 'var(--warning-bg)', color: 'var(--warning)', Icon: ClockIcon },
+    { label: 'ویزیت شده',    value: null,                              bg: 'var(--success-bg)', color: 'var(--success)', Icon: CheckCircleIcon },
+    { label: 'لغو شده',      value: null,                              bg: 'var(--danger-bg)',  color: 'var(--danger)',  Icon: XCircleIcon },
+  ];
 
-      <div className="cp-card p-6">
-        <div className="flex items-center gap-3 mb-4 overflow-x-auto pb-1 flex-nowrap sm: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-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>
-          ))}
+  return (
+    <div className="fade-in">
+      {/* Header */}
+      <div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
+        <div>
+          <h1 className="section-title">نوبت‌ها</h1>
+          <div className="muted" style={{ fontSize: 13, marginTop: 3 }}>مدیریت و پیگیری نوبت‌های درمانی</div>
+        </div>
+        <button className="btn primary sm">
+          <CalendarIcon style={{ width: 15, height: 15 }} />
+          ثبت نوبت جدید
+        </button>
+      </div>
+
+      {/* Stat cards */}
+      <div className="stat-grid" style={{ gridTemplateColumns: 'repeat(4,1fr)' }}>
+        {statCards.map((c) => (
+          <div key={c.label} className="stat">
+            <div className="ico" style={{ background: c.bg, color: c.color }}>
+              <c.Icon style={{ width: 20, height: 20 }} />
+            </div>
+            <div className="lbl">{c.label}</div>
+            <div className="val">
+              {isLoading
+                ? <span className="skeleton" style={{ display: 'inline-block', width: 48, height: 26, borderRadius: 4 }} />
+                : c.value ?? '—'}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Main card */}
+      <div className="card">
+        <div className="card-pad" style={{ paddingBottom: 0 }}>
+          <div className="toolbar">
+            <div className="field" style={{ minWidth: 240 }}>
+              <MagnifyingGlassIcon style={{ width: 17, height: 17 }} />
+              <input
+                placeholder="جستجو بر اساس موبایل یا نام..."
+                value={search}
+                onChange={(e) => { setSearch(e.target.value); setPage(1); }}
+              />
+            </div>
+            <div className="seg">
+              {STATUS_FILTERS.map((f) => (
+                <button
+                  key={f.value}
+                  className={statusFilter === f.value ? 'on' : ''}
+                  onClick={() => { setStatusFilter(f.value); setPage(1); }}
+                >
+                  {f.label}
+                </button>
+              ))}
+            </div>
+          </div>
         </div>
 
         <DataTable<Appointment>
           columns={columns}
           data={items}
           loading={isLoading}
-          searchValue={search}
-          onSearchChange={(v) => { setSearch(v); setPage(1); }}
-          searchPlaceholder="جستجو بر اساس موبایل یا نام پزشک..."
           emptyMessage="هیچ نوبتی یافت نشد"
           actions={(appt) => (
             <button
+              className="mini-btn"
               onClick={() => navigate(`/admin/appointments/${appt.uuid}`)}
-              className="cp-action-view"
               title="مشاهده"
             >
-              <EyeIcon className="w-4 h-4" />
+              <EyeIcon style={{ width: 16, height: 16 }} />
             </button>
           )}
         />
diff --git a/assets/admin/pages/BlogFormPage.tsx b/assets/admin/pages/BlogFormPage.tsx
index e82ef3af..2b5cc621 100644
--- a/assets/admin/pages/BlogFormPage.tsx
+++ b/assets/admin/pages/BlogFormPage.tsx
@@ -107,29 +107,29 @@ export default function BlogFormPage() {
           <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
             <div className="lg:col-span-2 space-y-5">
               <div>
-                <label className="cp-label">عنوان مقاله *</label>
+                <label className="">عنوان مقاله *</label>
                 <input {...register('title')} placeholder="عنوان جذاب بنویسید..."
                   className="cp-input h-11" />
                 {errors.title && <p className="text-red-500 text-xs mt-1">{errors.title.message}</p>}
               </div>
 
               <div>
-                <label className="cp-label">خلاصه</label>
+                <label className="">خلاصه</label>
                 <textarea {...register('summary')} rows={2} placeholder="خلاصه کوتاه مقاله..."
-                  className="cp-textarea resize-none" />
+                  className="input resize-none" />
               </div>
 
               <div>
-                <label className="cp-label">محتوا *</label>
+                <label className="">محتوا *</label>
                 <textarea {...register('content')} rows={16} placeholder="محتوای مقاله را بنویسید..."
-                  className="cp-textarea resize-none font-mono" />
+                  className="input 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="cp-label">وضعیت انتشار</label>
+                <label className="">وضعیت انتشار</label>
                 <Controller
                   control={control}
                   name="status"
@@ -144,7 +144,7 @@ export default function BlogFormPage() {
               </div>
 
               <div>
-                <label className="cp-label">تگ‌ها (با ویرگول جدا کنید)</label>
+                <label className="">تگ‌ها (با ویرگول جدا کنید)</label>
                 <input {...register('tags')} dir="ltr" placeholder="tag1, tag2, tag3"
                   className="cp-input h-11" />
               </div>
diff --git a/assets/admin/pages/BlogsPage.tsx b/assets/admin/pages/BlogsPage.tsx
index 2251598c..b7d336ef 100644
--- a/assets/admin/pages/BlogsPage.tsx
+++ b/assets/admin/pages/BlogsPage.tsx
@@ -1,13 +1,12 @@
 import React, { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
-import { EyeIcon, PencilIcon, TrashIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { EyeIcon, PencilIcon, TrashIcon, PlusIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { toast } from 'sonner';
 import { api } from '../lib/api';
 import type { ApiResponse, PaginatedResponse } from '../lib/api';
 import type { Blog } from '../types';
 import { formatDate, formatNumber } from '../lib/utils';
-import PageHeader from '../components/ui/PageHeader';
 import DataTable, { Column } from '../components/ui/DataTable';
 import Pagination from '../components/ui/Pagination';
 import ConfirmDialog from '../components/ui/ConfirmDialog';
@@ -52,13 +51,15 @@ export default function BlogsPage() {
       key: 'title',
       header: 'عنوان',
       render: (b) => (
-        <div className="flex items-center gap-3">
+        <div className="cell-user">
           {b.cover_image ? (
-            <img src={b.cover_image} alt="" className="w-10 h-7 rounded object-cover shrink-0" />
+            <img src={b.cover_image} alt="" style={{ width: 40, height: 28, borderRadius: 6, objectFit: 'cover', flexShrink: 0 }} />
           ) : (
-            <div className="w-10 h-7 rounded bg-slate-100 dark:bg-slate-700 shrink-0" />
+            <div style={{ width: 40, height: 28, borderRadius: 6, background: 'var(--surface-3)', flexShrink: 0 }} />
           )}
-          <span className="font-medium text-gray-900 line-clamp-1">{b.title}</span>
+          <div>
+            <b style={{ display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 220 }}>{b.title}</b>
+          </div>
         </div>
       ),
     },
@@ -67,11 +68,8 @@ export default function BlogsPage() {
       key: 'status',
       header: 'وضعیت',
       render: (b) => (
-        <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${
-          b.status === 'published'
-            ? 'bg-green-100 text-green-700'
-            : 'bg-gray-100 text-gray-600'
-        }`}>
+        <span className={`badge ${b.status === 'published' ? 'green' : 'gray'}`}>
+          <span className="bdot" />
           {b.status === 'published' ? 'منتشرشده' : 'پیش‌نویس'}
         </span>
       ),
@@ -80,70 +78,76 @@ export default function BlogsPage() {
       key: 'tags',
       header: 'تگ‌ها',
       render: (b) => (
-        <div className="flex flex-wrap gap-1">
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
           {b.tags?.slice(0, 3).map((tag, i) => (
-            <span key={i} className="text-xs bg-blue-50 text-blue-600 px-2 py-0.5 rounded-full">{tag}</span>
+            <span key={i} className="chip">{tag}</span>
           ))}
         </div>
       ),
     },
     { key: 'views_count', header: 'بازدید', render: (b) => formatNumber(b.views_count) },
     { key: 'published_at', header: 'انتشار', render: (b) => formatDate(b.published_at) },
-    { key: 'created_at', header: 'تاریخ ثبت', render: (b) => formatDate(b.created_at) },
   ];
 
   const items = data?.data ?? [];
   const total = data?.meta?.totalRecords ?? 0;
 
   return (
-    <div>
-      <PageHeader
-        title="بلاگ"
-        breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'بلاگ' }]}
-        action={
-          <button onClick={() => navigate('/admin/blogs/new')}
-            className="cp-btn-primary">
-            <PlusIcon className="w-4 h-4" />
-            نوشتن مقاله
-          </button>
-        }
-      />
-
-      <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-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>
-          ))}
+    <div className="fade-in">
+      <div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
+        <div>
+          <h1 className="section-title">بلاگ</h1>
+          <div className="muted">{total} مقاله</div>
         </div>
+        <button onClick={() => navigate('/admin/blogs/new')} className="btn primary sm">
+          <PlusIcon style={{ width: 16, height: 16 }} />
+          نوشتن مقاله
+        </button>
+      </div>
 
+      <div className="card">
+        <div className="card-pad" style={{ paddingBottom: 0 }}>
+          <div className="toolbar">
+            <div className="field" style={{ minWidth: 240 }}>
+              <MagnifyingGlassIcon style={{ width: 17, height: 17 }} />
+              <input
+                value={search}
+                onChange={(e) => { setSearch(e.target.value); setPage(1); }}
+                placeholder="جستجو بر اساس عنوان..."
+              />
+            </div>
+            <div className="seg">
+              {STATUS_FILTERS.map((f) => (
+                <button
+                  key={f.value}
+                  className={statusFilter === f.value ? 'on' : ''}
+                  onClick={() => { setStatusFilter(f.value); setPage(1); }}
+                >
+                  {f.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
         <DataTable<Blog>
           columns={columns}
           data={items}
           loading={isLoading}
-          searchValue={search}
-          onSearchChange={(v) => { setSearch(v); setPage(1); }}
-          searchPlaceholder="جستجو بر اساس عنوان..."
           emptyMessage="هیچ مقاله‌ای یافت نشد"
           emptyAction={
-            <button onClick={() => navigate('/admin/blogs/new')}
-              className="px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 transition-colors">
+            <button onClick={() => navigate('/admin/blogs/new')} className="btn primary sm">
               نوشتن اولین مقاله
             </button>
           }
           actions={(blog) => (
             <>
               <button onClick={() => navigate(`/admin/blogs/${blog.uuid}/edit`)}
-                className="cp-action-edit" title="ویرایش">
-                <PencilIcon className="w-4 h-4" />
+                className="mini-btn" title="ویرایش">
+                <PencilIcon style={{ width: 15, height: 15 }} />
               </button>
               <button onClick={() => setDeleteTarget(blog)}
-                className="cp-action-delete" title="حذف">
-                <TrashIcon className="w-4 h-4" />
+                className="mini-btn danger" title="حذف">
+                <TrashIcon style={{ width: 15, height: 15 }} />
               </button>
             </>
           )}
diff --git a/assets/admin/pages/CategoriesPage.tsx b/assets/admin/pages/CategoriesPage.tsx
index 0c2b3abb..9d31b5fd 100644
--- a/assets/admin/pages/CategoriesPage.tsx
+++ b/assets/admin/pages/CategoriesPage.tsx
@@ -3,7 +3,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import {
   TrashIcon, PlusIcon, PencilIcon, TagIcon, MapPinIcon,
   BuildingOffice2Icon, HeartIcon, ShieldCheckIcon, WrenchScrewdriverIcon,
-  CheckCircleIcon, XCircleIcon, PhotoIcon, XMarkIcon,
+  PhotoIcon, XMarkIcon,
 } from '@heroicons/react/24/outline';
 import { useForm, Controller } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -13,77 +13,33 @@ import { api } from '../lib/api';
 import type { PaginatedResponse } from '../lib/api';
 import type { Province, City, SpecialtyFull, DoctorService, Insurance, Tag, Representation } from '../types';
 import { useAuthStore } from '../stores/authStore';
-import PageHeader from '../components/ui/PageHeader';
 import DataTable, { Column } from '../components/ui/DataTable';
 import ConfirmDialog from '../components/ui/ConfirmDialog';
 import Modal from '../components/ui/Modal';
 import Pagination from '../components/ui/Pagination';
 import SearchableSelect from '../components/ui/SearchableSelect';
 
-// ── Tab types ────────────────────────────────────────────────────────────────
-
 type TabKey = 'provinces' | 'cities' | 'specialties' | 'doctor_services' | 'insurances' | 'tags';
 
 interface TabConfig {
   key: TabKey;
   label: string;
   icon: React.ElementType;
-  color: string;
-  description: string;
+  hue: number;
 }
 
 const TABS: TabConfig[] = [
-  {
-    key: 'provinces',
-    label: 'استان‌ها',
-    icon: MapPinIcon,
-    color: 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-400/10',
-    description: 'مدیریت استان‌ها',
-  },
-  {
-    key: 'cities',
-    label: 'شهرها',
-    icon: BuildingOffice2Icon,
-    color: 'text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-400/10',
-    description: 'مدیریت شهرها و اطلاعات تفصیلی هر شهر',
-  },
-  {
-    key: 'specialties',
-    label: 'تخصص‌ها',
-    icon: HeartIcon,
-    color: 'text-rose-600 dark:text-rose-400 bg-rose-50 dark:bg-rose-400/10',
-    description: 'تخصص‌های پزشکی',
-  },
-  {
-    key: 'doctor_services',
-    label: 'خدمات پزشک',
-    icon: WrenchScrewdriverIcon,
-    color: 'text-orange-600 dark:text-orange-400 bg-orange-50 dark:bg-orange-400/10',
-    description: 'خدمات قابل ارائه توسط پزشکان',
-  },
-  {
-    key: 'insurances',
-    label: 'بیمه‌ها',
-    icon: ShieldCheckIcon,
-    color: 'text-teal-600 dark:text-teal-400 bg-teal-50 dark:bg-teal-400/10',
-    description: 'بیمه‌های پایه و تکمیلی',
-  },
-  {
-    key: 'tags',
-    label: 'تگ‌ها',
-    icon: TagIcon,
-    color: 'text-violet-600 dark:text-violet-400 bg-violet-50 dark:bg-violet-400/10',
-    description: 'تگ‌های مورد استفاده در مطالب بلاگ',
-  },
+  { key: 'provinces',       label: 'استان‌ها',       icon: MapPinIcon,            hue: 256 },
+  { key: 'cities',          label: 'شهرها',          icon: BuildingOffice2Icon,   hue: 205 },
+  { key: 'specialties',     label: 'تخصص‌ها',        icon: HeartIcon,             hue: 295 },
+  { key: 'doctor_services', label: 'خدمات پزشک',     icon: WrenchScrewdriverIcon, hue: 162 },
+  { key: 'insurances',      label: 'بیمه‌ها',        icon: ShieldCheckIcon,       hue: 205 },
+  { key: 'tags',            label: 'تگ‌ها',          icon: TagIcon,               hue: 272 },
 ];
 
-// ── Logo uploader ─────────────────────────────────────────────────────────────
+// ── Logo uploader ──────────────────────────────────────────────────────────────
 
-function LogoUploadField({
-  value,
-  onChange,
-  uploadUrl,
-}: {
+function LogoUploadField({ value, onChange, uploadUrl }: {
   value: string | null;
   onChange: (url: string | null) => void;
   uploadUrl: string;
@@ -121,60 +77,57 @@ function LogoUploadField({
   };
 
   return (
-    <div className="flex items-center gap-3">
+    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
       {value ? (
-        <div className="relative group">
-          <img src={value} alt="logo" className="w-16 h-16 object-contain rounded-xl border border-slate-200 dark:border-gray-600 bg-white dark:bg-gray-800 p-1" />
-          <button
-            type="button"
-            onClick={() => onChange(null)}
-            className="absolute -top-1.5 -right-1.5 w-5 h-5 bg-red-500 hover:bg-red-600 rounded-full text-white flex items-center justify-center shadow transition-colors"
-          >
-            <XMarkIcon className="w-3 h-3" />
+        <div style={{ position: 'relative' }}>
+          <img src={value} alt="logo" style={{ width: 64, height: 64, objectFit: 'contain', borderRadius: 12, border: '1px solid var(--border)', background: 'var(--surface)', padding: 4 }} />
+          <button type="button" onClick={() => onChange(null)} style={{
+            position: 'absolute', top: -6, right: -6, width: 20, height: 20, borderRadius: 10,
+            background: 'var(--danger)', color: '#fff', border: 'none', cursor: 'pointer',
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+          }}>
+            <XMarkIcon style={{ width: 12, height: 12 }} />
           </button>
         </div>
       ) : (
-        <div className="w-16 h-16 rounded-xl border-2 border-dashed border-slate-300 dark:border-gray-600 flex items-center justify-center bg-slate-50 dark:bg-gray-800">
-          <PhotoIcon className="w-6 h-6 text-slate-300 dark:text-gray-600" />
+        <div style={{ width: 64, height: 64, borderRadius: 12, border: '2px dashed var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--surface-2)' }}>
+          <PhotoIcon style={{ width: 24, height: 24, color: 'var(--text-3)' }} />
         </div>
       )}
-      <label className={`cursor-pointer cp-btn-secondary text-sm ${uploading ? 'opacity-60 pointer-events-none' : ''}`}>
-        {uploading ? (
-          <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>
-        ) : (
-          <span className="flex items-center gap-2">
-            <PhotoIcon className="w-4 h-4" />
-            {value ? 'تغییر لگو' : 'انتخاب لگو'}
-          </span>
-        )}
-        <input type="file" accept="image/jpeg,image/png,image/webp" className="hidden" onChange={handleFile} disabled={uploading} />
+      <label className={`btn ghost sm ${uploading ? 'disabled' : ''}`} style={{ cursor: uploading ? 'not-allowed' : 'pointer' }}>
+        <PhotoIcon style={{ width: 15, height: 15 }} />
+        {uploading ? 'در حال آپلود...' : (value ? 'تغییر لگو' : 'انتخاب لگو')}
+        <input type="file" accept="image/jpeg,image/png,image/webp" style={{ display: 'none' }} onChange={handleFile} disabled={uploading} />
       </label>
-      <p className="text-xs text-slate-400 dark:text-slate-500">JPG، PNG یا WebP</p>
+      <span className="muted" style={{ fontSize: 11 }}>JPG، PNG یا WebP</span>
     </div>
   );
 }
 
-// ── StatusBadge helper ────────────────────────────────────────────────────────
+// ── Status badge ───────────────────────────────────────────────────────────────
 
-function StatusBadge({ status }: { status: number }) {
-  return status === 1 ? (
-    <span className="inline-flex items-center gap-1 text-xs font-medium text-green-700 dark:text-green-400 bg-green-50 dark:bg-green-400/10 px-2 py-0.5 rounded-full">
-      <CheckCircleIcon className="w-3 h-3" /> فعال
-    </span>
-  ) : (
-    <span className="inline-flex items-center gap-1 text-xs font-medium text-slate-500 dark:text-slate-400 bg-slate-100 dark:bg-slate-400/10 px-2 py-0.5 rounded-full">
-      <XCircleIcon className="w-3 h-3" /> غیرفعال
+function SBadge({ status }: { status: number }) {
+  return (
+    <span className={`badge ${status === 1 ? 'green' : 'gray'}`}>
+      <span className="bdot" />
+      {status === 1 ? 'فعال' : 'غیرفعال'}
     </span>
   );
 }
 
-// ── Provinces Tab ─────────────────────────────────────────────────────────────
+// ── Tab sub-component wrapper ──────────────────────────────────────────────────
+
+function TabActions({ label, onClick }: { label: string; onClick: () => void }) {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'flex-end', padding: 'var(--card-pad)' }}>
+      <button onClick={onClick} className="btn primary sm">
+        <PlusIcon style={{ width: 15, height: 15 }} /> {label}
+      </button>
+    </div>
+  );
+}
+
+// ── Provinces Tab ──────────────────────────────────────────────────────────────
 
 const provinceSchema = z.object({
   name:   z.string().min(1, 'نام الزامی است'),
@@ -230,56 +183,44 @@ function ProvincesTab() {
   };
 
   const columns: Column<Province>[] = [
-    { key: 'id', header: 'شناسه', className: 'w-16', render: (p) => <span className="text-xs text-slate-400 font-mono">{p.id}</span> },
-    { key: 'name', header: 'نام', render: (p) => <span className="font-medium text-slate-800 dark:text-slate-100">{p.name}</span> },
-    { key: 'weight', header: 'ترتیب', className: 'w-20', render: (p) => <span className="text-xs text-slate-400">{p.weight}</span> },
-    { key: 'status', header: 'وضعیت', className: 'w-24', render: (p) => <StatusBadge status={p.status} /> },
+    { key: 'id',     header: 'شناسه',   render: (p) => <span className="muted" style={{ fontFamily: 'monospace', fontSize: 12 }}>{p.id}</span> },
+    { key: 'name',   header: 'نام',     render: (p) => <b>{p.name}</b> },
+    { key: 'weight', header: 'ترتیب',   render: (p) => <span className="muted">{p.weight}</span> },
+    { key: 'status', header: 'وضعیت',   render: (p) => <SBadge status={p.status} /> },
   ];
 
-  const formBody = (
-    <div className="space-y-4">
-      <div>
-        <label className="cp-label">نام <span className="text-red-500">*</span></label>
-        <input {...register('name')} className="cp-input h-11" placeholder="نام استان" />
-        {errors.name && <p className="text-red-500 text-xs mt-1">{errors.name.message}</p>}
-      </div>
-      <div>
-        <label className="cp-label">ترتیب نمایش</label>
-        <input {...register('weight')} type="number" dir="ltr" className="cp-input h-11 w-32" placeholder="0" />
-      </div>
-      <div>
-        <label className="cp-label">وضعیت</label>
-        <Controller name="status" control={control} render={({ field }) => (
-          <SearchableSelect options={[{ value: '1', label: 'فعال' }, { value: '0', label: 'غیرفعال' }]} value={field.value ?? '1'} onChange={(v) => field.onChange(v ?? '1')} isClearable={false} />
-        )} />
-      </div>
-    </div>
-  );
-
   return (
     <>
-      <div className="flex justify-end px-5 pt-4">
-        <button onClick={() => { reset({ status: '1', weight: '0' }); setAddOpen(true); }} className="cp-btn-primary">
-          <PlusIcon className="w-4 h-4" /> افزودن استان
-        </button>
-      </div>
-      <div className="p-5">
-        <DataTable<Province> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در استان‌ها..." emptyMessage="هیچ استانی یافت نشد"
-          actions={(p) => (
-            <>
-              <button onClick={() => openEdit(p)} className="cp-action-edit" title="ویرایش"><PencilIcon className="w-4 h-4" /></button>
-              <button onClick={() => setDeleteTarget(p)} className="cp-action-delete" title="حذف"><TrashIcon className="w-4 h-4" /></button>
-            </>
-          )}
-        />
-        {total > 20 && <div className="mt-4"><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}
-      </div>
+      <TabActions label="افزودن استان" onClick={() => { reset({ status: '1', weight: '0' }); setAddOpen(true); }} />
+      <DataTable<Province> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در استان‌ها..." emptyMessage="هیچ استانی یافت نشد"
+        actions={(p) => (
+          <>
+            <button onClick={() => openEdit(p)} className="mini-btn" title="ویرایش"><PencilIcon style={{ width: 14, height: 14 }} /></button>
+            <button onClick={() => setDeleteTarget(p)} className="mini-btn danger" title="حذف"><TrashIcon style={{ width: 14, height: 14 }} /></button>
+          </>
+        )}
+      />
+      {total > 20 && <div style={{ padding: 'var(--card-pad)' }}><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}
 
       <Modal open={addOpen || !!editTarget} title={editTarget ? `ویرایش — ${editTarget.name}` : 'افزودن استان'} size="sm" onClose={closeModal}
-        footer={<><button onClick={closeModal} className="cp-btn-secondary">لغو</button><button form="province-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="cp-btn-primary">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
+        footer={<><button onClick={closeModal} className="btn ghost sm">لغو</button><button form="province-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="btn primary sm">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
       >
         <form id="province-form" onSubmit={handleSubmit((d) => editTarget ? updateMutation.mutate({ id: editTarget.id, d }) : createMutation.mutate(d))}>
-          {formBody}
+          <div className="form-row">
+            <label>نام <span style={{ color: 'var(--danger)' }}>*</span></label>
+            <input {...register('name')} className="input" placeholder="نام استان" />
+            {errors.name && <p className="err-text">{errors.name.message}</p>}
+          </div>
+          <div className="form-row" style={{ marginTop: 12 }}>
+            <label>ترتیب نمایش</label>
+            <input {...register('weight')} type="number" dir="ltr" className="input" placeholder="0" style={{ maxWidth: 120 }} />
+          </div>
+          <div className="form-row" style={{ marginTop: 12 }}>
+            <label>وضعیت</label>
+            <Controller name="status" control={control} render={({ field }) => (
+              <SearchableSelect options={[{ value: '1', label: 'فعال' }, { value: '0', label: 'غیرفعال' }]} value={field.value ?? '1'} onChange={(v) => field.onChange(v ?? '1')} isClearable={false} />
+            )} />
+          </div>
         </form>
       </Modal>
 
@@ -289,7 +230,7 @@ function ProvincesTab() {
   );
 }
 
-// ── Cities Tab ────────────────────────────────────────────────────────────────
+// ── Cities Tab ─────────────────────────────────────────────────────────────────
 
 const citySchema = z.object({
   name:               z.string().min(1, 'نام الزامی است'),
@@ -399,92 +340,86 @@ function CitiesTab() {
   };
 
   const columns: Column<City>[] = [
-    { key: 'id', header: 'شناسه', className: 'w-16', render: (c) => <span className="text-xs text-slate-400 font-mono">{c.id}</span> },
-    { key: 'name', header: 'نام', render: (c) => <span className="font-medium text-slate-800 dark:text-slate-100">{c.name}</span> },
-    { key: 'province_id', header: 'استان', render: (c) => c.province_id ? <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">{provinceMap[c.province_id] ?? `#${c.province_id}`}</span> : <span className="text-slate-300">—</span> },
-    { key: 'representation_id', header: 'نماینده', render: (c) => c.representation_id ? <span className="text-xs text-slate-500 dark:text-slate-400">{representationMap[c.representation_id] ?? `#${c.representation_id}`}</span> : <span className="text-slate-300">—</span> },
-    { key: 'domain', header: 'دامنه', render: (c) => c.domain ? <span className="text-xs font-mono text-slate-500">{c.domain}</span> : <span className="text-slate-300">—</span> },
-    { key: 'weight', header: 'ترتیب', className: 'w-20', render: (c) => <span className="text-xs text-slate-400">{c.weight}</span> },
-    { key: 'status', header: 'وضعیت', className: 'w-24', render: (c) => <StatusBadge status={c.status} /> },
+    { key: 'id',      header: 'شناسه',   render: (c) => <span className="muted" style={{ fontFamily: 'monospace', fontSize: 12 }}>{c.id}</span> },
+    { key: 'name',    header: 'نام',     render: (c) => <b>{c.name}</b> },
+    { key: 'province_id', header: 'استان', render: (c) => c.province_id ? <span className="chip">{provinceMap[c.province_id] ?? `#${c.province_id}`}</span> : <span className="muted">—</span> },
+    { key: 'representation_id', header: 'نماینده', render: (c) => c.representation_id ? <span className="muted" style={{ fontSize: 12 }}>{representationMap[c.representation_id] ?? `#${c.representation_id}`}</span> : <span className="muted">—</span> },
+    { key: 'domain',  header: 'دامنه',   render: (c) => c.domain ? <span className="muted" style={{ fontFamily: 'monospace', fontSize: 12 }}>{c.domain}</span> : <span className="muted">—</span> },
+    { key: 'weight',  header: 'ترتیب',   render: (c) => <span className="muted">{c.weight}</span> },
+    { key: 'status',  header: 'وضعیت',   render: (c) => <SBadge status={c.status} /> },
   ];
 
   return (
     <>
-      <div className="flex justify-end px-5 pt-4">
-        <button onClick={() => { reset({ status: '1', weight: '0' }); setAddOpen(true); }} className="cp-btn-primary">
-          <PlusIcon className="w-4 h-4" /> افزودن شهر
-        </button>
-      </div>
-      <div className="p-5">
-        <DataTable<City> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در شهرها..." emptyMessage="هیچ شهری یافت نشد"
-          actions={(c) => (
-            <>
-              <button onClick={() => openEdit(c)} className="cp-action-edit" title="ویرایش"><PencilIcon className="w-4 h-4" /></button>
-              <button onClick={() => setDeleteTarget(c)} className="cp-action-delete" title="حذف"><TrashIcon className="w-4 h-4" /></button>
-            </>
-          )}
-        />
-        {total > 20 && <div className="mt-4"><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}
-      </div>
+      <TabActions label="افزودن شهر" onClick={() => { reset({ status: '1', weight: '0' }); setAddOpen(true); }} />
+      <DataTable<City> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در شهرها..." emptyMessage="هیچ شهری یافت نشد"
+        actions={(c) => (
+          <>
+            <button onClick={() => openEdit(c)} className="mini-btn" title="ویرایش"><PencilIcon style={{ width: 14, height: 14 }} /></button>
+            <button onClick={() => setDeleteTarget(c)} className="mini-btn danger" title="حذف"><TrashIcon style={{ width: 14, height: 14 }} /></button>
+          </>
+        )}
+      />
+      {total > 20 && <div style={{ padding: 'var(--card-pad)' }}><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}
 
       <Modal open={addOpen || !!editTarget} title={editTarget ? `ویرایش — ${editTarget.name}` : 'افزودن شهر'} size="lg" onClose={closeModal}
-        footer={<><button onClick={closeModal} className="cp-btn-secondary">لغو</button><button form="city-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="cp-btn-primary">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
+        footer={<><button onClick={closeModal} className="btn ghost sm">لغو</button><button form="city-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="btn primary sm">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
       >
         <form id="city-form" onSubmit={handleSubmit((d) => editTarget ? updateMutation.mutate({ id: editTarget.id, d }) : createMutation.mutate(d))}>
-          <div className="space-y-4">
-            <div>
-              <label className="cp-label">نام <span className="text-red-500">*</span></label>
-              <input {...register('name')} className="cp-input h-11" placeholder="نام شهر" />
-              {errors.name && <p className="text-red-500 text-xs mt-1">{errors.name.message}</p>}
-            </div>
-            <div>
-              <label className="cp-label">استان</label>
+          <div className="form-row">
+            <label>نام <span style={{ color: 'var(--danger)' }}>*</span></label>
+            <input {...register('name')} className="input" placeholder="نام شهر" />
+            {errors.name && <p className="err-text">{errors.name.message}</p>}
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 12 }}>
+            <div className="form-row">
+              <label>استان</label>
               <Controller name="province_id" control={control} render={({ field }) => (
                 <SearchableSelect options={provinceOptions} value={field.value ?? null} onChange={(v) => field.onChange(v as number | null)} placeholder="-- انتخاب استان --" isClearable isLoading={provincesQuery.isLoading} noOptionsMessage="استانی یافت نشد" />
               )} />
             </div>
-            <div>
-              <label className="cp-label">نماینده</label>
+            <div className="form-row">
+              <label>نماینده</label>
               <Controller name="representation_id" control={control} render={({ field }) => (
                 <SearchableSelect options={representationOptions} value={field.value ?? null} onChange={(v) => field.onChange(v as number | null)} placeholder="انتخاب نماینده..." isClearable isLoading={representationsQuery.isLoading} noOptionsMessage="هیچ نماینده‌ای یافت نشد" />
               )} />
             </div>
-            <div className="grid grid-cols-2 gap-3">
-              <div>
-                <label className="cp-label">تلفن تماس</label>
-                <input {...register('contact_phone')} className="cp-input h-10" dir="ltr" placeholder="021xxxxxxxx" />
-              </div>
-              <div>
-                <label className="cp-label">ایمیل</label>
-                <input {...register('email')} type="email" className="cp-input h-10" dir="ltr" />
-              </div>
+            <div className="form-row">
+              <label>تلفن تماس</label>
+              <input {...register('contact_phone')} className="input" dir="ltr" placeholder="021xxxxxxxx" />
             </div>
-            <div>
-              <label className="cp-label">دامنه</label>
-              <input {...register('domain')} className="cp-input h-10" dir="ltr" />
+            <div className="form-row">
+              <label>ایمیل</label>
+              <input {...register('email')} type="email" className="input" dir="ltr" />
             </div>
-            <div>
-              <label className="cp-label">شعار</label>
-              <input {...register('slogan')} className="cp-input h-10" />
+          </div>
+          <div className="form-row" style={{ marginTop: 12 }}>
+            <label>دامنه</label>
+            <input {...register('domain')} className="input" dir="ltr" />
+          </div>
+          <div className="form-row" style={{ marginTop: 12 }}>
+            <label>شعار</label>
+            <input {...register('slogan')} className="input" />
+          </div>
+          <div className="form-row" style={{ marginTop: 12 }}>
+            <label>کلیدواژه‌ها</label>
+            <input {...register('keywords')} className="input" />
+          </div>
+          <div className="form-row" style={{ marginTop: 12 }}>
+            <label>توضیحات</label>
+            <textarea {...register('description')} rows={3} className="input" style={{ height: 'auto', resize: 'none' }} />
+          </div>
+          <div className="form-row" style={{ marginTop: 12 }}>
+            <label>توضیحات فوتر</label>
+            <textarea {...register('footer_description')} rows={2} className="input" style={{ height: 'auto', resize: 'none' }} />
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 12 }}>
+            <div className="form-row">
+              <label>ترتیب نمایش</label>
+              <input {...register('weight')} type="number" dir="ltr" className="input" placeholder="0" />
             </div>
-            <div>
-              <label className="cp-label">کلیدواژه‌ها</label>
-              <input {...register('keywords')} className="cp-input h-10" />
-            </div>
-            <div>
-              <label className="cp-label">توضیحات</label>
-              <textarea {...register('description')} rows={3} className="cp-textarea" />
-            </div>
-            <div>
-              <label className="cp-label">توضیحات فوتر</label>
-              <textarea {...register('footer_description')} rows={2} className="cp-textarea" />
-            </div>
-            <div>
-              <label className="cp-label">ترتیب نمایش</label>
-              <input {...register('weight')} type="number" dir="ltr" className="cp-input h-11 w-32" placeholder="0" />
-            </div>
-            <div>
-              <label className="cp-label">وضعیت</label>
+            <div className="form-row">
+              <label>وضعیت</label>
               <Controller name="status" control={control} render={({ field }) => (
                 <SearchableSelect options={[{ value: '1', label: 'فعال' }, { value: '0', label: 'غیرفعال' }]} value={field.value ?? '1'} onChange={(v) => field.onChange(v ?? '1')} isClearable={false} />
               )} />
@@ -499,7 +434,7 @@ function CitiesTab() {
   );
 }
 
-// ── Specialties Tab ───────────────────────────────────────────────────────────
+// ── Specialties Tab ────────────────────────────────────────────────────────────
 
 const specialtySchema = z.object({
   name:      z.string().min(1, 'نام الزامی است'),
@@ -559,55 +494,49 @@ function SpecialtiesTab() {
   const parentOptions = items.filter((s) => s.parent_id === null).map((s) => ({ value: s.id, label: s.name }));
 
   const columns: Column<SpecialtyFull>[] = [
-    { key: 'id', header: 'شناسه', className: 'w-16', render: (s) => <span className="text-xs text-slate-400 font-mono">{s.id}</span> },
-    { key: 'name', header: 'نام', render: (s) => <span className="font-medium text-slate-800 dark:text-slate-100">{s.name}</span> },
-    { key: 'slug', header: 'slug', render: (s) => <span className="text-xs font-mono text-slate-400">{s.slug}</span> },
-    { key: 'parent_id', header: 'والد', render: (s) => s.parent_id ? <span className="text-xs bg-slate-100 dark:bg-slate-700 px-2 py-0.5 rounded-full">{parentMap[s.parent_id] ?? `#${s.parent_id}`}</span> : <span className="text-slate-300">—</span> },
-    { key: 'weight', header: 'ترتیب', className: 'w-20', render: (s) => <span className="text-xs text-slate-400">{s.weight}</span> },
-    { key: 'status', header: 'وضعیت', className: 'w-24', render: (s) => <StatusBadge status={s.status} /> },
+    { key: 'id',        header: 'شناسه',  render: (s) => <span className="muted" style={{ fontFamily: 'monospace', fontSize: 12 }}>{s.id}</span> },
+    { key: 'name',      header: 'نام',    render: (s) => <b>{s.name}</b> },
+    { key: 'slug',      header: 'slug',   render: (s) => <span className="muted" style={{ fontFamily: 'monospace', fontSize: 12 }}>{s.slug}</span> },
+    { key: 'parent_id', header: 'والد',   render: (s) => s.parent_id ? <span className="chip">{parentMap[s.parent_id] ?? `#${s.parent_id}`}</span> : <span className="muted">—</span> },
+    { key: 'weight',    header: 'ترتیب',  render: (s) => <span className="muted">{s.weight}</span> },
+    { key: 'status',    header: 'وضعیت',  render: (s) => <SBadge status={s.status} /> },
   ];
 
   return (
     <>
-      <div className="flex justify-end px-5 pt-4">
-        <button onClick={() => { reset({ status: '1', weight: '0' }); setAddOpen(true); }} className="cp-btn-primary">
-          <PlusIcon className="w-4 h-4" /> افزودن تخصص
-        </button>
-      </div>
-      <div className="p-5">
-        <DataTable<SpecialtyFull> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در تخصص‌ها..." emptyMessage="هیچ تخصصی یافت نشد"
-          actions={(s) => (
-            <>
-              <button onClick={() => openEdit(s)} className="cp-action-edit" title="ویرایش"><PencilIcon className="w-4 h-4" /></button>
-              <button onClick={() => setDeleteTarget(s)} className="cp-action-delete" title="حذف"><TrashIcon className="w-4 h-4" /></button>
-            </>
-          )}
-        />
-        {total > 20 && <div className="mt-4"><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}
-      </div>
+      <TabActions label="افزودن تخصص" onClick={() => { reset({ status: '1', weight: '0' }); setAddOpen(true); }} />
+      <DataTable<SpecialtyFull> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در تخصص‌ها..." emptyMessage="هیچ تخصصی یافت نشد"
+        actions={(s) => (
+          <>
+            <button onClick={() => openEdit(s)} className="mini-btn" title="ویرایش"><PencilIcon style={{ width: 14, height: 14 }} /></button>
+            <button onClick={() => setDeleteTarget(s)} className="mini-btn danger" title="حذف"><TrashIcon style={{ width: 14, height: 14 }} /></button>
+          </>
+        )}
+      />
+      {total > 20 && <div style={{ padding: 'var(--card-pad)' }}><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}
 
       <Modal open={addOpen || !!editTarget} title={editTarget ? `ویرایش — ${editTarget.name}` : 'افزودن تخصص'} size="sm" onClose={closeModal}
-        footer={<><button onClick={closeModal} className="cp-btn-secondary">لغو</button><button form="specialty-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="cp-btn-primary">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
+        footer={<><button onClick={closeModal} className="btn ghost sm">لغو</button><button form="specialty-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="btn primary sm">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
       >
         <form id="specialty-form" onSubmit={handleSubmit((d) => editTarget ? updateMutation.mutate({ id: editTarget.id, d }) : createMutation.mutate(d))}>
-          <div className="space-y-4">
-            <div>
-              <label className="cp-label">نام <span className="text-red-500">*</span></label>
-              <input {...register('name')} className="cp-input h-11" placeholder="نام تخصص" />
-              {errors.name && <p className="text-red-500 text-xs mt-1">{errors.name.message}</p>}
+          <div className="form-row">
+            <label>نام <span style={{ color: 'var(--danger)' }}>*</span></label>
+            <input {...register('name')} className="input" placeholder="نام تخصص" />
+            {errors.name && <p className="err-text">{errors.name.message}</p>}
+          </div>
+          <div className="form-row" style={{ marginTop: 12 }}>
+            <label>تخصص والد</label>
+            <Controller name="parent_id" control={control} render={({ field }) => (
+              <SearchableSelect options={parentOptions} value={field.value ?? null} onChange={(v) => field.onChange(v as number | null)} placeholder="-- بدون والد --" isClearable noOptionsMessage="موردی یافت نشد" />
+            )} />
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 12 }}>
+            <div className="form-row">
+              <label>ترتیب نمایش</label>
+              <input {...register('weight')} type="number" dir="ltr" className="input" placeholder="0" />
             </div>
-            <div>
-              <label className="cp-label">تخصص والد</label>
-              <Controller name="parent_id" control={control} render={({ field }) => (
-                <SearchableSelect options={parentOptions} value={field.value ?? null} onChange={(v) => field.onChange(v as number | null)} placeholder="-- بدون والد --" isClearable noOptionsMessage="موردی یافت نشد" />
-              )} />
-            </div>
-            <div>
-              <label className="cp-label">ترتیب نمایش</label>
-              <input {...register('weight')} type="number" dir="ltr" className="cp-input h-11 w-32" placeholder="0" />
-            </div>
-            <div>
-              <label className="cp-label">وضعیت</label>
+            <div className="form-row">
+              <label>وضعیت</label>
               <Controller name="status" control={control} render={({ field }) => (
                 <SearchableSelect options={[{ value: '1', label: 'فعال' }, { value: '0', label: 'غیرفعال' }]} value={field.value ?? '1'} onChange={(v) => field.onChange(v ?? '1')} isClearable={false} />
               )} />
@@ -622,7 +551,7 @@ function SpecialtiesTab() {
   );
 }
 
-// ── DoctorServices Tab ────────────────────────────────────────────────────────
+// ── DoctorServices Tab ─────────────────────────────────────────────────────────
 
 const serviceSchema = z.object({
   name:         z.string().min(1, 'نام الزامی است'),
@@ -687,54 +616,48 @@ function DoctorServicesTab() {
   };
 
   const columns: Column<DoctorService>[] = [
-    { key: 'id', header: 'شناسه', className: 'w-16', render: (s) => <span className="text-xs text-slate-400 font-mono">{s.id}</span> },
-    { key: 'name', header: 'نام', render: (s) => <span className="font-medium text-slate-800 dark:text-slate-100">{s.name}</span> },
-    { key: 'specialty_id', header: 'تخصص', render: (s) => s.specialty_id ? <span className="text-xs bg-rose-50 dark:bg-rose-400/10 text-rose-600 dark:text-rose-400 px-2 py-0.5 rounded-full">{specialtyMap[s.specialty_id] ?? `#${s.specialty_id}`}</span> : <span className="text-slate-300">—</span> },
-    { key: 'weight', header: 'ترتیب', className: 'w-20', render: (s) => <span className="text-xs text-slate-400">{s.weight}</span> },
-    { key: 'status', header: 'وضعیت', className: 'w-24', render: (s) => <StatusBadge status={s.status} /> },
+    { key: 'id',           header: 'شناسه',    render: (s) => <span className="muted" style={{ fontFamily: 'monospace', fontSize: 12 }}>{s.id}</span> },
+    { key: 'name',         header: 'نام',      render: (s) => <b>{s.name}</b> },
+    { key: 'specialty_id', header: 'تخصص',     render: (s) => s.specialty_id ? <span className="badge violet"><span className="bdot" />{specialtyMap[s.specialty_id] ?? `#${s.specialty_id}`}</span> : <span className="muted">—</span> },
+    { key: 'weight',       header: 'ترتیب',    render: (s) => <span className="muted">{s.weight}</span> },
+    { key: 'status',       header: 'وضعیت',    render: (s) => <SBadge status={s.status} /> },
   ];
 
   return (
     <>
-      <div className="flex justify-end px-5 pt-4">
-        <button onClick={() => { reset({ status: '1', weight: '0' }); setAddOpen(true); }} className="cp-btn-primary">
-          <PlusIcon className="w-4 h-4" /> افزودن خدمت
-        </button>
-      </div>
-      <div className="p-5">
-        <DataTable<DoctorService> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در خدمات..." emptyMessage="هیچ خدمتی یافت نشد"
-          actions={(s) => (
-            <>
-              <button onClick={() => openEdit(s)} className="cp-action-edit" title="ویرایش"><PencilIcon className="w-4 h-4" /></button>
-              <button onClick={() => setDeleteTarget(s)} className="cp-action-delete" title="حذف"><TrashIcon className="w-4 h-4" /></button>
-            </>
-          )}
-        />
-        {total > 20 && <div className="mt-4"><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}
-      </div>
+      <TabActions label="افزودن خدمت" onClick={() => { reset({ status: '1', weight: '0' }); setAddOpen(true); }} />
+      <DataTable<DoctorService> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در خدمات..." emptyMessage="هیچ خدمتی یافت نشد"
+        actions={(s) => (
+          <>
+            <button onClick={() => openEdit(s)} className="mini-btn" title="ویرایش"><PencilIcon style={{ width: 14, height: 14 }} /></button>
+            <button onClick={() => setDeleteTarget(s)} className="mini-btn danger" title="حذف"><TrashIcon style={{ width: 14, height: 14 }} /></button>
+          </>
+        )}
+      />
+      {total > 20 && <div style={{ padding: 'var(--card-pad)' }}><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}
 
       <Modal open={addOpen || !!editTarget} title={editTarget ? `ویرایش — ${editTarget.name}` : 'افزودن خدمت'} size="sm" onClose={closeModal}
-        footer={<><button onClick={closeModal} className="cp-btn-secondary">لغو</button><button form="service-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="cp-btn-primary">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
+        footer={<><button onClick={closeModal} className="btn ghost sm">لغو</button><button form="service-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="btn primary sm">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
       >
         <form id="service-form" onSubmit={handleSubmit((d) => editTarget ? updateMutation.mutate({ id: editTarget.id, d }) : createMutation.mutate(d))}>
-          <div className="space-y-4">
-            <div>
-              <label className="cp-label">نام <span className="text-red-500">*</span></label>
-              <input {...register('name')} className="cp-input h-11" placeholder="نام خدمت" />
-              {errors.name && <p className="text-red-500 text-xs mt-1">{errors.name.message}</p>}
+          <div className="form-row">
+            <label>نام <span style={{ color: 'var(--danger)' }}>*</span></label>
+            <input {...register('name')} className="input" placeholder="نام خدمت" />
+            {errors.name && <p className="err-text">{errors.name.message}</p>}
+          </div>
+          <div className="form-row" style={{ marginTop: 12 }}>
+            <label>تخصص مرتبط</label>
+            <Controller name="specialty_id" control={control} render={({ field }) => (
+              <SearchableSelect options={specialtyOptions} value={field.value ?? null} onChange={(v) => field.onChange(v as number | null)} placeholder="-- انتخاب تخصص --" isClearable isLoading={specialtiesQuery.isLoading} noOptionsMessage="تخصصی یافت نشد" />
+            )} />
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 12 }}>
+            <div className="form-row">
+              <label>ترتیب نمایش</label>
+              <input {...register('weight')} type="number" dir="ltr" className="input" placeholder="0" />
             </div>
-            <div>
-              <label className="cp-label">تخصص مرتبط</label>
-              <Controller name="specialty_id" control={control} render={({ field }) => (
-                <SearchableSelect options={specialtyOptions} value={field.value ?? null} onChange={(v) => field.onChange(v as number | null)} placeholder="-- انتخاب تخصص --" isClearable isLoading={specialtiesQuery.isLoading} noOptionsMessage="تخصصی یافت نشد" />
-              )} />
-            </div>
-            <div>
-              <label className="cp-label">ترتیب نمایش</label>
-              <input {...register('weight')} type="number" dir="ltr" className="cp-input h-11 w-32" placeholder="0" />
-            </div>
-            <div>
-              <label className="cp-label">وضعیت</label>
+            <div className="form-row">
+              <label>وضعیت</label>
               <Controller name="status" control={control} render={({ field }) => (
                 <SearchableSelect options={[{ value: '1', label: 'فعال' }, { value: '0', label: 'غیرفعال' }]} value={field.value ?? '1'} onChange={(v) => field.onChange(v ?? '1')} isClearable={false} />
               )} />
@@ -749,7 +672,7 @@ function DoctorServicesTab() {
   );
 }
 
-// ── Insurances Tab ────────────────────────────────────────────────────────────
+// ── Insurances Tab ─────────────────────────────────────────────────────────────
 
 const insuranceSchema = z.object({
   name:   z.string().min(1, 'نام الزامی است'),
@@ -809,72 +732,62 @@ function InsurancesTab() {
   };
 
   const columns: Column<Insurance>[] = [
-    { key: 'id', header: 'شناسه', className: 'w-16', render: (i) => <span className="text-xs text-slate-400 font-mono">{i.id}</span> },
-    { key: 'name', header: 'نام', render: (i) => (
-      <div className="flex items-center gap-2.5">
+    { key: 'id',     header: 'شناسه',  render: (i) => <span className="muted" style={{ fontFamily: 'monospace', fontSize: 12 }}>{i.id}</span> },
+    { key: 'name',   header: 'نام',    render: (i) => (
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
         {i.logo_url ? (
-          <img src={i.logo_url} alt={i.name} className="w-8 h-8 object-contain rounded-lg border border-slate-200 dark:border-gray-600 bg-white p-0.5 shrink-0" />
+          <img src={i.logo_url} alt={i.name} style={{ width: 32, height: 32, objectFit: 'contain', borderRadius: 8, border: '1px solid var(--border)', background: 'var(--surface)', padding: 2, flexShrink: 0 }} />
         ) : (
-          <div className="w-8 h-8 rounded-lg border border-dashed border-slate-200 dark:border-gray-600 flex items-center justify-center shrink-0">
-            <PhotoIcon className="w-4 h-4 text-slate-300" />
+          <div style={{ width: 32, height: 32, borderRadius: 8, border: '1px dashed var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+            <PhotoIcon style={{ width: 14, height: 14, color: 'var(--text-3)' }} />
           </div>
         )}
-        <span className="font-medium text-slate-800 dark:text-slate-100">{i.name}</span>
+        <b>{i.name}</b>
       </div>
     )},
-    { key: 'type', header: 'نوع', render: (i) => (
-      <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${i.type === 'basic' ? 'bg-teal-50 dark:bg-teal-400/10 text-teal-700 dark:text-teal-400' : 'bg-cyan-50 dark:bg-cyan-400/10 text-cyan-700 dark:text-cyan-400'}`}>
-        {i.type === 'basic' ? 'پایه' : 'تکمیلی'}
-      </span>
-    )},
-    { key: 'status', header: 'وضعیت', className: 'w-24', render: (i) => <StatusBadge status={i.status} /> },
+    { key: 'type',   header: 'نوع',    render: (i) => <span className={`badge ${i.type === 'basic' ? 'green' : 'blue'}`}><span className="bdot" />{i.type === 'basic' ? 'پایه' : 'تکمیلی'}</span> },
+    { key: 'status', header: 'وضعیت',  render: (i) => <SBadge status={i.status} /> },
   ];
 
   return (
     <>
-      <div className="flex justify-end px-5 pt-4">
-        <button onClick={() => { reset({ status: '1', type: 'basic' }); setLogoUrl(null); setUploadTarget(null); setAddOpen(true); }} className="cp-btn-primary">
-          <PlusIcon className="w-4 h-4" /> افزودن بیمه
-        </button>
-      </div>
-      <div className="p-5">
-        <DataTable<Insurance> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در بیمه‌ها..." emptyMessage="هیچ بیمه‌ای یافت نشد"
-          actions={(i) => (
-            <>
-              <button onClick={() => openEdit(i)} className="cp-action-edit" title="ویرایش"><PencilIcon className="w-4 h-4" /></button>
-              <button onClick={() => setDeleteTarget(i)} className="cp-action-delete" title="حذف"><TrashIcon className="w-4 h-4" /></button>
-            </>
-          )}
-        />
-        {total > 20 && <div className="mt-4"><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}
-      </div>
+      <TabActions label="افزودن بیمه" onClick={() => { reset({ status: '1', type: 'basic' }); setLogoUrl(null); setUploadTarget(null); setAddOpen(true); }} />
+      <DataTable<Insurance> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در بیمه‌ها..." emptyMessage="هیچ بیمه‌ای یافت نشد"
+        actions={(i) => (
+          <>
+            <button onClick={() => openEdit(i)} className="mini-btn" title="ویرایش"><PencilIcon style={{ width: 14, height: 14 }} /></button>
+            <button onClick={() => setDeleteTarget(i)} className="mini-btn danger" title="حذف"><TrashIcon style={{ width: 14, height: 14 }} /></button>
+          </>
+        )}
+      />
+      {total > 20 && <div style={{ padding: 'var(--card-pad)' }}><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}
 
       <Modal open={addOpen || !!editTarget} title={editTarget ? `ویرایش — ${editTarget.name}` : 'افزودن بیمه'} size="sm" onClose={closeModal}
-        footer={<><button onClick={closeModal} className="cp-btn-secondary">لغو</button><button form="insurance-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="cp-btn-primary">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
+        footer={<><button onClick={closeModal} className="btn ghost sm">لغو</button><button form="insurance-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="btn primary sm">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
       >
         <form id="insurance-form" onSubmit={handleSubmit((d) => editTarget ? updateMutation.mutate({ id: editTarget.id, d }) : createMutation.mutate(d))}>
-          <div className="space-y-4">
-            <div>
-              <label className="cp-label">لگو</label>
-              <LogoUploadField
-                value={logoUrl}
-                onChange={setLogoUrl}
-                uploadUrl={uploadTarget ? `/api/v1/admin/insurance/${uploadTarget}/upload-logo` : '/api/v1/admin/insurance/0/upload-logo'}
-              />
-            </div>
-            <div>
-              <label className="cp-label">نام <span className="text-red-500">*</span></label>
-              <input {...register('name')} className="cp-input h-11" placeholder="نام بیمه" />
-              {errors.name && <p className="text-red-500 text-xs mt-1">{errors.name.message}</p>}
-            </div>
-            <div>
-              <label className="cp-label">نوع <span className="text-red-500">*</span></label>
+          <div className="form-row">
+            <label>لگو</label>
+            <LogoUploadField
+              value={logoUrl}
+              onChange={setLogoUrl}
+              uploadUrl={uploadTarget ? `/api/v1/admin/insurance/${uploadTarget}/upload-logo` : '/api/v1/admin/insurance/0/upload-logo'}
+            />
+          </div>
+          <div className="form-row" style={{ marginTop: 12 }}>
+            <label>نام <span style={{ color: 'var(--danger)' }}>*</span></label>
+            <input {...register('name')} className="input" placeholder="نام بیمه" />
+            {errors.name && <p className="err-text">{errors.name.message}</p>}
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 12 }}>
+            <div className="form-row">
+              <label>نوع <span style={{ color: 'var(--danger)' }}>*</span></label>
               <Controller name="type" control={control} render={({ field }) => (
                 <SearchableSelect options={[{ value: 'basic', label: 'بیمه پایه' }, { value: 'supplementary', label: 'بیمه تکمیلی' }]} value={field.value} onChange={(v) => field.onChange(v ?? 'basic')} isClearable={false} />
               )} />
             </div>
-            <div>
-              <label className="cp-label">وضعیت</label>
+            <div className="form-row">
+              <label>وضعیت</label>
               <Controller name="status" control={control} render={({ field }) => (
                 <SearchableSelect options={[{ value: '1', label: 'فعال' }, { value: '0', label: 'غیرفعال' }]} value={field.value ?? '1'} onChange={(v) => field.onChange(v ?? '1')} isClearable={false} />
               )} />
@@ -889,7 +802,7 @@ function InsurancesTab() {
   );
 }
 
-// ── Tags Tab ──────────────────────────────────────────────────────────────────
+// ── Tags Tab ───────────────────────────────────────────────────────────────────
 
 const tagSchema = z.object({
   name:   z.string().min(1, 'نام الزامی است'),
@@ -944,45 +857,33 @@ function TagsTab() {
   };
 
   const columns: Column<Tag>[] = [
-    { key: 'id', header: 'شناسه', className: 'w-16', render: (t) => <span className="text-xs text-slate-400 font-mono">{t.id}</span> },
-    { key: 'name', header: 'نام', render: (t) => <span className="font-medium text-slate-800 dark:text-slate-100">{t.name}</span> },
-    { key: 'slug', header: 'slug', render: (t) => <span className="text-xs font-mono text-slate-400">{t.slug}</span> },
-    { key: 'status', header: 'وضعیت', className: 'w-24', render: (t) => <StatusBadge status={t.status} /> },
+    { key: 'id',     header: 'شناسه',  render: (t) => <span className="muted" style={{ fontFamily: 'monospace', fontSize: 12 }}>{t.id}</span> },
+    { key: 'name',   header: 'نام',    render: (t) => <span className="chip">{t.name}</span> },
+    { key: 'slug',   header: 'slug',   render: (t) => <span className="muted" style={{ fontFamily: 'monospace', fontSize: 12 }}>{t.slug}</span> },
+    { key: 'status', header: 'وضعیت',  render: (t) => <SBadge status={t.status} /> },
   ];
 
   return (
     <>
-      <div className="flex justify-end px-5 pt-4">
-        <button onClick={() => { reset({ status: '1' }); setAddOpen(true); }} className="cp-btn-primary">
-          <PlusIcon className="w-4 h-4" /> افزودن تگ
-        </button>
-      </div>
-      <div className="p-5">
-        <DataTable<Tag> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در تگ‌ها..." emptyMessage="هیچ تگی یافت نشد"
-          actions={(t) => (
-            <>
-              <button onClick={() => openEdit(t)} className="cp-action-edit" title="ویرایش"><PencilIcon className="w-4 h-4" /></button>
-              <button onClick={() => setDeleteTarget(t)} className="cp-action-delete" title="حذف"><TrashIcon className="w-4 h-4" /></button>
-            </>
-          )}
-        />
-        {total > 20 && <div className="mt-4"><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}
-      </div>
+      <TabActions label="افزودن تگ" onClick={() => { reset({ status: '1' }); setAddOpen(true); }} />
+      <DataTable<Tag> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در تگ‌ها..." emptyMessage="هیچ تگی یافت نشد"
+        actions={(t) => (
+          <>
+            <button onClick={() => openEdit(t)} className="mini-btn" title="ویرایش"><PencilIcon style={{ width: 14, height: 14 }} /></button>
+            <button onClick={() => setDeleteTarget(t)} className="mini-btn danger" title="حذف"><TrashIcon style={{ width: 14, height: 14 }} /></button>
+          </>
+        )}
+      />
+      {total > 20 && <div style={{ padding: 'var(--card-pad)' }}><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}
 
       <Modal open={addOpen || !!editTarget} title={editTarget ? `ویرایش — ${editTarget.name}` : 'افزودن تگ'} size="sm" onClose={closeModal}
-        footer={<><button onClick={closeModal} className="cp-btn-secondary">لغو</button><button form="tag-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="cp-btn-primary">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
+        footer={<><button onClick={closeModal} className="btn ghost sm">لغو</button><button form="tag-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="btn primary sm">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
       >
         <form id="tag-form" onSubmit={handleSubmit((d) => editTarget ? updateMutation.mutate({ id: editTarget.id, d }) : createMutation.mutate(d))}>
-          <div className="space-y-4">
-            <div>
-              <label className="cp-label">نام <span className="text-red-500">*</span></label>
-              <input {...register('name')} className="cp-input h-11" placeholder="نام تگ" />
-              {errors.name && <p className="text-red-500 text-xs mt-1">{errors.name.message}</p>}
-            </div>
-            <div>
-              <label className="cp-label">وضعیت</label>
-              <input {...register('status')} className="hidden" />
-            </div>
+          <div className="form-row">
+            <label>نام <span style={{ color: 'var(--danger)' }}>*</span></label>
+            <input {...register('name')} className="input" placeholder="نام تگ" />
+            {errors.name && <p className="err-text">{errors.name.message}</p>}
           </div>
         </form>
       </Modal>
@@ -993,24 +894,24 @@ function TagsTab() {
   );
 }
 
-// ── Main Page ─────────────────────────────────────────────────────────────────
+// ── Main Page ──────────────────────────────────────────────────────────────────
 
 export default function CategoriesPage() {
   const [activeTab, setActiveTab] = useState<TabKey>('provinces');
-
   const tab = TABS.find((t) => t.key === activeTab)!;
 
   return (
-    <div>
-      <PageHeader
-        title="دسته‌بندی‌ها"
-        description={tab.description}
-        breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'دسته‌بندی‌ها' }]}
-      />
+    <div className="fade-in">
+      <div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
+        <div>
+          <h1 className="section-title">دسته‌بندی‌ها</h1>
+          <div className="muted">{tab.label}</div>
+        </div>
+      </div>
 
-      <div className="cp-card overflow-hidden">
-        {/* ── Tab bar ── */}
-        <div className="flex overflow-x-auto border-b border-slate-200 dark:border-gray-700 px-2 pt-2 gap-1 scrollbar-none">
+      <div className="card">
+        {/* Tab bar */}
+        <div style={{ display: 'flex', overflowX: 'auto', borderBottom: '1px solid var(--border)', padding: '0 var(--card-pad)' }}>
           {TABS.map((t) => {
             const Icon = t.icon;
             const isActive = t.key === activeTab;
@@ -1018,37 +919,37 @@ export default function CategoriesPage() {
               <button
                 key={t.key}
                 onClick={() => setActiveTab(t.key)}
-                className={`flex items-center gap-2 px-3.5 py-2.5 text-sm font-medium rounded-t-xl whitespace-nowrap border-b-2 -mb-px transition-all ${
-                  isActive
-                    ? 'border-primary-600 text-primary-600 dark:text-primary-400 bg-primary-50/50 dark:bg-primary-400/5'
-                    : 'border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-50 dark:hover:bg-gray-800/50'
-                }`}
+                style={{
+                  display: 'flex', alignItems: 'center', gap: 6,
+                  padding: '14px 14px', whiteSpace: 'nowrap',
+                  fontSize: 13, fontWeight: 500,
+                  border: 'none', background: 'none', cursor: 'pointer',
+                  borderBottom: `2px solid ${isActive ? 'var(--primary)' : 'transparent'}`,
+                  color: isActive ? 'var(--primary)' : 'var(--text-2)',
+                  marginBottom: -1, transition: 'color .15s',
+                }}
               >
-                <Icon className="w-4 h-4 shrink-0" />
+                <span style={{
+                  width: 26, height: 26, borderRadius: 8, display: 'grid', placeItems: 'center',
+                  background: isActive ? `oklch(0.62 0.15 ${t.hue} / 0.12)` : 'var(--surface-2)',
+                  color: isActive ? `oklch(0.55 0.15 ${t.hue})` : 'var(--text-3)',
+                  flexShrink: 0, transition: 'all .15s',
+                }}>
+                  <Icon style={{ width: 14, height: 14 }} />
+                </span>
                 {t.label}
               </button>
             );
           })}
         </div>
 
-        {/* ── Bundle info bar ── */}
-        <div className="flex items-center gap-3 px-6 py-3 border-b border-slate-100 dark:border-gray-700/50 bg-slate-50/50 dark:bg-gray-800/30">
-          <div className={`w-7 h-7 rounded-lg flex items-center justify-center ${tab.color}`}>
-            <tab.icon className="w-4 h-4" />
-          </div>
-          <div>
-            <p className="text-xs font-medium text-slate-700 dark:text-slate-300">{tab.label}</p>
-            <p className="text-[11px] text-slate-400 dark:text-slate-500">{tab.description}</p>
-          </div>
-        </div>
-
-        {/* ── Tab content ── */}
-        {activeTab === 'provinces'      && <ProvincesTab />}
-        {activeTab === 'cities'         && <CitiesTab />}
-        {activeTab === 'specialties'    && <SpecialtiesTab />}
+        {/* Content */}
+        {activeTab === 'provinces'       && <ProvincesTab />}
+        {activeTab === 'cities'          && <CitiesTab />}
+        {activeTab === 'specialties'     && <SpecialtiesTab />}
         {activeTab === 'doctor_services' && <DoctorServicesTab />}
-        {activeTab === 'insurances'     && <InsurancesTab />}
-        {activeTab === 'tags'           && <TagsTab />}
+        {activeTab === 'insurances'      && <InsurancesTab />}
+        {activeTab === 'tags'            && <TagsTab />}
       </div>
     </div>
   );
diff --git a/assets/admin/pages/ClinicsPage.tsx b/assets/admin/pages/ClinicsPage.tsx
index 2e0a5052..28e19752 100644
--- a/assets/admin/pages/ClinicsPage.tsx
+++ b/assets/admin/pages/ClinicsPage.tsx
@@ -1,18 +1,19 @@
 import React, { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
-import { EyeIcon, TrashIcon, PencilIcon } from '@heroicons/react/24/outline';
+import { EyeIcon, TrashIcon, PencilIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { toast } from 'sonner';
 import { api } from '../lib/api';
 import type { ApiResponse, PaginatedResponse } from '../lib/api';
 import type { Clinic } from '../types';
 import { formatDate, formatNumber } from '../lib/utils';
-import PageHeader from '../components/ui/PageHeader';
 import DataTable, { Column } from '../components/ui/DataTable';
 import { ActiveBadge } from '../components/ui/StatusBadge';
 import Pagination from '../components/ui/Pagination';
 import ConfirmDialog from '../components/ui/ConfirmDialog';
 
+const HUES_LIST = [256, 205, 162, 295, 272];
+
 export default function ClinicsPage() {
   const navigate = useNavigate();
   const qc = useQueryClient();
@@ -43,25 +44,33 @@ export default function ClinicsPage() {
     {
       key: 'name',
       header: 'نام کلینیک',
-      render: (c) => (
-        <div className="flex items-center gap-3">
-          {c.logo ? (
-            <img src={c.logo} alt="" className="w-8 h-8 rounded-lg object-cover" />
-          ) : (
-            <div className="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center text-blue-700 text-xs font-bold">
-              {c.name?.[0]}
+      render: (c) => {
+        const hue = HUES_LIST[(c.uuid?.charCodeAt(0) ?? 0) % HUES_LIST.length];
+        return (
+          <div className="cell-user">
+            {c.logo ? (
+              <img src={c.logo} alt="" className="avatar sm" style={{ objectFit: 'cover' }} />
+            ) : (
+              <div className="avatar sm" style={{
+                background: `linear-gradient(145deg, oklch(0.62 0.15 ${hue}), oklch(0.48 0.16 ${hue}))`,
+              }}>
+                {c.name?.[0] ?? '?'}
+              </div>
+            )}
+            <div>
+              <b>{c.name}</b>
             </div>
-          )}
-          <span className="font-medium text-slate-800 dark:text-slate-100">{c.name}</span>
-        </div>
-      ),
+          </div>
+        );
+      },
     },
     { key: 'phone', header: 'تلفن', render: (c) => c.phone ? <span dir="ltr">{c.phone}</span> : '—' },
     {
       key: 'doctors_count',
       header: 'پزشکان',
       render: (c) => (
-        <span className="text-xs bg-indigo-50 text-indigo-700 px-2 py-0.5 rounded-full">
+        <span className="badge blue">
+          <span className="bdot" />
           {formatNumber(c.doctors_count ?? 0)} پزشک
         </span>
       ),
@@ -74,34 +83,45 @@ export default function ClinicsPage() {
   const total = data?.meta?.totalRecords ?? 0;
 
   return (
-    <div>
-      <PageHeader
-        title="کلینیک‌ها"
-        breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'کلینیک‌ها' }]}
-      />
+    <div className="fade-in">
+      <div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
+        <div>
+          <h1 className="section-title">کلینیک‌ها</h1>
+          <div className="muted">{total} کلینیک ثبت‌شده</div>
+        </div>
+      </div>
 
-      <div className="cp-card p-6">
+      <div className="card">
+        <div className="card-pad" style={{ paddingBottom: 0 }}>
+          <div className="toolbar">
+            <div className="field" style={{ minWidth: 240 }}>
+              <MagnifyingGlassIcon style={{ width: 17, height: 17 }} />
+              <input
+                value={search}
+                onChange={(e) => { setSearch(e.target.value); setPage(1); }}
+                placeholder="جستجو بر اساس نام کلینیک..."
+              />
+            </div>
+          </div>
+        </div>
         <DataTable<Clinic>
           columns={columns}
           data={items}
           loading={isLoading}
-          searchValue={search}
-          onSearchChange={(v) => { setSearch(v); setPage(1); }}
-          searchPlaceholder="جستجو بر اساس نام کلینیک..."
           emptyMessage="هیچ کلینیکی یافت نشد"
           actions={(clinic) => (
             <>
               <button onClick={() => navigate(`/admin/clinics/${clinic.uuid}`)}
-                className="cp-action-view" title="مشاهده">
-                <EyeIcon className="w-4 h-4" />
+                className="mini-btn" title="مشاهده">
+                <EyeIcon style={{ width: 15, height: 15 }} />
               </button>
               <button onClick={() => navigate(`/admin/clinics/${clinic.uuid}?edit=1`)}
-                className="cp-action-edit" title="ویرایش">
-                <PencilIcon className="w-4 h-4" />
+                className="mini-btn" title="ویرایش">
+                <PencilIcon style={{ width: 15, height: 15 }} />
               </button>
               <button onClick={() => setDeleteTarget(clinic)}
-                className="cp-action-delete" title="حذف">
-                <TrashIcon className="w-4 h-4" />
+                className="mini-btn danger" title="حذف">
+                <TrashIcon style={{ width: 15, height: 15 }} />
               </button>
             </>
           )}
diff --git a/assets/admin/pages/CommentsPage.tsx b/assets/admin/pages/CommentsPage.tsx
index d93064bb..3f4da498 100644
--- a/assets/admin/pages/CommentsPage.tsx
+++ b/assets/admin/pages/CommentsPage.tsx
@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { CheckIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { CheckIcon, TrashIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { toast } from 'sonner';
 import { api } from '../lib/api';
 import type { ApiResponse, PaginatedResponse } from '../lib/api';
 import type { Comment } from '../types';
 import { formatDate } from '../lib/utils';
-import PageHeader from '../components/ui/PageHeader';
 import DataTable, { Column } from '../components/ui/DataTable';
 import { ActiveBadge } from '../components/ui/StatusBadge';
 import Pagination from '../components/ui/Pagination';
@@ -14,7 +13,7 @@ import ConfirmDialog from '../components/ui/ConfirmDialog';
 
 const FILTERS = [
   { value: '', label: 'همه' },
-  { value: 'pending', label: 'در انتظار تأیید' },
+  { value: 'pending', label: 'در انتظار' },
   { value: 'approved', label: 'تأییدشده' },
 ];
 
@@ -61,7 +60,7 @@ export default function CommentsPage() {
     {
       key: 'patient_name',
       header: 'کاربر',
-      render: (c) => <span className="font-medium text-slate-800 dark:text-slate-100">{c.patient_name}</span>,
+      render: (c) => <b>{c.patient_name}</b>,
     },
     { key: 'doctor_name', header: 'پزشک', render: (c) => `دکتر ${c.doctor_name}` },
     { key: 'title', header: 'عنوان' },
@@ -69,7 +68,9 @@ export default function CommentsPage() {
       key: 'body',
       header: 'متن',
       render: (c) => (
-        <span className="text-slate-500 dark:text-slate-400 text-xs line-clamp-2 max-w-xs block">{c.body}</span>
+        <span className="muted" style={{ fontSize: 12, display: 'block', maxWidth: 280, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {c.body}
+        </span>
       ),
     },
     {
@@ -84,46 +85,57 @@ export default function CommentsPage() {
   const total = data?.meta?.totalRecords ?? 0;
 
   return (
-    <div>
-      <PageHeader
-        title="نظرات"
-        breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'نظرات' }]}
-      />
-
-      <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-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>
-          ))}
+    <div className="fade-in">
+      <div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
+        <div>
+          <h1 className="section-title">نظرات</h1>
+          <div className="muted">{total} نظر ثبت‌شده</div>
         </div>
+      </div>
 
+      <div className="card">
+        <div className="card-pad" style={{ paddingBottom: 0 }}>
+          <div className="toolbar">
+            <div className="field" style={{ minWidth: 240 }}>
+              <MagnifyingGlassIcon style={{ width: 17, height: 17 }} />
+              <input
+                value={search}
+                onChange={(e) => { setSearch(e.target.value); setPage(1); }}
+                placeholder="جستجو بر اساس نام پزشک یا متن..."
+              />
+            </div>
+            <div className="seg">
+              {FILTERS.map((f) => (
+                <button
+                  key={f.value}
+                  className={approvedFilter === f.value ? 'on' : ''}
+                  onClick={() => { setApprovedFilter(f.value); setPage(1); }}
+                >
+                  {f.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
         <DataTable<Comment>
           columns={columns}
           data={items}
           loading={isLoading}
-          searchValue={search}
-          onSearchChange={(v) => { setSearch(v); setPage(1); }}
-          searchPlaceholder="جستجو بر اساس نام پزشک یا متن..."
           emptyMessage="هیچ نظری یافت نشد"
           actions={(comment) => (
             <>
               {!comment.is_approved && (
                 <button
                   onClick={() => setApproveTarget(comment)}
-                  className="cp-action-approve"
+                  className="mini-btn"
                   title="تأیید"
                 >
-                  <CheckIcon className="w-4 h-4" />
+                  <CheckIcon style={{ width: 15, height: 15 }} />
                 </button>
               )}
               <button onClick={() => setDeleteTarget(comment)}
-                className="cp-action-delete" title="حذف">
-                <TrashIcon className="w-4 h-4" />
+                className="mini-btn danger" title="حذف">
+                <TrashIcon style={{ width: 15, height: 15 }} />
               </button>
             </>
           )}
diff --git a/assets/admin/pages/DashboardPage.tsx b/assets/admin/pages/DashboardPage.tsx
index 290765db..edd9890f 100644
--- a/assets/admin/pages/DashboardPage.tsx
+++ b/assets/admin/pages/DashboardPage.tsx
@@ -1,14 +1,9 @@
 import React, { useMemo, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { Link } from 'react-router-dom';
-import {
-  AreaChart, Area, BarChart, Bar, PieChart, Pie, Cell,
-  XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
-} from 'recharts';
 import {
   UserGroupIcon, HeartIcon, BuildingOffice2Icon, CalendarDaysIcon,
-  CreditCardIcon, ArrowPathIcon, BellAlertIcon, UserPlusIcon,
-  ChatBubbleLeftEllipsisIcon,
+  CreditCardIcon, ArrowPathIcon, BellAlertIcon, ChatBubbleLeftEllipsisIcon,
 } from '@heroicons/react/24/outline';
 import { api } from '../lib/api';
 import type { ApiResponse } from '../lib/api';
@@ -58,140 +53,200 @@ interface RecentData {
 
 // ── Status maps ───────────────────────────────────────────────────────────
 
-const APPT: Record<string, { label: string; cls: string; color: string }> = {
-  waiting_for_payment: { label: 'انتظار پرداخت', cls: 'bg-yellow-100 dark:bg-yellow-400/10 text-yellow-700 dark:text-yellow-300',     color: '#f59e0b' },
-  reserved:            { label: 'رزرو شده',      cls: 'bg-blue-100 dark:bg-blue-400/10 text-blue-700 dark:text-blue-300',             color: '#3b82f6' },
-  checked_in:          { label: 'ورود به مطب',   cls: 'bg-indigo-100 dark:bg-indigo-400/10 text-indigo-700 dark:text-indigo-300',     color: '#6366f1' },
-  waiting:             { label: 'صف انتظار',     cls: 'bg-orange-100 dark:bg-orange-400/10 text-orange-700 dark:text-orange-300',     color: '#f97316' },
-  in_progress:         { label: 'در حال ویزیت',  cls: 'bg-purple-100 dark:bg-purple-400/10 text-purple-700 dark:text-purple-300',     color: '#8b5cf6' },
-  visited:             { label: 'ویزیت شده',     cls: 'bg-emerald-100 dark:bg-emerald-400/10 text-emerald-700 dark:text-emerald-300', color: '#10b981' },
-  completed:           { label: 'تکمیل شده',     cls: 'bg-green-100 dark:bg-green-400/10 text-green-700 dark:text-green-300',         color: '#22c55e' },
-  cancelled_by_doctor: { label: 'لغو پزشک',      cls: 'bg-red-100 dark:bg-red-400/10 text-red-700 dark:text-red-300',                color: '#ef4444' },
-  cancelled_by_user:   { label: 'لغو بیمار',     cls: 'bg-red-100 dark:bg-red-400/10 text-red-700 dark:text-red-300',                color: '#f43f5e' },
-  auto_cancel_unpaid:  { label: 'لغو خودکار',    cls: 'bg-slate-100 dark:bg-slate-400/10 text-slate-600 dark:text-slate-400',        color: '#94a3b8' },
-  no_show:             { label: 'غیبت',           cls: 'bg-slate-100 dark:bg-slate-400/10 text-slate-600 dark:text-slate-400',        color: '#64748b' },
+const APPT_LABEL: Record<string, string> = {
+  waiting_for_payment: 'انتظار پرداخت', reserved: 'رزرو شده', checked_in: 'ورود به مطب',
+  waiting: 'صف انتظار', in_progress: 'در حال ویزیت', visited: 'ویزیت شده',
+  completed: 'تکمیل شده', cancelled_by_doctor: 'لغو پزشک', cancelled_by_user: 'لغو بیمار',
+  auto_cancel_unpaid: 'لغو خودکار', no_show: 'غیبت',
+};
+const APPT_COLOR: Record<string, string> = {
+  waiting_for_payment: '#f59e0b', reserved: '#3b82f6', checked_in: '#6366f1',
+  waiting: '#f97316', in_progress: '#8b5cf6', visited: '#10b981',
+  completed: '#22c55e', cancelled_by_doctor: '#ef4444', cancelled_by_user: '#f43f5e',
+  auto_cancel_unpaid: '#94a3b8', no_show: '#64748b',
+};
+const APPT_CLS: Record<string, string> = {
+  waiting_for_payment: 'amber', reserved: 'blue', checked_in: 'violet',
+  waiting: 'amber', in_progress: 'violet', visited: 'green', completed: 'green',
+  cancelled_by_doctor: 'red', cancelled_by_user: 'red', auto_cancel_unpaid: 'gray', no_show: 'gray',
+};
+const PAY_LABEL: Record<string, string> = {
+  pending: 'در انتظار', received: 'موفق', canceled: 'لغو شده', refund: 'استرداد',
+};
+const PAY_COLOR: Record<string, string> = {
+  pending: '#f59e0b', received: '#22c55e', canceled: '#ef4444', refund: '#3b82f6',
+};
+const PAY_CLS: Record<string, string> = {
+  pending: 'amber', received: 'green', canceled: 'red', refund: 'blue',
 };
 
-const PAY: Record<string, { label: string; cls: string; color: string }> = {
-  pending:  { label: 'در انتظار', cls: 'bg-yellow-100 dark:bg-yellow-400/10 text-yellow-700 dark:text-yellow-300', color: '#f59e0b' },
-  received: { label: 'موفق',      cls: 'bg-green-100 dark:bg-green-400/10 text-green-700 dark:text-green-300',     color: '#22c55e' },
-  canceled: { label: 'لغو شده',   cls: 'bg-red-100 dark:bg-red-400/10 text-red-700 dark:text-red-300',            color: '#ef4444' },
-  refund:   { label: 'استرداد',   cls: 'bg-blue-100 dark:bg-blue-400/10 text-blue-700 dark:text-blue-300',        color: '#3b82f6' },
-};
+// ── SVG Chart Components ──────────────────────────────────────────────────
 
-// ── Skeletons ─────────────────────────────────────────────────────────────
-
-function KpiSkeleton() {
+function SvgLineChart({ data, color, h = 220 }: { data: number[]; color: string; h?: number }) {
+  if (data.length < 2) return null;
+  const w = 760, pad = 8;
+  const max = Math.max(...data) * 1.15 || 1;
+  const stepX = (w - pad * 2) / (data.length - 1);
+  const pts: [number, number][] = data.map((v, i) => [
+    pad + i * stepX,
+    h - pad - (v / max) * (h - pad * 2 - 18),
+  ]);
+  const d = pts.map((p, i) => {
+    if (i === 0) return `M${p[0]},${p[1]}`;
+    const prev = pts[i - 1];
+    const cx = (prev[0] + p[0]) / 2;
+    return `C${cx},${prev[1]} ${cx},${p[1]} ${p[0]},${p[1]}`;
+  }).join(' ');
+  const area = `${d} L${pts[pts.length - 1][0]},${h - pad} L${pts[0][0]},${h - pad} Z`;
+  const gid = 'lg' + color.replace(/[^a-z0-9]/gi, '');
   return (
-    <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>
+    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} preserveAspectRatio="none" style={{ overflow: 'visible' }}>
+      <defs>
+        <linearGradient id={gid} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor={color} stopOpacity={0.22} />
+          <stop offset="100%" stopColor={color} stopOpacity={0} />
+        </linearGradient>
+      </defs>
+      {[0.25, 0.5, 0.75, 1].map((g, i) => (
+        <line key={i} x1={pad} x2={w - pad} y1={(h - pad * 2) * g} y2={(h - pad * 2) * g}
+          stroke="var(--border)" strokeDasharray="4 6" strokeWidth={1} />
+      ))}
+      <path d={area} fill={`url(#${gid})`} className="ln-area" />
+      <path d={d} fill="none" stroke={color} strokeWidth={2.6} strokeLinecap="round" className="ln-path" />
+      {pts.map((p, i) => i % 4 === 0 && (
+        <circle key={i} cx={p[0]} cy={p[1]} r={3.2} fill="var(--surface)" stroke={color} strokeWidth={2.2} />
+      ))}
+      <style>{`.ln-path{stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 1.4s cubic-bezier(.22,.61,.36,1) forwards}.ln-area{opacity:0;animation:fadein .9s .5s forwards}@keyframes draw{to{stroke-dashoffset:0}}`}</style>
+    </svg>
   );
 }
 
-function ChartSkeleton({ h = 'h-56' }: { h?: string }) {
-  return <div className={`${h} rounded-xl skeleton w-full`} />;
+function SvgDonut({ data, size = 190 }: { data: { value: number; color: string; label: string }[]; size?: number }) {
+  const total = data.reduce((s, d) => s + d.value, 0);
+  if (!total) return null;
+  const r = size / 2 - 16;
+  const c = 2 * Math.PI * r;
+  let off = 0;
+  return (
+    <svg viewBox={`0 0 ${size} ${size}`} width={size} height={size}>
+      <g transform={`rotate(-90 ${size / 2} ${size / 2})`}>
+        {data.map((d, i) => {
+          const frac = d.value / total;
+          const seg = (
+            <circle key={i} cx={size / 2} cy={size / 2} r={r} fill="none"
+              stroke={d.color} strokeWidth={20} strokeLinecap="round"
+              strokeDasharray={`${Math.max(frac * c - 4, 0)} ${c}`}
+              strokeDashoffset={-off * c} />
+          );
+          off += frac;
+          return seg;
+        })}
+      </g>
+      <text x="50%" y="46%" textAnchor="middle" fontSize="13" fill="var(--text-3)" fontFamily="Vazirmatn">مجموع</text>
+      <text x="50%" y="60%" textAnchor="middle" fontSize="22" fontWeight="800" fill="var(--text)" fontFamily="Vazirmatn">{formatNumber(total)}</text>
+    </svg>
+  );
 }
 
-function ListSkeleton() {
+function SvgHBars({ data }: { data: { label: string; value: number }[] }) {
+  const max = Math.max(...data.map(d => d.value)) || 1;
   return (
-    <div className="space-y-3">
-      {Array.from({ length: 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 style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+      {data.map((d, i) => (
+        <div key={i} style={{ display: 'grid', gridTemplateColumns: '160px 1fr 52px', alignItems: 'center', gap: 12 }}>
+          <div style={{ fontSize: 12.5, color: 'var(--text-2)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{d.label}</div>
+          <div className="bar" style={{ height: 12 }}>
+            <i style={{ width: `${(d.value / max) * 100}%`, animation: `growbar 1s ${i * 0.07}s cubic-bezier(.22,.61,.36,1) both` }} />
           </div>
+          <div style={{ fontSize: 12.5, fontWeight: 700 }}>{formatNumber(d.value)}</div>
         </div>
       ))}
     </div>
   );
 }
 
-// ── Badge ─────────────────────────────────────────────────────────────────
+// ── Colored Avatar ────────────────────────────────────────────────────────
 
-function Badge({ 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' };
+function AvatarEl({ initials, hue = 222, size }: { initials: string; hue?: number; size?: 'sm' | 'lg' }) {
+  const cls = 'avatar' + (size === 'sm' ? ' sm' : size === 'lg' ? ' lg' : '');
   return (
-    <span className={`shrink-0 text-[10px] font-medium px-2 py-0.5 rounded-full ${s.cls}`}>{s.label}</span>
-  );
-}
-
-// ── Chart helpers ─────────────────────────────────────────────────────────
-
-const RADIAN = Math.PI / 180;
-
-function PieLabelInside({ cx, cy, midAngle, innerRadius, outerRadius, percent }: {
-  cx: number; cy: number; midAngle: number; innerRadius: number; outerRadius: number; percent: number;
-}) {
-  if (percent < 0.06) return null;
-  const r = innerRadius + (outerRadius - innerRadius) * 0.5;
-  const x = cx + r * Math.cos(-midAngle * RADIAN);
-  const y = cy + r * Math.sin(-midAngle * RADIAN);
-  return (
-    <text x={x} y={y} fill="white" textAnchor="middle" dominantBaseline="central" fontSize={10} fontWeight="600">
-      {`${(percent * 100).toFixed(0)}٪`}
-    </text>
-  );
-}
-
-function TipBox({ children }: { children: React.ReactNode }) {
-  return (
-    <div
-      className="bg-white dark:bg-gray-800 rounded-xl border border-slate-200 dark:border-gray-700 shadow-lg px-3 py-2 text-sm"
-      dir="rtl"
-    >
-      {children}
+    <div className={cls} style={{ background: `linear-gradient(145deg, oklch(0.62 0.15 ${hue}), oklch(0.48 0.16 ${hue}))` }}>
+      {initials}
     </div>
   );
 }
 
-function ApptTooltip({ active, payload, label }: { active?: boolean; payload?: { value: number }[]; label?: string }) {
-  if (!active || !payload?.length) return null;
+// ── MiniList ──────────────────────────────────────────────────────────────
+
+interface MiniRow {
+  title: string;
+  sub: string;
+  meta: string;
+  badgeLabel: string;
+  badgeCls: string;
+  initials: string;
+  hue: number;
+}
+
+function MiniList({ title, to, rows, loading }: { title: string; to: string; rows: MiniRow[]; loading?: boolean }) {
   return (
-    <TipBox>
-      <p className="text-xs text-slate-500 dark:text-slate-400 mb-0.5">{label}</p>
-      <p className="font-bold text-violet-600 dark:text-violet-400">{formatNumber(payload[0]?.value ?? 0)} نوبت</p>
-    </TipBox>
+    <div className="card card-pad">
+      <div className="card-title-row">
+        <h3 style={{ fontSize: 16 }}>{title}</h3>
+        <Link to={to} className="link">همه</Link>
+      </div>
+      {loading ? (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} style={{ display: 'flex', gap: 11, alignItems: 'center' }}>
+              <div className="skeleton" style={{ width: 32, height: 32, borderRadius: '50%', flexShrink: 0 }} />
+              <div style={{ flex: 1 }}>
+                <div className="skeleton" style={{ height: 13, borderRadius: 5, width: '70%', marginBottom: 5 }} />
+                <div className="skeleton" style={{ height: 11, borderRadius: 5, width: '50%' }} />
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : !rows.length ? (
+        <p className="muted" style={{ textAlign: 'center', padding: '32px 0', fontSize: 13.5 }}>موردی ثبت نشده</p>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+          {rows.map((r, i) => (
+            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '10px 0', borderBottom: i < rows.length - 1 ? '1px solid var(--border)' : 'none' }}>
+              <AvatarEl initials={r.initials} hue={r.hue} size="sm" />
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <b style={{ fontSize: 13.5, display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.title}</b>
+                <span className="muted" style={{ fontSize: 11.5 }}>{r.sub}</span>
+              </div>
+              <div style={{ textAlign: 'start', flexShrink: 0 }}>
+                <span className={`badge ${r.badgeCls}`}><span className="bdot" />{r.badgeLabel}</span>
+                <div className="muted" style={{ fontSize: 10.5, marginTop: 3 }}>{r.meta}</div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
   );
 }
 
-function RevTooltip({ active, payload, label }: { active?: boolean; payload?: { value: number }[]; label?: string }) {
-  if (!active || !payload?.length) return null;
+// ── Skeleton ──────────────────────────────────────────────────────────────
+
+function KpiSkeleton() {
   return (
-    <TipBox>
-      <p className="text-xs text-slate-500 dark:text-slate-400 mb-0.5">{label}</p>
-      <p className="font-bold text-pink-600 dark:text-pink-400">{formatRial(payload[0]?.value ?? 0)}</p>
-    </TipBox>
+    <div className="stat">
+      <div className="skeleton" style={{ width: 40, height: 40, borderRadius: 12, marginBottom: 14 }} />
+      <div className="skeleton" style={{ height: 13, borderRadius: 6, width: '60%', marginBottom: 6 }} />
+      <div className="skeleton" style={{ height: 26, borderRadius: 6, width: '45%', marginBottom: 4 }} />
+      <div className="skeleton" style={{ height: 12, borderRadius: 6, width: '75%' }} />
+    </div>
   );
 }
 
-function BarTip({ active, payload, label }: { active?: boolean; payload?: { value: number }[]; label?: string }) {
-  if (!active || !payload?.length) return null;
-  return (
-    <TipBox>
-      <p className="font-medium text-slate-700 dark:text-slate-200 mb-0.5">{label}</p>
-      <p className="font-bold text-violet-600 dark:text-violet-400">{formatNumber(payload[0]?.value ?? 0)} نوبت</p>
-    </TipBox>
-  );
-}
-
-const revAxisFmt = (v: number) =>
-  v >= 1_000_000_000 ? `${(v / 1_000_000_000).toFixed(1)}B`
-  : v >= 1_000_000  ? `${(v / 1_000_000).toFixed(0)}M`
-  : v >= 1_000      ? `${Math.round(v / 1_000)}K`
-  : String(v);
-
 // ── Main Component ────────────────────────────────────────────────────────
 
 export default function DashboardPage() {
-  const [chartTab, setChartTab] = useState<'appointments' | 'revenue'>('appointments');
+  const [chartMode, setChartMode] = useState<'appts' | 'rev'>('appts');
 
   const statsQ = useQuery({
     queryKey: ['dashboard-stats'],
@@ -209,280 +264,248 @@ export default function DashboardPage() {
     staleTime: 30_000,
   });
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const stats  = useMemo<DashboardStats | undefined>(() => (statsQ.data?.data  as any)?.data ?? statsQ.data?.data,  [statsQ.data]);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const charts = useMemo<ChartData | undefined>(     () => (chartsQ.data?.data as any)?.data ?? chartsQ.data?.data, [chartsQ.data]);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const recent = useMemo<RecentData | undefined>(    () => (recentQ.data?.data as any)?.data ?? recentQ.data?.data, [recentQ.data]);
 
   const fn = (n?: number) => n !== undefined ? formatNumber(n) : '—';
   const fr = (n?: number) => n !== undefined ? formatRial(n) : '—';
   const today = new Date().toLocaleDateString('fa-IR', { year: 'numeric', month: 'long', day: 'numeric' });
+  const isFetching = statsQ.isFetching || chartsQ.isFetching || recentQ.isFetching;
+
+  // Chart data transformations
+  const apptSeries = useMemo(() => charts?.appointments_30d?.map(d => d.count) ?? [], [charts]);
+  const revSeries  = useMemo(() => charts?.revenue_30d?.map(d => d.amount) ?? [], [charts]);
+  const donutData  = useMemo(() =>
+    (charts?.appointment_status ?? []).slice(0, 7).map(s => ({
+      label: APPT_LABEL[s.status] ?? s.status,
+      value: s.count,
+      color: APPT_COLOR[s.status] ?? '#94a3b8',
+    })), [charts]);
+  const hbarsData = useMemo(() =>
+    (charts?.top_specialties ?? []).map(s => ({ label: s.name, value: s.count })), [charts]);
 
   // KPI cards
   const kpiCards = [
-    { label: 'کل کاربران',      value: fn(stats?.total_users),          sub: undefined,                                                              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),        sub: undefined,                                                              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.this_month_appointments)}` : undefined,  icon: CalendarDaysIcon,         iconBg: 'bg-orange-100 dark:bg-orange-400/10', iconColor: 'text-orange-600 dark:text-orange-400' },
-    { label: 'درآمد این ماه',   value: fr(stats?.this_month_revenue),   sub: stats ? `کل: ${fr(stats.total_payments_amount)}` : undefined,          icon: CreditCardIcon,           iconBg: 'bg-pink-100 dark:bg-pink-400/10', iconColor: 'text-pink-600 dark:text-pink-400' },
-    { label: 'در انتظار بررسی', value: fn(stats ? stats.pending_comments + stats.pending_settlements : undefined), sub: stats ? `${fn(stats.pending_comments)} نظر · ${fn(stats.pending_settlements)} تسویه` : undefined, icon: BellAlertIcon, iconBg: 'bg-amber-100 dark:bg-amber-400/10', iconColor: 'text-amber-600 dark:text-amber-400' },
+    { label: 'کل کاربران',      value: fn(stats?.total_users),        hint: 'رشد نسبت به ماه قبل',                                  icon: UserGroupIcon,        color: 'var(--violet)',  bg: 'var(--violet-bg)'   },
+    { label: 'پزشکان فعال',     value: fn(stats?.active_doctors),     hint: stats ? `از ${fn(stats.total_doctors)} پزشک` : '',      icon: HeartIcon,            color: 'var(--success)', bg: 'var(--success-bg)'  },
+    { label: 'کلینیک‌ها',       value: fn(stats?.total_clinics),      hint: '',                                                      icon: BuildingOffice2Icon,  color: 'var(--info)',    bg: 'var(--info-bg)'     },
+    { label: 'نوبت‌های امروز',  value: fn(stats?.today_appointments), hint: stats ? `ماه جاری: ${fn(stats.this_month_appointments)}` : '', icon: CalendarDaysIcon, color: 'var(--warning)', bg: 'var(--warning-bg)'  },
+    { label: 'درآمد این ماه',   value: fr(stats?.this_month_revenue), hint: 'تومان',                                                 icon: CreditCardIcon,       color: 'var(--primary)', bg: 'var(--primary-soft)' },
+    { label: 'در انتظار بررسی', value: fn(stats ? stats.pending_comments + stats.pending_settlements : undefined), hint: stats ? `${fn(stats.pending_comments)} نظر · ${fn(stats.pending_settlements)} تسویه` : '', icon: BellAlertIcon, color: 'var(--danger)', bg: 'var(--danger-bg)' },
   ];
 
-  // Activity timeline
-  const timelineEvents = useMemo(() => {
-    if (!recent) return [];
-    const evs: { title: string; sub?: string; time: string; color: string }[] = [];
-    (recent.appointments ?? []).slice(0, 4).forEach((a) => {
-      evs.push({ title: `نوبت ${APPT[a.status]?.label ?? a.status}`, sub: `${a.user_name || a.user_mobile} · دکتر ${a.doctor_name}`, time: a.created_at, color: APPT[a.status]?.color ?? '#94a3b8' });
-    });
-    (recent.payments ?? []).slice(0, 3).forEach((p) => {
-      evs.push({ title: `پرداخت ${PAY[p.status]?.label ?? p.status}`, sub: `${p.user_name || p.user_mobile} · ${formatRial(p.amount)}`, time: p.created_at, color: PAY[p.status]?.color ?? '#94a3b8' });
-    });
-    (recent.users ?? []).slice(0, 3).forEach((u) => {
-      evs.push({ title: 'ثبت‌نام کاربر جدید', sub: u.name || u.mobile, time: u.created_at, color: '#8b5cf6' });
-    });
-    return evs.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime()).slice(0, 10);
-  }, [recent]);
-
   // Quick actions
   const quickActions = [
-    { label: 'پزشکان',    to: '/admin/doctors',      icon: HeartIcon,                 iconBg: 'bg-emerald-100 dark:bg-emerald-400/10', iconColor: 'text-emerald-600 dark:text-emerald-400' },
-    { label: 'کلینیک‌ها', to: '/admin/clinics',      icon: BuildingOffice2Icon,       iconBg: 'bg-blue-100 dark:bg-blue-400/10',       iconColor: 'text-blue-600 dark:text-blue-400' },
-    { label: 'نوبت‌ها',   to: '/admin/appointments', icon: CalendarDaysIcon,          iconBg: 'bg-orange-100 dark:bg-orange-400/10',   iconColor: 'text-orange-600 dark:text-orange-400' },
-    { label: 'پرداخت‌ها', to: '/admin/payments',     icon: CreditCardIcon,            iconBg: 'bg-pink-100 dark:bg-pink-400/10',       iconColor: 'text-pink-600 dark:text-pink-400' },
-    { label: 'کاربران',   to: '/admin/users',        icon: UserGroupIcon,             iconBg: 'bg-violet-100 dark:bg-violet-400/10',   iconColor: 'text-violet-600 dark:text-violet-400' },
-    { label: 'نظرات',     to: '/admin/comments',     icon: ChatBubbleLeftEllipsisIcon, iconBg: 'bg-amber-100 dark:bg-amber-400/10',    iconColor: 'text-amber-600 dark:text-amber-400' },
+    { label: 'پزشکان',    to: '/admin/doctors',      icon: HeartIcon,                  color: 'var(--success)', bg: 'var(--success-bg)'   },
+    { label: 'کلینیک‌ها', to: '/admin/clinics',      icon: BuildingOffice2Icon,        color: 'var(--info)',    bg: 'var(--info-bg)'      },
+    { label: 'نوبت‌ها',   to: '/admin/appointments', icon: CalendarDaysIcon,           color: 'var(--warning)', bg: 'var(--warning-bg)'   },
+    { label: 'پرداخت‌ها', to: '/admin/payments',     icon: CreditCardIcon,             color: 'var(--danger)',  bg: 'var(--danger-bg)'    },
+    { label: 'نظرات',     to: '/admin/comments',     icon: ChatBubbleLeftEllipsisIcon, color: 'var(--violet)',  bg: 'var(--violet-bg)'    },
+    { label: 'کاربران',   to: '/admin/users',        icon: UserGroupIcon,              color: 'var(--primary)', bg: 'var(--primary-soft)' },
   ];
 
-  const isFetching = statsQ.isFetching || chartsQ.isFetching || recentQ.isFetching;
+  // Timeline events
+  const timelineEvents = useMemo(() => {
+    if (!recent) return [];
+    const evs: { title: string; sub: string; time: string; color: string }[] = [];
+    (recent.appointments ?? []).slice(0, 4).forEach(a => {
+      evs.push({ title: `نوبت ${APPT_LABEL[a.status] ?? a.status}`, sub: `${a.user_name || a.user_mobile} · دکتر ${a.doctor_name}`, time: a.created_at, color: APPT_COLOR[a.status] ?? '#94a3b8' });
+    });
+    (recent.payments ?? []).slice(0, 3).forEach(p => {
+      evs.push({ title: `پرداخت ${PAY_LABEL[p.status] ?? p.status}`, sub: `${p.user_name || p.user_mobile} · ${formatRial(p.amount)}`, time: p.created_at, color: PAY_COLOR[p.status] ?? '#94a3b8' });
+    });
+    (recent.users ?? []).slice(0, 3).forEach(u => {
+      evs.push({ title: 'ثبت‌نام کاربر جدید', sub: u.name || u.mobile, time: u.created_at, color: '#8b5cf6' });
+    });
+    return evs.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime()).slice(0, 8);
+  }, [recent]);
+
+  // MiniList rows
+  const apptRows = useMemo<MiniRow[]>(() =>
+    (recent?.appointments ?? []).slice(0, 5).map(a => ({
+      title: a.user_name || a.user_mobile,
+      sub: `دکتر ${a.doctor_name}`,
+      meta: formatDateTime(a.slot_start),
+      badgeLabel: APPT_LABEL[a.status] ?? a.status,
+      badgeCls: APPT_CLS[a.status] ?? 'gray',
+      initials: (a.user_name || a.user_mobile).slice(0, 2),
+      hue: 222,
+    })), [recent]);
+
+  const payRows = useMemo<MiniRow[]>(() =>
+    (recent?.payments ?? []).slice(0, 5).map(p => ({
+      title: p.user_name || p.user_mobile,
+      sub: formatRial(p.amount),
+      meta: formatDateTime(p.created_at),
+      badgeLabel: PAY_LABEL[p.status] ?? p.status,
+      badgeCls: PAY_CLS[p.status] ?? 'gray',
+      initials: (p.user_name || p.user_mobile).slice(0, 2),
+      hue: 162,
+    })), [recent]);
+
+  const userRows = useMemo<MiniRow[]>(() =>
+    (recent?.users ?? []).slice(0, 5).map(u => ({
+      title: u.name || u.mobile,
+      sub: u.name ? u.mobile : '',
+      meta: formatDateTime(u.created_at),
+      badgeLabel: 'فعال',
+      badgeCls: 'green',
+      initials: (u.name || u.mobile).slice(0, 2),
+      hue: 256,
+    })), [recent]);
 
   return (
-    <div className="animate-slide-up space-y-5">
+    <div className="fade-in">
 
-      {/* Header */}
-      <div className="flex items-center justify-between">
+      {/* Page header */}
+      <div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
         <div>
-          <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">{today}</p>
+          <h1 className="section-title">داشبورد</h1>
+          <div className="muted" style={{ fontSize: 13, marginTop: 2 }}>{today} · نمای کلی عملکرد مجموعه</div>
+        </div>
+        <div style={{ display: 'flex', gap: 10 }}>
+          <button className="btn ghost sm">گزارش</button>
+          <button className="btn primary sm" disabled={isFetching}
+            onClick={() => { statsQ.refetch(); chartsQ.refetch(); recentQ.refetch(); }}>
+            <ArrowPathIcon style={{ width: 14, height: 14 }} />
+            به‌روزرسانی
+          </button>
         </div>
-        <button
-          onClick={() => { statsQ.refetch(); chartsQ.refetch(); recentQ.refetch(); }}
-          disabled={isFetching}
-          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 disabled:opacity-50"
-        >
-          <ArrowPathIcon className={`w-4 h-4 ${isFetching ? 'animate-spin' : ''}`} />
-          به‌روزرسانی
-        </button>
       </div>
 
-      {/* ── Section 1: KPI Cards ─────────────────────────────────── */}
-      <div className="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-6 gap-3">
+      {/* Stat cards (6-col grid) */}
+      <div className="stat-grid">
         {statsQ.isLoading
           ? Array.from({ length: 6 }).map((_, i) => <KpiSkeleton key={i} />)
-          : kpiCards.map((c) => (
-            <div key={c.label} className="cp-card p-4 flex items-start gap-3">
-              <div className={`cp-stat-icon ${c.iconBg} shrink-0`}>
-                <c.icon className={`w-5 h-5 ${c.iconColor}`} />
+          : kpiCards.map(c => (
+            <div key={c.label} className="stat">
+              <div className="ico" style={{ background: c.bg, color: c.color }}>
+                <c.icon style={{ width: 21, height: 21 }} />
               </div>
-              <div className="min-w-0 flex-1">
-                <p className="text-xs text-slate-500 dark:text-slate-400 mb-1 truncate">{c.label}</p>
-                <p className="text-lg font-bold text-slate-900 dark:text-slate-50 leading-none">{c.value}</p>
-                {c.sub && <p className="text-[11px] text-slate-400 dark:text-slate-500 mt-1.5 leading-tight">{c.sub}</p>}
+              <div className="lbl">{c.label}</div>
+              <div className="val">{c.value}</div>
+              <div style={{ display: 'flex', gap: 8, justifyContent: 'space-between' }}>
+                <span className="hint">{c.hint}</span>
               </div>
             </div>
           ))
         }
       </div>
 
-      {/* ── Section 2: Charts ───────────────────────────────────── */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
-
-        {/* Trend chart with tab toggle */}
-        <div className="cp-card p-5 lg:col-span-2">
-          <div className="flex items-center justify-between mb-4">
-            <h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200">
-              {chartTab === 'appointments' ? 'نوبت‌ها — ۳۰ روز اخیر' : 'درآمد — ۳۰ روز اخیر'}
-            </h3>
-            <div className="flex gap-0.5 bg-slate-100 dark:bg-gray-800 rounded-lg p-0.5">
-              {(['appointments', 'revenue'] as const).map((tab) => (
-                <button
-                  key={tab}
-                  onClick={() => setChartTab(tab)}
-                  className={`text-xs px-3 py-1 rounded-md transition-all ${
-                    chartTab === tab
-                      ? 'bg-white dark:bg-gray-700 text-slate-800 dark:text-slate-200 shadow-sm font-medium'
-                      : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300'
-                  }`}
-                >
-                  {tab === 'appointments' ? 'نوبت‌ها' : 'درآمد'}
-                </button>
-              ))}
-            </div>
-          </div>
-          {chartsQ.isLoading ? <ChartSkeleton h="h-52" /> : (
-            <div dir="ltr" className="w-full h-52">
-              <ResponsiveContainer width="100%" height="100%">
-                {chartTab === 'appointments' ? (
-                  <AreaChart data={charts?.appointments_30d ?? []} margin={{ top: 4, right: 4, left: -16, bottom: 0 }}>
-                    <defs>
-                      <linearGradient id="apptGrad" x1="0" y1="0" x2="0" y2="1">
-                        <stop offset="5%"  stopColor="#8b5cf6" stopOpacity={0.25} />
-                        <stop offset="95%" stopColor="#8b5cf6" stopOpacity={0} />
-                      </linearGradient>
-                    </defs>
-                    <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" strokeOpacity={0.6} />
-                    <XAxis dataKey="date" tick={{ fontSize: 10, fill: '#94a3b8' }} interval={4} tickLine={false} axisLine={false} />
-                    <YAxis tick={{ fontSize: 10, fill: '#94a3b8' }} tickLine={false} axisLine={false} />
-                    <Tooltip content={<ApptTooltip />} cursor={{ stroke: '#8b5cf6', strokeWidth: 1, strokeDasharray: '4 4' }} />
-                    <Area type="monotone" dataKey="count" stroke="#8b5cf6" strokeWidth={2.5} fill="url(#apptGrad)" dot={false} activeDot={{ r: 4, fill: '#8b5cf6', strokeWidth: 0 }} />
-                  </AreaChart>
-                ) : (
-                  <AreaChart data={charts?.revenue_30d ?? []} margin={{ top: 4, right: 4, left: -4, bottom: 0 }}>
-                    <defs>
-                      <linearGradient id="revGrad" x1="0" y1="0" x2="0" y2="1">
-                        <stop offset="5%"  stopColor="#ec4899" stopOpacity={0.25} />
-                        <stop offset="95%" stopColor="#ec4899" stopOpacity={0} />
-                      </linearGradient>
-                    </defs>
-                    <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" strokeOpacity={0.6} />
-                    <XAxis dataKey="date" tick={{ fontSize: 10, fill: '#94a3b8' }} interval={4} tickLine={false} axisLine={false} />
-                    <YAxis tick={{ fontSize: 10, fill: '#94a3b8' }} tickLine={false} axisLine={false} tickFormatter={revAxisFmt} />
-                    <Tooltip content={<RevTooltip />} cursor={{ stroke: '#ec4899', strokeWidth: 1, strokeDasharray: '4 4' }} />
-                    <Area type="monotone" dataKey="amount" stroke="#ec4899" strokeWidth={2.5} fill="url(#revGrad)" dot={false} activeDot={{ r: 4, fill: '#ec4899', strokeWidth: 0 }} />
-                  </AreaChart>
-                )}
-              </ResponsiveContainer>
-            </div>
+      {/* dash-main: Donut (360px) + LineChart (1fr) */}
+      <div className="dash-main">
+        <div className="card card-pad">
+          <div className="card-title-row"><h3 style={{ fontSize: 16 }}>وضعیت نوبت‌ها</h3></div>
+          {chartsQ.isLoading ? (
+            <>
+              <div className="skeleton" style={{ width: 190, height: 190, borderRadius: '50%', margin: '6px auto 18px' }} />
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
+                {Array.from({ length: 5 }).map((_, i) => (
+                  <div key={i} className="skeleton" style={{ height: 14, borderRadius: 5 }} />
+                ))}
+              </div>
+            </>
+          ) : (
+            <>
+              <div style={{ display: 'flex', justifyContent: 'center', margin: '6px 0 18px' }}>
+                <SvgDonut data={donutData} />
+              </div>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
+                {donutData.map((d, i) => (
+                  <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 13 }}>
+                    <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                      <span style={{ width: 9, height: 9, borderRadius: 3, background: d.color, flexShrink: 0, display: 'inline-block' }} />
+                      <span style={{ color: 'var(--text-2)' }}>{d.label}</span>
+                    </span>
+                    <b>{formatNumber(d.value)}</b>
+                  </div>
+                ))}
+              </div>
+            </>
           )}
         </div>
 
-        {/* Donut chart — appointment status */}
-        <div className="cp-card p-5">
-          <h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200 mb-4">وضعیت نوبت‌ها</h3>
-          {chartsQ.isLoading ? <ChartSkeleton h="h-40" /> : (
-            <div dir="ltr" className="w-full h-40">
-              <ResponsiveContainer width="100%" height="100%">
-                <PieChart>
-                  <Pie
-                    data={charts?.appointment_status?.slice(0, 7) ?? []}
-                    dataKey="count"
-                    nameKey="status"
-                    cx="50%" cy="50%"
-                    innerRadius={42} outerRadius={68}
-                    labelLine={false}
-                    label={PieLabelInside as any}
-                  >
-                    {(charts?.appointment_status?.slice(0, 7) ?? []).map((entry: { status: string }) => (
-                      <Cell key={entry.status} fill={APPT[entry.status]?.color ?? '#94a3b8'} />
-                    ))}
-                  </Pie>
-                  <Tooltip
-                    formatter={(value, name) => [formatNumber(Number(value)), APPT[String(name)]?.label ?? String(name)]}
-                  />
-                </PieChart>
-              </ResponsiveContainer>
+        <div className="card card-pad">
+          <div className="card-title-row">
+            <h3 style={{ fontSize: 16 }}>{chartMode === 'appts' ? 'نوبت‌ها' : 'درآمد'} — ۳۰ روز اخیر</h3>
+            <div className="seg">
+              <button className={chartMode === 'appts' ? 'on' : ''} onClick={() => setChartMode('appts')}>نوبت‌ها</button>
+              <button className={chartMode === 'rev' ? 'on' : ''} onClick={() => setChartMode('rev')}>درآمد</button>
             </div>
-          )}
-          {!chartsQ.isLoading && (
-            <ul className="mt-3 space-y-1.5">
-              {(charts?.appointment_status ?? []).slice(0, 5).map((s: { status: string; count: number }) => (
-                <li key={s.status} className="flex items-center justify-between">
-                  <div className="flex items-center gap-1.5">
-                    <span className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: APPT[s.status]?.color ?? '#94a3b8' }} />
-                    <span className="text-xs text-slate-600 dark:text-slate-400">{APPT[s.status]?.label ?? s.status}</span>
-                  </div>
-                  <span className="text-xs font-semibold text-slate-800 dark:text-slate-200">{formatNumber(s.count)}</span>
-                </li>
-              ))}
-            </ul>
+          </div>
+          {chartsQ.isLoading ? (
+            <div className="skeleton" style={{ height: 236, borderRadius: 'var(--r)' }} />
+          ) : (
+            <SvgLineChart key={chartMode}
+              data={chartMode === 'appts' ? apptSeries : revSeries}
+              color={chartMode === 'appts' ? 'var(--primary)' : 'var(--success)'}
+              h={236} />
           )}
         </div>
       </div>
 
-      {/* ── Section 3: Top Specialties Bar Chart ─────────────────── */}
-      <div className="cp-card p-5">
-        <h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200 mb-4">پرتکرارترین تخصص‌ها</h3>
-        {chartsQ.isLoading ? <ChartSkeleton h="h-64" /> : !charts?.top_specialties?.length ? (
-          <p className="text-center py-10 text-sm text-slate-400 dark:text-slate-500">داده‌ای موجود نیست</p>
+      {/* Top specialties (HBars) */}
+      <div className="card card-pad" style={{ marginBottom: 'var(--gap)' }}>
+        <div className="card-title-row">
+          <h3 style={{ fontSize: 16 }}>پرتکرارترین تخصص‌ها</h3>
+          <span className="muted" style={{ fontSize: 12 }}>بر اساس تعداد نوبت</span>
+        </div>
+        {chartsQ.isLoading ? (
+          <div className="skeleton" style={{ height: 200, borderRadius: 'var(--r)' }} />
+        ) : !hbarsData.length ? (
+          <p className="muted" style={{ textAlign: 'center', padding: '40px 0', fontSize: 13.5 }}>داده‌ای موجود نیست</p>
         ) : (
-          <div dir="ltr" className="w-full h-64">
-            <ResponsiveContainer width="100%" height="100%">
-              <BarChart
-                data={charts.top_specialties}
-                layout="vertical"
-                margin={{ top: 0, right: 16, left: 0, bottom: 0 }}
-              >
-                <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" strokeOpacity={0.6} horizontal={false} />
-                <XAxis type="number" tick={{ fontSize: 10, fill: '#94a3b8' }} tickLine={false} axisLine={false} />
-                <YAxis type="category" dataKey="name" width={140} tick={{ fontSize: 11, fill: '#64748b' }} tickLine={false} axisLine={false} />
-                <Tooltip content={<BarTip />} cursor={{ fill: 'rgba(139,92,246,0.08)' }} />
-                <Bar dataKey="count" fill="#8b5cf6" radius={[0, 5, 5, 0]} maxBarSize={22} />
-              </BarChart>
-            </ResponsiveContainer>
-          </div>
+          <SvgHBars data={hbarsData} />
         )}
       </div>
 
-      {/* ── Sections 4 & 5: Quick Actions + Activity Timeline ─────── */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
-
-        {/* Quick actions */}
-        <div className="cp-card p-5">
-          <h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200 mb-4">دسترسی سریع</h3>
-          <div className="grid grid-cols-2 gap-2">
-            {quickActions.map((a) => (
-              <Link
-                key={a.to}
-                to={a.to}
-                className="flex flex-col items-center gap-2 p-3 rounded-xl hover:bg-slate-50 dark:hover:bg-gray-800 border border-transparent hover:border-slate-200 dark:hover:border-gray-700 transition-all group"
-              >
-                <div className={`w-10 h-10 rounded-xl ${a.iconBg} flex items-center justify-center`}>
-                  <a.icon className={`w-5 h-5 ${a.iconColor}`} />
-                </div>
-                <span className="text-xs font-medium text-slate-700 dark:text-slate-300 text-center group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
-                  {a.label}
+      {/* grid-2: Quick access + Timeline */}
+      <div className="grid-2" style={{ marginBottom: 'var(--gap)' }}>
+        <div className="card card-pad">
+          <div className="card-title-row"><h3 style={{ fontSize: 16 }}>دسترسی سریع</h3></div>
+          <div className="quick-grid" style={{ gridTemplateColumns: 'repeat(3,1fr)' }}>
+            {quickActions.map(a => (
+              <Link key={a.to} to={a.to} className="quick">
+                <span className="qi" style={{ background: a.bg, color: a.color }}>
+                  <a.icon style={{ width: 22, height: 22 }} />
                 </span>
+                <b>{a.label}</b>
               </Link>
             ))}
           </div>
         </div>
 
-        {/* Activity timeline */}
-        <div className="cp-card p-5 lg:col-span-2">
-          <h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200 mb-4">آخرین رویدادها</h3>
+        <div className="card card-pad">
+          <div className="card-title-row">
+            <h3 style={{ fontSize: 16 }}>آخرین رویدادها</h3>
+          </div>
           {recentQ.isLoading ? (
-            <div className="space-y-4">
-              {Array.from({ length: 6 }).map((_, i) => (
-                <div key={i} className="flex gap-3">
-                  <div className="flex flex-col items-center">
-                    <div className="w-2.5 h-2.5 rounded-full skeleton mt-1 shrink-0" />
-                    {i < 5 && <div className="w-px h-8 skeleton mt-1.5" />}
-                  </div>
-                  <div className="flex-1 pb-4 space-y-1.5">
-                    <div className="h-3 rounded skeleton w-3/4" />
-                    <div className="h-3 rounded skeleton w-1/2" />
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+              {Array.from({ length: 5 }).map((_, i) => (
+                <div key={i} style={{ display: 'flex', gap: 13, alignItems: 'flex-start' }}>
+                  <div className="skeleton" style={{ width: 9, height: 9, borderRadius: '50%', marginTop: 7, flexShrink: 0 }} />
+                  <div style={{ flex: 1 }}>
+                    <div className="skeleton" style={{ height: 13, borderRadius: 5, width: '70%', marginBottom: 5 }} />
+                    <div className="skeleton" style={{ height: 11, borderRadius: 5, width: '50%' }} />
                   </div>
                 </div>
               ))}
             </div>
           ) : !timelineEvents.length ? (
-            <p className="text-center py-8 text-sm text-slate-400 dark:text-slate-500">رویدادی ثبت نشده</p>
+            <p className="muted" style={{ textAlign: 'center', padding: '32px 0', fontSize: 13.5 }}>رویدادی ثبت نشده</p>
           ) : (
             <div>
-              {timelineEvents.map((ev, i) => (
-                <div key={i} className="flex gap-3">
-                  <div className="flex flex-col items-center">
-                    <div
-                      className="w-2.5 h-2.5 rounded-full shrink-0 mt-1.5 ring-2 ring-white dark:ring-gray-900"
-                      style={{ backgroundColor: ev.color }}
-                    />
-                    {i < timelineEvents.length - 1 && (
-                      <div className="w-px flex-1 bg-slate-200 dark:bg-gray-700 mt-1 mb-1" />
-                    )}
-                  </div>
-                  <div className={`flex-1 min-w-0 ${i < timelineEvents.length - 1 ? 'pb-3.5' : ''}`}>
-                    <p className="text-sm font-medium text-slate-800 dark:text-slate-200">{ev.title}</p>
-                    {ev.sub && <p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5 truncate">{ev.sub}</p>}
-                    <p className="text-[11px] text-slate-400 dark:text-slate-500 mt-0.5">{formatDateTime(ev.time)}</p>
+              {timelineEvents.map((e, i) => (
+                <div className="timeline-item" key={i}>
+                  <span className="tl-dot" style={{ background: e.color }}></span>
+                  <div className="tl-body">
+                    <b>{e.title}</b>
+                    {e.sub && <p>{e.sub}</p>}
+                    <time>{formatDateTime(e.time)}</time>
                   </div>
                 </div>
               ))}
@@ -491,94 +514,11 @@ export default function DashboardPage() {
         </div>
       </div>
 
-      {/* ── Section 6: Recent Data ───────────────────────────────── */}
-      <div className="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 ? <ListSkeleton /> : !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>
-                    <Badge status={a.status} map={APPT} />
-                  </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 ? <ListSkeleton /> : !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>
-                    <Badge status={p.status} map={PAY} />
-                  </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 ? <ListSkeleton /> : !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>
+      {/* dash-3: Three MiniLists */}
+      <div className="dash-3">
+        <MiniList title="آخرین نوبت‌ها"   to="/admin/appointments" rows={apptRows} loading={recentQ.isLoading} />
+        <MiniList title="آخرین پرداخت‌ها" to="/admin/payments"     rows={payRows}  loading={recentQ.isLoading} />
+        <MiniList title="کاربران جدید"     to="/admin/users"        rows={userRows} loading={recentQ.isLoading} />
       </div>
 
     </div>
diff --git a/assets/admin/pages/DoctorDetailPage.tsx b/assets/admin/pages/DoctorDetailPage.tsx
index 3150bd2e..38c810ce 100644
--- a/assets/admin/pages/DoctorDetailPage.tsx
+++ b/assets/admin/pages/DoctorDetailPage.tsx
@@ -835,7 +835,7 @@ function AddressModal({ open, onClose, existing, doctorUuid, onSaved }: {
       footer={
         <>
           <button type="button" onClick={onClose} className="cp-btn-secondary px-5">لغو</button>
-          <button form="addr-form" type="submit" disabled={saveMut.isPending} className="cp-btn-primary">
+          <button form="addr-form" type="submit" disabled={saveMut.isPending} className="btn primary sm">
             {saveMut.isPending ? 'در حال ذخیره...' : 'ذخیره'}
           </button>
         </>
@@ -847,7 +847,7 @@ function AddressModal({ open, onClose, existing, doctorUuid, onSaved }: {
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
           <div>
             <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">نام مطب / کلینیک</label>
-            <input type="text" className="cp-input" placeholder="مثال: کلینیک مهر" {...register('name')} />
+            <input type="text" className="input" placeholder="مثال: کلینیک مهر" {...register('name')} />
           </div>
           <div>
             <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">تلفن</label>
@@ -1364,7 +1364,7 @@ function DateOverrideModal({ open, onClose, existing, doctorUuid, onSaved }: {
         <>
           <button type="button" onClick={onClose} className="cp-btn-secondary px-5">لغو</button>
           <button type="button" onClick={() => saveMut.mutate()} disabled={saveMut.isPending || !dateStr}
-            className="cp-btn-primary">
+            className="btn primary sm">
             {saveMut.isPending ? 'در حال ذخیره...' : 'ذخیره'}
           </button>
         </>
@@ -1405,7 +1405,7 @@ function DateOverrideModal({ open, onClose, existing, doctorUuid, onSaved }: {
           <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">دلیل (اختیاری)</label>
           <input type="text" value={reason} onChange={e => setReason(e.target.value)}
             placeholder={overrideType === 'closed' ? 'مثال: سفر، مریضی، کنگره...' : 'مثال: شیفت اضطراری، ویزیت خاص...'}
-            className="cp-input" />
+            className="input" />
         </div>
 
         {overrideType === 'custom' && (
@@ -1555,7 +1555,7 @@ function HolidayModal({ open, onClose, existing, doctorUuid, onSaved }: {
         <>
           <button type="button" onClick={onClose} className="cp-btn-secondary px-5">لغو</button>
           <button type="button" onClick={() => saveMut.mutate()} disabled={saveMut.isPending || invalid}
-            className="cp-btn-primary">
+            className="btn primary sm">
             {saveMut.isPending ? 'در حال ذخیره...' : 'ذخیره'}
           </button>
         </>
@@ -1578,7 +1578,7 @@ function HolidayModal({ open, onClose, existing, doctorUuid, onSaved }: {
         <div>
           <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">دلیل (اختیاری)</label>
           <input type="text" value={reason} onChange={e => setReason(e.target.value)}
-            placeholder="مثال: سفر، کنگره پزشکی..." className="cp-input" />
+            placeholder="مثال: سفر، کنگره پزشکی..." className="input" />
         </div>
       </div>
     </Modal>
@@ -2174,7 +2174,7 @@ export default function DoctorDetailPage() {
         footer={
           <>
             <button onClick={() => setEditOpen(false)} className="cp-btn-secondary px-5">لغو</button>
-            <button form="edit-doctor-form" type="submit" disabled={updateMut.isPending} className="cp-btn-primary">
+            <button form="edit-doctor-form" type="submit" disabled={updateMut.isPending} className="btn primary sm">
               {updateMut.isPending ? 'در حال ذخیره...' : 'ذخیره تغییرات'}
             </button>
           </>
@@ -2185,7 +2185,7 @@ export default function DoctorDetailPage() {
             <p className="text-xs font-semibold text-slate-400 uppercase tracking-wide">اطلاعات پایه</p>
             <div>
               <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">نام کامل *</label>
-              <input type="text" className="cp-input" {...register('name')} />
+              <input type="text" className="input" {...register('name')} />
             </div>
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div>
diff --git a/assets/admin/pages/DoctorsPage.tsx b/assets/admin/pages/DoctorsPage.tsx
index dcd474de..b41633e3 100644
--- a/assets/admin/pages/DoctorsPage.tsx
+++ b/assets/admin/pages/DoctorsPage.tsx
@@ -2,13 +2,12 @@ import React, { useState, useEffect, useMemo } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 import {
-  MagnifyingGlassIcon, PlusIcon, EllipsisVerticalIcon,
-  EyeIcon, PencilIcon, TrashIcon, ArrowPathIcon,
-  UserGroupIcon, CheckCircleIcon, XCircleIcon,
-  StarIcon, TableCellsIcon, Squares2X2Icon,
-  FunnelIcon, ChevronDownIcon,
+  MagnifyingGlassIcon, PlusIcon, EyeIcon, TrashIcon, ArrowPathIcon,
+  CheckCircleIcon, XCircleIcon, TableCellsIcon, Squares2X2Icon,
 } from '@heroicons/react/24/outline';
 import { StarIcon as StarSolid } from '@heroicons/react/24/solid';
+import { StarIcon } from '@heroicons/react/24/outline';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 import { toast } from 'sonner';
 import { api } from '../lib/api';
 import type { ApiResponse, PaginatedResponse } from '../lib/api';
@@ -40,7 +39,6 @@ interface DoctorStats {
   inactive: number;
   male: number;
   female: number;
-  top_specialty: { name: string; cnt: number }[];
 }
 
 interface SpecialtyOption {
@@ -49,296 +47,55 @@ interface SpecialtyOption {
   name: string;
 }
 
-// ── Constants ─────────────────────────────────────────────────────────────
+// ── Helpers ───────────────────────────────────────────────────────────────
 
-const DEGREE_META: Record<string, { label: string; cls: string }> = {
-  general:           { label: 'عمومی',       cls: 'bg-blue-100 dark:bg-blue-400/10 text-blue-700 dark:text-blue-300' },
-  specialist:        { label: 'متخصص',       cls: 'bg-violet-100 dark:bg-violet-400/10 text-violet-700 dark:text-violet-300' },
-  expert:            { label: 'فوق تخصص',    cls: 'bg-pink-100 dark:bg-pink-400/10 text-pink-700 dark:text-pink-300' },
-  subspecialistplus: { label: 'فلوشیپ',      cls: 'bg-amber-100 dark:bg-amber-400/10 text-amber-700 dark:text-amber-300' },
+const HUES_LIST = [256, 205, 162, 295, 272];
+
+const DEGREE_BADGE: Record<string, string> = {
+  general:           'gray',
+  specialist:        'blue',
+  expert:            'violet',
+  subspecialistplus: 'amber',
 };
 
-const SPECIALTY_COLORS = [
-  'bg-red-100 dark:bg-red-400/10 text-red-700 dark:text-red-300',
-  'bg-blue-100 dark:bg-blue-400/10 text-blue-700 dark:text-blue-300',
-  'bg-emerald-100 dark:bg-emerald-400/10 text-emerald-700 dark:text-emerald-300',
-  'bg-violet-100 dark:bg-violet-400/10 text-violet-700 dark:text-violet-300',
-  'bg-orange-100 dark:bg-orange-400/10 text-orange-700 dark:text-orange-300',
-  'bg-pink-100 dark:bg-pink-400/10 text-pink-700 dark:text-pink-300',
-  'bg-teal-100 dark:bg-teal-400/10 text-teal-700 dark:text-teal-300',
-  'bg-indigo-100 dark:bg-indigo-400/10 text-indigo-700 dark:text-indigo-300',
-];
-
-const AVATAR_COLORS = [
-  'from-blue-500 to-cyan-500',
-  'from-violet-500 to-purple-600',
-  'from-emerald-500 to-teal-600',
-  'from-rose-500 to-pink-600',
-  'from-amber-500 to-orange-600',
-  'from-indigo-500 to-blue-600',
-];
-
-const LIMIT_OPTIONS = [10, 25, 50, 100];
-
-// ── Sub-components ────────────────────────────────────────────────────────
+const DEGREE_LABEL: Record<string, string> = {
+  general:           'عمومی',
+  specialist:        'متخصص',
+  expert:            'فوق تخصص',
+  subspecialistplus: 'فلوشیپ',
+};
 
 function DoctorAvatar({ name, id, image, size = 'sm' }: {
   name: string; id: number; image: string | null; size?: 'sm' | 'lg';
 }) {
-  const initials = name.split(' ').filter(Boolean).map(w => w[0]).join('').toUpperCase().slice(0, 2) || 'Dr';
-  const sz = size === 'lg' ? 'w-14 h-14 text-lg' : 'w-9 h-9 text-xs';
-  if (image) return <img src={image} alt={name} className={`${sz} rounded-xl object-cover shrink-0`} />;
+  const initials = name.split(' ').filter(Boolean).map((w) => w[0]).join('').toUpperCase().slice(0, 2) || 'Dr';
+  const hue = HUES_LIST[id % HUES_LIST.length];
+  if (image) {
+    return (
+      <div className={`avatar ${size}`} style={{ padding: 0, overflow: 'hidden' }}>
+        <img src={image} alt={name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+      </div>
+    );
+  }
   return (
-    <div className={`${sz} rounded-xl bg-gradient-to-br ${AVATAR_COLORS[id % AVATAR_COLORS.length]} flex items-center justify-center text-white font-bold shrink-0`}>
+    <div
+      className={`avatar ${size}`}
+      style={{ background: `linear-gradient(145deg, oklch(0.62 0.15 ${hue}), oklch(0.48 0.16 ${hue}))` }}
+    >
       {initials}
     </div>
   );
 }
 
-function SpecialtyBadge({ name, idx }: { name: string; idx: number }) {
-  return (
-    <span className={`inline-flex text-[11px] font-medium px-2 py-0.5 rounded-full whitespace-nowrap ${SPECIALTY_COLORS[idx % SPECIALTY_COLORS.length]}`}>
-      {name}
-    </span>
-  );
-}
-
-function DegreeBadge({ degree }: { degree: string | null }) {
-  if (!degree) return null;
-  const meta = DEGREE_META[degree] ?? { label: degree, cls: 'bg-slate-100 dark:bg-slate-400/10 text-slate-600 dark:text-slate-400' };
-  return <span className={`inline-flex text-[11px] font-medium px-2 py-0.5 rounded-full ${meta.cls}`}>{meta.label}</span>;
-}
-
-function ActiveBadge({ active }: { active: boolean }) {
-  return active ? (
-    <span className="inline-flex items-center gap-1 text-[11px] font-medium px-2 py-0.5 rounded-full bg-green-100 dark:bg-green-400/10 text-green-700 dark:text-green-300">
-      <span className="w-1.5 h-1.5 rounded-full bg-green-500 shrink-0" />فعال
-    </span>
-  ) : (
-    <span className="inline-flex items-center gap-1 text-[11px] font-medium px-2 py-0.5 rounded-full bg-slate-100 dark:bg-slate-400/10 text-slate-500 dark:text-slate-400">
-      <span className="w-1.5 h-1.5 rounded-full bg-slate-400 shrink-0" />غیرفعال
-    </span>
-  );
-}
-
 function StarRating({ rate }: { rate: number }) {
   return (
-    <div className="flex items-center gap-0.5" dir="ltr">
-      {Array.from({ length: 5 }).map((_, i) => (
+    <span className="stars" dir="ltr">
+      {Array.from({ length: 5 }).map((_, i) =>
         i < Math.round(rate)
-          ? <StarSolid key={i} className="w-3 h-3 text-amber-400" />
-          : <StarIcon key={i} className="w-3 h-3 text-slate-300 dark:text-slate-600" />
-      ))}
-    </div>
-  );
-}
-
-function highlight(text: string | null | undefined, q: string): React.ReactNode {
-  if (!text || !q.trim()) return text ?? '—';
-  const idx = text.toLowerCase().indexOf(q.toLowerCase());
-  if (idx === -1) return text;
-  return (
-    <>
-      {text.slice(0, idx)}
-      <mark className="bg-yellow-100 dark:bg-yellow-400/20 text-yellow-800 dark:text-yellow-200 rounded px-0.5 not-italic">
-        {text.slice(idx, idx + q.length)}
-      </mark>
-      {text.slice(idx + q.length)}
-    </>
-  );
-}
-
-function KpiCard({ label, value, icon: Icon, iconBg, iconColor, sub }: {
-  label: string; value: number | undefined;
-  icon: React.ElementType; iconBg: string; iconColor: string; sub?: string;
-}) {
-  return (
-    <div className="cp-card p-4 flex items-center gap-3">
-      <div className={`cp-stat-icon ${iconBg} shrink-0`}>
-        <Icon className={`w-5 h-5 ${iconColor}`} />
-      </div>
-      <div className="flex-1 min-w-0">
-        <p className="text-xs text-slate-500 dark:text-slate-400 mb-0.5 truncate">{label}</p>
-        {value === undefined
-          ? <div className="h-5 w-16 rounded skeleton" />
-          : <p className="text-lg font-bold text-slate-900 dark:text-slate-50 leading-none">{formatNumber(value)}</p>
-        }
-        {sub && <p className="text-[11px] text-slate-400 dark:text-slate-500 mt-0.5 truncate">{sub}</p>}
-      </div>
-    </div>
-  );
-}
-
-// ── Specialty Dropdown Filter ──────────────────────────────────────────────
-
-function SpecialtyFilter({ value, onChange, specialties }: {
-  value: string; onChange: (v: string) => void;
-  specialties: SpecialtyOption[];
-}) {
-  const [open, setOpen]   = useState(false);
-  const [q, setQ]         = useState('');
-
-  const filtered = useMemo(
-    () => specialties.filter(s => s.name.includes(q)),
-    [specialties, q]
-  );
-
-  const selected = specialties.find(s => String(s.id) === value);
-
-  useEffect(() => {
-    if (!open) return;
-    const close = (e: MouseEvent) => {
-      if ((e.target as HTMLElement).closest('[data-specfilter]') === null) setOpen(false);
-    };
-    document.addEventListener('mousedown', close);
-    return () => document.removeEventListener('mousedown', close);
-  }, [open]);
-
-  return (
-    <div className="relative" data-specfilter>
-      <button
-        data-specfilter
-        onClick={() => setOpen(!open)}
-        className={`h-10 px-3 flex items-center gap-2 text-sm rounded-xl border transition-all ${
-          value
-            ? 'border-primary-500 bg-primary-50 dark:bg-primary-500/10 text-primary-700 dark:text-primary-300'
-            : 'border-slate-200 dark:border-gray-700 text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-gray-800'
-        }`}
-      >
-        <FunnelIcon className="w-4 h-4 shrink-0" />
-        <span className="max-w-28 truncate">{selected?.name ?? 'تخصص'}</span>
-        <ChevronDownIcon className={`w-3.5 h-3.5 shrink-0 transition-transform ${open ? 'rotate-180' : ''}`} />
-      </button>
-
-      {open && (
-        <div className="absolute right-0 top-12 z-30 w-64 cp-card shadow-2xl border border-slate-200 dark:border-gray-700 animate-scale-in" data-specfilter>
-          <div className="p-2 border-b border-slate-100 dark:border-gray-700">
-            <input
-              autoFocus
-              type="text"
-              value={q}
-              onChange={e => setQ(e.target.value)}
-              placeholder="جستجوی تخصص..."
-              className="cp-input text-sm h-8"
-              data-specfilter
-            />
-          </div>
-          <div className="max-h-56 overflow-y-auto py-1">
-            <button
-              onClick={() => { onChange(''); setOpen(false); setQ(''); }}
-              className={`w-full text-right px-3 py-2 text-sm transition-colors ${!value ? 'bg-primary-50 dark:bg-primary-500/10 text-primary-700 dark:text-primary-300 font-medium' : 'text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800'}`}
-            >
-              همه تخصص‌ها
-            </button>
-            {filtered.map(s => (
-              <button
-                key={s.id}
-                onClick={() => { onChange(String(s.id)); setOpen(false); setQ(''); }}
-                className={`w-full text-right px-3 py-2 text-sm transition-colors ${String(s.id) === value ? 'bg-primary-50 dark:bg-primary-500/10 text-primary-700 dark:text-primary-300 font-medium' : 'text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800'}`}
-              >
-                {s.name}
-              </button>
-            ))}
-            {filtered.length === 0 && <p className="text-xs text-slate-400 text-center py-4">نتیجه‌ای یافت نشد</p>}
-          </div>
-        </div>
+          ? <StarSolid key={i} style={{ width: 13, height: 13 }} />
+          : <StarIcon key={i} style={{ width: 13, height: 13, color: 'var(--border-2)' }} />
       )}
-    </div>
-  );
-}
-
-// ── Card View ─────────────────────────────────────────────────────────────
-
-function DoctorCard({ doctor, selected, onSelect, onView, onEdit, onToggle, onDelete, search, togglePending }: {
-  doctor: AdminDoctor; selected: boolean;
-  onSelect: () => void; onView: () => void; onEdit: () => void;
-  onToggle: () => void; onDelete: () => void;
-  search: string; togglePending: boolean;
-}) {
-  const [menuOpen, setMenuOpen] = useState(false);
-
-  useEffect(() => {
-    if (!menuOpen) return;
-    const close = (e: MouseEvent) => {
-      if ((e.target as HTMLElement).closest('[data-cardmenu]') === null) setMenuOpen(false);
-    };
-    document.addEventListener('mousedown', close);
-    return () => document.removeEventListener('mousedown', close);
-  }, [menuOpen]);
-
-  return (
-    <div className={`cp-card p-4 transition-all hover:shadow-md ${selected ? 'ring-2 ring-primary-500 ring-offset-1 dark:ring-offset-gray-900' : ''}`}>
-      {/* Top row */}
-      <div className="flex items-start gap-3 mb-3">
-        <input type="checkbox" checked={selected} onChange={onSelect}
-          className="mt-1 rounded border-slate-300 dark:border-gray-600 text-primary-600 cursor-pointer shrink-0" />
-        <DoctorAvatar name={doctor.name} id={doctor.id} image={doctor.profile_image} size="lg" />
-        <div className="flex-1 min-w-0">
-          <h3
-            className="font-semibold text-slate-800 dark:text-slate-100 leading-tight cursor-pointer hover:text-primary-600 dark:hover:text-primary-400 transition-colors line-clamp-1"
-            onClick={onView}
-          >
-            دکتر {highlight(doctor.name, search)}
-          </h3>
-          <div className="flex items-center gap-1.5 mt-1 flex-wrap">
-            {doctor.degree && <DegreeBadge degree={doctor.degree} />}
-            <ActiveBadge active={doctor.is_active} />
-          </div>
-        </div>
-        {/* menu */}
-        <div className="relative shrink-0" data-cardmenu>
-          <button
-            data-cardmenu
-            onClick={() => setMenuOpen(!menuOpen)}
-            className="w-7 h-7 flex items-center justify-center rounded-lg text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors"
-          >
-            <EllipsisVerticalIcon className="w-4 h-4" />
-          </button>
-          {menuOpen && (
-            <div className="absolute left-0 top-8 z-30 w-44 cp-card shadow-2xl border border-slate-200 dark:border-gray-700 py-1 animate-scale-in" data-cardmenu>
-              <button onClick={() => { onView(); setMenuOpen(false); }}
-                className="w-full flex items-center gap-2 px-3 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800">
-                <EyeIcon className="w-4 h-4 text-slate-400 shrink-0" />مشاهده پروفایل
-              </button>
-              <button onClick={() => { onEdit(); setMenuOpen(false); }}
-                className="w-full flex items-center gap-2 px-3 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800">
-                <PencilIcon className="w-4 h-4 text-slate-400 shrink-0" />ویرایش
-              </button>
-              <button onClick={() => { onToggle(); setMenuOpen(false); }} disabled={togglePending}
-                className="w-full flex items-center gap-2 px-3 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 disabled:opacity-50">
-                {doctor.is_active
-                  ? <XCircleIcon className="w-4 h-4 text-orange-400 shrink-0" />
-                  : <CheckCircleIcon className="w-4 h-4 text-green-500 shrink-0" />
-                }
-                {doctor.is_active ? 'غیرفعال کردن' : 'فعال‌سازی'}
-              </button>
-              <div className="border-t border-slate-100 dark:border-gray-700 my-1" />
-              <button onClick={() => { onDelete(); setMenuOpen(false); }}
-                className="w-full flex items-center gap-2 px-3 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10">
-                <TrashIcon className="w-4 h-4 shrink-0" />حذف
-              </button>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Specialties */}
-      {doctor.specialties.length > 0 && (
-        <div className="flex flex-wrap gap-1 mb-3">
-          {doctor.specialties.slice(0, 3).map((s, i) => <SpecialtyBadge key={s.id} name={s.name} idx={i} />)}
-          {doctor.specialties.length > 3 && (
-            <span className="text-[11px] text-slate-400 dark:text-slate-500">+{doctor.specialties.length - 3}</span>
-          )}
-        </div>
-      )}
-
-      {/* Info row */}
-      <div className="flex items-center justify-between text-[11px] text-slate-500 dark:text-slate-400 mt-2 pt-3 border-t border-slate-100 dark:border-gray-700/50">
-        <span dir="ltr" className="font-mono">{doctor.mobile ?? '—'}</span>
-        <StarRating rate={doctor.rate} />
-        <span>{formatDate(doctor.created_at)}</span>
-      </div>
-    </div>
+    </span>
   );
 }
 
@@ -348,38 +105,24 @@ export default function DoctorsPage() {
   const navigate = useNavigate();
   const qc       = useQueryClient();
 
-  const [page, setPage]             = useState(1);
-  const [limit, setLimit]           = useState(25);
-  const [searchInput, setSearch]    = useState('');
-  const [search, setDebouncedSearch] = useState('');
-  const [status, setStatus]         = useState('');
-  const [gender, setGender]         = useState('');
-  const [specialtyId, setSpecialty] = useState('');
-  const [sort, setSort]             = useState('newest');
-  const [view, setView]             = useState<'table' | 'card'>('table');
-  const [selected, setSelected]     = useState<string[]>([]);
-  const [activeMenu, setActiveMenu] = useState<string | null>(null);
+  const [page, setPage]               = useState(1);
+  const [limit]                       = useState(25);
+  const [searchInput, setSearchInput] = useState('');
+  const [search, setSearch]           = useState('');
+  const [status, setStatus]           = useState('');
+  const [specialtyId, setSpecialty]   = useState('');
+  const [view, setView]               = useState<'table' | 'grid'>('table');
+  const [selected, setSelected]       = useState<string[]>([]);
   const [deleteTarget, setDeleteTarget]     = useState<AdminDoctor | null>(null);
   const [confirmBulkDel, setConfirmBulkDel] = useState(false);
   const [bulkDeleting, setBulkDeleting]     = useState(false);
 
-  // Debounce
   useEffect(() => {
-    const t = setTimeout(() => { setDebouncedSearch(searchInput); setPage(1); }, 350);
+    const t = setTimeout(() => { setSearch(searchInput); setPage(1); }, 350);
     return () => clearTimeout(t);
   }, [searchInput]);
 
-  useEffect(() => { setPage(1); setSelected([]); }, [status, gender, specialtyId, sort, limit]);
-
-  // Close table row menu on outside click
-  useEffect(() => {
-    if (!activeMenu) return;
-    const close = (e: MouseEvent) => {
-      if ((e.target as HTMLElement).closest('[data-rowmenu]') === null) setActiveMenu(null);
-    };
-    document.addEventListener('mousedown', close);
-    return () => document.removeEventListener('mousedown', close);
-  }, [activeMenu]);
+  useEffect(() => { setPage(1); setSelected([]); }, [status, specialtyId]);
 
   // ── Queries ──
 
@@ -396,12 +139,11 @@ export default function DoctorsPage() {
   });
 
   const doctorsQ = useQuery({
-    queryKey: ['admin-doctors', page, limit, search, status, gender, specialtyId, sort],
+    queryKey: ['admin-doctors', page, limit, search, status, specialtyId],
     queryFn: () => {
-      const p = new URLSearchParams({ page: String(page), limit: String(limit), sort });
-      if (search)     p.set('search', search);
-      if (status)     p.set('status', status);
-      if (gender)     p.set('gender', gender);
+      const p = new URLSearchParams({ page: String(page), limit: String(limit) });
+      if (search)      p.set('search', search);
+      if (status)      p.set('status', status);
       if (specialtyId) p.set('specialty_id', specialtyId);
       return api.get<PaginatedResponse<AdminDoctor>>(`/api/v1/admin/doctors?${p}`);
     },
@@ -442,10 +184,10 @@ export default function DoctorsPage() {
 
   // ── Bulk ──
 
-  const allSelected = items.length > 0 && items.every(d => selected.includes(d.uuid));
-  const toggleAll   = () => setSelected(allSelected ? [] : items.map(d => d.uuid));
+  const allSelected = items.length > 0 && items.every((d) => selected.includes(d.uuid));
+  const toggleAll   = () => setSelected(allSelected ? [] : items.map((d) => d.uuid));
   const toggleOne   = (uuid: string) =>
-    setSelected(prev => prev.includes(uuid) ? prev.filter(id => id !== uuid) : [...prev, uuid]);
+    setSelected((prev) => prev.includes(uuid) ? prev.filter((id) => id !== uuid) : [...prev, uuid]);
 
   const handleBulkDelete = async () => {
     setBulkDeleting(true);
@@ -461,346 +203,213 @@ export default function DoctorsPage() {
     qc.invalidateQueries({ queryKey: ['doctors-stats'] });
   };
 
-  const hasFilters = !!(search || status || gender || specialtyId);
-
-  const clearFilters = () => {
-    setSearch(''); setDebouncedSearch('');
-    setStatus(''); setGender(''); setSpecialty('');
-  };
-
-  // ── KPI ──
-
   const kpiCards = [
-    { label: 'کل پزشکان',   value: stats?.total,    icon: UserGroupIcon,   iconBg: 'bg-slate-100 dark:bg-slate-400/10',   iconColor: 'text-slate-600 dark:text-slate-400' },
-    { label: 'فعال',          value: stats?.active,   icon: CheckCircleIcon, iconBg: 'bg-green-100 dark:bg-green-400/10',   iconColor: 'text-green-600 dark:text-green-400' },
-    { label: 'غیرفعال',       value: stats?.inactive, icon: XCircleIcon,     iconBg: 'bg-slate-100 dark:bg-slate-400/10',   iconColor: 'text-slate-500 dark:text-slate-400' },
-    { label: 'مرد',           value: stats?.male,     icon: UserGroupIcon,   iconBg: 'bg-blue-100 dark:bg-blue-400/10',     iconColor: 'text-blue-600 dark:text-blue-400' },
-    { label: 'زن',            value: stats?.female,   icon: UserGroupIcon,   iconBg: 'bg-pink-100 dark:bg-pink-400/10',     iconColor: 'text-pink-600 dark:text-pink-400' },
+    { label: 'کل پزشکان', value: stats?.total,    bg: 'var(--surface-3)',  color: 'var(--text-2)'  },
+    { label: 'فعال',       value: stats?.active,   bg: 'var(--success-bg)', color: 'var(--success)' },
+    { label: 'غیرفعال',    value: stats?.inactive, bg: 'var(--surface-3)',  color: 'var(--text-3)'  },
+    { label: 'مرد',        value: stats?.male,     bg: 'var(--info-bg)',    color: 'var(--info)'    },
+    { label: 'زن',         value: stats?.female,   bg: 'var(--violet-bg)',  color: 'var(--violet)'  },
   ];
 
   return (
-    <div className="animate-slide-up space-y-5">
-
-      {/* ── Header ─────────────────────────────────────────────── */}
-      <div className="flex items-start justify-between gap-4">
+    <div className="fade-in">
+      {/* Header */}
+      <div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
         <div>
-          <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>
+          <h1 className="section-title">پزشکان</h1>
+          <div className="muted" style={{ fontSize: 13, marginTop: 3 }}>مدیریت پزشکان، تخصص‌ها و وضعیت همکاری</div>
+        </div>
+        <div style={{ display: 'flex', gap: 10 }}>
+          <button className="btn ghost sm">
+            <ArrowPathIcon style={{ width: 15, height: 15 }} />
+            خروجی
+          </button>
+          <button className="btn primary sm" onClick={() => navigate('/admin/doctors/new')}>
+            <PlusIcon style={{ width: 15, height: 15 }} />
+            افزودن پزشک
+          </button>
         </div>
-        <button onClick={() => navigate('/admin/doctors/new')} className="cp-btn-primary shrink-0">
-          <PlusIcon className="w-4 h-4" />
-          افزودن پزشک
-        </button>
       </div>
 
-      {/* ── KPI Cards ──────────────────────────────────────────── */}
-      <div className="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-5 gap-3">
-        {kpiCards.map(c => <KpiCard key={c.label} {...c} />)}
+      {/* KPI cards */}
+      <div className="stat-grid" style={{ gridTemplateColumns: 'repeat(5,1fr)' }}>
+        {kpiCards.map((c) => (
+          <div key={c.label} className="stat">
+            <div className="ico" style={{ background: c.bg, color: c.color }}>
+              <svg style={{ width: 20, height: 20 }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+              </svg>
+            </div>
+            <div className="lbl">{c.label}</div>
+            <div className="val">
+              {c.value === undefined
+                ? <span className="skeleton" style={{ display: 'inline-block', width: 48, height: 26, borderRadius: 4 }} />
+                : formatNumber(c.value)}
+            </div>
+          </div>
+        ))}
       </div>
 
-      {/* ── Main Card ──────────────────────────────────────────── */}
-      <div className="cp-card overflow-hidden">
-
+      {/* Main card */}
+      <div className="card">
         {/* Toolbar */}
-        <div className="p-4 border-b border-slate-200 dark:border-gray-700/50 space-y-3">
-
-          {/* Row 1 */}
-          <div className="flex items-center gap-2 flex-wrap">
-            {/* Search */}
-            <div className="relative flex-1 min-w-52">
-              <MagnifyingGlassIcon className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" />
+        <div className="card-pad" style={{ paddingBottom: 0 }}>
+          <div className="toolbar">
+            <div className="field" style={{ minWidth: 240 }}>
+              <MagnifyingGlassIcon style={{ width: 17, height: 17 }} />
               <input
-                type="text"
                 value={searchInput}
-                onChange={e => setSearch(e.target.value)}
-                placeholder="نام پزشک، موبایل یا ایمیل..."
-                className="cp-input pr-9"
+                onChange={(e) => setSearchInput(e.target.value)}
+                placeholder="نام پزشک یا موبایل..."
               />
-              {searchInput && (
-                <button onClick={() => { setSearch(''); setDebouncedSearch(''); }}
-                  className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 text-lg leading-none">×</button>
-              )}
             </div>
-
-            {/* Specialty dropdown */}
-            <SpecialtyFilter value={specialtyId} onChange={setSpecialty} specialties={specialties} />
-
-            {/* Status */}
-            <select value={status} onChange={e => setStatus(e.target.value)} className="cp-select h-10 w-auto min-w-36 text-sm">
-              <option value="">همه وضعیت‌ها</option>
-              <option value="1">فعال</option>
-              <option value="0">غیرفعال</option>
-            </select>
-
-            {/* Gender */}
-            <select value={gender} onChange={e => setGender(e.target.value)} className="cp-select h-10 w-auto min-w-28 text-sm">
-              <option value="">همه جنسیت‌ها</option>
-              <option value="man">مرد</option>
-              <option value="woman">زن</option>
-            </select>
-
-            {/* Sort */}
-            <select value={sort} onChange={e => setSort(e.target.value)} className="cp-select h-10 w-auto min-w-32 text-sm">
-              <option value="newest">جدیدترین</option>
-              <option value="oldest">قدیمی‌ترین</option>
-              <option value="rating">بالاترین امتیاز</option>
-            </select>
-
-            {/* Limit */}
-            <select value={limit} onChange={e => setLimit(Number(e.target.value))} className="cp-select h-10 w-auto min-w-24 text-sm">
-              {LIMIT_OPTIONS.map(l => <option key={l} value={l}>{formatNumber(l)} عدد</option>)}
-            </select>
-
-            {/* View toggle */}
-            <div className="flex rounded-xl border border-slate-200 dark:border-gray-700 overflow-hidden shrink-0">
-              <button
-                onClick={() => setView('table')}
-                className={`h-10 w-10 flex items-center justify-center transition-colors ${view === 'table' ? 'bg-primary-600 text-white' : 'text-slate-500 hover:bg-slate-50 dark:hover:bg-gray-800'}`}
-                title="نمای جدول"
-              >
-                <TableCellsIcon className="w-4 h-4" />
+            {specialties.length > 0 && (
+              <div className="field">
+                <select value={specialtyId} onChange={(e) => setSpecialty(e.target.value)}>
+                  <option value="">همه تخصص‌ها</option>
+                  {specialties.map((s) => (
+                    <option key={s.id} value={String(s.id)}>{s.name}</option>
+                  ))}
+                </select>
+              </div>
+            )}
+            <div className="seg">
+              <button className={!status ? 'on' : ''} onClick={() => setStatus('')}>همه</button>
+              <button className={status === 'active' ? 'on' : ''} onClick={() => setStatus('active')}>فعال</button>
+              <button className={status === 'inactive' ? 'on' : ''} onClick={() => setStatus('inactive')}>غیرفعال</button>
+            </div>
+            <div className="spacer" />
+            <div className="seg">
+              <button className={view === 'table' ? 'on' : ''} onClick={() => setView('table')} title="جدول">
+                <TableCellsIcon style={{ width: 16, height: 16 }} />
               </button>
-              <button
-                onClick={() => setView('card')}
-                className={`h-10 w-10 flex items-center justify-center transition-colors ${view === 'card' ? 'bg-primary-600 text-white' : 'text-slate-500 hover:bg-slate-50 dark:hover:bg-gray-800'}`}
-                title="نمای کارت"
-              >
-                <Squares2X2Icon className="w-4 h-4" />
+              <button className={view === 'grid' ? 'on' : ''} onClick={() => setView('grid')} title="کارت">
+                <Squares2X2Icon style={{ width: 16, height: 16 }} />
               </button>
             </div>
-
-            {/* Refresh */}
-            <button
-              onClick={() => doctorsQ.refetch()}
-              disabled={doctorsQ.isFetching}
-              className="cp-btn-secondary h-10 px-3"
-            >
-              <ArrowPathIcon className={`w-4 h-4 ${doctorsQ.isFetching ? 'animate-spin' : ''}`} />
+            <button className="btn ghost sm" onClick={() => doctorsQ.refetch()} disabled={doctorsQ.isFetching}>
+              <ArrowPathIcon style={{ width: 15, height: 15, animation: doctorsQ.isFetching ? 'spin 1s linear infinite' : undefined }} />
             </button>
           </div>
-
-          {/* Active filter chips */}
-          {hasFilters && (
-            <div className="flex items-center gap-2 flex-wrap">
-              <span className="text-xs text-slate-500 dark:text-slate-400">فیلترهای فعال:</span>
-              {search && (
-                <span className="inline-flex items-center gap-1 text-xs px-2.5 py-1 rounded-lg bg-primary-50 dark:bg-primary-500/10 text-primary-700 dark:text-primary-300 border border-primary-200 dark:border-primary-500/20">
-                  جستجو: {search}
-                  <button onClick={() => { setSearch(''); setDebouncedSearch(''); }} className="hover:text-primary-900 dark:hover:text-primary-100 ml-0.5">×</button>
-                </span>
-              )}
-              {status && (
-                <span className="inline-flex items-center gap-1 text-xs px-2.5 py-1 rounded-lg bg-slate-100 dark:bg-slate-400/10 text-slate-600 dark:text-slate-400">
-                  وضعیت: {status === '1' ? 'فعال' : 'غیرفعال'}
-                  <button onClick={() => setStatus('')} className="hover:text-slate-900 dark:hover:text-slate-200 ml-0.5">×</button>
-                </span>
-              )}
-              {gender && (
-                <span className="inline-flex items-center gap-1 text-xs px-2.5 py-1 rounded-lg bg-slate-100 dark:bg-slate-400/10 text-slate-600 dark:text-slate-400">
-                  جنسیت: {gender === 'man' ? 'مرد' : 'زن'}
-                  <button onClick={() => setGender('')} className="hover:text-slate-900 dark:hover:text-slate-200 ml-0.5">×</button>
-                </span>
-              )}
-              {specialtyId && (
-                <span className="inline-flex items-center gap-1 text-xs px-2.5 py-1 rounded-lg bg-slate-100 dark:bg-slate-400/10 text-slate-600 dark:text-slate-400">
-                  تخصص: {specialties.find(s => String(s.id) === specialtyId)?.name}
-                  <button onClick={() => setSpecialty('')} className="hover:text-slate-900 dark:hover:text-slate-200 ml-0.5">×</button>
-                </span>
-              )}
-              <button onClick={clearFilters} className="text-xs text-red-500 dark:text-red-400 hover:underline">پاک کردن همه</button>
-            </div>
-          )}
         </div>
 
-        {/* Bulk actions */}
+        {/* Bulk bar */}
         {selected.length > 0 && (
-          <div className="px-4 py-2.5 bg-primary-50 dark:bg-primary-500/10 border-b border-primary-200 dark:border-primary-500/20 flex items-center gap-3">
-            <span className="text-sm font-medium text-primary-700 dark:text-primary-300">
+          <div style={{
+            padding: '10px 16px', background: 'var(--primary-soft)',
+            borderBottom: '1px solid var(--border)',
+            display: 'flex', alignItems: 'center', gap: 12,
+          }}>
+            <span style={{ fontSize: 13, color: 'var(--primary-700)', fontWeight: 600 }}>
               {formatNumber(selected.length)} پزشک انتخاب شده
             </span>
-            <div className="flex gap-2 mr-auto">
-              <button
-                onClick={() => setConfirmBulkDel(true)}
-                className="text-xs px-3 py-1.5 rounded-lg bg-red-100 dark:bg-red-400/10 text-red-600 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-400/20 transition-colors font-medium"
-              >
-                حذف انتخاب‌شده‌ها
-              </button>
-              <button onClick={() => setSelected([])} className="text-xs px-3 py-1.5 rounded-lg text-slate-500 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors">
-                لغو انتخاب
-              </button>
+            <div style={{ display: 'flex', gap: 8, marginRight: 'auto' }}>
+              <button className="btn danger sm" onClick={() => setConfirmBulkDel(true)}>حذف انتخاب‌شده‌ها</button>
+              <button className="btn ghost sm" onClick={() => setSelected([])}>لغو</button>
             </div>
           </div>
         )}
 
-        {/* ── TABLE VIEW ─────────────────────────────────────── */}
+        {/* Table view */}
         {view === 'table' && (
-          <div className="overflow-x-auto">
-            <table className="w-full text-sm">
+          <div className="table-wrap">
+            <table className="t">
               <thead>
-                <tr className="bg-slate-50 dark:bg-gray-800/60 border-b border-slate-200 dark:border-gray-700/50">
-                  <th className="px-4 py-3 w-10">
+                <tr>
+                  <th style={{ width: 42 }}>
                     <input type="checkbox" checked={allSelected} onChange={toggleAll}
-                      className="rounded border-slate-300 dark:border-gray-600 text-primary-600 cursor-pointer" />
+                      style={{ accentColor: 'var(--primary)', cursor: 'pointer' }} />
                   </th>
-                  <th className="px-4 py-3 text-right text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide whitespace-nowrap">پزشک</th>
-                  <th className="px-4 py-3 text-right text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide whitespace-nowrap hidden md:table-cell">تخصص‌ها</th>
-                  <th className="px-4 py-3 text-right text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide whitespace-nowrap hidden sm:table-cell">درجه</th>
-                  <th className="px-4 py-3 text-right text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide whitespace-nowrap hidden lg:table-cell">موبایل</th>
-                  <th className="px-4 py-3 text-right text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide whitespace-nowrap">وضعیت</th>
-                  <th className="px-4 py-3 text-right text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide whitespace-nowrap hidden lg:table-cell">امتیاز</th>
-                  <th className="px-4 py-3 text-right text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide whitespace-nowrap hidden xl:table-cell">ثبت</th>
-                  <th className="px-4 py-3 w-10" />
+                  <th>پزشک</th>
+                  <th>تخصص</th>
+                  <th>درجه</th>
+                  <th>امتیاز</th>
+                  <th>موبایل</th>
+                  <th>وضعیت</th>
+                  <th></th>
                 </tr>
               </thead>
-              <tbody className="divide-y divide-slate-100 dark:divide-gray-700/40">
-
-                {/* Skeleton */}
-                {doctorsQ.isLoading && Array.from({ length: 8 }).map((_, i) => (
+              <tbody>
+                {doctorsQ.isLoading && Array.from({ length: 6 }).map((_, i) => (
                   <tr key={i}>
-                    <td className="px-4 py-3.5"><div className="w-4 h-4 rounded skeleton" /></td>
-                    <td className="px-4 py-3.5">
-                      <div className="flex items-center gap-3">
-                        <div className="w-9 h-9 rounded-xl skeleton shrink-0" />
-                        <div className="space-y-1.5">
-                          <div className="h-3.5 w-28 rounded skeleton" />
-                          <div className="h-3 w-16 rounded skeleton" />
-                        </div>
-                      </div>
-                    </td>
-                    <td className="px-4 py-3.5 hidden md:table-cell"><div className="h-5 w-24 rounded-full skeleton" /></td>
-                    <td className="px-4 py-3.5 hidden sm:table-cell"><div className="h-5 w-14 rounded-full skeleton" /></td>
-                    <td className="px-4 py-3.5 hidden lg:table-cell"><div className="h-3.5 w-24 rounded skeleton" /></td>
-                    <td className="px-4 py-3.5"><div className="h-5 w-12 rounded-full skeleton" /></td>
-                    <td className="px-4 py-3.5 hidden lg:table-cell"><div className="h-3.5 w-16 rounded skeleton" /></td>
-                    <td className="px-4 py-3.5 hidden xl:table-cell"><div className="h-3.5 w-20 rounded skeleton" /></td>
-                    <td className="px-4 py-3.5"><div className="w-6 h-6 rounded skeleton" /></td>
+                    {Array.from({ length: 8 }).map((_, j) => (
+                      <td key={j}>
+                        <div className="skeleton" style={{ height: 14, borderRadius: 6, width: j === 1 ? '70%' : '55%' }} />
+                      </td>
+                    ))}
                   </tr>
                 ))}
 
-                {/* Empty state */}
                 {!doctorsQ.isLoading && items.length === 0 && (
                   <tr>
-                    <td colSpan={9} 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">
-                          <UserGroupIcon className="w-7 h-7 text-slate-400 dark:text-slate-500" />
-                        </div>
-                        <p className="text-sm text-slate-500 dark:text-slate-400">
-                          {hasFilters ? 'نتیجه‌ای برای فیلترهای انتخابی یافت نشد' : 'هیچ پزشکی ثبت نشده'}
-                        </p>
-                        {hasFilters
-                          ? <button onClick={clearFilters} className="text-xs text-primary-600 dark:text-primary-400 hover:underline">پاک کردن فیلترها</button>
-                          : <button onClick={() => navigate('/admin/doctors/new')} className="cp-btn-primary text-xs">افزودن اولین پزشک</button>
-                        }
-                      </div>
+                    <td colSpan={8}>
+                      <div className="empty">هیچ پزشکی یافت نشد</div>
                     </td>
                   </tr>
                 )}
 
-                {/* Data rows */}
-                {!doctorsQ.isLoading && items.map(doctor => (
-                  <tr
-                    key={doctor.uuid}
-                    className={`transition-colors ${selected.includes(doctor.uuid) ? 'bg-primary-50/60 dark:bg-primary-500/5' : 'hover:bg-slate-50/80 dark:hover:bg-gray-800/40'}`}
-                  >
-                    {/* Checkbox */}
-                    <td className="px-4 py-3.5" onClick={e => e.stopPropagation()}>
-                      <input type="checkbox" checked={selected.includes(doctor.uuid)}
-                        onChange={() => toggleOne(doctor.uuid)}
-                        className="rounded border-slate-300 dark:border-gray-600 text-primary-600 cursor-pointer" />
+                {!doctorsQ.isLoading && items.map((doc) => (
+                  <tr key={doc.uuid} style={{ cursor: 'pointer' }} onClick={() => navigate(`/admin/doctors/${doc.uuid}`)}>
+                    <td onClick={(e) => e.stopPropagation()}>
+                      <input type="checkbox" checked={selected.includes(doc.uuid)}
+                        onChange={() => toggleOne(doc.uuid)}
+                        style={{ accentColor: 'var(--primary)', cursor: 'pointer' }} />
                     </td>
-
-                    {/* Avatar + Name */}
-                    <td className="px-4 py-3.5">
-                      <div className="flex items-center gap-3 cursor-pointer group" onClick={() => navigate(`/admin/doctors/${doctor.uuid}`)}>
-                        <DoctorAvatar name={doctor.name} id={doctor.id} image={doctor.profile_image} />
-                        <div className="min-w-0">
-                          <p className="font-medium text-slate-800 dark:text-slate-200 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors truncate max-w-36">
-                            دکتر {highlight(doctor.name, search)}
-                          </p>
-                          <p className="text-[11px] text-slate-400 dark:text-slate-500">
-                            {doctor.gender === 'man' ? '♂ مرد' : doctor.gender === 'woman' ? '♀ زن' : '—'}
-                          </p>
+                    <td>
+                      <div className="cell-user">
+                        <DoctorAvatar name={doc.name} id={doc.id} image={doc.profile_image} />
+                        <div>
+                          <b>دکتر {doc.name}</b>
+                          <br /><small>{doc.gender ?? '—'}</small>
                         </div>
                       </div>
                     </td>
-
-                    {/* Specialties */}
-                    <td className="px-4 py-3.5 hidden md:table-cell">
-                      <div className="flex flex-wrap gap-1 max-w-52">
-                        {doctor.specialties.slice(0, 2).map((s, i) => <SpecialtyBadge key={s.id} name={s.name} idx={i} />)}
-                        {doctor.specialties.length > 2 && (
-                          <span className="text-[11px] text-slate-400 dark:text-slate-500">+{doctor.specialties.length - 2}</span>
-                        )}
-                        {doctor.specialties.length === 0 && <span className="text-xs text-slate-400">—</span>}
+                    <td>
+                      {doc.specialties.slice(0, 2).map((s) => (
+                        <span key={s.id} className="badge gray" style={{ marginInlineEnd: 4, fontSize: 11 }}>{s.name}</span>
+                      ))}
+                      {doc.specialties.length > 2 && (
+                        <span className="muted" style={{ fontSize: 11 }}>+{doc.specialties.length - 2}</span>
+                      )}
+                    </td>
+                    <td>
+                      {doc.degree && (
+                        <span className={`badge ${DEGREE_BADGE[doc.degree] ?? 'gray'}`}>
+                          <span className="bdot" />
+                          {DEGREE_LABEL[doc.degree] ?? doc.degree}
+                        </span>
+                      )}
+                    </td>
+                    <td>
+                      <div className="flex" style={{ gap: 5 }}>
+                        <StarRating rate={doc.rate} />
+                        <b style={{ fontSize: 12.5 }}>{doc.rate.toFixed(1)}</b>
                       </div>
                     </td>
-
-                    {/* Degree */}
-                    <td className="px-4 py-3.5 hidden sm:table-cell">
-                      <DegreeBadge degree={doctor.degree} />
+                    <td style={{ fontFamily: 'monospace', direction: 'ltr', textAlign: 'right' }} className="muted">
+                      {doc.mobile ?? '—'}
                     </td>
-
-                    {/* Mobile */}
-                    <td className="px-4 py-3.5 hidden lg:table-cell">
-                      <span className="font-mono text-xs text-slate-500 dark:text-slate-400" dir="ltr">
-                        {highlight(doctor.mobile, search) || '—'}
+                    <td>
+                      <span className={`badge ${doc.is_active ? 'green' : 'gray'}`}>
+                        <span className="bdot" />
+                        {doc.is_active ? 'فعال' : 'غیرفعال'}
                       </span>
                     </td>
-
-                    {/* Status */}
-                    <td className="px-4 py-3.5"><ActiveBadge active={doctor.is_active} /></td>
-
-                    {/* Rating */}
-                    <td className="px-4 py-3.5 hidden lg:table-cell"><StarRating rate={doctor.rate} /></td>
-
-                    {/* Date */}
-                    <td className="px-4 py-3.5 hidden xl:table-cell text-xs text-slate-500 dark:text-slate-400 whitespace-nowrap">
-                      {formatDate(doctor.created_at)}
-                    </td>
-
-                    {/* Actions */}
-                    <td className="px-4 py-3.5" onClick={e => e.stopPropagation()}>
-                      <div className="relative flex justify-end" data-rowmenu>
-                        <button
-                          data-rowmenu
-                          onClick={() => setActiveMenu(activeMenu === doctor.uuid ? null : doctor.uuid)}
-                          className="w-7 h-7 flex items-center justify-center rounded-lg text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors"
-                        >
-                          <EllipsisVerticalIcon className="w-4 h-4" />
+                    <td onClick={(e) => e.stopPropagation()}>
+                      <div className="row-actions">
+                        <button className="mini-btn" title="مشاهده"
+                          onClick={() => navigate(`/admin/doctors/${doc.uuid}`)}>
+                          <EyeIcon style={{ width: 16, height: 16 }} />
+                        </button>
+                        <button className="mini-btn" title={doc.is_active ? 'غیرفعال کردن' : 'فعال‌سازی'}
+                          onClick={() => toggleMut.mutate(doc.uuid)} disabled={toggleMut.isPending}>
+                          {doc.is_active
+                            ? <XCircleIcon style={{ width: 16, height: 16 }} />
+                            : <CheckCircleIcon style={{ width: 16, height: 16 }} />}
+                        </button>
+                        <button className="mini-btn danger" title="حذف" onClick={() => setDeleteTarget(doc)}>
+                          <TrashIcon style={{ width: 16, height: 16 }} />
                         </button>
-                        {activeMenu === doctor.uuid && (
-                          <div className="absolute left-0 top-8 z-30 w-48 cp-card shadow-2xl border border-slate-200 dark:border-gray-700 py-1.5 animate-scale-in" data-rowmenu>
-                            <button onClick={() => { navigate(`/admin/doctors/${doctor.uuid}`); setActiveMenu(null); }}
-                              className="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800">
-                              <EyeIcon className="w-4 h-4 text-slate-400 shrink-0" />مشاهده پروفایل
-                            </button>
-                            <button onClick={() => { navigate(`/admin/doctors/${doctor.uuid}?edit=1`); setActiveMenu(null); }}
-                              className="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800">
-                              <PencilIcon className="w-4 h-4 text-slate-400 shrink-0" />ویرایش اطلاعات
-                            </button>
-                            <button
-                              onClick={() => { toggleMut.mutate(doctor.uuid); setActiveMenu(null); }}
-                              disabled={toggleMut.isPending}
-                              className="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 disabled:opacity-50"
-                            >
-                              {doctor.is_active
-                                ? <XCircleIcon className="w-4 h-4 text-orange-400 shrink-0" />
-                                : <CheckCircleIcon className="w-4 h-4 text-green-500 shrink-0" />
-                              }
-                              {doctor.is_active ? 'غیرفعال کردن' : 'فعال‌سازی'}
-                            </button>
-                            <button onClick={() => { navigate(`/admin/appointments?doctor=${doctor.uuid}`); setActiveMenu(null); }}
-                              className="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800">
-                              <StarIcon className="w-4 h-4 text-slate-400 shrink-0" />مشاهده نوبت‌ها
-                            </button>
-                            <div className="border-t border-slate-100 dark:border-gray-700 my-1" />
-                            <button onClick={() => { setDeleteTarget(doctor); setActiveMenu(null); }}
-                              className="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10">
-                              <TrashIcon className="w-4 h-4 shrink-0" />حذف پزشک
-                            </button>
-                          </div>
-                        )}
                       </div>
                     </td>
                   </tr>
@@ -810,67 +419,71 @@ export default function DoctorsPage() {
           </div>
         )}
 
-        {/* ── CARD VIEW ──────────────────────────────────────── */}
-        {view === 'card' && (
-          <div className="p-4">
-            {doctorsQ.isLoading ? (
-              <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">
-                {Array.from({ length: 6 }).map((_, i) => (
-                  <div key={i} className="cp-card p-4 space-y-3">
-                    <div className="flex items-start gap-3">
-                      <div className="w-9 h-9 rounded-xl skeleton" />
-                      <div className="flex-1 space-y-2">
-                        <div className="h-4 w-32 rounded skeleton" />
-                        <div className="h-3 w-20 rounded skeleton" />
-                      </div>
-                    </div>
-                    <div className="h-5 w-24 rounded-full skeleton" />
-                    <div className="h-3.5 w-full rounded skeleton" />
+        {/* Grid view */}
+        {view === 'grid' && (
+          <div className="card-pad" style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))',
+            gap: 'var(--gap)',
+          }}>
+            {doctorsQ.isLoading && Array.from({ length: 8 }).map((_, i) => (
+              <div key={i} className="card card-pad" style={{ boxShadow: 'none' }}>
+                <div className="flex" style={{ gap: 12, marginBottom: 12 }}>
+                  <div className="skeleton" style={{ width: 38, height: 38, borderRadius: '50%', flexShrink: 0 }} />
+                  <div style={{ flex: 1 }}>
+                    <div className="skeleton" style={{ height: 14, borderRadius: 4, width: '70%', marginBottom: 8 }} />
+                    <div className="skeleton" style={{ height: 12, borderRadius: 4, width: '50%' }} />
                   </div>
-                ))}
-              </div>
-            ) : items.length === 0 ? (
-              <div className="py-16 text-center 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">
-                  <UserGroupIcon className="w-7 h-7 text-slate-400 dark:text-slate-500" />
                 </div>
-                <p className="text-sm text-slate-500 dark:text-slate-400">
-                  {hasFilters ? 'نتیجه‌ای یافت نشد' : 'هیچ پزشکی ثبت نشده'}
-                </p>
-                {hasFilters && <button onClick={clearFilters} className="text-xs text-primary-600 dark:text-primary-400 hover:underline">پاک کردن فیلترها</button>}
               </div>
-            ) : (
-              <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">
-                {items.map(doctor => (
-                  <DoctorCard
-                    key={doctor.uuid}
-                    doctor={doctor}
-                    selected={selected.includes(doctor.uuid)}
-                    onSelect={() => toggleOne(doctor.uuid)}
-                    onView={() => navigate(`/admin/doctors/${doctor.uuid}`)}
-                    onEdit={() => navigate(`/admin/doctors/${doctor.uuid}?edit=1`)}
-                    onToggle={() => toggleMut.mutate(doctor.uuid)}
-                    onDelete={() => setDeleteTarget(doctor)}
-                    search={search}
-                    togglePending={toggleMut.isPending}
-                  />
-                ))}
+            ))}
+
+            {!doctorsQ.isLoading && items.map((doc) => (
+              <div
+                key={doc.uuid}
+                className="card card-pad"
+                style={{ cursor: 'pointer', boxShadow: 'none' }}
+                onClick={() => navigate(`/admin/doctors/${doc.uuid}`)}
+              >
+                <div className="flex" style={{ gap: 12, marginBottom: 12 }}>
+                  <DoctorAvatar name={doc.name} id={doc.id} image={doc.profile_image} />
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <b style={{ display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                      دکتر {doc.name}
+                    </b>
+                    <span className="muted" style={{ fontSize: 12.5 }}>
+                      {doc.specialties[0]?.name ?? '—'}
+                    </span>
+                  </div>
+                  <span className={`badge ${doc.is_active ? 'green' : 'gray'}`}>
+                    <span className="bdot" />
+                    {doc.is_active ? 'فعال' : 'غیرفعال'}
+                  </span>
+                </div>
+                <div className="flex" style={{ justifyContent: 'space-between', fontSize: 12.5 }}>
+                  <span className="flex" style={{ gap: 5 }}>
+                    <StarRating rate={doc.rate} />
+                    <b>{doc.rate.toFixed(1)}</b>
+                  </span>
+                  <span className="muted">{formatDate(doc.created_at)}</span>
+                </div>
               </div>
+            ))}
+
+            {!doctorsQ.isLoading && items.length === 0 && (
+              <div className="empty" style={{ gridColumn: '1/-1' }}>هیچ پزشکی یافت نشد</div>
             )}
           </div>
         )}
 
-        {/* Pagination */}
-        <div className="px-4 border-t border-slate-100 dark:border-gray-700/50">
-          <Pagination page={page} total={total} limit={limit} onPageChange={setPage} />
-        </div>
+        <Pagination page={page} total={total} limit={limit} onPageChange={setPage} />
       </div>
 
-      {/* Delete confirm */}
+      {/* Dialogs */}
       <ConfirmDialog
         open={!!deleteTarget}
         title="حذف پزشک"
-        message={`آیا از حذف دکتر "${deleteTarget?.name}" اطمینان دارید؟ این عمل قابل بازگشت نیست.`}
+        message={`آیا از حذف دکتر "${deleteTarget?.name}" اطمینان دارید؟`}
         confirmLabel="حذف"
         danger
         loading={deleteMut.isPending}
@@ -878,7 +491,6 @@ export default function DoctorsPage() {
         onCancel={() => setDeleteTarget(null)}
       />
 
-      {/* Bulk delete confirm */}
       <ConfirmDialog
         open={confirmBulkDel}
         title="حذف گروهی"
diff --git a/assets/admin/pages/LoginPage.tsx b/assets/admin/pages/LoginPage.tsx
index 2b0b3b16..06867c4f 100644
--- a/assets/admin/pages/LoginPage.tsx
+++ b/assets/admin/pages/LoginPage.tsx
@@ -3,9 +3,8 @@ 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 { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';
 import { useAuthStore } from '../stores/authStore';
-import { useUiStore } from '../stores/uiStore';
 
 const schema = z.object({
   mobile: z.string().min(10, 'شماره موبایل معتبر نیست'),
@@ -16,18 +15,12 @@ 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', {
@@ -51,140 +44,81 @@ export default function LoginPage() {
   };
 
   return (
-    <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 style={{
+      minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
+      background: 'var(--bg)', padding: 20,
+    }}>
+      <div className="card card-pad" style={{ width: '100%', maxWidth: 420 }}>
+        {/* Logo */}
+        <div style={{ textAlign: 'center', marginBottom: 28 }}>
+          <div className="brand-logo" style={{
+            margin: '0 auto 16px', width: 54, height: 54, borderRadius: 16,
+            fontSize: 26,
+          }}>
+            ♥
           </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>
+          <h1 style={{ fontSize: 22, fontWeight: 800, marginBottom: 6 }}>ورود به پنل ادمین</h1>
+          <p className="muted" style={{ fontSize: 13 }}>اطلاعات حساب مدیریتی خود را وارد کنید</p>
         </div>
 
-        <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>
+        <form onSubmit={handleSubmit(onSubmit)} noValidate>
+          {/* Mobile */}
+          <div className="form-row">
+            <label>شماره موبایل</label>
+            <input
+              {...register('mobile')}
+              className={`input${errors.mobile ? ' err' : ''}`}
+              type="tel"
+              dir="ltr"
+              placeholder="09xxxxxxxxx"
+              autoComplete="username"
+              style={{ textAlign: 'right' }}
+            />
+            {errors.mobile && <div className="err-text">{errors.mobile.message}</div>}
           </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>
-
-            <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 */}
+          {/* Password */}
+          <div className="form-row">
+            <label>رمز عبور</label>
+            <div style={{ position: 'relative' }}>
+              <input
+                {...register('password')}
+                className={`input${errors.password ? ' err' : ''}`}
+                type={showPass ? 'text' : 'password'}
+                placeholder="••••••••"
+                autoComplete="current-password"
+                style={{ paddingLeft: 44 }}
+              />
               <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"
+                type="button"
+                onClick={() => setShowPass((v) => !v)}
+                style={{
+                  position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)',
+                  color: 'var(--text-3)', background: 'none', border: 'none', cursor: 'pointer',
+                  display: 'flex', alignItems: 'center',
+                }}
               >
-                {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>
-                ) : 'ورود به سیستم'}
+                {showPass
+                  ? <EyeSlashIcon style={{ width: 18, height: 18 }} />
+                  : <EyeIcon style={{ width: 18, height: 18 }} />}
               </button>
-            </form>
+            </div>
+            {errors.password && <div className="err-text">{errors.password.message}</div>}
           </div>
-        </div>
+
+          <button
+            type="submit"
+            className="btn primary block"
+            disabled={isSubmitting}
+            style={{ marginTop: 8, height: 46, fontSize: 15 }}
+          >
+            {isSubmitting ? 'در حال ورود...' : 'ورود به سیستم'}
+          </button>
+        </form>
+
+        <p className="muted" style={{ textAlign: 'center', fontSize: 12, marginTop: 20 }}>
+          ClinicPro — نسخه ۱.۰.۰
+        </p>
       </div>
     </div>
   );
diff --git a/assets/admin/pages/PaymentsPage.tsx b/assets/admin/pages/PaymentsPage.tsx
index 89ac872d..d9ad82cd 100644
--- a/assets/admin/pages/PaymentsPage.tsx
+++ b/assets/admin/pages/PaymentsPage.tsx
@@ -1,12 +1,14 @@
 import React, { useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
-import { EyeIcon } from '@heroicons/react/24/outline';
+import {
+  MagnifyingGlassIcon, EyeIcon,
+  BanknotesIcon, ClockIcon, CreditCardIcon, ArrowDownTrayIcon,
+} from '@heroicons/react/24/outline';
 import { api } from '../lib/api';
 import type { PaginatedResponse } from '../lib/api';
 import type { Payment } from '../types';
 import { formatDate, formatRial, maskMobile } from '../lib/utils';
-import PageHeader from '../components/ui/PageHeader';
 import DataTable, { Column } from '../components/ui/DataTable';
 import StatusBadge from '../components/ui/StatusBadge';
 import Pagination from '../components/ui/Pagination';
@@ -39,13 +41,22 @@ export default function PaymentsPage() {
   const columns: Column<Payment>[] = [
     {
       key: 'patient_mobile',
-      header: 'موبایل',
-      render: (p) => <span dir="ltr">{maskMobile(p.patient_mobile)}</span>,
+      header: 'بیمار',
+      render: (p) => (
+        <div className="cell-user">
+          <div className="avatar sm" style={{
+            background: `linear-gradient(145deg, oklch(0.62 0.15 162), oklch(0.48 0.16 162))`,
+          }}>
+            {maskMobile(p.patient_mobile).slice(0, 2)}
+          </div>
+          <span dir="ltr">{maskMobile(p.patient_mobile)}</span>
+        </div>
+      ),
     },
     {
       key: 'amount',
       header: 'مبلغ',
-      render: (p) => <span className="font-medium">{formatRial(p.amount)}</span>,
+      render: (p) => <><b>{formatRial(p.amount)}</b> <span className="muted" style={{ fontSize: 11 }}>تومان</span></>,
     },
     {
       key: 'status',
@@ -55,65 +66,106 @@ export default function PaymentsPage() {
     {
       key: 'gateway',
       header: 'درگاه',
-      render: (p) => (
-        <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>
-      ),
+      render: (p) => <span className="chip" style={{ fontSize: 12 }}>{p.gateway}</span>,
     },
     {
       key: 'ref_id',
       header: 'شماره مرجع',
-      render: (p) => p.ref_id ? <span dir="ltr" className="font-mono text-xs">{p.ref_id}</span> : '—',
+      render: (p) => p.ref_id
+        ? <span dir="ltr" style={{ fontFamily: 'monospace', fontSize: 12.5, color: 'var(--text-2)' }}>{p.ref_id}</span>
+        : <span className="muted">—</span>,
     },
     {
       key: 'paid_at',
       header: 'تاریخ پرداخت',
-      render: (p) => formatDate(p.paid_at),
+      render: (p) => <span className="muted">{formatDate(p.paid_at)}</span>,
     },
     {
       key: 'created_at',
       header: 'تاریخ ثبت',
-      render: (p) => formatDate(p.created_at),
+      render: (p) => <span className="muted">{formatDate(p.created_at)}</span>,
     },
   ];
 
   const items = data?.data ?? [];
   const total = data?.meta?.totalRecords ?? 0;
 
-  return (
-    <div>
-      <PageHeader
-        title="پرداخت‌ها"
-        breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'پرداخت‌ها' }]}
-      />
+  const statCards = [
+    { label: 'کل تراکنش‌ها',  value: total > 0 ? String(total) : null, bg: 'var(--primary-soft)',  color: 'var(--primary)',   Icon: CreditCardIcon },
+    { label: 'تأییدشده',       value: null,                              bg: 'var(--success-bg)',    color: 'var(--success)',   Icon: BanknotesIcon },
+    { label: 'در انتظار',      value: null,                              bg: 'var(--warning-bg)',    color: 'var(--warning)',   Icon: ClockIcon },
+    { label: 'استرداد شده',    value: null,                              bg: 'var(--info-bg)',       color: 'var(--info)',      Icon: ArrowDownTrayIcon },
+  ];
 
-      <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-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>
-          ))}
+  return (
+    <div className="fade-in">
+      {/* Header */}
+      <div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
+        <div>
+          <h1 className="section-title">پرداخت‌ها</h1>
+          <div className="muted" style={{ fontSize: 13, marginTop: 3 }}>مدیریت تراکنش‌های مالی</div>
+        </div>
+        <button className="btn ghost sm">
+          <ArrowDownTrayIcon style={{ width: 15, height: 15 }} />
+          خروجی اکسل
+        </button>
+      </div>
+
+      {/* Stat cards */}
+      <div className="stat-grid" style={{ gridTemplateColumns: 'repeat(4,1fr)' }}>
+        {statCards.map((c) => (
+          <div key={c.label} className="stat">
+            <div className="ico" style={{ background: c.bg, color: c.color }}>
+              <c.Icon style={{ width: 20, height: 20 }} />
+            </div>
+            <div className="lbl">{c.label}</div>
+            <div className="val">
+              {isLoading
+                ? <span className="skeleton" style={{ display: 'inline-block', width: 48, height: 26, borderRadius: 4 }} />
+                : c.value ?? '—'}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Main card */}
+      <div className="card">
+        <div className="card-pad" style={{ paddingBottom: 0 }}>
+          <div className="toolbar">
+            <div className="field" style={{ minWidth: 240 }}>
+              <MagnifyingGlassIcon style={{ width: 17, height: 17 }} />
+              <input
+                placeholder="جستجو بر اساس موبایل یا شماره مرجع..."
+                value={search}
+                onChange={(e) => { setSearch(e.target.value); setPage(1); }}
+              />
+            </div>
+            <div className="seg">
+              {STATUS_FILTERS.map((f) => (
+                <button
+                  key={f.value}
+                  className={statusFilter === f.value ? 'on' : ''}
+                  onClick={() => { setStatusFilter(f.value); setPage(1); }}
+                >
+                  {f.label}
+                </button>
+              ))}
+            </div>
+          </div>
         </div>
 
         <DataTable<Payment>
           columns={columns}
           data={items}
           loading={isLoading}
-          searchValue={search}
-          onSearchChange={(v) => { setSearch(v); setPage(1); }}
-          searchPlaceholder="جستجو بر اساس موبایل یا شماره مرجع..."
           emptyMessage="هیچ پرداختی یافت نشد"
           actions={(payment) => (
-            <button onClick={() => navigate(`/admin/payments/${payment.uuid}`)}
-              className="cp-action-view" title="مشاهده">
-              <EyeIcon className="w-4 h-4" />
+            <button
+              className="mini-btn"
+              onClick={() => navigate(`/admin/payments/${payment.uuid}`)}
+              title="مشاهده"
+            >
+              <EyeIcon style={{ width: 16, height: 16 }} />
             </button>
           )}
         />
diff --git a/assets/admin/pages/RatingsPage.tsx b/assets/admin/pages/RatingsPage.tsx
index cd6d82cd..94345d9e 100644
--- a/assets/admin/pages/RatingsPage.tsx
+++ b/assets/admin/pages/RatingsPage.tsx
@@ -1,26 +1,25 @@
 import React, { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { TrashIcon, StarIcon } from '@heroicons/react/24/outline';
+import { TrashIcon, StarIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { StarIcon as StarSolid } from '@heroicons/react/24/solid';
 import { toast } from 'sonner';
 import { api } from '../lib/api';
 import type { ApiResponse, PaginatedResponse } from '../lib/api';
 import type { Rating } from '../types';
 import { formatDate } from '../lib/utils';
-import PageHeader from '../components/ui/PageHeader';
 import DataTable, { Column } from '../components/ui/DataTable';
 import Pagination from '../components/ui/Pagination';
 import ConfirmDialog from '../components/ui/ConfirmDialog';
 
 function Stars({ value }: { value: number }) {
   return (
-    <div className="flex items-center gap-0.5">
-      {[1, 2, 3, 4, 5].map((i) => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+      {[1, 2, 3, 4, 5].map((i) =>
         i <= value
-          ? <StarSolid key={i} className="w-3.5 h-3.5 text-yellow-400" />
-          : <StarIcon key={i} className="w-3.5 h-3.5 text-gray-300" />
-      ))}
-      <span className="text-xs text-gray-500 mr-1">{value}</span>
+          ? <StarSolid key={i} style={{ width: 14, height: 14, color: 'oklch(0.78 0.18 85)' }} />
+          : <StarIcon key={i} style={{ width: 14, height: 14, color: 'var(--border)' }} />
+      )}
+      <span className="muted" style={{ fontSize: 12, marginRight: 4 }}>{value}</span>
     </div>
   );
 }
@@ -52,21 +51,17 @@ export default function RatingsPage() {
   });
 
   const columns: Column<Rating>[] = [
-    { key: 'patient_name', header: 'بیمار', render: (r) => <span className="font-medium">{r.patient_name}</span> },
+    { key: 'patient_name', header: 'بیمار', render: (r) => <b>{r.patient_name}</b> },
     { key: 'doctor_name', header: 'پزشک', render: (r) => `دکتر ${r.doctor_name}` },
-    {
-      key: 'overall',
-      header: 'کلی',
-      render: (r) => <Stars value={r.overall} />,
-    },
+    { key: 'overall', header: 'کلی', render: (r) => <Stars value={r.overall} /> },
     {
       key: 'ratings_detail',
-      header: 'جزئیات امتیاز',
+      header: 'جزئیات',
       render: (r) => (
-        <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs text-slate-500 dark:text-slate-400 min-w-[160px]">
-          <span>تشخیص:</span><Stars value={r.diagnosis_accuracy} />
-          <span>مهارت:</span><Stars value={r.skill} />
-          <span>رفتار:</span><Stars value={r.behavior} />
+        <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '2px 12px', fontSize: 12 }}>
+          <span className="muted">تشخیص:</span><Stars value={r.diagnosis_accuracy} />
+          <span className="muted">مهارت:</span><Stars value={r.skill} />
+          <span className="muted">رفتار:</span><Stars value={r.behavior} />
         </div>
       ),
     },
@@ -77,25 +72,36 @@ export default function RatingsPage() {
   const total = data?.meta?.totalRecords ?? 0;
 
   return (
-    <div>
-      <PageHeader
-        title="امتیازها"
-        breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'امتیازها' }]}
-      />
+    <div className="fade-in">
+      <div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
+        <div>
+          <h1 className="section-title">امتیازها</h1>
+          <div className="muted">{total} امتیاز ثبت‌شده</div>
+        </div>
+      </div>
 
-      <div className="cp-card p-6">
+      <div className="card">
+        <div className="card-pad" style={{ paddingBottom: 0 }}>
+          <div className="toolbar">
+            <div className="field" style={{ minWidth: 240 }}>
+              <MagnifyingGlassIcon style={{ width: 17, height: 17 }} />
+              <input
+                value={search}
+                onChange={(e) => { setSearch(e.target.value); setPage(1); }}
+                placeholder="جستجو بر اساس نام پزشک..."
+              />
+            </div>
+          </div>
+        </div>
         <DataTable<Rating>
           columns={columns}
           data={items}
           loading={isLoading}
-          searchValue={search}
-          onSearchChange={(v) => { setSearch(v); setPage(1); }}
-          searchPlaceholder="جستجو بر اساس نام پزشک..."
           emptyMessage="هیچ امتیازی یافت نشد"
           actions={(rating) => (
             <button onClick={() => setDeleteTarget(rating)}
-              className="cp-action-delete" title="حذف">
-              <TrashIcon className="w-4 h-4" />
+              className="mini-btn danger" title="حذف">
+              <TrashIcon style={{ width: 15, height: 15 }} />
             </button>
           )}
         />
diff --git a/assets/admin/pages/RepresentationDetailPage.tsx b/assets/admin/pages/RepresentationDetailPage.tsx
index 63b153e0..665445e4 100644
--- a/assets/admin/pages/RepresentationDetailPage.tsx
+++ b/assets/admin/pages/RepresentationDetailPage.tsx
@@ -219,7 +219,7 @@ export default function RepresentationDetailPage() {
         footer={
           <>
             <button onClick={() => setEditOpen(false)}
-              className="cp-btn-secondary">
+              className="btn ghost sm">
               لغو
             </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="cp-btn-primary">
+              className="btn primary sm">
               {updateMutation.isPending ? 'در حال ذخیره...' : 'ذخیره'}
             </button>
           </>
@@ -238,12 +238,12 @@ export default function RepresentationDetailPage() {
       >
         <div className="space-y-4">
           <div>
-            <label className="cp-label">نام کامل</label>
+            <label className="">نام کامل</label>
             <input value={formData.full_name} onChange={(e) => setFormData((p) => ({ ...p, full_name: e.target.value }))}
               className="cp-input h-11" />
           </div>
           <div>
-            <label className="cp-label">شهر</label>
+            <label className="">شهر</label>
             <select
               value={formData.city_id}
               onChange={(e) => setFormData((p) => ({ ...p, city_id: e.target.value }))}
@@ -256,12 +256,12 @@ export default function RepresentationDetailPage() {
             </select>
           </div>
           <div>
-            <label className="cp-label">موبایل</label>
+            <label className="">موبایل</label>
             <input value={formData.mobile_number} onChange={(e) => setFormData((p) => ({ ...p, mobile_number: e.target.value }))}
               dir="ltr" className="cp-input h-11" />
           </div>
           <div>
-            <label className="cp-label">درصد کمیسیون</label>
+            <label className="">درصد کمیسیون</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="cp-input h-11" />
diff --git a/assets/admin/pages/RepresentationsPage.tsx b/assets/admin/pages/RepresentationsPage.tsx
index b1de068f..44bbb779 100644
--- a/assets/admin/pages/RepresentationsPage.tsx
+++ b/assets/admin/pages/RepresentationsPage.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
-import { EyeIcon, TrashIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { EyeIcon, TrashIcon, PlusIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { useForm, Controller } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
@@ -10,7 +10,6 @@ import { api } from '../lib/api';
 import type { ApiResponse, PaginatedResponse } from '../lib/api';
 import type { Representation, City } from '../types';
 import { formatDate, formatRial, formatNumber } from '../lib/utils';
-import PageHeader from '../components/ui/PageHeader';
 import DataTable, { Column } from '../components/ui/DataTable';
 import { ActiveBadge } from '../components/ui/StatusBadge';
 import Pagination from '../components/ui/Pagination';
@@ -36,7 +35,6 @@ export default function RepresentationsPage() {
   const [deleteTarget, setDeleteTarget] = useState<Representation | null>(null);
   const limit = 15;
 
-  // Load city list for filter and form
   const citiesQuery = useQuery({
     queryKey: ['cities-select'],
     queryFn: () => api.get<PaginatedResponse<City>>('/api/v1/admin/cities?limit=200'),
@@ -88,19 +86,11 @@ export default function RepresentationsPage() {
   });
 
   const columns: Column<Representation>[] = [
-    { key: 'full_name', header: 'نام', render: (r) => <span className="font-medium">{r.full_name}</span> },
+    { key: 'full_name', header: 'نام', render: (r) => <b>{r.full_name}</b> },
     { key: 'mobile_number', header: 'موبایل', render: (r) => <span dir="ltr">{r.mobile_number ?? '—'}</span> },
     { key: 'city', header: 'شهر', render: (r) => r.city ?? '—' },
-    {
-      key: 'commission_percent',
-      header: 'کمیسیون',
-      render: (r) => `${formatNumber(r.commission_percent)}٪`,
-    },
-    {
-      key: 'wallet_balance',
-      header: 'موجودی کیف‌پول',
-      render: (r) => formatRial(r.wallet_balance ?? 0),
-    },
+    { key: 'commission_percent', header: 'کمیسیون', render: (r) => `${formatNumber(r.commission_percent)}٪` },
+    { key: 'wallet_balance', header: 'موجودی کیف‌پول', render: (r) => formatRial(r.wallet_balance ?? 0) },
     { key: 'is_active', header: 'وضعیت', render: (r) => <ActiveBadge active={r.is_active ?? r.active ?? false} /> },
     { key: 'created_at', header: 'تاریخ ثبت', render: (r) => formatDate(r.created_at) },
   ];
@@ -109,59 +99,56 @@ export default function RepresentationsPage() {
   const total = data?.meta?.totalRecords ?? 0;
 
   return (
-    <div>
-      <PageHeader
-        title="نمایندگان"
-        breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'نمایندگان' }]}
-        action={
-          <button onClick={() => setAddOpen(true)} className="cp-btn-primary">
-            <PlusIcon className="w-4 h-4" />
-            افزودن نماینده
-          </button>
-        }
-      />
-
-      <div className="cp-card p-6">
-        {/* City filter */}
-        <div className="mb-4 flex items-center gap-3">
-          <div className="min-w-[220px]">
-            <SearchableSelect
-              options={cityOptions}
-              value={cityFilter}
-              onChange={(val) => { setCityFilter(val as number | null); setPage(1); }}
-              placeholder="فیلتر بر اساس شهر..."
-              isClearable
-              isLoading={citiesQuery.isLoading}
-              noOptionsMessage="هیچ شهری یافت نشد"
-            />
-          </div>
-          {cityFilter !== null && (
-            <button
-              onClick={() => { setCityFilter(null); setPage(1); }}
-              className="text-xs text-gray-400 hover:text-gray-600 transition-colors"
-            >
-              پاک کردن فیلتر
-            </button>
-          )}
+    <div className="fade-in">
+      <div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
+        <div>
+          <h1 className="section-title">نمایندگان</h1>
+          <div className="muted">{total} نماینده ثبت‌شده</div>
         </div>
+        <button onClick={() => setAddOpen(true)} className="btn primary sm">
+          <PlusIcon style={{ width: 16, height: 16 }} />
+          افزودن نماینده
+        </button>
+      </div>
 
+      <div className="card">
+        <div className="card-pad" style={{ paddingBottom: 0 }}>
+          <div className="toolbar">
+            <div className="field" style={{ minWidth: 240 }}>
+              <MagnifyingGlassIcon style={{ width: 17, height: 17 }} />
+              <input
+                value={search}
+                onChange={(e) => { setSearch(e.target.value); setPage(1); }}
+                placeholder="جستجو بر اساس نام یا موبایل..."
+              />
+            </div>
+            <div style={{ minWidth: 200 }}>
+              <SearchableSelect
+                options={cityOptions}
+                value={cityFilter}
+                onChange={(val) => { setCityFilter(val as number | null); setPage(1); }}
+                placeholder="فیلتر شهر..."
+                isClearable
+                isLoading={citiesQuery.isLoading}
+                noOptionsMessage="هیچ شهری یافت نشد"
+              />
+            </div>
+          </div>
+        </div>
         <DataTable<Representation>
           columns={columns}
           data={items}
           loading={isLoading}
-          searchValue={search}
-          onSearchChange={(v) => { setSearch(v); setPage(1); }}
-          searchPlaceholder="جستجو بر اساس نام یا موبایل..."
           emptyMessage="هیچ نماینده‌ای یافت نشد"
           actions={(rep) => (
             <>
               <button onClick={() => navigate(`/admin/representations/${rep.uuid}`)}
-                className="cp-action-view" title="مشاهده">
-                <EyeIcon className="w-4 h-4" />
+                className="mini-btn" title="مشاهده">
+                <EyeIcon style={{ width: 15, height: 15 }} />
               </button>
               <button onClick={() => setDeleteTarget(rep)}
-                className="cp-action-delete" title="حذف">
-                <TrashIcon className="w-4 h-4" />
+                className="mini-btn danger" title="حذف">
+                <TrashIcon style={{ width: 15, height: 15 }} />
               </button>
             </>
           )}
@@ -172,28 +159,26 @@ export default function RepresentationsPage() {
       <Modal open={addOpen} title="افزودن نماینده" onClose={() => { setAddOpen(false); reset(); }}
         footer={
           <>
-            <button onClick={() => { setAddOpen(false); reset(); }} className="cp-btn-secondary">
-              لغو
-            </button>
-            <button form="add-rep-form" type="submit" disabled={isSubmitting} className="cp-btn-primary">
+            <button onClick={() => { setAddOpen(false); reset(); }} className="btn ghost sm">لغو</button>
+            <button form="add-rep-form" type="submit" disabled={isSubmitting} className="btn primary sm">
               {isSubmitting ? 'در حال ذخیره...' : 'ذخیره'}
             </button>
           </>
         }
       >
-        <form id="add-rep-form" onSubmit={handleSubmit((d) => createMutation.mutate(d))} className="space-y-4">
-          <div>
-            <label className="cp-label">نام کامل</label>
-            <input {...register('full_name')} placeholder="علی محمدی" className="cp-input h-11" />
-            {errors.full_name && <p className="text-red-500 text-xs mt-1">{errors.full_name.message}</p>}
+        <form id="add-rep-form" onSubmit={handleSubmit((d) => createMutation.mutate(d))}>
+          <div className="form-row">
+            <label>نام کامل</label>
+            <input {...register('full_name')} placeholder="علی محمدی" className="input" />
+            {errors.full_name && <p className="err-text">{errors.full_name.message}</p>}
           </div>
-          <div>
-            <label className="cp-label">شماره موبایل</label>
-            <input {...register('mobile_number')} dir="ltr" placeholder="09xxxxxxxxx" className="cp-input h-11" />
-            {errors.mobile_number && <p className="text-red-500 text-xs mt-1">{errors.mobile_number.message}</p>}
+          <div className="form-row" style={{ marginTop: 12 }}>
+            <label>شماره موبایل</label>
+            <input {...register('mobile_number')} dir="ltr" placeholder="09xxxxxxxxx" className="input" />
+            {errors.mobile_number && <p className="err-text">{errors.mobile_number.message}</p>}
           </div>
-          <div>
-            <label className="cp-label">شهر</label>
+          <div className="form-row" style={{ marginTop: 12 }}>
+            <label>شهر</label>
             <Controller
               name="city_id"
               control={control}
@@ -210,11 +195,11 @@ export default function RepresentationsPage() {
               )}
             />
           </div>
-          <div>
-            <label className="cp-label">درصد کمیسیون</label>
+          <div className="form-row" style={{ marginTop: 12 }}>
+            <label>درصد کمیسیون</label>
             <input {...register('commission_percent')} type="number" min="0" max="100" placeholder="10" dir="ltr"
-              className="cp-input h-11" />
-            {errors.commission_percent && <p className="text-red-500 text-xs mt-1">{errors.commission_percent.message}</p>}
+              className="input" />
+            {errors.commission_percent && <p className="err-text">{errors.commission_percent.message}</p>}
           </div>
         </form>
       </Modal>
diff --git a/assets/admin/pages/SecretariesPage.tsx b/assets/admin/pages/SecretariesPage.tsx
index 689186f7..028f071a 100644
--- a/assets/admin/pages/SecretariesPage.tsx
+++ b/assets/admin/pages/SecretariesPage.tsx
@@ -1,13 +1,11 @@
 import React, { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { TrashIcon, PencilIcon } from '@heroicons/react/24/outline';
-import { useForm, Controller } from 'react-hook-form';
+import { TrashIcon, PencilIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { toast } from 'sonner';
 import { api } from '../lib/api';
 import type { ApiResponse, PaginatedResponse } from '../lib/api';
 import type { Secretary, SecretaryPermissions } from '../types';
 import { formatDate, maskMobile } from '../lib/utils';
-import PageHeader from '../components/ui/PageHeader';
 import DataTable, { Column } from '../components/ui/DataTable';
 import { ActiveBadge } from '../components/ui/StatusBadge';
 import Pagination from '../components/ui/Pagination';
@@ -22,7 +20,6 @@ const DEFAULT_PERMISSIONS: SecretaryPermissions = {
 };
 
 type PermSection = keyof SecretaryPermissions;
-type PermAction = string;
 
 const PERMISSION_LABELS: Record<PermSection, { label: string; actions: { key: string; label: string }[] }> = {
   appointments: {
@@ -76,14 +73,17 @@ function PermissionsMatrix({
     });
   };
 
+  const allActions = ['view', 'create', 'update', 'delete', 'cancel', 'update_status'];
+  const actionHeaders = ['مشاهده', 'ایجاد', 'ویرایش', 'حذف', 'لغو', 'تغییر وضعیت'];
+
   return (
-    <div className="overflow-x-auto">
-      <table className="w-full text-sm">
+    <div style={{ overflowX: 'auto' }}>
+      <table className="t">
         <thead>
-          <tr className="text-right">
-            <th className="pb-2 text-gray-500 font-medium">بخش</th>
-            {['مشاهده', 'ایجاد', 'ویرایش', 'حذف', 'لغو', 'تغییر وضعیت'].map((h) => (
-              <th key={h} className="pb-2 text-gray-500 font-medium text-center text-xs">{h}</th>
+          <tr>
+            <th>بخش</th>
+            {actionHeaders.map((h) => (
+              <th key={h} style={{ textAlign: 'center', fontSize: 12 }}>{h}</th>
             ))}
           </tr>
         </thead>
@@ -91,22 +91,21 @@ function PermissionsMatrix({
           {(Object.keys(PERMISSION_LABELS) as PermSection[]).map((section) => {
             const config = PERMISSION_LABELS[section];
             const sectionPerms = permissions[section] as Record<string, boolean>;
-            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-slate-700 dark:text-slate-300 font-medium">{config.label}</td>
+              <tr key={section}>
+                <td><b>{config.label}</b></td>
                 {allActions.map((action) => {
                   const actionConfig = config.actions.find((a) => a.key === action);
                   if (!actionConfig) {
-                    return <td key={action} className="text-center text-gray-200">—</td>;
+                    return <td key={action} style={{ textAlign: 'center', color: 'var(--border)' }}>—</td>;
                   }
                   return (
-                    <td key={action} className="text-center py-3">
+                    <td key={action} style={{ textAlign: 'center' }}>
                       <input
                         type="checkbox"
                         checked={sectionPerms[action] ?? false}
                         onChange={() => toggle(section, action)}
-                        className="w-4 h-4 accent-primary-600 cursor-pointer"
+                        style={{ width: 16, height: 16, accentColor: 'var(--primary)', cursor: 'pointer' }}
                       />
                     </td>
                   );
@@ -165,16 +164,8 @@ export default function SecretariesPage() {
   };
 
   const columns: Column<Secretary>[] = [
-    {
-      key: 'user_name',
-      header: 'نام',
-      render: (s) => <span className="font-medium text-slate-800 dark:text-slate-100">{s.user_name}</span>,
-    },
-    {
-      key: 'mobile_number',
-      header: 'موبایل',
-      render: (s) => <span dir="ltr">{maskMobile(s.mobile_number)}</span>,
-    },
+    { key: 'user_name', header: 'نام', render: (s) => <b>{s.user_name}</b> },
+    { key: 'mobile_number', header: 'موبایل', render: (s) => <span dir="ltr">{maskMobile(s.mobile_number)}</span> },
     { key: 'doctor_name', header: 'پزشک', render: (s) => `دکتر ${s.doctor_name}` },
     { key: 'is_active', header: 'وضعیت', render: (s) => <ActiveBadge active={s.is_active} /> },
     { key: 'created_at', header: 'تاریخ ثبت', render: (s) => formatDate(s.created_at) },
@@ -184,30 +175,39 @@ export default function SecretariesPage() {
   const total = data?.meta?.totalRecords ?? 0;
 
   return (
-    <div>
-      <PageHeader
-        title="منشی‌ها"
-        breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'منشی‌ها' }]}
-      />
+    <div className="fade-in">
+      <div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
+        <div>
+          <h1 className="section-title">منشی‌ها</h1>
+          <div className="muted">{total} منشی ثبت‌شده</div>
+        </div>
+      </div>
 
-      <div className="cp-card p-6">
+      <div className="card">
+        <div className="card-pad" style={{ paddingBottom: 0 }}>
+          <div className="toolbar">
+            <div className="field" style={{ minWidth: 240 }}>
+              <MagnifyingGlassIcon style={{ width: 17, height: 17 }} />
+              <input
+                value={search}
+                onChange={(e) => { setSearch(e.target.value); setPage(1); }}
+                placeholder="جستجو بر اساس نام یا پزشک..."
+              />
+            </div>
+          </div>
+        </div>
         <DataTable<Secretary>
           columns={columns}
           data={items}
           loading={isLoading}
-          searchValue={search}
-          onSearchChange={(v) => { setSearch(v); setPage(1); }}
-          searchPlaceholder="جستجو بر اساس نام یا پزشک..."
           emptyMessage="هیچ منشی‌ای یافت نشد"
           actions={(sec) => (
             <>
-              <button onClick={() => openEdit(sec)}
-                className="cp-action-edit" title="ویرایش دسترسی‌ها">
-                <PencilIcon className="w-4 h-4" />
+              <button onClick={() => openEdit(sec)} className="mini-btn" title="ویرایش دسترسی‌ها">
+                <PencilIcon style={{ width: 15, height: 15 }} />
               </button>
-              <button onClick={() => setDeleteTarget(sec)}
-                className="cp-action-delete" title="حذف">
-                <TrashIcon className="w-4 h-4" />
+              <button onClick={() => setDeleteTarget(sec)} className="mini-btn danger" title="حذف">
+                <TrashIcon style={{ width: 15, height: 15 }} />
               </button>
             </>
           )}
@@ -222,14 +222,11 @@ export default function SecretariesPage() {
         onClose={() => setEditTarget(null)}
         footer={
           <>
-            <button onClick={() => setEditTarget(null)}
-              className="cp-btn-secondary">
-              لغو
-            </button>
+            <button onClick={() => setEditTarget(null)} className="btn ghost sm">لغو</button>
             <button
               onClick={() => editTarget && updatePermsMutation.mutate({ uuid: editTarget.uuid, permissions: editPerms })}
               disabled={updatePermsMutation.isPending}
-              className="cp-btn-primary">
+              className="btn primary sm">
               {updatePermsMutation.isPending ? 'در حال ذخیره...' : 'ذخیره دسترسی‌ها'}
             </button>
           </>
diff --git a/assets/admin/pages/SettlementsPage.tsx b/assets/admin/pages/SettlementsPage.tsx
index 7b53d6de..81fdb6b3 100644
--- a/assets/admin/pages/SettlementsPage.tsx
+++ b/assets/admin/pages/SettlementsPage.tsx
@@ -1,13 +1,12 @@
 import React, { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
-import { EyeIcon, CheckIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import { EyeIcon, CheckIcon, XMarkIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { toast } from 'sonner';
 import { api } from '../lib/api';
 import type { ApiResponse, PaginatedResponse } from '../lib/api';
 import type { Settlement } from '../types';
 import { formatDate, formatRial } from '../lib/utils';
-import PageHeader from '../components/ui/PageHeader';
 import DataTable, { Column } from '../components/ui/DataTable';
 import StatusBadge from '../components/ui/StatusBadge';
 import Pagination from '../components/ui/Pagination';
@@ -66,9 +65,9 @@ export default function SettlementsPage() {
   });
 
   const columns: Column<Settlement>[] = [
-    { key: 'representation_name', header: 'نماینده', render: (s) => <span className="font-medium">{s.representation_name}</span> },
+    { key: 'representation_name', header: 'نماینده', render: (s) => <b>{s.representation_name}</b> },
     { key: 'amount', header: 'مبلغ', render: (s) => formatRial(s.amount) },
-    { key: 'bank_card', header: 'شماره کارت', render: (s) => s.bank_card ? <span dir="ltr" className="font-mono text-xs">{s.bank_card}</span> : '—' },
+    { key: 'bank_card', header: 'شماره کارت', render: (s) => s.bank_card ? <span dir="ltr" style={{ fontFamily: 'monospace', fontSize: 12 }}>{s.bank_card}</span> : '—' },
     { key: 'bank_name', header: 'بانک' },
     { key: 'status', header: 'وضعیت', render: (s) => <StatusBadge type="settlement" value={s.status} /> },
     { key: 'requested_at', header: 'تاریخ درخواست', render: (s) => formatDate(s.requested_at) },
@@ -78,50 +77,56 @@ export default function SettlementsPage() {
   const total = data?.meta?.totalRecords ?? 0;
 
   return (
-    <div>
-      <PageHeader
-        title="تسویه‌حساب"
-        breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'تسویه‌حساب' }]}
-      />
-
-      <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-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>
-          ))}
+    <div className="fade-in">
+      <div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
+        <div>
+          <h1 className="section-title">تسویه‌حساب</h1>
+          <div className="muted">{total} درخواست تسویه</div>
         </div>
+      </div>
 
+      <div className="card">
+        <div className="card-pad" style={{ paddingBottom: 0 }}>
+          <div className="toolbar">
+            <div className="field" style={{ minWidth: 240 }}>
+              <MagnifyingGlassIcon style={{ width: 17, height: 17 }} />
+              <input
+                value={search}
+                onChange={(e) => { setSearch(e.target.value); setPage(1); }}
+                placeholder="جستجو بر اساس نام نماینده..."
+              />
+            </div>
+            <div className="seg">
+              {STATUS_FILTERS.map((f) => (
+                <button
+                  key={f.value}
+                  className={statusFilter === f.value ? 'on' : ''}
+                  onClick={() => { setStatusFilter(f.value); setPage(1); }}
+                >
+                  {f.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
         <DataTable<Settlement>
           columns={columns}
           data={items}
           loading={isLoading}
-          searchValue={search}
-          onSearchChange={(v) => { setSearch(v); setPage(1); }}
-          searchPlaceholder="جستجو بر اساس نام نماینده..."
           emptyMessage="هیچ درخواست تسویه‌ای یافت نشد"
           actions={(s) => (
             <>
               <button onClick={() => navigate(`/admin/settlements/${s.uuid}`)}
-                className="cp-action-view" title="مشاهده">
-                <EyeIcon className="w-4 h-4" />
+                className="mini-btn" title="مشاهده">
+                <EyeIcon style={{ width: 15, height: 15 }} />
               </button>
               {s.status === 'pending' && (
                 <>
-                  <button
-                    onClick={() => setApproveTarget(s)}
-                    className="cp-action-approve"
-                    title="تأیید"
-                  >
-                    <CheckIcon className="w-4 h-4" />
+                  <button onClick={() => setApproveTarget(s)} className="mini-btn" title="تأیید">
+                    <CheckIcon style={{ width: 15, height: 15 }} />
                   </button>
-                  <button onClick={() => setRejectTarget(s)}
-                    className="cp-action-delete" title="رد">
-                    <XMarkIcon className="w-4 h-4" />
+                  <button onClick={() => setRejectTarget(s)} className="mini-btn danger" title="رد">
+                    <XMarkIcon style={{ width: 15, height: 15 }} />
                   </button>
                 </>
               )}
@@ -148,26 +153,27 @@ export default function SettlementsPage() {
         footer={
           <>
             <button onClick={() => { setRejectTarget(null); setRejectReason(''); }}
-              className="cp-btn-secondary">
-              لغو
-            </button>
+              className="btn ghost sm">لغو</button>
             <button
               onClick={() => rejectTarget && rejectMutation.mutate({ s: rejectTarget, reason: rejectReason })}
               disabled={!rejectReason || rejectMutation.isPending}
-              className="cp-btn-danger">
+              className="btn danger sm">
               {rejectMutation.isPending ? 'در حال ارسال...' : 'رد کردن'}
             </button>
           </>
         }
       >
-        <label className="cp-label mb-2">دلیل رد:</label>
-        <textarea
-          value={rejectReason}
-          onChange={(e) => setRejectReason(e.target.value)}
-          rows={4}
-          placeholder="دلیل رد درخواست را بنویسید..."
-          className="cp-textarea resize-none"
-        />
+        <div className="form-row">
+          <label>دلیل رد</label>
+          <textarea
+            value={rejectReason}
+            onChange={(e) => setRejectReason(e.target.value)}
+            rows={4}
+            placeholder="دلیل رد درخواست را بنویسید..."
+            className="input"
+            style={{ resize: 'none', height: 'auto' }}
+          />
+        </div>
       </Modal>
     </div>
   );
diff --git a/assets/admin/pages/SmsPage.tsx b/assets/admin/pages/SmsPage.tsx
index 533ef433..bb385868 100644
--- a/assets/admin/pages/SmsPage.tsx
+++ b/assets/admin/pages/SmsPage.tsx
@@ -9,7 +9,6 @@ import { api } from '../lib/api';
 import type { ApiResponse, PaginatedResponse } from '../lib/api';
 import type { SmsTemplate, SmsLog } from '../types';
 import { formatDate, formatDateTime } from '../lib/utils';
-import PageHeader from '../components/ui/PageHeader';
 import DataTable, { Column } from '../components/ui/DataTable';
 import StatusBadge from '../components/ui/StatusBadge';
 import Pagination from '../components/ui/Pagination';
@@ -24,6 +23,12 @@ type TemplateFormData = z.infer<typeof templateSchema>;
 
 type Tab = 'samples' | 'pending' | 'logs';
 
+const STATUS_LOG_META: Record<string, { label: string; cls: string }> = {
+  sent: { label: 'ارسال شده', cls: 'green' },
+  failed: { label: 'ناموفق', cls: 'red' },
+  queued: { label: 'در صف', cls: 'amber' },
+};
+
 export default function SmsPage() {
   const qc = useQueryClient();
   const [activeTab, setActiveTab] = useState<Tab>('samples');
@@ -110,11 +115,11 @@ export default function SmsPage() {
   });
 
   const templateColumns: Column<SmsTemplate>[] = [
-    { key: 'name', header: 'نام', render: (t) => <span className="font-medium">{t.name}</span> },
+    { key: 'name', header: 'نام', render: (t) => <b>{t.name}</b> },
     {
       key: 'body',
       header: 'محتوا',
-      render: (t) => <span className="text-xs text-gray-500 line-clamp-1 max-w-xs">{t.body}</span>,
+      render: (t) => <span className="muted" style={{ fontSize: 12, display: 'block', maxWidth: 280, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.body}</span>,
     },
     { key: 'status', header: 'وضعیت', render: (t) => <StatusBadge type="sms" value={t.status} /> },
     { key: 'created_at', header: 'تاریخ', render: (t) => formatDate(t.created_at) },
@@ -127,20 +132,15 @@ export default function SmsPage() {
     {
       key: 'message',
       header: 'پیام',
-      render: (l) => <span className="text-xs text-gray-500 line-clamp-1 max-w-xs">{l.message}</span>,
+      render: (l) => <span className="muted" style={{ fontSize: 12, display: 'block', maxWidth: 280, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{l.message}</span>,
     },
     {
       key: 'status',
       header: 'وضعیت',
-      render: (l) => (
-        <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${
-          l.status === 'sent' ? 'bg-green-100 text-green-700'
-          : l.status === 'failed' ? 'bg-red-100 text-red-700'
-          : 'bg-yellow-100 text-yellow-700'
-        }`}>
-          {l.status === 'sent' ? 'ارسال شده' : l.status === 'failed' ? 'ناموفق' : 'در صف'}
-        </span>
-      ),
+      render: (l) => {
+        const meta = STATUS_LOG_META[l.status] ?? { label: l.status, cls: 'gray' };
+        return <span className={`badge ${meta.cls}`}><span className="bdot" />{meta.label}</span>;
+      },
     },
     { key: 'provider', header: 'سرویس‌دهنده' },
     { key: 'sent_at', header: 'زمان ارسال', render: (l) => formatDateTime(l.sent_at) },
@@ -153,38 +153,58 @@ export default function SmsPage() {
     setPage(1);
   };
 
-  return (
-    <div>
-      <PageHeader
-        title="پیامک"
-        breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'پیامک' }]}
-        action={
-          activeTab === 'samples' ? (
-            <button onClick={() => setAddOpen(true)}
-              className="cp-btn-primary">
-              <PlusIcon className="w-4 h-4" />
-              افزودن قالب
-            </button>
-          ) : null
-        }
-      />
+  const TABS: { key: Tab; label: string; badge?: number }[] = [
+    { key: 'samples', label: 'قالب‌های نمونه' },
+    { key: 'pending', label: 'در انتظار تأیید', badge: pendingCount },
+    { key: 'logs', label: 'لاگ‌های ارسال' },
+  ];
 
-      <div className="cp-card">
-        <div className="flex border-b border-slate-200 dark:border-gray-700 px-6 pt-4">
-          {([
-            { key: 'samples' as Tab, label: 'قالب‌های نمونه' },
-            { key: 'pending' as Tab, label: 'در انتظار تأیید', badge: pendingCount },
-            { key: 'logs' as Tab, label: 'لاگ‌های ارسال' },
-          ]).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 flex items-center gap-1.5 ${
-                activeTab === t.key
-                  ? 'border-primary-600 text-primary-600'
-                  : 'border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200'
-              }`}>
+  return (
+    <div className="fade-in">
+      <div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
+        <div>
+          <h1 className="section-title">پیامک</h1>
+          <div className="muted">مدیریت قالب‌های پیامک</div>
+        </div>
+        {activeTab === 'samples' && (
+          <button onClick={() => setAddOpen(true)} className="btn primary sm">
+            <PlusIcon style={{ width: 16, height: 16 }} />
+            افزودن قالب
+          </button>
+        )}
+      </div>
+
+      <div className="card">
+        {/* Tabs */}
+        <div style={{ display: 'flex', borderBottom: '1px solid var(--border)', padding: '0 var(--card-pad)' }}>
+          {TABS.map((t) => (
+            <button
+              key={t.key}
+              onClick={() => handleTabChange(t.key)}
+              style={{
+                padding: '14px 16px',
+                fontSize: 14,
+                fontWeight: 500,
+                border: 'none',
+                background: 'none',
+                cursor: 'pointer',
+                borderBottom: `2px solid ${activeTab === t.key ? 'var(--primary)' : 'transparent'}`,
+                color: activeTab === t.key ? 'var(--primary)' : 'var(--text-2)',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 6,
+                marginBottom: -1,
+                transition: 'color .15s',
+              }}
+            >
               {t.label}
               {t.badge != null && t.badge > 0 && (
-                <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-bold bg-orange-500 text-white leading-none">
+                <span style={{
+                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+                  minWidth: 18, height: 18, padding: '0 4px', borderRadius: 9,
+                  fontSize: 10, fontWeight: 700,
+                  background: 'oklch(0.62 0.22 30)', color: '#fff', lineHeight: 1,
+                }}>
                   {t.badge}
                 </span>
               )}
@@ -192,7 +212,7 @@ export default function SmsPage() {
           ))}
         </div>
 
-        <div className="p-6">
+        <div className="card-pad" style={{ paddingTop: 'var(--card-pad)' }}>
           {activeTab === 'samples' && (
             <>
               <DataTable<SmsTemplate>
@@ -201,9 +221,8 @@ export default function SmsPage() {
                 loading={sampleTemplatesQuery.isLoading}
                 emptyMessage="هیچ قالبی یافت نشد"
                 actions={(t) => (
-                  <button onClick={() => setDeleteTarget(t)}
-                    className="cp-action-delete" title="حذف">
-                    <TrashIcon className="w-4 h-4" />
+                  <button onClick={() => setDeleteTarget(t)} className="mini-btn danger" title="حذف">
+                    <TrashIcon style={{ width: 15, height: 15 }} />
                   </button>
                 )}
               />
@@ -225,13 +244,11 @@ export default function SmsPage() {
                 emptyMessage="هیچ قالبی در انتظار تأیید نیست"
                 actions={(t) => (
                   <>
-                    <button onClick={() => setApproveTarget(t)}
-                      className="cp-action-approve" title="تأیید">
-                      <CheckIcon className="w-4 h-4" />
+                    <button onClick={() => setApproveTarget(t)} className="mini-btn" title="تأیید">
+                      <CheckIcon style={{ width: 15, height: 15 }} />
                     </button>
-                    <button onClick={() => setRejectTarget(t)}
-                      className="cp-action-delete" title="رد">
-                      <XMarkIcon className="w-4 h-4" />
+                    <button onClick={() => setRejectTarget(t)} className="mini-btn danger" title="رد">
+                      <XMarkIcon style={{ width: 15, height: 15 }} />
                     </button>
                   </>
                 )}
@@ -267,29 +284,24 @@ export default function SmsPage() {
       <Modal open={addOpen} title="افزودن قالب نمونه" onClose={() => setAddOpen(false)}
         footer={
           <>
-            <button onClick={() => setAddOpen(false)}
-              className="cp-btn-secondary">
-              لغو
-            </button>
-            <button form="add-sms-form" type="submit" disabled={isSubmitting}
-              className="cp-btn-primary">
+            <button onClick={() => setAddOpen(false)} className="btn ghost sm">لغو</button>
+            <button form="add-sms-form" type="submit" disabled={isSubmitting} className="btn primary sm">
               {isSubmitting ? 'در حال ذخیره...' : 'ذخیره'}
             </button>
           </>
         }
       >
-        <form id="add-sms-form" onSubmit={handleSubmit((d) => createMutation.mutate(d))} className="space-y-4">
-          <div>
-            <label className="cp-label">نام قالب</label>
-            <input {...register('name')} placeholder="مثال: تأیید نوبت"
-              className="cp-input h-11" />
-            {errors.name && <p className="text-red-500 text-xs mt-1">{errors.name.message}</p>}
+        <form id="add-sms-form" onSubmit={handleSubmit((d) => createMutation.mutate(d))}>
+          <div className="form-row">
+            <label>نام قالب</label>
+            <input {...register('name')} placeholder="مثال: تأیید نوبت" className="input" />
+            {errors.name && <p className="err-text">{errors.name.message}</p>}
           </div>
-          <div>
-            <label className="cp-label">متن قالب</label>
+          <div className="form-row" style={{ marginTop: 12 }}>
+            <label>متن قالب</label>
             <textarea {...register('body')} rows={4} placeholder="متن پیامک..."
-              className="cp-textarea resize-none" />
-            {errors.body && <p className="text-red-500 text-xs mt-1">{errors.body.message}</p>}
+              className="input" style={{ resize: 'none', height: 'auto' }} />
+            {errors.body && <p className="err-text">{errors.body.message}</p>}
           </div>
         </form>
       </Modal>
@@ -298,23 +310,22 @@ export default function SmsPage() {
         onClose={() => { setRejectTarget(null); setRejectReason(''); }}
         footer={
           <>
-            <button onClick={() => { setRejectTarget(null); setRejectReason(''); }}
-              className="cp-btn-secondary">
-              لغو
-            </button>
+            <button onClick={() => { setRejectTarget(null); setRejectReason(''); }} className="btn ghost sm">لغو</button>
             <button
               onClick={() => rejectTarget && rejectMutation.mutate({ t: rejectTarget, reason: rejectReason })}
               disabled={!rejectReason || rejectMutation.isPending}
-              className="cp-btn-danger">
+              className="btn danger sm">
               رد کردن
             </button>
           </>
         }
       >
-        <label className="cp-label mb-2">دلیل رد:</label>
-        <textarea value={rejectReason} onChange={(e) => setRejectReason(e.target.value)}
-          rows={4} placeholder="دلیل رد را بنویسید..."
-          className="cp-textarea resize-none" />
+        <div className="form-row">
+          <label>دلیل رد</label>
+          <textarea value={rejectReason} onChange={(e) => setRejectReason(e.target.value)}
+            rows={4} placeholder="دلیل رد را بنویسید..."
+            className="input" style={{ resize: 'none', height: 'auto' }} />
+        </div>
       </Modal>
 
       <ConfirmDialog
diff --git a/assets/admin/pages/UserDetailPage.tsx b/assets/admin/pages/UserDetailPage.tsx
index 68e80065..1ec8f911 100644
--- a/assets/admin/pages/UserDetailPage.tsx
+++ b/assets/admin/pages/UserDetailPage.tsx
@@ -132,7 +132,7 @@ function ChangeRoleModal({ current, loading, onSave, onClose }: {
       footer={
         <>
           <button onClick={onClose} className="cp-btn-secondary px-5">لغو</button>
-          <button onClick={() => onSave(selected)} disabled={loading} className="cp-btn-primary">
+          <button onClick={() => onSave(selected)} disabled={loading} className="btn primary sm">
             {loading ? 'در حال ذخیره...' : 'ذخیره تغییرات'}
           </button>
         </>
@@ -489,7 +489,7 @@ export default function UserDetailPage() {
               form="edit-user-form"
               type="submit"
               disabled={updateMut.isPending}
-              className="cp-btn-primary"
+              className="btn primary sm"
             >
               {updateMut.isPending ? 'در حال ذخیره...' : 'ذخیره تغییرات'}
             </button>
diff --git a/assets/admin/pages/UsersPage.tsx b/assets/admin/pages/UsersPage.tsx
index 0847489f..e503db0c 100644
--- a/assets/admin/pages/UsersPage.tsx
+++ b/assets/admin/pages/UsersPage.tsx
@@ -2,10 +2,9 @@ import React, { useState, useEffect, useMemo } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 import {
-  MagnifyingGlassIcon, PlusIcon, EllipsisVerticalIcon,
-  EyeIcon, PencilIcon, TrashIcon, ArrowPathIcon,
-  UserGroupIcon, CheckCircleIcon, XCircleIcon,
-  ShieldCheckIcon, HeartIcon, UserIcon, FunnelIcon,
+  MagnifyingGlassIcon, PlusIcon,
+  EyeIcon, TrashIcon, ArrowPathIcon,
+  CheckCircleIcon, XCircleIcon, ShieldCheckIcon,
 } from '@heroicons/react/24/outline';
 import { toast } from 'sonner';
 import { api } from '../lib/api';
@@ -13,6 +12,7 @@ import type { ApiResponse, PaginatedResponse } from '../lib/api';
 import { formatDate, formatNumber, maskMobile } from '../lib/utils';
 import ConfirmDialog from '../components/ui/ConfirmDialog';
 import Pagination from '../components/ui/Pagination';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 
 // ── Types ─────────────────────────────────────────────────────────────────
 
@@ -37,14 +37,16 @@ interface UserStats {
   patients: number;
 }
 
-// ── Role helpers ──────────────────────────────────────────────────────────
+// ── Helpers ───────────────────────────────────────────────────────────────
 
-const ROLE_META: Record<string, { label: string; cls: string; dot: string }> = {
-  admin:     { label: 'ادمین',  cls: 'bg-violet-100 dark:bg-violet-400/10 text-violet-700 dark:text-violet-300',    dot: '#8b5cf6' },
-  doctor:    { label: 'پزشک',   cls: 'bg-blue-100 dark:bg-blue-400/10 text-blue-700 dark:text-blue-300',            dot: '#3b82f6' },
-  secretary: { label: 'منشی',   cls: 'bg-orange-100 dark:bg-orange-400/10 text-orange-700 dark:text-orange-300',    dot: '#f97316' },
-  clinic:    { label: 'کلینیک', cls: 'bg-emerald-100 dark:bg-emerald-400/10 text-emerald-700 dark:text-emerald-300', dot: '#10b981' },
-  patient:   { label: 'بیمار',  cls: 'bg-slate-100 dark:bg-slate-400/10 text-slate-600 dark:text-slate-400',        dot: '#94a3b8' },
+const HUES_LIST = [256, 205, 162, 295, 272];
+
+const ROLE_META: Record<string, { label: string; badgeCls: string }> = {
+  admin:     { label: 'ادمین',   badgeCls: 'violet' },
+  doctor:    { label: 'پزشک',    badgeCls: 'blue'   },
+  secretary: { label: 'منشی',    badgeCls: 'amber'  },
+  clinic:    { label: 'کلینیک',  badgeCls: 'green'  },
+  patient:   { label: 'بیمار',   badgeCls: 'gray'   },
 };
 
 function getPrimaryRole(roles: string[]): string {
@@ -55,22 +57,16 @@ function getPrimaryRole(roles: string[]): string {
   return 'patient';
 }
 
-// ── Sub-components ────────────────────────────────────────────────────────
-
-const AVATAR_COLORS = [
-  'bg-violet-100 text-violet-700 dark:bg-violet-400/20 dark:text-violet-300',
-  'bg-blue-100 text-blue-700 dark:bg-blue-400/20 dark:text-blue-300',
-  'bg-emerald-100 text-emerald-700 dark:bg-emerald-400/20 dark:text-emerald-300',
-  'bg-pink-100 text-pink-700 dark:bg-pink-400/20 dark:text-pink-300',
-  'bg-amber-100 text-amber-700 dark:bg-amber-400/20 dark:text-amber-300',
-];
-
-function Avatar({ name, id }: { name: string | null; id: number }) {
+function UserAvatar({ name, id, size = 'sm' }: { name: string | null; id: number; size?: 'sm' | 'lg' }) {
   const initials = name
-    ? name.split(' ').filter(Boolean).map(w => w[0]).join('').toUpperCase().slice(0, 2)
+    ? name.split(' ').filter(Boolean).map((w) => w[0]).join('').toUpperCase().slice(0, 2)
     : '؟';
+  const hue = HUES_LIST[id % HUES_LIST.length];
   return (
-    <div className={`w-8 h-8 rounded-full ${AVATAR_COLORS[id % AVATAR_COLORS.length]} flex items-center justify-center text-xs font-bold shrink-0`}>
+    <div
+      className={`avatar ${size}`}
+      style={{ background: `linear-gradient(145deg, oklch(0.62 0.15 ${hue}), oklch(0.48 0.16 ${hue}))` }}
+    >
       {initials}
     </div>
   );
@@ -80,61 +76,19 @@ function RoleBadge({ roles }: { roles: string[] }) {
   const key  = getPrimaryRole(roles);
   const meta = ROLE_META[key];
   return (
-    <span className={`inline-flex items-center gap-1 text-[11px] font-medium px-2 py-0.5 rounded-full ${meta.cls}`}>
-      <span className="w-1.5 h-1.5 rounded-full shrink-0" style={{ backgroundColor: meta.dot }} />
+    <span className={`badge ${meta.badgeCls}`}>
+      <span className="bdot" />
       {meta.label}
     </span>
   );
 }
 
 function ActiveBadge({ active }: { active: boolean }) {
-  return active ? (
-    <span className="inline-flex items-center gap-1 text-[11px] font-medium px-2 py-0.5 rounded-full bg-green-100 dark:bg-green-400/10 text-green-700 dark:text-green-300">
-      <span className="w-1.5 h-1.5 rounded-full bg-green-500 shrink-0" />
-      فعال
-    </span>
-  ) : (
-    <span className="inline-flex items-center gap-1 text-[11px] font-medium px-2 py-0.5 rounded-full bg-slate-100 dark:bg-slate-400/10 text-slate-500 dark:text-slate-400">
-      <span className="w-1.5 h-1.5 rounded-full bg-slate-400 shrink-0" />
-      غیرفعال
-    </span>
-  );
-}
-
-function highlight(text: string | null | undefined, query: string): React.ReactNode {
-  if (!text || !query.trim()) return text ?? '—';
-  const idx = text.toLowerCase().indexOf(query.toLowerCase());
-  if (idx === -1) return text;
   return (
-    <>
-      {text.slice(0, idx)}
-      <mark className="bg-yellow-100 dark:bg-yellow-400/20 text-yellow-800 dark:text-yellow-200 rounded px-0.5 not-italic">
-        {text.slice(idx, idx + query.length)}
-      </mark>
-      {text.slice(idx + query.length)}
-    </>
-  );
-}
-
-// ── KPI Card ──────────────────────────────────────────────────────────────
-
-function KpiCard({ label, value, icon: Icon, iconBg, iconColor }: {
-  label: string; value: number | undefined;
-  icon: React.ElementType; iconBg: string; iconColor: string;
-}) {
-  return (
-    <div className="cp-card p-4 flex items-center gap-3">
-      <div className={`cp-stat-icon ${iconBg} shrink-0`}>
-        <Icon className={`w-5 h-5 ${iconColor}`} />
-      </div>
-      <div className="min-w-0 flex-1">
-        <p className="text-xs text-slate-500 dark:text-slate-400 mb-0.5 truncate">{label}</p>
-        {value === undefined
-          ? <div className="h-5 w-16 rounded skeleton" />
-          : <p className="text-lg font-bold text-slate-900 dark:text-slate-50 leading-none">{formatNumber(value)}</p>
-        }
-      </div>
-    </div>
+    <span className={`badge ${active ? 'green' : 'gray'}`}>
+      <span className="bdot" />
+      {active ? 'فعال' : 'غیرفعال'}
+    </span>
   );
 }
 
@@ -146,33 +100,42 @@ function ChangeRoleModal({ user, onClose, onSave, loading }: {
 }) {
   const [selected, setSelected] = useState(getPrimaryRole(user.roles));
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm animate-fade-in">
-      <div className="cp-card w-full max-w-sm p-6 animate-scale-in shadow-2xl">
-        <h3 className="text-base font-bold text-slate-900 dark:text-slate-50 mb-1">تغییر نقش</h3>
-        <p className="text-sm text-slate-500 dark:text-slate-400 mb-5">{user.name || user.mobile_number}</p>
-        <div className="space-y-2 mb-6">
-          {Object.entries(ROLE_META).map(([key, meta]) => (
-            <label
-              key={key}
-              className={`flex items-center gap-3 p-3 rounded-xl cursor-pointer border-2 transition-all ${
-                selected === key
-                  ? 'border-primary-500 bg-primary-50 dark:bg-primary-500/10'
-                  : 'border-transparent hover:bg-slate-50 dark:hover:bg-gray-800 border border-slate-200 dark:border-gray-700'
-              }`}
-            >
-              <input type="radio" name="role" value={key} checked={selected === key}
-                onChange={() => setSelected(key)} className="sr-only" />
-              <span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: meta.dot }} />
-              <span className="text-sm font-medium text-slate-800 dark:text-slate-200 flex-1">{meta.label}</span>
-              {selected === key && <CheckCircleIcon className="w-4 h-4 text-primary-600 dark:text-primary-400" />}
-            </label>
-          ))}
+    <div className="overlay" onClick={onClose}>
+      <div className="modal" style={{ maxWidth: 400 }} onClick={(e) => e.stopPropagation()}>
+        <div className="modal-head">
+          <h2 style={{ fontSize: 16 }}>تغییر نقش</h2>
+          <button className="mini-btn" onClick={onClose}>
+            <XMarkIcon style={{ width: 18, height: 18 }} />
+          </button>
         </div>
-        <div className="flex gap-2">
-          <button onClick={() => onSave(selected)} disabled={loading} className="cp-btn-primary flex-1">
+        <div className="modal-body">
+          <p className="muted" style={{ fontSize: 13, marginBottom: 16 }}>{user.name || user.mobile_number}</p>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+            {Object.entries(ROLE_META).map(([key, meta]) => (
+              <label
+                key={key}
+                style={{
+                  display: 'flex', alignItems: 'center', gap: 12, padding: '11px 14px',
+                  borderRadius: 'var(--r)', cursor: 'pointer',
+                  border: `2px solid ${selected === key ? 'var(--primary)' : 'var(--border)'}`,
+                  background: selected === key ? 'var(--primary-soft)' : 'var(--surface-2)',
+                  transition: '.15s',
+                }}
+              >
+                <input type="radio" name="role" value={key} checked={selected === key}
+                  onChange={() => setSelected(key)} style={{ accentColor: 'var(--primary)', width: 16, height: 16 }} />
+                <span className={`badge ${meta.badgeCls}`} style={{ pointerEvents: 'none' }}>
+                  <span className="bdot" />{meta.label}
+                </span>
+              </label>
+            ))}
+          </div>
+        </div>
+        <div className="modal-foot" style={{ justifyContent: 'flex-end' }}>
+          <button className="btn ghost sm" onClick={onClose} disabled={loading}>انصراف</button>
+          <button className="btn primary sm" onClick={() => onSave(selected)} disabled={loading}>
             {loading ? 'در حال ذخیره...' : 'ذخیره'}
           </button>
-          <button onClick={onClose} disabled={loading} className="cp-btn-secondary px-5">لغو</button>
         </div>
       </div>
     </div>
@@ -182,16 +145,14 @@ function ChangeRoleModal({ user, onClose, onSave, loading }: {
 // ── Constants ─────────────────────────────────────────────────────────────
 
 const ROLE_TABS = [
-  { key: '',          label: 'همه',    dot: '' },
-  { key: 'admin',     label: 'ادمین',  dot: '#8b5cf6' },
-  { key: 'doctor',    label: 'پزشک',   dot: '#3b82f6' },
-  { key: 'secretary', label: 'منشی',   dot: '#f97316' },
-  { key: 'clinic',    label: 'کلینیک', dot: '#10b981' },
-  { key: 'patient',   label: 'بیمار',  dot: '#94a3b8' },
+  { key: '',          label: 'همه نقش‌ها' },
+  { key: 'admin',     label: 'ادمین'      },
+  { key: 'doctor',    label: 'پزشک'       },
+  { key: 'secretary', label: 'منشی'       },
+  { key: 'clinic',    label: 'کلینیک'     },
+  { key: 'patient',   label: 'بیمار'      },
 ];
 
-const LIMIT_OPTIONS = [10, 25, 50, 100];
-
 // ── Main Page ─────────────────────────────────────────────────────────────
 
 export default function UsersPage() {
@@ -199,37 +160,23 @@ export default function UsersPage() {
   const qc = useQueryClient();
 
   const [page, setPage]               = useState(1);
-  const [limit, setLimit]             = useState(25);
+  const [limit]                       = useState(25);
   const [searchInput, setSearchInput] = useState('');
   const [search, setSearch]           = useState('');
   const [role, setRole]               = useState('');
   const [status, setStatus]           = useState('');
-  const [sort, setSort]               = useState('newest');
   const [selected, setSelected]       = useState<string[]>([]);
-  const [activeMenu, setActiveMenu]   = useState<string | null>(null);
-  const [deleteTarget, setDeleteTarget]       = useState<AdminUser | null>(null);
-  const [roleTarget, setRoleTarget]           = useState<AdminUser | null>(null);
-  const [confirmBulkDel, setConfirmBulkDel]   = useState(false);
-  const [bulkDeleting, setBulkDeleting]       = useState(false);
+  const [deleteTarget, setDeleteTarget]     = useState<AdminUser | null>(null);
+  const [roleTarget, setRoleTarget]         = useState<AdminUser | null>(null);
+  const [confirmBulkDel, setConfirmBulkDel] = useState(false);
+  const [bulkDeleting, setBulkDeleting]     = useState(false);
 
-  // Debounce search
   useEffect(() => {
     const t = setTimeout(() => { setSearch(searchInput); setPage(1); }, 350);
     return () => clearTimeout(t);
   }, [searchInput]);
 
-  // Reset page + selection when filters change
-  useEffect(() => { setPage(1); setSelected([]); }, [role, status, sort, limit]);
-
-  // Close action dropdown on outside click
-  useEffect(() => {
-    if (!activeMenu) return;
-    const close = (e: MouseEvent) => {
-      if ((e.target as HTMLElement).closest('[data-menu]') === null) setActiveMenu(null);
-    };
-    document.addEventListener('mousedown', close);
-    return () => document.removeEventListener('mousedown', close);
-  }, [activeMenu]);
+  useEffect(() => { setPage(1); setSelected([]); }, [role, status]);
 
   // ── Queries ──
 
@@ -240,9 +187,9 @@ export default function UsersPage() {
   });
 
   const usersQ = useQuery({
-    queryKey: ['users', page, limit, search, role, status, sort],
+    queryKey: ['users', page, limit, search, role, status],
     queryFn: () => {
-      const p = new URLSearchParams({ page: String(page), limit: String(limit), sort });
+      const p = new URLSearchParams({ page: String(page), limit: String(limit) });
       if (search) p.set('search', search);
       if (role)   p.set('role', role);
       if (status) p.set('status', status);
@@ -291,12 +238,12 @@ export default function UsersPage() {
     onError: (e: Error) => toast.error(e.message),
   });
 
-  // ── Bulk actions ──
+  // ── Bulk ──
 
-  const allSelected = items.length > 0 && items.every(u => selected.includes(u.uuid));
-  const toggleAll   = () => setSelected(allSelected ? [] : items.map(u => u.uuid));
+  const allSelected = items.length > 0 && items.every((u) => selected.includes(u.uuid));
+  const toggleAll   = () => setSelected(allSelected ? [] : items.map((u) => u.uuid));
   const toggleOne   = (uuid: string) =>
-    setSelected(prev => prev.includes(uuid) ? prev.filter(id => id !== uuid) : [...prev, uuid]);
+    setSelected((prev) => prev.includes(uuid) ? prev.filter((id) => id !== uuid) : [...prev, uuid]);
 
   const handleBulkDelete = async () => {
     setBulkDeleting(true);
@@ -312,313 +259,178 @@ export default function UsersPage() {
     qc.invalidateQueries({ queryKey: ['users-stats'] });
   };
 
-  // ── KPI cards ──
+  // ── KPI data ──
 
   const kpiCards = [
-    { label: 'کل کاربران', value: stats?.total,    icon: UserGroupIcon,   iconBg: 'bg-slate-100 dark:bg-slate-400/10',   iconColor: 'text-slate-600 dark:text-slate-400' },
-    { label: 'فعال',       value: stats?.active,   icon: CheckCircleIcon, iconBg: 'bg-green-100 dark:bg-green-400/10',   iconColor: 'text-green-600 dark:text-green-400' },
-    { label: 'غیرفعال',    value: stats?.inactive, icon: XCircleIcon,     iconBg: 'bg-slate-100 dark:bg-slate-400/10',   iconColor: 'text-slate-500 dark:text-slate-400' },
-    { label: 'ادمین‌ها',   value: stats?.admins,   icon: ShieldCheckIcon, iconBg: 'bg-violet-100 dark:bg-violet-400/10', iconColor: 'text-violet-600 dark:text-violet-400' },
-    { label: 'پزشکان',     value: stats?.doctors,  icon: HeartIcon,       iconBg: 'bg-blue-100 dark:bg-blue-400/10',     iconColor: 'text-blue-600 dark:text-blue-400' },
-    { label: 'بیماران',    value: stats?.patients, icon: UserIcon,        iconBg: 'bg-orange-100 dark:bg-orange-400/10', iconColor: 'text-orange-600 dark:text-orange-400' },
+    { label: 'کل کاربران', value: stats?.total,    bg: 'var(--surface-3)',  color: 'var(--text-2)'  },
+    { label: 'فعال',        value: stats?.active,   bg: 'var(--success-bg)', color: 'var(--success)' },
+    { label: 'غیرفعال',     value: stats?.inactive, bg: 'var(--surface-3)',  color: 'var(--text-3)'  },
+    { label: 'ادمین‌ها',    value: stats?.admins,   bg: 'var(--violet-bg)',  color: 'var(--violet)'  },
+    { label: 'پزشکان',      value: stats?.doctors,  bg: 'var(--info-bg)',    color: 'var(--info)'    },
+    { label: 'بیماران',     value: stats?.patients, bg: 'var(--warning-bg)', color: 'var(--warning)' },
   ];
 
-  const hasFilters = !!(search || role || status);
-
   return (
-    <div className="animate-slide-up space-y-5">
-
-      {/* ── Header ─────────────────────────────────────────────── */}
-      <div className="flex items-start justify-between gap-4">
+    <div className="fade-in">
+      {/* Header */}
+      <div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
         <div>
-          <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>
+          <h1 className="section-title">کاربران</h1>
+          <div className="muted" style={{ fontSize: 13, marginTop: 3 }}>مدیریت کاربران، نقش‌ها و سطح دسترسی</div>
         </div>
-        <button className="cp-btn-primary shrink-0">
-          <PlusIcon className="w-4 h-4" />
+        <button className="btn primary sm">
+          <PlusIcon style={{ width: 15, height: 15 }} />
           افزودن کاربر
         </button>
       </div>
 
-      {/* ── KPI Cards ──────────────────────────────────────────── */}
-      <div className="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-6 gap-3">
-        {kpiCards.map((c) => <KpiCard key={c.label} {...c} />)}
+      {/* KPI cards */}
+      <div className="stat-grid">
+        {kpiCards.map((c) => (
+          <div key={c.label} className="stat">
+            <div className="ico" style={{ background: c.bg, color: c.color }}>
+              <svg style={{ width: 20, height: 20 }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
+              </svg>
+            </div>
+            <div className="lbl">{c.label}</div>
+            <div className="val">
+              {c.value === undefined
+                ? <span className="skeleton" style={{ display: 'inline-block', width: 48, height: 26, borderRadius: 4 }} />
+                : formatNumber(c.value)}
+            </div>
+          </div>
+        ))}
       </div>
 
-      {/* ── Main Card ──────────────────────────────────────────── */}
-      <div className="cp-card overflow-hidden">
-
+      {/* Main card */}
+      <div className="card">
         {/* Toolbar */}
-        <div className="p-4 border-b border-slate-200 dark:border-gray-700/50 space-y-3">
-
-          {/* Row 1: Search + Status + Sort + Limit + Refresh */}
-          <div className="flex items-center gap-2 flex-wrap">
-            <div className="relative flex-1 min-w-52">
-              <MagnifyingGlassIcon className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" />
+        <div className="card-pad" style={{ paddingBottom: 0 }}>
+          <div className="toolbar">
+            <div className="field" style={{ minWidth: 240 }}>
+              <MagnifyingGlassIcon style={{ width: 17, height: 17 }} />
               <input
-                type="text"
                 value={searchInput}
                 onChange={(e) => setSearchInput(e.target.value)}
                 placeholder="نام، موبایل یا ایمیل..."
-                className="cp-input pr-9"
               />
-              {searchInput && (
-                <button
-                  onClick={() => { setSearchInput(''); setSearch(''); }}
-                  className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 text-lg leading-none"
-                >×</button>
-              )}
             </div>
-
-            <select value={status} onChange={(e) => setStatus(e.target.value)} className="cp-select h-10 w-auto min-w-36 text-sm">
-              <option value="">همه وضعیت‌ها</option>
-              <option value="1">فعال</option>
-              <option value="0">غیرفعال</option>
-            </select>
-
-            <select value={sort} onChange={(e) => setSort(e.target.value)} className="cp-select h-10 w-auto min-w-32 text-sm">
-              <option value="newest">جدیدترین</option>
-              <option value="oldest">قدیمی‌ترین</option>
-            </select>
-
-            <select value={limit} onChange={(e) => setLimit(Number(e.target.value))} className="cp-select h-10 w-auto min-w-24 text-sm">
-              {LIMIT_OPTIONS.map(l => <option key={l} value={l}>{formatNumber(l)} عدد</option>)}
-            </select>
-
-            <button
-              onClick={() => usersQ.refetch()}
-              disabled={usersQ.isFetching}
-              className="cp-btn-secondary h-10 px-3"
-              title="به‌روزرسانی"
-            >
-              <ArrowPathIcon className={`w-4 h-4 ${usersQ.isFetching ? 'animate-spin' : ''}`} />
+            <div className="field">
+              <select value={role} onChange={(e) => setRole(e.target.value)}>
+                {ROLE_TABS.map((t) => (
+                  <option key={t.key} value={t.key}>{t.label}</option>
+                ))}
+              </select>
+            </div>
+            <div className="seg">
+              <button className={!status ? 'on' : ''} onClick={() => setStatus('')}>همه</button>
+              <button className={status === '1' ? 'on' : ''} onClick={() => setStatus('1')}>فعال</button>
+              <button className={status === '0' ? 'on' : ''} onClick={() => setStatus('0')}>غیرفعال</button>
+            </div>
+            <div className="spacer" />
+            <button className="btn ghost sm" onClick={() => usersQ.refetch()} disabled={usersQ.isFetching} title="به‌روزرسانی">
+              <ArrowPathIcon style={{ width: 15, height: 15, animation: usersQ.isFetching ? 'spin 1s linear infinite' : undefined }} />
             </button>
           </div>
-
-          {/* Row 2: Role filter pills */}
-          <div className="flex items-center gap-1.5 flex-wrap">
-            <span className="flex items-center gap-1 text-xs text-slate-500 dark:text-slate-400 shrink-0">
-              <FunnelIcon className="w-3.5 h-3.5" />نقش:
-            </span>
-            {ROLE_TABS.map((t) => (
-              <button
-                key={t.key}
-                onClick={() => setRole(t.key)}
-                className={`inline-flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-lg border transition-all ${
-                  role === t.key
-                    ? 'bg-primary-600 border-primary-600 text-white shadow-sm'
-                    : 'bg-transparent border-slate-200 dark:border-gray-700 text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-gray-800'
-                }`}
-              >
-                {t.dot && (
-                  <span className="w-1.5 h-1.5 rounded-full shrink-0"
-                    style={{ backgroundColor: role === t.key ? 'white' : t.dot }} />
-                )}
-                {t.label}
-              </button>
-            ))}
-            {hasFilters && (
-              <button
-                onClick={() => { setSearchInput(''); setSearch(''); setRole(''); setStatus(''); }}
-                className="text-xs text-red-500 dark:text-red-400 hover:underline mr-2"
-              >
-                پاک کردن فیلترها
-              </button>
-            )}
-          </div>
         </div>
 
-        {/* Bulk actions bar */}
+        {/* Bulk bar */}
         {selected.length > 0 && (
-          <div className="px-4 py-2.5 bg-primary-50 dark:bg-primary-500/10 border-b border-primary-200 dark:border-primary-500/20 flex items-center gap-3">
-            <span className="text-sm font-medium text-primary-700 dark:text-primary-300">
+          <div style={{
+            padding: '10px 16px', background: 'var(--primary-soft)',
+            borderBottom: '1px solid var(--border)',
+            display: 'flex', alignItems: 'center', gap: 12,
+          }}>
+            <span style={{ fontSize: 13, color: 'var(--primary-700)', fontWeight: 600 }}>
               {formatNumber(selected.length)} کاربر انتخاب شده
             </span>
-            <div className="flex gap-2 mr-auto">
-              <button
-                onClick={() => setConfirmBulkDel(true)}
-                className="text-xs px-3 py-1.5 rounded-lg bg-red-100 dark:bg-red-400/10 text-red-600 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-400/20 transition-colors font-medium"
-              >
-                حذف انتخاب‌شده‌ها
-              </button>
-              <button onClick={() => setSelected([])} className="text-xs px-3 py-1.5 rounded-lg text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors">
-                لغو انتخاب
-              </button>
+            <div style={{ display: 'flex', gap: 8, marginRight: 'auto' }}>
+              <button className="btn danger sm" onClick={() => setConfirmBulkDel(true)}>حذف انتخاب‌شده‌ها</button>
+              <button className="btn ghost sm" onClick={() => setSelected([])}>لغو</button>
             </div>
           </div>
         )}
 
         {/* Table */}
-        <div className="overflow-x-auto">
-          <table className="w-full text-sm">
+        <div className="table-wrap">
+          <table className="t">
             <thead>
-              <tr className="bg-slate-50 dark:bg-gray-800/60 border-b border-slate-200 dark:border-gray-700/50">
-                <th className="px-4 py-3 w-10">
+              <tr>
+                <th style={{ width: 42 }}>
                   <input type="checkbox" checked={allSelected} onChange={toggleAll}
-                    className="rounded border-slate-300 dark:border-gray-600 text-primary-600 cursor-pointer" />
+                    style={{ accentColor: 'var(--primary)', cursor: 'pointer' }} />
                 </th>
-                <th className="px-4 py-3 text-right text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide whitespace-nowrap">کاربر</th>
-                <th className="px-4 py-3 text-right text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide whitespace-nowrap hidden sm:table-cell">موبایل</th>
-                <th className="px-4 py-3 text-right text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide whitespace-nowrap hidden md:table-cell">ایمیل</th>
-                <th className="px-4 py-3 text-right text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide whitespace-nowrap">نقش</th>
-                <th className="px-4 py-3 text-right text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide whitespace-nowrap hidden sm:table-cell">وضعیت</th>
-                <th className="px-4 py-3 text-right text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide whitespace-nowrap hidden lg:table-cell">عضویت</th>
-                <th className="px-4 py-3 w-10" />
+                <th>کاربر</th>
+                <th>شماره موبایل</th>
+                <th>نقش</th>
+                <th>تاریخ عضویت</th>
+                <th>وضعیت</th>
+                <th></th>
               </tr>
             </thead>
-
-            <tbody className="divide-y divide-slate-100 dark:divide-gray-700/40">
-
-              {/* Loading skeleton */}
-              {usersQ.isLoading && Array.from({ length: 8 }).map((_, i) => (
+            <tbody>
+              {usersQ.isLoading && Array.from({ length: 7 }).map((_, i) => (
                 <tr key={i}>
-                  <td className="px-4 py-3.5"><div className="w-4 h-4 rounded skeleton" /></td>
-                  <td className="px-4 py-3.5">
-                    <div className="flex items-center gap-3">
-                      <div className="w-8 h-8 rounded-full skeleton shrink-0" />
-                      <div className="space-y-1.5 flex-1">
-                        <div className="h-3.5 rounded skeleton w-28" />
-                        <div className="h-3 rounded skeleton w-10" />
-                      </div>
-                    </div>
-                  </td>
-                  <td className="px-4 py-3.5 hidden sm:table-cell"><div className="h-3.5 rounded skeleton w-24" /></td>
-                  <td className="px-4 py-3.5 hidden md:table-cell"><div className="h-3.5 rounded skeleton w-36" /></td>
-                  <td className="px-4 py-3.5"><div className="h-5 rounded-full skeleton w-14" /></td>
-                  <td className="px-4 py-3.5 hidden sm:table-cell"><div className="h-5 rounded-full skeleton w-12" /></td>
-                  <td className="px-4 py-3.5 hidden lg:table-cell"><div className="h-3.5 rounded skeleton w-20" /></td>
-                  <td className="px-4 py-3.5"><div className="w-6 h-6 rounded skeleton" /></td>
+                  {Array.from({ length: 7 }).map((_, j) => (
+                    <td key={j}>
+                      <div className="skeleton" style={{ height: 14, borderRadius: 6, width: j === 1 ? '70%' : '55%' }} />
+                    </td>
+                  ))}
                 </tr>
               ))}
 
-              {/* Empty state */}
               {!usersQ.isLoading && items.length === 0 && (
                 <tr>
-                  <td colSpan={8} 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">
-                        <UserGroupIcon className="w-7 h-7 text-slate-400 dark:text-slate-500" />
-                      </div>
-                      <p className="text-sm text-slate-500 dark:text-slate-400">
-                        {hasFilters ? 'نتیجه‌ای برای فیلترهای انتخابی یافت نشد' : 'هیچ کاربری ثبت نشده'}
-                      </p>
-                      {hasFilters && (
-                        <button onClick={() => { setSearchInput(''); setSearch(''); setRole(''); setStatus(''); }}
-                          className="text-xs text-primary-600 dark:text-primary-400 hover:underline">
-                          پاک کردن فیلترها
-                        </button>
-                      )}
-                    </div>
+                  <td colSpan={7}>
+                    <div className="empty">هیچ کاربری یافت نشد</div>
                   </td>
                 </tr>
               )}
 
-              {/* Data rows */}
               {!usersQ.isLoading && items.map((user) => (
-                <tr
-                  key={user.uuid}
-                  className={`transition-colors ${
-                    selected.includes(user.uuid)
-                      ? 'bg-primary-50/60 dark:bg-primary-500/5'
-                      : 'hover:bg-slate-50/80 dark:hover:bg-gray-800/40'
-                  }`}
-                >
-                  {/* Checkbox */}
-                  <td className="px-4 py-3.5" onClick={(e) => e.stopPropagation()}>
+                <tr key={user.uuid}>
+                  <td>
                     <input type="checkbox" checked={selected.includes(user.uuid)}
                       onChange={() => toggleOne(user.uuid)}
-                      className="rounded border-slate-300 dark:border-gray-600 text-primary-600 cursor-pointer" />
+                      style={{ accentColor: 'var(--primary)', cursor: 'pointer' }} />
                   </td>
-
-                  {/* Avatar + Name */}
-                  <td className="px-4 py-3.5">
-                    <div className="flex items-center gap-3 cursor-pointer group" onClick={() => navigate(`/admin/users/${user.uuid}`)}>
-                      <Avatar name={user.name} id={user.id} />
-                      <div className="min-w-0">
-                        <p className="font-medium text-slate-800 dark:text-slate-200 truncate max-w-36 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
-                          {highlight(user.name, search) || '—'}
-                        </p>
-                        <p className="text-[11px] text-slate-400 dark:text-slate-500">#{user.id}</p>
+                  <td>
+                    <div className="cell-user">
+                      <UserAvatar name={user.name} id={user.id} />
+                      <div>
+                        <b style={{ cursor: 'pointer' }} onClick={() => navigate(`/admin/users/${user.uuid}`)}>
+                          {user.name || '—'}
+                        </b>
+                        <br /><small>#{user.id}</small>
                       </div>
                     </div>
                   </td>
-
-                  {/* Mobile */}
-                  <td className="px-4 py-3.5 hidden sm:table-cell">
-                    <span className="font-mono text-xs text-slate-600 dark:text-slate-400" dir="ltr">
-                      {highlight(user.mobile_number, search) || maskMobile(user.mobile_number)}
-                    </span>
+                  <td style={{ fontFamily: 'monospace', direction: 'ltr', textAlign: 'right' }}>
+                    {user.mobile_number}
                   </td>
-
-                  {/* Email */}
-                  <td className="px-4 py-3.5 hidden md:table-cell">
-                    <span className="text-xs text-slate-500 dark:text-slate-400 truncate max-w-44 block">
-                      {user.email ? highlight(user.email, search) : '—'}
-                    </span>
-                  </td>
-
-                  {/* Role */}
-                  <td className="px-4 py-3.5"><RoleBadge roles={user.roles} /></td>
-
-                  {/* Status */}
-                  <td className="px-4 py-3.5 hidden sm:table-cell"><ActiveBadge active={user.is_active} /></td>
-
-                  {/* Date */}
-                  <td className="px-4 py-3.5 hidden lg:table-cell text-xs text-slate-500 dark:text-slate-400 whitespace-nowrap">
-                    {formatDate(user.created_at)}
-                  </td>
-
-                  {/* Actions dropdown */}
-                  <td className="px-4 py-3.5" onClick={(e) => e.stopPropagation()}>
-                    <div className="relative flex justify-end" data-menu>
-                      <button
-                        onClick={() => setActiveMenu(activeMenu === user.uuid ? null : user.uuid)}
-                        className="w-7 h-7 flex items-center justify-center rounded-lg text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors"
-                        data-menu
-                      >
-                        <EllipsisVerticalIcon className="w-4 h-4" />
+                  <td><RoleBadge roles={user.roles} /></td>
+                  <td className="muted">{formatDate(user.created_at)}</td>
+                  <td><ActiveBadge active={user.is_active} /></td>
+                  <td>
+                    <div className="row-actions">
+                      <button className="mini-btn" title="مشاهده"
+                        onClick={() => navigate(`/admin/users/${user.uuid}`)}>
+                        <EyeIcon style={{ width: 16, height: 16 }} />
+                      </button>
+                      <button className="mini-btn" title="تغییر نقش"
+                        onClick={() => setRoleTarget(user)}>
+                        <ShieldCheckIcon style={{ width: 16, height: 16 }} />
+                      </button>
+                      <button className="mini-btn" title={user.is_active ? 'غیرفعال کردن' : 'فعال‌سازی'}
+                        onClick={() => toggleStatusMut.mutate(user.uuid)} disabled={toggleStatusMut.isPending}>
+                        {user.is_active
+                          ? <XCircleIcon style={{ width: 16, height: 16 }} />
+                          : <CheckCircleIcon style={{ width: 16, height: 16 }} />}
+                      </button>
+                      <button className="mini-btn danger" title="حذف" onClick={() => setDeleteTarget(user)}>
+                        <TrashIcon style={{ width: 16, height: 16 }} />
                       </button>
-
-                      {activeMenu === user.uuid && (
-                        <div className="absolute left-0 top-8 z-30 w-48 cp-card shadow-2xl border border-slate-200 dark:border-gray-700 py-1.5 animate-scale-in" data-menu>
-                          <button
-                            onClick={() => { navigate(`/admin/users/${user.uuid}`); setActiveMenu(null); }}
-                            className="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 transition-colors"
-                          >
-                            <EyeIcon className="w-4 h-4 text-slate-400 shrink-0" />مشاهده پروفایل
-                          </button>
-                          <button
-                            onClick={() => { navigate(`/admin/users/${user.uuid}?edit=1`); setActiveMenu(null); }}
-                            className="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 transition-colors"
-                          >
-                            <PencilIcon className="w-4 h-4 text-slate-400 shrink-0" />ویرایش اطلاعات
-                          </button>
-                          <button
-                            onClick={() => { setRoleTarget(user); setActiveMenu(null); }}
-                            className="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 transition-colors"
-                          >
-                            <ShieldCheckIcon className="w-4 h-4 text-slate-400 shrink-0" />تغییر نقش
-                          </button>
-                          <button
-                            onClick={() => { toggleStatusMut.mutate(user.uuid); setActiveMenu(null); }}
-                            disabled={toggleStatusMut.isPending}
-                            className="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 transition-colors disabled:opacity-50"
-                          >
-                            {user.is_active
-                              ? <XCircleIcon className="w-4 h-4 text-orange-400 shrink-0" />
-                              : <CheckCircleIcon className="w-4 h-4 text-green-500 shrink-0" />
-                            }
-                            {user.is_active ? 'غیرفعال کردن' : 'فعال‌سازی'}
-                          </button>
-                          <div className="border-t border-slate-100 dark:border-gray-700 my-1" />
-                          <button
-                            onClick={() => { setDeleteTarget(user); setActiveMenu(null); }}
-                            className="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors"
-                          >
-                            <TrashIcon className="w-4 h-4 shrink-0" />حذف کاربر
-                          </button>
-                        </div>
-                      )}
                     </div>
                   </td>
                 </tr>
@@ -627,13 +439,10 @@ export default function UsersPage() {
           </table>
         </div>
 
-        {/* Pagination */}
-        <div className="px-4">
-          <Pagination page={page} total={total} limit={limit} onPageChange={setPage} />
-        </div>
+        <Pagination page={page} total={total} limit={limit} onPageChange={setPage} />
       </div>
 
-      {/* Delete confirm */}
+      {/* Dialogs */}
       <ConfirmDialog
         open={!!deleteTarget}
         title="حذف کاربر"
@@ -645,11 +454,10 @@ export default function UsersPage() {
         onCancel={() => setDeleteTarget(null)}
       />
 
-      {/* Bulk delete confirm */}
       <ConfirmDialog
         open={confirmBulkDel}
         title="حذف گروهی"
-        message={`آیا از حذف ${formatNumber(selected.length)} کاربر انتخاب‌شده اطمینان دارید؟ این عمل قابل بازگشت نیست.`}
+        message={`آیا از حذف ${formatNumber(selected.length)} کاربر انتخاب‌شده اطمینان دارید؟`}
         confirmLabel={`حذف ${formatNumber(selected.length)} کاربر`}
         danger
         loading={bulkDeleting}
@@ -657,7 +465,6 @@ export default function UsersPage() {
         onCancel={() => setConfirmBulkDel(false)}
       />
 
-      {/* Role change modal */}
       {roleTarget && (
         <ChangeRoleModal
           user={roleTarget}
diff --git a/assets/admin/stores/uiStore.ts b/assets/admin/stores/uiStore.ts
index 50b9fa2f..f692f69e 100644
--- a/assets/admin/stores/uiStore.ts
+++ b/assets/admin/stores/uiStore.ts
@@ -1,12 +1,37 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
+export const HUES = [
+  { name: 'آبی پزشکی',  h: 256, c: 0.15 },
+  { name: 'فیروزه‌ای',  h: 205, c: 0.12 },
+  { name: 'سبز سلامت', h: 162, c: 0.13 },
+  { name: 'بنفش',       h: 295, c: 0.15 },
+  { name: 'نیلی',       h: 272, c: 0.16 },
+] as const;
+
+export type BrandHue = (typeof HUES)[number];
+
 interface UiState {
   sidebarOpen: boolean;
   darkMode: boolean;
+  density: 'comfortable' | 'compact';
+  brandHue: BrandHue;
+  settingsPanelOpen: boolean;
   toggleSidebar: () => void;
   setSidebarOpen: (open: boolean) => void;
   toggleDarkMode: () => void;
+  setDensity: (density: 'comfortable' | 'compact') => void;
+  setBrandHue: (hue: BrandHue) => void;
+  toggleSettingsPanel: () => void;
+}
+
+function applyTheme(state: Pick<UiState, 'darkMode' | 'density' | 'brandHue'>) {
+  const root = document.documentElement;
+  root.classList.toggle('dark', state.darkMode);
+  root.setAttribute('data-theme', state.darkMode ? 'dark' : 'light');
+  root.setAttribute('data-density', state.density);
+  root.style.setProperty('--brand-h', String(state.brandHue.h));
+  root.style.setProperty('--brand-c', String(state.brandHue.c));
 }
 
 export const useUiStore = create<UiState>()(
@@ -14,19 +39,40 @@ export const useUiStore = create<UiState>()(
     (set, get) => ({
       sidebarOpen: true,
       darkMode: false,
+      density: 'comfortable',
+      brandHue: HUES[0],
+      settingsPanelOpen: 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);
+        applyTheme({ ...get(), darkMode: next });
       },
+
+      setDensity: (density) => {
+        set({ density });
+        applyTheme({ ...get(), density });
+      },
+
+      setBrandHue: (brandHue) => {
+        set({ brandHue });
+        applyTheme({ ...get(), brandHue });
+      },
+
+      toggleSettingsPanel: () => set((s) => ({ settingsPanelOpen: !s.settingsPanelOpen })),
     }),
     {
       name: 'clinicpro-ui',
       onRehydrateStorage: () => (state) => {
-        if (state?.darkMode) {
-          document.documentElement.classList.add('dark');
+        if (state) {
+          applyTheme({
+            darkMode:  state.darkMode  ?? false,
+            density:   state.density   ?? 'comfortable',
+            brandHue:  state.brandHue  ?? HUES[0],
+          });
         }
       },
     },
diff --git a/assets/admin/styles.css b/assets/admin/styles.css
index 31746249..1534df93 100644
--- a/assets/admin/styles.css
+++ b/assets/admin/styles.css
@@ -5,149 +5,628 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
-  --color-primary-50:  #f5f3ff;
-  --color-primary-100: #ede9fe;
-  --color-primary-200: #ddd6fe;
-  --color-primary-300: #c4b5fd;
-  --color-primary-400: #a78bfa;
-  --color-primary-500: #8b5cf6;
-  --color-primary-600: #7c3aed;
-  --color-primary-700: #6d28d9;
-  --color-primary-800: #5b21b6;
-  --color-primary-900: #4c1d95;
-
   --font-sans: "Vazirmatn", ui-sans-serif, system-ui, sans-serif;
 }
 
-*, *::before, *::after {
-  font-family: var(--font-sans);
+/* ── Template Design System Variables ─────────────────────────── */
+:root {
+  --brand-h: 256;
+  --brand-c: 0.15;
+  --bg:            #eef2f8;
+  --bg-2:          #e6ecf4;
+  --surface:       #ffffff;
+  --surface-2:     #f6f8fc;
+  --surface-3:     #eef2f8;
+  --border:        #e4e9f1;
+  --border-2:      #d6dde8;
+  --text:          #0f1b2e;
+  --text-2:        #56657c;
+  --text-3:        #8a98ad;
+  --primary:       oklch(0.55 var(--brand-c) var(--brand-h));
+  --primary-600:   oklch(0.49 var(--brand-c) var(--brand-h));
+  --primary-700:   oklch(0.43 var(--brand-c) var(--brand-h));
+  --primary-soft:  oklch(0.95 0.03 var(--brand-h));
+  --primary-soft2: oklch(0.90 0.05 var(--brand-h));
+  --on-primary:    #ffffff;
+  --success:       #15a35a;
+  --success-bg:    #e6f6ed;
+  --warning:       #d98a09;
+  --warning-bg:    #fcf2df;
+  --danger:        #e0394a;
+  --danger-bg:     #fdebed;
+  --info:          #2b86d8;
+  --info-bg:       #e7f1fb;
+  --violet:        #7c5cf0;
+  --violet-bg:     #efeafe;
+  --ring:          color-mix(in oklch, var(--primary) 32%, transparent);
+  --shadow-sm:  0 1px 2px rgba(15,27,46,.06), 0 1px 3px rgba(15,27,46,.05);
+  --shadow:     0 2px 6px rgba(15,27,46,.06), 0 8px 24px rgba(15,27,46,.06);
+  --shadow-lg:  0 12px 32px rgba(15,27,46,.12), 0 4px 10px rgba(15,27,46,.06);
+  --r-xs: 7px; --r-sm: 10px; --r: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;
+  --gap: 20px;
+  --card-pad: 22px;
+  --row-h: 56px;
+  --sidebar-w: 252px;
+  --topbar-h: 64px;
+  --ease: cubic-bezier(.22,.61,.36,1);
 }
 
-html {
-  scroll-behavior: smooth;
+[data-density="compact"] {
+  --gap: 14px;
+  --card-pad: 16px;
+  --row-h: 46px;
 }
 
+[data-theme="dark"] {
+  --bg:            #080d16;
+  --bg-2:          #0b1220;
+  --surface:       #111a29;
+  --surface-2:     #16202f;
+  --surface-3:     #1b2738;
+  --border:        #243042;
+  --border-2:      #2e3c52;
+  --text:          #e9eef7;
+  --text-2:        #9eb0c6;
+  --text-3:        #67788e;
+  --primary:       oklch(0.66 var(--brand-c) var(--brand-h));
+  --primary-600:   oklch(0.60 var(--brand-c) var(--brand-h));
+  --primary-700:   oklch(0.54 var(--brand-c) var(--brand-h));
+  --primary-soft:  color-mix(in oklch, var(--primary) 16%, var(--surface));
+  --primary-soft2: color-mix(in oklch, var(--primary) 26%, var(--surface));
+  --on-primary:    #07101f;
+  --success-bg:    color-mix(in oklch, var(--success) 18%, var(--surface));
+  --warning-bg:    color-mix(in oklch, var(--warning) 18%, var(--surface));
+  --danger-bg:     color-mix(in oklch, var(--danger) 18%, var(--surface));
+  --info-bg:       color-mix(in oklch, var(--info) 18%, var(--surface));
+  --violet-bg:     color-mix(in oklch, var(--violet) 20%, var(--surface));
+  --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
+  --shadow:     0 2px 8px rgba(0,0,0,.4), 0 12px 30px rgba(0,0,0,.35);
+  --shadow-lg:  0 18px 44px rgba(0,0,0,.55);
+}
+
+/* ── Base ─────────────────────────────────────────────────────── */
+*, *::before, *::after { font-family: var(--font-sans); box-sizing: border-box; }
+html { scroll-behavior: smooth; }
 body {
   direction: rtl;
+  background: var(--bg);
+  color: var(--text);
+  font-size: 15px;
+  line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  transition: background .3s var(--ease), color .3s var(--ease);
+  margin: 0;
 }
 
-/* ── Scrollbar ──────────────────────────────── */
-::-webkit-scrollbar { width: 5px; height: 5px; }
+/* ── Scrollbar ──────────────────────────────────────────────────*/
+::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-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; }
+::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
 
-/* ── Animations ─────────────────────────────── */
-@keyframes scale-in {
-  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; }
-}
+/* ── Animations ─────────────────────────────────────────────────*/
+@keyframes scale-in  { 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; } }
+@keyframes fadein    { from { opacity: 0; transform: translateY(10px); } }
+@keyframes pop       { from { opacity: 0; transform: translateY(14px) scale(.97); } }
+@keyframes slidein   { from { transform: translateX(30px); opacity: 0; } }
+@keyframes slideup   { from { opacity: 0; transform: translateY(16px); } }
+@keyframes growbar   { from { width: 0; } }
+@keyframes spin      { to { transform: rotate(360deg); } }
 
 .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; }
+.animate-slide-up { animation: slide-up  200ms ease both; }
+.animate-fade-in  { animation: fade-in   150ms ease both; }
+.fade-in          { animation: fadein .4s var(--ease); }
 
-/* ── Skeleton shimmer ───────────────────────── */
+/* ── Skeleton shimmer ───────────────────────────────────────────*/
 .skeleton {
-  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
+  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 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 ────────────────────────── */
+/* ── Utility ────────────────────────────────────────────────────*/
 .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 ─────────────────── */
+/* ── 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;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--r-lg);
+    box-shadow: var(--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;
+    width: 100%; height: 42px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--r-sm);
+    padding: 0 14px;
+    font-size: 14px; color: var(--text);
+    outline: none;
+    transition: border-color .15s, box-shadow .15s;
   }
+  .cp-input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
+  .cp-input::placeholder { color: var(--text-3); }
+
   .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;
+    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
+    padding: 10px 14px; font-size: 14px; color: var(--text); outline: none; width: 100%;
+    transition: border-color .15s, box-shadow .15s;
   }
+  .cp-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
+  .cp-textarea::placeholder { color: var(--text-3); }
+
   .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;
+    width: 100%; height: 42px;
+    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
+    padding: 0 14px; font-size: 14px; color: var(--text);
+    outline: none; transition: border-color .15s, box-shadow .15s;
   }
+  .cp-select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
+
   .cp-label {
-    @apply block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5;
+    display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px;
   }
 
-  /* 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;
+    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+    height: 42px; padding: 0 18px; border-radius: var(--r-sm);
+    font-size: 14px; font-weight: 700; white-space: nowrap; border: none; cursor: pointer;
+    background: var(--primary); color: var(--on-primary); box-shadow: 0 4px 14px var(--ring);
+    transition: background .16s;
   }
+  .cp-btn-primary:hover { background: var(--primary-600); }
+  .cp-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
+
   .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;
+    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+    height: 42px; padding: 0 18px; border-radius: var(--r-sm);
+    font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
+    background: var(--surface); color: var(--text); border: 1px solid var(--border);
+    transition: .16s;
   }
+  .cp-btn-secondary:hover { background: var(--surface-2); border-color: var(--border-2); }
+  .cp-btn-secondary:disabled { opacity: .5; cursor: not-allowed; }
+
   .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;
+    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+    height: 42px; padding: 0 18px; border-radius: var(--r-sm);
+    font-size: 14px; font-weight: 700; white-space: nowrap; border: none; cursor: pointer;
+    background: var(--danger); color: #fff; transition: .16s;
   }
+  .cp-btn-danger:hover { filter: brightness(.92); }
+  .cp-btn-danger:disabled { opacity: .5; cursor: not-allowed; }
+
   .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;
+    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+    height: 42px; padding: 0 18px; border-radius: var(--r-sm);
+    font-size: 14px; font-weight: 600; white-space: nowrap; border: none; cursor: pointer;
+    background: transparent; color: var(--text-2); transition: .16s;
   }
+  .cp-btn-ghost:hover { background: var(--surface-2); color: var(--text); }
+  .cp-btn-ghost:disabled { opacity: .5; cursor: not-allowed; }
 
-  /* 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; }
-  .cp-action-approve { @apply p-1.5 rounded-lg text-slate-400 hover:text-green-600 hover:bg-green-50 dark:hover:bg-green-500/10 dark:hover:text-green-400 transition-colors; }
+  .cp-action-view   { padding: 6px; border-radius: 8px; color: var(--text-3); transition: .14s; cursor: pointer; }
+  .cp-action-view:hover   { background: var(--info-bg);     color: var(--info); }
+  .cp-action-edit   { padding: 6px; border-radius: 8px; color: var(--text-3); transition: .14s; cursor: pointer; }
+  .cp-action-edit:hover   { background: var(--primary-soft); color: var(--primary-700); }
+  .cp-action-delete { padding: 6px; border-radius: 8px; color: var(--text-3); transition: .14s; cursor: pointer; }
+  .cp-action-delete:hover { background: var(--danger-bg);   color: var(--danger); }
+  .cp-action-approve{ padding: 6px; border-radius: 8px; color: var(--text-3); transition: .14s; cursor: pointer; }
+  .cp-action-approve:hover{ background: var(--success-bg);  color: var(--success); }
 
-  /* 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;
+    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
+    padding: 18px; box-shadow: var(--shadow-sm);
+    display: flex; align-items: flex-start; gap: 16px;
+    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
   }
+  .cp-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-2); }
   .cp-stat-icon {
-    @apply w-11 h-11 rounded-xl flex items-center justify-center shrink-0;
+    width: 40px; height: 40px; border-radius: 12px;
+    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
   }
 
-  /* Section heading inside a card */
-  .cp-section-title {
-    @apply text-sm font-semibold text-slate-700 dark:text-slate-200 mb-4;
-  }
+  .cp-section-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 16px; }
 
-  /* 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;
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 10px 0; border-bottom: 1px solid var(--border);
   }
-  .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; }
+  .cp-info-row:last-child { border-bottom: none; }
+  .cp-info-label { font-size: 12px; color: var(--text-3); }
+  .cp-info-value  { font-size: 13px; font-weight: 600; color: var(--text); }
+}
+
+/* ══ Template component classes ══════════════════════════════════*/
+
+/* ── Layout ──────────────────────────────────────────────────── */
+.app { display: flex; min-height: 100vh; }
+.main {
+  flex: 1; min-width: 0; display: flex; flex-direction: column;
+  margin-right: var(--sidebar-w);
+  transition: margin .28s var(--ease);
+}
+.app[data-collapsed="true"] .main { margin-right: 76px; }
+.content { padding: var(--gap); max-width: 1480px; width: 100%; margin: 0 auto; }
+
+/* ── Sidebar ─────────────────────────────────────────────────── */
+.sidebar {
+  position: fixed; top: 0; bottom: 0; right: 0;
+  width: var(--sidebar-w);
+  background: var(--surface);
+  border-left: 1px solid var(--border);
+  display: flex; flex-direction: column;
+  z-index: 40;
+  transition: width .28s var(--ease);
+}
+.app[data-collapsed="true"] .sidebar { width: 76px; }
+.sidebar-brand {
+  height: var(--topbar-h); flex: none;
+  display: flex; align-items: center; gap: 12px;
+  padding: 0 20px;
+  border-bottom: 1px solid var(--border);
+}
+.brand-logo {
+  width: 38px; height: 38px; flex: none; border-radius: 11px;
+  background: linear-gradient(150deg, var(--primary), var(--primary-700));
+  display: grid; place-items: center; color: #fff;
+  box-shadow: 0 6px 16px var(--ring);
+  flex-shrink: 0;
+}
+.brand-text { display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; white-space: nowrap; }
+.brand-text b    { font-size: 16px; letter-spacing: -.2px; color: var(--text); }
+.brand-text span { font-size: 11.5px; color: var(--text-3); }
+.app[data-collapsed="true"] .brand-text { display: none; }
+
+.nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px 12px; }
+.nav-group { margin-bottom: 6px; }
+.nav-label {
+  font-size: 11px; font-weight: 700; color: var(--text-3);
+  padding: 14px 12px 8px; letter-spacing: .2px; display: block;
+}
+.app[data-collapsed="true"] .nav-label { text-align: center; padding: 12px 0 6px; font-size: 9px; }
+.nav-item {
+  display: flex; align-items: center; gap: 12px;
+  padding: 9px 12px; border-radius: var(--r-sm);
+  color: var(--text-2); font-size: 14px; font-weight: 500;
+  position: relative; width: 100%; text-align: start;
+  transition: background .15s, color .15s;
+  white-space: nowrap; text-decoration: none;
+  background: none; border: none; cursor: pointer;
+}
+.nav-item svg { flex-shrink: 0; }
+.nav-item:hover { background: var(--surface-2); color: var(--text); }
+.nav-item.active { background: var(--primary-soft); color: var(--primary-700); font-weight: 700; }
+.nav-item.active::before {
+  content: ""; position: absolute; right: -12px; top: 50%; transform: translateY(-50%);
+  width: 4px; height: 22px; border-radius: 99px; background: var(--primary);
+}
+.nav-item .badge-count {
+  margin-inline-start: auto; background: var(--primary); color: var(--on-primary);
+  font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px;
+  border-radius: 99px; display: grid; place-items: center;
+}
+.app[data-collapsed="true"] .nav-item { justify-content: center; padding: 10px; }
+.app[data-collapsed="true"] .nav-item > span,
+.app[data-collapsed="true"] .nav-item .badge-count { display: none; }
+.app[data-collapsed="true"] .nav-item.active::before { display: none; }
+
+.sidebar-foot { flex: none; border-top: 1px solid var(--border); padding: 12px; }
+.user-chip {
+  display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: var(--r-sm);
+  transition: background .15s; cursor: pointer;
+}
+.user-chip:hover { background: var(--surface-2); }
+.app[data-collapsed="true"] .user-chip .user-meta { display: none; }
+.user-meta { display: flex; flex-direction: column; line-height: 1.3; overflow: hidden; flex: 1; min-width: 0; }
+.user-meta b    { font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.user-meta span { font-size: 11.5px; color: var(--text-3); }
+.cp-avatar {
+  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
+  display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 13px;
+  background: linear-gradient(145deg, var(--primary), var(--primary-700));
+  overflow: hidden;
+}
+.cp-avatar.sm { width: 28px; height: 28px; font-size: 11px; }
+.cp-avatar.lg { width: 96px; height: 96px; font-size: 32px; border-radius: 20px; }
+
+/* ── Topbar ──────────────────────────────────────────────────── */
+.topbar {
+  height: var(--topbar-h); flex: none; position: sticky; top: 0; z-index: 30;
+  display: flex; align-items: center; gap: 12px;
+  padding: 0 var(--gap);
+  background: color-mix(in srgb, var(--bg) 85%, transparent);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--border);
+}
+.icon-btn {
+  width: 40px; height: 40px; border-radius: var(--r-sm); flex-shrink: 0;
+  display: grid; place-items: center; color: var(--text-2);
+  background: var(--surface); border: 1px solid var(--border);
+  position: relative; transition: .15s; cursor: pointer;
+}
+.icon-btn:hover { color: var(--text); border-color: var(--border-2); background: var(--surface-2); }
+.icon-btn .dot {
+  position: absolute; top: 8px; right: 9px;
+  width: 8px; height: 8px; border-radius: 50%;
+  background: var(--danger); border: 2px solid var(--surface);
+}
+.topbar-search {
+  display: flex; align-items: center; gap: 9px; flex: 1; max-width: 360px;
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--r-pill); padding: 0 14px; height: 42px; color: var(--text-3);
+  transition: .18s;
+}
+.topbar-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
+.topbar-search input {
+  border: none; outline: none; background: none; flex: 1; font-size: 14px; color: var(--text);
+  font-family: inherit;
+}
+.topbar-search input::placeholder { color: var(--text-3); }
+.topbar-search kbd {
+  font-size: 11px; color: var(--text-3); font-family: inherit;
+  background: var(--surface-3); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px;
+}
+.topbar-crumbs { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 13px; }
+.topbar-crumbs b { color: var(--text); }
+
+/* ── Generic Card ────────────────────────────────────────────── */
+.card {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
+}
+.card-pad { padding: var(--card-pad); }
+.card-head {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  padding: var(--card-pad) var(--card-pad) 0;
+}
+.card-head h3 { font-size: 16px; font-weight: 700; color: var(--text); }
+.section-title { font-size: 19px; font-weight: 800; letter-spacing: -.3px; color: var(--text); }
+.muted  { color: var(--text-3); }
+.link   { color: var(--primary); font-weight: 600; font-size: 13px; text-decoration: none; }
+.link:hover { color: var(--primary-700); }
+.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
+.flex   { display: flex; align-items: center; }
+.between { display: flex; align-items: center; justify-content: space-between; }
+
+/* ── Stat cards ──────────────────────────────────────────────── */
+.stat {
+  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
+  padding: 18px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
+  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
+}
+.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-2); }
+.stat .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; }
+.stat .lbl { color: var(--text-2); font-size: 13px; font-weight: 500; }
+.stat .val { font-size: 26px; font-weight: 800; letter-spacing: -.5px; margin: 4px 0 2px; color: var(--text); }
+.stat .hint { font-size: 11.5px; color: var(--text-3); }
+.stat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); margin-bottom: var(--gap); }
+.trend { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
+.trend.up   { color: var(--success); background: var(--success-bg); }
+.trend.down { color: var(--danger);  background: var(--danger-bg); }
+
+/* ── Badges ──────────────────────────────────────────────────── */
+.badge {
+  display: inline-flex; align-items: center; gap: 5px;
+  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; white-space: nowrap;
+}
+.badge .bdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
+.badge.green  { color: var(--success); background: var(--success-bg); }
+.badge.amber  { color: var(--warning); background: var(--warning-bg); }
+.badge.red    { color: var(--danger);  background: var(--danger-bg); }
+.badge.blue   { color: var(--info);    background: var(--info-bg); }
+.badge.violet { color: var(--violet);  background: var(--violet-bg); }
+.badge.gray   { color: var(--text-2);  background: var(--surface-3); }
+
+/* ── Buttons ─────────────────────────────────────────────────── */
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+  height: 42px; padding: 0 18px; border-radius: var(--r-sm);
+  font-size: 14px; font-weight: 700; transition: .16s var(--ease); white-space: nowrap;
+  border: 1px solid transparent; cursor: pointer; font-family: inherit;
+}
+.btn:active { transform: translateY(1px); }
+.btn.primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 4px 14px var(--ring); }
+.btn.primary:hover { background: var(--primary-600); }
+.btn.ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
+.btn.ghost:hover { background: var(--surface-2); border-color: var(--border-2); }
+.btn.soft { background: var(--primary-soft); color: var(--primary-700); border-color: transparent; }
+.btn.soft:hover { background: var(--primary-soft2); }
+.btn.danger { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
+.btn.danger:hover { filter: brightness(.97); }
+.btn.sm { height: 36px; padding: 0 14px; font-size: 13px; }
+.btn:disabled { opacity: .5; cursor: not-allowed; }
+
+/* ── Tables ──────────────────────────────────────────────────── */
+.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border); }
+table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
+table.t thead th {
+  text-align: start; font-size: 12px; font-weight: 700; color: var(--text-3);
+  padding: 14px 16px 12px; white-space: nowrap; border-bottom: 1px solid var(--border);
+  background: var(--surface-2);
+}
+table.t tbody td {
+  padding: 0 16px; height: var(--row-h); border-bottom: 1px solid var(--border);
+  vertical-align: middle; color: var(--text);
+}
+table.t tbody tr { transition: background .12s; }
+table.t tbody tr:hover { background: var(--surface-2); }
+table.t tbody tr:last-child td { border-bottom: none; }
+.cell-user { display: flex; align-items: center; gap: 11px; }
+.cell-user b     { font-weight: 700; font-size: 13.5px; color: var(--text); }
+.cell-user small { color: var(--text-3); font-size: 11.5px; }
+.row-actions { display: flex; gap: 6px; opacity: 0; transition: opacity .15s; }
+table.t tbody tr:hover .row-actions { opacity: 1; }
+.mini-btn {
+  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
+  color: var(--text-3); transition: .14s; cursor: pointer; border: none; background: none;
+}
+.mini-btn:hover { background: var(--surface-3); color: var(--text); }
+.mini-btn.danger:hover { background: var(--danger-bg); color: var(--danger); }
+
+/* ── Toolbar / Fields ────────────────────────────────────────── */
+.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
+.toolbar .spacer { flex: 1; }
+.field {
+  display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px;
+  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-2);
+  transition: .15s;
+}
+.field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
+.field input, .field select { border: none; outline: none; background: none; flex: 1; min-width: 60px; color: var(--text); font-family: inherit; font-size: 14px; }
+.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 3px; gap: 2px; }
+.seg button { padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); transition: .14s; cursor: pointer; font-family: inherit; }
+.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
+
+/* ── Pagination ──────────────────────────────────────────────── */
+.pagination {
+  display: flex; align-items: center; gap: 6px; padding: 16px 0;
+  justify-content: space-between; flex-wrap: wrap; border-top: 1px solid var(--border); margin-top: 4px;
+}
+.page-btns { display: flex; gap: 4px; }
+.page-btns button {
+  min-width: 36px; height: 36px; border-radius: 9px; font-weight: 600; font-size: 13px;
+  color: var(--text-2); border: 1px solid transparent; background: none;
+  cursor: pointer; transition: .14s; font-family: inherit;
+}
+.page-btns button:hover:not(.on):not(:disabled) { background: var(--surface-2); }
+.page-btns button.on  { background: var(--primary); color: var(--on-primary); }
+.page-btns button:disabled { opacity: .3; cursor: not-allowed; }
+
+/* ── Progress bar ────────────────────────────────────────────── */
+.bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
+.bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--primary), var(--primary-600)); }
+
+/* ── Toggle switch ───────────────────────────────────────────── */
+.switch {
+  width: 44px; height: 26px; border-radius: 99px; background: var(--border-2);
+  position: relative; flex-shrink: 0; transition: background .2s var(--ease); cursor: pointer; display: inline-block;
+}
+.switch.on { background: var(--primary); }
+.switch::after {
+  content: ""; position: absolute; top: 3px; inset-inline-start: 3px;
+  width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
+  transition: transform .2s var(--ease);
+}
+.switch.on::after { transform: translateX(-18px); }
+
+/* ── Modal ───────────────────────────────────────────────────── */
+.overlay {
+  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px;
+  background: rgba(8,13,22,.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
+  animation: fade-in .2s var(--ease);
+}
+.modal {
+  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
+  box-shadow: var(--shadow-lg); width: 100%; max-width: 540px; max-height: 90vh;
+  overflow-y: auto; overflow-x: hidden; animation: pop .26s var(--ease);
+}
+.modal-head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 22px 24px; border-bottom: 1px solid var(--border);
+}
+.modal-head h2 { font-size: 17px; font-weight: 700; color: var(--text); margin: 0; }
+.modal-body { padding: 24px; }
+.modal-foot {
+  display: flex; gap: 10px; padding: 18px 24px; border-top: 1px solid var(--border); justify-content: flex-end;
+}
+.settings-panel {
+  width: 360px; height: 100%; overflow-y: auto;
+  animation: slidein .3s var(--ease);
+  border-radius: 0; max-height: 100%;
+}
+
+/* ── Form rows ───────────────────────────────────────────────── */
+.form-row { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
+.form-row label { font-size: 13px; font-weight: 600; color: var(--text-2); }
+.input {
+  height: 44px; padding: 0 14px; border-radius: var(--r-sm);
+  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
+  outline: none; width: 100%; transition: .15s; font-family: inherit; font-size: 14px;
+}
+.input:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 4px var(--ring); }
+.input.err { border-color: var(--danger); }
+.slot-select {
+  height: 42px; padding: 0 12px; border-radius: var(--r-sm);
+  background: var(--surface); border: 1px solid var(--border); color: var(--text);
+  outline: none; transition: .15s; font-family: inherit; font-size: 14px;
+}
+.slot-select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
+
+/* ── Toast ───────────────────────────────────────────────────── */
+.toasts {
+  position: fixed; bottom: 22px; left: 22px; z-index: 100;
+  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
+}
+.toast {
+  display: flex; align-items: center; gap: 11px; padding: 13px 16px; min-width: 280px;
+  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
+  box-shadow: var(--shadow-lg); animation: slideup .3s var(--ease); pointer-events: auto;
+}
+.toast .tx { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
+
+/* ── Dashboard misc ──────────────────────────────────────────── */
+.timeline-item { display: flex; gap: 13px; padding: 11px 0; }
+.timeline-item .tl-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; box-shadow: 0 0 0 4px var(--surface); }
+.timeline-item .tl-body { flex: 1; min-width: 0; }
+.timeline-item .tl-body b    { font-size: 13.5px; font-weight: 700; color: var(--text); display: block; }
+.timeline-item .tl-body p    { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.timeline-item .tl-body time { font-size: 11px; color: var(--text-3); }
+.tl-connector { width: 1px; background: var(--border); flex-shrink: 0; margin: 0 4px; }
+
+.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.quick {
+  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 12px;
+  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2);
+  transition: .18s var(--ease); text-align: center; text-decoration: none; cursor: pointer;
+}
+.quick:hover { transform: translateY(-3px); border-color: var(--primary); background: var(--surface); box-shadow: var(--shadow); }
+.quick .qi { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; }
+.quick b { font-size: 13px; color: var(--text); }
+
+/* ── Dashboard grid layouts ──────────────────────────────────── */
+.dash-main { display: grid; grid-template-columns: 360px 1fr; gap: var(--gap); margin-bottom: var(--gap); }
+.grid-2    { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
+.dash-3    { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
+
+/* ── Colored avatar (hue-based gradient) ─────────────────────── */
+.avatar {
+  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
+  display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 14px;
+  overflow: hidden;
+}
+.avatar.sm { width: 32px; height: 32px; font-size: 12px; }
+.avatar.lg { width: 104px; height: 104px; font-size: 34px; border-radius: 22px; }
+
+/* ── Responsive ──────────────────────────────────────────────── */
+.scrim { display: none; }
+@media (max-width: 1080px) {
+  .stat-grid { grid-template-columns: repeat(3, 1fr); }
+  .dash-main { grid-template-columns: 1fr; }
+  .dash-3    { grid-template-columns: 1fr; }
+}
+@media (max-width: 860px) {
+  .main { margin-right: 0 !important; }
+  .sidebar { transform: translateX(100%); box-shadow: var(--shadow-lg); }
+  .app[data-mobile-open="true"] .sidebar { transform: translateX(0); width: var(--sidebar-w); }
+  .app[data-mobile-open="true"] .scrim {
+    display: block; position: fixed; inset: 0; background: rgba(8,13,22,.5);
+    z-index: 35; backdrop-filter: blur(2px);
+  }
+  .topbar-search { display: none; }
+  .grid-2 { grid-template-columns: 1fr; }
+}
+@media (max-width: 560px) {
+  .stat-grid { grid-template-columns: 1fr 1fr; }
 }