/* ============================================================
   فراز — تم اختصاصی و طراحي‌سامانه فارسی
   نسخه: ۱.۰ — فقط صفحه index.html از این تم استفاده می‌کند
   ============================================================ */

/* ---------- توکن‌های طراحی ---------- */
:root {
  --fz-bg: #f2f6f4;
  --fz-bg-deep: #e9f1ee;
  --fz-surface: #ffffff;
  --fz-surface-2: #f6faf8;
  --fz-border: #e3ebe7;
  --fz-border-strong: #cfddd7;

  --fz-text: #22312e;
  --fz-text-soft: #5c6e69;
  --fz-text-faint: #8fa19b;

  --fz-brand-50: #eefaf7;
  --fz-brand-100: #d6f3ec;
  --fz-brand-200: #abe6da;
  --fz-brand-300: #79d3c3;
  --fz-brand-400: #4bbcac;
  --fz-brand-500: #2ba191;
  --fz-brand-600: #208376;
  --fz-brand-700: #1e6a61;
  --fz-brand-800: #1c5650;
  --fz-brand-900: #194741;
  --fz-brand-950: #0a2b28;

  --fz-accent: #e3a93d;
  --fz-accent-soft: #fcf3dd;
  --fz-accent-ink: #9a6a10;

  --fz-success: #1f9d6b;
  --fz-danger: #e0525a;
  --fz-info: #3a86c4;

  --fz-radius: 1.125rem;
  --fz-radius-lg: 1.375rem;
  --fz-radius-xl: 1.75rem;

  --fz-shadow-sm: 0 1px 2px rgba(20, 40, 36, 0.05);
  --fz-shadow: 0 1px 2px rgba(20, 40, 36, 0.04), 0 18px 44px -18px rgba(28, 86, 80, 0.16);
  --fz-shadow-lg: 0 2px 4px rgba(20, 40, 36, 0.05), 0 26px 56px -22px rgba(28, 86, 80, 0.28);

  --fz-sidebar-bg: #ffffff;
  --fz-sidebar-fg: #52635e;
  --fz-sidebar-head: #8fa19b;
  --fz-header-bg: #f8fbfa;

  color-scheme: light;
}

html.dark {
  --fz-bg: #0c1417;
  --fz-bg-deep: #0a1113;
  --fz-surface: #131e22;
  --fz-surface-2: #16242a;
  --fz-border: #223038;
  --fz-border-strong: #31434d;

  --fz-text: #e8f1ee;
  --fz-text-soft: #9db0aa;
  --fz-text-faint: #5f7670;

  --fz-brand-400: #4bbcac;
  --fz-brand-500: #39b09f;
  --fz-brand-600: #3fbdab;
  --fz-brand-700: #2ba191;
  --fz-brand-800: #1e6a61;

  --fz-accent-soft: #33291a;
  --fz-accent-ink: #e3a93d;

  --fz-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --fz-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 20px 44px -20px rgba(0, 0, 0, 0.55);
  --fz-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.25), 0 28px 60px -24px rgba(0, 0, 0, 0.65);

  --fz-sidebar-bg: #0f191d;
  --fz-sidebar-fg: #86a099;
  --fz-sidebar-head: #5f7670;
  --fz-header-bg: #0e1619;

  color-scheme: dark;
}

/* ---------- پایه ---------- */
html {
  font-family: 'Vazirmatn', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
}

body {
  background: var(--fz-bg);
  color: var(--fz-text-soft);
  font-family: 'Vazirmatn', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
}

::selection {
  background: #a7e3d8;
  color: var(--fz-brand-950);
}

html.dark ::selection {
  background: var(--fz-brand-700);
  color: #eafaf6;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--fz-border-strong);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

html.dark ::-webkit-scrollbar-thumb {
  background-color: #2a3a42;
}

:focus-visible {
  outline: 2px solid rgba(43, 161, 145, 0.6);
  outline-offset: 2px;
}

/* ---------- شماره‌ها ---------- */
.fz-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ---------- سایدبار ---------- */
#sidebar {
  background: var(--fz-sidebar-bg);
  border-inline-end: 1px solid var(--fz-border);
  transition: width .2s ease-in-out;
}

#sidebar h3 {
  color: var(--fz-sidebar-head);
  letter-spacing: 0;
}

.fz-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.fz-brand-name {
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--fz-text);
  line-height: 1;
}

.fz-brand-tag {
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.2rem 0.45rem;
  border-radius: 9999px;
  background: var(--fz-brand-100);
  color: var(--fz-brand-700);
}

html.dark .fz-brand-tag {
  background: rgba(43, 161, 145, 0.18);
  color: #5fd6c3;
}

/* آیتم‌های ناوبری */
.fz-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-radius: 0.9rem;
  padding: 0.5rem 0.75rem;
  color: var(--fz-sidebar-fg);
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.fz-nav-link:hover {
  background: rgba(43, 161, 145, 0.08);
  color: var(--fz-text);
}

html.dark .fz-nav-link:hover {
  background: rgba(43, 161, 145, 0.14);
}

.fz-nav-link .fz-nav-icon {
  color: var(--fz-sidebar-fg);
  opacity: 0.85;
}

.fz-nav-open > .fz-nav-link,
.fz-nav-link.fz-active {
  background: linear-gradient(135deg, var(--fz-brand-500), var(--fz-brand-700));
  color: #ffffff;
  box-shadow: 0 12px 26px -12px rgba(43, 161, 145, 0.75);
}

.fz-nav-open > .fz-nav-link:hover,
.fz-nav-link.fz-active:hover {
  color: #ffffff;
}

.fz-nav-open > .fz-nav-link .fz-nav-icon,
.fz-nav-link.fz-active .fz-nav-icon {
  color: #ffffff;
  opacity: 0.95;
}

.fz-nav-sub a {
  display: block;
  color: var(--fz-sidebar-fg);
  border-radius: 0.65rem;
  padding: 0.3rem 0.5rem;
  transition: color .15s ease, background-color .15s ease;
}

.fz-nav-sub a:hover {
  color: var(--fz-brand-700);
  background: rgba(43, 161, 145, 0.07);
}

html.dark .fz-nav-sub a:hover {
  color: var(--fz-brand-400);
}

.fz-nav-sub a.fz-active {
  color: var(--fz-brand-700);
  font-weight: 600;
}

html.dark .fz-nav-sub a.fz-active {
  color: var(--fz-brand-400);
}

