@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap");
@font-face {
  font-family: "STEP Arabic UI";
  src: url("/assets/step-arabic-ui-light.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --on-primary: #ffffff;
  --action-text: #136ca2;
  --primary: #136ca2;
  --primary-hover: #105b89;
  --navy: var(--primary);
  --navy-hover: var(--primary-hover);
  --canvas: #e7f0f4;
  --workspace: #f5f6f7;
  --surface: #ffffff;
  --sidebar: #e8f2f8;
  --navigation-surface: #1b1d24;
  --navigation-hover: #23242c;
  --navigation-active: color-mix(in srgb, var(--primary) 30%, var(--navigation-surface));
  --navigation-ink: #f0f1f5;
  --navigation-muted: #b8bdca;
  --navigation-border: #474b5a;
  --navigation-accent: #82c9f0;
  --ink: #222a32;
  --muted: #616c76;
  --border: #e0e5e9;
  --control: #85939e;
  --success: #7fd064;
  --success-ink: #2c6624;
  --success-bg: #edf8e9;
  --error: #d3584b;
  --error-ink: #a13930;
  --error-bg: #fcf0ed;
  --accent: var(--primary);
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;
  --s12: 48px;
  --r1: 8px;
  --r2: 12px;
  --r3: 20px;
  --r-shell: 28px;
  --shadow: 0 16px 48px #203c5010;
  --rail-width: 232px;
  --card-min: 218px;
  --shell-max: 1560px;
  --profile-size: 80px;
  --font-ar: "STEP Arabic UI", sans-serif;
  --font-en: "DM Sans", sans-serif;
  --text-xs: 14px;
  --text-sm: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-title: 32px;
  --text-page: 28px;
  --text-grade: 48px;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --line: 1.7;
  --line-tight: 1.3;
  --touch: 44px;
  --sidebar-width: 216px;
  --content-max: 1440px;
  --reading: 65ch;
  --quiz-nav: 216px;
  --editor-list: 280px;
  --auth-max: 1080px;
  --auth-canvas: #061321;
  --auth-surface: #ffffff;
  --auth-ink: #222a32;
  --auth-muted: #616c76;
  --auth-border: #e0e5e9;
  --auth-hero-ink: #f8f5ef;
  --auth-hero-accent: #24dec9;
  --auth-hero-muted: #bbd0dc;
  --auth-hero-scrim: #041728b3;
  --auth-action: #087d78;
  --auth-action-hover: #066460;
  --auth-sky: #041728;
  --auth-height: calc(var(--s12) * 15);
  --auth-form-width: calc(var(--s12) * 8);
  --auth-headline: calc(var(--text-title) + var(--s6));
  --auth-headline-min: calc(var(--text-title) + var(--s2));
  --auth-fluid-headline: 4vw;
  --auth-mobile-art: calc(var(--s12) * 10);
  --auth-mobile-image-anchor: bottom;
  --dialog-max: 560px;
  --focus-width: 2px;
  --duration: 150ms;
  --thin: 1px;
  --break-mobile: 760px;
  --chart-unanswered: #d0d0d0;
  --chart-unanswered-fill: var(--chart-unanswered);
  --question-review: #f5cc3e;
  --question-state-ink: #222a32;
  --exam-nav-width: calc(var(--touch) * 5 + var(--s2) * 4 + var(--s6) * 2);
  --chart-perfect: var(--primary);
  --chart-perfect-glow: 0 0 3px #136ca260;
  --donut-large: 180px;
  --donut-mobile: 144px;
  --donut-tab-mobile: 72px;
  --donut-small: 80px;
  --activity-height: calc(var(--s12) * 4 - var(--s6));
  --activity-date-height: calc(var(--touch) + var(--s8));
  --activity-column: calc(var(--touch) + var(--s4));
  --activity-bar-width: var(--s6);
  --chart-enter-duration: 1000ms;
  --chart-enter-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --chart-size: calc(var(--s12) * 2);
  --chart-small: var(--touch);
  --grade-column: calc(var(--chart-small) + var(--s12) * 2);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: var(--weight-normal) var(--text-md)/var(--line) var(--font-ar);
}
[dir="ltr"] {
  font-family: var(--font-en);
  text-align: left;
}
[data-theme="dark"] {
  color-scheme: dark;
  --chart-unanswered-fill: #969ba6;
  --canvas: #15171d;
  --workspace: #23242c;
  --surface: #2b2d38;
  --sidebar: #1b1d24;
  --ink: #f0f1f5;
  --muted: #b8bdca;
  --border: #474b5a;
  --control: #929bad;
  --action-text: #82c9f0;
  --success-ink: #a0e48b;
  --success-bg: #23382b;
  --error-ink: #ffb0a6;
  --error-bg: #422b2e;
  --shadow: 0 16px 48px #00000030;
}

.policy-page { max-width: var(--reading); margin: auto; padding: var(--s6); }
.policy-page header { border-bottom: var(--thin) solid var(--border); padding-bottom: var(--s6); }
.policy-page h1 { font-size: var(--text-title); line-height: var(--line-tight); }
.policy-page h2 { font-size: var(--text-lg); margin-top: var(--s8); }
.policy-page p { margin-block: var(--s4); overflow-wrap: anywhere; }
.policy-page a, .policy-links a { color: var(--navy); text-underline-offset: var(--s1); }
.policy-page nav, .policy-links { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }
.policy-page nav a, .policy-links a { min-height: var(--touch); display: inline-flex; align-items: center; }
.policy-links { justify-content: center; padding: var(--s4); font-size: var(--text-sm); }
.policy-page .policy-meta { color: var(--muted); font-size: var(--text-sm); }
.policy-page a:focus-visible, .policy-links a:focus-visible { outline: var(--focus-width) solid var(--navy); outline-offset: var(--s1); }