@layer kashi.tokens, kashi.base, kashi.components;

/* فونت وزیرمتن (Variable، وزن ۱۰۰ تا ۹۰۰) — لایسنس OFL */
@font-face {
  font-family: "Vazirmatn";
  src: url("./fonts/Vazirmatn.woff2") format("woff2-variations"),
       url("./fonts/Vazirmatn.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@layer kashi.tokens {
/* @kashi-ui/tokens — این فایل خودکار ساخته شده است */
:root {
  --k-radius-factor: 1;
  --k-density: 1;
  --k-text-scale: 1;
  --k-firoozeh-50: #e6fbf8;
  --k-firoozeh-100: #c2f4ee;
  --k-firoozeh-200: #8ce9df;
  --k-firoozeh-300: #4fd8cb;
  --k-firoozeh-400: #22c2b4;
  --k-firoozeh-500: #0fa89b;
  --k-firoozeh-600: #0b8077;
  --k-firoozeh-700: #0a6b65;
  --k-firoozeh-800: #0d5551;
  --k-firoozeh-900: #0f4644;
  --k-firoozeh-950: #042a29;
  --k-lajvard-50: #eef3ff;
  --k-lajvard-100: #dbe5ff;
  --k-lajvard-200: #bfd0ff;
  --k-lajvard-300: #93b0ff;
  --k-lajvard-400: #6185fd;
  --k-lajvard-500: #3d5ef8;
  --k-lajvard-600: #2740ed;
  --k-lajvard-700: #1f30d9;
  --k-lajvard-800: #2029b0;
  --k-lajvard-900: #20298b;
  --k-lajvard-950: #181b54;
  --k-zafaran-50: #fff8eb;
  --k-zafaran-100: #ffecc6;
  --k-zafaran-200: #ffd788;
  --k-zafaran-300: #ffbd4a;
  --k-zafaran-400: #ffa520;
  --k-zafaran-500: #f98307;
  --k-zafaran-600: #dd5e02;
  --k-zafaran-700: #b73e06;
  --k-zafaran-800: #94300c;
  --k-zafaran-900: #7a280d;
  --k-zafaran-950: #461202;
  --k-anar-50: #fff1f2;
  --k-anar-100: #ffe0e2;
  --k-anar-200: #ffc7cb;
  --k-anar-300: #ffa0a6;
  --k-anar-400: #ff6972;
  --k-anar-500: #f83b47;
  --k-anar-600: #e51d2a;
  --k-anar-700: #c11420;
  --k-anar-800: #a0141e;
  --k-anar-900: #841820;
  --k-anar-950: #48070b;
  --k-pesteh-50: #f3faeb;
  --k-pesteh-100: #e4f4d3;
  --k-pesteh-200: #cbeaac;
  --k-pesteh-300: #a9db7b;
  --k-pesteh-400: #89c951;
  --k-pesteh-500: #6aae33;
  --k-pesteh-600: #518b25;
  --k-pesteh-700: #3f6a21;
  --k-pesteh-800: #35551f;
  --k-pesteh-900: #2e491e;
  --k-pesteh-950: #15270c;
  --k-shab-0: #ffffff;
  --k-shab-50: #f6f7f9;
  --k-shab-100: #eceef2;
  --k-shab-200: #d5d9e2;
  --k-shab-300: #b1b9c9;
  --k-shab-400: #8792ab;
  --k-shab-450: #848fa7;
  --k-shab-500: #687491;
  --k-shab-550: #5a637a;
  --k-shab-600: #535d78;
  --k-shab-700: #3e4350;
  --k-shab-800: #262a33;
  --k-shab-850: #1c1f26;
  --k-shab-900: #15171c;
  --k-shab-925: #111317;
  --k-shab-950: #0d0e11;
  --k-shab-1000: #09090b;
  --k-brand-50: var(--k-firoozeh-50);
  --k-brand-100: var(--k-firoozeh-100);
  --k-brand-200: var(--k-firoozeh-200);
  --k-brand-300: var(--k-firoozeh-300);
  --k-brand-400: var(--k-firoozeh-400);
  --k-brand-500: var(--k-firoozeh-500);
  --k-brand-600: var(--k-firoozeh-600);
  --k-brand-700: var(--k-firoozeh-700);
  --k-brand-800: var(--k-firoozeh-800);
  --k-brand-900: var(--k-firoozeh-900);
  --k-brand-950: var(--k-firoozeh-950);
  --k-space-0: 0;
  --k-space-1: 0.25rem;
  --k-space-2: 0.5rem;
  --k-space-3: 0.75rem;
  --k-space-4: 1rem;
  --k-space-5: 1.25rem;
  --k-space-6: 1.5rem;
  --k-space-8: 2rem;
  --k-space-10: 2.5rem;
  --k-space-12: 3rem;
  --k-space-16: 4rem;
  --k-space-20: 5rem;
  --k-space-24: 6rem;
  --k-space-px: 1px;
  --k-space-0_5: 0.125rem;
  --k-space-1_5: 0.375rem;
  --k-radius-none: 0;
  --k-radius-sm: calc(0.25rem * var(--k-radius-factor));
  --k-radius-md: calc(0.5rem * var(--k-radius-factor));
  --k-radius-lg: calc(0.75rem * var(--k-radius-factor));
  --k-radius-xl: calc(1rem * var(--k-radius-factor));
  --k-radius-2xl: calc(1.5rem * var(--k-radius-factor));
  --k-radius-full: 9999px;
  --k-font-sans: "Vazirmatn", "Vazir", Tahoma, system-ui, sans-serif;
  --k-font-display: var(--k-font-sans);
  --k-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Vazirmatn", monospace;
  --k-text-xs: calc(0.75rem * var(--k-text-scale));
  --k-text-sm: calc(0.875rem * var(--k-text-scale));
  --k-text-md: calc(0.9375rem * var(--k-text-scale));
  --k-text-lg: calc(1.0625rem * var(--k-text-scale));
  --k-text-xl: calc(1.25rem * var(--k-text-scale));
  --k-text-2xl: calc(1.5rem * var(--k-text-scale));
  --k-text-3xl: calc(1.875rem * var(--k-text-scale));
  --k-text-4xl: calc(2.25rem * var(--k-text-scale));
  --k-text-5xl: calc(3rem * var(--k-text-scale));
  --k-text-6xl: calc(3.75rem * var(--k-text-scale));
  --k-weight-light: 300;
  --k-weight-regular: 400;
  --k-weight-medium: 500;
  --k-weight-semibold: 600;
  --k-weight-bold: 700;
  --k-weight-black: 900;
  --k-leading-tight: 1.35;
  --k-leading-normal: 1.75;
  --k-leading-relaxed: 2;
  --k-shadow-xs: 0 1px 2px rgb(10 13 18 / 0.05);
  --k-shadow-sm: 0 1px 3px rgb(10 13 18 / 0.1), 0 1px 2px -1px rgb(10 13 18 / 0.1);
  --k-shadow-md: 0 4px 6px -1px rgb(10 13 18 / 0.1), 0 2px 4px -2px rgb(10 13 18 / 0.06);
  --k-shadow-lg: 0 12px 16px -4px rgb(10 13 18 / 0.08), 0 4px 6px -2px rgb(10 13 18 / 0.03);
  --k-shadow-xl: 0 20px 24px -4px rgb(10 13 18 / 0.08), 0 8px 8px -4px rgb(10 13 18 / 0.03);
  --k-shadow-2xl: 0 24px 48px -12px rgb(10 13 18 / 0.18);
  --k-duration-fast: 120ms;
  --k-duration-normal: 200ms;
  --k-duration-slow: 320ms;
  --k-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --k-ease-emphasized: cubic-bezier(0.3, 0, 0, 1.3);
  --k-z-dropdown: 1000;
  --k-z-sticky: 1100;
  --k-z-overlay: 1300;
  --k-z-modal: 1400;
  --k-z-toast: 1500;
}

:root, [data-theme="dark"] {
  color-scheme: dark;
  --k-bg-primary: var(--k-shab-1000);
  --k-bg-secondary: var(--k-shab-950);
  --k-bg-tertiary: var(--k-shab-900);
  --k-bg-elevated: var(--k-shab-925);
  --k-bg-hover: rgb(255 255 255 / 0.05);
  --k-bg-active: rgb(255 255 255 / 0.08);
  --k-bg-brand: var(--k-brand-600);
  --k-bg-brand-hover: var(--k-brand-700);
  --k-bg-brand-subtle: color-mix(in srgb, var(--k-brand-500) 14%, transparent);
  --k-bg-error: var(--k-anar-600);
  --k-bg-error-hover: var(--k-anar-700);
  --k-bg-error-subtle: rgb(248 59 71 / 0.14);
  --k-bg-warning-subtle: rgb(249 131 7 / 0.14);
  --k-bg-success-subtle: rgb(106 174 51 / 0.14);
  --k-bg-info-subtle: rgb(61 94 248 / 0.16);
  --k-text-primary: var(--k-shab-50);
  --k-text-secondary: var(--k-shab-200);
  --k-text-tertiary: var(--k-shab-400);
  --k-text-quaternary: var(--k-shab-500);
  --k-text-on-brand: var(--k-shab-0);
  --k-text-on-error: var(--k-shab-0);
  --k-text-brand: var(--k-brand-300);
  --k-text-error: var(--k-anar-400);
  --k-text-warning: var(--k-zafaran-400);
  --k-text-success: var(--k-pesteh-400);
  --k-text-info: var(--k-lajvard-300);
  --k-border-primary: var(--k-shab-700);
  --k-border-secondary: var(--k-shab-800);
  --k-border-brand: var(--k-brand-400);
  --k-border-input: var(--k-shab-550);
  --k-border-error: var(--k-anar-400);
  --k-ring-brand: 0 0 0 4px color-mix(in srgb, var(--k-brand-400) 28%, transparent);
  --k-ring-error: 0 0 0 4px rgb(248 59 71 / 0.28);
  --k-shadow-skeuomorphic: inset 0 0 0 1px rgb(0 0 0 / 0.2), inset 0 -2px 0 rgb(0 0 0 / 0.12);
  --k-highlight: inset 0 1px 0 rgb(255 255 255 / 0.05);
  --k-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --k-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px -1px rgb(0 0 0 / 0.4);
  --k-shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.35);
  --k-shadow-lg: 0 12px 24px -4px rgb(0 0 0 / 0.55), 0 4px 8px -4px rgb(0 0 0 / 0.35);
  --k-shadow-xl: 0 20px 32px -6px rgb(0 0 0 / 0.6), 0 8px 12px -6px rgb(0 0 0 / 0.4);
  --k-shadow-2xl: 0 28px 56px -12px rgb(0 0 0 / 0.7);
}

[data-theme="light"] {
  color-scheme: light;
  --k-bg-primary: var(--k-shab-0);
  --k-bg-secondary: var(--k-shab-50);
  --k-bg-tertiary: var(--k-shab-100);
  --k-bg-elevated: var(--k-shab-0);
  --k-bg-hover: var(--k-shab-50);
  --k-bg-active: var(--k-shab-100);
  --k-bg-brand: var(--k-brand-600);
  --k-bg-brand-hover: var(--k-brand-700);
  --k-bg-brand-subtle: var(--k-brand-50);
  --k-bg-error: var(--k-anar-600);
  --k-bg-error-hover: var(--k-anar-700);
  --k-bg-error-subtle: var(--k-anar-50);
  --k-bg-warning-subtle: var(--k-zafaran-50);
  --k-bg-success-subtle: var(--k-pesteh-50);
  --k-bg-info-subtle: var(--k-lajvard-50);
  --k-text-primary: var(--k-shab-950);
  --k-text-secondary: var(--k-shab-700);
  --k-text-tertiary: var(--k-shab-600);
  --k-text-quaternary: var(--k-shab-500);
  --k-text-on-brand: var(--k-shab-0);
  --k-text-on-error: var(--k-shab-0);
  --k-text-brand: var(--k-brand-700);
  --k-text-error: var(--k-anar-700);
  --k-text-warning: var(--k-zafaran-700);
  --k-text-success: var(--k-pesteh-700);
  --k-text-info: var(--k-lajvard-700);
  --k-border-primary: var(--k-shab-300);
  --k-border-secondary: var(--k-shab-200);
  --k-border-brand: var(--k-brand-600);
  --k-border-input: var(--k-shab-450);
  --k-border-error: var(--k-anar-500);
  --k-ring-brand: 0 0 0 4px color-mix(in srgb, var(--k-brand-500) 20%, transparent);
  --k-ring-error: 0 0 0 4px rgb(229 29 42 / 0.2);
  --k-shadow-skeuomorphic: inset 0 0 0 1px rgb(10 13 18 / 0.18), inset 0 -2px 0 rgb(10 13 18 / 0.05);
  --k-highlight: 0 0 #0000;
  --k-shadow-xs: 0 1px 2px rgb(10 13 18 / 0.05);
  --k-shadow-sm: 0 1px 3px rgb(10 13 18 / 0.1), 0 1px 2px -1px rgb(10 13 18 / 0.1);
  --k-shadow-md: 0 4px 6px -1px rgb(10 13 18 / 0.1), 0 2px 4px -2px rgb(10 13 18 / 0.06);
  --k-shadow-lg: 0 12px 16px -4px rgb(10 13 18 / 0.08), 0 4px 6px -2px rgb(10 13 18 / 0.03);
  --k-shadow-xl: 0 20px 24px -4px rgb(10 13 18 / 0.08), 0 8px 8px -4px rgb(10 13 18 / 0.03);
  --k-shadow-2xl: 0 24px 48px -12px rgb(10 13 18 / 0.18);
}

}

@layer kashi.base {
/* پایه — فقط در ریشه یا داخل .k-root اعمال می‌شود */
*, *::before, *::after { box-sizing: border-box; }

:where(html) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:where(body, .k-root) {
  margin: 0;
  background: var(--k-bg-primary);
  color: var(--k-text-primary);
  font-family: var(--k-font-sans);
  font-size: var(--k-text-md);
  line-height: var(--k-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* نوار اسکرول هم‌رنگ تم */
  scrollbar-color: var(--k-border-primary) transparent;
  -moz-osx-font-smoothing: grayscale;
  /* کشیده‌نویسی و اتصال درست حروف فارسی */
  font-feature-settings: "kern", "liga", "calt";
}

/* فونت عنوان‌ها جدا قابل‌تغییر است: --k-font-display */
:where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: var(--k-font-display);
  line-height: var(--k-leading-tight);
  font-weight: var(--k-weight-bold);
}

:where(:focus-visible) {
  outline: 2px solid var(--k-border-brand);
  outline-offset: 2px;
}

::selection {
  background: var(--k-bg-brand-subtle);
  color: var(--k-text-primary);
}

/* فقط برای صفحه‌خوان قابل‌خواندن است */
.k-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* لینک «رفتن به محتوای اصلی» برای کاربران کیبورد */
.k-skip-link {
  position: absolute;
  inset-inline-start: var(--k-space-4);
  inset-block-start: var(--k-space-4);
  z-index: var(--k-z-toast);
  padding: var(--k-space-2) var(--k-space-4);
  border-radius: var(--k-radius-md);
  background: var(--k-bg-brand);
  color: var(--k-text-on-brand);
  translate: 0 -200%;
}
.k-skip-link:focus { translate: 0 0; }

/* کاربرانی که کنتراست بیشتر خواسته‌اند */
@media (prefers-contrast: more) {
  :root {
    --k-text-tertiary: var(--k-text-secondary);
    --k-border-primary: var(--k-text-tertiary);
    --k-border-secondary: var(--k-border-primary);
  }
}

/* متن پاراگراف‌ها بدون تک‌کلمهٔ تنها در خط آخر */
:where(p, li, figcaption) { text-wrap: pretty; }

/* ارقام لاتین در کنار متن فارسی: tabular برای جدول‌ها و اعداد */
.k-tabular { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

}

@layer kashi.components {
/* آکاردئون — روی <details> و <summary> بومی؛ بدون JavaScript دسترس‌پذیر است
 * متغیرها: --k-accordion-radius  --k-accordion-padding  --k-accordion-bg
 * باز شدن تنها یک بخش در هر لحظه: name یکسان روی همهٔ <details>
 */
.k-accordion {
  border: 1px solid var(--k-border-secondary);
  border-radius: var(--k-accordion-radius, var(--k-radius-xl));
  background: var(--k-accordion-bg, var(--k-bg-elevated));
  box-shadow: var(--k-shadow-xs), var(--k-highlight);
  overflow: hidden;
}
.k-accordion--flush { border: 0; border-radius: 0; background: none; box-shadow: none; }
.k-accordion__item + .k-accordion__item { border-block-start: 1px solid var(--k-border-secondary); }
.k-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-space-4);
  padding: var(--k-space-4) var(--k-accordion-padding, var(--k-space-5));
  color: var(--k-text-primary);
  font-weight: var(--k-weight-semibold);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--k-duration-fast);
}
.k-accordion__trigger::-webkit-details-marker { display: none; }
.k-accordion__trigger:hover { background: var(--k-bg-hover); }
.k-accordion__trigger:focus-visible { outline: 2px solid transparent; box-shadow: inset var(--k-ring-brand); }
.k-accordion__trigger::after {
  content: "";
  flex-shrink: 0;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  background: var(--k-text-tertiary);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: rotate var(--k-duration-normal) var(--k-ease-standard);
}
.k-accordion__item[open] > .k-accordion__trigger::after { rotate: 180deg; }
.k-accordion__content { padding: 0 var(--k-accordion-padding, var(--k-space-5)) var(--k-accordion-padding, var(--k-space-5)); color: var(--k-text-tertiary); line-height: var(--k-leading-normal); }
/* انیمیشن باز شدن در مرورگرهای جدید */
@supports (interpolate-size: allow-keywords) {
  .k-accordion { interpolate-size: allow-keywords; }
  .k-accordion__item::details-content { block-size: 0; overflow: clip; transition: block-size var(--k-duration-normal) var(--k-ease-standard), content-visibility var(--k-duration-normal) allow-discrete; }
  .k-accordion__item[open]::details-content { block-size: auto; }
}
@media (forced-colors: active) { .k-accordion__trigger::after { background: CanvasText; } }

/* فرم نشانی ایرانی — استان و شهر، نشانی، پلاک، واحد و کد پستی؛ با نقشه (k-address--map) استان روی نقشه هم انتخاب می‌شود
 * <fieldset class="k-address">
 *   <legend class="k-address__legend">نشانی</legend>
 *   <div class="k-address__fields">
 *     <div class="k-field k-address__province">…</div> … k-address__city | __street | __plaque | __unit | __postal
 *   </div>
 * </fieldset>
 */
.k-address {
  display: grid;
  gap: var(--k-space-4) var(--k-space-6);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.k-address__legend {
  margin-block-end: var(--k-space-4);
  padding: 0;
  color: var(--k-text-primary);
  font-size: var(--k-text-md);
  font-weight: var(--k-weight-semibold);
}
.k-address__fields {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--k-space-4);
  align-content: start;
  container-type: inline-size;
}
.k-address__fields > * { grid-column: span 12; min-inline-size: 0; }
.k-address__province, .k-address__city, .k-address__postal { grid-column: span 6; }
.k-address__plaque, .k-address__unit { grid-column: span 3; }

/* نقشه کنار فیلدها؛ در عرض کم زیر آن‌ها */
.k-address--map { grid-template-columns: minmax(0, 1.4fr) minmax(12rem, 1fr); align-items: start; }
.k-address--map > .k-address__legend { grid-column: 1 / -1; }
.k-address__map { align-self: center; }

/* ستون‌ها به عرض خود فرم بستگی دارند، نه صفحه */
@container (max-width: 30rem) {
  .k-address__province, .k-address__city { grid-column: span 12; }
  .k-address__plaque, .k-address__unit { grid-column: span 6; }
  .k-address__postal { grid-column: span 12; }
}
@media (max-width: 40rem) {
  .k-address--map { grid-template-columns: minmax(0, 1fr); }
  .k-address__map { max-inline-size: 18rem; justify-self: center; }
}

/* هشدار (Alert) — به سبک Untitled UI: سطح خنثی، رنگ فقط در آیکون شاخص
 * <div class="k-alert k-alert--warning" role="alert">  ← role="status" برای پیام‌های غیرفوری
 *   <span class="k-alert__icon" aria-hidden="true"><svg>…</svg></span>
 *   <div class="k-alert__content">
 *     <p class="k-alert__title">عنوان</p>
 *     <p class="k-alert__description">توضیح</p>
 *     <div class="k-alert__actions">…</div>
 *   </div>
 *   <button class="k-btn k-btn--tertiary k-btn--icon k-btn--sm k-alert__close" aria-label="بستن">×</button>
 * </div>
 * رنگ‌ها: neutral | brand | info | success | warning | error
 * k-alert--tinted: پس‌زمینهٔ رنگی کم‌رنگ به‌جای سطح خنثی
 *
 * متغیرها: --k-alert-radius  --k-alert-padding  --k-alert-bg
 */
.k-alert {
  --_accent: var(--k-text-tertiary);
  --_bg: var(--k-alert-bg, var(--k-bg-secondary));

  display: flex;
  align-items: flex-start;
  gap: var(--k-space-4);
  /* همهٔ هشدارهای یک ستون هم‌عرض باشند، نه به اندازهٔ متنشان */
  inline-size: 100%;
  box-sizing: border-box;
  padding: var(--k-alert-padding, calc(1rem * var(--k-density)));
  border: 1px solid var(--k-border-primary);
  border-radius: var(--k-alert-radius, var(--k-radius-xl));
  background: var(--_bg);
  color: var(--k-text-tertiary);
  font-size: var(--k-text-sm);
  box-shadow: var(--k-shadow-xs), var(--k-highlight);
}

.k-alert--brand { --_accent: var(--k-text-brand); }
.k-alert--info { --_accent: var(--k-text-info); }
.k-alert--success { --_accent: var(--k-text-success); }
.k-alert--warning { --_accent: var(--k-text-warning); }
.k-alert--error { --_accent: var(--k-text-error); }

.k-alert--tinted {
  --_bg: var(--k-alert-bg, color-mix(in srgb, var(--_accent) 8%, var(--k-bg-primary)));
  border-color: color-mix(in srgb, var(--_accent) 32%, transparent);
}

/* آیکون شاخص با دو حلقهٔ هم‌مرکز (featured icon) */
.k-alert__icon {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0.375rem;
  color: var(--_accent);
}
.k-alert__icon::before,
.k-alert__icon::after {
  content: "";
  position: absolute;
  border: 2px solid var(--_accent);
  border-radius: var(--k-radius-full);
}
.k-alert__icon::before { inset: -0.3125rem; opacity: 0.3; }
.k-alert__icon::after { inset: -0.625rem; opacity: 0.1; }
.k-alert__icon svg { inline-size: 100%; block-size: 100%; }

.k-alert__content {
  flex: 1;
  display: grid;
  gap: var(--k-space-1);
  min-inline-size: 0;
  padding-block-start: 0.125rem;
}

.k-alert__title {
  margin: 0;
  color: var(--k-text-secondary);
  font-weight: var(--k-weight-semibold);
}

.k-alert__description { margin: 0; }

.k-alert__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-space-3);
  margin-block-start: var(--k-space-2);
}

.k-alert__close { margin-block: -0.375rem; margin-inline-end: -0.375rem; }

@media (forced-colors: active) {
  .k-alert { border-color: CanvasText; }
}

/* فشرده */
.k-alert--sm { gap: var(--k-space-3); padding: var(--k-alert-padding, calc(0.75rem * var(--k-density))); border-radius: var(--k-alert-radius, var(--k-radius-lg)); }
.k-alert--sm .k-alert__icon { inline-size: 1rem; block-size: 1rem; margin: 0.25rem; }
.k-alert--sm .k-alert__icon::before, .k-alert--sm .k-alert__icon::after { display: none; }
/* نوار بالای صفحه */
.k-alert--banner { align-items: center; border-inline: 0; border-block-start: 0; border-radius: 0; box-shadow: none; }
.k-alert--banner .k-alert__content { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-1) var(--k-space-3); padding: 0; }
.k-alert--banner .k-alert__actions { margin: 0; }
.k-alert--banner .k-alert__icon::after { display: none; }

/* آواتار
 * <span class="k-avatar k-avatar--lg">
 *   <img class="k-avatar__image" src="…" alt="سارا احمدی">   ← یا حروف اول: <span aria-hidden="true">س‌ا</span> + role="img" aria-label روی والد
 *   <span class="k-avatar__status k-avatar__status--online"></span>
 * </span>
 * اندازه‌ها: xs | sm | md | lg | xl | 2xl — شکل: k-avatar--square — رنگ: k-avatar--brand
 * گروه: <div class="k-avatar-group">…</div>
 *
 * متغیرها: --k-avatar-size  --k-avatar-radius  --k-avatar-bg  --k-avatar-fg
 */
.k-avatar {
  --_s: var(--k-avatar-size, 2.5rem);

  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: var(--_s);
  block-size: var(--_s);
  border-radius: var(--k-avatar-radius, var(--k-radius-full));
  background: var(--k-avatar-bg, var(--k-bg-tertiary));
  color: var(--k-avatar-fg, var(--k-text-secondary));
  font-size: calc(var(--_s) * 0.34);
  font-weight: var(--k-weight-semibold);
  line-height: 1;
  user-select: none;
  /* حاشیهٔ داخلی ظریف مثل Untitled UI */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-text-primary) 8%, transparent);
}