/* کارت تبلیغی پایین سایدبار */
.fz-promo {
  position: relative;
  overflow: hidden;
  border-radius: 1.125rem;
  padding: 1.1rem;
  color: #ffffff;
  background: linear-gradient(135deg, #14463f 0%, #1e6a61 55%, #2ba191 130%);
  box-shadow: 0 16px 34px -18px rgba(14, 46, 42, 0.55);
}

.fz-promo::after {
  content: "";
  position: absolute;
  inset-inline-end: -34px;
  top: -38px;
  width: 120px;
  height: 120px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(227, 169, 61, 0.5), transparent 65%);
  pointer-events: none;
}

.fz-promo-title {
  font-weight: 800;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}

.fz-promo-text {
  font-size: 0.75rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 0.8rem;
}

/* ---------- هدر ---------- */
.fz-header {
  background: var(--fz-header-bg);
  border-bottom: 1px solid var(--fz-border);
}

.fz-crumb {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fz-text-faint);
}

.fz-crumb-current {
  color: var(--fz-text);
  font-weight: 700;
}

.fz-icon-btn {
  width: 2.35rem;
  height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.8rem;
  border: 1px solid var(--fz-border);
  background: var(--fz-surface-2);
  color: var(--fz-text-soft);
  transition: all .15s ease;
  flex-shrink: 0;
}

.fz-icon-btn:hover {
  color: var(--fz-brand-700);
  border-color: var(--fz-brand-300);
  background: var(--fz-surface);
  transform: translateY(-1px);
  box-shadow: var(--fz-shadow-sm);
}

html.dark .fz-icon-btn:hover {
  color: var(--fz-brand-400);
}

.fz-dot-online {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  background: #22c55e;
  box-shadow: 0 0 0 2px var(--fz-surface);
}

.fz-search-pill {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 16rem;
  height: 2.35rem;
  padding: 0 0.85rem;
  border-radius: 0.8rem;
  border: 1px solid var(--fz-border);
  background: var(--fz-surface-2);
  color: var(--fz-text-faint);
  font-size: 0.8rem;
  transition: all .15s ease;
  text-align: right;
}

.fz-search-pill:hover {
  border-color: var(--fz-brand-300);
  background: var(--fz-surface);
  color: var(--fz-text-soft);
}

html.dark .fz-search-pill {
  background: var(--fz-surface);
}

/* ---------- کارت‌ها ---------- */
.fz-card {
  background: var(--fz-surface);
  border: 1px solid var(--fz-border);
  border-radius: var(--fz-radius);
  box-shadow: var(--fz-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.fz-card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--fz-shadow-lg);
  border-color: var(--fz-border-strong);
}

.fz-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.15rem 1.3rem;
  border-bottom: 1px solid var(--fz-border);
}

.fz-card-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--fz-text);
}

.fz-card-title::before {
  content: "";
  width: 0.375rem;
  height: 1.125rem;
  border-radius: 9999px;
  background: linear-gradient(180deg, var(--fz-brand-400), var(--fz-brand-700));
  flex-shrink: 0;
}

.fz-card-sub {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fz-text-faint);
  margin-top: 0.3rem;
}

.fz-menu-btn {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.65rem;
  color: var(--fz-text-faint);
  transition: all .15s ease;
}

.fz-menu-btn:hover,
.fz-menu-btn[aria-expanded="true"] {
  background: var(--fz-brand-100);
  color: var(--fz-brand-700);
}

html.dark .fz-menu-btn:hover,
html.dark .fz-menu-btn[aria-expanded="true"] {
  background: rgba(43, 161, 145, 0.16);
  color: var(--fz-brand-400);
}

/* چیپ آیکون */
.fz-chip {
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fz-chip svg {
  width: 1.35rem;
  height: 1.35rem;
}

/* چیپ متنی — برای برچسب‌های کوتاه که در داخل باکس چیپ قرار می‌گیرند */
.fz-chip-text {
  width: auto;
  height: auto;
  min-height: 1.9rem;
  padding: 0.25rem 0.7rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  gap: 0.3rem;
}

.fz-chip-text svg {
  width: 0.9rem;
  height: 0.9rem;
}

.fz-chip-teal {
  background: var(--fz-brand-100);
  color: var(--fz-brand-700);
}

html.dark .fz-chip-teal {
  background: rgba(43, 161, 145, 0.18);
  color: var(--fz-brand-400);
}

.fz-chip-amber {
  background: var(--fz-accent-soft);
  color: var(--fz-accent-ink);
}

html.dark .fz-chip-amber {
  background: rgba(227, 169, 61, 0.18);
  color: var(--fz-accent-ink);
}

.fz-chip-emerald {
  background: #e4f6ed;
  color: var(--fz-success);
}

html.dark .fz-chip-emerald {
  background: rgba(31, 157, 107, 0.18);
  color: #4dd4a0;
}

.fz-chip-rose {
  background: #fdecee;
  color: #d64550;
}

html.dark .fz-chip-rose {
  background: rgba(224, 82, 90, 0.18);
  color: #f08a92;
}

.fz-chip-slate {
  background: #edf1f0;
  color: #5c6e69;
}

html.dark .fz-chip-slate {
  background: #1c2b31;
  color: #9db0aa;
}

/* نشان تغییر */
.fz-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.fz-badge-up {
  background: var(--fz-brand-100);
  color: var(--fz-brand-700);
}

html.dark .fz-badge-up {
  background: rgba(43, 161, 145, 0.18);
  color: #5fd6c3;
}

.fz-badge-down {
  background: var(--fz-accent-soft);
  color: var(--fz-accent-ink);
}

html.dark .fz-badge-down {
  background: rgba(227, 169, 61, 0.18);
  color: #ecc06b;
}

.fz-badge-danger {
  background: #fdecee;
  color: #d64550;
}

html.dark .fz-badge-danger {
  background: rgba(224, 82, 90, 0.18);
  color: #f08a92;
}

/* ---------- دکمه‌ها ---------- */
.fz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.9rem;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.55rem 1rem;
  transition: all .15s ease;
  white-space: nowrap;
}

.fz-btn:active {
  transform: scale(0.98);
}

.fz-btn-primary {
  background: linear-gradient(135deg, var(--fz-brand-500), var(--fz-brand-700));
  color: #ffffff;
  box-shadow: 0 12px 26px -12px rgba(43, 161, 145, 0.8);
}

.fz-btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 16px 30px -14px rgba(43, 161, 145, 0.9);
}

