/* ================================================================
   FANUS DESIGN SYSTEM v2.0
   Premium Glass UI — Apple visionOS Inspired
   Brand: فانوس (Lantern) — Soft Light, Glass, Warmth
   ================================================================ */

/* ===1. DESIGN TOKENS === */
:root {
  /* Colors - Primary */
  --f-green-50: #f0fdf4;
  --f-green-100: #dcfce7;
  --f-green-200: #bbf7d0;
  --f-green-300: #86efac;
  --f-green-400: #4ade80;
  --f-green-500: #22c55e;
  --f-green-600: #16a34a;
  --f-green-700: #15803d;
  --f-green-800: #166534;
  --f-green-900: #14532d;

  /* Colors - Neutral */
  --f-gray-50: #f8fafc;
  --f-gray-100: #f1f5f9;
  --f-gray-200: #e2e8f0;
  --f-gray-300: #cbd5e1;
  --f-gray-400: #94a3b8;
  --f-gray-500: #64748b;
  --f-gray-600: #475569;
  --f-gray-700: #334155;
  --f-gray-800: #1e293b;
  --f-gray-900: #0f172a;

  /* Colors - Semantic */
  --f-red: #ef4444;
  --f-red-light: #fee2e2;
  --f-amber: #f59e0b;
  --f-amber-light: #fef3c7;
  --f-blue: #3b82f6;
  --f-blue-light: #dbeafe;
  --f-emerald: #10b981;
  --f-emerald-light: #d1fae5;
  --f-purple: #8b5cf6;
  --f-purple-light: #ede9fe;

  /* Brand */
  --f-primary: #14B85C;
  --f-primary-hover: #0D9448;
  --f-primary-light: #4ADE80;
  --f-primary-glow: rgba(20, 184, 92, 0.15);
  --f-primary-glow-strong: rgba(20, 184, 92, 0.25);

  /* Lantern Warmth */
  --f-warm: #F59E0B;
  --f-warm-glow: rgba(245, 158, 11, 0.12);

  /* Glass */
  --f-glass-bg: rgba(255, 255, 255, 0.72);
  --f-glass-bg-strong: rgba(255, 255, 255, 0.88);
  --f-glass-border: rgba(255, 255, 255, 0.45);
  --f-glass-border-subtle: rgba(255, 255, 255, 0.25);
  --f-glass-blur: blur(20px) saturate(180%);
  --f-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
  --f-glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.06);
  --f-glass-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* Shadows - Apple Style */
  --f-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --f-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --f-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --f-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
  --f-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.1);
  --f-shadow-green: 0 8px 24px rgba(20, 184, 92, 0.2);

  /* Radius */
  --f-radius-xs: 8px;
  --f-radius-sm: 12px;
  --f-radius-md: 16px;
  --f-radius-lg: 20px;
  --f-radius-xl: 24px;
  --f-radius-2xl: 32px;
  --f-radius-full: 9999px;

  /* Spacing */
  --f-space-1: 4px;
  --f-space-2: 8px;
  --f-space-3: 12px;
  --f-space-4: 16px;
  --f-space-5: 20px;
  --f-space-6: 24px;
  --f-space-8: 32px;
  --f-space-10: 40px;
  --f-space-12: 48px;

  /* Typography */
  --f-font: 'Vazirmatn', system-ui, -apple-system, sans-serif;
  --f-text-xs: 0.75rem;
  --f-text-sm: 0.8125rem;
  --f-text-base: 0.9375rem;
  --f-text-lg: 1.0625rem;
  --f-text-xl: 1.25rem;
  --f-text-2xl: 1.5rem;
  --f-text-3xl: 1.875rem;
  --f-text-4xl: 2.25rem;

  /* Transitions */
  --f-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --f-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --f-duration-fast: 150ms;
  --f-duration: 250ms;
  --f-duration-slow: 400ms;

  /* Layout */
  --f-sidebar-width: 260px;
  --f-sidebar-collapsed: 72px;
  --f-header-height: 80px;
  --f-bottom-nav-height: 72px;
  --f-max-width: 1500px;
  --f-content-padding: 24px;
}

/* === 2. RESET & BASE === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; width: 100%; }
body {
  font-family: var(--f-font);
  background: var(--f-gray-50);
  color: var(--f-gray-900);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
}
a { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }
img { max-width: 100%; display: block; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--f-green-200); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--f-green-300); }

/* === 3. TYPOGRAPHY === */
.f-text-xs { font-size: var(--f-text-xs); }
.f-text-sm { font-size: var(--f-text-sm); }
.f-text-base { font-size: var(--f-text-base); }
.f-text-lg { font-size: var(--f-text-lg); }
.f-text-xl { font-size: var(--f-text-xl); }
.f-text-2xl { font-size: var(--f-text-2xl); }
.f-text-3xl { font-size: var(--f-text-3xl); }
.f-text-4xl { font-size: var(--f-text-4xl); }
.f-font-medium { font-weight: 500; }
.f-font-semibold { font-weight: 600; }
.f-font-bold { font-weight: 700; }
.f-font-black { font-weight: 900; }
.f-leading-tight { line-height: 1.25; }
.f-leading-normal { line-height: 1.6; }

/* === 4. LAYOUT === */
.f-panel { display: flex; min-height: 100vh; overflow-x: hidden; width: 100%; max-width: 100vw; position: relative; }
.f-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--f-sidebar-width);
  background: var(--f-glass-bg-strong);
  backdrop-filter: var(--f-glass-blur);
  -webkit-backdrop-filter: var(--f-glass-blur);
  border-left: 1px solid var(--f-glass-border);
  z-index: 150;
  display: flex;
  flex-direction: column;
  padding: var(--f-space-6) var(--f-space-4);
  transition: transform var(--f-duration-slow) var(--f-ease);
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateX(100%);
}
.f-sidebar.open { transform: translateX(0); }
.f-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 140;
  touch-action: none;
  overscroll-behavior: contain;
}
.f-sidebar-overlay.open { display: block; }

/* ===== قفل اسکرول سایدبار ===== */
.f-body-scroll-locked,
.f-body-scroll-locked * {
  overflow: hidden !important;
  touch-action: none !important;
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior: none !important;
}
.f-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--f-radius-sm);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
  color: white;
}
.f-menu-btn:hover { background: rgba(255, 255, 255, 0.25); }
.f-sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--f-space-3);
  padding: 0 var(--f-space-3);
  margin-bottom: var(--f-space-8);
}
.f-sidebar-logo img { width: 40px; height: 40px; border-radius: var(--f-radius-sm); }
.f-sidebar-logo span { font-size: var(--f-text-xl); font-weight: 800; color: var(--f-green-700); }
.f-sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: var(--f-space-1); }
.f-sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--f-space-3);
  padding: var(--f-space-3) var(--f-space-4);
  border-radius: var(--f-radius-md);
  font-size: var(--f-text-sm);
  font-weight: 500;
  color: var(--f-gray-500);
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
  position: relative;
}
.f-sidebar-item:hover { background: var(--f-green-50); color: var(--f-green-700); }
.f-sidebar-item.active {
  background: var(--f-primary-glow);
  color: var(--f-green-700);
  font-weight: 700;
}
.f-sidebar-item.active::before {
  content: '';
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: var(--f-primary);
  border-radius: 0 4px 4px 0;
}
.f-sidebar-item svg,
.f-sidebar-item i { width: 20px; height: 20px; flex-shrink: 0; }
.f-sidebar-footer {
  border-top: 1px solid var(--f-gray-200);
  padding-top: var(--f-space-4);
  margin-top: var(--f-space-4);
}
.f-sidebar-profile {
  display: flex;
  align-items: center;
  gap: var(--f-space-3);
  padding: var(--f-space-3);
  border-radius: var(--f-radius-md);
  margin-bottom: var(--f-space-3);
}
.f-sidebar-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: transparent !important;
  background: linear-gradient(135deg, var(--f-green-500), var(--f-green-700));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  font-size: var(--f-text-base);
  flex-shrink: 0;
}
.f-sidebar-profile-info { flex: 1; min-width: 0; }
.f-sidebar-profile-name { font-size: var(--f-text-sm); font-weight: 700; color: var(--f-gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-sidebar-profile-user { font-size: var(--f-text-xs); color: var(--f-gray-400); }

/* Main Content Area */
.f-main {
  flex: 1;
  min-height: 100vh;
  overflow-x: hidden;
  max-width: 100%;
  transition: margin-right var(--f-duration-slow) var(--f-ease);
}
.f-content {
  max-width: var(--f-max-width);
  margin: 0 auto;
  padding: 0 var(--f-space-5);
  padding-bottom: calc(var(--f-bottom-nav-height) + 32px);
  overflow-x: hidden;
}

/* === 5. GLASS SYSTEM === */
.glass {
  background: var(--f-glass-bg);
  backdrop-filter: var(--f-glass-blur);
  -webkit-backdrop-filter: var(--f-glass-blur);
  border: 1px solid var(--f-glass-border);
  box-shadow: var(--f-glass-shadow), var(--f-glass-inner-glow);
}
.glass-card {
  background: var(--f-glass-bg-strong);
  backdrop-filter: var(--f-glass-blur);
  -webkit-backdrop-filter: var(--f-glass-blur);
  border: 1px solid var(--f-glass-border);
  border-radius: var(--f-radius-xl);
  box-shadow: var(--f-glass-shadow), var(--f-glass-inner-glow);
  padding: var(--f-space-5);
  transition: transform var(--f-duration) var(--f-ease),
              box-shadow var(--f-duration) var(--f-ease);
}
.glass-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--f-glass-shadow-lg), var(--f-glass-inner-glow);
}
.glass-card-static {
  background: var(--f-glass-bg-strong);
  backdrop-filter: var(--f-glass-blur);
  -webkit-backdrop-filter: var(--f-glass-blur);
  border: 1px solid var(--f-glass-border);
  border-radius: var(--f-radius-xl);
  box-shadow: var(--f-glass-shadow), var(--f-glass-inner-glow);
  padding: var(--f-space-5);
}

/* === 6. BUTTONS === */
.f-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--f-space-2);
  padding: 14px 24px;
  border-radius: var(--f-radius-md);
  font-size: var(--f-text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
  border: none;
  outline: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.f-btn:active { transform: scale(0.97); }
.f-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.f-btn-primary {
  background: linear-gradient(135deg, var(--f-primary), var(--f-primary-hover));
  color: white;
  box-shadow: var(--f-shadow-green);
}
.f-btn-primary:hover { box-shadow: 0 12px 32px rgba(20, 184, 92, 0.3); transform: translateY(-1px); }
.f-btn-secondary {
  background: var(--f-glass-bg-strong);
  border: 1px solid var(--f-glass-border);
  color: var(--f-green-700);
  backdrop-filter: blur(10px);
}
.f-btn-secondary:hover { background: var(--f-green-50); border-color: var(--f-green-200); }
.f-btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.2);
}
.f-btn-ghost {
  background: transparent;
  color: var(--f-gray-500);
}
.f-btn-ghost:hover { background: var(--f-gray-100); color: var(--f-gray-700); }
.f-btn-sm { padding: 10px 16px; font-size: var(--f-text-xs); border-radius: var(--f-radius-sm); }
.f-btn-lg { padding: 16px 32px; font-size: var(--f-text-base); }
.f-btn-full { width: 100%; }
.f-btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--f-radius-md);
}
.f-btn-icon-sm {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--f-radius-sm);
}

