/* ═══════════════════════════════════════════════════════════════════
   1. Design tokens — Morning Sky
   Horizon #8ABCD8 · Sky #B8D8F0 · Periwinkle #9090C8 · Lavender #C8C0E0 · Cloud #EEF0F8
   Flat colours only (no gradients inside one element).
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --horizon: #8ABCD8; --sky: #B8D8F0; --peri: #9090C8; --lav: #C8C0E0; --cloud: #EEF0F8;

  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F6F7FC;
  --surface-3: #EEF0F8;
  --hover: #F1F2FA;
  --ink: #262C48;
  --ink-2: #565D7E;
  --ink-3: #6F7494;
  --line: #E7E9F3;
  --line-2: #D9DBEA;
  --primary: #5B5BA8;
  --primary-2: #4A4A94;
  --on-primary: #FFFFFF;
  --primary-soft: #EDEDF8;
  --sky-soft: #EAF3FA;
  --lav-soft: #F2EFF8;
  --ok: #3B8A6E; --ok-soft: #E6F3EE;
  --warn: #B7791F; --warn-soft: #FBF1E2;
  --danger: #B04A60; --danger-soft: #F9E9ED;

  /* item kinds */
  --k-exam: #E58C8C; --k-self: #9090C8; --k-forum: #6DBA9C; --k-hw: #E9A86A; --k-rem: #7FB3D5; --k-task: #A79BD3;

  --shadow-1: 0 1px 2px rgba(38, 44, 72, .04), 0 2px 10px rgba(38, 44, 72, .05);
  --shadow-2: 0 2px 6px rgba(38, 44, 72, .05), 0 14px 40px rgba(38, 44, 72, .10);
  --shadow-3: 0 20px 60px rgba(38, 44, 72, .22);
  --r-s: 10px; --r: 16px; --r-l: 22px; --r-xl: 28px;
  --side: 264px;
  --tabbar: 64px;
  --top: 60px;
  --font: "PingAR LT", "Segoe UI", Tahoma, system-ui, sans-serif;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light;
}

:root[data-tone="dark"] {
  --bg: #11131D;
  --surface: #181B28;
  --surface-2: #1D2131;
  --surface-3: #242939;
  --hover: #22263A;
  --ink: #E9EBF5;
  --ink-2: #B3B7CF;
  --ink-3: #7F84A1;
  --line: #262A3C;
  --line-2: #33384D;
  --primary: #A9A9E6;
  --primary-2: #C2C2F0;
  --on-primary: #161833;
  --primary-soft: #262948;
  --sky-soft: #1B2737;
  --lav-soft: #231F33;
  --ok: #7CCBAC; --ok-soft: #17302A;
  --warn: #E5B56A; --warn-soft: #33281A;
  --danger: #E89AAA; --danger-soft: #36202A;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 10px 34px rgba(0, 0, 0, .38);
  --shadow-3: 0 24px 70px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* ═══ 2. Reset & base ═══ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink);
  font: 400 15px/1.65 var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; }
h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: 24px; line-height: 1.35; font-weight: 700; letter-spacing: -.2px; }
h2 { font-size: 18px; line-height: 1.4; font-weight: 700; }
h3 { font-size: 15.5px; line-height: 1.45; font-weight: 700; }
b, strong { font-weight: 700; }
[hidden] { display: none !important; }
::selection { background: var(--lav); color: #262C48; }
:focus-visible { outline: 2.5px solid var(--peri); outline-offset: 2px; border-radius: 8px; }
.i { width: 20px; height: 20px; flex: none; }
.i-s { width: 16px; height: 16px; }
.i-l { width: 24px; height: 24px; }
.num { font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--ink-3); }
.soft { color: var(--ink-2); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.bold { font-weight: 700; }
.row { display: flex; align-items: center; gap: 10px; }
.row-s { display: flex; align-items: center; gap: 6px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.between { justify-content: space-between; }
.stack { display: grid; gap: 14px; }
.stack-s { display: grid; gap: 8px; }
.mt { margin-top: 18px; }
.mt-s { margin-top: 10px; }
.center { text-align: center; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Dates and times read left to right (digits and AM/PM keep their natural order inside an Arabic page). */
input[type="time"], input[type="date"], input[type="datetime-local"] { direction: ltr; text-align: right; unicode-bidi: normal; }
/* Safari draws the day · month · year boxes on its own: keep them left-to-right so the slashes stay between them */
input::-webkit-datetime-edit, input::-webkit-datetime-edit-fields-wrapper { direction: ltr; unicode-bidi: normal; }
input::-webkit-date-and-time-value { text-align: right; }
a, button, label, [data-act], [data-go] { touch-action: manipulation; } /* taps answer at once (no double-tap zoom wait) */
/* 1.14 — opening a window never shifts the page sideways (the scrollbar's room is always kept) */
html { scrollbar-gutter: stable; }
/* 1.15 — the page never zooms (pinch or double tap) on any device: it scrolls only */
html { touch-action: pan-x pan-y; }
/* 1.17 — on touch screens every field is at least 16px, so the iPhone never zooms into it (the page stays still while typing) */
@media (pointer: coarse) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea:not(.ed__textbox), select { font-size: max(16px, 1em) !important; } }