.fz-btn-ghost {
  background: var(--fz-surface);
  border-color: var(--fz-border);
  color: var(--fz-text-soft);
  box-shadow: var(--fz-shadow-sm);
}

.fz-btn-ghost:hover {
  color: var(--fz-brand-700);
  border-color: var(--fz-brand-300);
}

html.dark .fz-btn-ghost:hover {
  color: var(--fz-brand-400);
}

.fz-btn-soft {
  background: var(--fz-brand-100);
  color: var(--fz-brand-700);
}

html.dark .fz-btn-soft {
  background: rgba(43, 161, 145, 0.18);
  color: var(--fz-brand-400);
}

.fz-btn-soft:hover {
  background: var(--fz-brand-200);
}

html.dark .fz-btn-soft:hover {
  background: rgba(43, 161, 145, 0.28);
}

.fz-btn-white {
  background: #ffffff;
  color: #145049;
  box-shadow: 0 14px 30px -14px rgba(10, 43, 40, 0.5);
}

.fz-btn-white:hover {
  background: #f2fbf9;
  transform: translateY(-1px);
}

/* ---------- پنل‌های کشویی ---------- */
.fz-popover {
  position: absolute;
  z-index: 30;
  top: 100%;
  margin-top: 0.5rem;
  background: var(--fz-surface);
  border: 1px solid var(--fz-border);
  border-radius: 1rem;
  box-shadow: var(--fz-shadow-lg);
  overflow: hidden;
}

.fz-popover-head {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--fz-text-faint);
  padding: 0.85rem 1rem 0.5rem;
}

.fz-popover-foot {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--fz-border);
  background: var(--fz-surface-2);
}

.fz-popover-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fz-text-soft);
  transition: all .12s ease;
  text-align: right;
}

.fz-popover-item:hover {
  background: var(--fz-brand-100);
  color: var(--fz-brand-700);
}

html.dark .fz-popover-item:hover {
  background: rgba(43, 161, 145, 0.14);
  color: var(--fz-brand-400);
}

.fz-popover-item-danger {
  color: #d64550;
}

.fz-popover-item-danger:hover {
  background: #fdecee;
  color: #c73540;
}

/* ---------- فرم‌ها ---------- */
.fz-input {
  width: 100%;
  border-radius: 0.85rem;
  border: 1px solid var(--fz-border);
  background: var(--fz-surface);
  color: var(--fz-text);
  font-size: 0.875rem;
  padding: 0.55rem 0.9rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.fz-input:hover {
  border-color: var(--fz-border-strong);
}

.fz-input:focus {
  outline: none;
  border-color: var(--fz-brand-400);
  box-shadow: 0 0 0 3px rgba(43, 161, 145, 0.18);
}

html.dark .fz-input {
  background: var(--fz-surface-2);
}

.fz-check {
  border-radius: 0.4rem !important;
}

.fz-check:checked {
  background-color: var(--fz-brand-600) !important;
  border-color: var(--fz-brand-600) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M12.7 5.3l-5 5a1 1 0 01-1.4 0l-3-3 1.4-1.4L7 8.3l4.3-4.3z'/%3E%3C/svg%3E") !important;
}

/* ---------- جدول ---------- */
.fz-table thead {
  background: var(--fz-surface-2);
}

.fz-table thead th {
  padding: 0.75rem;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--fz-text-faint);
  white-space: nowrap;
}

.fz-table tbody td {
  padding: 0.85rem 0.75rem;
  font-size: 0.875rem;
  vertical-align: middle;
}

.fz-table tbody tr {
  border-bottom: 1px solid var(--fz-border);
}

.fz-table tbody tr:last-child {
  border-bottom: 0;
}

.fz-table tbody tr {
  transition: background-color .12s ease;
}

.fz-table tbody tr:hover {
  background: var(--fz-surface-2);
}

/* نشان وضعیت */
.fz-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.fz-status::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  background: currentColor;
}

.fz-status-teal {
  background: var(--fz-brand-100);
  color: var(--fz-brand-700);
}

html.dark .fz-status-teal {
  background: rgba(43, 161, 145, 0.18);
  color: #5fd6c3;
}

.fz-status-amber {
  background: var(--fz-accent-soft);
  color: var(--fz-accent-ink);
}

html.dark .fz-status-amber {
  background: rgba(227, 169, 61, 0.18);
  color: #ecc06b;
}

.fz-status-rose {
  background: #fdecee;
  color: #d64550;
}

html.dark .fz-status-rose {
  background: rgba(224, 82, 90, 0.18);
  color: #f08a92;
}

/* نوار پیشرفت */
.fz-progress {
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--fz-surface-2);
  border: 1px solid var(--fz-border);
  overflow: hidden;
}

.fz-progress > span {
  display: block;
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--fz-brand-400), var(--fz-brand-600));
}

/* ---------- تایم‌لاین ---------- */
.fz-timeline {
  position: relative;
}

.fz-timeline::before {
  content: "";
  position: absolute;
  top: 0.6rem;
  bottom: 0.6rem;
  inset-inline-start: 1.05rem;
  width: 2px;
  background: var(--fz-border);
  border-radius: 9999px;
}

.fz-timeline-item {
  position: relative;
  padding-inline-start: 2.9rem;
  padding-bottom: 1.2rem;
}

.fz-timeline-item:last-child {
  padding-bottom: 0.25rem;
}

.fz-timeline-dot {
  position: absolute;
  inset-inline-start: 0.5rem;
  top: 0.35rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 9999px;
  border: 2px solid var(--fz-surface);
  box-shadow: 0 0 0 3px var(--fz-border);
}

.fz-dot-teal {
  background: var(--fz-brand-500);
}

.fz-dot-amber {
  background: var(--fz-accent);
}

.fz-dot-rose {
  background: var(--fz-danger);
}

.fz-dot-emerald {
  background: var(--fz-success);
}

.fz-dot-slate {
  background: var(--fz-text-faint);
}

/* ---------- هیرو ---------- */
.fz-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid var(--fz-border);
  background: var(--fz-surface);
  box-shadow: var(--fz-shadow-lg);
}

/* لایه رنگی پس‌زمینه (مش گرادیانی بسیار ظریف) */
.fz-hero-mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 88% -22%, rgba(43, 161, 145, 0.13), transparent 56%),
    radial-gradient(90% 70% at 2% 112%, rgba(227, 169, 61, 0.11), transparent 56%);
  pointer-events: none;
}