.k-avatar__image {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.k-avatar--xs { --_s: var(--k-avatar-size, 1.5rem); }
.k-avatar--sm { --_s: var(--k-avatar-size, 2rem); }
.k-avatar--lg { --_s: var(--k-avatar-size, 3rem); }
.k-avatar--xl { --_s: var(--k-avatar-size, 3.5rem); }
.k-avatar--2xl { --_s: var(--k-avatar-size, 4rem); }

.k-avatar--square { border-radius: var(--k-avatar-radius, var(--k-radius-md)); }
.k-avatar--brand {
  background: var(--k-avatar-bg, var(--k-bg-brand-subtle));
  color: var(--k-avatar-fg, var(--k-text-brand));
}

/* رنگ‌ها (همه جفت متن/پس‌زمینهٔ بررسی‌شده با کنتراست AA) */
.k-avatar--info { background: var(--k-avatar-bg, var(--k-bg-info-subtle)); color: var(--k-avatar-fg, var(--k-text-info)); }
.k-avatar--success { background: var(--k-avatar-bg, var(--k-bg-success-subtle)); color: var(--k-avatar-fg, var(--k-text-success)); }
.k-avatar--warning { background: var(--k-avatar-bg, var(--k-bg-warning-subtle)); color: var(--k-avatar-fg, var(--k-text-warning)); }
.k-avatar--error { background: var(--k-avatar-bg, var(--k-bg-error-subtle)); color: var(--k-avatar-fg, var(--k-text-error)); }

.k-avatar__status {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: max(0.5rem, calc(var(--_s) * 0.28));
  block-size: max(0.5rem, calc(var(--_s) * 0.28));
  border: 2px solid var(--k-bg-primary);
  border-radius: var(--k-radius-full);
  background: var(--k-border-input);
}
.k-avatar__status--online { background: var(--k-text-success); }
.k-avatar__status--busy { background: var(--k-text-error); }
.k-avatar__status--away { background: var(--k-text-warning); }

.k-avatar-group { display: inline-flex; align-items: center; }
.k-avatar-group > .k-avatar {
  box-shadow: 0 0 0 2px var(--k-bg-primary);
}
.k-avatar-group > .k-avatar + .k-avatar {
  margin-inline-start: calc(var(--_s) * -0.28);
}

@media (forced-colors: active) {
  .k-avatar { border: 1px solid CanvasText; }
  .k-avatar__status { background: CanvasText; }
}

/* نشان (Badge)
 * <span class="k-badge k-badge--success"><span class="k-badge__dot" aria-hidden="true"></span>فعال</span>
 * رنگ‌ها: neutral | brand | error | warning | success | info — اندازه‌ها: sm | md | lg
 * شکل: پیش‌فرض گرد (pill)؛ k-badge--square برای گوشهٔ کم
 *
 * سبک‌ها: پیش‌فرض کم‌رنگ | k-badge--solid | k-badge--outline — حذف‌شدنی: k-badge__remove
 * متغیرها: --k-badge-radius  --k-badge-font-weight  --k-badge-padding
 */
.k-badge {
  --_bg: var(--k-bg-tertiary);
  --_fg: var(--k-text-secondary);
  --_px: var(--k-badge-padding, 0.625rem);

  display: inline-flex;
  align-items: center;
  gap: var(--k-space-1);
  padding-block: 0.125rem;
  padding-inline: var(--_px);
  border: 1px solid color-mix(in srgb, var(--_fg) 20%, transparent);
  border-radius: var(--k-badge-radius, var(--k-radius-full));
  background: var(--_bg);
  color: var(--_fg);
  font-size: var(--k-text-sm);
  font-weight: var(--k-badge-font-weight, var(--k-weight-medium));
  line-height: 1.5;
  white-space: nowrap;
}

.k-badge--brand { --_bg: var(--k-bg-brand-subtle); --_fg: var(--k-text-brand); }
.k-badge--error { --_bg: var(--k-bg-error-subtle); --_fg: var(--k-text-error); }
.k-badge--warning { --_bg: var(--k-bg-warning-subtle); --_fg: var(--k-text-warning); }
.k-badge--success { --_bg: var(--k-bg-success-subtle); --_fg: var(--k-text-success); }
.k-badge--info { --_bg: var(--k-bg-info-subtle); --_fg: var(--k-text-info); }

.k-badge--sm { --_px: 0.5rem; font-size: var(--k-text-xs); }
.k-badge--lg { --_px: 0.75rem; padding-block: 0.25rem; }
.k-badge--square { border-radius: var(--k-badge-radius, var(--k-radius-sm)); }

/* پررنگ: رنگ متن پس‌زمینه می‌شود؛ کنتراست همان جفت بررسی‌شدهٔ متن/پس‌زمینه است */
.k-badge.k-badge--solid { background: var(--_fg); color: var(--k-bg-primary); border-color: transparent; }
.k-badge--outline { background: transparent; border-color: color-mix(in srgb, var(--_fg) 45%, transparent); }

.k-badge__icon { display: inline-flex; }
.k-badge__icon svg { inline-size: 0.875em; block-size: 0.875em; }
.k-badge--removable { padding-inline-end: calc(var(--_px) * 0.4); }
.k-badge__remove {
  display: inline-grid;
  place-items: center;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin-inline-start: 0.125rem;
  padding: 0;
  border: 0;
  border-radius: var(--k-radius-full);
  background: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
}
.k-badge__remove:hover { opacity: 1; background: color-mix(in srgb, currentColor 15%, transparent); }
.k-badge__remove:focus-visible { outline: 2px solid transparent; opacity: 1; box-shadow: var(--k-ring-brand); }
.k-badge__remove svg { inline-size: 0.75rem; block-size: 0.75rem; }

.k-badge__dot {
  inline-size: 0.375rem;
  block-size: 0.375rem;
  border-radius: var(--k-radius-full);
  background: currentColor;
}
.k-badge svg { inline-size: 0.875em; block-size: 0.875em; }

@media (forced-colors: active) {
  .k-badge { border-color: CanvasText; }
}

/* نوار اطلاع‌رسانی بالای صفحه (Banner)
 * <div class="k-banner k-banner--brand" role="region" aria-label="اطلاعیه">…</div>
 * رنگ‌ها: neutral (پیش‌فرض) | brand | warning | error
 */
.k-banner {
  --_accent: var(--k-text-tertiary);
  --_bg: var(--k-bg-secondary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-space-2) var(--k-space-4);
  padding: var(--k-space-3) var(--k-space-4);
  border: 1px solid var(--k-border-secondary);
  border-radius: var(--k-banner-radius, var(--k-radius-xl));
  background: var(--_bg);
  box-shadow: var(--k-shadow-xs), var(--k-highlight);
  color: var(--k-text-secondary);
  font-size: var(--k-text-sm);
}
.k-banner--flush { border-inline: 0; border-block-start: 0; border-radius: 0; box-shadow: none; }
.k-banner--brand { --_accent: var(--k-text-brand); --_bg: var(--k-bg-brand-subtle); }
.k-banner--warning { --_accent: var(--k-text-warning); --_bg: var(--k-bg-warning-subtle); }
.k-banner--error { --_accent: var(--k-text-error); --_bg: var(--k-bg-error-subtle); }
.k-banner__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid var(--k-border-primary);
  border-radius: var(--k-radius-md);
  background: var(--k-bg-elevated);
  color: var(--_accent);
  box-shadow: var(--k-shadow-xs);
}
.k-banner__icon svg { inline-size: 1.125rem; block-size: 1.125rem; }
.k-banner__text { flex: 1 1 16rem; min-inline-size: 0; margin: 0; }
.k-banner__text strong { color: var(--k-text-primary); font-weight: var(--k-weight-semibold); }
.k-banner__actions { display: flex; align-items: center; gap: var(--k-space-2); }
.k-banner__close { margin-inline-start: auto; }

/* مسیر صفحه (Breadcrumb)
 * <nav class="k-breadcrumb" aria-label="مسیر"><ol>
 *   <li><a class="k-breadcrumb__link" href="/">خانه</a></li>
 *   <li><span class="k-breadcrumb__link" aria-current="page">امنیت</span></li>
 * </ol></nav>
 * جداکننده: پیش‌فرض فلش؛ k-breadcrumb--slash برای «/»
 */
.k-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--k-text-sm);
}
.k-breadcrumb li { display: inline-flex; align-items: center; gap: var(--k-space-1); min-inline-size: 0; }

/* جداکننده */
.k-breadcrumb li + li::before {
  content: "";
  flex-shrink: 0;
  inline-size: 1rem;
  block-size: 1rem;
  background: var(--k-border-primary);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 5 5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}
[dir="rtl"] .k-breadcrumb li + li::before { transform: scaleX(-1); }
.k-breadcrumb--slash li + li::before {
  content: "/";
  inline-size: auto;
  block-size: auto;
  background: none;
  mask: none;
  transform: none !important;
  color: var(--k-border-primary);
  font-size: var(--k-text-md);
}

.k-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-1_5);
  max-inline-size: var(--k-breadcrumb-max-item, 14rem);
  min-block-size: 1.75rem;
  padding: var(--k-space-1) var(--k-space-2);
  border: 0;
  border-radius: var(--k-radius-md);
  background: none;
  color: var(--k-text-tertiary);
  font: inherit;
  font-weight: var(--k-weight-semibold);
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--k-duration-fast), color var(--k-duration-fast);
}
.k-breadcrumb__text { overflow: hidden; text-overflow: ellipsis; }
.k-breadcrumb__link svg { inline-size: 1.125rem; block-size: 1.125rem; flex-shrink: 0; }
a.k-breadcrumb__link:hover, button.k-breadcrumb__link:hover { background: var(--k-bg-hover); color: var(--k-text-secondary); }
.k-breadcrumb__link:focus-visible { outline: 2px solid transparent; box-shadow: var(--k-ring-brand); }

/* صفحهٔ فعلی: متمایز ولی آرام */
.k-breadcrumb__link[aria-current="page"] {
  background: var(--k-bg-active);
  color: var(--k-text-primary);
  cursor: default;
}

/* فقط آیکون (مثل خانه) */
.k-breadcrumb__link--icon { padding-inline: var(--k-space-1_5); }

@media (forced-colors: active) {
  .k-breadcrumb li + li::before { background: CanvasText; }
  .k-breadcrumb__link[aria-current="page"] { outline: 1px solid CanvasText; }
}

/* گروه دکمه‌های چسبیده (Button group)
 * <div class="k-btn-group" role="group" aria-label="قالب‌بندی"><button class="k-btn">…</button>…</div>
 */
.k-btn-group { display: inline-flex; isolation: isolate; border-radius: var(--k-btn-radius, var(--k-radius-md)); box-shadow: var(--k-shadow-xs); }
.k-btn-group > .k-btn { border-radius: 0; box-shadow: var(--k-shadow-skeuomorphic); }
.k-btn-group > .k-btn:not(:first-child) { margin-inline-start: -1px; }
.k-btn-group > .k-btn:first-child { border-start-start-radius: inherit; border-end-start-radius: inherit; }
.k-btn-group > .k-btn:last-child { border-start-end-radius: inherit; border-end-end-radius: inherit; }
.k-btn-group > .k-btn:is(:hover, :focus-visible) { z-index: 1; }
.k-btn-group > .k-btn:focus-visible { box-shadow: var(--k-shadow-skeuomorphic), var(--k-ring-brand); }
.k-btn-group > .k-btn[aria-pressed="true"], .k-btn-group > .k-btn[aria-current] { background: var(--k-bg-active); color: var(--k-text-primary); }

/* دکمه — به سبک Untitled UI: سایهٔ اسکئومورفیک و حلقهٔ فوکوس نرم
 * <button class="k-btn k-btn--primary k-btn--md">ثبت</button>
 * گونه‌ها: primary | secondary | tertiary | link | danger | danger-secondary
 * اندازه‌ها: xs | sm | md | lg | xl — شکل: k-btn--pill | k-btn--square — حالت‌ها: disabled، aria-disabled، aria-busy="true"
 *
 * متغیرهای قابل‌بازنویسی (روی :root یا هر والدی):
 *   --k-btn-height-{sm,md,lg,xl}  --k-btn-padding-{sm,md,lg,xl}
 *   --k-btn-radius  --k-btn-font-weight  --k-btn-gap
 */
.k-btn {
  --_h: var(--k-btn-height-md, calc(2.5rem * var(--k-density)));
  --_px: var(--k-btn-padding-md, calc(0.875rem * var(--k-density)));
  --_fs: var(--k-text-sm);
  --_bg: var(--k-btn-secondary-bg, var(--k-bg-elevated));
  --_bg-hover: color-mix(in srgb, var(--_bg), var(--k-text-primary) 5%);
  --_fg: var(--k-text-secondary);
  --_fg-hover: var(--k-text-primary);
  --_border: var(--k-border-primary);
  --_shadow: var(--k-shadow-xs), var(--k-shadow-skeuomorphic);
  --_ring: var(--k-ring-brand);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-btn-gap, var(--k-space-1_5));
  block-size: var(--_h);
  /* حداقل ناحیهٔ لمس WCAG 2.5.8 */
  min-block-size: 24px;
  min-inline-size: 24px;
  padding-inline: var(--_px);
  border: 1px solid var(--_border);
  border-radius: var(--k-btn-radius, var(--k-radius-md));
  background: var(--_bg);
  color: var(--_fg);
  box-shadow: var(--_shadow);
  font: inherit;
  font-size: var(--_fs);
  font-weight: var(--k-btn-font-weight, var(--k-weight-semibold));
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--k-duration-fast) var(--k-ease-standard),
    color var(--k-duration-fast) var(--k-ease-standard),
    box-shadow var(--k-duration-fast) var(--k-ease-standard);
}

.k-btn:hover { background: var(--_bg-hover); color: var(--_fg-hover); }
/* حالت فشرده: کمی تیره‌تر، بدون جابه‌جایی که چشم را اذیت کند */
.k-btn:active:not(:disabled, [aria-disabled="true"]) { background: color-mix(in srgb, var(--_bg-hover), #000 8%); }
.k-btn:is(.k-btn--tertiary, .k-btn--link):active:not(:disabled) { background: var(--_bg-hover); }

.k-btn:focus-visible {
  /* outline شفاف در حالت forced-colors ویندوز قابل‌مشاهده می‌شود */
  outline: 2px solid transparent;
  box-shadow: var(--_shadow), var(--_ring);
}

.k-btn:disabled,
.k-btn[aria-disabled="true"]:not([aria-busy="true"]) {
  --_bg: var(--k-bg-secondary);
  --_fg: var(--k-text-quaternary);
  --_border: var(--k-border-secondary);
  --_shadow: var(--k-shadow-xs);
  cursor: not-allowed;
}
.k-btn[aria-disabled="true"]:hover { background: var(--_bg); color: var(--_fg); }


/* گونه‌ها */
.k-btn--primary {
  --_bg: var(--k-bg-brand);
  --_bg-hover: var(--k-bg-brand-hover);
  --_fg: var(--k-text-on-brand);
  --_fg-hover: var(--k-text-on-brand);
  --_border: transparent;
  --_shadow: var(--k-shadow-xs), var(--k-shadow-skeuomorphic);
}
/* حاشیهٔ داخلی سفید که به پایین محو می‌شود (Untitled UI) */
.k-btn:is(.k-btn--primary, .k-btn--danger)::before {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1px solid rgb(255 255 255 / var(--k-btn-highlight, 0.12));
  border-radius: inherit;
  mask: linear-gradient(to bottom, #000, transparent);
  pointer-events: none;
}
.k-btn:is(.k-btn--primary, .k-btn--danger):is(:disabled, [aria-disabled="true"]:not([aria-busy="true"]))::before { display: none; }
.k-btn--tertiary {
  --_bg: transparent;
  --_bg-hover: var(--k-bg-hover);
  --_border: transparent;
  --_shadow: none;
}
.k-btn--link {
  --_bg: transparent;
  --_bg-hover: transparent;
  --_fg: var(--k-text-brand);
  --_fg-hover: var(--k-text-brand);
  --_border: transparent;
  --_shadow: none;
  --_h: auto;
  --_px: 0;
}
.k-btn--link:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.k-btn--danger {
  --_bg: var(--k-bg-error);
  --_bg-hover: var(--k-bg-error-hover);
  --_fg: var(--k-text-on-error);
  --_fg-hover: var(--k-text-on-error);
  --_border: transparent;
  --_shadow: var(--k-shadow-xs), var(--k-shadow-skeuomorphic);
  --_ring: var(--k-ring-error);
}
.k-btn--danger-secondary {
  --_fg: var(--k-text-error);
  --_fg-hover: var(--k-text-error);
  --_ring: var(--k-ring-error);
}

/* اندازه‌ها */
.k-btn--xs {
  --_h: var(--k-btn-height-xs, calc(1.75rem * var(--k-density)));
  --_px: var(--k-btn-padding-xs, calc(0.5rem * var(--k-density)));
  --_fs: var(--k-text-xs);
  gap: var(--k-space-1);
}
.k-btn--sm {
  --_h: var(--k-btn-height-sm, calc(2.25rem * var(--k-density)));
  --_px: var(--k-btn-padding-sm, calc(0.75rem * var(--k-density)));
}
.k-btn--lg {
  --_h: var(--k-btn-height-lg, calc(2.75rem * var(--k-density)));
  --_px: var(--k-btn-padding-lg, calc(1.125rem * var(--k-density)));
  --_fs: var(--k-text-md);
}
.k-btn--xl {
  --_h: var(--k-btn-height-xl, calc(3rem * var(--k-density)));
  --_px: var(--k-btn-padding-xl, calc(1.25rem * var(--k-density)));
  --_fs: var(--k-text-md);
}
.k-btn--icon { padding-inline: 0; inline-size: var(--_h); }
.k-btn--pill { border-radius: var(--k-radius-full); }
.k-btn--pill:not(.k-btn--icon) { --_px: calc(var(--k-btn-padding-md, 0.875rem) + 0.25rem); }
.k-btn--square { border-radius: var(--k-radius-sm); }
/* لینک غیرفعال (بدون href) */
a.k-btn[aria-disabled="true"]:not([aria-busy="true"]) {
  --_bg: var(--k-bg-secondary);
  --_fg: var(--k-text-quaternary);
  --_border: var(--k-border-secondary);
  cursor: not-allowed;
}
.k-btn--block { display: flex; inline-size: 100%; }

.k-btn svg { inline-size: 1.25em; block-size: 1.25em; flex-shrink: 0; }

/* آیکون‌های جهت‌دار (فلش و…) در RTL آینه می‌شوند */
[dir="rtl"] .k-btn [data-k-mirror] { transform: scaleX(-1); }

/* در حال بارگذاری */
.k-btn[aria-busy="true"] {
  color: transparent;
  cursor: progress;
}
.k-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inline-size: 1.1em;
  block-size: 1.1em;
  border: 2px solid var(--_fg);
  border-block-start-color: transparent;
  border-radius: var(--k-radius-full);
  animation: k-spin 0.7s linear infinite;
}

@keyframes k-spin { to { rotate: 360deg; } }

/* حالت کنتراست بالای ویندوز */
@media (forced-colors: active) {
  .k-btn { border-color: ButtonText; }
  .k-btn--primary, .k-btn--danger { border-color: ButtonText; }
  .k-btn:disabled, .k-btn[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
  .k-btn[aria-busy="true"]::after { border-color: ButtonText; border-block-start-color: transparent; }
}

/* تقویم شمسی و انتخاب تاریخ
 * ساختار را کامپوننت React می‌سازد (Calendar و DatePicker)؛ این استایل برای هر پیاده‌سازی دیگری هم قابل‌استفاده است.
 *
 * متغیرها: --k-calendar-day-size  --k-calendar-radius  --k-calendar-bg  --k-datepicker-width
 */
.k-calendar {
  --_day: var(--k-calendar-day-size, calc(2.5rem * var(--k-density)));

  display: grid;
  gap: var(--k-space-2);
  inline-size: max-content;
  max-inline-size: 100%;
  color: var(--k-text-primary);
  font-size: var(--k-text-sm);
}

.k-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-space-2);
}

.k-calendar__selects { display: flex; gap: var(--k-space-1); }

.k-calendar__select {
  appearance: none;
  min-block-size: 2.25rem;
  padding-block: 0;
  padding-inline: var(--k-space-3) var(--k-space-6);
  border: 1px solid transparent;
  border-radius: var(--k-radius-md);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23687491' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E") no-repeat,
    transparent;
  background-position: left var(--k-space-1_5) center;
  background-size: 1rem;
  color: var(--k-text-primary);
  font: inherit;
  font-weight: var(--k-weight-semibold);
  cursor: pointer;
}
[dir="ltr"] .k-calendar__select { background-position: right var(--k-space-1_5) center; }
.k-calendar__select:hover { background-color: var(--k-bg-hover); }
.k-calendar__select:focus-visible { outline: 2px solid transparent; border-color: var(--k-border-brand); box-shadow: var(--k-ring-brand); }
.k-calendar__select option { background: var(--k-bg-elevated); color: var(--k-text-primary); }

.k-calendar__grid { border-collapse: collapse; margin-inline: auto; }
.k-calendar__grid th {
  block-size: 2rem;
  padding: 0;
  color: var(--k-text-tertiary);
  font-size: var(--k-text-xs);
  font-weight: var(--k-weight-medium);
  text-align: center;
}
.k-calendar__grid td { padding: 1px; text-align: center; }

.k-calendar__day {
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: var(--_day);
  block-size: var(--_day);
  padding: 0;
  border: 0;
  border-radius: var(--k-calendar-radius, var(--k-radius-full));
  background: transparent;
  color: var(--k-text-secondary);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--k-duration-fast) var(--k-ease-standard);
}
.k-calendar__day:hover { background: var(--k-bg-hover); color: var(--k-text-primary); }
.k-calendar__day:focus-visible { outline: 2px solid transparent; box-shadow: var(--k-ring-brand); }

/* امروز: نقطهٔ زیر عدد */
.k-calendar__day[aria-current="date"] { color: var(--k-text-brand); font-weight: var(--k-weight-bold); }
.k-calendar__day[aria-current="date"]::after {
  content: "";
  position: absolute;
  inset-block-end: 0.3rem;
  inline-size: 0.25rem;
  block-size: 0.25rem;
  border-radius: 50%;
  background: currentColor;
}

[aria-selected="true"] > .k-calendar__day {
  background: var(--k-bg-brand);
  color: var(--k-text-on-brand);
  font-weight: var(--k-weight-semibold);
  box-shadow: var(--k-shadow-xs), var(--k-shadow-skeuomorphic);
}
[aria-selected="true"] > .k-calendar__day:focus-visible { box-shadow: var(--k-ring-brand); }

/* بازهٔ تاریخ */
.k-calendar__grid td[data-in-range] { background: var(--k-bg-brand-subtle); }
.k-calendar__grid td[data-range-start] { border-start-start-radius: var(--k-radius-full); border-end-start-radius: var(--k-radius-full); }
.k-calendar__grid td[data-range-end] { border-start-end-radius: var(--k-radius-full); border-end-end-radius: var(--k-radius-full); }
.k-calendar__grid td[data-in-range] > .k-calendar__day { color: var(--k-text-primary); }
.k-calendar__grid td:is([data-range-start], [data-range-end]) > .k-calendar__day { background: var(--k-bg-brand); color: var(--k-text-on-brand); font-weight: var(--k-weight-semibold); }
.k-calendar__grid td[data-preview] { background: color-mix(in srgb, var(--k-bg-brand-subtle) 60%, transparent); }
.k-calendars { display: flex; flex-wrap: wrap; gap: var(--k-space-6); }

.k-calendar__day[aria-disabled="true"] {
  color: var(--k-text-quaternary);
  text-decoration: line-through;
  cursor: not-allowed;
}
.k-calendar__day[aria-disabled="true"]:hover { background: transparent; }

.k-calendar__footer {
  display: flex;
  justify-content: center;
  padding-block-start: var(--k-space-2);
  border-block-start: 1px solid var(--k-border-secondary);
}

/* انتخاب تاریخ: فیلد + تقویم شناور */
.k-datepicker { position: relative; }
.k-datepicker .k-input { padding-inline-end: var(--k-space-1); }
.k-datepicker__toggle { margin-block: -0.25rem; }

.k-datepicker__popover {
  position: absolute;
  inset-inline-end: 0;
  z-index: var(--k-z-dropdown);
  inline-size: var(--k-datepicker-width, max-content);
  max-inline-size: calc(100vw - 2rem);
  padding: var(--k-space-4);
  border: 1px solid var(--k-border-secondary);
  border-radius: var(--k-radius-xl);
  background: var(--k-calendar-bg, var(--k-bg-elevated));
  box-shadow: var(--k-shadow-xl), var(--k-highlight);
  animation: k-pop-in var(--k-duration-fast) var(--k-ease-standard);
}
@keyframes k-pop-in { from { opacity: 0; translate: 0 -4px; } }

/* متن کوچک داخل فیلد، مثل نام بانک */
.k-input__meta {
  color: var(--k-text-tertiary);
  font-size: var(--k-text-sm);
  white-space: nowrap;
}