/* === 7. INPUTS === */
.f-input-group { position: relative; }
.f-input-group label {
  display: block;
  font-size: var(--f-text-xs);
  font-weight: 600;
  color: var(--f-gray-500);
  margin-bottom: 6px;
}
.f-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--f-radius-md);
  border: 2px solid transparent;
  background: var(--f-green-50);
  font-size: var(--f-text-sm);
  color: var(--f-gray-900);
  outline: none;
  transition: all var(--f-duration) var(--f-ease);
}
.f-input:focus {
  border-color: var(--f-green-300);
  background: white;
  box-shadow: 0 0 0 4px var(--f-primary-glow);
}
.f-input::placeholder { color: var(--f-gray-300); }
.f-input-icon-wrap {
  position: relative;
}
.f-input-icon-wrap .f-input { padding-right: 44px; }
.f-input-icon-wrap svg,
.f-input-icon-wrap i {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--f-gray-400);
  pointer-events: none;
}
.f-textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--f-radius-md);
  border: 2px solid transparent;
  background: var(--f-green-50);
  font-size: var(--f-text-sm);
  color: var(--f-gray-900);
  outline: none;
  resize: vertical;
  min-height: 80px;
  transition: all var(--f-duration) var(--f-ease);
}
.f-textarea:focus {
  border-color: var(--f-green-300);
  background: white;
  box-shadow: 0 0 0 4px var(--f-primary-glow);
}

/* === 8. CARDS === */
.f-stat-card {
  background: var(--f-glass-bg-strong);
  border: 1px solid var(--f-glass-border);
  border-radius: var(--f-radius-xl);
  padding: var(--f-space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--f-space-2);
  transition: all var(--f-duration) var(--f-ease);
  box-shadow: var(--f-shadow-xs);
  cursor: default;
}
.f-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--f-shadow-md);
}
.f-stat-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--f-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.f-stat-icon svg, .f-stat-icon i { width: 22px; height: 22px; }
.f-stat-icon.green { background: transparent; color: var(--f-green-600); }
.f-stat-icon.amber { background: transparent; color: var(--f-amber-600); }
.f-stat-icon.blue { background: transparent; color: var(--f-blue-600); }
.f-stat-icon.red { background: transparent; color: var(--f-red); }
.f-stat-icon.purple { background: transparent; color: var(--f-purple); }
.f-stat-icon.emerald { background: transparent; color: var(--f-emerald-600); }
.f-stat-value {
  font-size: var(--f-text-2xl);
  font-weight: 900;
  color: var(--f-gray-900);
  line-height: 1.2;
}
.f-stat-label {
  font-size: var(--f-text-xs);
  color: var(--f-gray-400);
  font-weight: 500;
}

/* Action Card */
.f-action-card {
  background: var(--f-glass-bg-strong);
  border: 1px solid var(--f-glass-border);
  border-radius: var(--f-radius-xl);
  padding: var(--f-space-4);
  display: flex;
  align-items: center;
  gap: var(--f-space-3);
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
  box-shadow: var(--f-shadow-xs);
}
.f-action-card:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: var(--f-shadow-md);
  border-color: var(--f-green-200);
}
.f-action-card:active { transform: scale(0.98); }
.f-action-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--f-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.f-action-icon svg, .f-action-icon i { width: 20px; height: 20px; }
.f-action-text { flex: 1; min-width: 0; }
.f-action-title { font-size: var(--f-text-sm); font-weight: 700; color: var(--f-gray-900); }
.f-action-desc { font-size: var(--f-text-xs); color: var(--f-gray-400); margin-top: 2px; }

/* Section Title */
.f-section-title {
  font-size: var(--f-text-base);
  font-weight: 800;
  color: var(--f-gray-900);
  margin-bottom: var(--f-space-4);
  display: flex;
  align-items: center;
  gap: var(--f-space-2);
}
.f-section-title svg, .f-section-title i { width: 18px; height: 18px; color: var(--f-green-500); }

/* === 9. BADGES === */
.f-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--f-radius-xs);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.f-badge-green { background: var(--f-green-100); color: var(--f-green-700); }
.f-badge-red { background: var(--f-red-light); color: #dc2626; }
.f-badge-amber { background: var(--f-amber-light); color: #b45309; }
.f-badge-blue { background: var(--f-blue-light); color: #2563eb; }
.f-badge-gray { background: var(--f-gray-100); color: var(--f-gray-500); }
.f-badge-purple { background: var(--f-purple-light); color: #7c3aed; }
.f-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.f-badge-green .f-badge-dot { background: var(--f-green-500); }
.f-badge-red .f-badge-dot { background: var(--f-red); }
.f-badge-amber .f-badge-dot { background: var(--f-amber); }

/* === 10. BOTTOM NAVIGATION (Mobile) === */
.f-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  padding: 6px 12px;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
}
.f-bottom-nav-inner {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--f-radius-xl);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06), var(--f-glass-inner-glow);
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 480px;
  margin: 0 auto;
  padding: 6px 8px;
}
.f-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 14px;
  border-radius: var(--f-radius-md);
  font-size: 10px;
  font-weight: 600;
  color: var(--f-gray-400);
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.f-nav-item.active { color: var(--f-green-600); }
.f-nav-item.active::before {
  content: '';
  position: absolute;
  top: 2px;
  width: 20px;
  height: 3px;
  background: var(--f-primary);
  border-radius: var(--f-radius-full);
}
.f-nav-item svg, .f-nav-item i { width: 22px; height: 22px; transition: transform var(--f-duration) var(--f-ease); }
.f-nav-item.active svg, .f-nav-item.active i { transform: scale(1.1); }

/* === 11. FAB (Floating Action Button) === */
.f-fab {
  position: fixed;
  bottom: calc(var(--f-bottom-nav-height) + 20px);
  left: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--f-primary), var(--f-primary-hover));
  color: white;
  border: none;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(20, 184, 92, 0.35);
  z-index: 80;
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
}
.f-fab:hover { transform: scale(1.08); box-shadow: 0 12px 36px rgba(20, 184, 92, 0.4); }
.f-fab:active { transform: scale(0.95); }

/* === 12. SEARCH BAR === */
.f-search {
  display: flex;
  align-items: center;
  gap: var(--f-space-3);
  background: var(--f-green-50);
  border: 2px solid transparent;
  border-radius: var(--f-radius-lg);
  padding: 12px 16px;
  transition: all var(--f-duration) var(--f-ease);
}
.f-search:focus-within {
  border-color: var(--f-green-200);
  background: white;
  box-shadow: 0 0 0 4px var(--f-primary-glow);
}
.f-search svg, .f-search i { width: 20px; height: 20px; color: var(--f-green-400); flex-shrink: 0; }
.f-search input {
  flex: 1;
  border: none;
  background: none;
  font-size: var(--f-text-sm);
  color: var(--f-gray-900);
  outline: none;
}
.f-search input::placeholder { color: var(--f-green-300); }

/* === 13. FILTER CHIPS === */
.f-chips {
  display: flex;
  gap: var(--f-space-2);
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.f-chips::-webkit-scrollbar { display: none; }
.f-chip {
  padding: 8px 16px;
  border-radius: var(--f-radius-full);
  border: 1.5px solid var(--f-green-200);
  font-size: var(--f-text-xs);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
  background: white;
  color: var(--f-gray-500);
}
.f-chip:hover { border-color: var(--f-green-300); color: var(--f-green-600); }
.f-chip.active {
  background: var(--f-primary);
  color: white;
  border-color: var(--f-primary);
}

/* === 14. HERO SLIDER === */
.f-hero {
  position: relative;
  border-radius: var(--f-radius-2xl);
  overflow: hidden;
  margin-bottom: var(--f-space-6);
  aspect-ratio: 2.4 / 1;
  min-height: 200px;
  max-width: 100%;
}
.f-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s var(--f-ease-in-out);
  display: flex;
  align-items: center;
  justify-content: center;
}
.f-hero-slide.active { opacity: 1; z-index: 1; }
.f-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.f-hero-overlay {
  position: absolute;
  inset: 0;
}
.f-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  padding: var(--f-space-8);
  max-width: 600px;
}
.f-hero-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--f-radius-full);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  font-size: var(--f-text-xs);
  font-weight: 600;
  margin-bottom: var(--f-space-4);
}
.f-hero-title {
  font-size: var(--f-text-2xl);
  font-weight: 900;
  line-height: 1.3;
  margin-bottom: var(--f-space-3);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
}
.f-hero-subtitle {
  font-size: var(--f-text-sm);
  opacity: 0.9;
  margin-bottom: var(--f-space-5);
  line-height: 1.6;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.f-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--f-radius-md);
  background: white;
  color: var(--f-green-700);
  font-size: var(--f-text-sm);
  font-weight: 700;
  transition: all var(--f-duration) var(--f-ease);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.f-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); }
.f-hero-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.f-hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
}
.f-hero-dot.active {
  background: white;
  width: 24px;
  border-radius: 4px;
}

/* === 15. PRODUCT CARD === */
.f-product-card {
  background: var(--f-glass-bg-strong);
  border: 1px solid var(--f-glass-border);
  border-radius: var(--f-radius-xl);
  overflow: hidden;
  transition: all var(--f-duration) var(--f-ease);
  box-shadow: var(--f-shadow-xs);
}
.f-product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--f-shadow-md);
}
.f-product-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--f-green-50);
}
.f-product-img-placeholder {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--f-green-50), var(--f-green-100));
  display: flex;
  align-items: center;
  justify-content: center;
}
.f-product-img-placeholder svg { width: 40px; height: 40px; color: var(--f-green-300); }
.f-product-info { padding: var(--f-space-4); }
.f-product-name {
  font-size: var(--f-text-sm);
  font-weight: 700;
  color: var(--f-gray-900);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.f-product-price {
  font-size: var(--f-text-base);
  font-weight: 900;
  color: var(--f-green-700);
  margin-bottom: 6px;
}
.f-product-price-discount {
  font-size: var(--f-text-xs);
  color: var(--f-gray-400);
  text-decoration: line-through;
  margin-right: 6px;
  font-weight: 400;
}
.f-product-actions {
  display: flex;
  gap: 6px;
  margin-top: var(--f-space-3);
}
.f-product-actions button { flex: 1; }

/* Product List Item (horizontal) */
.f-product-item {
  display: flex;
  align-items: center;
  gap: var(--f-space-3);
  padding: var(--f-space-3) var(--f-space-4);
  background: var(--f-glass-bg-strong);
  border: 1px solid var(--f-glass-border);
  border-radius: var(--f-radius-lg);
  transition: all var(--f-duration) var(--f-ease);
  cursor: pointer;
  box-shadow: var(--f-shadow-xs);
}
.f-product-item:hover { transform: translateX(-2px); box-shadow: var(--f-shadow-sm); }
.f-product-item:active { transform: scale(0.99); }
.f-product-item-img {
  width: 56px;
  height: 56px;
  border-radius: var(--f-radius-md);
  object-fit: cover;
  background: var(--f-green-50);
  flex-shrink: 0;
  border: 1px solid var(--f-green-100);
}
.f-product-item-info { flex: 1; min-width: 0; }
.f-product-item-name { font-size: var(--f-text-sm); font-weight: 700; color: var(--f-gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-product-item-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; }

/* === 16. ORDER CARD === */
.f-order-card {
  background: var(--f-glass-bg-strong);
  border: 1px solid var(--f-glass-border);
  border-radius: var(--f-radius-xl);
  overflow: hidden;
  transition: all var(--f-duration) var(--f-ease);
  box-shadow: var(--f-shadow-xs);
}
.f-order-card:hover { box-shadow: var(--f-shadow-sm); }
.f-order-header {
  padding: var(--f-space-4);
  border-bottom: 1px solid var(--f-gray-100);
}
.f-order-body { padding: var(--f-space-3) var(--f-space-4); }
.f-order-footer {
  padding: var(--f-space-3) var(--f-space-4);
  background: var(--f-green-50);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.f-order-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.f-order-row:last-child { margin-bottom: 0; }

/* === 17. SETTINGS === */
.f-settings-section {
  background: var(--f-glass-bg-strong);
  border: 1px solid var(--f-glass-border);
  border-radius: var(--f-radius-xl);
  overflow: hidden;
  margin-bottom: var(--f-space-4);
  box-shadow: var(--f-shadow-xs);
}
.f-settings-header {
  padding: var(--f-space-5);
  border-bottom: 1px solid var(--f-gray-100);
  display: flex;
  align-items: center;
  gap: var(--f-space-3);
}
.f-settings-header-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--f-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.f-settings-header-icon svg { width: 20px; height: 20px; }
.f-settings-header-text { flex: 1; }
.f-settings-header-title { font-size: var(--f-text-sm); font-weight: 800; color: var(--f-gray-900); }
.f-settings-header-desc { font-size: var(--f-text-xs); color: var(--f-gray-400); margin-top: 2px; }
.f-settings-body { padding: var(--f-space-5); }
.f-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--f-space-4) 0;
  border-bottom: 1px solid var(--f-gray-100);
}
.f-settings-row:last-child { border-bottom: none; padding-bottom: 0; }
.f-settings-row:first-child { padding-top: 0; }
.f-settings-row-info { flex: 1; min-width: 0; }
.f-settings-row-label { font-size: var(--f-text-sm); font-weight: 600; color: var(--f-gray-700); }
.f-settings-row-value { font-size: var(--f-text-xs); color: var(--f-gray-400); margin-top: 2px; direction: ltr; text-align: right; }

/* Connection Status Card */
.f-connection-card {
  background: var(--f-glass-bg-strong);
  border: 1px solid var(--f-glass-border);
  border-radius: var(--f-radius-xl);
  padding: var(--f-space-5);
  margin-bottom: var(--f-space-4);
  box-shadow: var(--f-shadow-xs);
}
.f-connection-status {
  display: flex;
  align-items: center;
  gap: var(--f-space-3);
  padding: var(--f-space-3) var(--f-space-4);
  border-radius: var(--f-radius-md);
  margin-bottom: var(--f-space-4);
}
.f-connection-status.active { background: var(--f-green-50); border: 1px solid var(--f-green-200); }
.f-connection-status.inactive { background: var(--f-amber-light); border: 1px solid #fde68a; }
.f-connection-status.off { background: var(--f-gray-100); border: 1px solid var(--f-gray-200); }
.f-connection-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.f-connection-dot.active { background: var(--f-green-500); box-shadow: 0 0 8px rgba(34, 197, 94, 0.4); }
.f-connection-dot.inactive { background: var(--f-amber); }
.f-connection-dot.off { background: var(--f-gray-400); }

/* Color Picker */
.f-color-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.f-color-dot {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--f-radius-sm);
  cursor: pointer;
  border: 3px solid transparent;
  transition: all var(--f-duration) var(--f-ease);
}
.f-color-dot:hover { transform: scale(1.15); }
.f-color-dot.active { border-color: var(--f-gray-900); box-shadow: 0 0 0 3px rgba(20, 83, 45, 0.15); }

/* === 18. MODAL === */
.f-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  transition: background var(--f-duration) var(--f-ease);
}
.f-modal-overlay.active { display: flex; }
.f-modal {
  background: white;
  border-radius: var(--f-radius-2xl) var(--f-radius-2xl) 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  animation: modalSlideUp 0.4s var(--f-ease);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12);
}
.f-modal-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--f-gray-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
  border-radius: var(--f-radius-2xl) var(--f-radius-2xl) 0 0;
}
.f-modal-title { font-size: var(--f-text-base); font-weight: 800; color: var(--f-gray-900); }
.f-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--f-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--f-gray-400);
  font-size: 14px;
  transition: all var(--f-duration) var(--f-ease);
}
.f-modal-close:hover { background: var(--f-gray-200); color: var(--f-gray-600); }
.f-modal-body { padding: 20px; }
.f-modal-footer {
  padding: 12px 20px 20px;
  border-top: 1px solid var(--f-gray-100);
  position: sticky;
  bottom: 0;
  background: white;
}