html.dark .fz-hero-mesh {
  background:
    radial-gradient(120% 90% at 88% -22%, rgba(63, 189, 171, 0.16), transparent 56%),
    radial-gradient(90% 70% at 2% 112%, rgba(227, 169, 61, 0.1), transparent 56%);
}

/* شبکه نقطه‌ای محو */
.fz-hero-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(34, 49, 46, 0.09) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(78% 78% at 84% 6%, #000 0%, transparent 74%);
  mask-image: radial-gradient(78% 78% at 84% 6%, #000 0%, transparent 74%);
  opacity: 0.55;
  pointer-events: none;
}

html.dark .fz-hero-grid {
  background-image: radial-gradient(rgba(142, 201, 190, 0.1) 1px, transparent 1px);
}

/* هاله‌های نوری */
.fz-hero-glow {
  position: absolute;
  border-radius: 9999px;
  filter: blur(56px);
  pointer-events: none;
}

.fz-hero-glow-a {
  width: 21rem;
  height: 21rem;
  top: -7rem;
  inset-inline-end: -4rem;
  background: radial-gradient(circle, rgba(43, 161, 145, 0.3), transparent 66%);
}

.fz-hero-glow-b {
  width: 16rem;
  height: 16rem;
  bottom: -6rem;
  inset-inline-start: -3rem;
  background: radial-gradient(circle, rgba(227, 169, 61, 0.24), transparent 66%);
}

html.dark .fz-hero-glow-a {
  background: radial-gradient(circle, rgba(63, 189, 171, 0.32), transparent 66%);
}

html.dark .fz-hero-glow-b {
  background: radial-gradient(circle, rgba(227, 169, 61, 0.2), transparent 66%);
}

/* خط نوری لبه بالایی */
.fz-hero-hairline {
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(43, 161, 145, 0.5), rgba(227, 169, 61, 0.4), transparent);
  pointer-events: none;
}

.fz-hero-inner {
  position: relative;
  padding: 1.75rem;
}

@media (min-width: 640px) {
  .fz-hero-inner {
    padding: 2.25rem 2.5rem;
  }
}

.fz-hero-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .fz-hero-body {
    grid-template-columns: 1.55fr 1fr;
    gap: 2.5rem;
  }
}

/* سربرگ کوچک (متادیتا) */
.fz-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--fz-text-soft);
  background: var(--fz-surface-2);
  border: 1px solid var(--fz-border);
  border-radius: 9999px;
  padding: 0.32rem 0.75rem;
  white-space: nowrap;
}

.fz-eyebrow-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  background: var(--fz-success);
  box-shadow: 0 0 0 3px rgba(31, 157, 107, 0.16);
}

.fz-eyebrow-sep {
  width: 1px;
  height: 0.85rem;
  background: var(--fz-border-strong);
}

/* عنوان */
.fz-hero-title {
  margin-top: 1rem;
  font-size: 1.4rem;
  line-height: 1.55;
  font-weight: 800;
  color: var(--fz-text);
}

@media (min-width: 640px) {
  .fz-hero-title {
    font-size: 1.7rem;
  }
}

.fz-hero-title-hl {
  background: linear-gradient(120deg, var(--fz-brand-600), var(--fz-brand-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html.dark .fz-hero-title-hl {
  background: linear-gradient(120deg, var(--fz-brand-400), #7de3d2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fz-hero-sub {
  margin-top: 0.6rem;
  max-width: 30rem;
  font-size: 0.875rem;
  line-height: 1.95;
  color: var(--fz-text-faint);
}

/* اقدامات */
.fz-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--fz-border);
}

.fz-btn-hero {
  padding: 0.6rem 1.2rem;
  border-radius: 0.9rem;
  font-weight: 700;
  font-size: 0.85rem;
}

.fz-btn-primary.fz-btn-hero {
  box-shadow: 0 16px 30px -16px rgba(43, 161, 145, 0.85);
}

/* ویجت امروز */
.fz-hero-widget {
  position: relative;
  border-radius: 1.25rem;
  border: 1px solid var(--fz-border);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.86), rgba(246, 250, 248, 0.72));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--fz-shadow);
  padding: 1.05rem 1.25rem 1.1rem;
}

html.dark .fz-hero-widget {
  background: linear-gradient(160deg, rgba(19, 30, 34, 0.92), rgba(22, 36, 42, 0.78));
}

.fz-hero-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.fz-hero-widget-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--fz-text-faint);
}

.fz-hero-widget-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--fz-text-faint);
}

.fz-spark {
  display: block;
  width: 100%;
  height: 3.25rem;
}

/* شاخص‌های داخل هیرو */
.fz-hero-kpis {
  position: relative;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--fz-border);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 0.9rem;
}

@media (min-width: 1024px) {
  .fz-hero-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.fz-hero-kpi {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.fz-hero-kpi-icon {
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  border-radius: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fz-hero-kpi-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.fz-tint-teal {
  background: rgba(43, 161, 145, 0.12);
  color: var(--fz-brand-700);
}

.fz-tint-amber {
  background: rgba(227, 169, 61, 0.16);
  color: #9a6a10;
}

.fz-tint-emerald {
  background: rgba(31, 157, 107, 0.14);
  color: #167a4f;
}

.fz-tint-rose {
  background: rgba(224, 82, 90, 0.12);
  color: #c43c46;
}

html.dark .fz-tint-teal {
  background: rgba(63, 189, 171, 0.16);
  color: #5fd6c3;
}

html.dark .fz-tint-amber {
  background: rgba(227, 169, 61, 0.14);
  color: #e3a93d;
}

html.dark .fz-tint-emerald {
  background: rgba(31, 157, 107, 0.18);
  color: #45d5a0;
}

html.dark .fz-tint-rose {
  background: rgba(224, 82, 90, 0.16);
  color: #ef7c84;
}

.fz-hero-kpi-body {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.fz-hero-kpi-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--fz-text-faint);
}

.fz-hero-kpi-value {
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--fz-text);
}

.fz-hero-kpi-value small {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--fz-text-faint);
  margin-inline-start: 0.2rem;
}

.fz-hero-kpi-delta {
  margin-inline-start: auto;
}

/* نشانگر درصد */
.fz-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 9999px;
  padding: 0.22rem 0.55rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fz-pill-up {
  background: rgba(31, 157, 107, 0.12);
  color: var(--fz-success);
}

.fz-pill-down {
  background: rgba(224, 82, 90, 0.12);
  color: var(--fz-danger);
}

/* ---------- کارت KPI ---------- */
.fz-kpi-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--fz-text-faint);
}