@media (forced-colors: active) {
  [aria-selected="true"] > .k-calendar__day { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .k-calendar__day[aria-current="date"] { outline: 1px solid CanvasText; }
  .k-datepicker__popover { border-color: CanvasText; }
}

/* نشان بانک داخل فیلد (کارت، شبا): لوگو + نام */
.k-bank {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-1_5);
  color: var(--k-text-tertiary);
  font-size: var(--k-text-sm);
  white-space: nowrap;
}
.k-bank__logo {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  flex-shrink: 0;
  border-radius: var(--k-radius-sm);
  animation: k-pop-in var(--k-duration-normal) var(--k-ease-standard);
}
/* لوگوهای تیره روی پس‌زمینهٔ تیره دیده شوند */
[data-theme="dark"] .k-bank__logo, :root:not([data-theme]) .k-bank__logo {
  padding: 1px;
  background: #fff;
}

/* بازهٔ تاریخ (DateRangePicker) */
.k-daterange__trigger { display: flex; align-items: center; gap: var(--k-space-2); text-align: start; cursor: pointer; }
.k-daterange__trigger svg { inline-size: 1.25rem; block-size: 1.25rem; flex-shrink: 0; color: var(--k-text-tertiary); }
.k-daterange__trigger[data-placeholder] { color: var(--k-text-tertiary); }
.k-daterange__popover { display: flex; gap: var(--k-space-4); inset-inline-end: auto; inset-inline-start: 0; inset-block-start: calc(100% + 6px); }
.k-daterange__presets { display: grid; align-content: start; gap: 2px; margin: 0; padding: 0 0 0 0; padding-inline-end: var(--k-space-4); border-inline-end: 1px solid var(--k-border-secondary); list-style: none; }
.k-daterange__preset { inline-size: 100%; padding: var(--k-space-2) var(--k-space-3); border: 0; border-radius: var(--k-radius-md); background: none; color: var(--k-text-secondary); font: inherit; font-size: var(--k-text-sm); font-weight: var(--k-weight-medium); text-align: start; white-space: nowrap; cursor: pointer; }
.k-daterange__preset:hover { background: var(--k-bg-hover); color: var(--k-text-primary); }
.k-daterange__preset:focus-visible { outline: 2px solid transparent; box-shadow: var(--k-ring-brand); }
.k-daterange__preset[aria-pressed="true"] { background: var(--k-bg-active); color: var(--k-text-primary); }
.k-daterange__main { display: grid; gap: var(--k-space-3); }
.k-daterange__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-2); padding-block-start: var(--k-space-3); border-block-start: 1px solid var(--k-border-secondary); }
.k-daterange__summary { flex: 1; min-inline-size: 10rem; color: var(--k-text-tertiary); font-size: var(--k-text-sm); }
@media (max-width: 40rem) {
  .k-daterange__popover { flex-direction: column; }
  .k-daterange__presets { display: flex; flex-wrap: wrap; padding-inline-end: 0; padding-block-end: var(--k-space-3); border-inline-end: 0; border-block-end: 1px solid var(--k-border-secondary); }
  .k-daterange__preset { inline-size: auto; }
}

/* تعطیلات: رقم قرمز، مثل تقویم‌های کاغذی */
.k-calendar__day[data-holiday] { color: var(--k-text-error); }
.k-calendar__day[data-holiday]:hover { color: var(--k-text-error); }
.k-calendar__grid td[aria-selected="true"] > .k-calendar__day[data-holiday] { color: var(--k-text-on-brand); }

/* کارت
 * <article class="k-card">
 *   <header class="k-card__header">
 *     <h3 class="k-card__title">عنوان</h3>
 *     <p class="k-card__description">توضیح</p>
 *   </header>
 *   <div class="k-card__body">...</div>
 *   <footer class="k-card__footer">...دکمه‌ها</footer>
 * </article>
 * گونه‌ها: k-card--flat (بدون سایه) | k-card--interactive (برای کارت قابل‌کلیک، همراه با <a> یا <button>)
 *
 * متغیرها: --k-card-padding  --k-card-radius  --k-card-bg  --k-card-border  --k-card-shadow
 */
.k-card {
  --_p: var(--k-card-padding, calc(1.5rem * var(--k-density)));

  display: flex;
  flex-direction: column;
  border: 1px solid var(--k-card-border, var(--k-border-secondary));
  border-radius: var(--k-card-radius, var(--k-radius-xl));
  background: var(--k-card-bg, var(--k-bg-elevated));
  color: var(--k-text-primary);
  box-shadow: var(--k-card-shadow, var(--k-shadow-xs)), var(--k-highlight);
  overflow: clip;
}

.k-card__header,
.k-card__body,
.k-card__footer { padding: var(--_p); }

.k-card__header + .k-card__body { padding-block-start: 0; }

.k-card__header { display: grid; gap: var(--k-space-1); }

.k-card__title {
  margin: 0;
  font-size: var(--k-text-lg);
  font-weight: var(--k-weight-semibold);
  line-height: var(--k-leading-tight);
}

.k-card__description {
  margin: 0;
  color: var(--k-text-tertiary);
  font-size: var(--k-text-sm);
}

.k-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-space-3);
  justify-content: flex-end;
  padding-block: calc(var(--_p) * 0.66);
  border-block-start: 1px solid var(--k-border-secondary);
  margin-block-start: auto;
}

.k-card__media { display: block; inline-size: 100%; object-fit: cover; background: var(--k-bg-tertiary); }

.k-card--flat { box-shadow: var(--k-highlight); }
.k-card--elevated { border-color: transparent; box-shadow: var(--k-card-shadow, var(--k-shadow-lg)), 0 0 0 1px var(--k-border-secondary), var(--k-highlight); }
.k-card--filled { border-color: transparent; background: var(--k-card-bg, var(--k-bg-secondary)); box-shadow: none; }
.k-card--pad-none { --_p: 0; }
.k-card--pad-sm { --_p: var(--k-card-padding, calc(1rem * var(--k-density))); }
.k-card--pad-lg { --_p: var(--k-card-padding, calc(2rem * var(--k-density))); }
.k-card__header--actions { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--k-space-4); }
.k-card__heading { display: grid; gap: var(--k-space-1); min-inline-size: 0; }
.k-card__actions { display: flex; flex-shrink: 0; gap: var(--k-space-2); margin-block: calc(var(--k-space-1) * -1); }

.k-card--interactive {
  position: relative;
  transition:
    border-color var(--k-duration-fast) var(--k-ease-standard),
    box-shadow var(--k-duration-normal) var(--k-ease-standard);
}
.k-card--interactive:hover { border-color: var(--k-border-primary); box-shadow: var(--k-shadow-md), var(--k-highlight); }
.k-card--interactive:has(:focus-visible) { box-shadow: var(--k-shadow-md), var(--k-ring-brand); }
/* لینک اصلی کل کارت را قابل‌کلیک می‌کند ولی فقط یک توقف Tab دارد */
.k-card--interactive :is(a, button).k-card__link::after { content: ""; position: absolute; inset: 0; }
.k-card--interactive .k-card__link:focus-visible { outline: none; }

@media (forced-colors: active) {
  .k-card { border-color: CanvasText; }
  .k-card--interactive:has(:focus-visible) { outline: 2px solid Highlight; }
}

/* اسلایدر (Carousel) — روی scroll-snap بومی؛ در RTL خودکار درست است */
.k-carousel { --_per: var(--k-carousel-per-view, 1); --_gap: var(--k-carousel-gap, var(--k-space-4)); position: relative; display: grid; gap: var(--k-space-3); }
.k-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--_per) - 1) * var(--_gap)) / var(--_per));
  gap: var(--_gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: var(--k-radius-xl);
}
.k-carousel__track::-webkit-scrollbar { display: none; }
.k-carousel__track:focus-visible { outline: 2px solid transparent; box-shadow: var(--k-ring-brand); }
.k-carousel__slide { min-inline-size: 0; scroll-snap-align: start; }
.k-carousel__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--k-space-3); }
.k-carousel__nav { display: flex; gap: var(--k-space-1_5); }
.k-carousel__dots { display: flex; gap: var(--k-space-1_5); margin: 0; padding: 0; list-style: none; }
.k-carousel__dot { inline-size: 0.5rem; block-size: 0.5rem; padding: 0; border: 0; border-radius: var(--k-radius-full); background: var(--k-border-primary); cursor: pointer; transition: inline-size var(--k-duration-normal) var(--k-ease-standard), background-color var(--k-duration-fast); }
.k-carousel__dot[aria-current="true"] { inline-size: 1.5rem; background: var(--k-bg-brand); }
.k-carousel__dot:focus-visible { outline: 2px solid transparent; box-shadow: var(--k-ring-brand); }
@media (prefers-reduced-motion: reduce) { .k-carousel__track { scroll-behavior: auto; } }
@media (forced-colors: active) { .k-carousel__dot[aria-current="true"] { background: Highlight; } }

/* نمودارها (BarChart، LineChart) — طبق روش dataviz: نشانه‌های باریک، شبکهٔ کم‌رنگ، رنگ دسته‌ای با ترتیب ثابت
 * پالت: چهار رنگ اول پالت مرجع، اعتبارسنجی‌شده روی سطح کاشی در هر دو تم (CVD ΔE ≥ ۸)
 * متغیرها: --k-chart-1..4  --k-chart-height
 */
:root, [data-theme="dark"] {
  --k-chart-1: #3987e5;
  --k-chart-2: #d95926;
  --k-chart-3: #199e70;
  --k-chart-4: #c98500;
}
[data-theme="light"] {
  --k-chart-1: #2a78d6;
  --k-chart-2: #eb6834;
  --k-chart-3: #1baf7a;
  --k-chart-4: #eda100;
}
.k-chart { position: relative; display: grid; gap: var(--k-space-3); font-size: var(--k-text-xs); }
.k-chart__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--k-space-2) var(--k-space-4); }
.k-chart__title { margin: 0; color: var(--k-text-primary); font-size: var(--k-text-sm); font-weight: var(--k-weight-semibold); }
.k-chart__legend { display: flex; flex-wrap: wrap; gap: var(--k-space-1) var(--k-space-4); margin: 0; padding: 0; list-style: none; color: var(--k-text-secondary); }
.k-chart__legend li { display: inline-flex; align-items: center; gap: var(--k-space-1_5); }
.k-chart__key { inline-size: 0.875rem; block-size: 2px; border-radius: 1px; background: var(--_c); }
.k-chart__plot { position: relative; block-size: var(--k-chart-height, 14rem); }
.k-chart__svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.k-chart__grid line { stroke: var(--k-border-secondary); stroke-width: 1; shape-rendering: crispEdges; }
.k-chart__tick { fill: var(--k-text-tertiary); font-size: 11px; }
.k-chart__line { fill: none; stroke: var(--_c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.k-chart__area { stroke: none; }
.k-chart__dot { fill: var(--_c); stroke: var(--k-bg-elevated); stroke-width: 2; }
.k-chart__end { fill: var(--k-text-secondary); font-size: 11px; font-weight: var(--k-weight-medium); }
.k-chart__cross { stroke: var(--k-border-primary); stroke-width: 1; }
.k-chart__hit { fill: transparent; cursor: crosshair; outline: 0; }
.k-chart__plot:focus-visible { outline: 2px solid transparent; border-radius: var(--k-radius-md); box-shadow: var(--k-ring-brand); }

/* ستون‌ها با HTML تا در RTL و هر عرضی درست بچینند */
.k-bars { position: absolute; inset: 0 0 1.5rem; display: flex; align-items: flex-end; gap: 2px; padding-inline: var(--k-space-1); }
.k-bars__grid { position: absolute; inset: 0 0 1.5rem; display: flex; flex-direction: column-reverse; justify-content: space-between; pointer-events: none; }
.k-bars__grid span { position: relative; border-block-start: 1px solid var(--k-border-secondary); }
.k-bars__grid span::after { content: attr(data-v); position: absolute; inset-block-start: -0.55rem; inset-inline-end: 100%; padding-inline-end: var(--k-space-1_5); color: var(--k-text-tertiary); white-space: nowrap; }
.k-bars__col { position: relative; display: flex; flex: 1; flex-direction: column; justify-content: flex-end; align-items: center; block-size: 100%; outline: 0; }
.k-bars__bar { inline-size: min(100%, 24px); min-block-size: 2px; border-radius: 4px 4px 0 0; background: var(--_c, var(--k-bg-brand)); transition: opacity var(--k-duration-fast); }
.k-bars:has(.k-bars__col:is(:hover, :focus-visible)) .k-bars__col:not(:hover, :focus-visible) .k-bars__bar { opacity: 0.45; }
.k-bars__col:focus-visible .k-bars__bar { box-shadow: var(--k-ring-brand); }
.k-bars__label { position: absolute; inset-block-start: calc(100% + 0.4rem); color: var(--k-text-tertiary); white-space: nowrap; }
.k-bars__value { margin-block-end: var(--k-space-1); color: var(--k-text-secondary); font-weight: var(--k-weight-semibold); white-space: nowrap; }
.k-chart--bar .k-chart__plot { margin-inline-start: 2.5rem; }

.k-chart__tip {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 2px;
  min-inline-size: 8rem;
  padding: var(--k-space-2) var(--k-space-3);
  border: 1px solid var(--k-border-secondary);
  border-radius: var(--k-radius-md);
  background: var(--k-bg-elevated);
  box-shadow: var(--k-shadow-lg);
  color: var(--k-text-secondary);
  pointer-events: none;
  white-space: nowrap;
  /* با left جای‌گذاری می‌شود، پس در هر جهتی ‎-50%‎ وسط‌چین می‌کند */
  translate: -50% calc(-100% - 0.625rem);
  font-size: var(--k-text-xs);
  animation: k-tip-in 140ms var(--k-ease-standard);
}
/* زبانهٔ کوچک زیر راهنما */
.k-chart__tip::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  left: 50%;
  inline-size: 0.625rem;
  block-size: 0.625rem;
  margin-block-start: -0.3rem;
  border: 1px solid var(--k-border-secondary);
  border-block-start: 0;
  border-inline-start: 0;
  background: var(--k-bg-elevated);
  translate: -50% 0;
  rotate: 45deg;
}
@keyframes k-tip-in { from { opacity: 0; translate: -50% calc(-100% - 0.25rem); } }
.k-chart__tip-title { padding-block-end: 2px; font-weight: var(--k-weight-medium); }
.k-chart__tip-row strong { font-size: var(--k-text-sm); }
.k-chart__tip-title { color: var(--k-text-tertiary); }
.k-chart__tip-row { display: flex; align-items: center; justify-content: space-between; gap: var(--k-space-4); }
.k-chart__tip-row strong { color: var(--k-text-primary); font-weight: var(--k-weight-semibold); }
.k-chart__tip-row span { display: inline-flex; align-items: center; gap: var(--k-space-1_5); }
.k-chart__tip-row i { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--_c); }
@media (forced-colors: active) {
  .k-chart__line { stroke: CanvasText; }
  .k-bars__bar { background: CanvasText; }
}

/* ستون انباشته: فاصلهٔ ۲ پیکسلی بین بخش‌ها، گوشهٔ گرد فقط بالای ستون */
.k-bars__stack { display: flex; flex-direction: column-reverse; gap: 2px; inline-size: min(100%, 24px); min-block-size: 2px; border-radius: 4px 4px 0 0; overflow: hidden; transition: opacity var(--k-duration-fast); }
.k-bars__seg { flex-basis: 0; min-block-size: 0; background: var(--_c); }
.k-bars:has(.k-bars__col:is(:hover, :focus-visible)) .k-bars__col:not(:hover, :focus-visible) .k-bars__stack { opacity: 0.45; }
.k-chart__key--box { inline-size: 0.625rem; block-size: 0.625rem; border-radius: 2px; }

/* فهرست میله‌ای افقی */
.k-barlist { display: grid; gap: var(--k-space-1_5); margin: 0; padding: 0; list-style: none; font-size: var(--k-text-sm); }
.k-barlist__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--k-space-4); }
.k-barlist__track { position: relative; display: flex; align-items: center; min-block-size: 2rem; }
.k-barlist__fill { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: var(--k-radius-sm); background: color-mix(in srgb, var(--k-bg-brand) 22%, transparent); }
.k-barlist__label { position: relative; padding-inline: var(--k-space-2_5, 0.625rem); color: var(--k-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
a.k-barlist__label:hover { text-decoration: underline; }
a.k-barlist__label:focus-visible { outline: 2px solid transparent; border-radius: var(--k-radius-sm); box-shadow: var(--k-ring-brand); }
.k-barlist__value { color: var(--k-text-secondary); font-weight: var(--k-weight-semibold); }

/* سهم از کل */
.k-proportion { display: flex; gap: 2px; block-size: 0.75rem; border-radius: var(--k-radius-full); overflow: hidden; }
.k-proportion__seg { flex-basis: 0; min-inline-size: 2px; background: var(--_c); }
.k-proportion__legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--k-space-2) var(--k-space-4); margin: var(--k-space-1) 0 0; padding: 0; list-style: none; color: var(--k-text-secondary); font-size: var(--k-text-sm); }
.k-proportion__legend li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--k-space-1_5) var(--k-space-2); }
.k-proportion__legend strong { color: var(--k-text-primary); font-weight: var(--k-weight-semibold); }
.k-proportion__abs { grid-column: 2 / -1; margin-block-start: -0.25rem; color: var(--k-text-tertiary); font-size: var(--k-text-xs); }

.k-sparkline { display: block; inline-size: 100%; block-size: 2rem; overflow: visible; }
/* زمان در جهت خواندن، هماهنگ با LineChart */
[dir="rtl"] .k-sparkline { scale: -1 1; }
@media (forced-colors: active) {
  .k-proportion__seg, .k-bars__seg, .k-barlist__fill { background: CanvasText; forced-color-adjust: none; }
}

/* ───── حرکت و برجسته‌سازی ───── */
.k-bars__col[data-active] .k-bars__label { color: var(--k-text-primary); }
.k-barlist__row { transition: opacity var(--k-duration-fast); }
.k-barlist:has(.k-barlist__row[data-active]) .k-barlist__row:not([data-active]) { opacity: 0.5; }
.k-barlist__row[data-active] .k-barlist__fill { background: color-mix(in srgb, var(--k-bg-brand) 38%, transparent); }
.k-barlist__share { margin-inline-start: var(--k-space-1); color: var(--k-text-tertiary); font-weight: var(--k-weight-regular); font-size: var(--k-text-xs); }
.k-proportion__wrap { position: relative; }
.k-proportion__seg { transition: opacity var(--k-duration-fast); cursor: default; }
.k-proportion:has([data-active]) .k-proportion__seg:not([data-active]) { opacity: 0.35; }
.k-proportion { block-size: 0.875rem; }
.k-heatmap__cell[data-active] { outline: 2px solid var(--k-text-primary); outline-offset: 1px; }
.k-chart__plot .k-chart__dot { transition: r var(--k-duration-fast); }

@media (prefers-reduced-motion: no-preference) {
  .k-bars__bar, .k-bars__stack { transform-origin: 50% 100%; animation: k-grow 0.7s var(--k-ease-standard) both; animation-delay: var(--_d, 0ms); }
  .k-barlist__fill { transform-origin: 100% 50%; animation: k-grow-x 0.8s var(--k-ease-standard) both; animation-delay: var(--_d, 0ms); }
  [dir="ltr"] .k-barlist__fill { transform-origin: 0 50%; }
  .k-proportion__seg { animation: k-fade 0.6s var(--k-ease-standard) both; }
  .k-chart__line { stroke-dasharray: 1; animation: k-draw 1.2s var(--k-ease-standard) both; }
  .k-chart__area { animation: k-fade 1s 0.4s both; }
}
@keyframes k-grow { from { scale: 1 0; } }
@keyframes k-grow-x { from { scale: 0 1; } }
@keyframes k-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes k-fade { from { opacity: 0; } }

/* نمودار دایره‌ای و دونات */
.k-pie__body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-6); }
.k-pie__plot { position: relative; flex-shrink: 0; }
.k-pie__svg { inline-size: 100%; block-size: 100%; overflow: visible; }
.k-pie__slice { pointer-events: stroke; cursor: default; transition: opacity var(--k-duration-fast), stroke-width var(--k-duration-normal) var(--k-ease-standard); }
.k-pie__svg:has([data-active]) .k-pie__slice:not([data-active]) { opacity: 0.35; }
.k-pie__center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; pointer-events: none; text-align: center; }
.k-pie__center strong { color: var(--k-text-primary); font-size: var(--k-text-xl); font-weight: var(--k-weight-bold); line-height: 1.2; }
.k-pie__center span { max-inline-size: 6rem; color: var(--k-text-tertiary); font-size: var(--k-text-xs); }
.k-pie__legend { display: grid; flex: 1 1 12rem; gap: var(--k-space-1); margin: 0; padding: 0; list-style: none; font-size: var(--k-text-sm); }
.k-pie__legend li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--k-space-2) var(--k-space-3); padding: var(--k-space-1_5) var(--k-space-2); border-radius: var(--k-radius-md); color: var(--k-text-secondary); transition: background-color var(--k-duration-fast); }
.k-pie__legend li[data-active] { background: var(--k-bg-hover); color: var(--k-text-primary); }
.k-pie__legend strong { color: var(--k-text-primary); font-weight: var(--k-weight-semibold); }
.k-pie__abs { min-inline-size: 4.5rem; color: var(--k-text-tertiary); font-size: var(--k-text-xs); text-align: end; }
@media (prefers-reduced-motion: no-preference) {
  .k-pie__slice { animation: k-fade 0.6s var(--k-ease-standard) both; animation-delay: var(--_d, 0ms); }
}

/* چک‌باکس — روی <input type="checkbox"> بومی، پس کیبورد و صفحه‌خوان خودکار کار می‌کنند
 * <label class="k-check">
 *   <input type="checkbox" class="k-checkbox">
 *   <span class="k-check__text">
 *     <span class="k-check__label">مرا به خاطر بسپار</span>
 *     <span class="k-check__description">توضیح اختیاری</span>
 *   </span>
 * </label>
 * حالت نیمه: input.indeterminate = true — خطا: aria-invalid="true" — اندازه: k-checkbox--lg
 *
 * متغیرها: --k-checkbox-size  --k-checkbox-radius
 */
.k-checkbox {
  --_s: var(--k-checkbox-size, 1.125rem);
  --_border: var(--k-border-input);

  appearance: none;
  display: inline-grid;
  place-content: center;
  flex-shrink: 0;
  inline-size: var(--_s);
  block-size: var(--_s);
  margin: 0;
  border: 1px solid var(--_border);
  border-radius: var(--k-checkbox-radius, calc(0.3125rem * var(--k-radius-factor)));
  background: var(--k-bg-elevated);
  color: var(--k-text-on-brand);
  box-shadow: var(--k-shadow-xs);
  cursor: pointer;
  transition:
    background-color var(--k-duration-fast) var(--k-ease-standard),
    border-color var(--k-duration-fast) var(--k-ease-standard),
    box-shadow var(--k-duration-fast) var(--k-ease-standard);
}

.k-checkbox::before {
  content: "";
  inline-size: calc(var(--_s) * 0.7);
  block-size: calc(var(--_s) * 0.7);
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.5 3.5 5.5 10 2.5 7'/%3E%3C/svg%3E") center / contain no-repeat;
  scale: 0;
  transition: scale var(--k-duration-fast) var(--k-ease-emphasized);
}
.k-checkbox:indeterminate::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 7h8'/%3E%3C/svg%3E");
}

.k-checkbox:hover:not(:disabled) { --_border: var(--k-border-brand); box-shadow: 0 0 0 4px var(--k-bg-hover); }

.k-checkbox:is(:checked, :indeterminate) {
  --_border: var(--k-bg-brand);
  background: var(--k-bg-brand);
}
.k-checkbox:is(:checked, :indeterminate)::before { scale: 1; }
.k-checkbox:is(:checked, :indeterminate):hover:not(:disabled) { --_border: var(--k-bg-brand-hover); background: var(--k-bg-brand-hover); }

.k-checkbox:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--k-ring-brand);
}

.k-checkbox[aria-invalid="true"] { --_border: var(--k-border-error); }
.k-checkbox[aria-invalid="true"]:focus-visible { box-shadow: var(--k-ring-error); }

.k-checkbox:disabled {
  --_border: var(--k-border-secondary);
  background: var(--k-bg-tertiary);
  color: var(--k-text-quaternary);
  cursor: not-allowed;
}

.k-checkbox--lg { --_s: var(--k-checkbox-size, 1.25rem); }

/* ردیف برچسب — مشترک بین چک‌باکس و سوییچ */
.k-check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--k-space-2);
  cursor: pointer;
  /* ارتفاع خط متن با کنترل هم‌تراز شود */
  line-height: 1.25rem;
}
.k-check > :is(.k-checkbox, .k-switch) { margin-block-start: calc((1.25rem - var(--_h, var(--_s))) / 2); }
.k-check:has(:disabled) { cursor: not-allowed; }
/* برچسب در ابتدا، کنترل در انتهای ردیف (فهرست تنظیمات) */
.k-check--start { display: flex; flex-direction: row-reverse; justify-content: space-between; gap: var(--k-space-4); inline-size: 100%; }
.k-check__text { display: grid; gap: 0.125rem; }
.k-check__label { color: var(--k-text-secondary); font-size: var(--k-text-sm); font-weight: var(--k-weight-medium); }
.k-check__description { color: var(--k-text-tertiary); font-size: var(--k-text-sm); }
.k-check:has(:disabled) .k-check__label { color: var(--k-text-quaternary); }