/* === 19. TOAST === */
.f-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: var(--f-gray-900);
  color: white;
  padding: 12px 24px;
  border-radius: var(--f-radius-lg);
  font-size: var(--f-text-sm);
  font-weight: 600;
  z-index: 300;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: all var(--f-duration-slow) var(--f-ease);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.f-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.f-toast.success { background: var(--f-green-700); }
.f-toast.error { background: #dc2626; }

/* === 20. SKELETON LOADING === */
.f-skeleton {
  background: linear-gradient(90deg, var(--f-gray-100) 25%, var(--f-gray-50) 50%, var(--f-gray-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--f-radius-md);
}
.f-skeleton-card {
  height: 120px;
  border-radius: var(--f-radius-xl);
  margin-bottom: 12px;
}
.f-skeleton-stat {
  height: 100px;
  border-radius: var(--f-radius-xl);
}
.f-skeleton-text { height: 14px; margin-bottom: 8px; border-radius: 6px; }
.f-skeleton-text.w-50 { width: 50%; }
.f-skeleton-text.w-75 { width: 75%; }
.f-skeleton-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

/* === 21. EMPTY STATE === */
.f-empty {
  text-align: center;
  padding: var(--f-space-12) var(--f-space-6);
}
.f-empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--f-green-50);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--f-space-5);
}
.f-empty-icon svg { width: 36px; height: 36px; color: var(--f-green-300); }
.f-empty-title { font-size: var(--f-text-base); font-weight: 700; color: var(--f-gray-700); margin-bottom: 6px; }
.f-empty-desc { font-size: var(--f-text-sm); color: var(--f-gray-400); margin-bottom: var(--f-space-5); }

/* === 22. CHARTS (Pure CSS) === */
.f-chart-bar-wrap {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  padding-top: 8px;
}
.f-chart-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
}
.f-chart-bar {
  width: 100%;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--f-primary), var(--f-green-400));
  transition: height 0.6s var(--f-ease);
  min-height: 4px;
  position: relative;
}
.f-chart-bar:hover { opacity: 0.85; }
.f-chart-bar-label {
  font-size: 10px;
  color: var(--f-gray-400);
  font-weight: 500;
}

/* === 23. LOGIN === */
.f-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #0a1f12 0%, #0d3320 25%, #1a5c35 50%, #2d8a50 75%, #43b06a 100%);
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.f-login::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(20, 184, 92, 0.15), transparent 70%);
  border-radius: 50%;
  top: -100px;
  right: -100px;
}
.f-login::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.08), transparent 70%);
  border-radius: 50%;
  bottom: -80px;
  left: -80px;
}
.f-login-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--f-radius-2xl);
  padding: 32px 24px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
  animation: modalScaleIn 0.5s var(--f-ease);
  position: relative;
  z-index: 1;
}
.f-login-logo {
  width: 120px;
  height: 120px;
  margin: 0 auto 16px;
}
.f-otp-box {
  width: 52px;
  height: 58px;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  border: 2px solid var(--f-green-200);
  border-radius: var(--f-radius-md);
  font-family: inherit;
  background: var(--f-green-50);
  color: var(--f-gray-900);
  transition: all var(--f-duration) var(--f-ease);
  outline: none;
}
.f-otp-box:focus {
  border-color: var(--f-primary);
  background: white;
  box-shadow: 0 0 0 4px var(--f-primary-glow);
}

/* === 24. TOGGLE SWITCH === */
.f-toggle {
  overflow: hidden;
  position: relative;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
}
.f-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.f-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--f-gray-300);
  border-radius: 28px;
  cursor: pointer;
  transition: background var(--f-duration) var(--f-ease);
}
.f-toggle-track::before {
  content: '';
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform var(--f-duration) var(--f-ease);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.f-toggle input:checked + .f-toggle-track { background: var(--f-primary); }
.f-toggle input:checked + .f-toggle-track::before { transform: translateX(24px); }

/* === 25. AI INTELLIGENCE CARD === */
.f-ai-card {
  background: linear-gradient(135deg, rgba(20, 184, 92, 0.05), rgba(245, 158, 11, 0.05));
  border: 1px solid rgba(20, 184, 92, 0.15);
  border-radius: var(--f-radius-xl);
  padding: var(--f-space-5);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--f-space-5);
}
.f-ai-card::before {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(20, 184, 92, 0.08), transparent);
  border-radius: 50%;
  top: -40px;
  right: -40px;
}
.f-ai-card-header {
  display: flex;
  align-items: center;
  gap: var(--f-space-2);
  margin-bottom: var(--f-space-3);
}
.f-ai-card-badge {
  padding: 4px 12px;
  border-radius: var(--f-radius-full);
  background: linear-gradient(135deg, #0f0c29, #1a1040, #24243e);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  z-index: 1;
  text-shadow: 0 0 6px rgba(255,255,255,0.3);
  border: 1px solid rgba(255,215,0,0.25);
  box-shadow: 0 0 8px rgba(255,215,0,0.15), inset 0 0 6px rgba(255,255,255,0.05);
}
.f-ai-card-badge::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 8% 15%, rgba(255,215,0,0.95), transparent),
    radial-gradient(1px 1px at 22% 55%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.5px 1.5px at 38% 20%, rgba(255,200,50,0.85), transparent),
    radial-gradient(1px 1px at 52% 70%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.3px 1.3px at 65% 35%, rgba(255,215,0,0.9), transparent),
    radial-gradient(1px 1px at 78% 80%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.2px 1.2px at 90% 25%, rgba(255,220,80,0.9), transparent),
    radial-gradient(1px 1px at 15% 85%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.4px 1.4px at 45% 45%, rgba(255,215,0,0.8), transparent),
    radial-gradient(1px 1px at 72% 12%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.1px 1.1px at 30% 65%, rgba(255,230,100,0.85), transparent),
    radial-gradient(1px 1px at 85% 55%, rgba(255,255,255,0.75), transparent);
  z-index: -1;
  animation: glitterSparkle 2.5s ease-in-out infinite alternate;
}
.f-ai-card-badge::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: glitterSweep 3s ease-in-out infinite;
  z-index: -1;
}
@keyframes glitterSparkle {
  0% { opacity: 0.6; filter: brightness(0.9); }
  50% { opacity: 1; filter: brightness(1.4); }
  100% { opacity: 0.7; filter: brightness(1.1); }
}
@keyframes glitterSweep {
  0% { left: -100%; }
  100% { left: 200%; }
}
.f-ai-card-text {
  font-size: var(--f-text-sm);
  color: var(--f-gray-600);
  line-height: 1.7;
}
.f-ai-card-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--f-space-3);
  padding: 8px 16px;
  border-radius: var(--f-radius-md);
  background: white;
  border: 1px solid var(--f-green-200);
  color: var(--f-green-700);
  font-size: var(--f-text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
}
.f-ai-card-action:hover { background: var(--f-green-50); border-color: var(--f-green-300); }

/* === 26. IMAGE UPLOAD === */
.f-upload-area {
  border: 2px dashed var(--f-green-200);
  border-radius: var(--f-radius-xl);
  padding: var(--f-space-6);
  text-align: center;
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
  background: var(--f-green-50);
}
.f-upload-area:hover { border-color: var(--f-green-400); background: var(--f-green-100); }
.f-upload-area.has-image { padding: var(--f-space-3); border-style: solid; border-color: var(--f-green-300); }
.f-upload-area img { max-width: 120px; max-height: 120px; border-radius: var(--f-radius-md); object-fit: cover; margin: 0 auto; }

