/* Khairukum design system — tokens + components (from the Khairukum design system artifact) */
/* LinkedX — generated from tokens.json */
:root, [data-theme="light"] {
  --brand-900: #093465;
  --brand-800: #0052ac;
  --brand-700: #055ab9;
  --brand-600: #026ee5;
  --brand-500: #2e86ea;
  --brand-300: #a2c9f6;
  --brand-200: #c0dcfa;
  --brand-100: #dcebfb;
  --slate-600: #4e6a7a;
  --slate-500: #628598;
  --slate-200: #c0ced6;
  --slate-100: #e0e5eb;
  --neutral-900: #364049;
  --neutral-800: #546472;
  --neutral-700: #677683;
  --neutral-600: #6e859b;
  --neutral-500: #88939f;
  --neutral-400: #9ea7b1;
  --neutral-300: #b0b7bc;
  --neutral-200: #e2e4e6;
  --neutral-150: #e8eaec;
  --neutral-100: #eff1f2;
  --neutral-75: #f6f8f8;
  --neutral-50: #f7f7f8;
  --neutral-25: #f9f9f9;
  --white: #ffffff;
  --green-500: #00b609;
  --green-600: #00ac08;
  --red-500: #fd3f3f;
  --amber-500: #faad14;
  --bg-canvas: var(--white);
  --bg-subtle: var(--neutral-25);
  --bg-muted: var(--neutral-75);
  --bg-sunken: var(--neutral-50);
  --bg-field: #b0b7bc1a;
  --bg-brand: var(--brand-700);
  --bg-brand-pressed: var(--brand-800);
  --bg-brand-disabled: #055ab940;
  --bg-brand-tint: #2e86ea1a;
  --bg-danger-tint: #fd3f3f1a;
  --bg-nav-start: var(--brand-700);
  --bg-nav-end: var(--brand-900);
  --bg-wash-start: #055ab926;
  --bg-wash-end: #479eff2e;
  --bg-overlay: #09346599;
  --border-subtle: var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-control: var(--neutral-600);
  --border-brand: var(--brand-700);
  --focus-ring: var(--brand-500);
  --text-primary: var(--brand-900);
  --text-secondary: var(--neutral-800);
  --text-tertiary: var(--neutral-600);
  --text-muted: var(--neutral-500);
  --text-placeholder: var(--neutral-300);
  --text-field-value: var(--neutral-700);
  --text-inverse: var(--white);
  --text-link: var(--brand-500);
  --text-danger: var(--red-500);
  --text-success: var(--green-500);
  --icon-default: var(--neutral-600);
  --icon-brand: var(--brand-700);
  --icon-inverse: var(--white);
  --rating-on: var(--brand-500);
  --rating-off: #2e86ea40;
  --shadow-nav: 0 -1px 4px 0 #00000069;
  --shadow-card: 0 2px 10px 0 #81a1b85e;
  --shadow-overlay: 0 4px 4px 0 #00000040;
  --shadow-brand-glow: 0 0 6px 0 #2e86ea4f;
}
:root {
  --space-0\.5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-button-y: 15px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-3xl: 16px;
  --radius-full: 999px;
  --gradient-nav: linear-gradient(180deg, #055ab9 0%, #093465 82%);
  --gradient-hero: linear-gradient(180deg, #055ab9 0%, #2e86ea 82%);
  --gradient-wash: linear-gradient(180deg, #055ab926 0%, #479eff2e 100%);
  --gradient-success: linear-gradient(180deg, #00b609 0%, #00ac08 100%);
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
  --border-width-hairline: 0.5px;
  --border-width-default: 1px;
  --border-width-thick: 2px;
  --font-sans: "Cairo", "Segoe UI", system-ui, sans-serif;
  --font-latin: "Inter", system-ui, sans-serif;
  --text-display: 700 19px/26px var(--font-sans);
  --text-title: 600 18px/26px var(--font-sans);
  --text-body-lg: 400 16px/24px var(--font-sans);
  --text-body-lg-strong: 600 16px/24px var(--font-sans);
  --text-body: 400 14px/22px var(--font-sans);
  --text-body-medium: 500 14px/22px var(--font-sans);
  --text-body-strong: 600 14px/22px var(--font-sans);
  --text-caption: 400 12px/20px var(--font-sans);
  --text-caption-medium: 500 12px/20px var(--font-sans);
  --text-caption-strong: 600 12px/20px var(--font-sans);
  --text-micro: 500 10px/16px var(--font-sans);
  --text-latin-body-lg: 400 16px/24px var(--font-latin);
  --text-latin-body-lg-strong: 600 16px/24px var(--font-latin);
  --text-latin-body: 400 14px/20px var(--font-latin);
  --text-latin-body-medium: 500 14px/20px var(--font-latin);
  --text-latin-caption: 400 12px/16px var(--font-latin);
  --text-latin-caption-medium: 500 12px/16px var(--font-latin);
}
.display {
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: 0;
}
.title {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: 0;
}
.body-lg {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-lg-strong {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-medium {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: 0;
}
.body-strong {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.caption-medium {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
}
.caption-strong {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0;
}
.micro {
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0;
}
.latin-body-lg {
  font-family: var(--font-latin);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.latin-body-lg-strong {
  font-family: var(--font-latin);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0;
}
.latin-body {
  font-family: var(--font-latin);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.latin-body-medium {
  font-family: var(--font-latin);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
}
.latin-caption {
  font-family: var(--font-latin);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
}
.latin-caption-medium {
  font-family: var(--font-latin);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

.kx-btn, .kx-field, .kx-field__box, .kx-card, .kx-chip,
.kx-selector, .kx-selector__row, .kx-header, .kx-header__inner,
.kx-container, .kx-section { box-sizing: border-box; }

/* Khairukum component styles. Every value is a token, except the two media-query
   breakpoints, which mirror --breakpoint-md and --breakpoint-sm; CSS cannot read a
   custom property inside a media query. */

.kx-icon {
  display: inline-block;
  flex: none;
  color: var(--icon-default);
  vertical-align: middle;
}
.kx-icon svg { display: block; width: 100%; height: 100%; }

/* ---------------------------------------------------------------- Button */

.kx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: var(--border-width-default) solid transparent;
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.kx-btn:focus-visible {
  outline: var(--border-width-thick) solid var(--focus-ring);
  outline-offset: var(--space-0\.5);
}
.kx-btn--sm { min-height: 32px; padding-inline: var(--space-2); font-size: 14px; line-height: 22px; font-weight: 500; }
.kx-btn--md { min-height: 40px; padding-inline: var(--space-3); font-size: 14px; line-height: 22px; font-weight: 500; }
.kx-btn--lg { min-height: 48px; padding-inline: var(--space-4); font-size: 16px; line-height: 24px; font-weight: 600; }
.kx-btn--xl { min-height: 56px; padding-inline: var(--space-6); font-size: 16px; line-height: 24px; font-weight: 600; }
.kx-btn--block { display: flex; width: 100%; padding-block: var(--space-button-y); }

.kx-btn--primary { background: var(--bg-brand); color: var(--text-inverse); }
.kx-btn--primary .kx-icon { color: var(--icon-inverse); }
.kx-btn--primary:hover:not(:disabled),
.kx-btn--primary:active:not(:disabled) { background: var(--bg-brand-pressed); }
.kx-btn--primary:disabled { background: var(--bg-brand-disabled); cursor: default; }

.kx-btn--secondary { background: transparent; border-color: var(--border-brand); color: var(--icon-brand); }
.kx-btn--secondary .kx-icon { color: var(--icon-brand); }
.kx-btn--secondary:hover:not(:disabled),
.kx-btn--secondary:active:not(:disabled) { background: var(--bg-brand-tint); }
.kx-btn--secondary:disabled,
.kx-btn--text:disabled { border-color: var(--slate-200); color: var(--slate-200); cursor: default; }
.kx-btn--secondary:disabled .kx-icon,
.kx-btn--text:disabled .kx-icon { color: var(--slate-200); }

.kx-btn--text { background: transparent; color: var(--icon-brand); }
.kx-btn--text .kx-icon { color: var(--icon-brand); }
.kx-btn--text:hover:not(:disabled),
.kx-btn--text:active:not(:disabled) { background: var(--bg-brand-tint); }

/* ------------------------------------------------------------- TextField */

.kx-field { display: flex; flex-direction: column; gap: var(--space-1); font-family: var(--font-sans); }
.kx-field__label { font-size: 12px; line-height: 20px; font-weight: 500; color: var(--text-secondary); }
.kx-field__req { color: var(--text-danger); margin-inline-start: var(--space-0\.5); }
.kx-field__box {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  border: var(--border-width-default) solid transparent;
  border-radius: var(--radius-lg);
  background: var(--bg-field);
  transition: border-color 120ms ease, background-color 120ms ease;
}
.kx-field--outlined .kx-field__box { background: transparent; border-color: var(--border-control); }
.kx-field__box:focus-within { border-color: var(--border-brand); border-width: var(--border-width-thick); padding: calc(var(--space-3) - 1px) calc(var(--space-2) - 1px); }
.kx-field--error .kx-field__box { border-color: var(--text-danger); }
.kx-field--disabled .kx-field__box { background: var(--bg-sunken); }
.kx-field__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-field-value);
}
.kx-field__input::placeholder { color: var(--text-placeholder); }
.kx-field__input:focus { outline: none; }
.kx-field__input:disabled { cursor: default; }
.kx-field__help { display: flex; align-items: center; gap: var(--space-1); font-size: 12px; line-height: 20px; color: var(--text-tertiary); }
.kx-field--error .kx-field__help { color: var(--text-danger); font-weight: 600; }
.kx-field--error .kx-field__help .kx-icon { color: var(--text-danger); }

/* ------------------------------------------------------------------ Chip */

.kx-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 20px;
  background: var(--bg-brand-tint);
  color: var(--text-link);
}
.kx-chip .kx-icon { color: currentColor; }
.kx-chip--neutral { background: var(--bg-sunken); color: var(--text-secondary); }
.kx-chip--danger { background: var(--bg-danger-tint); color: var(--text-danger); font-weight: 600; }
.kx-chip--solid { background: var(--bg-brand); color: var(--text-inverse); font-weight: 600; }
.kx-chip--accent { background: var(--bg-accent); color: var(--text-on-accent); font-weight: 600; }

/* ------------------------------------------------------------------ Card */

.kx-card {
  display: block;
  padding: var(--space-3);
  border: var(--border-width-default) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-canvas);
  font-family: var(--font-sans);
  color: var(--text-secondary);
}
.kx-card--raised { border-color: transparent; box-shadow: var(--shadow-card); }
.kx-card--wash { border-color: transparent; background: linear-gradient(180deg, var(--bg-wash-start) 0%, var(--bg-wash-end) 100%); }
.kx-card__title { margin: 0 0 var(--space-1); font-size: 16px; line-height: 24px; font-weight: 600; color: var(--text-primary); }
.kx-card__body { margin: 0; font-size: 14px; line-height: 22px; color: var(--text-secondary); }

/* ---------------------------------------------------------------- Rating */

.kx-rating { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-latin); }
.kx-rating__stars { display: inline-flex; gap: var(--space-0\.5); }
.kx-rating__stars .kx-icon { color: var(--rating-off); }
.kx-rating__stars .kx-icon[data-on="true"] { color: var(--rating-on); }
.kx-rating__value { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-secondary); }
.kx-rating__count { font-size: 12px; line-height: 16px; color: var(--text-muted); }

/* -------------------------------------------------------------- Selector */

.kx-selector { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-sans); width: 100%; }
.kx-selector__label { font-size: 12px; line-height: 20px; font-weight: 500; color: var(--text-secondary); }
.kx-selector__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding-inline: var(--space-3);
  border: var(--border-width-default) solid var(--border-control);
  border-radius: var(--radius-lg);
  background: transparent;
  font-family: inherit;
  color: var(--text-primary);
  cursor: pointer;
  text-align: start;
}
.kx-selector--fill .kx-selector__row { background: var(--bg-field); border-color: transparent; }
.kx-selector__row:hover { border-color: var(--border-brand); }
.kx-selector__row:focus-visible { outline: var(--border-width-thick) solid var(--focus-ring); outline-offset: var(--space-0\.5); }
.kx-selector--lg .kx-selector__row { min-height: 48px; font-size: 16px; line-height: 24px; }
.kx-selector--md .kx-selector__row { min-height: 40px; font-size: 14px; line-height: 22px; }
.kx-selector--xs .kx-selector__row { min-height: 32px; font-size: 14px; line-height: 22px; }
.kx-selector__caption { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-selector--placeholder .kx-selector__caption { color: var(--text-placeholder); }
.kx-selector__chevron { color: var(--icon-default); }
[dir="rtl"] .kx-btn .kx-icon[data-flip="true"] svg { transform: scaleX(-1); }

/* ------------------------------------------------------------ SiteHeader */

.kx-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(180deg, var(--bg-header-start) 0%, var(--bg-header-end) 82%);
  box-shadow: var(--shadow-header);
  font-family: var(--font-sans);
}
.kx-header--light {
  background: var(--bg-canvas);
  border-block-end: var(--border-width-default) solid var(--border-subtle);
  box-shadow: none;
}
.kx-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  min-height: var(--header-height);
  padding-inline: var(--space-6);
}
.kx-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  text-decoration: none;
  font-size: 19px;
  line-height: 26px;
  font-weight: 700;
  color: var(--text-inverse);
}
.kx-header--light .kx-header__brand { color: var(--text-primary); }
.kx-header__logo { display: block; height: 40px; width: auto; border-radius: var(--radius-sm); }
.kx-header__nav { display: flex; align-items: center; gap: var(--space-1); flex: 1 1 auto; }
.kx-header__link {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border-block-end: var(--border-width-thick) solid transparent;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: var(--text-inverse);
  text-decoration: none;
  opacity: 0.82;
  white-space: nowrap;
}
.kx-header--light .kx-header__link { color: var(--text-secondary); }
.kx-header__link:hover { opacity: 1; }
.kx-header__link[aria-current="page"] {
  opacity: 1;
  font-weight: 700;
  border-block-end-color: var(--text-inverse);
}
.kx-header--light .kx-header__link[aria-current="page"] {
  color: var(--text-primary);
  border-block-end-color: var(--border-brand);
}
.kx-header__link:focus-visible,
.kx-header__menu:focus-visible {
  outline: var(--border-width-thick) solid var(--text-inverse);
  outline-offset: var(--space-0\.5);
}
.kx-header--light .kx-header__link:focus-visible,
.kx-header--light .kx-header__menu:focus-visible { outline-color: var(--focus-ring); }
.kx-header__actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.kx-header .kx-btn--text { color: var(--text-inverse); }
.kx-header .kx-btn--text:hover:not(:disabled) { background: transparent; text-decoration: underline; }
.kx-header .kx-btn--text .kx-icon { color: var(--icon-inverse); }
.kx-header--light .kx-btn--text { color: var(--icon-brand); }
.kx-header--light .kx-btn--text .kx-icon { color: var(--icon-brand); }
.kx-header__menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  margin-inline-start: auto;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-inverse);
  cursor: pointer;
}
.kx-header--light .kx-header__menu { color: var(--text-primary); }
.kx-header__menu .kx-icon { color: currentColor; }