/* حالت کنتراست بالای ویندوز: برگشت به کنترل بومی سیستم */
@media (forced-colors: active) {
  .k-checkbox { appearance: auto; }
  .k-checkbox::before { display: none; }
}

/* چیپ‌های فیلتر (Chips) — دکمه‌های aria-pressed
 * <div class="k-chips" role="group" aria-label="دسته‌بندی"><button class="k-chip" aria-pressed="true">…</button></div>
 */
.k-chips { display: flex; flex-wrap: wrap; gap: var(--k-space-2); }
.k-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-1_5);
  block-size: 2rem;
  padding-inline: var(--k-space-3);
  border: 1px solid var(--k-border-primary);
  border-radius: var(--k-radius-full);
  background: var(--k-bg-elevated);
  color: var(--k-text-secondary);
  font: inherit;
  font-size: var(--k-text-sm);
  font-weight: var(--k-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--k-shadow-xs);
  transition: background-color var(--k-duration-fast), border-color var(--k-duration-fast), color var(--k-duration-fast);
}
.k-chip:hover { background: var(--k-bg-hover); color: var(--k-text-primary); }
.k-chip:focus-visible { outline: 2px solid transparent; box-shadow: var(--k-ring-brand); }
.k-chip svg { inline-size: 1rem; block-size: 1rem; }
.k-chip[aria-pressed="true"] { border-color: var(--k-border-brand); background: var(--k-bg-brand-subtle); color: var(--k-text-brand); }
.k-chip__check { display: none; }
.k-chip[aria-pressed="true"] .k-chip__check { display: inline-flex; }
.k-chip__count { min-inline-size: 1.25rem; padding-inline: 0.375rem; border-radius: var(--k-radius-full); background: var(--k-bg-tertiary); color: var(--k-text-tertiary); font-size: var(--k-text-xs); line-height: 1.25rem; text-align: center; }
.k-chip[aria-pressed="true"] .k-chip__count { background: color-mix(in srgb, var(--k-text-brand) 18%, transparent); color: var(--k-text-brand); }
.k-chip:disabled { color: var(--k-text-quaternary); cursor: not-allowed; }
@media (forced-colors: active) {
  .k-chip[aria-pressed="true"] { border-width: 2px; border-color: Highlight; }
}

/* انتخاب رنگ: نمونه‌رنگ‌ها + فیلد hex + انتخابگر بومی */
.k-color { display: grid; gap: var(--k-space-3); }
.k-color__swatches { display: flex; flex-wrap: wrap; gap: var(--k-space-2); }
.k-color__swatch { position: relative; display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: var(--k-radius-full); background: var(--_sw); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15); cursor: pointer; transition: scale var(--k-duration-fast) var(--k-ease-emphasized); }
.k-color__swatch:hover { scale: 1.08; }
.k-color__swatch:has(:checked) { box-shadow: 0 0 0 2px var(--k-bg-primary), 0 0 0 4px var(--_sw); }
.k-color__swatch:has(:focus-visible) { box-shadow: 0 0 0 2px var(--k-bg-primary), 0 0 0 4px var(--k-border-brand); }
.k-color__swatch svg { inline-size: 1rem; block-size: 1rem; color: var(--_ink, #fff); opacity: 0; }
.k-color__swatch:has(:checked) svg { opacity: 1; }
.k-color__row { display: flex; align-items: center; gap: var(--k-space-2); }
.k-color__anchor { position: relative; flex-shrink: 0; }
.k-color__preview { display: block; inline-size: 2.5rem; block-size: 2.5rem; padding: 0; border: 0; border-radius: var(--k-radius-md); background: var(--_sw); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15), var(--k-shadow-xs); cursor: pointer; transition: scale var(--k-duration-fast) var(--k-ease-emphasized); }
.k-color__preview:hover { scale: 1.05; }
.k-color__preview:focus-visible { outline: 2px solid transparent; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15), var(--k-ring-brand); }

/* پنل انتخاب دلخواه */
.k-color__panel {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-start: 0;
  z-index: var(--k-z-dropdown);
  display: grid;
  gap: var(--k-space-3);
  inline-size: 16rem;
  padding: var(--k-space-3);
  border: 1px solid var(--k-border-secondary);
  border-radius: var(--k-radius-xl);
  background: var(--k-bg-elevated);
  box-shadow: var(--k-shadow-2xl), var(--k-highlight);
  animation: k-color-in 160ms var(--k-ease-standard);
}
@keyframes k-color-in { from { opacity: 0; translate: 0 -4px; scale: 0.98; } }
@media (prefers-reduced-motion: reduce) { .k-color__panel { animation: none; } }
.k-color__area {
  position: relative;
  block-size: 9.5rem;
  border-radius: var(--k-radius-lg);
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--_hue));
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
  cursor: crosshair;
  touch-action: none;
  outline: 0;
}
.k-color__area:focus-visible { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1), var(--k-ring-brand); }
.k-color__thumb {
  position: absolute;
  inline-size: 1rem;
  block-size: 1rem;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--_sw);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25), 0 2px 6px rgb(0 0 0 / 0.35);
  translate: -50% -50%;
  pointer-events: none;
}
.k-color__tools { display: flex; align-items: center; gap: var(--k-space-2); }
.k-color__current { flex-shrink: 0; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; background: var(--_sw); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15); }
.k-color__hue {
  flex: 1;
  appearance: none;
  block-size: 0.75rem;
  margin: 0;
  border-radius: var(--k-radius-full);
  background: linear-gradient(to right, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
  cursor: pointer;
  direction: ltr;
}
.k-color__hue::-webkit-slider-thumb { appearance: none; inline-size: 1.125rem; block-size: 1.125rem; border: 3px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25), 0 2px 6px rgb(0 0 0 / 0.35); }
.k-color__hue::-moz-range-thumb { inline-size: 0.75rem; block-size: 0.75rem; border: 3px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25); }
.k-color__hue:focus-visible { outline: 2px solid transparent; box-shadow: var(--k-ring-brand); }
.k-color__codes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--k-space-2); }
.k-color__code { display: grid; justify-items: center; gap: 2px; color: var(--k-text-tertiary); font-size: var(--k-text-xs); font-weight: var(--k-weight-semibold); }
.k-color__num {
  inline-size: 100%;
  block-size: 2rem;
  border: 1px solid var(--k-border-input);
  border-radius: var(--k-radius-md);
  background: var(--k-bg-primary);
  color: var(--k-text-primary);
  font: inherit;
  font-size: var(--k-text-sm);
  text-align: center;
}
.k-color__num:focus-visible { outline: 2px solid transparent; border-color: var(--k-border-brand); box-shadow: var(--k-ring-brand); }
.k-color__row .k-input { flex: 1; }
.k-color__contrast { display: flex; flex-wrap: wrap; gap: var(--k-space-2); margin: 0; color: var(--k-text-tertiary); font-size: var(--k-text-xs); }
.k-color__sample { display: inline-flex; align-items: center; gap: var(--k-space-1); padding: 0.125rem 0.5rem; border-radius: var(--k-radius-sm); background: var(--_sw); color: var(--_ink); font-weight: var(--k-weight-semibold); }

/* جستجو و انتخاب (Combobox) و پالت فرمان — فهرست گزینه‌ها با الگوی listbox
 * متغیرها: --k-listbox-max-height  --k-option-height
 */
.k-combobox { position: relative; }
.k-combobox .k-input { padding-inline-end: var(--k-space-1); }
.k-combobox__toggle { transition: rotate var(--k-duration-fast); }
.k-combobox[data-open] .k-combobox__toggle { rotate: 180deg; }

.k-listbox {
  position: absolute;
  inset-inline: 0;
  z-index: var(--k-z-dropdown);
  max-block-size: var(--k-listbox-max-height, 18rem);
  margin: 0;
  padding: var(--k-space-1_5);
  overflow-y: auto;
  border: 1px solid var(--k-border-secondary);
  border-radius: var(--k-radius-lg);
  background: var(--k-bg-elevated);
  box-shadow: var(--k-shadow-lg), var(--k-highlight);
  list-style: none;
  animation: k-pop-in var(--k-duration-fast) var(--k-ease-standard);
}
.k-listbox[hidden] { display: none; }
.k-listbox--inline { position: static; max-block-size: none; border: 0; box-shadow: none; padding: 0; background: none; animation: none; }
.k-option {
  display: flex;
  align-items: center;
  gap: var(--k-space-2);
  min-block-size: var(--k-option-height, calc(2.5rem * var(--k-density)));
  padding-inline: var(--k-space-2_5, 0.625rem);
  border-radius: var(--k-radius-md);
  color: var(--k-text-secondary);
  font-size: var(--k-text-sm);
  cursor: pointer;
}
.k-option[data-active] { background: var(--k-bg-hover); color: var(--k-text-primary); }
.k-option[aria-selected="true"] { color: var(--k-text-primary); font-weight: var(--k-weight-semibold); }
.k-option[aria-disabled="true"] { color: var(--k-text-quaternary); cursor: not-allowed; }
.k-option__check { margin-inline-start: auto; color: var(--k-text-brand); }
.k-option__check svg, .k-option svg { inline-size: 1.125rem; block-size: 1.125rem; flex-shrink: 0; }
.k-option__desc { color: var(--k-text-tertiary); font-size: var(--k-text-xs); }
.k-option__body { display: grid; min-inline-size: 0; }
.k-option mark { background: none; color: var(--k-text-brand); font-weight: var(--k-weight-semibold); }
.k-listbox__group { padding: var(--k-space-2) var(--k-space-2_5, 0.625rem) var(--k-space-1); color: var(--k-text-tertiary); font-size: var(--k-text-xs); font-weight: var(--k-weight-semibold); }
.k-listbox__empty { padding: var(--k-space-6) var(--k-space-3); color: var(--k-text-tertiary); font-size: var(--k-text-sm); text-align: center; }

/* پالت فرمان */
.k-command { --k-dialog-width: 36rem; margin-block-start: 12vh; }
.k-command .k-input { border: 0; border-block-end: 1px solid var(--k-border-secondary); border-radius: 0; box-shadow: none; min-block-size: 3.5rem; padding-inline: var(--k-space-5); background: transparent; }
.k-command .k-input:focus-within { box-shadow: none; }
.k-command__list { max-block-size: min(24rem, 60dvh); overflow-y: auto; padding: var(--k-space-2); }
.k-command__footer { display: flex; gap: var(--k-space-4); padding: var(--k-space-2) var(--k-space-5); border-block-start: 1px solid var(--k-border-secondary); color: var(--k-text-tertiary); font-size: var(--k-text-xs); }
.k-command__footer span { display: inline-flex; align-items: center; gap: var(--k-space-1); }

/* چندانتخابی: چک‌باکس کنار هر گزینه */
.k-multiselect .k-tag-input { position: relative; }
.k-multiselect__box { display: inline-grid; place-items: center; flex-shrink: 0; inline-size: 1.125rem; block-size: 1.125rem; border: 1px solid var(--k-border-input); border-radius: calc(0.3125rem * var(--k-radius-factor)); background: var(--k-bg-elevated); color: var(--k-text-on-brand); transition: background-color var(--k-duration-fast), border-color var(--k-duration-fast); }
.k-multiselect__box svg { inline-size: 0.8rem; block-size: 0.8rem; }
.k-option[aria-selected="true"] .k-multiselect__box { border-color: var(--k-bg-brand); background: var(--k-bg-brand); }
.k-multiselect .k-option[aria-selected="true"] { background: none; }
.k-multiselect .k-option[aria-selected="true"][data-active] { background: var(--k-bg-hover); }
.k-multiselect .k-input__action { margin-inline-start: auto; }

/* شمارش معکوس */
.k-countdown { display: inline-flex; align-items: baseline; gap: var(--k-space-1); color: var(--k-text-secondary); font-weight: var(--k-weight-semibold); }
.k-countdown--blocks { gap: var(--k-space-2); }
.k-countdown__unit { display: grid; justify-items: center; gap: var(--k-space-1); min-inline-size: 3.25rem; padding: var(--k-space-2) var(--k-space-3); border: 1px solid var(--k-border-secondary); border-radius: var(--k-radius-lg); background: var(--k-bg-elevated); box-shadow: var(--k-shadow-xs), var(--k-highlight); }
.k-countdown__num { color: var(--k-text-primary); font-size: var(--k-text-2xl); line-height: 1.1; }
.k-countdown__name { color: var(--k-text-tertiary); font-size: var(--k-text-xs); font-weight: var(--k-weight-medium); }
.k-countdown__sep { align-self: center; color: var(--k-text-quaternary); }
.k-countdown[data-done] { color: var(--k-text-tertiary); }

/* پنجرهٔ گفتگو — روی <dialog> بومی: تلهٔ فوکوس، Esc و غیرفعال شدن پس‌زمینه رایگان
 * اندازه‌ها: k-dialog--sm | k-dialog--md (پیش‌فرض) | k-dialog--lg
 *
 * جایگاه: k-dialog--start | k-dialog--end (کشو) | k-dialog--bottom (برگه) — اندازه: k-dialog--full
 * متغیرها: --k-dialog-width  --k-dialog-radius  --k-dialog-padding  --k-drawer-width  --k-dialog-backdrop
 */
.k-dialog {
  --_p: var(--k-dialog-padding, var(--k-space-6));

  inline-size: min(var(--k-dialog-width, 30rem), calc(100vw - 2rem));
  max-block-size: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--k-border-secondary);
  border-radius: var(--k-dialog-radius, var(--k-radius-2xl));
  background: var(--k-bg-elevated);
  color: var(--k-text-primary);
  box-shadow: var(--k-shadow-2xl), var(--k-highlight);
  overflow: auto;
}
.k-dialog--sm { --k-dialog-width: 24rem; }
.k-dialog--lg { --k-dialog-width: 42rem; }

.k-dialog::backdrop {
  background: var(--k-dialog-backdrop, rgb(8 9 12 / 0.6));
  backdrop-filter: blur(4px);
}
.k-dialog[open] { animation: k-dialog-in var(--k-duration-normal) var(--k-ease-emphasized); }
.k-dialog[open]::backdrop { animation: k-fade-in var(--k-duration-normal) var(--k-ease-standard); }
@keyframes k-dialog-in { from { opacity: 0; scale: 0.96; translate: 0 8px; } }
@keyframes k-fade-in { from { opacity: 0; } }

.k-dialog__header {
  display: flex;
  align-items: flex-start;
  gap: var(--k-space-4);
  padding: var(--_p) var(--_p) 0;
}
.k-dialog__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  background: var(--k-bg-brand-subtle);
  color: var(--k-text-brand);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--k-bg-brand-subtle) 50%, transparent);
}
.k-dialog__icon svg { inline-size: 1.5rem; block-size: 1.5rem; }
.k-dialog--danger .k-dialog__icon { background: var(--k-bg-error-subtle); color: var(--k-text-error); box-shadow: 0 0 0 8px color-mix(in srgb, var(--k-bg-error-subtle) 50%, transparent); }
.k-dialog__heading { flex: 1; display: grid; gap: var(--k-space-1); padding-block-start: var(--k-space-1); }
.k-dialog__title { margin: 0; font-size: var(--k-text-lg); font-weight: var(--k-weight-semibold); line-height: var(--k-leading-tight); }
.k-dialog__description { margin: 0; color: var(--k-text-tertiary); font-size: var(--k-text-sm); line-height: var(--k-leading-normal); }
.k-dialog__close { margin-block: -0.25rem; margin-inline-end: -0.5rem; }
.k-dialog__body { padding: var(--k-space-5) var(--_p) 0; }
.k-dialog__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--k-space-3);
  padding: var(--k-space-6) var(--_p) var(--_p);
}
.k-dialog__footer--block > * { flex: 1; }

.k-dialog--full { --k-dialog-width: calc(100vw - 2rem); block-size: calc(100dvh - 2rem); }

/* کشوی کناری و برگهٔ پایین */
.k-dialog:is(.k-dialog--start, .k-dialog--end) {
  inline-size: min(var(--k-drawer-width, 26rem), 100vw);
  max-block-size: none;
  block-size: 100dvh;
  margin: 0;
  margin-inline: auto 0;
  border-radius: 0;
  border-block: 0;
  display: flex;
  flex-direction: column;
}
.k-dialog--start { margin-inline: 0 auto; border-inline-start: 0; }
.k-dialog--end { border-inline-end: 0; }
.k-dialog:is(.k-dialog--start, .k-dialog--end) .k-dialog__body { flex: 1; overflow-y: auto; padding-block-end: var(--_p); }
.k-dialog:is(.k-dialog--start, .k-dialog--end) .k-dialog__footer { border-block-start: 1px solid var(--k-border-secondary); padding-block-start: var(--k-space-4); }
.k-dialog--start[open] { animation: k-drawer-start var(--k-duration-slow) var(--k-ease-standard); }
.k-dialog--end[open] { animation: k-drawer-end var(--k-duration-slow) var(--k-ease-standard); }
@keyframes k-drawer-start { from { translate: 100% 0; } }
@keyframes k-drawer-end { from { translate: -100% 0; } }
[dir="ltr"] .k-dialog--start[open] { animation-name: k-drawer-end; }
[dir="ltr"] .k-dialog--end[open] { animation-name: k-drawer-start; }

.k-dialog--bottom {
  inline-size: min(var(--k-dialog-width, 40rem), 100vw);
  max-block-size: 90dvh;
  margin-block: auto 0;
  border-block-end: 0;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.k-dialog--bottom::before {
  content: "";
  display: block;
  inline-size: 2.5rem;
  block-size: 4px;
  margin: var(--k-space-3) auto 0;
  border-radius: 2px;
  background: var(--k-border-primary);
}
.k-dialog--bottom[open] { animation: k-sheet-in var(--k-duration-slow) var(--k-ease-standard); }
@keyframes k-sheet-in { from { translate: 0 100%; } }

/* قفل اسکرول صفحه هنگام باز بودن */
html:has(.k-dialog[open]) { overflow: hidden; }

@media (max-width: 30rem) {
  .k-dialog__footer { flex-direction: column-reverse; }
  .k-dialog__footer > * { inline-size: 100%; }
}
@media (forced-colors: active) {
  .k-dialog { border-color: CanvasText; }
}

/* جداکننده؛ با متن وسط: <div class="k-divider" role="separator"><span>یا</span></div> */
.k-divider {
  display: flex;
  align-items: center;
  gap: var(--k-space-3);
  margin-block: var(--k-divider-space, var(--k-space-4));
  border: 0;
  color: var(--k-text-tertiary);
  font-size: var(--k-text-sm);
}
.k-divider::before, .k-divider::after { content: ""; flex: 1; block-size: 1px; background: var(--k-border-secondary); }
.k-divider:not(:has(> *))::after { display: none; }
.k-divider--vertical { flex-direction: column; align-self: stretch; margin-block: 0; margin-inline: var(--k-divider-space, var(--k-space-3)); }
.k-divider--vertical::before, .k-divider--vertical::after { inline-size: 1px; block-size: auto; }

/* حالت خالی: وقتی داده‌ای برای نمایش نیست
 * متغیرها: --k-empty-padding  --k-empty-pattern */
.k-empty {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--k-space-2);
  padding: var(--k-empty-padding, var(--k-space-12) var(--k-space-6));
  text-align: center;
  isolation: isolate;
}
.k-empty__icon {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  margin-block-end: var(--k-space-3);
  border: 1px solid var(--k-border-primary);
  border-radius: var(--k-radius-lg);
  background: var(--k-bg-elevated);
  color: var(--k-text-secondary);
  box-shadow: var(--k-shadow-xs), var(--k-shadow-skeuomorphic);
}
.k-empty__icon svg { inline-size: 1.5rem; block-size: 1.5rem; }
/* دایره‌های هم‌مرکز پشت آیکون */
.k-empty__icon::before {
  content: "";
  position: absolute;
  z-index: -1;
  inline-size: 20rem;
  block-size: 20rem;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 2.4rem, var(--k-empty-pattern, var(--k-border-secondary)) 2.4rem calc(2.4rem + 1px));
  mask-image: radial-gradient(circle, #000 15%, transparent 65%);
  pointer-events: none;
}
.k-empty__title { margin: 0; color: var(--k-text-primary); font-size: var(--k-text-md); font-weight: var(--k-weight-semibold); }
.k-empty__description { margin: 0; max-inline-size: 22rem; color: var(--k-text-tertiary); font-size: var(--k-text-sm); line-height: var(--k-leading-normal); }
.k-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--k-space-3); margin-block-start: var(--k-space-4); }

/* فیلد: برچسب + کنترل + راهنما/خطا — مشترک بین Input، Checkbox و Switch
 * <div class="k-field">
 *   <label class="k-label" for="email">ایمیل <span class="k-label__required" aria-hidden="true">*</span></label>
 *   ...کنترل...
 *   <p class="k-hint" id="email-hint">راهنما</p>
 *   <p class="k-hint k-hint--error" id="email-error">خطا</p>
 * </div>
 */
.k-field {
  display: grid;
  /* ستون تنها با عرض فیلد کوچک می‌شود؛ وگرنه input در ستون باریک (مثل «پلاک») از فیلد بیرون می‌زند */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--k-field-gap, var(--k-space-1_5));
  min-inline-size: 0;
}

.k-label {
  color: var(--k-text-secondary);
  font-size: var(--k-text-sm);
  font-weight: var(--k-weight-medium);
  line-height: var(--k-leading-tight);
}
.k-label__required { color: var(--k-text-error); margin-inline-start: 0.125em; }

.k-hint {
  margin: 0;
  color: var(--k-text-tertiary);
  font-size: var(--k-text-sm);
  line-height: var(--k-leading-tight);
}
.k-hint--error { color: var(--k-text-error); }

.k-field__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--k-space-3); }
.k-field__label-end { color: var(--k-text-tertiary); font-size: var(--k-text-sm); }
.k-label__optional { margin-inline-start: var(--k-space-1_5); color: var(--k-text-tertiary); font-weight: var(--k-weight-regular); }
.k-label__optional::before { content: "("; }
.k-label__optional::after { content: ")"; }
.k-field__hint-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--k-space-3); }
.k-field__hints { display: grid; gap: var(--k-space-1); min-inline-size: 0; }
/* شمارندهٔ نویسه */
.k-counter { flex-shrink: 0; color: var(--k-text-tertiary); font-size: var(--k-text-sm); }
.k-counter[data-over] { color: var(--k-text-error); font-weight: var(--k-weight-semibold); }

/* بارگذاری فایل (File upload) */
.k-dropzone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--k-space-2);
  padding: var(--k-space-8) var(--k-space-6);
  border: 1px dashed var(--k-border-input);
  border-radius: var(--k-dropzone-radius, var(--k-radius-xl));
  background: var(--k-bg-primary);
  color: var(--k-text-tertiary);
  font-size: var(--k-text-sm);
  text-align: center;
  transition: border-color var(--k-duration-fast), background-color var(--k-duration-fast);
}
.k-dropzone:hover { border-color: var(--k-border-brand); }
.k-dropzone[data-dragging] { border-style: solid; border-color: var(--k-border-brand); background: var(--k-bg-brand-subtle); }
.k-dropzone[data-disabled] { opacity: 0.6; pointer-events: none; }
.k-dropzone:has(:focus-visible) { box-shadow: var(--k-ring-brand); }
.k-dropzone__icon { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border: 1px solid var(--k-border-primary); border-radius: var(--k-radius-lg); background: var(--k-bg-elevated); color: var(--k-text-secondary); box-shadow: var(--k-shadow-xs), var(--k-shadow-skeuomorphic); }
.k-dropzone__icon svg { inline-size: 1.25rem; block-size: 1.25rem; }
.k-dropzone__title { color: var(--k-text-secondary); }
.k-dropzone__browse { padding: 0; border: 0; background: none; color: var(--k-text-brand); font: inherit; font-weight: var(--k-weight-semibold); cursor: pointer; text-decoration: underline; text-underline-offset: 0.3em; }
.k-dropzone__browse:focus-visible { outline: 2px solid var(--k-border-brand); outline-offset: 2px; border-radius: 2px; }
.k-dropzone__hint { font-size: var(--k-text-xs); }
.k-dropzone input[type="file"] { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }

.k-file-list { display: grid; gap: var(--k-space-3); margin: var(--k-space-4) 0 0; padding: 0; list-style: none; }
.k-file {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--k-space-1) var(--k-space-3);
  padding: var(--k-space-4);
  border: 1px solid var(--k-border-secondary);
  border-radius: var(--k-radius-lg);
  background: var(--k-bg-elevated);
  box-shadow: var(--k-shadow-xs), var(--k-highlight);
}
.k-file[data-status="error"] { border-color: var(--k-border-error); }
.k-file__icon { grid-row: span 2; display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--k-radius-md); background: var(--k-bg-brand-subtle); color: var(--k-text-brand); font-size: 0.625rem; font-weight: var(--k-weight-bold); direction: ltr; }
.k-file[data-status="error"] .k-file__icon { background: var(--k-bg-error-subtle); color: var(--k-text-error); }
.k-file__name { overflow: hidden; color: var(--k-text-primary); font-size: var(--k-text-sm); font-weight: var(--k-weight-medium); text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: end; }
.k-file__meta { color: var(--k-text-tertiary); font-size: var(--k-text-xs); }
.k-file[data-status="error"] .k-file__meta { color: var(--k-text-error); }
.k-file__remove { grid-row: span 2; }
.k-file .k-progress { grid-column: 2 / -1; }