/* === 27. KEYFRAME ANIMATIONS === */
@keyframes modalSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes modalScaleIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes viewEnter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(20, 184, 92, 0.3); }
  50% { box-shadow: 0 0 0 8px rgba(20, 184, 92, 0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.f-view { display: none; animation: viewEnter 0.4s var(--f-ease); }
.f-view.active { display: block; }
.f-animate-in { animation: fadeIn 0.5s var(--f-ease); }
.f-float { animation: float 3s ease-in-out infinite; }

/* === 28. GRID LAYOUTS === */
.f-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.f-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.f-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.f-grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.f-flex { display: flex; }
.f-flex-col { flex-direction: column; }
.f-items-center { align-items: center; }
.f-justify-between { justify-content: space-between; }
.f-gap-1 { gap: var(--f-space-1); }
.f-gap-2 { gap: var(--f-space-2); }
.f-gap-3 { gap: var(--f-space-3); }
.f-gap-4 { gap: var(--f-space-4); }
.f-gap-5 { gap: var(--f-space-5); }
.f-mb-2 { margin-bottom: var(--f-space-2); }
.f-mb-3 { margin-bottom: var(--f-space-3); }
.f-mb-4 { margin-bottom: var(--f-space-4); }
.f-mb-5 { margin-bottom: var(--f-space-5); }
.f-mb-6 { margin-bottom: var(--f-space-6); }
.f-mt-3 { margin-top: var(--f-space-3); }
.f-mt-4 { margin-top: var(--f-space-4); }
.f-pt-4 { padding-top: var(--f-space-4); }
.f-pb-4 { padding-bottom: var(--f-space-4); }
.f-hidden { display: none !important; }
.f-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-text-center { text-align: center; }
.f-relative { position: relative; }
.f-w-full { width: 100%; }


/* === FANOUS COLOR PICKER === */
.fcp-overlay{position:fixed;inset:0;background:rgba(0,0,0,0);z-index:500;display:none;align-items:flex-end;justify-content:center;padding:0;transition:background .25s ease}
.fcp-overlay.active{display:flex;background:rgba(0,0,0,.45)}
.fcp-sheet{background:#fff;border-radius:24px 24px 0 0;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;transform:translateY(100%);transition:transform .3s cubic-bezier(.16,1,.3,1);box-shadow:0 -10px 40px rgba(0,0,0,.15);direction:rtl}
.fcp-overlay.active .fcp-sheet{transform:translateY(0)}
@media(min-width:520px){.fcp-overlay{align-items:center;padding:16px}.fcp-sheet{border-radius:24px;max-height:min(800px,90vh)}}

/* === Custom Icon Images === */
.f-stat-icon img,.f-action-icon img,.f-settings-header-icon img{width:100%!important;height:100%!important;object-fit:contain!important;transform:scale(1.45);transform-origin:center}

body.dark .fcp-sheet{background:#162419;border:1px solid #1e3a24;color:#d1fae5}
.fcp-header{padding:18px 20px 14px;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center}
body.dark .fcp-header{border-color:#1e3a24}
.fcp-body{padding:18px 20px}
.fcp-tabs{display:flex;gap:6px;margin-bottom:14px;background:#f0fdf4;border-radius:12px;padding:4px}
body.dark .fcp-tabs{background:#0f1a12}
.fcp-tab{flex:1;padding:8px 6px;border-radius:10px;border:none;background:transparent;color:#6b7280;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}
.fcp-tab.active{background:#fff;color:#16a34a;box-shadow:0 2px 8px rgba(22,163,74,.12)}
body.dark .fcp-tab{color:#6ee7b7}
body.dark .fcp-tab.active{background:#1a2e1f;color:#22c55e}
.fcp-palette{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:14px}
.fcp-palette-dot{width:100%;aspect-ratio:1;border-radius:12px;cursor:pointer;border:3px solid transparent;transition:all .15s}
.fcp-palette-dot:hover{transform:scale(1.1)}
.fcp-palette-dot.active{box-shadow:0 0 0 3px rgba(22,163,74,.2);border-color:#14532d}
body.dark .fcp-palette-dot.active{border-color:#d1fae5}
.fcp-wheel-wrap{position:relative;margin:0 auto 18px;width:min(100%,280px);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.08);touch-action:none;border:4px solid rgba(255,255,255,.6)}
body.dark .fcp-wheel-wrap{border-color:rgba(30,58,36,.6)}
.fcp-wheel-canvas{display:block;width:100%;height:100%;border-radius:50%;cursor:crosshair}
.fcp-thumb{position:absolute;width:18px;height:18px;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.35);pointer-events:none;transform:translate(-50%,-50%);transition:transform .05s}
.fcp-brightness{height:20px;border-radius:10px;margin-bottom:18px;position:relative;cursor:pointer;border:2px solid rgba(0,0,0,.06);box-shadow:inset 0 1px 3px rgba(0,0,0,.05);touch-action:none}
.fcp-brightness-thumb{position:absolute;top:50%;width:20px;height:26px;background:#fff;border:2px solid rgba(0,0,0,.1);border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.2);transform:translate(-50%,-50%);pointer-events:none}
.fcp-input-row{display:flex;gap:10px;align-items:center;margin-bottom:14px}
.fcp-input-row label{font-size:12px;font-weight:600;color:#6b7280;min-width:26px}
body.dark .fcp-input-row label{color:#6ee7b7}
.fcp-input-row input{flex:1;padding:10px 12px;border-radius:12px;background:#f0fdf4;border:2px solid transparent;font-family:'Vazirmatn',monospace;font-size:14px;outline:none;transition:all .2s;text-transform:uppercase}
body.dark .fcp-input-row input{background:#0f1a12;color:#d1fae5;border-color:#1e3a24}
.fcp-input-row input:focus{border-color:#16a34a;background:#fff}
body.dark .fcp-input-row input:focus{background:#162419}
.fcp-preview-row{display:flex;gap:12px;align-items:center;margin-bottom:14px;padding:12px;border-radius:16px;background:#f8faf9;border:1px solid #e5e7eb}
body.dark .fcp-preview-row{background:#0f1a12;border-color:#1e3a24}
.fcp-preview-swatch{width:40px;height:40px;border-radius:12px;border:2px solid rgba(0,0,0,.06)}
.fcp-preview-text{flex:1}
.fcp-preview-name{font-size:13px;font-weight:700}
.fcp-preview-contrast{font-size:11px;color:#6b7280;margin-top:2px}
body.dark .fcp-preview-contrast{color:#6ee7b7}
.fcp-suggest-title{font-size:12px;font-weight:700;color:#6b7280;margin-bottom:8px;margin-top:4px}
body.dark .fcp-suggest-title{color:#6ee7b7}
.fcp-suggest-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.fcp-suggest-chip{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:50px;background:#f0fdf4;border:1px solid #e5e7eb;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;direction:ltr}
body.dark .fcp-suggest-chip{background:#0f1a12;border-color:#1e3a24;color:#d1fae5}
.fcp-suggest-chip:hover{transform:translateY(-1px)}
.fcp-swatch-mini{width:20px;height:20px;border-radius:50%;border:2px solid #fff}
body.dark .fcp-swatch-mini{border-color:#1a2e1f}
.fcp-footer{padding:12px 20px 18px;border-top:1px solid #e5e7eb;display:flex;gap:10px}
body.dark .fcp-footer{border-color:#1e3a24}
.fcp-btn{flex:1;padding:11px 0;border-radius:14px;border:none;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s}
.fcp-btn-secondary{background:#f0fdf4;color:#16a34a}
body.dark .fcp-btn-secondary{background:#0f1a12;color:#4ade80}
.fcp-btn-primary{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff}
.fcp-btn:active{transform:scale(.98)}
.fcp-palette-dot:focus-visible,.color-dot:focus-visible,.fcp-suggest-chip:focus-visible{outline:3px solid #16a34a;outline-offset:2px}
.fcp-tab:focus-visible{outline:2px solid #16a34a;outline-offset:1px}
.fcp-btn:focus-visible{outline:2px solid #16a34a;outline-offset:2px}


/* === SETTINGS ACCORDION === */
.f-settings-section .f-settings-body { display: none; padding: 0 var(--f-space-5); max-height: 0; overflow: hidden; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.f-settings-section.open .f-settings-body { display: block; padding: var(--f-space-5); max-height: 2000px; }
.f-settings-header { cursor: pointer; user-select: none; transition: background 0.2s; }
.f-settings-header:hover { background: rgba(0,0,0,0.02); }
body.dark .f-settings-header:hover { background: rgba(255,255,255,0.03); }
.f-settings-arrow { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); flex-shrink: 0; }
.f-settings-section.open .f-settings-arrow { transform: rotate(180deg); }

/* === 29. DARK MODE (OLED / SaaS Premium) === */
:root {
  --dark-base: #1A1C23;
  --dark-card: #22252E;
  --dark-card-border: #2F3340;
  --dark-card-glass: rgba(34, 37, 46, 0.9);
  --dark-text: #F1F5F9;
  --dark-text-sub: #94A3B8;
  --dark-text-muted: #64748B;
  --dark-accent-teal: #2DD4BF;
  --dark-accent-blue: #3B82F6;
  --dark-accent-purple: #8B5CF6;
  --dark-accent-amber: #F59E0B;
  --dark-accent-pink: #EC4899;
  --dark-accent-green: #10B981;
  --dark-surface: #111620;
  --dark-input: #0F1219;
  --dark-border: #1E293B;
  --dark-hover: rgba(255, 255, 255, 0.04);
}

body.dark {
  background: var(--dark-base) !important;
  color: var(--dark-text) !important;
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* Cards */
body.dark .glass-card,
body.dark .glass-card-static {
  background: var(--dark-card-glass) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
  border-color: var(--dark-card-border) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

body.dark .f-stat-card {
  background: var(--dark-card-glass) !important;
  border-color: var(--dark-card-border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}
body.dark .f-stat-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

/* Stat icon colors in dark mode */
body.dark .f-stat-icon.green { background: rgba(255,255,255,0.92) !important; color: #34D399 !important; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
body.dark .f-stat-icon.amber { background: rgba(255,255,255,0.92) !important; color: #FBBF24 !important; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
body.dark .f-stat-icon.blue { background: rgba(255,255,255,0.92) !important; color: #60A5FA !important; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
body.dark .f-stat-icon.red { background: rgba(255,255,255,0.92) !important; color: #F87171 !important; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
body.dark .f-stat-icon.purple { background: rgba(255,255,255,0.92) !important; color: #A78BFA !important; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
body.dark .f-stat-icon.emerald { background: rgba(255,255,255,0.92) !important; color: #2DD4BF !important; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }

body.dark .f-action-card {
  background: var(--dark-card-glass) !important;
  border-color: var(--dark-card-border) !important;
}
body.dark .f-action-card:hover {
  border-color: rgba(45, 212, 191, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

body.dark .f-order-card {
  background: var(--dark-card-glass) !important;
  border-color: var(--dark-card-border) !important;
}
body.dark .f-order-header { border-color: var(--dark-border) !important; }

body.dark .f-settings-section {
  background: var(--dark-card-glass) !important;
  border-color: var(--dark-card-border) !important;
}
body.dark .f-settings-header { border-color: var(--dark-border) !important; }
body.dark .f-settings-header:hover { background: var(--dark-hover) !important; }
body.dark .f-settings-row { border-color: rgba(30, 41, 59, 0.5) !important; }

body.dark .f-connection-card {
  background: var(--dark-card-glass) !important;
  border-color: var(--dark-card-border) !important;
}
body.dark .f-connection-status.active { background: rgba(16, 185, 129, 0.08) !important; border-color: rgba(16, 185, 129, 0.2) !important; }
body.dark .f-connection-status.inactive { background: rgba(245, 158, 11, 0.08) !important; border-color: rgba(245, 158, 11, 0.2) !important; }
body.dark .f-connection-status.off { background: rgba(100, 116, 139, 0.08) !important; border-color: rgba(100, 116, 139, 0.2) !important; }

body.dark .f-product-card {
  background: var(--dark-card-glass) !important;
  border-color: var(--dark-card-border) !important;
}
body.dark .f-product-item {
  background: var(--dark-card-glass) !important;
  border-color: var(--dark-card-border) !important;
}

/* AI Card */
body.dark .f-ai-card {
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.06), rgba(59, 130, 246, 0.04)) !important;
  border-color: rgba(45, 212, 191, 0.15) !important;
}

/* Hero overlay */
body.dark .f-hero-overlay {
  background: linear-gradient(135deg, rgba(11, 14, 20, 0.3), rgba(11, 14, 20, 0.2)) !important;
}

/* Text colors */
body.dark .f-stat-value,
body.dark .f-product-name,
body.dark .f-product-price,
body.dark .f-section-title,
body.dark .f-modal-title,
body.dark .f-settings-header-title,
body.dark .f-settings-row-label,
body.dark .f-action-title,
body.dark .f-empty-title { color: var(--dark-text) !important; }

body.dark .f-stat-label,
body.dark .f-product-item-meta span,
body.dark .f-settings-row-value,
body.dark .f-action-desc,
body.dark .f-empty-desc { color: var(--dark-text-sub) !important; }

/* Inputs */
body.dark .f-input,
body.dark .f-textarea {
  background: var(--dark-input) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
body.dark .f-input:focus,
body.dark .f-textarea:focus {
  background: var(--dark-surface) !important;
  border-color: var(--dark-accent-teal) !important;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1) !important;
}

/* Search */
body.dark .f-search { background: var(--dark-input) !important; border-color: var(--dark-border) !important; }
body.dark .f-search:focus-within { background: var(--dark-surface) !important; border-color: var(--dark-accent-teal) !important; }
body.dark .f-search input { color: var(--dark-text) !important; }
body.dark .f-search i { color: var(--dark-accent-teal) !important; }

/* Chips */
body.dark .f-chip {
  background: var(--dark-input) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-sub) !important;
}
body.dark .f-chip.active {
  background: linear-gradient(135deg, #0EA5E9, #10B981) !important;
  color: white !important;
  border-color: transparent !important;
}

/* Badges */
body.dark .f-badge-green { background: rgba(16, 185, 129, 0.12) !important; color: #34D399 !important; }
body.dark .f-badge-red { background: rgba(239, 68, 68, 0.12) !important; color: #F87171 !important; }
body.dark .f-badge-amber { background: rgba(245, 158, 11, 0.12) !important; color: #FBBF24 !important; }
body.dark .f-badge-blue { background: rgba(59, 130, 246, 0.12) !important; color: #60A5FA !important; }
body.dark .f-badge-gray { background: rgba(100, 116, 139, 0.12) !important; color: var(--dark-text-sub) !important; }

/* Order footer */
body.dark .f-order-footer { background: rgba(45, 212, 191, 0.05) !important; }

/* Modal */
body.dark .f-modal { background: var(--dark-card) !important; }
body.dark .f-modal-header { background: var(--dark-card) !important; border-color: var(--dark-border) !important; }
body.dark .f-modal-footer { background: var(--dark-card) !important; border-color: var(--dark-border) !important; }
body.dark .f-modal-close { background: rgba(100, 116, 139, 0.15) !important; color: var(--dark-text-sub) !important; }

/* Upload area */
body.dark .f-upload-area { background: var(--dark-input) !important; border-color: var(--dark-border) !important; }

/* Login */
body.dark .f-login-card { background: rgba(20, 24, 32, 0.95) !important; }
body.dark .f-otp-box { background: var(--dark-input) !important; color: var(--dark-text) !important; border-color: var(--dark-border) !important; }

/* Bottom nav */
body.dark .f-bottom-nav-inner {
  background: rgba(11, 14, 20, 0.92) !important;
  border-color: var(--dark-card-border) !important;
  backdrop-filter: blur(24px) !important;
}

/* Sidebar */
body.dark .f-sidebar {
  background: rgba(11, 14, 20, 0.95) !important;
  border-color: var(--dark-card-border) !important;
}
body.dark .f-sidebar-item { color: var(--dark-text-sub) !important; }
body.dark .f-sidebar-item:hover { background: var(--dark-hover) !important; color: var(--dark-text) !important; }
body.dark .f-sidebar-item.active {
  background: rgba(45, 212, 191, 0.08) !important;
  color: var(--dark-accent-teal) !important;
}
body.dark .f-sidebar-item.active::before { background: linear-gradient(180deg, #0EA5E9, #10B981) !important; }
body.dark .f-sidebar-profile-name { color: var(--dark-text) !important; }
body.dark .f-sidebar-profile-user { color: var(--dark-text-sub) !important; }
body.dark .f-sidebar-footer { border-color: var(--dark-border) !important; }

/* Color dots */
body.dark .f-color-dot.active { border-color: var(--dark-text) !important; }

/* FAB */
body.dark .f-fab { box-shadow: 0 8px 28px rgba(16, 185, 129, 0.2) !important; }
body.dark #globalFab { box-shadow: 0 8px 28px rgba(16, 185, 129, 0.35) !important; }

/* Hero CTA */
body.dark .f-hero-cta {
  background: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Buttons */
body.dark .f-btn-secondary {
  background: var(--dark-card-glass) !important;
  border-color: var(--dark-card-border) !important;
  color: var(--dark-accent-teal) !important;
}
body.dark .f-btn-secondary:hover { background: rgba(45, 212, 191, 0.08) !important; }

/* Skeleton */
body.dark .f-skeleton {
  background: linear-gradient(90deg, rgba(20, 24, 32, 0.6), rgba(30, 41, 59, 0.4), rgba(20, 24, 32, 0.6)) !important;
}

/* Chart */
body.dark .f-chart-bar { background: linear-gradient(180deg, #2DD4BF, #10B981) !important; }
body.dark .f-chart-bar-label { color: var(--dark-text-sub) !important; }

/* AI Card action */
body.dark .f-ai-card-action {
  background: var(--dark-card) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-accent-teal) !important;
}

/* Input labels */
body.dark .f-input-group label { color: var(--dark-text-sub) !important; }

/* Wallet */

/* Settings header icons */

/* === تنظیمات اعلان‌ها - آیکون زرد (هر دو تم) === */
.f-notif-settings .f-settings-header-icon {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  color: white !important;
  border: none !important;
}
body.dark .f-notif-settings .f-settings-header-icon {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  color: white !important;
  border: none !important;
}
body.dark .f-notif-settings .f-settings-header-icon svg,
body.dark .f-notif-settings .f-settings-header-icon i {
  color: white !important;
  filter: brightness(0) invert(1) !important;
}

body.dark .f-settings-header-icon { border: 1px solid var(--dark-card-border) !important; }

/* Toggle */
body.dark .f-toggle-track { background: var(--dark-border) !important; }
body.dark .f-toggle input:checked + .f-toggle-track { background: var(--dark-accent-teal) !important; }

/* Scrollbar */
body.dark ::-webkit-scrollbar-thumb { background: rgba(45, 212, 191, 0.3); }
body.dark ::-webkit-scrollbar-thumb:hover { background: rgba(45, 212, 191, 0.5); }


/* === COMPREHENSIVE DARK TEXT FIX === */
body.dark p,
body.dark span,
body.dark div,
body.dark label,
body.dark td,
body.dark th,
body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6 {
  color: inherit;
}

/* Store name in settings card */
body.dark #settingsStoreName { color: var(--dark-text) !important; }
body.dark #settingsStoreUser { color: var(--dark-text-sub) !important; }
body.dark #settingsStoreAvatar { color: white !important; }

/* Sidebar profile */
body.dark .f-sidebar-profile-name { color: var(--dark-text) !important; }
body.dark .f-sidebar-profile-user { color: var(--dark-text-sub) !important; }

/* Header */
body.dark [style*="font-size:16px"][style*="font-weight:900"] { color: white !important; }
body.dark [style*="font-size:12px"][style*="font-weight:700"] { color: rgba(255,255,255,0.7) !important; }

/* All card text */
body.dark .glass-card-static p,
body.dark .f-settings-section p,
body.dark .f-order-card p,
body.dark .f-product-item p,
body.dark .f-action-card p,
body.dark .f-stat-card p { color: var(--dark-text) !important; }

/* Settings section titles and descriptions */
body.dark .f-settings-header-title { color: var(--dark-text) !important; }
body.dark .f-settings-header-desc { color: var(--dark-text-sub) !important; }

/* Input labels */
body.dark .f-input-group label { color: var(--dark-text-sub) !important; }

/* All generic text colors */
body.dark .text-gray-900,
body.dark .text-gray-800,
body.dark [class*="text-gray-9"],
body.dark [class*="text-gray-8"] { color: var(--dark-text) !important; }

body.dark .text-gray-500,
body.dark .text-gray-400,
body.dark .text-gray-600,
body.dark [class*="text-gray-4"],
body.dark [class*="text-gray-5"],
body.dark [class*="text-gray-6"] { color: var(--dark-text-sub) !important; }

/* Store link button */
body.dark a[href*="/"][target="_blank"] { color: var(--dark-accent-teal) !important; }

/* Arrow icons */
body.dark .f-settings-arrow { color: var(--dark-text-sub) !important; }

/* Modal */
body.dark .f-modal-title { color: var(--dark-text) !important; }
body.dark .f-modal-close { color: var(--dark-text-sub) !important; background: rgba(100,116,139,0.15) !important; }

/* Connection status text */
body.dark .f-connection-status span { color: var(--dark-text) !important; }

/* Button text in dark */
body.dark .f-btn-primary { color: white !important; }
body.dark .f-btn-secondary { color: var(--dark-accent-teal) !important; }
body.dark .f-btn-ghost { color: var(--dark-text-sub) !important; }
body.dark .f-btn-ghost:hover { color: var(--dark-text) !important; background: rgba(255,255,255,0.05) !important; }

/* Logout link */
body.dark a[style*="color:var(--f-red)"] { color: #F87171 !important; }


/* Divider */
body.dark .f-divider { background: var(--dark-border) !important; }

/* Toast */
body.dark .f-toast { background: var(--dark-card) !important; border: 1px solid var(--dark-card-border) !important; }
body.dark .f-toast.success { background: rgba(16, 185, 129, 0.9) !important; }
body.dark .f-toast.error { background: rgba(239, 68, 68, 0.9) !important; }

/* Overlay (modals, sidebar) */
body.dark .f-sidebar-overlay { background: rgba(0, 0, 0, 0.6) !important; }
body.dark .f-modal-overlay { background: rgba(0, 0, 0, 0.6) !important; }

/* Color picker */
body.dark .fcp-sheet { background: var(--dark-card) !important; border-color: var(--dark-border) !important; }
body.dark .fcp-header { border-color: var(--dark-border) !important; }
body.dark .fcp-tabs { background: var(--dark-input) !important; }
body.dark .fcp-tab.active { background: var(--dark-card) !important; color: var(--dark-accent-teal) !important; }
body.dark .fcp-input-row input { background: var(--dark-input) !important; color: var(--dark-text) !important; border-color: var(--dark-border) !important; }
body.dark .fcp-preview-row { background: var(--dark-input) !important; border-color: var(--dark-border) !important; }
body.dark .fcp-suggest-chip { background: var(--dark-input) !important; border-color: var(--dark-border) !important; color: var(--dark-text) !important; }
body.dark .fcp-footer { border-color: var(--dark-border) !important; }
body.dark .fcp-btn-secondary { background: var(--dark-input) !important; color: var(--dark-accent-teal) !important; }

/* === MOBILE RESPONSIVE FIXES === */
@media (max-width: 767px) {
  .f-header-right { display: none !important; }
  .f-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .f-quick-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .f-chart-grid { grid-template-columns: 1fr !important; }
  .f-hero { min-height: 220px !important; aspect-ratio: 2 / 1 !important; max-width: 100% !important; }
  .f-hero-title { font-size: 1.125rem !important; }
  .f-hero-subtitle { font-size: 0.8125rem !important; }
  .f-hero-content { padding: 16px !important; }
  .f-hero-cta { padding: 10px 20px !important; font-size: 12px !important; }
  .f-ai-card-text { font-size: 13px !important; }
  .f-ai-card { padding: 16px !important; max-width: 100% !important; overflow: hidden !important; }
  .f-section-title { font-size: 14px !important; }
  .f-fab { bottom: 80px !important; left: 16px !important; width: 50px !important; height: 50px !important; }
  .glass-card-static { overflow: hidden !important; }
  .f-settings-section { overflow: hidden !important; }
  .f-order-card { overflow: hidden !important; }
  .f-product-item { overflow: hidden !important; }
  .f-action-card { overflow: hidden !important; }
  .f-stat-card { overflow: hidden !important; }
}




/* === LOGIN DARK MODE FIX === */
body.dark .f-login { background: linear-gradient(160deg, #0B0E14 0%, #1A1C23 50%, #0B0E14 100%) !important; }
body.dark .f-login-card { background: rgba(26, 28, 35, 0.95) !important; border: 1px solid #2F3340 !important; }
body.dark .f-login-card h1 { color: white !important; }
body.dark .f-login-card p { color: var(--dark-text-sub) !important; }
body.dark .f-login-card h2 { color: var(--dark-text) !important; }
body.dark .f-login-card .text-gray-900 { color: var(--dark-text) !important; }
body.dark .f-login-card .text-gray-400 { color: var(--dark-text-sub) !important; }
body.dark .f-login h1,
body.dark .f-login .f-login-title,
body.dark .f-login-card h1 { color: white !important; }
body.dark .f-login p { color: var(--dark-text-sub) !important; }



/* === DESKTOP LAYOUT FIX (Podro-like) === */
@media (min-width: 1024px) {
  body {
    background: var(--f-gray-100) !important;
  }
  body.dark {
    background: #111318 !important;
  }
  .f-sidebar { transform: translateX(0); }
  .f-sidebar-overlay { display: none !important; }
  .f-menu-btn { display: none; }
  .f-bottom-nav { display: none; }
  .f-main { margin-right: var(--f-sidebar-width); }
  .f-content {
    padding: 0 4px !important;
    padding-bottom: var(--f-space-8) !important;
    overflow-x: hidden !important;
    max-width: none !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .f-fab { bottom: 32px; left: 32px; }
  .f-hero { overflow: hidden; max-height: 360px; }
  .f-settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .f-settings-grid .f-settings-section { margin-bottom: 0; }
}



/* === 30. RESPONSIVE === */
@media (min-width: 768px) {
  .f-content { padding: 0 var(--f-space-8); padding-bottom: var(--f-space-8); }
  .f-hero { aspect-ratio: 3 / 1; min-height: 280px; }
  .f-hero-title { font-size: var(--f-text-3xl); }
  .f-modal { border-radius: var(--f-radius-2xl); max-width: 480px; margin: auto; }
  .f-modal-overlay { align-items: center; padding: 20px; }
  .f-modal-header { border-radius: var(--f-radius-2xl) var(--f-radius-2xl) 0 0; }
  .f-grid-2 { gap: 16px; }
  .f-toast { top: 24px; }
}



@media (min-width: 1280px) {
  .f-content { padding-left: calc(var(--f-sidebar-width) + var(--f-space-10)); padding-right: var(--f-space-10); }
  .f-hero { min-height: 360px; }
}

/* === 31. ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.f-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
:focus-visible {
  outline: 2px solid var(--f-primary);
  outline-offset: 2px;
}

/* === 32. MISC UTILITIES === */
.f-divider { height: 1px; background: var(--f-gray-100); margin: var(--f-space-4) 0; }
.f-gradient-text {
  background: linear-gradient(135deg, var(--f-green-600), var(--f-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.f-glow { box-shadow: 0 0 20px rgba(20, 184, 92, 0.15); }
.f-blur-backdrop { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.f-overflow-hidden { overflow: hidden; }
.f-wallet-balance {
  background: url('/wallet1.webp') center/cover no-repeat;
  border-radius: var(--f-radius-2xl);
  padding: var(--f-space-8) var(--f-space-5);
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
  margin-bottom: var(--f-space-6);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.f-wallet-balance::before {
  content: '';
  position: absolute;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent);
  border-radius: 50%;
  top: -60px;
  right: -30px;
}
.f-wallet-balance::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent);
  border-radius: 50%;
  bottom: -40px;
  left: -20px;
}

/* Desktop: ارتفاع بیشتر تا تصویر کمتر بریده بشه */
@media (min-width: 768px) {
  .f-wallet-balance {
    min-height: 260px;
  }
}
@keyframes slideDown { from { transform: translateX(-50%) translateY(-20px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }

/* ========================================
   GLOBAL FAB - Fixed Position (outside views)
   ======================================== */
#globalFab {
  position: fixed;
  bottom: calc(var(--f-bottom-nav-height) + 20px);
  left: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--f-primary), var(--f-primary-hover));
  color: white;
  border: none;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(20, 184, 92, 0.35);
  z-index: 80;
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
}
#globalFab:hover { transform: scale(1.08); box-shadow: 0 12px 36px rgba(20, 184, 92, 0.4); }
#globalFab:active { transform: scale(0.95); }

/* ========================================
   PAGE LOADER - Professional Green Loading
   ======================================== */
.f-page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #f0faf4;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 1;
  visibility: visible;
}
.f-page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.f-page-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.f-page-loader-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(20, 184, 92, 0.15);
  border-top-color: #14b85c;
  border-radius: 50%;
  animation: loaderSpin 0.8s linear infinite;
}
@keyframes loaderSpin {
  to { transform: rotate(360deg); }
}
.f-page-loader-text {
  font-size: 18px;
  font-weight: 800;
  background: linear-gradient(135deg, #14532d, #16a34a, #22c55e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: loaderPulse 1.5s ease-in-out infinite;
}
@keyframes loaderPulse {
  0%, 100% { opacity: 0.6; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1); }
}

/* View transition loading overlay (smaller, faster) */
.f-view-loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #f0faf4;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
}
.f-view-loader.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.f-view-loader-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(20, 184, 92, 0.15);
  border-top-color: #14b85c;
  border-radius: 50%;
  animation: loaderSpin 0.7s linear infinite;
}

/* Dark mode loader */
body.dark .f-page-loader { background: #0a0c10; }
body.dark .f-page-loader-spinner { border-color: rgba(16, 185, 129, 0.15); border-top-color: #10b981; }
body.dark .f-page-loader-text { background: linear-gradient(135deg, #10b981, #34d399); -webkit-background-clip: text; background-clip: text; }
body.dark .f-view-loader { background: #0a0c10; }
body.dark .f-view-loader-spinner { border-color: rgba(16, 185, 129, 0.15); border-top-color: #10b981; }

/* Mobile responsive */
@media (max-width: 767px) {
  #globalFab { bottom: 80px !important; left: 16px !important; width: 50px !important; height: 50px !important; }
}
@media (min-width: 1024px) {
  #globalFab { bottom: 32px; left: 32px; }
}

/* Override old .f-fab styles to not affect global FAB */
.f-fab:not(#globalFab) { display: none !important; }

/* ========================================
   SUBSCRIPTION CARDS - Enhanced Styles
   ======================================== */
.f-sub-header {
  border-radius: 20px !important;
  transition: transform var(--f-duration) var(--f-ease);
}
.f-sub-header:active { transform: scale(0.98); }
#subscriptionPlans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.f-sub-plan-card {
  transition: transform var(--f-duration) var(--f-ease), box-shadow var(--f-duration) var(--f-ease);
  min-height: 200px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.f-sub-plan-card:active { transform: scale(0.98); }
.f-sub-plan-card .f-btn-primary {
  background: linear-gradient(135deg, var(--f-primary), var(--f-primary-hover)) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(20, 184, 92, 0.3);
}
.f-sub-plan-card .f-btn-primary:disabled {
  background: rgba(255,255,255,0.2) !important;
  box-shadow: none !important;
}
@media (min-width: 1024px) {
  #subscriptionPlans { grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; }
  .f-sub-plan-card { min-height: 380px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  #subscriptionPlans { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 767px) {
  .f-sub-header { padding: 24px 20px !important; }
}
/* ================================================================
   FANUS UI/UX UPGRADE PATCH — بخش اصلاحات حرفه‌ای
   ================================================================ */

/* === DARK MODE: Icon Backdrop System === */
/* داشبورد: 8 آیکون کارت آمار + دسترسی سریع */
body.dark .f-stat-icon,
body.dark .f-action-card .f-action-icon {
  background: rgba(255, 255, 255, 0.92) !important;
  border-radius: var(--f-radius-md);
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}



/* تنظیمات: آیکون‌های WebP کانتینر بالای هر بخش */
body.dark .f-settings-header-icon {
  background: rgba(255, 255, 255, 0.92) !important;
  border-radius: var(--f-radius-md);
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* === DARK MODE: Improve icon image visibility specifically === */
body.dark .f-stat-icon img,
body.dark .f-action-icon img,
body.dark .f-settings-header-icon img {
  filter: none !important;
  transform: scale(1.45) !important;
}

/* === SEARCH BAR ENHANCEMENT === */
.f-search {
  background: #FFFFFF !important;
  border: 1.5px solid var(--f-gray-200) !important;
  border-radius: var(--f-radius-lg) !important;
  padding: 14px 18px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  transition: all var(--f-duration) var(--f-ease) !important;
}
.f-search:focus-within {
  border-color: var(--f-primary) !important;
  box-shadow: 0 0 0 3px var(--f-primary-glow), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  background: #FFFFFF !important;
}
.f-search svg, .f-search i {
  color: var(--f-gray-500) !important;
  width: 20px !important;
  height: 20px !important;
}
.f-search input::placeholder {
  color: var(--f-gray-400) !important;
  font-weight: 500 !important;
}

/* Dark mode search */
body.dark .f-search {
  background: var(--dark-input) !important;
  border-color: var(--dark-border) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}
body.dark .f-search:focus-within {
  border-color: var(--dark-accent-teal) !important;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
body.dark .f-search input::placeholder {
  color: var(--dark-text-muted) !important;
}
body.dark .f-search svg,
body.dark .f-search i {
  color: var(--dark-accent-teal) !important;
}

/* === BOTTOM NAVIGATION SAFE AREA FIX === */
.f-bottom-nav {
  padding-bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
}
.f-bottom-nav-inner {
  padding: 8px 10px !important;
  margin-bottom: 4px !important;
}
.f-nav-item {
  padding: 8px 12px !important;
}
.f-nav-item.active::before {
  top: 4px !important;
  width: 20px !important;
  height: 3px !important;
}

/* === CUSTOMER DETAIL BOTTOM SHEET === */
.f-customer-sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 250;
  align-items: flex-end;
  justify-content: center;
  transition: background var(--f-duration) var(--f-ease);
}
.f-customer-sheet-overlay.active {
  display: flex;
}
.f-customer-sheet {
  background: white;
  border-radius: var(--f-radius-2xl) var(--f-radius-2xl) 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  animation: modalSlideUp 0.4s var(--f-ease);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12);
}
body.dark .f-customer-sheet {
  background: var(--dark-card) !important;
  border: 1px solid var(--dark-border);
}

/* Customer sheet header */
.f-cs-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--f-gray-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
  border-radius: var(--f-radius-2xl) var(--f-radius-2xl) 0 0;
}
body.dark .f-cs-header {
  background: var(--dark-card);
  border-color: var(--dark-border);
}
.f-cs-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #059669, #047857);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 900;
  font-size: 20px;
  flex-shrink: 0;
}
.f-cs-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--f-gray-900);
  margin-bottom: 2px;
}
body.dark .f-cs-name { color: var(--dark-text); }
.f-cs-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}
.f-cs-status.active {
  background: #dcfce7;
  color: #16a34a;
}
body.dark .f-cs-status.active {
  background: rgba(16, 185, 129, 0.12);
  color: #34D399;
}

/* Customer sheet sections */
.f-cs-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--f-gray-100);
}
body.dark .f-cs-section {
  border-color: var(--dark-border);
}
.f-cs-section:last-child {
  border-bottom: none;
}
.f-cs-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--f-gray-400);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
body.dark .f-cs-section-title { color: var(--dark-text-muted); }
.f-cs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}
.f-cs-row-label {
  font-size: 13px;
  color: var(--f-gray-500);
  font-weight: 500;
}
body.dark .f-cs-row-label { color: var(--dark-text-sub); }
.f-cs-row-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--f-gray-900);
  display: flex;
  align-items: center;
  gap: 6px;
}
body.dark .f-cs-row-value { color: var(--dark-text); }
.f-cs-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--f-green-50);
  color: var(--f-green-600);
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
  flex-shrink: 0;
}
.f-cs-copy-btn:active {
  transform: scale(0.9);
}
body.dark .f-cs-copy-btn {
  background: rgba(45, 212, 191, 0.1);
  color: var(--dark-accent-teal);
}
.f-cs-call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #dcfce7;
  color: #16a34a;
  cursor: pointer;
  transition: all var(--f-duration) var(--f-ease);
}
body.dark .f-cs-call-btn {
  background: rgba(16, 185, 129, 0.12);
  color: #34D399;
}
.f-cs-call-btn:active { transform: scale(0.9); }

/* Customer stat cards in sheet */
.f-cs-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.f-cs-stat-item {
  text-align: center;
  padding: 12px 8px;
  border-radius: var(--f-radius-md);
  background: var(--f-green-50);
}
body.dark .f-cs-stat-item {
  background: rgba(45, 212, 191, 0.06);
}
.f-cs-stat-value {
  font-size: 18px;
  font-weight: 900;
  color: var(--f-green-700);
}
body.dark .f-cs-stat-value { color: var(--dark-accent-teal); }
.f-cs-stat-label {
  font-size: 10px;
  color: var(--f-gray-400);
  margin-top: 2px;
}
body.dark .f-cs-stat-label { color: var(--dark-text-muted); }

/* === ORDER DETAIL MODAL IMPROVEMENTS === */
.f-order-detail-section {
  background: var(--f-gray-50);
  border-radius: var(--f-radius-md);
  padding: 16px;
  border: 1px solid var(--f-gray-100);
}
body.dark .f-order-detail-section {
  background: rgba(45, 212, 191, 0.04) !important;
  border-color: var(--dark-border) !important;
}
.f-order-detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border: 1px solid var(--f-gray-100);
  border-radius: var(--f-radius-md);
  padding: 12px;
}
body.dark .f-order-detail-item {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
}

/* === TYPOGRAPHY HIERARCHY IMPROVEMENTS === */
/* Order number weight */
body.dark .f-order-header span[style*="font-weight:700"],
body.dark .f-order-header span[style*="font-weight:800"] {
  color: var(--dark-text) !important;
}

/* === GENERAL DARK MODE FIXES FOR NEW COMPONENTS === */
body.dark .f-customer-sheet-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
}
body.dark .f-modal-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
}

/* Toast improvements */
.f-toast {
  border-radius: 16px !important;
  font-size: 13px !important;
  padding: 12px 20px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}

/* === MOBILE RESPONSIVE: Customer Sheet === */
@media (min-width: 520px) {
  .f-customer-sheet-overlay {
    align-items: center;
    padding: 16px;
  }
  .f-customer-sheet {
    border-radius: var(--f-radius-2xl);
    max-height: 80vh;
  }
}


/* ================================================================
   DARK MODE: COMPREHENSIVE TEXT COLOR FIX (Round 2)
   ================================================================ */

/* Override all inline var(--f-gray-900) in dark mode */
body.dark [style*="var(--f-gray-900)"] {
  color: var(--dark-text) !important;
}
body.dark [style*="var(--f-gray-800)"] {
  color: var(--dark-text) !important;
}

/* Override all inline var(--f-gray-700) in dark mode */
body.dark [style*="var(--f-gray-700)"] {
  color: var(--dark-text) !important;
}

/* Override all inline var(--f-green-700) in dark mode */
body.dark [style*="var(--f-green-700)"] {
  color: #34D399 !important;
}

/* Override all inline var(--f-green-600) in dark mode */
body.dark [style*="var(--f-green-600)"] {
  color: #4ADE80 !important;
}

/* Section titles in dark mode */
body.dark .f-section-title {
  color: var(--dark-text) !important;
}
body.dark .f-section-title svg,
body.dark .f-section-title i {
  color: #4ADE80 !important;
}

/* Subscription header text */
body.dark #currentPlanCard p {
  color: white !important;
}
body.dark #currentPlanName {
  color: white !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
}
body.dark #currentPlanExpiry {
  color: rgba(255,255,255,0.85) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4) !important;
}

/* Subscription "انتخاب پلن اشتراک" title */
body.dark #view-subscription h3 {
  color: var(--dark-text) !important;
}

/* Dashboard stat values and labels */
body.dark .f-stat-value {
  color: var(--dark-text) !important;
}
body.dark .f-stat-label {
  color: var(--dark-text-sub) !important;
}

/* Quick access cards */
body.dark .f-action-card .f-action-title {
  color: var(--dark-text) !important;
}

/* Order cards in dark */
body.dark .f-order-card p {
  color: var(--dark-text) !important;
}

/* Product items in dark */
body.dark .f-product-item p {
  color: var(--dark-text) !important;
}

/* Settings labels */
body.dark .f-input-group label {
  color: var(--dark-text-sub) !important;
}

/* All inline font-weight:800/900 text in dark mode */
body.dark [style*="font-weight:800"] {
  color: var(--dark-text) !important;
}
body.dark [style*="font-weight:900"] {
  color: var(--dark-text) !important;
}

/* Chart labels */
body.dark .f-chart-bar-label {
  color: var(--dark-text-sub) !important;
}

/* Order detail sections in dark mode */
body.dark .f-order-detail-section {
  background: rgba(45, 212, 191, 0.04) !important;
  border-color: var(--dark-border) !important;
}

/* Customer search input dark */
body.dark #customerSearch {
  background: var(--dark-input) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}

/* Subscription plan cards dark text */
body.dark .f-sub-plan-card {
  color: white !important;
}

/* Dark mode page loader text */
body.dark .f-page-loader {
  background: #0a0c10 !important;
}

/* Dark mode bottom nav safe area fix - ensure enough bottom padding */
.f-bottom-nav {
  padding-bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
}
.f-bottom-nav-inner {
  padding: 8px 8px !important;
}

/* Dark mode: stat cards should have no visible border clash */
body.dark .f-stat-card {
  border: 1px solid var(--dark-card-border) !important;
}


/* ================================================================
   ROUND 3 FIXES — Precise targeted dark mode fixes
   ================================================================ */

/* 1. Order detail address card in dark mode */
body.dark .f-order-detail-section[style*="f-green-50"],
body.dark .f-order-detail-section:last-child {
  background: rgba(16, 185, 129, 0.06) !important;
  border-color: var(--dark-border) !important;
}

/* Address card inside order detail - make it dark readable */
body.dark #orderDetailBody [style*="f-green-50"] {
  background: rgba(16, 185, 129, 0.06) !important;
}
body.dark #orderDetailBody [style*="f-green-50"] p {
  color: var(--dark-text) !important;
}
body.dark #orderDetailBody [style*="f-green-50"] [style*="f-gray-500"] {
  color: var(--dark-text-sub) !important;
}

/* Generic address block inside order detail */
body.dark #orderDetailBody [style*="background:var(--f-green-50)"] {
  background: rgba(16, 185, 129, 0.06) !important;
}
body.dark #orderDetailBody [style*="background:var(--f-green-50)"] p {
  color: var(--dark-text) !important;
}

/* 2. فاکتورساز هوشمند icon - keep blue in dark mode */
body.dark .f-settings-section:last-of-type .f-settings-header-icon {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  color: white !important;
}
body.dark .f-settings-section:last-of-type .f-settings-header-icon * {
  color: white !important;
}

/* 3. Sidebar "دستیار بومین" - white text in dark mode */
body.dark .f-sidebar-footer [style*="linear-gradient(135deg,#059669,#047857)"] {
  color: white !important;
}
body.dark .f-sidebar-footer [style*="linear-gradient(135deg,#059669,#047857)"] span {
  color: white !important;
}
body.dark .f-sidebar-footer [style*="linear-gradient(135deg,#059669,#047857)"] i,
body.dark .f-sidebar-footer [style*="linear-gradient(135deg,#059669,#047857)"] svg {
  color: white !important;
}

/* Also target by the sparkles icon context */
body.dark .f-sidebar-item[style*="linear-gradient"] {
  color: white !important;
}
body.dark .f-sidebar-item[style*="linear-gradient"] span {
  color: white !important;
}
body.dark .f-sidebar-item[style*="linear-gradient"] i,
body.dark .f-sidebar-item[style*="linear-gradient"] svg {
  color: white !important;
}


/* === ORDER DETAIL DARK MODE INLINE STYLE FIXES === */
/* Override inline green-50 backgrounds inside order detail */
body.dark #orderDetailBody > div > div[style*="green-50"],
body.dark #orderDetailBody div[style*="green-50"] {
  background: rgba(16, 185, 129, 0.06) !important;
  border: 1px solid rgba(16, 185, 129, 0.12) !important;
}

/* All text inside green-50 boxes in dark mode */
body.dark #orderDetailBody div[style*="green-50"] p,
body.dark #orderDetailBody div[style*="green-50"] span {
  color: var(--dark-text) !important;
}

/* Gray-50 background sections in dark mode */
body.dark #orderDetailBody div[style*="gray-50"],
body.dark #orderDetailBody > div > div[style*="gray-50"] {
  background: rgba(30, 41, 59, 0.5) !important;
}

body.dark #orderDetailBody div[style*="gray-50"] p,
body.dark #orderDetailBody div[style*="gray-50"] span {
  color: var(--dark-text-sub) !important;
}

/* White background items in dark mode */
body.dark #orderDetailBody div[style*="background:white"] {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
}
body.dark #orderDetailBody div[style*="background:white"] p {
  color: var(--dark-text) !important;
}

/* Address text specifically */
body.dark #orderDetailBody [style*="f-green-700"] {
  color: #34D399 !important;
}
body.dark #orderDetailBody [style*="f-gray-900"] {
  color: var(--dark-text) !important;
}
body.dark #orderDetailBody [style*="f-gray-700"] {
  color: var(--dark-text) !important;
}
body.dark #orderDetailBody [style*="f-gray-500"] {
  color: var(--dark-text-sub) !important;
}
body.dark #orderDetailBody [style*="f-gray-400"] {
  color: var(--dark-text-muted) !important;
}

/* Last orders card on dashboard - dark mode */
body.dark #recentOrders .f-order-card {
  background: var(--dark-card-glass) !important;
  border-color: var(--dark-card-border) !important;
}
body.dark #recentOrders .f-order-card p {
  color: var(--dark-text) !important;
}
body.dark #recentOrders .f-order-card span {
  color: var(--dark-text-sub) !important;
}
body.dark #recentOrders .f-badge-green {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #34D399 !important;
}
body.dark #recentOrders .f-badge-red {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #F87171 !important;
}
body.dark #recentOrders .f-badge-amber {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #FBBF24 !important;
}
body.dark #recentOrders .f-badge-blue {
  background: rgba(59, 130, 246, 0.12) !important;
  color: #60A5FA !important;
}
body.dark #recentOrders .f-badge-gray {
  background: rgba(100, 116, 139, 0.12) !important;
  color: var(--dark-text-sub) !important;
}

/* Price text green in dark */
body.dark #recentOrders [style*="f-green-700"] {
  color: #34D399 !important;
}


/* ================================================================
   ROUND 4 FIXES
   ================================================================ */

/* 1. Hide scrollbar in order detail modal (keep scrollable) */
.f-modal::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.f-modal { -ms-overflow-style: none !important; scrollbar-width: none !important; }

/* 2. OTP Method Modal dark mode - icons & cards */
body.dark #otpMethodModal .f-modal {
  background: var(--dark-card) !important;
  border: 1px solid var(--dark-card-border) !important;
}
body.dark #otpMethodModal .f-modal-header {
  background: var(--dark-card) !important;
  border-color: var(--dark-border) !important;
}
body.dark #otpMethodModal .f-modal-title {
  color: var(--dark-text) !important;
}
body.dark #otpMethodModal .f-modal-close {
  background: rgba(100, 116, 139, 0.15) !important;
  color: var(--dark-text-sub) !important;
}
body.dark #otpMethodModal .f-action-card {
  background: var(--dark-card-glass) !important;
  border-color: var(--dark-card-border) !important;
}
body.dark #otpMethodModal .f-action-title {
  color: var(--dark-text) !important;
}
body.dark #otpMethodModal .f-action-desc {
  color: var(--dark-text-sub) !important;
}
/* Fix OTP method icon containers - keep colored backgrounds, remove white */
body.dark #otpMethodModal .f-action-icon {
  background: transparent !important;
}
body.dark #otpMethodModal .f-action-icon[style*="gradient(135deg,var(--f-green-400),var(--f-green-600))"] {
  background: linear-gradient(135deg, #059669, #047857) !important;
}
body.dark #otpMethodModal .f-action-icon[style*="gradient(135deg,var(--f-blue),#1d4ed8)"] {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
}

/* 3. فاکتورساز هوشمند - keep blue bg in dark mode */
/* Target by the last settings section's icon specifically */
body.dark .f-settings-section:nth-last-of-type(2) .f-settings-header-icon {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  color: white !important;
  border: none !important;
}
body.dark .f-settings-section:nth-last-of-type(2) .f-settings-header-icon svg,
body.dark .f-settings-section:nth-last-of-type(2) .f-settings-header-icon i,
body.dark .f-settings-section:nth-last-of-type(2) .f-settings-header-icon img {
  color: white !important;
  filter: brightness(0) invert(1) !important;
}

/* Also target by text content match */
body.dark .f-settings-header:has(.f-settings-header-title) .f-settings-header-icon {
  border: 1px solid var(--dark-card-border) !important;
}
/* Override for فاکتورساز specifically - it's the one with blue gradient inline */
body.dark [style*="linear-gradient(135deg,#3b82f6,#1d4ed8)"] {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
}

/* 4. Profile avatar initials - two letters in green bubble */
.settings-avatar-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  color: white;
  background: linear-gradient(135deg, var(--f-green-500), var(--f-green-700));
  border-radius: inherit;
}


/* فاکتورساز icon - always keep blue gradient */
body.dark .f-icon-factor {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}
body.dark .f-icon-factor svg,
body.dark .f-icon-factor i {
  color: white !important;
}

/* Also ensure telegram icon keeps its blue */
body.dark .f-settings-header-icon[style*="gradient(135deg,#3b82f6"] {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
}


/* OTP Method Modal - fix icon backgrounds in dark mode */
body.dark #otpMethodModal .f-action-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* SMS icon - green gradient */
body.dark #otpMethodModal .f-action-icon[style*="gradient(135deg,var(--f-green-400),var(--f-green-600))"] {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
}
/* Bale icon - blue gradient */
body.dark #otpMethodModal .f-action-icon[style*="gradient(135deg,var(--f-blue),#1d4ed8)"] {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
}
/* Icon colors inside OTP modal */
body.dark #otpMethodModal .f-action-icon svg,
body.dark #otpMethodModal .f-action-icon i {
  color: white !important;
}

/* Settings "تنظیمات" icon - keep green gear in dark mode */
body.dark .f-settings-section:first-of-type .f-settings-header-icon {
  background: transparent !important;
  border: 1px solid var(--dark-card-border) !important;
}
body.dark .f-settings-section:first-of-type .f-settings-header-icon svg,
body.dark .f-settings-section:first-of-type .f-settings-header-icon i {
  color: var(--dark-accent-teal) !important;
}
body.dark .f-settings-section:first-of-type .f-settings-header-icon img {
  filter: none !important;
}

/* === Chart Tabs & Range Buttons === */
.f-chart-tab {
  padding: 5px 14px;
  border-radius: 8px;
  border: none;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s var(--f-ease);
  background: transparent;
  color: var(--f-gray-400);
  font-family: inherit;
}
.f-chart-tab.active {
  background: var(--f-primary, #10b981);
  color: white;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.f-chart-tab:hover:not(.active) {
  color: var(--f-gray-600);
  background: rgba(0,0,0,0.04);
}

.f-range-btn {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--f-gray-200);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  color: var(--f-gray-400);
  font-family: inherit;
}
.f-range-btn.active {
  background: var(--f-primary, #10b981);
  color: white;
  border-color: var(--f-primary, #10b981);
}
.f-range-btn:hover:not(.active) {
  border-color: var(--f-gray-300);
  color: var(--f-gray-600);
}

/* === Chart Enhanced === */
.f-chart-bar-wrap {
  height: 140px;
  gap: 4px;
}
.f-chart-bar-item {
  gap: 4px;
}
.f-chart-bar {
  border-radius: 6px 6px 2px 2px;
  position: relative;
  transition: height 0.5s var(--f-ease), background 0.3s;
}
.f-chart-bar-item:hover .f-chart-bar {
  opacity: 0.85;
  transform: scaleY(1.02);
  transform-origin: bottom;
}
.f-chart-bar-value {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  color: var(--f-primary, #10b981);
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.f-chart-bar-item:hover .f-chart-bar-value {
  opacity: 1;
}

/* Dark mode */
/* === Chart Tabs Container (Light/Dark) === */
.f-chart-tabs-container { background: var(--f-gray-100); }
body.dark .f-chart-tabs-container { background: rgba(0,0,0,0.3) !important; }

body.dark .f-chart-tab { color: var(--dark-text-sub); }
body.dark .f-chart-tab.active { background: #10b981; color: white; }
body.dark .f-range-btn { border-color: rgba(255,255,255,0.1); color: var(--dark-text-sub); }
body.dark .f-range-btn.active { background: #10b981; border-color: #10b981; color: white; }
body.dark .f-chart-bar-value { color: #34d399; }


/* === Enhanced Chart - Three State Bars === */

/* --- Actual Data Bar --- */
.f-chart-bar-actual {
  box-shadow: none;
  transition: height 0.5s var(--f-ease), background 0.3s;
}
.f-chart-bar-today {
  box-shadow: 0 6px 18px rgba(34, 197, 94, 0.15) !important;
}
.f-chart-bar-today-empty {
  background: linear-gradient(180deg, var(--f-gray-200), var(--f-gray-100)) !important;
  opacity: 0.3;
  border: none !important;
}

/* --- Zero Visits Bar (Horizontal Line) --- */
.f-chart-bar-empty {
  width: 100%;
  height: 2px !important;
  min-height: 2px !important;
  max-height: 2px !important;
  background: var(--f-gray-300) !important;
  border-radius: 1px;
  opacity: 0.4;
  flex-shrink: 0;
}

/* --- Prediction Bar (Dashed) --- */
.f-chart-bar-predict {
  background: transparent !important;
  border: 1.5px dashed var(--f-gray-300) !important;
  border-radius: 6px 6px 2px 2px !important;
  opacity: 0.6;
  transition: height 0.5s var(--f-ease);
}
.f-chart-bar-predict:hover {
  opacity: 0.8;
  border-color: var(--f-gray-400) !important;
}

/* --- Today Badge --- */
.f-chart-today-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 700;
  color: var(--f-primary, #10b981);
  background: white;
  border: 1px solid var(--f-primary, #10b981);
  border-radius: 50px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.12);
  position: relative;
  z-index: 2;
  margin-bottom: 4px;
  animation: badgePopIn 0.3s ease-out both;
}

/* --- Today Bar Wrapper (extra glow) --- */
.f-chart-bar-today-wrap {
  position: relative;
}
.f-chart-bar-today-wrap::after {
  content: '';
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(16, 185, 129, 0.08), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* --- Legend --- */
.f-chart-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
  padding-top: 6px;
  direction: rtl;
}
.f-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  color: var(--f-gray-400);
  font-weight: 500;
}
.f-chart-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}
.f-chart-legend-actual {
  background: var(--f-primary, #10b981);
  border-radius: 50%;
}
.f-chart-legend-empty {
  background: var(--f-gray-300);
  border-radius: 1px;
  height: 2px;
  width: 10px;
  opacity: 0.5;
}
.f-chart-legend-predict {
  background: transparent;
  border: 1.5px dashed var(--f-gray-300);
  border-radius: 2px;
  width: 8px;
  height: 8px;
}

/* --- Animations --- */
@keyframes chartBarGrow {
  from {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: bottom;
  }
  to {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: bottom;
  }
}

@keyframes chartBarFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes chartBarPredict {
  from {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: bottom;
  }
  to {
    opacity: 0.6;
    transform: scaleY(1);
    transform-origin: bottom;
  }
}

@keyframes badgePopIn {
  from {
    opacity: 0;
    transform: scale(0.7) translateY(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* --- Dark Mode Support --- */
body.dark .f-chart-bar-empty {
  background: rgba(255,255,255,0.15) !important;
}
body.dark .f-chart-bar-predict {
  border-color: rgba(255,255,255,0.2) !important;
}
body.dark .f-chart-bar-predict:hover {
  border-color: rgba(255,255,255,0.35) !important;
}
body.dark .f-chart-today-badge {
  background: rgba(0,0,0,0.6);
  color: #34d399;
  border-color: #34d399;
}
body.dark .f-chart-legend-item {
  color: rgba(255,255,255,0.4);
}
body.dark .f-chart-legend-actual {
  background: #34d399;
}
body.dark .f-chart-legend-empty {
  background: rgba(255,255,255,0.2);
}
body.dark .f-chart-legend-predict {
  border-color: rgba(255,255,255,0.2);
}



/* --- Month Group Labels (30-day chart) --- */
.f-chart-month-groups {
  display: flex;
  direction: rtl;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--f-gray-100);
}
.f-chart-month-group {
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--f-gray-400);
  letter-spacing: -0.2px;
  padding: 2px 0;
}
body.dark .f-chart-month-group {
  color: rgba(255,255,255,0.35);
}

/* === Notification Chips === */
.f-notif-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--f-gray-200);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  color: var(--f-gray-400);
  font-family: inherit;
}
.f-notif-chip.active {
  border-color: var(--f-primary, #10b981);
  background: rgba(16, 185, 129, 0.08);
  color: var(--f-primary, #10b981);
}
.f-notif-chip:hover:not(.active) {
  border-color: var(--f-gray-300);
  color: var(--f-gray-600);
}

/* === Toggle Switch === */
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.f-toggle input:checked + .f-toggle-slider {
  background-color: var(--f-primary, #10b981);
}
.f-toggle input:checked + .f-toggle-slider:before {
  transform: translateX(18px);
}

/* Dark mode */
body.dark .f-notif-chip { border-color: rgba(255,255,255,0.1); color: var(--dark-text-sub); }
body.dark .f-notif-chip.active { border-color: #10b981; background: rgba(16,185,129,0.15); color: #34d399; }
body.dark .f-toggle-slider { background-color: rgba(255,255,255,0.15); }

/* === Custom Status Dropdown === */
.f-status-dropdown-menu { display: none; }
.f-status-dropdown-menu.open {
  display: block;
  animation: ddSlideIn 0.2s ease;
}
@keyframes ddSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.f-status-opt:hover:not(.f-disabled) {
  background: var(--f-gray-50) !important;
}
body.dark .f-status-dropdown-menu {
  background: var(--dark-card) !important;
  border-color: var(--dark-border) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.4) !important;
}

/* === Custom Status Dropdown === */
.f-status-dropdown-menu { display: none; }
.f-status-dropdown-menu.open {
  display: block;
  animation: ddSlideIn 0.2s ease;
}
@keyframes ddSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.f-status-opt:hover:not(.f-disabled) {
  background: var(--f-gray-50) !important;
}
/* Dark mode */
body.dark .f-status-dropdown-menu {
  background: var(--dark-card) !important;
  border-color: var(--dark-border) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.4) !important;
}
body.dark .f-status-opt:hover:not(.f-disabled) {
  background: rgba(255,255,255,0.05) !important;
}
body.dark #statusDDBtn {
  background: rgba(255,255,255,0.06) !important;
}
/* RTL fix for dropdown button */
[dir="rtl"] #statusDDBtn svg {
  transform: scaleX(-1);
}

/* === Stepper Action Button === */
.f-action-stepper-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(16,185,129,0.4) !important;
}
.f-action-stepper-btn:active {
  transform: scale(0.98) !important;
}
.f-three-dot-menu:hover {
  background: var(--f-gray-50) !important;
}
/* Dark mode */
body.dark .f-three-dot-menu {
  background: var(--dark-card) !important;
  border-color: var(--dark-border) !important;
}
body.dark .f-order-detail-section .f-order-row span {
  color: var(--dark-text) !important;
}

/* === Dark Mode: Shipping Modal === */
body.dark .f-ship-prov {
  background: var(--dark-card) !important;
  border-color: var(--dark-border) !important;
}
body.dark .f-ship-prov span {
  color: var(--dark-text) !important;
}
body.dark #shipTrackIn {
  background: var(--dark-input) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-border) !important;
}
body.dark #shipRecArea {
  border-color: var(--dark-border) !important;
}
body.dark .f-modal {
  background: var(--dark-card) !important;
}
body.dark .f-modal h3,
body.dark .f-modal p {
  color: var(--dark-text) !important;
}
body.dark .f-sh-cancel {
  color: var(--dark-text-sub) !important;
}
body.dark .f-sh-close {
  background: var(--dark-border) !important;
}