.fz-kpi-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--fz-text);
  line-height: 1.3;
}

html.dark .fz-kpi-value {
  color: var(--fz-text);
}

.fz-kpi-foot {
  font-size: 0.75rem;
  color: var(--fz-text-faint);
}

/* ---------- پایک اطلاعات ---------- */
.fz-hint {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fz-text-faint);
  border: 1px solid var(--fz-border);
  background: var(--fz-surface-2);
  transition: all .15s ease;
}

.fz-hint:hover {
  color: var(--fz-brand-700);
  border-color: var(--fz-brand-300);
  background: var(--fz-brand-100);
}

/* ---------- RTL ---------- */
[dir="rtl"] #sidebar {
  right: 0;
  left: auto;
}

@media (max-width: 1023px) {
  [dir="rtl"] #sidebar.-translate-x-64 {
    --tw-translate-x: 16rem;
  }
}

[dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden]),
[dir="rtl"] .sm\:space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
}

[dir="rtl"] .-space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
}

[dir="rtl"] .pl-3 { padding-left: 0; padding-right: 0.75rem; }
[dir="rtl"] .pl-9 { padding-left: 0; padding-right: 2.25rem; }
[dir="rtl"] .pr-3 { padding-right: 0; padding-left: 0.75rem; }
[dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; }
[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .ml-3 { margin-left: 0; margin-right: 0.75rem; }
[dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
[dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; }
[dir="rtl"] .-ml-px { margin-left: 0; margin-right: -1px; }
[dir="rtl"] .text-left { text-align: right; }

/* ---------- فلپ‌پیکر ---------- */
.flatpickr-calendar {
  border-radius: 1rem;
  overflow: hidden;
  font-family: inherit;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
  background: var(--fz-brand-600);
  border-color: var(--fz-brand-600);
}

.flatpickr-day.today {
  border-color: var(--fz-brand-400);
}

.flatpickr-day.today:hover {
  background: var(--fz-brand-100);
  border-color: var(--fz-brand-400);
  color: var(--fz-brand-800);
}

.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange {
  background: var(--fz-brand-100);
  border-color: var(--fz-brand-100);
  color: var(--fz-brand-800);
}

.flatpickr-day.rangeStart,
.flatpickr-day.rangeEnd {
  background: var(--fz-brand-600);
  border-color: var(--fz-brand-600);
  color: #ffffff;
}

html.dark .flatpickr-calendar {
  background: var(--fz-surface);
  border-color: var(--fz-border);
  color: var(--fz-text-soft);
}

html.dark .flatpickr-day {
  color: var(--fz-text-soft);
}

html.dark .flatpickr-day:hover {
  background: var(--fz-surface-2);
  border-color: var(--fz-border-strong);
  color: var(--fz-text);
}

html.dark .flatpickr-day.inRange,
html.dark .flatpickr-day.prevMonthDay.inRange,
html.dark .flatpickr-day.nextMonthDay.inRange {
  background: rgba(43, 161, 145, 0.18);
  border-color: transparent;
  color: var(--fz-brand-400);
}

html.dark .flatpickr-day.selected,
html.dark .flatpickr-day.rangeStart,
html.dark .flatpickr-day.rangeEnd {
  background: var(--fz-brand-600);
  border-color: var(--fz-brand-600);
  color: #ffffff;
}

/* ---------- ابزارهای تکمیلی (ابزارهای Tailwind موجود نیستند) ---------- */
.fz-util-gap-1 { gap: 0.25rem; }
.fz-util-gap-1-5 { gap: 0.375rem; }
.fz-util-gap-3 { gap: 0.75rem; }
.fz-util-space-y-0-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.125rem; }
.fz-util-space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; }
.fz-util-py-0-5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.fz-util-py-1-5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.fz-util-w-1-5 { width: 0.375rem; }
.fz-util-h-1-5 { height: 0.375rem; }
.fz-util-w-3-5 { width: 0.875rem; }
.fz-util-h-3-5 { height: 0.875rem; }
.fz-util-min-w-40 { min-width: 10rem; }
.fz-util-min-w-52 { min-width: 13rem; }
.fz-util-min-w-64 { min-width: 16rem; }
.fz-util-w-28 { width: 7rem; }
.fz-util-w-56 { width: 14rem; }

.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }

.fz-avatar-ring {
  box-shadow: 0 0 0 2px var(--fz-brand-300), 0 0 0 4px var(--fz-bg);
}

.fz-notif-dot {
  border: 2px solid var(--fz-surface);
}

.fz-divide > * + * {
  border-top: 1px solid var(--fz-border);
}

.fz-icon-btn[aria-expanded="true"] {
  background: var(--fz-brand-100);
  border-color: var(--fz-brand-300);
  color: var(--fz-brand-700);
}

html.dark .fz-icon-btn[aria-expanded="true"] {
  background: rgba(43, 161, 145, 0.16);
  border-color: rgba(43, 161, 145, 0.35);
  color: var(--fz-brand-400);
}

.fz-btn-ghost-light {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
  box-shadow: none;
}

.fz-btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

/* ---------- کاهش حرکت ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}

/* ============================================================
   فراز — چیدمان و ابزارهای تکمیلی (ورژن ۱٫۱)
   ============================================================ */

/* نشان برند */
.fz-brand-mark {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
  background: linear-gradient(135deg, var(--fz-brand-500), var(--fz-brand-700));
  box-shadow: 0 10px 20px -8px rgba(43, 161, 145, 0.65);
}

.fz-brand-mark svg {
  width: 1.3rem;
  height: 1.3rem;
}

.fz-brand-word {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* گروه ناوبری */
.fz-nav-title {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--fz-sidebar-head);
  padding: 0 0.75rem;
  margin: 1.25rem 0 0.4rem;
}

.fz-nav-sub {
  border-inline-start: 2px solid var(--fz-border);
  margin-inline-start: 0.35rem;
  padding-inline-start: 0.25rem;
}

.fz-nav-count {
  margin-inline-start: auto;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.08rem 0.5rem;
  border-radius: 9999px;
  background: var(--fz-brand-100);
  color: var(--fz-brand-700);
}

html.dark .fz-nav-count {
  background: rgba(43, 161, 145, 0.18);
  color: #5fd6c3;
}

/* عرض و بسته‌شدن سایدبار */
#sidebar {
  width: 16rem;
}