/* نقشهٔ فعالیت سالانه با ماه‌های شمسی — طیف تک‌رنگ برند از کم‌رنگ به پررنگ */
.k-heatmap { --_cell: var(--k-heatmap-cell, 0.75rem); position: relative; display: grid; gap: var(--k-space-2); font-size: var(--k-text-xs); }
.k-heatmap__scroll { overflow-x: auto; padding-block-end: var(--k-space-1); scrollbar-width: thin; }
.k-heatmap__months { display: grid; grid-auto-flow: column; grid-auto-columns: calc(var(--_cell) + 3px); margin-inline-start: 1.75rem; color: var(--k-text-tertiary); }
.k-heatmap__months span { white-space: nowrap; }
.k-heatmap__body { display: flex; gap: var(--k-space-1_5); }
.k-heatmap__days { display: grid; grid-template-rows: repeat(7, var(--_cell)); gap: 3px; inline-size: 1.25rem; color: var(--k-text-tertiary); line-height: var(--_cell); }
.k-heatmap__grid { display: grid; grid-template-rows: repeat(7, var(--_cell)); grid-auto-flow: column; grid-auto-columns: var(--_cell); gap: 3px; }
.k-heatmap__cell { border-radius: 2px; background: var(--k-bg-tertiary); }
.k-heatmap__cell[data-l="1"] { background: color-mix(in srgb, var(--k-bg-brand) 30%, var(--k-bg-tertiary)); }
.k-heatmap__cell[data-l="2"] { background: color-mix(in srgb, var(--k-bg-brand) 55%, var(--k-bg-tertiary)); }
.k-heatmap__cell[data-l="3"] { background: color-mix(in srgb, var(--k-bg-brand) 80%, var(--k-bg-tertiary)); }
.k-heatmap__cell[data-l="4"] { background: var(--k-bg-brand); }
.k-heatmap__cell[data-empty] { background: transparent; }
.k-heatmap__cell:hover { outline: 1px solid var(--k-text-secondary); outline-offset: 1px; }
.k-heatmap__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--k-space-2); color: var(--k-text-tertiary); }
.k-heatmap__scale { display: inline-flex; align-items: center; gap: 3px; }
.k-heatmap__scale .k-heatmap__cell { inline-size: var(--_cell); block-size: var(--_cell); }
@media (forced-colors: active) {
  .k-heatmap__cell { border: 1px solid CanvasText; }
  .k-heatmap__cell[data-l="4"], .k-heatmap__cell[data-l="3"] { background: CanvasText; forced-color-adjust: none; }
}

/* ویرایش درجا: متن معمولی که با کلیک یا Enter به فیلد تبدیل می‌شود */
.k-inline-edit { display: inline-flex; align-items: center; gap: var(--k-space-1); max-inline-size: 100%; }
.k-inline-edit__view {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-1_5);
  min-inline-size: 4rem;
  margin-inline: calc(var(--k-space-2) * -1);
  padding: var(--k-space-1) var(--k-space-2);
  border: 0;
  border-radius: var(--k-radius-md);
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: text;
  transition: background-color var(--k-duration-fast);
}
.k-inline-edit__view:hover { background: var(--k-bg-hover); }
.k-inline-edit__view:focus-visible { outline: 2px solid transparent; box-shadow: var(--k-ring-brand); }
.k-inline-edit__view svg { inline-size: 1rem; block-size: 1rem; color: var(--k-text-quaternary); opacity: 0; transition: opacity var(--k-duration-fast); }
.k-inline-edit__view:is(:hover, :focus-visible) svg { opacity: 1; }
.k-inline-edit__placeholder { color: var(--k-text-tertiary); }
.k-inline-edit .k-input { --_h: 2.25rem; min-inline-size: 12rem; }
.k-inline-edit__actions { display: inline-flex; gap: 2px; }

/* ورودی متن
 * <div class="k-input">
 *   <span class="k-input__addon">svg یا متن</span>
 *   <input class="k-input__control" id="email" aria-describedby="email-hint">
 * </div>
 * خطا: aria-invalid="true" روی input — اندازه‌ها: k-input--sm | k-input--lg
 *
 * متغیرها: --k-input-height-{sm,md,lg}  --k-input-radius  --k-input-bg  --k-input-border
 * ارتفاع‌ها با دکمه یکی است (۳۶، ۴۰، ۴۴ پیکسل) تا فیلد و دکمه در یک ردیف هم‌قد باشند.
 */
.k-input {
  --_h: var(--k-input-height-md, calc(2.5rem * var(--k-density)));
  --_border: var(--k-input-border, var(--k-border-input));
  --_ring: var(--k-ring-brand);

  display: flex;
  align-items: center;
  gap: var(--k-space-2);
  min-block-size: var(--_h);
  padding-inline: calc(0.875rem * var(--k-density));
  border: 1px solid var(--_border);
  border-radius: var(--k-input-radius, var(--k-radius-md));
  background: var(--k-input-bg, var(--k-bg-primary));
  color: var(--k-text-primary);
  box-shadow: var(--k-shadow-xs);
  cursor: text;
  font-size: var(--k-text-md);
  transition:
    border-color var(--k-duration-fast) var(--k-ease-standard),
    box-shadow var(--k-duration-fast) var(--k-ease-standard);
}

/* پر شدن خودکار مرورگر (نشانی، ایمیل…): مرورگر فقط پشت خود متن رنگ می‌گذارد و فیلد دورنگ می‌شود؛
 * با سایهٔ داخلی هم‌رنگ فیلد پوشانده می‌شود. دو قاعدهٔ جدا، چون مرورگری که یکی را نشناسد کل قاعده را نادیده می‌گیرد */
.k-input__control:-webkit-autofill {
  -webkit-text-fill-color: var(--k-text-primary);
  caret-color: var(--k-text-primary);
  box-shadow: 0 0 0 100vmax var(--k-input-bg, var(--k-bg-primary)) inset;
  transition: background-color 0s 600000s;
}
.k-input__control:autofill {
  -webkit-text-fill-color: var(--k-text-primary);
  caret-color: var(--k-text-primary);
  box-shadow: 0 0 0 100vmax var(--k-input-bg, var(--k-bg-primary)) inset;
  transition: background-color 0s 600000s;
}

.k-input:hover:not(:focus-within, :has(:disabled, [aria-invalid="true"])) {
  --_border: var(--k-input-border-hover, var(--k-text-quaternary));
}

.k-input:focus-within {
  --_border: var(--k-border-brand);
  box-shadow: var(--k-shadow-xs), var(--_ring);
  /* forced-colors */
  outline: 2px solid transparent;
}

.k-input:has(.k-input__control[aria-invalid="true"]) {
  --_border: var(--k-border-error);
  --_ring: var(--k-ring-error);
}

.k-input:has(.k-input__control:disabled) {
  background: var(--k-bg-secondary);
  border-color: var(--k-border-secondary);
  box-shadow: none;
  cursor: not-allowed;
}

.k-input__control {
  flex: 1;
  min-inline-size: 0;
  align-self: stretch;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--k-text-md);
}
/* ارقام هم‌عرض تا عدد هنگام تایپ جابه‌جا نشود */
.k-input__control:is([inputmode="numeric"], [inputmode="tel"], [inputmode="decimal"]) {
  letter-spacing: 0.02em;
}

/* iOS هنگام فوکوس روی فیلدی با متن کوچک‌تر از ۱۶ پیکسل کل صفحه را بزرگ می‌کند */
@supports (-webkit-touch-callout: none) {
  .k-input__control { font-size: max(16px, 1em); }
}

.k-input__control::placeholder { color: var(--k-text-tertiary); opacity: 1; }
.k-input__control:disabled { color: var(--k-text-quaternary); cursor: not-allowed; }

/* ایمیل، آدرس، شماره و رمز همیشه چپ‌به‌راست تایپ می‌شوند */
.k-input__control:is([type="email"], [type="url"], [type="tel"], [type="number"], [type="password"], [dir="ltr"]) {
  direction: ltr;
  text-align: end;
}
.k-input__control:is([type="email"], [type="url"], [type="tel"], [type="number"], [type="password"]):placeholder-shown {
  direction: rtl;
  text-align: start;
}
[dir="ltr"] .k-input__control:is([type="email"], [type="url"], [type="tel"], [type="number"], [type="password"]):placeholder-shown {
  direction: ltr;
}

.k-input__addon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--k-text-tertiary);
  font-size: var(--k-text-md);
}
.k-input__addon svg { inline-size: 1.25rem; block-size: 1.25rem; }

/* چندخطی */
.k-input--textarea { align-items: stretch; padding-block: calc(0.625rem * var(--k-density)); }
.k-input--textarea .k-input__control { min-block-size: 5lh; resize: vertical; line-height: var(--k-leading-normal); }

.k-input--sm { --_h: var(--k-input-height-sm, calc(2.25rem * var(--k-density))); }
.k-input--lg { --_h: var(--k-input-height-lg, calc(2.75rem * var(--k-density))); }

@media (forced-colors: active) {
  .k-input { border-color: FieldText; }
  .k-input:focus-within { outline-color: Highlight; }
}

/* دکمه‌های داخل فیلد: پاک کردن، نمایش رمز */
.k-input__action {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  margin-inline: -0.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--k-radius-sm);
  background: none;
  color: var(--k-text-tertiary);
  cursor: pointer;
}
.k-input__action:hover { color: var(--k-text-primary); background: var(--k-bg-hover); }
.k-input__action:focus-visible { outline: 2px solid transparent; box-shadow: var(--k-ring-brand); }
.k-input__action svg { inline-size: 1.125rem; block-size: 1.125rem; }
.k-input__control::-ms-reveal { display: none; }

/* ارتفاع خودکار textarea */
.k-input--autoresize .k-input__control { resize: none; overflow-y: auto; min-block-size: 3lh; field-sizing: content; }

/* نقشهٔ استان‌های ایران — نقشهٔ رنگی با طیف برند و انتخاب استان */
.k-iran-map { position: relative; display: grid; gap: var(--k-space-3); margin: 0; inline-size: 100%; font-size: var(--k-text-xs); }
.k-iran-map__canvas { position: relative; block-size: 0; }
.k-iran-map__svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.k-iran-map__province {
  fill: var(--k-iran-map-empty, var(--k-bg-tertiary));
  stroke: var(--k-iran-map-border, var(--k-bg-primary));
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill var(--k-duration-fast), opacity var(--k-duration-fast);
}
.k-iran-map__province[data-l] { fill: color-mix(in srgb, var(--k-bg-brand) var(--_p, 60%), var(--k-bg-tertiary)); }
.k-iran-map__province[data-active] { stroke: var(--k-text-primary); stroke-width: 2; paint-order: stroke; }
.k-iran-map__svg:has([data-active]) .k-iran-map__province:not([data-active], [data-selected]) { opacity: 0.75; }
.k-iran-map--selectable .k-iran-map__province { cursor: pointer; }
.k-iran-map--selectable .k-iran-map__province:focus { outline: none; }
.k-iran-map--selectable .k-iran-map__province:focus-visible { stroke: var(--k-border-brand); stroke-width: 3; }
.k-iran-map__province[data-selected] { fill: var(--k-iran-map-selected, var(--k-bg-brand)); stroke: var(--k-text-primary); stroke-width: 2; }
.k-iran-map__legend { display: flex; align-items: center; justify-content: center; gap: var(--k-space-2); color: var(--k-text-tertiary); }
.k-iran-map__scale { display: inline-flex; gap: 2px; }
.k-iran-map__scale i { inline-size: 1.5rem; block-size: 0.625rem; background: color-mix(in srgb, var(--k-bg-brand) var(--_p, 60%), var(--k-bg-tertiary)); }
.k-iran-map__scale i:first-child { border-start-start-radius: var(--k-radius-full); border-end-start-radius: var(--k-radius-full); }
.k-iran-map__scale i:last-child { border-start-end-radius: var(--k-radius-full); border-end-end-radius: var(--k-radius-full); }
.k-iran-map .k-chart__tip { pointer-events: none; }
@media (forced-colors: active) {
  .k-iran-map__province { stroke: CanvasText; }
  .k-iran-map__province[data-selected] { fill: Highlight; forced-color-adjust: none; }
}
@media (prefers-reduced-motion: reduce) { .k-iran-map__province { transition: none; } }

/* کلید صفحه‌کلید: <kbd class="k-kbd">Ctrl</kbd> */
.k-kbd {
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.5rem;
  block-size: 1.5rem;
  padding-inline: 0.375rem;
  border: 1px solid var(--k-border-primary);
  border-block-end-width: 2px;
  border-radius: var(--k-radius-sm);
  background: var(--k-bg-secondary);
  color: var(--k-text-secondary);
  font-family: var(--k-font-mono);
  font-size: var(--k-text-xs);
  font-weight: var(--k-weight-medium);
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
  vertical-align: middle;
}
.k-kbd-combo { display: inline-flex; align-items: center; gap: 0.25rem; direction: ltr; color: var(--k-text-quaternary); font-size: var(--k-text-xs); }

/* منوی کشویی (Dropdown menu) — ساختار ARIA را کامپوننت React می‌سازد
 * متغیرها: --k-menu-min-width  --k-menu-radius  --k-menu-item-height  --k-menu-bg
 */
.k-menu-anchor { position: relative; display: inline-flex; }
.k-menu {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: var(--k-z-dropdown);
  min-inline-size: var(--k-menu-min-width, 12rem);
  max-block-size: 22rem;
  margin: 0;
  padding: var(--k-space-1_5);
  overflow-y: auto;
  border: 1px solid var(--k-border-secondary);
  border-radius: var(--k-menu-radius, var(--k-radius-lg));
  background: var(--k-menu-bg, var(--k-bg-elevated));
  box-shadow: var(--k-shadow-lg), var(--k-highlight);
  list-style: none;
  animation: k-pop-in var(--k-duration-fast) var(--k-ease-standard);
}
.k-menu--end { inset-inline: auto 0; }
.k-menu[hidden] { display: none; }
.k-menu__item {
  display: flex;
  align-items: center;
  gap: var(--k-space-2);
  inline-size: 100%;
  min-block-size: var(--k-menu-item-height, calc(2.25rem * var(--k-density)));
  padding-inline: var(--k-space-2_5, 0.625rem);
  border: 0;
  border-radius: var(--k-radius-md);
  background: transparent;
  color: var(--k-text-secondary);
  font: inherit;
  font-size: var(--k-text-sm);
  font-weight: var(--k-weight-medium);
  text-align: start;
  cursor: pointer;
  outline: none;
}
.k-menu__item:is(:hover, :focus-visible, :focus) { background: var(--k-bg-hover); color: var(--k-text-primary); }
.k-menu__item[aria-disabled="true"] { color: var(--k-text-quaternary); cursor: not-allowed; background: transparent; }
.k-menu__item--danger { color: var(--k-text-error); }
.k-menu__item--danger:is(:hover, :focus) { background: var(--k-bg-error-subtle); color: var(--k-text-error); }
.k-menu__item svg { inline-size: 1.125rem; block-size: 1.125rem; flex-shrink: 0; color: var(--k-text-tertiary); }
.k-menu__item--danger svg { color: inherit; }
.k-menu__check { display: inline-grid; place-items: center; inline-size: 1.125rem; flex-shrink: 0; color: var(--k-text-brand); }
.k-menu__check svg { inline-size: 1rem; block-size: 1rem; color: inherit; }
.k-menu__shortcut { margin-inline-start: auto; color: var(--k-text-quaternary); font-size: var(--k-text-xs); direction: ltr; }
.k-menu__separator { block-size: 1px; margin: var(--k-space-1_5) calc(var(--k-space-1_5) * -1); background: var(--k-border-secondary); }
.k-menu__label { padding: var(--k-space-2) var(--k-space-2_5, 0.625rem) var(--k-space-1); color: var(--k-text-tertiary); font-size: var(--k-text-xs); font-weight: var(--k-weight-semibold); }
@media (forced-colors: active) {
  .k-menu { border-color: CanvasText; }
  .k-menu__item:focus { outline: 2px solid Highlight; }
}

/* منوی راست‌کلیک: جای منو از مختصات نشانگر */
.k-context-area { position: relative; }
.k-menu--context { position: fixed; inset: auto; inset-block-start: var(--_y); inset-inline-start: auto; left: var(--_x); }
/* سبک پیش‌فرض مرورگر برای popover را خنثی می‌کند */
.k-menu--context[popover] { margin: 0; padding: var(--k-space-1_5); border: 1px solid var(--k-border-secondary); color: inherit; overflow: visible; }
.k-menu--context:popover-open { position: fixed; inset: auto; top: var(--_y); left: var(--_x); }

/* سنجه (Meter): مقدار در برابر یک سقف، مثل فضای مصرفی */
.k-meter { display: grid; gap: var(--k-space-2); }
.k-meter__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--k-space-2); }
.k-meter__label { color: var(--k-text-secondary); font-size: var(--k-text-sm); font-weight: var(--k-weight-medium); }
.k-meter__value { color: var(--k-text-primary); font-size: var(--k-text-sm); font-weight: var(--k-weight-semibold); }
.k-meter__value span { color: var(--k-text-tertiary); font-weight: var(--k-weight-regular); }
.k-meter__track { position: relative; block-size: 0.5rem; border-radius: var(--k-radius-full); background: var(--k-bg-tertiary); overflow: hidden; }
.k-meter__fill { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit; background: var(--k-bg-brand); transition: inline-size var(--k-duration-slow) var(--k-ease-standard), background-color var(--k-duration-normal); }
.k-meter[data-status="warning"] .k-meter__fill { background: var(--k-text-warning); }
.k-meter[data-status="critical"] .k-meter__fill { background: var(--k-text-error); }
.k-meter__mark { position: absolute; inset-block: -2px; inline-size: 2px; background: var(--k-bg-primary); }
.k-meter__status { display: inline-flex; align-items: center; gap: var(--k-space-1); margin: 0; font-size: var(--k-text-xs); color: var(--k-text-tertiary); }
.k-meter__status svg { inline-size: 0.875rem; block-size: 0.875rem; }
.k-meter[data-status="warning"] .k-meter__status { color: var(--k-text-warning); }
.k-meter[data-status="critical"] .k-meter__status { color: var(--k-text-error); }
@media (forced-colors: active) { .k-meter__track { border: 1px solid CanvasText; } .k-meter__fill { background: Highlight; } }

/* انتخاب ماه و سال شمسی */
.k-monthpicker { display: grid; gap: var(--k-space-3); inline-size: var(--k-monthpicker-width, 18rem); }
.k-monthpicker__header { display: flex; align-items: center; justify-content: space-between; gap: var(--k-space-2); }
.k-monthpicker__year { color: var(--k-text-primary); font-size: var(--k-text-md); font-weight: var(--k-weight-semibold); }
.k-monthpicker__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--k-space-1); }
.k-monthpicker__month {
  block-size: 2.5rem;
  border: 0;
  border-radius: var(--k-radius-md);
  background: transparent;
  color: var(--k-text-secondary);
  font: inherit;
  font-size: var(--k-text-sm);
  font-weight: var(--k-weight-medium);
  cursor: pointer;
}
.k-monthpicker__month:hover { background: var(--k-bg-hover); color: var(--k-text-primary); }
.k-monthpicker__month:focus-visible { outline: 2px solid transparent; box-shadow: var(--k-ring-brand); }
.k-monthpicker__month[aria-current="date"] { color: var(--k-text-brand); font-weight: var(--k-weight-bold); }
.k-monthpicker__month[aria-pressed="true"] { background: var(--k-bg-brand); color: var(--k-text-on-brand); font-weight: var(--k-weight-semibold); }
.k-monthpicker__month:disabled { color: var(--k-text-quaternary); text-decoration: line-through; cursor: not-allowed; }
@media (forced-colors: active) {
  .k-monthpicker__month[aria-pressed="true"] { outline: 2px solid Highlight; }
}

/* ورودی عدد با دکمه‌های افزایش و کاهش */
.k-number .k-input { padding-inline: var(--k-space-1); }
.k-number .k-input__control { text-align: center; }
.k-number__step {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 2.25rem;
  block-size: calc(100% - 0.5rem);
  min-block-size: 2rem;
  border: 0;
  border-radius: var(--k-radius-sm);
  background: none;
  color: var(--k-text-secondary);
  cursor: pointer;
}
.k-number__step:hover:not(:disabled) { background: var(--k-bg-hover); color: var(--k-text-primary); }
.k-number__step:focus-visible { outline: 2px solid transparent; box-shadow: var(--k-ring-brand); }
.k-number__step:disabled { color: var(--k-text-quaternary); cursor: not-allowed; }
.k-number__step svg { inline-size: 1rem; block-size: 1rem; }

/* کد تأیید یک‌بارمصرف (OTP) — یک input واقعی روی خانه‌های نمایشی؛ پر شدن خودکار پیامک کار می‌کند */
.k-otp {
  --_s: var(--k-otp-size, 3.25rem);
  position: relative;
  display: inline-flex;
  gap: var(--k-space-2);
  direction: ltr;
}
.k-otp__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  inline-size: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px;
  letter-spacing: 2em;
  cursor: text;
}
.k-otp__input::selection { background: transparent; }
.k-otp__slot {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: var(--_s);
  block-size: calc(var(--_s) * 1.15);
  border: 1px solid var(--k-border-input);
  border-radius: var(--k-radius-lg);
  background: var(--k-bg-primary);
  color: var(--k-text-primary);
  box-shadow: var(--k-shadow-xs);
  font-size: calc(var(--_s) * 0.5);
  font-weight: var(--k-weight-semibold);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--k-duration-fast), box-shadow var(--k-duration-fast);
}
.k-otp__slot[data-filled] { border-color: var(--k-border-primary); }
.k-otp:has(.k-otp__input:focus-visible, .k-otp__input:focus) .k-otp__slot[data-active] { border-color: var(--k-border-brand); box-shadow: var(--k-shadow-xs), var(--k-ring-brand); }
/* مکان‌نمای نمایشی */
.k-otp:has(.k-otp__input:focus) .k-otp__slot[data-active]:not([data-filled])::after {
  content: "";
  inline-size: 2px;
  block-size: 40%;
  border-radius: 1px;
  background: var(--k-text-brand);
  animation: k-caret 1s steps(1) infinite;
}
@keyframes k-caret { 50% { opacity: 0; } }
.k-otp--invalid .k-otp__slot { border-color: var(--k-border-error); }
.k-otp--invalid:has(.k-otp__input:focus) .k-otp__slot[data-active] { box-shadow: var(--k-ring-error); border-color: var(--k-border-error); }
.k-otp:has(.k-otp__input:disabled) .k-otp__slot { background: var(--k-bg-secondary); color: var(--k-text-quaternary); box-shadow: none; }
.k-otp__sep { align-self: center; inline-size: 0.75rem; block-size: 2px; background: var(--k-border-primary); }
.k-otp--sm { --_s: var(--k-otp-size, 2.5rem); }
@media (prefers-reduced-motion: reduce) { .k-otp__slot::after { animation: none !important; } }
@media (forced-colors: active) { .k-otp__slot { border-color: CanvasText; } .k-otp__slot[data-active] { outline: 2px solid Highlight; } }

/* صفحه‌بندی
 * متغیرها: --k-pagination-size  --k-pagination-radius */
.k-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--k-space-3); flex-wrap: wrap; }
.k-pagination__pages { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.k-pagination__page {
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--k-pagination-size, 2.5rem);
  block-size: var(--k-pagination-size, 2.5rem);
  padding-inline: var(--k-space-2);
  border: 0;
  border-radius: var(--k-pagination-radius, var(--k-radius-md));
  background: transparent;
  color: var(--k-text-tertiary);
  font: inherit;
  font-size: var(--k-text-sm);
  font-weight: var(--k-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--k-duration-fast), color var(--k-duration-fast);
}
.k-pagination__page:hover { background: var(--k-bg-hover); color: var(--k-text-primary); }
.k-pagination__page:focus-visible { outline: 2px solid transparent; box-shadow: var(--k-ring-brand); }
.k-pagination__page[aria-current="page"] { background: var(--k-bg-active); color: var(--k-text-primary); font-weight: var(--k-weight-semibold); }
.k-pagination__ellipsis { min-inline-size: 2.5rem; text-align: center; color: var(--k-text-quaternary); }
.k-pagination__summary { color: var(--k-text-tertiary); font-size: var(--k-text-sm); }
@media (max-width: 36rem) { .k-pagination__pages li:not(:has([aria-current])):not(:first-child):not(:last-child) { display: none; } }
/* ابزارهای کمکی: تعداد در هر صفحه و پرش به صفحه */
.k-pagination__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-4); inline-size: 100%; justify-content: flex-end; padding-block-start: var(--k-space-3); border-block-start: 1px solid var(--k-border-secondary); color: var(--k-text-tertiary); font-size: var(--k-text-sm); }
.k-pagination__tool { display: inline-flex; align-items: center; gap: var(--k-space-2); margin: 0; }
.k-pagination__tool .k-select { inline-size: 5rem; }
.k-pagination__jump { inline-size: 4.5rem; }
.k-pagination__jump .k-input__control { text-align: center; }

