@font-face { font-family: "Vazirmatn"; src: url("/static/fonts/Vazirmatn.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root, [data-theme="light"] {
  --canvas: #eeeae2;
  --surface: #fbf9f4;
  --surface-raised: #f2efe8;
  --outline: #e4dfd4;
  --outline-hover: #a6d4cf;
  --track: #e9e5dc;
  --text: #1c1b2a;
  --text-secondary: #3f3e4f;
  --muted: #5e5b6c;
  --muted-strong: #3d6a67;
  --subtle: #726f7e;
  /* Rokh teal (#19A3A0, owner choice 5 Oct 2026). Filled controls use the darker #127e7c so
     white text keeps 4.9:1; the brand teal itself carries highlights and the scan ring. */
  --primary: #127e7c;
  --primary-hover: #0f6b69;
  --primary-ink: #0f6b69;
  --on-primary: #ffffff;
  --primary-soft: #e3f4f2;
  --primary-soft-hover: #d5eeeb;
  --primary-soft-active: #c6e7e3;
  --primary-outline: #127e7c;
  --icon: var(--primary);
  --accent: #19a3a0;
  --accent-soft: #dcf3ef;
  --on-stage-accent: #7ee3d6;
  --focus: #0f5f5d;
  --notice-surface: #eaf6f4;
  --notice-outline: #cfe9e5;
  --notice-text: #1f5f5b;
  --error: #9a3838;
  --error-surface: #fbeeec;
  --error-outline: #efd3cf;
  --success: #1e6b4a;
  --success-surface: #dcf0e4;
  --warning: #8a5a0a;
  --warning-surface: #fbefd6;
  --stage: #0f0e18;
  --stage-scrim: #0f0e18db;
  --mask: #0f0e1866;
  --on-stage: #ffffff;
  --guide: #ffffffe6;
  --guide-soft: #ffffff5c;
  --record: #b84a52;
  --record-on-stage: #ff8a93;
  --record-strong: #ff3b47;
  --choice: #8a869a;
  --disabled-surface: #ebe8e1;
  --disabled-text: #66636f;
  --badge-surface: #ffffff;
  --camera: #000000;
  --overlay-scrim: #0000008c;
  --overlay-scrim-strong: #00000099;
  --overlay-primary: #3f41b0a3;
  --overlay-primary-hover: #3f41b0d9;
  --overlay-glass: #ffffff1f;
  --overlay-control: #ffffff2e;
  --overlay-gradient: #000000b8;
  --on-overlay: var(--on-stage);
  --shadow-sheet: 0 18px 48px #1c1b2a12, 0 2px 6px #1c1b2a0a;
  --shadow-button: inset 0 1px 0 #ffffff26, 0 1px 2px #1c1b2a33;
  --shadow-button-pressed: inset 0 2px 4px #0000002e;
  --shadow-badge: 0 6px 16px #1c1b2a14;
  --shadow-selected: 0 0 0 1px #3f41b0;
  --focus-ring: 0 0 0 3px #fbf9f4, 0 0 0 6px #2a2c7a;
  --shadow-glow: 0 0 0 10px #1e6b4a1f;
  --shadow-steady: 0 0 0 6px #7ee3d633;
  --shadow-overlay-button: 0 6px 18px #00000059;
}
[data-theme="dark"] {
  --canvas: #0b0a12;
  --surface: #13121c;
  --surface-raised: #1b1a27;
  --outline: #2a2938;
  --outline-hover: #3f6f6c;
  --track: #262535;
  --text: #f1eee7;
  --text-secondary: #d2cfdc;
  --muted: #a7a4b6;
  --muted-strong: #a9dcd7;
  --subtle: #9794a8;
  --primary: #3fd1cc;
  --primary-hover: #5adbd6;
  --primary-ink: #7ee3d6;
  --on-primary: #0b0a12;
  --primary-soft: #163533;
  --primary-soft-hover: #1c4441;
  --primary-soft-active: #22524e;
  --primary-outline: #5ad0c3;
  --icon: #5ad0c3;
  --accent: #5ad0c3;
  --accent-soft: #15332f;
  --on-stage-accent: #7ee3d6;
  --focus: #9fede5;
  --notice-surface: #16302e;
  --notice-outline: #2b5753;
  --notice-text: #d1cef4;
  --error: #ff9aa0;
  --error-surface: #2c1b1e;
  --error-outline: #533036;
  --success: #86dfaa;
  --success-surface: #14311f;
  --warning: #f3c76f;
  --warning-surface: #352a0c;
  --stage: #09080f;
  --stage-scrim: #09080fdb;
  --mask: #0f0e1866;
  --on-stage: #ffffff;
  --guide: #ffffffe6;
  --guide-soft: #ffffff5c;
  --record: #ff8a93;
  --record-on-stage: #ff8a93;
  --record-strong: #ff3b47;
  --choice: #7e7b93;
  --disabled-surface: #22212f;
  --disabled-text: #918ea3;
  --badge-surface: #ffffff;
  --camera: #000000;
  --overlay-scrim: #0000008c;
  --overlay-scrim-strong: #00000099;
  --overlay-primary: #5c5ed6a3;
  --overlay-primary-hover: #5c5ed6d9;
  --overlay-glass: #ffffff1f;
  --overlay-control: #ffffff2e;
  --overlay-gradient: #000000b8;
  --on-overlay: var(--on-stage);
  --shadow-sheet: 0 18px 48px #00000066, 0 2px 6px #00000040;
  --shadow-button: inset 0 1px 0 #ffffff1f, 0 1px 2px #00000080;
  --shadow-button-pressed: inset 0 2px 4px #0000002e;
  --shadow-badge: 0 6px 16px #00000066;
  --shadow-selected: 0 0 0 1px #8d8ef5;
  --focus-ring: 0 0 0 3px #13121c, 0 0 0 6px #c9c8ff;
  --shadow-glow: 0 0 0 10px #86dfaa29;
  --shadow-steady: 0 0 0 6px #7ee3d633;
  --shadow-overlay-button: 0 6px 18px #00000059;
}
:root {
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --radius-8: 8px;
  --radius-9: 9px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-20: 20px;
  --radius-26: 26px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-sweep: 540ms;
  --dur-slower: 720ms;
  --dur-link: 1100ms;
  --dur-loop: 1350ms;
  --dur-glow: 1200ms;
  --dur-hold: 2800ms;
  --dur-return: 1800ms;
  --dur-breathe: 2400ms;
  --dur-exit: 180ms;
  --dur-count: 3000ms;
  --stagger: 40ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --size-sheet: 430px;
  --size-sheet-min: 850px;
  --size-touch: 48px;
  --size-control: 52px;
  --size-control-overlay: 56px;
  --size-option: 68px;
  --size-tile: 44px;
  --size-badge: 76px;
  --size-glyph: 112px;
  --size-icon: 24px;
  --size-symbol: 13px;
  --size-thread: 2px;
  --size-checking: 4px;
  --size-guide-max: 320px;
  --size-stage-max: 440px;
  --font-sans: "Vazirmatn", "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
}
.display { font-family: var(--font-sans); font-size: 23px; line-height: 1.6; font-weight: 650; }
.title { font-family: var(--font-sans); font-size: 21px; line-height: 1.55; font-weight: 650; }
.heading { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; font-weight: 650; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.8; font-weight: 400; }
.body-strong { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; font-weight: 600; }
.phrase { font-family: var(--font-sans); font-size: 17px; line-height: 1.9; font-weight: 400; }
.guidance { font-family: var(--font-sans); font-size: 14px; line-height: 1.8; font-weight: 600; }
.section-label { font-family: var(--font-sans); font-size: 14px; line-height: 1.6; font-weight: 600; }
.overlay-label { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; font-weight: 600; }
.turn { font-family: var(--font-sans); font-size: 18px; line-height: 1.5; font-weight: 700; }
.timer { font-family: var(--font-sans); font-size: 12px; line-height: 1.6; font-weight: 500; }
.meta { font-family: var(--font-sans); font-size: 13px; line-height: 1.6; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 1.5; font-weight: 500; }
.provider { font-family: var(--font-sans); font-size: 11px; line-height: 1.7; font-weight: 400; }