/* mirrors --breakpoint-md (960px) */
@media (max-width: 959px) {
  .kx-header__inner { min-height: 60px; gap: var(--space-4); padding-inline: var(--space-4); }
  .kx-header__nav,
  .kx-header__actions { display: none; }
  .kx-header__menu { display: inline-flex; }
}

/* ---------------------------------------------------------------- Layout */

.kx-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-6); }
.kx-container--narrow { max-width: var(--container-narrow); }
.kx-container--wide { max-width: var(--container-wide); }
.kx-section { padding-block: var(--space-16); }

/* mirrors --breakpoint-sm (640px) */
@media (max-width: 639px) {
  .kx-container { padding-inline: var(--space-4); }
  .kx-section { padding-block: var(--space-12); }
  .kx-btn--responsive { display: flex; width: 100%; padding-block: var(--space-button-y); }
}

/* Khairukum prototype — shared screen styles.
   Values come from the Khairukum design system (tokens.json). The first block
   fills tokens the copied tokens.css does not carry yet (gold, layout, web spacing). */
:root {
  --gold-700: #ac8434; --gold-500: #c9a24c; --gold-300: #e4c464;
  --bg-accent: #c9a24c; --bg-accent-tint: #c9a24c1f; --text-on-accent: #093465; --icon-accent: #ac8434;
  --bg-header-start: #055ab9; --bg-header-end: #093465;
  --gradient-header: linear-gradient(180deg, #055ab9 0%, #093465 82%);
  --gradient-hero: linear-gradient(180deg, #055ab9 0%, #2e86ea 82%);
  --gradient-success: linear-gradient(180deg, #00b609 0%, #00ac08 100%);
  --container: 1120px; --container-narrow: 720px; --container-wide: 1320px; --header-height: 72px;
  --space-5: 20px; --space-12: 48px; --space-16: 64px;
}
* { box-sizing: border-box; }
.page { font-family: var(--font-sans); color: var(--text-secondary); background: var(--bg-canvas); }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-6); }
.wrap--wide { max-width: var(--container-wide); }
.wrap--narrow { max-width: var(--container-narrow); }
.num { font-family: var(--font-latin); direction: ltr; unicode-bidi: isolate; }

.t-page { margin: 0; font: 700 32px/44px var(--font-sans); color: var(--text-primary); }
.t-section { margin: 0; font: 700 24px/34px var(--font-sans); color: var(--text-primary); }
.t-display { margin: 0; font: 700 19px/26px var(--font-sans); color: var(--text-primary); }
.t-title { margin: 0; font: 600 18px/26px var(--font-sans); color: var(--text-primary); }
.t-lead { margin: 0; font: 400 16px/26px var(--font-sans); color: var(--text-secondary); }
.t-body { margin: 0; font: 400 14px/22px var(--font-sans); color: var(--text-secondary); }
.t-medium { margin: 0; font: 500 14px/22px var(--font-sans); color: var(--text-primary); }
.t-strong { margin: 0; font: 600 14px/22px var(--font-sans); color: var(--text-primary); }
.t-caption { margin: 0; font: 400 12px/20px var(--font-sans); color: var(--text-secondary); }
.t-caption-strong { margin: 0; font: 600 12px/20px var(--font-sans); color: var(--text-primary); }
.t-label { margin: 0; font: 500 12px/20px var(--font-sans); color: var(--text-secondary); }
.t-muted { color: var(--text-muted); }
.t-inverse { color: var(--text-inverse); }
.t-danger { color: var(--text-danger); font-weight: 600; }
.t-success { color: var(--text-success); font-weight: 600; font-size: 16px; }
.link { color: var(--text-primary); text-decoration: underline; font-weight: 600; }

.kx-icon.ic-brand { color: var(--icon-brand); }
.kx-icon.ic-accent { color: var(--icon-accent); }
.kx-icon.ic-inverse { color: var(--icon-inverse); }
.kx-icon.ic-success { color: var(--text-success); }
.kx-icon.ic-danger { color: var(--text-danger); }

.panel { background: var(--bg-canvas); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); }
.panel--tight { padding: var(--space-4); }
.panel--sunken { background: var(--bg-sunken); border-color: transparent; }
.panel--wash { background: linear-gradient(180deg, #055ab926 0%, #479eff2e 100%); border-color: transparent; }
.panel--selected { border-color: var(--border-brand); box-shadow: var(--shadow-brand-glow); }
.divider { height: 1px; background: var(--border-subtle); border: 0; margin: 0; }

.avatar { flex: none; width: 56px; height: 56px; border-radius: 999px; background: var(--bg-brand-tint); color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; font: 700 20px/1 var(--font-sans); }
.avatar--sm { width: 40px; height: 40px; font-size: 16px; }
.avatar--xs { width: 32px; height: 32px; font-size: 14px; }
.avatar--lg { width: 96px; height: 96px; font-size: 36px; }
.avatar--default { background: var(--bg-sunken); color: var(--icon-default); }

.notice { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--bg-brand-tint); color: var(--text-primary); font: 400 14px/22px var(--font-sans); }
.notice--danger { background: var(--bg-danger-tint); }
.notice--accent { background: var(--bg-accent-tint); }
.notice--muted { background: var(--bg-sunken); color: var(--text-secondary); }

.btn-white { background: var(--white); color: var(--text-primary); }
.btn-white:hover { background: var(--brand-100); }
.btn-outline-inverse { background: transparent; color: var(--text-inverse); border-color: var(--text-inverse); }
.btn-outline-inverse:hover { background: #ffffff1f; }
.btn-danger { background: transparent; border-color: var(--text-danger); color: var(--text-danger); }
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 0; background: transparent; cursor: pointer; }
.icon-btn:focus-visible { outline: 2px solid var(--text-inverse); outline-offset: 2px; }
.dot-count { position: absolute; top: 2px; inset-inline-end: 2px; min-width: 18px; height: 18px; padding-inline: 4px; border-radius: 999px; background: var(--red-500); color: var(--white); font: 600 11px/18px var(--font-latin); text-align: center; }

.seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border-control); border-radius: var(--radius-lg); background: var(--bg-canvas); }
.seg__btn { min-height: 36px; padding-inline: var(--space-4); border: 0; border-radius: var(--radius-md); background: transparent; font: 500 14px/22px var(--font-sans); color: var(--text-secondary); cursor: pointer; }
.seg__btn.is-on { background: var(--bg-brand); color: var(--text-inverse); font-weight: 600; }
.seg__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.tabs { display: flex; gap: var(--space-2); border-block-end: 1px solid var(--border-subtle); }
.tab { padding: var(--space-3) var(--space-4); border: 0; border-block-end: 2px solid transparent; background: transparent; font: 500 14px/22px var(--font-sans); color: var(--text-secondary); cursor: pointer; text-decoration: none; }
.tab.is-on { color: var(--text-primary); font-weight: 700; border-block-end-color: var(--border-brand); }