@media (min-width: 1024px) {
  #sidebar {
    width: 5.25rem;
  }

  body.sidebar-expanded #sidebar {
    width: 16rem;
  }

  #sidebar .fz-brand-word,
  #sidebar .fz-nav-title,
  #sidebar .fz-nav-label,
  #sidebar .fz-nav-chev,
  #sidebar .fz-nav-count,
  #sidebar .fz-promo-wrap {
    display: none;
  }

  #sidebar .fz-brand {
    justify-content: center;
  }

  #sidebar .fz-nav-link {
    justify-content: center;
  }

  body:not(.sidebar-expanded) #sidebar .fz-nav-sub {
    display: none !important;
  }

  body:not(.sidebar-expanded) #sidebar .fz-brand {
    display: none;
  }

  body.sidebar-expanded #sidebar .fz-brand-word,
  body.sidebar-expanded #sidebar .fz-nav-title,
  body.sidebar-expanded #sidebar .fz-nav-label,
  body.sidebar-expanded #sidebar .fz-nav-chev,
  body.sidebar-expanded #sidebar .fz-nav-count,
  body.sidebar-expanded #sidebar .fz-promo-wrap {
    display: block;
  }

  body.sidebar-expanded #sidebar .fz-brand {
    justify-content: flex-start;
  }

  body.sidebar-expanded #sidebar .fz-nav-link {
    justify-content: space-between;
  }
}

/* نمایش ریسپانسیو دکمه‌های سایدبار (غلبه بر display ناشی از .fz-icon-btn) */
@media (max-width: 1023.98px) {
  #sidebar #sidebar-collapse {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .fz-header .lg\:hidden,
  #sidebar .lg\:hidden {
    display: none !important;
  }
}

/* دکمه‌های کوچک */
.fz-btn-sm {
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
}

.fz-btn-xs {
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
}

/* متن‌های کمکی */
.fz-strong {
  color: var(--fz-text);
  font-weight: 700;
}

.fz-muted {
  color: var(--fz-text-faint);
}

.fz-link {
  color: var(--fz-brand-700);
  font-weight: 600;
}

html.dark .fz-link {
  color: var(--fz-brand-400);
}

/* شبکه‌های واکنش‌گرا */
.fz-grid-2,
.fz-grid-3,
.fz-grid-4 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .fz-grid-2,
  .fz-grid-3,
  .fz-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .fz-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fz-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fz-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* دکمه کاربر */
.fz-user-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: 9999px;
  padding: 0.3rem 0.4rem 0.3rem 0.85rem;
  transition: background-color .15s ease;
}

.fz-user-btn:hover {
  background: var(--fz-brand-100);
}

html.dark .fz-user-btn:hover {
  background: rgba(43, 161, 145, 0.14);
}

/* آواتار حرفی */
.fz-avatar-init {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, var(--fz-brand-500), var(--fz-brand-700));
}

/* ارتفاع نمودار */
.fz-chart-h {
  height: 260px;
}

.fz-chart-h-sm {
  height: 220px;
}

/* برگه‌ها */
.fz-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem;
  border-radius: 0.8rem;
  background: var(--fz-surface-2);
  border: 1px solid var(--fz-border);
}

.fz-tab {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--fz-text-faint);
  padding: 0.3rem 0.7rem;
  border-radius: 0.6rem;
  transition: all .15s ease;
}

.fz-tab:hover {
  color: var(--fz-text);
}

.fz-tab.is-active {
  background: var(--fz-surface);
  color: var(--fz-brand-700);
  box-shadow: var(--fz-shadow-sm);
}

html.dark .fz-tab.is-active {
  color: var(--fz-brand-400);
}

/* فوتر */
.fz-footer {
  padding-top: 1rem;
  margin-top: 2rem;
  border-top: 1px solid var(--fz-border);
  font-size: 0.8rem;
  color: var(--fz-text-faint);
  text-align: center;
}

/* آیکون‌های حالت تاریک/روشن */
html.dark .dark\:hidden {
  display: none !important;
}

html.dark .dark\:block {
  display: block;
}

/* ابزارهای کوچک تکمیلی (موجود در خروجی Tailwind نیستند) */
.bg-slate-900\/30 {
  background-color: rgba(15, 23, 42, 0.3);
}

.bg-slate-900\/40 {
  background-color: rgba(15, 23, 42, 0.4);
}

.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

@media (min-width: 640px) {
  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 1.33;
  }

  .sm\:inline-flex {
    display: inline-flex;
  }
}

@media (min-width: 1024px) {
  .lg\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .lg\:right-auto {
    right: auto;
  }
}

/* ---------- انتخاب‌گر بازه تاریخ شمسی ---------- */
.fz-dp {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 20rem;
  max-width: calc(100vw - 1.5rem);
  background: var(--fz-surface);
  border: 1px solid var(--fz-border);
  border-radius: 1rem;
  box-shadow: var(--fz-shadow-lg);
  z-index: 60;
  overflow: hidden;
}

@media (min-width: 640px) {
  .fz-dp {
    width: 21rem;
  }
}

.fz-dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.85rem 0.5rem;
}

.fz-dp-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--fz-text);
}

.fz-dp-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.fz-dp-nav-btn {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.55rem;
  color: var(--fz-text-soft);
  background: var(--fz-surface-2);
  border: 1px solid var(--fz-border);
  transition: all .12s ease;
  cursor: pointer;
}

.fz-dp-nav-btn:hover {
  color: var(--fz-brand-700);
  border-color: var(--fz-brand-300);
  background: var(--fz-brand-100);
}

html.dark .fz-dp-nav-btn:hover {
  color: var(--fz-brand-400);
  background: rgba(43, 161, 145, 0.16);
  border-color: var(--fz-border-strong);
}

.fz-dp-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.15rem 0.85rem 0.55rem;
}

.fz-dp-quick-btn {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--fz-text-soft);
  background: var(--fz-surface-2);
  border: 1px solid var(--fz-border);
  border-radius: 9999px;
  padding: 0.28rem 0.7rem;
  transition: all .12s ease;
  cursor: pointer;
}

.fz-dp-quick-btn:hover {
  color: var(--fz-brand-700);
  border-color: var(--fz-brand-300);
}

html.dark .fz-dp-quick-btn:hover {
  color: var(--fz-brand-400);
}

.fz-dp-quick-btn.is-active {
  background: var(--fz-brand-100);
  border-color: var(--fz-brand-300);
  color: var(--fz-brand-700);
}

html.dark .fz-dp-quick-btn.is-active {
  background: rgba(43, 161, 145, 0.2);
  color: var(--fz-brand-400);
}