/* قدرت رمز عبور: نوار چهارقسمتی + فهرست شرط‌ها */
.k-strength { display: grid; gap: var(--k-space-2); }
.k-strength__bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--k-space-1); }
.k-strength__bar { block-size: 0.25rem; border-radius: var(--k-radius-full); background: var(--k-bg-tertiary); transition: background-color var(--k-duration-normal); }
.k-strength[data-score="1"] .k-strength__bar:nth-child(-n + 1) { background: var(--k-text-error); }
.k-strength[data-score="2"] .k-strength__bar:nth-child(-n + 2) { background: var(--k-text-warning); }
.k-strength[data-score="3"] .k-strength__bar:nth-child(-n + 3) { background: var(--k-text-success); }
.k-strength[data-score="4"] .k-strength__bar { background: var(--k-text-success); }
.k-strength__label { color: var(--k-text-tertiary); font-size: var(--k-text-sm); }
.k-strength__label strong { color: var(--k-text-secondary); font-weight: var(--k-weight-semibold); }
.k-strength__rules { display: grid; gap: var(--k-space-1); margin: 0; padding: 0; list-style: none; }
.k-strength__rule { display: flex; align-items: center; gap: var(--k-space-1_5); color: var(--k-text-tertiary); font-size: var(--k-text-sm); }
.k-strength__rule svg { inline-size: 1rem; block-size: 1rem; flex-shrink: 0; }
.k-strength__rule[data-met] { color: var(--k-text-success); }
@media (forced-colors: active) {
  .k-strength__bar { border: 1px solid CanvasText; }
  .k-strength[data-score] .k-strength__bar { forced-color-adjust: none; }
}

/* پیشنهاد صفحه‌کلید اشتباه و ویرایش نگارشی */
.k-kbfix { color: var(--k-text-tertiary); }
.k-kbfix__btn {
  padding: 0 0.15em;
  border: 0;
  border-radius: var(--k-radius-sm);
  background: none;
  color: var(--k-text-brand);
  font: inherit;
  font-weight: var(--k-weight-semibold);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.k-kbfix__btn:hover { background: var(--k-bg-hover); }
.k-kbfix__btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--k-ring-brand); }
.k-textfix { display: flex; align-items: center; justify-content: space-between; gap: var(--k-space-2); inline-size: 100%; }
.k-textfix[data-state="fix"] .k-textfix__text { color: var(--k-text-warning); }
.k-textfix[data-state="clean"] .k-textfix__text { color: var(--k-text-success); }
.k-textfix .k-btn { flex-shrink: 0; margin-block: -0.25rem; }

/* مبلغ
 * متغیرها: --k-money-size */
.k-money { display: inline-flex; align-items: baseline; gap: 0.3em; white-space: nowrap; color: var(--k-text-primary); }
.k-money__amount { font-size: var(--k-money-size, 1em); font-weight: var(--k-weight-semibold); letter-spacing: -0.01em; }
.k-money__unit { color: var(--k-text-tertiary); font-size: 0.8em; font-weight: var(--k-weight-medium); }
.k-money--sm { --k-money-size: var(--k-text-sm); }
.k-money--lg { --k-money-size: var(--k-text-xl); }
.k-money--xl { --k-money-size: var(--k-text-3xl, 1.875rem); }
.k-money--lg .k-money__unit, .k-money--xl .k-money__unit { font-size: var(--k-text-sm); }
.k-money[data-tone="positive"] .k-money__amount { color: var(--k-text-success); }
.k-money[data-tone="negative"] .k-money__amount { color: var(--k-text-error); }

/* کارت بانکی — نسبت استاندارد ۸۵٫۶ × ۵۴ میلی‌متر
 * متغیرها: --k-bankcard-color  --k-bankcard-width */
.k-bankcard {
  --_c: var(--k-bankcard-color, var(--k-firoozeh-700));
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  box-sizing: border-box;
  inline-size: var(--k-bankcard-width, 21rem);
  max-inline-size: 100%;
  aspect-ratio: 85.6 / 54;
  margin: 0;
  padding: 1.25rem 1.4rem;
  overflow: hidden;
  border-radius: calc(var(--k-radius-xl) * 1.1);
  background:
    radial-gradient(120% 90% at 0% 0%, rgb(255 255 255 / 0.22), transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--_c) 78%, #fff 22%), var(--_c) 45%, color-mix(in srgb, var(--_c) 70%, #000 30%));
  color: #fff;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.25) inset, 0 18px 36px -14px color-mix(in srgb, var(--_c) 70%, #000), var(--k-shadow-md);
  font-family: var(--k-font-sans);
  container-type: inline-size;
}
/* نقش کاشی‌کاری در پس‌زمینه */
.k-bankcard::before {
  content: "";
  position: absolute;
  inset-block: -20%;
  inset-inline-start: 38%;
  inline-size: 90%;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='white' stroke-width='.6' d='M16 1 11.61 5.39H5.39v6.22L1 16l4.39 4.39v6.22h6.22L16 31l4.39-4.39h6.22v-6.22L31 16l-4.39-4.39V5.39h-6.22Z'/%3E%3C/svg%3E") center / 7rem repeat;
  opacity: 0.12;
  mask-image: radial-gradient(closest-side, #000, transparent);
}
.k-bankcard__top { display: flex; align-items: center; justify-content: space-between; gap: var(--k-space-2); }
.k-bankcard__bank { display: inline-flex; align-items: center; gap: var(--k-space-2); font-size: max(0.75rem, 4.2cqi); font-weight: var(--k-weight-semibold); }
.k-bankcard__logo { inline-size: 1.75rem; block-size: 1.75rem; padding: 2px; border-radius: var(--k-radius-md); background: #fff; }
.k-bankcard__chip { inline-size: 11.5cqi; fill: #e9c46a; stroke: rgb(120 80 10 / 0.45); stroke-width: 1; }
.k-bankcard__number { align-self: center; font-size: 6.9cqi; white-space: nowrap; font-weight: var(--k-weight-semibold); letter-spacing: 0.06em; text-align: center; word-spacing: 0.15em; text-shadow: 0 1px 2px rgb(0 0 0 / 0.3); }
.k-bankcard__bottom { display: flex; align-items: end; justify-content: space-between; gap: var(--k-space-3); min-block-size: 1.5rem; font-size: max(0.75rem, 4.2cqi); }
.k-bankcard__holder { font-weight: var(--k-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-bankcard__exp { display: inline-grid; justify-items: end; line-height: 1.3; margin-inline-start: auto; }
.k-bankcard__exp small { font-size: 0.7rem; opacity: 0.75; }

/* کاشی تاریخ */
.k-datetile {
  --_s: 1;
  display: inline-grid;
  justify-items: center;
  inline-size: calc(8rem * var(--_s));
  overflow: hidden;
  border: 1px solid var(--k-border-secondary);
  border-radius: var(--k-radius-xl);
  background: var(--k-bg-elevated);
  box-shadow: var(--k-shadow-sm), var(--k-highlight, none);
  text-align: center;
  line-height: 1.4;
}
.k-datetile--sm { --_s: 0.75; font-size: var(--k-text-sm); }
.k-datetile--lg { --_s: 1.35; }
.k-datetile__head { justify-self: stretch; padding: calc(0.35rem * var(--_s)) 0.5rem; background: var(--k-bg-brand); color: var(--k-text-on-brand); font-size: calc(0.8rem * var(--_s)); font-weight: var(--k-weight-semibold); }
.k-datetile__day { margin-block-start: calc(0.25rem * var(--_s)); font-size: calc(2.75rem * var(--_s)); font-weight: var(--k-weight-bold, 700); line-height: 1.15; color: var(--k-text-primary); }
.k-datetile__weekday { color: var(--k-text-secondary); font-size: calc(0.85rem * var(--_s)); font-weight: var(--k-weight-medium); }
.k-datetile__occasion { margin-block-start: 0.15rem; padding-inline: 0.5rem; color: var(--k-text-error); font-size: calc(0.72rem * var(--_s)); font-weight: var(--k-weight-semibold); }
.k-datetile__greg { justify-self: stretch; margin-block-start: calc(0.45rem * var(--_s)); padding: calc(0.3rem * var(--_s)) 0.5rem; border-block-start: 1px dashed var(--k-border-secondary); color: var(--k-text-tertiary); font-size: calc(0.72rem * var(--_s)); }
.k-datetile[data-holiday] .k-datetile__head { background: var(--k-bg-error); color: #fff; }
.k-datetile[data-holiday] .k-datetile__day { color: var(--k-text-error); }

/* رسید پرداخت */
.k-receipt {
  --_tone: var(--k-text-success);
  --_tone-bg: var(--k-bg-success-subtle);
  position: relative;
  display: grid;
  inline-size: 100%;
  max-inline-size: 26rem;
  border: 1px solid var(--k-border-secondary);
  border-radius: var(--k-radius-2xl);
  background: var(--k-bg-elevated);
  box-shadow: var(--k-shadow-lg);
}
.k-receipt[data-status="failed"] { --_tone: var(--k-text-error); --_tone-bg: var(--k-bg-error-subtle); }
.k-receipt[data-status="pending"] { --_tone: var(--k-text-warning); --_tone-bg: var(--k-bg-warning-subtle); }
.k-receipt__head { display: grid; justify-items: center; gap: var(--k-space-1); padding: var(--k-space-6) var(--k-space-5) var(--k-space-5); text-align: center; }
.k-receipt__icon { display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; margin-block-end: var(--k-space-2); border-radius: 50%; background: var(--_tone-bg); color: var(--_tone); box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--_tone-bg) 50%, transparent); }
.k-receipt__icon svg { inline-size: 1.75rem; block-size: 1.75rem; }
.k-receipt__title { margin: 0; font-size: var(--k-text-lg); font-weight: var(--k-weight-semibold); color: var(--_tone); }
.k-receipt__desc { margin: 0; color: var(--k-text-tertiary); font-size: var(--k-text-sm); }
.k-receipt__amount { margin-block-start: var(--k-space-3); }
.k-receipt__words { margin: 0; color: var(--k-text-tertiary); font-size: var(--k-text-xs, 0.75rem); }
/* لبهٔ سوراخ‌دار بین بالا و جزئیات */
.k-receipt__rows {
  position: relative;
  display: grid;
  gap: var(--k-space-3);
  margin: 0;
  padding: var(--k-space-5);
  border-block-start: 2px dashed var(--k-border-secondary);
}
.k-receipt__rows::before, .k-receipt__rows::after {
  content: "";
  position: absolute;
  inset-block-start: -0.75rem;
  inline-size: 1.4rem;
  block-size: 1.4rem;
  border: 1px solid var(--k-border-secondary);
  border-radius: 50%;
  background: var(--k-bg-primary);
}
.k-receipt__rows::before { inset-inline-start: -0.75rem; clip-path: inset(0 0 0 50%); }
.k-receipt__rows::after { inset-inline-end: -0.75rem; clip-path: inset(0 50% 0 0); }
.k-receipt__row { display: flex; align-items: center; justify-content: space-between; gap: var(--k-space-3); min-block-size: 1.75rem; font-size: var(--k-text-sm); }
.k-receipt__row dt { color: var(--k-text-tertiary); }
.k-receipt__row dd { margin: 0; color: var(--k-text-primary); font-weight: var(--k-weight-medium); text-align: end; }
.k-receipt__code, .k-receipt__card { display: inline-flex; align-items: center; gap: var(--k-space-1_5); }
.k-receipt__card img { border-radius: var(--k-radius-sm); background: #fff; padding: 1px; }
.k-receipt__actions { display: flex; gap: var(--k-space-2); padding: 0 var(--k-space-5) var(--k-space-5); }
.k-receipt__actions > * { flex: 1; }
@media (prefers-reduced-motion: no-preference) {
  .k-receipt__icon { animation: k-receipt-pop 0.5s var(--k-ease-standard) both; }
  @keyframes k-receipt-pop { from { scale: 0.6; opacity: 0; } }
}

/* پلاک خودروی ایران — نسبت واقعی ۵۲۰×۱۱۰ میلی‌متر و رنگ بر اساس نوع پلاک
 * ترتیب فیزیکی چپ‌به‌راست: نوار آبی (پرچم و I.R. IRAN) | دو رقم | حرف | سه رقم | «ایران» و کد استان
 * رنگ با data-type: private سفید، taxi/public/agricultural زرد، government قرمز، police سبز، army قهوه‌ای روشن، defense آبی روشن
 */
.k-plate {
  --_h: var(--k-plate-height, 3.5rem);
  --_bg: #fff;
  --_ink: #111;
  display: inline-grid;
  grid-template-columns: calc(var(--_h) * 0.42) 1fr auto 1.35fr auto;
  /* ارتفاع بخش‌ها دقیقاً هم‌اندازهٔ پلاک؛ وگرنه input بلندتر می‌شود و پایینش بریده و متن بالا می‌رود */
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  box-sizing: border-box;
  justify-self: start;
  /* ۵۲۰ ÷ ۱۱۰ */
  inline-size: calc(var(--_h) * 4.73);
  max-inline-size: 100%;
  block-size: var(--_h);
  direction: ltr;
  border: 2px solid #111;
  border-radius: calc(var(--_h) * 0.12);
  background: var(--_bg);
  color: var(--_ink);
  box-shadow: var(--k-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--k-duration-fast);
}
.k-plate[data-type="taxi"], .k-plate[data-type="public"], .k-plate[data-type="agricultural"] { --_bg: #f7c600; }
.k-plate[data-type="government"] { --_bg: #c8102e; --_ink: #fff; }
.k-plate[data-type="police"] { --_bg: #0b5d3b; --_ink: #fff; }
.k-plate[data-type="army"] { --_bg: #c9a46a; }
.k-plate[data-type="defense"] { --_bg: #5aa7dc; --_ink: #fff; }
.k-plate:focus-within { box-shadow: var(--k-shadow-sm), var(--k-ring-brand); }
.k-plate[data-invalid] { box-shadow: var(--k-shadow-sm), var(--k-ring-error); }

.k-plate__flag {
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  align-content: start;
  gap: calc(var(--_h) * 0.1);
  padding-block: calc(var(--_h) * 0.1);
  background: #1f4fa8;
  color: #fff;
  font: 700 calc(var(--_h) * 0.13)/1.15 system-ui, sans-serif;
  text-align: center;
}
.k-plate__flag-colors {
  inline-size: 70%;
  aspect-ratio: 7 / 4;
  background: linear-gradient(#239f40 0 33.3%, #fff 33.3% 66.6%, #da0000 66.6%);
}

.k-plate__seg {
  box-sizing: border-box;
  min-inline-size: 0;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  /* ارقام فارسی وزیرمتن حدود ۰٫۰۹em بالاتر از وسط جعبهٔ فونت‌اند (اندازه‌گیری با measureText) */
  padding: 0.18em 0 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: calc(var(--_h) * 0.62);
  font-weight: var(--k-weight-bold);
  line-height: 1;
  text-align: center;
}
.k-plate__seg::placeholder { color: currentColor; opacity: 0.25; }
.k-plate__letter {
  appearance: none;
  box-sizing: border-box;
  block-size: 100%;
  min-block-size: 0;
  /* حرف‌ها برعکسِ ارقام کمی پایین‌تر از وسط‌اند */
  padding: 0 calc(var(--_h) * 0.08) 0.16em;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: calc(var(--_h) * 0.5);
  font-weight: var(--k-weight-bold);
  text-align: center;
  text-align-last: center;
  cursor: pointer;
}
.k-plate__letter option { color: #111; background: #fff; }
.k-plate__seg:focus-visible, .k-plate__letter:focus-visible { background: rgb(0 0 0 / 0.07); }
.k-plate[data-type="government"] :is(.k-plate__seg, .k-plate__letter):focus-visible,
.k-plate[data-type="police"] :is(.k-plate__seg, .k-plate__letter):focus-visible,
.k-plate[data-type="defense"] :is(.k-plate__seg, .k-plate__letter):focus-visible { background: rgb(255 255 255 / 0.15); }

/* بخش استان: «ایران» بالا، دو رقم پایین، جدا با خط عمودی */
.k-plate__region {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  box-sizing: border-box;
  inline-size: calc(var(--_h) * 0.95);
  min-block-size: 0;
  padding-block: calc(var(--_h) * 0.06) calc(var(--_h) * 0.04);
  border-inline-start: 2px solid currentColor;
}
.k-plate__region-label { font-size: calc(var(--_h) * 0.2); font-weight: var(--k-weight-bold); line-height: 1; }
.k-plate__region .k-plate__seg { font-size: calc(var(--_h) * 0.48); padding-block-start: 0.1em; }
@media (forced-colors: active) {
  .k-plate { border-color: CanvasText; }
}

/* پنجرهٔ شناور (Popover) — غیرمودال، کنار یک دکمه */
.k-popover-anchor { position: relative; display: inline-flex; vertical-align: middle; }
.k-popover {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-start: 0;
  z-index: var(--k-z-dropdown);
  inline-size: var(--k-popover-width, 20rem);
  max-inline-size: calc(100vw - 2rem);
  padding: var(--k-popover-padding, var(--k-space-4));
  border: 1px solid var(--k-border-secondary);
  border-radius: var(--k-popover-radius, var(--k-radius-xl));
  background: var(--k-bg-elevated);
  color: var(--k-text-primary);
  box-shadow: var(--k-shadow-xl), var(--k-highlight);
  animation: k-pop-in var(--k-duration-fast) var(--k-ease-standard);
}
.k-popover[hidden] { display: none; }
.k-popover--end { inset-inline: auto 0; }
.k-popover--top { inset-block: auto calc(100% + 8px); }
.k-popover__title { margin: 0 0 var(--k-space-1); font-size: var(--k-text-sm); font-weight: var(--k-weight-semibold); }
.k-popover__body { color: var(--k-text-tertiary); font-size: var(--k-text-sm); line-height: var(--k-leading-normal); }

/* نوار پیشرفت و اسپینر
 * <div class="k-progress" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" aria-label="…"><div class="k-progress__bar" style="--k-value: 40%"></div></div>
 */
.k-progress-field { display: grid; gap: var(--k-space-2); }
.k-progress-field__head { display: flex; justify-content: space-between; gap: var(--k-space-3); font-size: var(--k-text-sm); }
.k-progress-field__label { color: var(--k-text-secondary); font-weight: var(--k-weight-medium); }
.k-progress-field__value { color: var(--k-text-tertiary); }

.k-progress {
  --_h: var(--k-progress-height, 0.5rem);
  --_c: var(--k-progress-color, var(--k-bg-brand));
  position: relative;
  block-size: var(--_h);
  border-radius: var(--k-radius-full);
  background: var(--k-bg-tertiary);
  overflow: hidden;
}
.k-progress--sm { --_h: 0.25rem; }
.k-progress--lg { --_h: 0.75rem; }
.k-progress--success { --_c: var(--k-text-success); }
.k-progress--warning { --_c: var(--k-text-warning); }
.k-progress--error { --_c: var(--k-text-error); }
.k-progress__bar {
  block-size: 100%;
  inline-size: var(--k-value, 0%);
  border-radius: inherit;
  background: var(--_c);
  transition: inline-size var(--k-duration-slow) var(--k-ease-standard);
}
/* نامعین: مقدار مشخص نیست */
.k-progress:not([aria-valuenow]) .k-progress__bar {
  inline-size: 40%;
  animation: k-progress-indeterminate 1.4s var(--k-ease-standard) infinite;
}
@keyframes k-progress-indeterminate { from { translate: 120% 0; } to { translate: -260% 0; } }
[dir="ltr"] .k-progress:not([aria-valuenow]) .k-progress__bar { animation-direction: reverse; }

/* حلقهٔ پیشرفت */
.k-progress-ring {
  --_s: var(--k-progress-ring-size, 3.5rem);
  --_c: var(--k-progress-color, var(--k-bg-brand));
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: var(--_s);
  block-size: var(--_s);
}
.k-progress-ring--sm { --_s: var(--k-progress-ring-size, 2.5rem); }
.k-progress-ring--lg { --_s: var(--k-progress-ring-size, 5rem); }
.k-progress-ring.k-progress--success { --_c: var(--k-text-success); }
.k-progress-ring.k-progress--warning { --_c: var(--k-text-warning); }
.k-progress-ring.k-progress--error { --_c: var(--k-text-error); }
.k-progress-ring svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; rotate: -90deg; }
[dir="rtl"] .k-progress-ring svg { scale: -1 1; rotate: 90deg; }
.k-progress-ring circle { fill: none; stroke-width: 4; }
.k-progress-ring__track { stroke: var(--k-bg-tertiary); }
.k-progress-ring__bar { stroke: var(--_c); stroke-linecap: round; transition: stroke-dashoffset var(--k-duration-slow) var(--k-ease-standard); }
.k-progress-ring__value { color: var(--k-text-primary); font-size: calc(var(--_s) * 0.24); font-weight: var(--k-weight-semibold); }
/* چرخش روی ظرف، نه svg: svg از قبل ۹۰- درجه چرخیده و چرخاندن خودش در پایان هر دور پرش می‌ساخت */
.k-progress-ring--indeterminate { animation: k-spin 0.9s linear infinite; }

.k-spinner {
  --_s: 1.25rem;
  display: inline-block;
  inline-size: var(--_s);
  block-size: var(--_s);
  border: 2px solid color-mix(in srgb, currentColor 20%, transparent);
  border-block-start-color: currentColor;
  border-radius: 50%;
  color: var(--k-text-brand);
  animation: k-spin 0.7s linear infinite;
  vertical-align: middle;
}
.k-spinner--sm { --_s: 1rem; }
.k-spinner--lg { --_s: 2rem; border-width: 3px; }
@media (prefers-reduced-motion: reduce) {
  .k-progress-ring--indeterminate { animation-duration: 2s; }

.k-spinner { animation-duration: 2s !important; }
  .k-progress:not([aria-valuenow]) .k-progress__bar { animation: none; inline-size: 100%; opacity: 0.5; }
}
@media (forced-colors: active) { .k-progress { border: 1px solid CanvasText; } .k-progress__bar { background: Highlight; } }

/* رادیو — روی <input type="radio"> بومی؛ برای گروه از <fieldset class="k-radio-group"> استفاده کنید
 * <fieldset class="k-radio-group">
 *   <legend class="k-label">روش ارسال</legend>
 *   <label class="k-check"><input type="radio" name="ship" class="k-radio"><span class="k-check__text">…</span></label>
 * </fieldset>
 * کارت‌های قابل‌انتخاب: k-radio-group--cards
 *
 * متغیرها: --k-radio-size
 */
.k-radio {
  --_s: var(--k-radio-size, 1.125rem);
  --_border: var(--k-border-input);

  appearance: none;
  display: inline-grid;
  place-content: center;
  flex-shrink: 0;
  inline-size: var(--_s);
  block-size: var(--_s);
  margin: 0;
  border: 1px solid var(--_border);
  border-radius: 50%;
  background: var(--k-bg-elevated);
  box-shadow: var(--k-shadow-xs);
  cursor: pointer;
  transition: border-color var(--k-duration-fast), background-color var(--k-duration-fast), box-shadow var(--k-duration-fast);
}
.k-radio::before {
  content: "";
  inline-size: calc(var(--_s) * 0.4);
  block-size: calc(var(--_s) * 0.4);
  border-radius: 50%;
  background: var(--k-text-on-brand);
  scale: 0;
  transition: scale var(--k-duration-fast) var(--k-ease-emphasized);
}
.k-radio:hover:not(:disabled) { --_border: var(--k-border-brand); box-shadow: 0 0 0 4px var(--k-bg-hover); }
.k-radio:checked { --_border: var(--k-bg-brand); background: var(--k-bg-brand); }
.k-radio:checked::before { scale: 1; }
.k-radio:checked:hover:not(:disabled) { --_border: var(--k-bg-brand-hover); background: var(--k-bg-brand-hover); }
.k-radio:focus-visible { outline: 2px solid transparent; box-shadow: var(--k-ring-brand); }
.k-radio[aria-invalid="true"] { --_border: var(--k-border-error); }
.k-radio:disabled { --_border: var(--k-border-secondary); background: var(--k-bg-tertiary); cursor: not-allowed; }
.k-radio:disabled::before { background: var(--k-text-quaternary); }

.k-check > .k-radio { margin-block-start: calc((1.25rem - var(--_s)) / 2); }

.k-radio-group {
  display: grid;
  gap: var(--k-space-3);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.k-radio-group > legend { padding: 0; margin-block-end: var(--k-space-3); }
.k-radio-group--inline { display: flex; flex-wrap: wrap; gap: var(--k-space-3) var(--k-space-6); }

/* کارت‌های قابل‌انتخاب (مثل انتخاب پلن یا روش ارسال) */
.k-radio-group--cards .k-check {
  display: flex;
  padding: var(--k-space-4);
  border: 1px solid var(--k-border-secondary);
  border-radius: var(--k-radius-lg);
  background: var(--k-bg-elevated);
  box-shadow: var(--k-shadow-xs), var(--k-highlight);
  transition: border-color var(--k-duration-fast), box-shadow var(--k-duration-fast);
}
.k-radio-group--cards .k-check:hover { border-color: var(--k-border-primary); }
.k-radio-group--cards .k-check:has(:checked) {
  border-color: var(--k-border-brand);
  box-shadow: 0 0 0 1px var(--k-border-brand), var(--k-shadow-xs);
}
.k-radio-group--cards .k-check:has(:focus-visible) { box-shadow: var(--k-ring-brand); }
.k-radio-group--cards .k-check:has(:focus-visible) .k-radio { box-shadow: none; }
.k-radio-group--cards .k-check__text { flex: 1; }

@media (forced-colors: active) {
  .k-radio { appearance: auto; }
  .k-radio::before { display: none; }
  .k-radio-group--cards .k-check:has(:checked) { outline: 2px solid Highlight; }
}

/* امتیاز ستاره‌ای (Rating) — روی رادیوهای بومی؛ نسخهٔ فقط‌خواندنی با role="img" */
.k-rating { --_s: var(--k-rating-size, 1.5rem); display: inline-flex; align-items: center; gap: 2px; margin: 0; padding: 0; border: 0; }
.k-rating--sm { --_s: var(--k-rating-size, 1.125rem); }
.k-rating--lg { --_s: var(--k-rating-size, 2rem); }
.k-rating__star { position: relative; display: inline-grid; place-items: center; inline-size: var(--_s); block-size: var(--_s); border-radius: var(--k-radius-sm); color: var(--k-border-primary); cursor: pointer; transition: color var(--k-duration-fast), scale var(--k-duration-fast) var(--k-ease-emphasized); }
.k-rating__star svg { inline-size: 100%; block-size: 100%; }
.k-rating__star[data-filled] { color: var(--k-rating-color, var(--k-zafaran-400)); }
.k-rating__star[data-half] svg .k-rating__half { fill: var(--k-rating-color, var(--k-zafaran-400)); }
.k-rating__star:hover { scale: 1.12; }
.k-rating__star:has(:focus-visible) { box-shadow: var(--k-ring-brand); }
.k-rating[data-readonly] .k-rating__star { cursor: default; }
.k-rating[data-readonly] .k-rating__star:hover { scale: none; }
.k-rating__value { margin-inline-start: var(--k-space-2); color: var(--k-text-secondary); font-size: var(--k-text-sm); font-weight: var(--k-weight-semibold); }
.k-rating:has(:disabled) .k-rating__star { cursor: not-allowed; opacity: 0.6; }
@media (forced-colors: active) {
  .k-rating__star[data-filled] { color: Highlight; }
}

/* کنترل تکه‌ای (Segmented control) — روی رادیوهای بومی
 * <div class="k-segmented" role="radiogroup" aria-label="نمایش">
 *   <label class="k-segmented__item"><input type="radio" name="v" class="k-sr-only" checked>فهرست</label>
 *   …
 * </div>
 * اندازه‌ها: k-segmented--sm | k-segmented--block (تمام‌عرض)
 */
.k-segmented {
  --_h: calc(2.5rem * var(--k-density));
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--k-border-secondary);
  border-radius: var(--k-radius-lg);
  background: var(--k-bg-secondary);
}
.k-segmented--sm { --_h: calc(2.25rem * var(--k-density)); }
.k-segmented--block { display: flex; }
.k-segmented--block .k-segmented__item { flex: 1; }
.k-segmented__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-space-1_5);
  block-size: calc(var(--_h) - 8px);
  padding-inline: var(--k-space-3);
  border-radius: calc(var(--k-radius-lg) - 3px);
  color: var(--k-text-tertiary);
  font-size: var(--k-text-sm);
  font-weight: var(--k-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--k-duration-fast), color var(--k-duration-fast), box-shadow var(--k-duration-fast);
}
.k-segmented__item svg { inline-size: 1.125rem; block-size: 1.125rem; }
.k-segmented__item:hover { color: var(--k-text-primary); }
.k-segmented__item:has(:checked) {
  background: var(--k-bg-elevated);
  color: var(--k-text-primary);
  box-shadow: var(--k-shadow-sm), inset 0 0 0 1px var(--k-border-secondary), var(--k-highlight);
}
.k-segmented__item:has(:focus-visible) { box-shadow: var(--k-ring-brand); }
.k-segmented__item:has(:disabled) { color: var(--k-text-quaternary); cursor: not-allowed; }
@media (forced-colors: active) {
  .k-segmented__item:has(:checked) { outline: 2px solid Highlight; }
}

/* انتخاب از فهرست — <select> بومی با ظاهر کاشی (دسترس‌پذیر و سازگار با گوشی)
 * <div class="k-select"><select class="k-select__control">…</select></div>
 * اندازه‌ها: k-select--sm | k-select--lg — خطا: aria-invalid="true"
 */
.k-select {
  --_h: var(--k-input-height-md, calc(2.5rem * var(--k-density)));
  position: relative;
  display: flex;
}
.k-select--sm { --_h: var(--k-input-height-sm, calc(2.25rem * var(--k-density))); }
.k-select--lg { --_h: var(--k-input-height-lg, calc(2.75rem * var(--k-density))); }

.k-select__control {
  appearance: none;
  flex: 1;
  min-inline-size: 0;
  block-size: var(--_h);
  padding-inline: calc(0.875rem * var(--k-density)) 2.5rem;
  border: 1px solid var(--k-input-border, var(--k-border-input));
  border-radius: var(--k-input-radius, var(--k-radius-md));
  background: var(--k-input-bg, var(--k-bg-primary));
  color: var(--k-text-primary);
  box-shadow: var(--k-shadow-xs);
  font: inherit;
  font-size: var(--k-text-md);
  cursor: pointer;
  transition: border-color var(--k-duration-fast), box-shadow var(--k-duration-fast);
}
.k-select__control:hover:not(:disabled, :focus) { border-color: var(--k-text-quaternary); }
.k-select__control:focus-visible { outline: 2px solid transparent; border-color: var(--k-border-brand); box-shadow: var(--k-shadow-xs), var(--k-ring-brand); }
.k-select__control[aria-invalid="true"] { border-color: var(--k-border-error); }
.k-select__control[aria-invalid="true"]:focus-visible { box-shadow: var(--k-ring-error); }
.k-select__control:disabled { background: var(--k-bg-secondary); border-color: var(--k-border-secondary); color: var(--k-text-quaternary); box-shadow: none; cursor: not-allowed; }
.k-select__control:has(option[value=""]:checked) { color: var(--k-text-tertiary); }
.k-select__control option { background: var(--k-bg-elevated); color: var(--k-text-primary); }

/* فلش در انتهای فیلد */
.k-select::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0.875rem;
  inline-size: 1.125rem;
  margin-block: auto;
  block-size: 1.125rem;
  background: var(--k-text-tertiary);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

@supports (-webkit-touch-callout: none) {
  .k-select__control { font-size: max(16px, 1em); }
}
@media (forced-colors: active) {
  .k-select::after { background: CanvasText; }
}

/* ناوبری کناری پنل (Side nav)
 * متغیرها: --k-sidenav-width  --k-sidenav-item-height
 */
.k-sidenav {
  display: flex;
  flex-direction: column;
  gap: var(--k-space-6);
  inline-size: var(--k-sidenav-width, 17rem);
  padding: var(--k-space-5) var(--k-space-3);
  border-inline-end: 1px solid var(--k-border-secondary);
  background: var(--k-bg-primary);
}
.k-sidenav--collapsed { --k-sidenav-width: 4.5rem; }
.k-sidenav__header { display: flex; align-items: center; gap: var(--k-space-2); padding-inline: var(--k-space-2); }
.k-sidenav__group { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.k-sidenav__label { padding: 0 var(--k-space-3) var(--k-space-1); color: var(--k-text-tertiary); font-size: var(--k-text-xs); font-weight: var(--k-weight-semibold); }
.k-sidenav__item {
  display: flex;
  align-items: center;
  gap: var(--k-space-3);
  inline-size: 100%;
  min-block-size: var(--k-sidenav-item-height, 2.5rem);
  padding-inline: var(--k-space-3);
  border: 0;
  border-radius: var(--k-radius-md);
  background: none;
  color: var(--k-text-secondary);
  font: inherit;
  font-size: var(--k-text-sm);
  font-weight: var(--k-weight-semibold);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--k-duration-fast), color var(--k-duration-fast);
}
.k-sidenav__item:hover { background: var(--k-bg-hover); color: var(--k-text-primary); }
.k-sidenav__item:focus-visible { outline: 2px solid transparent; box-shadow: var(--k-ring-brand); }
.k-sidenav__item[aria-current="page"] { background: var(--k-bg-active); color: var(--k-text-primary); }
.k-sidenav__item svg { inline-size: 1.25rem; block-size: 1.25rem; flex-shrink: 0; color: var(--k-text-tertiary); }
.k-sidenav__item[aria-current="page"] svg { color: var(--k-text-brand); }
.k-sidenav__text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-sidenav__item .k-badge { margin-inline-start: auto; }
.k-sidenav__chevron { transition: rotate var(--k-duration-fast); }
.k-sidenav__item[aria-expanded="true"] .k-sidenav__chevron { rotate: 180deg; }
.k-sidenav__sub { display: grid; gap: 2px; margin: 2px 0 0; padding-inline-start: var(--k-space-8); list-style: none; }
.k-sidenav__sub .k-sidenav__item { min-block-size: 2.25rem; font-weight: var(--k-weight-medium); }
.k-sidenav__footer { margin-block-start: auto; }
.k-sidenav--collapsed :is(.k-sidenav__text, .k-sidenav__label, .k-sidenav__chevron, .k-sidenav__item .k-badge, .k-sidenav__sub) { display: none; }
.k-sidenav--collapsed .k-sidenav__item { justify-content: center; padding-inline: 0; }

/* اسکلت بارگذاری — تزئینی است؛ روی ظرف والد aria-busy="true" بگذارید */
.k-skeleton {
  display: block;
  inline-size: var(--k-skeleton-width, 100%);
  block-size: var(--k-skeleton-height, 1em);
  border-radius: var(--k-skeleton-radius, var(--k-radius-sm));
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--k-text-primary) 6%, transparent), transparent) 0 0 / 200% 100% no-repeat,
    var(--k-bg-tertiary);
  animation: k-shimmer 1.6s linear infinite;
}
.k-skeleton--text { block-size: 0.8em; margin-block: 0.35em; }
.k-skeleton--text:last-child:not(:only-child) { inline-size: 70%; }
.k-skeleton--circle { border-radius: 50%; }
.k-skeleton-group { display: grid; gap: var(--k-space-1); }
@keyframes k-shimmer { from { background-position: 150% 0, 0 0; } to { background-position: -50% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .k-skeleton { animation: none; } }

/* اسلایدر (Slider) — روی <input type="range"> بومی */
.k-slider { display: grid; gap: var(--k-space-2); }
.k-slider__head { display: flex; justify-content: space-between; gap: var(--k-space-3); font-size: var(--k-text-sm); }
.k-slider__value { color: var(--k-text-primary); font-weight: var(--k-weight-semibold); }
.k-slider__track { --_h: 0.375rem; --_thumb: 1.25rem; position: relative; block-size: var(--_thumb); }
.k-slider__track::before, .k-slider__fill {
  content: "";
  position: absolute;
  inset-block: calc((var(--_thumb) - var(--_h)) / 2);
  border-radius: var(--k-radius-full);
}
.k-slider__track::before { inset-inline: 0; background: var(--k-bg-tertiary); }
.k-slider__fill { inset-inline-start: var(--_from, 0%); inset-inline-end: calc(100% - var(--_to, 0%)); background: var(--k-slider-color, var(--k-bg-brand)); }
.k-slider__input {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  inline-size: 100%;
  margin: 0;
  background: none;
}
/* در حالت بازه دو ورودی روی هم‌اند؛ فقط دستگیره‌ها کلیک بگیرند تا ورودی رویی جلوی دیگری را نگیرد */
.k-slider[data-range] .k-slider__input { pointer-events: none; }
.k-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  inline-size: var(--_thumb);
  block-size: var(--_thumb);
  border: 2px solid var(--k-slider-color, var(--k-bg-brand));
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--k-shadow-sm);
  cursor: grab;
  pointer-events: auto;
}
.k-slider__input::-moz-range-thumb {
  inline-size: var(--_thumb);
  block-size: var(--_thumb);
  border: 2px solid var(--k-slider-color, var(--k-bg-brand));
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--k-shadow-sm);
  cursor: grab;
  pointer-events: auto;
}
.k-slider__input:focus-visible { outline: none; }
.k-slider__input:focus-visible::-webkit-slider-thumb { box-shadow: var(--k-ring-brand); }
.k-slider__input:focus-visible::-moz-range-thumb { box-shadow: var(--k-ring-brand); }
.k-slider__input:disabled::-webkit-slider-thumb { border-color: var(--k-border-input); cursor: not-allowed; }
.k-slider__marks { display: flex; justify-content: space-between; color: var(--k-text-tertiary); font-size: var(--k-text-xs); }
@media (forced-colors: active) {
  .k-slider__input { appearance: auto; pointer-events: auto; }
  .k-slider__track::before, .k-slider__fill { display: none; }
}

/* پنل‌های قابل‌تغییر اندازه (Splitter) */
.k-splitter { display: flex; min-block-size: 0; border: 1px solid var(--k-border-secondary); border-radius: var(--k-radius-xl); overflow: hidden; }
.k-splitter--vertical { flex-direction: column; }
.k-splitter__pane { min-inline-size: 0; min-block-size: 0; overflow: auto; }
.k-splitter__pane:last-child { flex: 1; }
.k-splitter__handle {
  position: relative;
  flex-shrink: 0;
  inline-size: 1px;
  background: var(--k-border-secondary);
  cursor: col-resize;
  touch-action: none;
  outline: 0;
}
.k-splitter--vertical .k-splitter__handle { inline-size: auto; block-size: 1px; cursor: row-resize; }
/* ناحیهٔ کلیک پهن‌تر از خط */
.k-splitter__handle::before { content: ""; position: absolute; inset: 0 -6px; }
.k-splitter--vertical .k-splitter__handle::before { inset: -6px 0; }
.k-splitter__handle::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 6px;
  block-size: 2rem;
  border: 1px solid var(--k-border-primary);
  border-radius: var(--k-radius-full);
  background: var(--k-bg-elevated);
  translate: -50% -50%;
  transition: background-color var(--k-duration-fast), border-color var(--k-duration-fast);
}
[dir="rtl"] .k-splitter__handle::after { translate: 50% -50%; }
.k-splitter--vertical .k-splitter__handle::after { inline-size: 2rem; block-size: 6px; }
.k-splitter__handle:is(:hover, [data-dragging])::after { border-color: var(--k-border-brand); background: var(--k-bg-brand); }
.k-splitter__handle:focus-visible::after { box-shadow: var(--k-ring-brand); border-color: var(--k-border-brand); }
.k-splitter[data-dragging] { user-select: none; cursor: col-resize; }
.k-splitter--vertical[data-dragging] { cursor: row-resize; }

/* کارت آمار (KPI) */
.k-stat {
  position: relative;
  display: grid;
  gap: var(--k-space-4);
  align-content: start;
  padding: var(--k-stat-padding, var(--k-space-5) var(--k-space-6));
  border: 1px solid var(--k-border-secondary);
  border-radius: var(--k-radius-xl);
  background: var(--k-bg-elevated);
  box-shadow: var(--k-shadow-xs), var(--k-highlight);
}
.k-stat__head { display: flex; align-items: center; gap: var(--k-space-3); }
.k-stat__label { margin: 0; color: var(--k-text-secondary); font-size: var(--k-text-sm); font-weight: var(--k-weight-medium); line-height: 1.5; }
.k-stat__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid var(--k-border-primary);
  border-radius: var(--k-radius-lg);
  background: var(--k-bg-primary);
  color: var(--k-text-secondary);
  box-shadow: var(--k-shadow-xs), var(--k-shadow-skeuomorphic);
}
.k-stat__icon svg { inline-size: 1.25rem; block-size: 1.25rem; }
.k-stat__body { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--k-space-2) var(--k-space-4); }
/* ارقام فارسی با عرض ثابت (tabular-nums) از هم فاصله می‌گیرند؛ عرض طبیعی خواناتر است */
.k-stat__value {
  display: flex;
  align-items: baseline;
  gap: var(--k-space-1_5);
  margin: 0;
  color: var(--k-text-primary);
  font-size: var(--k-stat-value-size, var(--k-text-3xl));
  font-weight: var(--k-weight-semibold);
  line-height: 1.15;
  font-variant-numeric: proportional-nums;
}
.k-stat__unit { color: var(--k-text-tertiary); font-size: var(--k-text-sm); font-weight: var(--k-weight-medium); }
.k-stat__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-2); color: var(--k-text-tertiary); font-size: var(--k-text-sm); }
.k-stat__chart { margin-block-start: calc(var(--k-space-2) * -1); }
.k-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.125rem 0.5rem 0.125rem 0.375rem;
  border-radius: var(--k-radius-full);
  font-size: var(--k-text-xs);
  font-weight: var(--k-weight-semibold);
  line-height: 1.5;
}
.k-trend svg { inline-size: 0.875rem; block-size: 0.875rem; }
.k-trend--up { background: var(--k-bg-success-subtle); color: var(--k-text-success); }
.k-trend--down { background: var(--k-bg-error-subtle); color: var(--k-text-error); }
.k-trend--flat { background: var(--k-bg-secondary); color: var(--k-text-tertiary); }
.k-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--k-space-4); }