.tbl { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.tr { display: grid; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--border-subtle); font: 400 14px/22px var(--font-sans); color: var(--text-secondary); }
.tr:last-child { border-block-end: 0; }
.tr--head { background: var(--bg-muted); font: 600 12px/20px var(--font-sans); color: var(--text-primary); }

.stat { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-canvas); }
.stat__value { font: 700 24px/32px var(--font-latin); color: var(--text-primary); direction: ltr; text-align: end; unicode-bidi: isolate; }
.stat__value--ar { font-family: var(--font-sans); direction: rtl; text-align: start; }

.progress { height: 6px; border-radius: var(--radius-xs); background: var(--bg-sunken); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--bg-brand); border-radius: var(--radius-xs); }

.stepper { display: flex; align-items: center; gap: var(--space-3); }
.step { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 14px/22px var(--font-sans); color: var(--text-secondary); }
.step__n { width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--border-control); display: inline-flex; align-items: center; justify-content: center; font: 600 13px/1 var(--font-sans); color: var(--text-secondary); background: var(--bg-canvas); }
.step.is-done .step__n { background: var(--bg-brand-tint); border-color: transparent; color: var(--icon-brand); }
.step.is-on { color: var(--text-primary); font-weight: 700; }
.step.is-on .step__n { background: var(--bg-brand); border-color: var(--bg-brand); color: var(--text-inverse); }
.step__line { flex: 1 1 auto; height: 1px; background: var(--border-default); min-width: 32px; }