.fz-dp-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0.2rem 0.5rem;
}

.fz-dp-week span {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--fz-text-faint);
  padding: 0.3rem 0;
}

.fz-dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.15rem;
  padding: 0 0.5rem 0.6rem;
}

.fz-dp-day {
  position: relative;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fz-text-soft);
  border-radius: 0.6rem;
  cursor: pointer;
  transition: all .1s ease;
  font-variant-numeric: tabular-nums;
}

.fz-dp-day:hover {
  background: var(--fz-brand-100);
  color: var(--fz-brand-700);
}

html.dark .fz-dp-day:hover {
  background: rgba(43, 161, 145, 0.16);
  color: var(--fz-brand-400);
}

.fz-dp-day.is-out {
  color: var(--fz-text-faint);
  opacity: 0.45;
}

.fz-dp-day.is-today {
  box-shadow: inset 0 0 0 1px var(--fz-brand-400);
  color: var(--fz-brand-700);
  font-weight: 800;
}

html.dark .fz-dp-day.is-today {
  color: var(--fz-brand-400);
}

.fz-dp-day.in-range {
  background: var(--fz-brand-100);
  border-radius: 0;
  color: var(--fz-brand-700);
}

html.dark .fz-dp-day.in-range {
  background: rgba(43, 161, 145, 0.16);
  color: var(--fz-brand-400);
}

.fz-dp-day.is-start,
.fz-dp-day.is-end {
  background: linear-gradient(135deg, var(--fz-brand-500), var(--fz-brand-700));
  color: #ffffff;
  font-weight: 800;
  border-radius: 0.6rem;
}

.fz-dp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  border-top: 1px solid var(--fz-border);
  background: var(--fz-surface-2);
}

/* ============================================================
   فراز — بازطراحی پریمیوم (ورژن ۲٫۰)
   ============================================================ */

/* ---------- جدول پیشرفته ---------- */
.fz-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.fz-table thead {
  background: var(--fz-surface-2);
}

.fz-table thead th {
  padding: 0.95rem 1.1rem;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--fz-text-faint);
  white-space: nowrap;
  letter-spacing: 0.01em;
  text-align: right;
  border-bottom: 1px solid var(--fz-border);
}

.fz-table tbody td {
  padding: 0.95rem 1.1rem;
  font-size: 0.875rem;
  color: var(--fz-text-soft);
  vertical-align: middle;
  line-height: 1.6;
}

.fz-table tbody tr {
  transition: background-color .15s ease;
}

.fz-table tbody tr + tr td {
  border-top: 1px solid var(--fz-border);
}

.fz-table tbody tr:hover {
  background: var(--fz-surface-2);
}

@media (min-width: 640px) {
  .fz-table thead th,
  .fz-table tbody td {
    padding-right: 1.35rem;
    padding-left: 1.35rem;
  }
}

/* سلول اعداد — تراز راست و خوانا */
.fz-table .fz-cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fz-table .fz-cell-strong {
  color: var(--fz-text);
  font-weight: 700;
}

/* تاریخ محتاطانه */
.fz-date-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--fz-text-soft);
  font-size: 0.85rem;
}

.fz-date-cell-muted {
  font-size: 0.8rem;
  color: var(--fz-text-faint);
}

/* ---------- کارت محصول (فروشگاه) ---------- */
.fz-product {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--fz-surface);
  border: 1px solid var(--fz-border);
  border-radius: 1.25rem;
  overflow: hidden;
  transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, border-color .28s ease;
}

.fz-product:hover {
  transform: translateY(-6px);
  box-shadow: var(--fz-shadow-lg);
  border-color: var(--fz-border-strong);
}

.fz-product-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--fz-surface-2);
}

.fz-product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}

.fz-product:hover .fz-product-media img {
  transform: scale(1.06) rotate(0.25deg);
}

.fz-product-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(10, 30, 27, 0.12));
  pointer-events: none;
}

.fz-product-discount {
  position: absolute;
  top: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.28rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  box-shadow: 0 8px 18px -8px rgba(225, 29, 72, 0.7);
}

.fz-product-status {
  position: absolute;
  top: 0.75rem;
  inset-inline-end: 0.75rem;
  z-index: 2;
}

.fz-product-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.1rem 1.15rem 1.2rem;
  flex: 1;
}

.fz-product-cat {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--fz-text-faint);
}

.fz-product-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--fz-text);
  line-height: 1.5;
  min-height: 2.85rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fz-product-name:hover {
  color: var(--fz-brand-700);
}

html.dark .fz-product-name:hover {
  color: var(--fz-brand-400);
}

.fz-product-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
}

.fz-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.fz-rating svg {
  width: 0.95rem;
  height: 0.95rem;
  color: #f59e0b;
  fill: #f59e0b;
}

.fz-rating svg.muted {
  color: var(--fz-border-strong);
  fill: var(--fz-border-strong);
}

.fz-rating-num {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--fz-text-soft);
}

.fz-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--fz-border);
}

.fz-price {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--fz-brand-700);
  letter-spacing: 0;
}

html.dark .fz-price {
  color: var(--fz-brand-400);
}

.fz-price-old {
  font-size: 0.78rem;
  color: var(--fz-text-faint);
  text-decoration: line-through;
}

.fz-price-curr {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--fz-text-faint);
}

/* دکمه افزودن — روی کل کارت در حالت دسکتاپ */
.fz-product-cta {
  margin-top: 0.2rem;
}

/* ---------- گالری محصول ---------- */
.fz-gallery-main {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 1rem;
  overflow: hidden;
  background: var(--fz-surface-2);
  border: 1px solid var(--fz-border);
  cursor: zoom-in;
}

.fz-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .38s cubic-bezier(.16,1,.3,1);
  transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
}

.fz-gallery-main.is-zoomed img {
  transform: scale(1.85);
  cursor: zoom-out;
}

.fz-gallery-zoom-hint {
  position: absolute;
  bottom: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(10, 30, 27, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.fz-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.fz-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 0.8rem;
  overflow: hidden;
  border: 2px solid var(--fz-border);
  background: var(--fz-surface-2);
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.fz-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fz-thumb:hover {
  border-color: var(--fz-brand-400);
  transform: translateY(-2px);
}

.fz-thumb.is-active {
  border-color: var(--fz-brand-500);
  box-shadow: 0 0 0 3px var(--fz-brand-100);
}

html.dark .fz-thumb.is-active {
  box-shadow: 0 0 0 3px rgba(43, 161, 145, 0.25);
}

/* ---------- کارت امنیت پرداخت ---------- */
.fz-trust {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
  border-radius: 1.1rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--fz-border);
  background: linear-gradient(160deg, var(--fz-surface-2), var(--fz-surface));
}

.fz-trust-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--fz-text);
}