/* مراحل (Stepper)
 * متغیرها: --k-step-size  --k-step-line  --k-step-done */
.k-steps { display: flex; gap: var(--k-space-4); margin: 0; padding: 0; list-style: none; counter-reset: k-step; }
.k-steps__step { position: relative; flex: 1; display: grid; justify-items: center; gap: var(--k-space-2); text-align: center; min-inline-size: 0; }
.k-steps__marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: var(--k-step-size, 2rem);
  block-size: var(--k-step-size, 2rem);
  border: 2px solid var(--k-border-secondary);
  border-radius: 50%;
  background: var(--k-bg-primary);
  color: var(--k-text-tertiary);
  font-size: var(--k-text-sm);
  font-weight: var(--k-weight-semibold);
}
.k-steps__marker svg { inline-size: 1rem; block-size: 1rem; }
/* خط اتصال */
.k-steps__step + .k-steps__step::before {
  content: "";
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: calc(50% + 1.25rem);
  inline-size: calc(100% - 2.5rem + var(--k-space-4));
  block-size: 2px;
  border-radius: 1px;
  background: var(--k-step-line, var(--k-border-secondary));
}
.k-steps__step[data-status="complete"] + .k-steps__step::before { background: var(--k-step-done, var(--k-bg-brand)); }
.k-steps__step[data-status="complete"] .k-steps__marker { border-color: var(--k-bg-brand); background: var(--k-bg-brand); color: var(--k-text-on-brand); }
.k-steps__step[data-status="current"] .k-steps__marker { border-color: var(--k-border-brand); color: var(--k-text-brand); box-shadow: var(--k-ring-brand); }
.k-steps__title { color: var(--k-text-secondary); font-size: var(--k-text-sm); font-weight: var(--k-weight-semibold); }
.k-steps__step[data-status="current"] .k-steps__title { color: var(--k-text-brand); }
.k-steps__step[data-status="upcoming"] .k-steps__title { color: var(--k-text-tertiary); }
.k-steps__description { color: var(--k-text-tertiary); font-size: var(--k-text-xs); }

/* عمودی */
.k-steps--vertical { flex-direction: column; gap: var(--k-space-6); }
.k-steps--vertical .k-steps__step { grid-template-columns: auto 1fr; justify-items: start; column-gap: var(--k-space-3); text-align: start; }
.k-steps--vertical .k-steps__marker { grid-row: span 2; }
.k-steps--vertical .k-steps__step + .k-steps__step::before {
  inset-block-start: auto;
  inset-block-end: calc(100% + 0.25rem);
  inset-inline-end: auto;
  inset-inline-start: calc(1rem - 1px);
  inline-size: 2px;
  block-size: calc(var(--k-space-6) - 0.5rem);
}
@media (max-width: 36rem) {
  .k-steps:not(.k-steps--vertical) .k-steps__description { display: none; }
}
@media (forced-colors: active) { .k-steps__step[data-status="current"] .k-steps__marker { outline: 2px solid Highlight; } }

/* سوییچ — روی <input type="checkbox" role="switch"> بومی
 * <label class="k-check">
 *   <input type="checkbox" role="switch" class="k-switch">
 *   <span class="k-check__text"><span class="k-check__label">اعلان‌ها</span></span>
 * </label>
 * در RTL دکمهٔ سوییچ در حالت روشن به چپ می‌رود (خودکار با Logical Properties)
 * اندازه‌ها: k-switch--sm | k-switch--lg
 *
 * متغیرها: --k-switch-width  --k-switch-height  --k-switch-track-on  --k-switch-track-off  --k-switch-thumb
 */
.k-switch {
  --_w: var(--k-switch-width, 2.25rem);
  --_h: var(--k-switch-height, 1.25rem);
  --_pad: 2px;
  --_track: var(--k-switch-track-off, var(--k-border-input));

  appearance: none;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  inline-size: var(--_w);
  block-size: var(--_h);
  margin: 0;
  padding: var(--_pad);
  border: 0;
  border-radius: var(--k-radius-full);
  background: var(--_track);
  cursor: pointer;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.12);
  transition:
    background-color var(--k-duration-normal) var(--k-ease-standard),
    box-shadow var(--k-duration-fast) var(--k-ease-standard);
}

.k-switch::before {
  content: "";
  inline-size: calc(var(--_h) - var(--_pad) * 2);
  block-size: calc(var(--_h) - var(--_pad) * 2);
  border-radius: var(--k-radius-full);
  background: var(--k-switch-thumb, #fff);
  box-shadow: 0 1px 3px rgb(10 13 18 / 0.2), 0 1px 2px rgb(10 13 18 / 0.12);
  transition: margin-inline-start var(--k-duration-normal) var(--k-ease-emphasized);
}

.k-switch:hover { --_track: color-mix(in srgb, var(--k-switch-track-off, var(--k-border-input)), var(--k-text-primary) 12%); }

.k-switch:checked { --_track: var(--k-switch-track-on, var(--k-bg-brand)); }
.k-switch:checked:hover { --_track: var(--k-switch-track-on, var(--k-bg-brand-hover)); }
.k-switch:checked::before { margin-inline-start: calc(var(--_w) - var(--_h)); }

.k-switch:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--k-ring-brand);
}

.k-switch:disabled {
  --_track: var(--k-bg-tertiary);
  cursor: not-allowed;
}
.k-switch:disabled::before { background: var(--k-bg-secondary); box-shadow: none; }

.k-switch--sm { --_w: var(--k-switch-width, 1.75rem); --_h: var(--k-switch-height, 1rem); }
.k-switch--lg { --_w: var(--k-switch-width, 2.75rem); --_h: var(--k-switch-height, 1.5rem); }

@media (forced-colors: active) {
  .k-switch { border: 1px solid ButtonText; background: Canvas; }
  .k-switch::before { background: ButtonText; forced-color-adjust: none; }
  .k-switch:checked { background: Highlight; }
  .k-switch:checked::before { background: HighlightText; }
}

/* جدول داده
 * متغیرها: --k-table-radius  --k-table-cell-px  --k-table-cell-py  --k-table-header-bg  --k-table-stripe  --k-table-row-hover
 */
.k-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--k-border-secondary);
  border-radius: var(--k-table-radius, var(--k-radius-xl));
  background: var(--k-bg-elevated);
  box-shadow: var(--k-shadow-xs), var(--k-highlight);
}
.k-table-wrap--sticky { overflow-y: auto; }
.k-table-wrap--sticky thead th { position: sticky; inset-block-start: 0; z-index: 1; box-shadow: 0 1px 0 var(--k-border-secondary); }
.k-table-wrap:focus-visible { outline: 2px solid var(--k-border-brand); outline-offset: 2px; }
.k-table { inline-size: 100%; border-collapse: collapse; font-size: var(--k-text-sm); }
.k-table caption { padding: var(--k-space-5) var(--k-space-6) var(--k-space-4); text-align: start; caption-side: top; }
.k-table__caption-title { display: block; color: var(--k-text-primary); font-size: var(--k-text-lg); font-weight: var(--k-weight-semibold); }
.k-table__caption-desc { display: block; margin-block-start: var(--k-space-1); color: var(--k-text-tertiary); font-size: var(--k-text-sm); font-weight: var(--k-weight-regular); }
.k-table th, .k-table td { padding: var(--k-table-cell-py, var(--k-space-3)) var(--k-table-cell-px, var(--k-space-6)); text-align: start; vertical-align: middle; border-block-end: 1px solid var(--k-border-secondary); }
.k-table thead th {
  padding-block: var(--k-space-3);
  background: var(--k-table-header-bg, var(--k-bg-secondary));
  color: var(--k-text-tertiary);
  font-size: var(--k-text-xs);
  font-weight: var(--k-weight-semibold);
  white-space: nowrap;
}
.k-table tbody tr { transition: background-color var(--k-duration-fast); }
.k-table tbody tr:hover { background: var(--k-table-row-hover, var(--k-bg-hover)); }
.k-table--striped tbody tr:nth-child(even) { background: var(--k-table-stripe, var(--k-bg-secondary)); }
.k-table--clickable tbody tr:not([aria-hidden]) { cursor: pointer; }
.k-table .k-table__align-center { text-align: center; }
.k-table .k-table__align-end { text-align: end; }
.k-table__footer { padding: var(--k-space-3) var(--k-table-cell-px, var(--k-space-6)); border-block-start: 1px solid var(--k-border-secondary); }
@media (max-width: 40rem) { .k-table .k-table__hide-sm { display: none; } }
@media (max-width: 56rem) { .k-table .k-table__hide-md { display: none; } }
.k-table tbody tr[aria-selected="true"] { background: var(--k-bg-brand-subtle); }
.k-table tbody tr:last-child > * { border-block-end: 0; }
.k-table td { color: var(--k-text-tertiary); }
.k-table td:first-child, .k-table__primary { color: var(--k-text-primary); font-weight: var(--k-weight-medium); }
.k-table .k-table__num { text-align: end; }
.k-table .k-table__check { inline-size: 1px; padding-inline-end: 0; }
.k-table--compact th, .k-table--compact td { padding-block: var(--k-space-2); }