.vstep { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font: 500 14px/22px var(--font-sans); color: var(--text-secondary); text-decoration: none; }
.vstep.is-on { background: var(--bg-brand-tint); color: var(--text-primary); font-weight: 700; }

.slot { width: 100%; min-height: 32px; padding: 0 var(--space-2); border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--bg-canvas); font: 500 13px/1 var(--font-latin); color: var(--text-primary); cursor: pointer; }
.slot:hover { background: var(--bg-brand-tint); }
.slot.is-on { background: var(--bg-brand); border-color: var(--bg-brand); color: var(--text-inverse); }
.slot:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.day { min-height: 148px; padding: var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-canvas); display: flex; flex-direction: column; gap: var(--space-1); }
.day--off { background: var(--bg-sunken); border-color: transparent; }

.choice { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-canvas); font-family: var(--font-sans); text-align: start; cursor: pointer; }
.choice.is-on { border-color: var(--border-brand); box-shadow: var(--shadow-brand-glow); background: #2e86ea0d; }
.choice:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.radio { flex: none; width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--border-control); display: inline-flex; align-items: center; justify-content: center; }
.choice.is-on .radio { border-color: var(--border-brand); }
.choice.is-on .radio::after { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--bg-brand); }

.check { display: flex; align-items: center; gap: var(--space-2); font: 400 14px/22px var(--font-sans); color: var(--text-secondary); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand-700); }
.textarea { width: 100%; min-height: 96px; padding: var(--space-3); border: 1px solid var(--border-control); border-radius: var(--radius-lg); font: 400 14px/22px var(--font-sans); color: var(--text-secondary); background: var(--bg-canvas); resize: vertical; }
.textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