.fz-trust-head .fz-icon {
  width: 1.9rem;
  height: 1.9rem;
  flex-shrink: 0;
  border-radius: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fz-brand-100);
  color: var(--fz-brand-700);
}

html.dark .fz-trust-head .fz-icon {
  background: rgba(43, 161, 145, 0.18);
  color: var(--fz-brand-400);
}

.fz-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.fz-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.7rem;
  border-radius: 0.7rem;
  border: 1px solid var(--fz-border);
  background: var(--fz-surface);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--fz-text-soft);
}

.fz-trust-badge svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.fz-trust-badge.is-secure {
  border-color: var(--fz-brand-300);
  color: var(--fz-brand-700);
  background: var(--fz-brand-50);
}

html.dark .fz-trust-badge.is-secure {
  border-color: rgba(43, 161, 145, 0.4);
  background: rgba(43, 161, 145, 0.12);
  color: var(--fz-brand-400);
}

.fz-trust-text {
  font-size: 0.74rem;
  line-height: 1.8;
  color: var(--fz-text-faint);
}

/* ---------- امتیاز ستاره (عاری از ایموجی) ---------- */
.fz-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
}

.fz-stars svg {
  width: 1rem;
  height: 1rem;
  color: #f59e0b;
  fill: #f59e0b;
}

.fz-stars svg.muted {
  color: var(--fz-border-strong);
  fill: var(--fz-border-strong);
}

/* ---------- فلش روند (جایگزین ▲▼) ---------- */
.fz-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-variant-numeric: tabular-nums;
}

.fz-trend svg {
  width: 0.8rem;
  height: 0.8rem;
  flex-shrink: 0;
}

/* چیپ کد کشور (جایگزین ایموجی پرچم) */
.fz-country {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.35rem;
  padding: 0 0.4rem;
  border-radius: 0.45rem;
  border: 1px solid var(--fz-border);
  background: var(--fz-surface-2);
  color: var(--fz-text-soft);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

/* ---------- کارت قهرمان جزئیات تراکنش ---------- */
.fz-card-hero {
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--fz-brand-500) 16%, transparent) 0%, transparent 55%),
    var(--fz-surface);
  border: 1px solid var(--fz-border);
  border-radius: var(--fz-radius);
  box-shadow: var(--fz-shadow);
}

.fz-card-hero .fz-status {
  margin-inline-start: 0.25rem;
}

/* ---------- کارت پیش‌نمایش بانکی ---------- */
.fz-card-featured {
  background: linear-gradient(135deg, #0f766e, #134e4a 55%, #0f172a);
  border: none;
  box-shadow: var(--fz-shadow-lg);
}

.fz-timeline {
  position: relative;
  padding-inline-start: 0.25rem;
}

.fz-timeline-item {
  position: relative;
  display: flex;
  gap: 0.9rem;
  padding-bottom: 1.5rem;
}

.fz-timeline-item:last-child {
  padding-bottom: 0;
}

.fz-timeline-item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.4rem;
  top: 1.4rem;
  bottom: 0;
  width: 2px;
  background: var(--fz-border-strong);
}

.fz-timeline-item:last-child::before {
  display: none;
}

.fz-timeline-dot {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 0.8rem;
  height: 0.8rem;
  margin-top: 0.3rem;
  border-radius: 9999px;
  background: var(--fz-border-strong);
  box-shadow: 0 0 0 4px var(--fz-surface-2);
}

.fz-dot-teal {
  background: var(--fz-brand-500);
}

.fz-dot-amber {
  background: #f59e0b;
}

.fz-dot-rose {
  background: #f43f5e;
}

.fz-dot-emerald {
  background: #10b981;
}

.fz-dot-slate {
  background: var(--fz-border-strong);
}

.fz-icon-btn.is-open {
  background: var(--fz-brand-100);
  color: var(--fz-brand-700);
}

html.dark .fz-icon-btn.is-open {
  background: rgba(43, 161, 145, 0.18);
  color: var(--fz-brand-400);
}

/* ---------- صفحه‌های وضعیت (۴۰۴ / حالت خالی) ---------- */
.fz-status-page {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--fz-bg, #f8fafc);
}

.fz-status-top {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .fz-status-top {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .fz-status-top {
    padding: 0 2rem;
  }
}

.fz-status-main {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem 2.5rem;
}

.fz-status-foot {
  position: relative;
  z-index: 3;
  text-align: center;
  font-size: 0.75rem;
  padding: 0 1rem 1.5rem;
  color: var(--fz-text-faint);
}

.fz-404-wrap {
  position: relative;
  min-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.fz-404-art {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18rem;
  height: 14rem;
  transform: translate(-50%, -58%);
  perspective: 700px;
  pointer-events: none;
  z-index: 1;
}

.fz-404-num {
  position: absolute;
  font-size: 9rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--fz-brand-600);
  opacity: 0.14;
  user-select: none;
  pointer-events: none;
  animation: fzFloaty 7s ease-in-out infinite;
  font-feature-settings: "tnum";
}

html.dark .fz-404-num {
  color: #7fe3d4;
  opacity: 0.1;
}

.fz-404-num-1 {
  top: 0.5rem;
  right: 0.5rem;
  animation-delay: 0s;
}

.fz-404-num-4 {
  top: 1.5rem;
  left: 0.5rem;
  animation-delay: 1.2s;
}

.fz-404-num-0 {
  bottom: -0.5rem;
  right: 50%;
  transform: translateX(50%);
  animation-delay: 2.1s;
}

.fz-404-card {
  position: relative;
  z-index: 2;
  animation: fzFloatCard 6s ease-in-out infinite;
}

@keyframes fzFloatCard {
  0%, 100% { transform: translateY(0) rotate(-.5deg); }
  50% { transform: translateY(-12px) rotate(.8deg); }
}

@keyframes fzFloaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.fz-404-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.5;
  pointer-events: none;
  animation: fzOrb 9s ease-in-out infinite;
}

@keyframes fzOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(14px, -18px) scale(1.08); }
}

.fz-404-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 800;
  background: var(--fz-surface-2);
  border: 1px dashed var(--fz-border-strong);
  color: var(--fz-text-soft);
}