/* سرستون قابل‌مرتب‌سازی */
.k-table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-1);
  margin: calc(var(--k-space-1) * -1);
  padding: var(--k-space-1);
  border: 0;
  border-radius: var(--k-radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.k-table__sort:hover { color: var(--k-text-primary); }
.k-table__sort:focus-visible { outline: 2px solid transparent; box-shadow: var(--k-ring-brand); }
.k-table__sort::after {
  content: "";
  inline-size: 0.875rem;
  block-size: 0.875rem;
  background: currentColor;
  opacity: 0.35;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4-4 4 4M6 12l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
[aria-sort="ascending"] .k-table__sort::after, [aria-sort="descending"] .k-table__sort::after {
  opacity: 1;
  color: var(--k-text-brand);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 15V5m-4 4 4-4 4 4'/%3E%3C/svg%3E");
}
[aria-sort="descending"] .k-table__sort::after { rotate: 180deg; }
[aria-sort] .k-table__sort { color: var(--k-text-primary); }
.k-table__empty td { padding: 0; }
@media (forced-colors: active) { .k-table-wrap { border-color: CanvasText; } .k-table tbody tr[aria-selected="true"] { outline: 2px solid Highlight; } }

/* زبانه‌ها (Tabs) — ساختار ARIA را کامپوننت React می‌سازد
 * گونه‌ها: k-tabs--line (پیش‌فرض) | k-tabs--pill | k-tabs--segmented — تمام‌عرض: k-tabs--block
 * عمودی: k-tabs--vertical — فشرده: k-tabs--sm
 *
 * متغیرها: --k-tab-height  --k-tab-radius  --k-tabs-gap  --k-tabs-indicator  --k-tabs-list-width
 */
.k-tabs { display: grid; gap: var(--k-tabs-gap, var(--k-space-4)); inline-size: 100%; }

.k-tabs__list {
  position: relative;
  display: flex;
  gap: var(--k-space-1);
  overflow-x: auto;
  scrollbar-width: none;
}

.k-tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-space-2);
  min-block-size: var(--k-tab-height, calc(2.5rem * var(--k-density)));
  padding-inline: var(--k-space-3);
  border: 0;
  border-radius: var(--k-tab-radius, var(--k-radius-md));
  background: transparent;
  color: var(--k-text-tertiary);
  font: inherit;
  font-size: var(--k-text-sm);
  font-weight: var(--k-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--k-duration-fast), background-color var(--k-duration-fast);
}
.k-tabs__tab:hover { color: var(--k-text-primary); }
.k-tabs__tab[aria-selected="true"] { color: var(--k-text-primary); }
.k-tabs__tab:focus-visible { outline: 2px solid transparent; box-shadow: var(--k-ring-brand); }
.k-tabs__tab:disabled { color: var(--k-text-quaternary); cursor: not-allowed; }
.k-tabs__tab .k-badge { font-size: var(--k-text-xs); padding-block: 0; }

.k-tabs__panel:focus-visible { outline: 2px solid var(--k-border-brand); outline-offset: 4px; border-radius: var(--k-radius-sm); }

/* خطی: خط زیر زبانهٔ فعال */
.k-tabs--line .k-tabs__list { border-block-end: 1px solid var(--k-border-secondary); gap: var(--k-space-4); }
.k-tabs--line .k-tabs__tab { padding-inline: var(--k-space-1); border-radius: 0; }
.k-tabs--line .k-tabs__tab:focus-visible { border-radius: var(--k-radius-sm); }
.k-tabs--line .k-tabs__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--k-tabs-indicator, var(--k-border-brand));
}

/* قرصی */
.k-tabs--pill .k-tabs__tab:hover { background: var(--k-bg-hover); }
.k-tabs--pill .k-tabs__tab[aria-selected="true"] { background: var(--k-bg-brand-subtle); color: var(--k-text-brand); }

/* چندبخشی: مثل کنترل iOS */
.k-tabs--segmented .k-tabs__list {
  inline-size: fit-content;
  padding: 3px;
  border: 1px solid var(--k-border-secondary);
  border-radius: calc(var(--k-radius-md) + 3px);
  background: var(--k-bg-secondary);
}
.k-tabs--segmented .k-tabs__tab { min-block-size: calc(2.25rem * var(--k-density)); }
.k-tabs--segmented .k-tabs__tab[aria-selected="true"] {
  background: var(--k-bg-elevated);
  box-shadow: var(--k-shadow-sm), var(--k-highlight);
}
.k-tabs--block .k-tabs__list { inline-size: auto; }
.k-tabs--block .k-tabs__tab { flex: 1; }

/* فشرده */
.k-tabs--sm .k-tabs__tab { --k-tab-height: calc(2rem * var(--k-density)); padding-inline: var(--k-space-2); font-size: var(--k-text-xs); }

/* عمودی: فهرست در ستون کناری */
.k-tabs--vertical { grid-template-columns: var(--k-tabs-list-width, 13rem) minmax(0, 1fr); align-items: start; gap: var(--k-tabs-gap, var(--k-space-8)); }
.k-tabs--vertical .k-tabs__list { flex-direction: column; overflow: visible; }
.k-tabs--vertical .k-tabs__tab { justify-content: flex-start; }
.k-tabs--vertical.k-tabs--line .k-tabs__list { gap: var(--k-space-1); border-block-end: 0; border-inline-start: 1px solid var(--k-border-secondary); }
.k-tabs--vertical.k-tabs--line .k-tabs__tab { padding-inline: var(--k-space-3); }
.k-tabs--vertical.k-tabs--line .k-tabs__tab[aria-selected="true"]::after { inset-block: 0.25rem; inset-inline-start: -1px; inset-inline-end: auto; inline-size: 2px; block-size: auto; }
.k-tabs--vertical.k-tabs--segmented .k-tabs__list { inline-size: auto; }
@media (max-width: 40rem) {
  .k-tabs--vertical { grid-template-columns: minmax(0, 1fr); }
  .k-tabs--vertical .k-tabs__list { flex-direction: row; overflow-x: auto; }
}

@media (forced-colors: active) {
  .k-tabs__tab[aria-selected="true"] { outline: 2px solid Highlight; }
}

/* نشانگر لغزان (وقتی JavaScript جای زبانهٔ فعال را اندازه گرفت) */
.k-tabs__indicator { position: absolute; left: var(--_ix); top: var(--_iy); inline-size: var(--_iw); block-size: var(--_ih); pointer-events: none; transition: left var(--k-duration-slow) var(--k-ease-standard), top var(--k-duration-slow) var(--k-ease-standard), inline-size var(--k-duration-slow) var(--k-ease-standard), block-size var(--k-duration-slow) var(--k-ease-standard); }
.k-tabs__list[data-indicator] .k-tabs__tab { z-index: 1; }
/* خطی */
.k-tabs--line .k-tabs__list[data-indicator] .k-tabs__tab[aria-selected="true"]::after { content: none; }
.k-tabs--line .k-tabs__indicator { top: auto; bottom: -1px; block-size: 2px; border-radius: 2px; background: var(--k-tabs-indicator, var(--k-border-brand)); }
.k-tabs--line .k-tabs__list[data-indicator] { overflow-y: hidden; }
.k-tabs--vertical.k-tabs--line .k-tabs__indicator { inset-inline: auto; left: auto; top: var(--_iy); bottom: auto; inline-size: 2px; block-size: var(--_ih); }
[dir="rtl"] .k-tabs--vertical.k-tabs--line .k-tabs__indicator { right: -1px; }
[dir="ltr"] .k-tabs--vertical.k-tabs--line .k-tabs__indicator { left: -1px; }
/* قرصی و چندبخشی: پس‌زمینهٔ زبانهٔ فعال می‌لغزد */
.k-tabs--pill .k-tabs__list[data-indicator] .k-tabs__tab[aria-selected="true"] { background: transparent; }
.k-tabs--pill .k-tabs__indicator { border-radius: var(--k-tab-radius, var(--k-radius-md)); background: var(--k-bg-brand-subtle); }
.k-tabs--segmented .k-tabs__list[data-indicator] .k-tabs__tab[aria-selected="true"] { background: transparent; box-shadow: none; }
.k-tabs--segmented .k-tabs__indicator { border-radius: var(--k-tab-radius, var(--k-radius-md)); background: var(--k-bg-elevated); box-shadow: var(--k-shadow-sm), var(--k-highlight); }
@media (prefers-reduced-motion: reduce) { .k-tabs__indicator { transition: none; } }
@media (forced-colors: active) { .k-tabs__indicator { background: Highlight; } }

/* ورود چند مقدار (Tag input) */
.k-tag-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-space-1_5);
  min-block-size: var(--k-input-height-md, calc(2.5rem * var(--k-density)));
  padding: var(--k-space-1_5) calc(0.625rem * var(--k-density));
  border: 1px solid var(--k-input-border, var(--k-border-input));
  border-radius: var(--k-input-radius, var(--k-radius-md));
  background: var(--k-input-bg, var(--k-bg-primary));
  box-shadow: var(--k-shadow-xs);
  cursor: text;
  transition: border-color var(--k-duration-fast), box-shadow var(--k-duration-fast);
}
.k-tag-input:focus-within { border-color: var(--k-border-brand); box-shadow: var(--k-shadow-xs), var(--k-ring-brand); outline: 2px solid transparent; }
.k-tag-input[data-invalid] { border-color: var(--k-border-error); }
.k-tag-input__control { flex: 1; min-inline-size: 6rem; padding: 0.25rem 0.25rem; border: 0; outline: 0; background: none; color: var(--k-text-primary); font: inherit; font-size: var(--k-text-md); }
.k-tag-input__control::placeholder { color: var(--k-text-tertiary); }
.k-tag-input .k-badge { font-size: var(--k-text-sm); }

/* خط زمانی و فعالیت‌ها */
.k-timeline { display: grid; margin: 0; padding: 0; list-style: none; }
.k-timeline__item { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--k-space-3); padding-block-end: var(--k-space-6); }
.k-timeline__item:last-child { padding-block-end: 0; }
.k-timeline__marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid var(--k-border-primary);
  border-radius: 50%;
  background: var(--k-bg-elevated);
  color: var(--k-text-tertiary);
}
.k-timeline__marker svg { inline-size: 1rem; block-size: 1rem; }
.k-timeline__marker .k-avatar { --k-avatar-size: 2rem; }
.k-timeline__marker:has(.k-avatar) { border: 0; background: none; }
.k-timeline__item:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-block: 2.25rem 0.25rem;
  inset-inline-start: calc(1rem - 1px);
  inline-size: 2px;
  border-radius: 1px;
  background: var(--k-border-secondary);
}
.k-timeline__item[data-tone="success"] .k-timeline__marker { border-color: transparent; background: var(--k-bg-success-subtle); color: var(--k-text-success); }
.k-timeline__item[data-tone="error"] .k-timeline__marker { border-color: transparent; background: var(--k-bg-error-subtle); color: var(--k-text-error); }
.k-timeline__item[data-tone="brand"] .k-timeline__marker { border-color: transparent; background: var(--k-bg-brand-subtle); color: var(--k-text-brand); }
.k-timeline__body { display: grid; gap: var(--k-space-1); padding-block-start: 0.25rem; min-inline-size: 0; }
.k-timeline__title { margin: 0; color: var(--k-text-secondary); font-size: var(--k-text-sm); }
.k-timeline__title strong { color: var(--k-text-primary); font-weight: var(--k-weight-semibold); }
.k-timeline__time { color: var(--k-text-tertiary); font-size: var(--k-text-xs); }
.k-timeline__content { margin-block-start: var(--k-space-2); padding: var(--k-space-3) var(--k-space-4); border: 1px solid var(--k-border-secondary); border-radius: var(--k-radius-lg); background: var(--k-bg-secondary); color: var(--k-text-tertiary); font-size: var(--k-text-sm); }

/* اعلان کوتاه (Toast) — محل نمایش را کامپوننت <Toaster> می‌سازد
 * رنگ‌ها: neutral | success | error | warning | info
 * متغیرها: --k-toast-width  --k-toast-radius  --k-toast-bg
 */
.k-toaster {
  position: fixed;
  inset-block-end: var(--k-space-6);
  inset-inline-end: var(--k-space-6);
  z-index: var(--k-z-toast);
  display: grid;
  gap: var(--k-space-3);
  inline-size: min(24rem, calc(100vw - 2rem));
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.k-toaster { inline-size: min(var(--k-toast-width, 24rem), calc(100vw - 2rem)); }
.k-toaster:is(.k-toaster--top-start, .k-toaster--top-center, .k-toaster--top-end) { inset-block: var(--k-space-6) auto; }
.k-toaster:is(.k-toaster--top-start, .k-toaster--bottom-start) { inset-inline: var(--k-space-6) auto; }
.k-toaster:is(.k-toaster--top-center, .k-toaster--bottom-center) { inset-inline: 0; margin-inline: auto; }
/* اعلان‌های بالا از بالا وارد می‌شوند */
.k-toaster:is(.k-toaster--top-start, .k-toaster--top-center, .k-toaster--top-end) .k-toast { animation-name: k-toast-in-top; }
@keyframes k-toast-in-top { from { opacity: 0; translate: 0 -12px; scale: 0.97; } }
@media (max-width: 30rem) {
  .k-toaster { inset-inline: var(--k-space-4); inset-block-end: var(--k-space-4); inline-size: auto; }
}

.k-toast {
  --_accent: var(--k-text-tertiary);

  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--k-space-3);
  padding: var(--k-space-4);
  border: 1px solid var(--k-border-secondary);
  border-radius: var(--k-toast-radius, var(--k-radius-xl));
  background: var(--k-toast-bg, var(--k-bg-elevated));
  color: var(--k-text-primary);
  box-shadow: var(--k-shadow-lg), var(--k-highlight);
  pointer-events: auto;
  animation: k-toast-in var(--k-duration-slow) var(--k-ease-emphasized);
  overflow: hidden;
}
.k-toast[data-state="closing"] { animation: k-toast-out var(--k-duration-normal) var(--k-ease-standard) forwards; }
@keyframes k-toast-in { from { opacity: 0; translate: 0 12px; scale: 0.97; } }
@keyframes k-toast-out { to { opacity: 0; translate: 0 8px; scale: 0.97; } }

.k-toast--success { --_accent: var(--k-text-success); }
.k-toast--error { --_accent: var(--k-text-error); }
.k-toast--warning { --_accent: var(--k-text-warning); }
.k-toast--info { --_accent: var(--k-text-info); }

.k-toast__icon { flex-shrink: 0; inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.125rem; color: var(--_accent); }
.k-toast__icon svg { inline-size: 100%; block-size: 100%; }
.k-toast__content { flex: 1; display: grid; gap: 0.125rem; min-inline-size: 0; font-size: var(--k-text-sm); }
.k-toast__title { margin: 0; font-weight: var(--k-weight-semibold); }
.k-toast__description { margin: 0; color: var(--k-text-tertiary); }
.k-toast__action { margin-block-start: var(--k-space-2); justify-self: start; }
.k-toast__close { margin-block: -0.375rem; margin-inline-end: -0.375rem; }

/* نوار زمان باقی‌مانده */
.k-toast__progress {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  background: var(--_accent);
  opacity: 0.6;
  transform-origin: var(--_origin, right);
  animation: k-toast-progress linear forwards;
}
[dir="ltr"] .k-toast__progress { --_origin: left; }
.k-toast:is(:hover, :focus-within) .k-toast__progress { animation-play-state: paused; }
@keyframes k-toast-progress { to { scale: 0 1; } }

@media (prefers-reduced-motion: reduce) {
  .k-toast__progress { display: none; }
}
@media (forced-colors: active) {
  .k-toast { border-color: CanvasText; }
}

/* راهنمای کوتاه (Tooltip) — با hover و فوکوس، بسته شدن با Esc (WCAG 1.4.13)
 * فقط برای توضیح تکمیلی؛ اطلاعات ضروری را در tooltip پنهان نکنید.
 * جایگاه: پیش‌فرض بالا | k-tooltip--bottom | k-tooltip--start | k-tooltip--end
 * متغیرها: --k-tooltip-bg  --k-tooltip-fg  --k-tooltip-max-width  --k-tooltip-radius
 */
.k-tooltip-anchor { position: relative; display: inline-flex; }

.k-tooltip {
  position: absolute;
  inset-block-end: calc(100% + 8px);
  inset-inline-start: 50%;
  z-index: var(--k-z-dropdown);
  inline-size: max-content;
  max-inline-size: 16rem;
  padding: var(--k-space-1_5) var(--k-space-3);
  border-radius: var(--k-radius-md);
  background: var(--k-tooltip-bg, var(--k-text-primary));
  color: var(--k-tooltip-fg, var(--k-bg-primary));
  box-shadow: var(--k-shadow-lg);
  font-size: var(--k-text-xs);
  font-weight: var(--k-weight-medium);
  line-height: 1.6;
  text-align: center;
  translate: 50% 0;
  pointer-events: auto;
  animation: k-tip-in var(--k-duration-fast) var(--k-ease-standard);
}
[dir="ltr"] .k-tooltip { translate: -50% 0; }
.k-tooltip[hidden] { display: none; }
.k-tooltip--bottom { inset-block: calc(100% + 8px) auto; }

/* پیکان */
.k-tooltip::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  translate: 50% 0;
  border: 5px solid transparent;
  border-block-start-color: var(--k-tooltip-bg, var(--k-text-primary));
}
[dir="ltr"] .k-tooltip::after { translate: -50% 0; }
.k-tooltip--bottom::after { inset-block: auto 100%; border-block-start-color: transparent; border-block-end-color: var(--k-tooltip-bg, var(--k-text-primary)); }
@keyframes k-tip-in { from { opacity: 0; translate: 50% 3px; } }
[dir="ltr"] .k-tooltip { animation-name: k-tip-in-ltr; }
@keyframes k-tip-in-ltr { from { opacity: 0; translate: -50% 3px; } }

/* کنار عنصر */
.k-tooltip:is(.k-tooltip--start, .k-tooltip--end) { inset-block: 50% auto; translate: 0 -50%; animation-name: k-tip-side; }
.k-tooltip--start { inset-inline: auto calc(100% + 8px); }
.k-tooltip--end { inset-inline: calc(100% + 8px) auto; }
.k-tooltip:is(.k-tooltip--start, .k-tooltip--end)::after { inset-block: 50% auto; translate: 0 -50%; border-color: transparent; }
.k-tooltip--start::after { inset-inline: 100% auto; border-inline-start-color: var(--k-tooltip-bg, var(--k-text-primary)); }
.k-tooltip--end::after { inset-inline: auto 100%; border-inline-end-color: var(--k-tooltip-bg, var(--k-text-primary)); }
@keyframes k-tip-side { from { opacity: 0; } }
.k-tooltip { max-inline-size: var(--k-tooltip-max-width, 16rem); border-radius: var(--k-tooltip-radius, var(--k-radius-md)); }

@media (forced-colors: active) {
  .k-tooltip { border: 1px solid CanvasText; }
}

/* راهنمای قدم‌به‌قدم (Tour) */
.k-tour__spot { position: fixed; z-index: var(--k-z-overlay); border-radius: var(--k-radius-lg); box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.55), 0 0 0 2px var(--k-border-brand); pointer-events: none; transition: inset var(--k-duration-slow) var(--k-ease-standard), inline-size var(--k-duration-slow) var(--k-ease-standard), block-size var(--k-duration-slow) var(--k-ease-standard), top var(--k-duration-slow) var(--k-ease-standard), left var(--k-duration-slow) var(--k-ease-standard); }
.k-tour__card {
  position: fixed;
  z-index: calc(var(--k-z-overlay) + 1);
  display: grid;
  gap: var(--k-space-2);
  inline-size: min(20rem, calc(100vw - 2rem));
  padding: var(--k-space-4) var(--k-space-5);
  border: 1px solid var(--k-border-secondary);
  border-radius: var(--k-radius-xl);
  background: var(--k-bg-elevated);
  box-shadow: var(--k-shadow-2xl), var(--k-highlight);
  color: var(--k-text-secondary);
  font-size: var(--k-text-sm);
  outline: 0;
  transition: top var(--k-duration-slow) var(--k-ease-standard), left var(--k-duration-slow) var(--k-ease-standard);
}
.k-tour__step { color: var(--k-text-brand); font-size: var(--k-text-xs); font-weight: var(--k-weight-semibold); }
.k-tour__title { margin: 0; color: var(--k-text-primary); font-size: var(--k-text-md); font-weight: var(--k-weight-semibold); }
.k-tour__body { margin: 0; line-height: 1.8; }
.k-tour__actions { display: flex; align-items: center; gap: var(--k-space-2); margin-block-start: var(--k-space-2); }
.k-tour__actions .k-tour__skip { margin-inline-end: auto; }
.k-tour__progress { display: flex; gap: 4px; }
.k-tour__progress span { inline-size: 1rem; block-size: 3px; border-radius: 2px; background: var(--k-border-primary); }
.k-tour__progress span[data-on] { background: var(--k-bg-brand); }
@media (prefers-reduced-motion: reduce) { .k-tour__spot, .k-tour__card { transition: none; } }
@media (forced-colors: active) { .k-tour__spot { outline: 3px solid Highlight; } }

/* درخت (Tree view) — الگوی Tree در WAI-ARIA
 * <ul role="tree" class="k-tree"><li role="treeitem" aria-expanded="true" class="k-tree__item">…<ul role="group">…</ul></li></ul>
 */
.k-tree, .k-tree [role="group"] { margin: 0; padding: 0; list-style: none; }
.k-tree [role="group"] { padding-inline-start: var(--k-tree-indent, 1.25rem); }
.k-tree__item { outline: 0; }
.k-tree__row {
  display: flex;
  align-items: center;
  gap: var(--k-space-1_5);
  min-block-size: var(--k-tree-row-height, 2.25rem);
  padding-inline: var(--k-space-2);
  border-radius: var(--k-radius-md);
  color: var(--k-text-secondary);
  font-size: var(--k-text-sm);
  font-weight: var(--k-weight-medium);
  cursor: pointer;
  user-select: none;
}
.k-tree__row:hover { background: var(--k-bg-hover); color: var(--k-text-primary); }
.k-tree__item:focus-visible > .k-tree__row { box-shadow: var(--k-ring-brand); }
.k-tree__item[aria-selected="true"] > .k-tree__row { background: var(--k-bg-active); color: var(--k-text-primary); }
.k-tree__item[aria-selected="true"] > .k-tree__row .k-tree__icon { color: var(--k-text-brand); }
.k-tree__toggle { display: grid; place-items: center; flex-shrink: 0; inline-size: 1.25rem; block-size: 1.25rem; color: var(--k-text-tertiary); transition: rotate var(--k-duration-fast); }
/* فلش «بسته» در RTL به چپ اشاره می‌کند */
.k-tree__toggle svg { inline-size: 1rem; block-size: 1rem; }
[dir="rtl"] .k-tree__toggle svg { scale: -1 1; }
.k-tree__item[aria-expanded="true"] > .k-tree__row .k-tree__toggle { rotate: 90deg; }
[dir="rtl"] .k-tree__item[aria-expanded="true"] > .k-tree__row .k-tree__toggle { rotate: -90deg; }
.k-tree__spacer { flex-shrink: 0; inline-size: 1.25rem; }
.k-tree__icon { display: inline-grid; flex-shrink: 0; color: var(--k-text-tertiary); }
.k-tree__icon svg { inline-size: 1.125rem; block-size: 1.125rem; }
.k-tree__label { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-tree__meta { color: var(--k-text-tertiary); font-size: var(--k-text-xs); }
.k-tree__item[aria-disabled="true"] > .k-tree__row { color: var(--k-text-quaternary); cursor: not-allowed; }
@media (forced-colors: active) {
  .k-tree__item[aria-selected="true"] > .k-tree__row { outline: 2px solid Highlight; }
}

}