.star-btn { width: 44px; height: 44px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--rating-off); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.star-btn.is-on { color: var(--rating-on); }
.star-btn .kx-icon { color: currentColor; }
.star-btn:focus-visible { outline: 2px solid var(--focus-ring); }

.drop { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1.5px dashed var(--border-control); border-radius: var(--radius-lg); background: var(--bg-canvas); }
.file { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-canvas); }
.file--error { border-color: var(--text-danger); background: var(--bg-danger-tint); }

.bubble { max-width: 520px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-2xl); font: 400 14px/22px var(--font-sans); }
.bubble--me { align-self: flex-start; background: var(--bg-brand); color: var(--text-inverse); border-start-start-radius: var(--radius-sm); }
.bubble--them { align-self: flex-end; background: var(--bg-sunken); color: var(--text-primary); border-start-end-radius: var(--radius-sm); }

.live { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; background: var(--bg-danger-tint); color: var(--text-danger); font: 600 10px/16px var(--font-sans); }
.live::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--red-500); }

.seal { display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 999px; background: var(--gradient-success); }
.footer { background: var(--gradient-header); color: var(--text-inverse); }
.footer a { color: var(--text-inverse); text-decoration: none; opacity: .9; font: 400 14px/22px var(--font-sans); }
.footer a:hover { opacity: 1; text-decoration: underline; }
.hero { background: var(--gradient-hero); color: var(--text-inverse); }
.crumbs { display: flex; gap: var(--space-2); align-items: center; font: 400 14px/22px var(--font-sans); color: var(--text-secondary); }
.crumbs a { color: var(--text-primary); text-decoration: underline; }
.switch { position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; background: var(--border-control); }
.switch::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 999px; background: var(--white); }
.switch.is-on { background: var(--bg-brand); }
.switch.is-on::after { inset-inline-start: 18px; }