/* =========================================================
   أثر — Design System
   World-class, Arabic-first, calm & editorial.
   v: editorial-2 (full rewrite)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

/* =========================================================
   1. TOKENS
   ========================================================= */
:root {
  /* Ink scale — slightly warm violet undertone */
  --ink:        #1B0F26;
  --ink-2:      #3F2D4A;
  --ink-3:      #7A6885;
  --ink-4:      #B5A7BD;

  /* Surfaces — warm lavender-cream feminine */
  --canvas:     #FAF5FA;
  --canvas-2:   #F0E5EE;
  --surface:    #FFFFFF;
  --surface-2:  #F7EDF3;

  /* Hairlines — purple-tinted */
  --hair:       rgba(70, 30, 90, 0.07);
  --hair-2:     rgba(70, 30, 90, 0.11);
  --hair-3:     rgba(70, 30, 90, 0.18);

  /* Accent — rich elegant purple */
  --accent:     #8E5BB8;
  --accent-d:   #6F3D9B;
  --accent-50:  #F1E5F2;

  /* Rose — secondary feminine warmth */
  --rose:       #C16A8E;
  --rose-50:    #F9E5EC;

  /* Status — softened, feminine but functional */
  --positive:   #38927C;
  --positive-50:#E2F0EB;
  --warn:       #B57030;
  --warn-50:    #FAEEDC;
  --critical:   #BD4F70;
  --critical-50:#F9E2EC;
  --info:       #7B5BA8;
  --info-50:    #EEE5F4;

  /* Stage tints — distinct yet feminine (warm spectrum + accents) */
  --stage-kg:    #E8869A;   /* salmon pink */
  --stage-prep:  #A06FCC;   /* purple */
  --stage-1:     #D45F70;   /* rose red */
  --stage-2:     #DA8E47;   /* warm amber */
  --stage-3:     #6F4FB8;   /* deep violet */
  --stage-4:     #B85088;   /* magenta */
  --stage-5:     #D4A444;   /* gold */
  --stage-6:     #5B92C9;   /* dusty blue (one cool tone for contrast) */

  /* Shadows — editorial restraint */
  --ring:       inset 0 0 0 1px var(--hair-2);
  --soft:       0 1px 2px rgba(10,10,20,0.04), 0 4px 16px -6px rgba(10,10,20,0.06);
  --pop:        0 24px 60px -16px rgba(10,10,20,0.18), 0 4px 16px -4px rgba(10,10,20,0.06);
  --pressed:    inset 0 0 0 1px var(--hair-3);

  /* Radii */
  --r-xs: 6px; --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 28px;
  --radius-sm: var(--r-sm);
  --radius:    var(--r);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl);

  /* Layout */
  --topbar-h:    64px;
  --bottombar-h: 76px;
  --content-w:   1100px;

  /* Legacy aliases (so existing components don't break) */
  --primary: var(--accent); --primary-700: var(--accent-d); --primary-50: var(--accent-50);
  --mint: var(--positive); --mint-50: var(--positive-50);
  --amber: var(--warn);     --amber-50: var(--warn-50);
  --pink: #D4757D; --gold: #C4994F; --sky: #5B92C9;
  --sky-50: var(--info-50); --rose-50: var(--critical-50);
  --danger: var(--critical);
  --card: var(--surface);
  --bg: var(--canvas); --bg-2: var(--canvas-2);
  --border: var(--hair); --border-strong: var(--hair-2);
  --text: var(--ink); --text-2: var(--ink-2); --muted: var(--ink-3);
  --shadow-sm: var(--ring); --shadow: var(--soft); --shadow-lg: var(--pop);
}

/* =========================================================
   2. RESET + BASE
   ========================================================= */
* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
html { scroll-behavior: smooth; }
.app, .main { max-width: 100%; min-width: 0; overflow-x: hidden; }
.app > *, .main > * { max-width: 100%; min-width: 0; }

/* iOS Safari auto-zooms on inputs with font-size < 16px. Force 16px on mobile inputs. */
@media (max-width: 700px) {
  .field input, .field textarea, .field select,
  .search-bar input, .chat-input input,
  .invite-msg-preview {
    font-size: 16px;
  }
}
body {
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.6;
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
}
button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

::selection { background: var(--accent-50); color: var(--accent-d); }

*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================================
   3. TYPOGRAPHY
   ========================================================= */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-feature-settings: "kern", "liga", "calt", "ss01";
}
h1 { font-size: 38px; line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; }
h2 { font-size: 24px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 800; }
h3 { font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 700; }
h4 { font-size: 14px; line-height: 1.35; font-weight: 700; }

.display {
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 800;
}

.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

@media (max-width: 700px) {
  h1 { font-size: 28px; }
  h2 { font-size: 20px; }
  .display { font-size: 36px; }
}

/* =========================================================
   4. APP SHELL
   ========================================================= */
.app {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: var(--topbar-h) 1fr var(--bottombar-h);
  grid-template-areas: "top" "main" "bottom";
  min-height: 100vh;
}
.app.is-login { display: block; }

.sidenav { display: none !important; }

.main {
  grid-area: main;
  padding: 40px 40px 56px;
  max-width: var(--content-w);
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 700px) {
  .main { padding: 20px 18px 36px; }
}

/* --- Topbar --- */
.topbar {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(250, 250, 247, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hair);
  padding: 0 36px;
  position: sticky; top: 0; z-index: 30;
}
.topbar .brand {
  display: flex; align-items: center; gap: 12px;
}
.topbar .brand .brand-name {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.045em;
  background: linear-gradient(135deg, var(--accent), var(--rose));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  padding: 4px 0;
}
.topbar .brand-divider {
  width: 1px; height: 20px;
  background: var(--hair-2);
}
.topbar .school-block { line-height: 1.3; }
.topbar .school-block .school-name {
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.005em;
}
.topbar .school-block .school-principal {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--ink-3); margin-top: 2px; font-weight: 500;
}
.topbar .school-block .school-principal svg {
  width: 10px; height: 10px; color: var(--ink-4);
}
.topbar .spacer { flex: 1; }
.topbar .icon-btn {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: transparent; color: var(--ink-2);
  position: relative;
  transition: background 0.15s ease;
}
.topbar .icon-btn:hover { background: var(--canvas-2); color: var(--ink); }
.topbar .icon-btn svg { width: 19px; height: 19px; }
.topbar .icon-btn .dot {
  position: absolute; top: 8px; left: 9px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--canvas);
}
.topbar .role-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--surface);
  box-shadow: var(--ring);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 12px; font-weight: 600;
  transition: 0.15s;
}
.topbar .role-pill:hover { background: var(--canvas-2); }
.topbar .role-pill svg { width: 13px; height: 13px; }
.topbar .user-greet {
  display: flex; align-items: center; gap: 10px;
  padding-inline-start: 16px;
}
.topbar .user-greet .name { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.topbar .user-greet .role { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

@media (max-width: 760px) {
  .topbar { padding: 0 18px; gap: 14px; }
  .topbar .brand-divider { display: none; }
  .topbar .school-block .school-principal { display: none; }
  .topbar .school-block .school-name { font-size: 11.5px; }
  .topbar .role-pill span { display: none; }
}
@media (max-width: 480px) {
  .topbar .school-block { display: none; }
}

/* --- Bottombar --- */
.bottombar {
  grid-area: bottom;
  display: block;
  background: rgba(250, 250, 247, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border-top: 1px solid var(--hair);
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
  position: sticky; bottom: 0; z-index: 20;
}
.bottombar nav {
  display: flex; gap: 4px;
  max-width: var(--content-w); margin: 0 auto;
}
.bottombar a {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  color: var(--ink-3); font-size: 11px; font-weight: 600;
  padding: 8px 4px;
  border-radius: 12px;
  transition: color 0.15s ease, background 0.15s ease;
  text-align: center;
  letter-spacing: -0.005em;
}
.bottombar a:hover { color: var(--ink); }
.bottombar a.active { color: var(--ink); background: var(--canvas-2); }
.bottombar a svg {
  width: 21px; height: 21px;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}
.bottombar a:hover svg { opacity: 0.85; }
.bottombar a.active svg { opacity: 1; color: var(--ink); }

/* =========================================================
   5. BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--surface);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.14s ease, transform 0.14s ease, opacity 0.14s ease;
  box-shadow: 0 1px 3px rgba(142, 91, 184, 0.25);
}
.btn:hover { background: var(--accent-d); box-shadow: 0 4px 12px rgba(142, 91, 184, 0.30); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.4; pointer-events: none; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn.ghost {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--ring);
  font-weight: 600;
}
.btn.ghost:hover { background: var(--surface-2); box-shadow: 0 0 0 1px var(--hair-3); }

.btn.soft {
  background: var(--accent-50);
  color: var(--accent-d);
  box-shadow: none;
}
.btn.soft:hover { background: #E8D5EE; }

.btn.dark {
  background: var(--ink);
  color: var(--surface);
  box-shadow: 0 1px 2px rgba(27, 15, 38, 0.18);
}
.btn.dark:hover { background: #2D1F3A; }

.btn.accent {
  background: var(--rose);
  color: var(--surface);
  box-shadow: 0 1px 3px rgba(193, 106, 142, 0.28);
}
.btn.accent:hover { background: #A6587A; }

.btn.mint {
  background: var(--positive);
  color: var(--surface);
}
.btn.mint:hover { background: #1F6E59; }

.btn.amber {
  background: var(--warn);
  color: var(--surface);
}
.btn.amber:hover { background: #8E5418; }

.btn.danger-soft {
  background: var(--critical-50);
  color: var(--critical);
  box-shadow: none;
}
.btn.danger-soft:hover { background: #F4DCDC; }

.btn.sm  { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; }
.btn.lg  { height: 48px; padding: 0 24px; font-size: 14.5px; border-radius: 12px; }
.btn.block { display: flex; width: 100%; }

/* =========================================================
   6. CARDS
   ========================================================= */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--ring), var(--soft);
}
.card.elevated { box-shadow: var(--pop); }
.card.tight    { padding: 20px; }
.card.flat     { box-shadow: var(--ring); }

.card-title {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 20px;
}
.card-title h3 { font-size: 17px; }
.card-title .link {
  font-size: 13px; color: var(--ink); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--hair-3);
  text-underline-offset: 4px;
  transition: 0.15s;
}
.card-title .link:hover { text-decoration-color: var(--ink); }

@media (max-width: 700px) {
  .card { padding: 22px; border-radius: 16px; }
  .card.tight { padding: 16px; }
}

/* =========================================================
   7. PILLS, CHIPS, BADGES
   ========================================================= */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--canvas-2); color: var(--ink-2);
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  line-height: 1.3;
}
.pill.primary { background: var(--accent-50); color: var(--accent-d); }
.pill.mint    { background: var(--positive-50); color: var(--positive); }
.pill.amber   { background: var(--warn-50); color: var(--warn); }
.pill.sky     { background: var(--info-50); color: var(--info); }
.pill.rose    { background: var(--critical-50); color: var(--critical); }
.pill.outline {
  background: transparent;
  box-shadow: var(--ring);
  color: var(--ink-2);
}
.pill.dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: var(--surface); color: var(--ink-2);
  box-shadow: var(--ring);
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: box-shadow 0.15s, background 0.15s, color 0.15s;
}
.chip:hover { box-shadow: 0 0 0 1px var(--hair-3); }
.chip.active {
  background: var(--accent); color: var(--surface);
  box-shadow: none;
}

/* Badge counter */
.badge-num {
  margin-inline-start: auto;
  background: var(--accent); color: var(--surface);
  font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  min-width: 18px; text-align: center;
}

/* =========================================================
   8. AVATAR
   ========================================================= */
.avatar {
  border-radius: 12px;
  display: grid; place-items: center;
  font-weight: 700; color: var(--surface);
  flex-shrink: 0;
  background: var(--ink-2);
  font-feature-settings: "kern", "calt";
  letter-spacing: -0.01em;
}
.avatar.sm { width: 28px; height: 28px; font-size: 11px; border-radius: 8px; }
.avatar.md { width: 38px; height: 38px; font-size: 13px; border-radius: 10px; }
.avatar.lg { width: 56px; height: 56px; font-size: 18px; border-radius: 14px; }
.avatar.xl { width: 88px; height: 88px; font-size: 28px; border-radius: 20px; }

/* Stage avatars use their stage tint */
.avatar.c-mint   { background: var(--stage-1); }
.avatar.c-amber  { background: var(--stage-2); }
.avatar.c-pink   { background: var(--stage-3); }
.avatar.c-purple { background: var(--stage-4); }
.avatar.c-gold   { background: var(--stage-5); }
.avatar.c-sky    { background: var(--stage-6); }

/* =========================================================
   9. PROGRESS
   ========================================================= */
.progress {
  width: 100%; height: 6px;
  background: var(--canvas-2);
  border-radius: 999px; overflow: hidden;
}
.progress > .bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--rose));
  border-radius: 999px;
  transition: width 0.5s ease;
}
.progress.thick { height: 8px; }
.progress.amber > .bar { background: var(--warn); }
.progress.mint  > .bar { background: var(--positive); }

/* Progress circle (uses CSS conic) */
.prog-circle {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p, 0) * 1%), var(--canvas-2) 0);
  display: grid; place-items: center;
  position: relative;
  flex-shrink: 0;
}
.prog-circle::before {
  content: ""; position: absolute; inset: 4px;
  background: var(--surface); border-radius: 50%;
}
.prog-circle .pct {
  position: relative; z-index: 1;
  font-size: 16px; font-weight: 800; color: var(--accent-d);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.prog-circle .pct span { font-size: 9px; margin-inline-start: 1px; opacity: 0.6; }
.prog-circle .prog-lbl {
  position: relative; z-index: 1;
  font-size: 9px; color: var(--ink-3); margin-top: 1px;
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* =========================================================
   10. STAT
   ========================================================= */
.stat {
  background: var(--surface); border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--ring);
  display: flex; flex-direction: column; gap: 8px;
}
.stat .ic {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--canvas-2); color: var(--ink-2);
}
.stat .num {
  font-size: 32px; font-weight: 800; color: var(--accent-d);
  line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat .lbl { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.stat .delta {
  font-size: 11.5px; font-weight: 600;
  color: var(--positive); margin-top: 6px;
}
.stat .delta.down { color: var(--critical); }
.stat.mint .num { color: var(--positive); }
.stat.amber .num { color: var(--warn); }
.stat.rose .num { color: var(--critical); }
.stat.sky .num { color: var(--info); }

/* =========================================================
   11. ACTIVITY ROW (.act)
   ========================================================= */
.act {
  background: var(--surface);
  border-radius: var(--r);
  padding: 16px;
  display: flex; gap: 14px;
  box-shadow: var(--ring);
  transition: box-shadow 0.16s, transform 0.16s;
  cursor: pointer;
  color: inherit;
}
.act:hover { box-shadow: var(--ring), var(--soft); transform: translateY(-1px); }
.act .type-ic {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--canvas-2); color: var(--ink-2);
}
.act .body { flex: 1; min-width: 0; }
.act .title { font-weight: 700; font-size: 14.5px; margin-bottom: 4px; color: var(--ink); letter-spacing: -0.01em; }
.act .meta { display: flex; gap: 8px; flex-wrap: wrap; color: var(--ink-3); font-size: 12px; align-items: center; }
.act .desc { font-size: 13px; color: var(--ink-2); margin-top: 6px; line-height: 1.55; }

/* Activity type variants */
.act-type-session,
.act-type-home,
.act-type-video,
.act-type-worksheet,
.act-type-edu,
.act-type-game,
.act-type-extra,
.act-type-reward {
  background: var(--canvas-2);
  color: var(--ink-2);
}

/* =========================================================
   12. FORMS
   ========================================================= */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  letter-spacing: -0.005em;
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 11px 14px;
  background: var(--surface);
  box-shadow: var(--ring);
  border: none;
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink);
  transition: box-shadow 0.15s ease, background 0.15s ease;
  outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-4); }
.field input:focus, .field textarea:focus, .field select:focus {
  box-shadow: 0 0 0 2px var(--accent);
  background: var(--surface);
}
.field textarea { resize: vertical; min-height: 88px; line-height: 1.6; }
.field .hint { color: var(--ink-3); font-size: 12px; margin-top: 2px; }

.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--hair);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-row .lbl { font-weight: 600; font-size: 14px; color: var(--ink); }
.toggle-row .lbl .hint {
  display: block; font-size: 12px; color: var(--ink-3);
  margin-top: 3px; font-weight: 400;
}
.switch {
  width: 42px; height: 24px; border-radius: 999px;
  background: var(--hair-3);
  position: relative; cursor: pointer; transition: 0.2s;
  flex-shrink: 0;
}
.switch::after {
  content: ""; position: absolute; top: 2px; right: 2px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: 0.2s;
}
.switch.on { background: var(--ink); }
.switch.on::after { right: calc(100% - 22px); }

/* =========================================================
   13. MODAL + BOTTOM SHEET
   ========================================================= */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(10, 10, 20, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  animation: fadeIn 0.18s ease;
  overscroll-behavior: contain;
}
.modal {
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 32px;
  max-width: 520px; width: 100%;
  max-height: 90vh; overflow: auto;
  box-shadow: var(--pop);
  animation: slideUp 0.26s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.modal.lg { max-width: 720px; }
body.modal-open { overflow: hidden; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px;
}
.modal-head h2 { font-size: 22px; }
.modal-head .x {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--canvas-2); color: var(--ink-2);
  transition: 0.15s;
}
.modal-head .x:hover { background: var(--critical-50); color: var(--critical); }
.modal-head .x svg { width: 16px; height: 16px; }

@media (max-width: 700px) {
  .modal-backdrop {
    padding: 0;
    display: block;
  }
  .modal {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    top: auto;
    margin: 0;
    width: auto;
    max-width: none;
    border-radius: 24px 24px 0 0;
    max-height: 92vh;
    padding: 28px 22px calc(22px + env(safe-area-inset-bottom));
    animation: sheetUp 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
  }
  .modal::before {
    content: "";
    position: absolute;
    top: 10px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px; border-radius: 999px;
    background: var(--hair-3);
  }
  .modal-head { padding-top: 8px; }
  .modal.lg { max-width: none; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sheetUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* =========================================================
   14. TOAST
   ========================================================= */
.toast-wrap {
  position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.toast {
  background: var(--accent-d); color: var(--surface);
  padding: 14px 22px;
  border-radius: 14px;
  font-size: 13.5px; font-weight: 600;
  box-shadow: var(--pop);
  display: flex; align-items: center; gap: 10px;
  animation: toastSlide 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
  pointer-events: auto;
  max-width: 420px;
}
.toast.success { background: var(--positive); }
.toast.warn    { background: var(--warn); }
.toast.error   { background: var(--critical); }
@keyframes toastSlide {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* =========================================================
   15. TABS
   ========================================================= */
.tabs {
  display: flex; gap: 2px;
  background: var(--canvas-2);
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 24px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
.tabs .tab {
  padding: 9px 16px;
  border-radius: 9px;
  font-size: 13px; font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.tabs .tab:hover { color: var(--ink-2); }
.tabs .tab.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--ring);
}
.tab-badge {
  display: inline-block;
  background: var(--accent); color: var(--surface);
  font-size: 10px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  margin-inline-start: 6px;
  vertical-align: middle;
}

/* =========================================================
   16. TABLE
   ========================================================= */
.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}
.tbl th, .tbl td {
  padding: 14px 16px;
  text-align: start;
  border-bottom: 1px solid var(--hair);
}
.tbl th {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tbl tr:hover td { background: var(--canvas); }
.tbl tr:last-child td { border-bottom: none; }

/* =========================================================
   17. PAGE HEAD
   ========================================================= */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 32px; flex-wrap: wrap;
}
.page-head h1 { font-size: 36px; line-height: 1.05; letter-spacing: -0.035em; }
.page-head .sub {
  color: var(--ink-3); font-size: 14px; margin-top: 8px;
  letter-spacing: -0.005em;
}

@media (max-width: 700px) {
  .page-head { gap: 14px; margin-bottom: 22px; }
  .page-head h1 { font-size: 26px; }
}

/* =========================================================
   18. EMPTY STATES
   ========================================================= */
.empty {
  text-align: center; padding: 56px 24px;
}
.empty .ico {
  width: 64px; height: 64px; border-radius: 18px;
  background: var(--canvas-2); color: var(--ink-2);
  display: grid; place-items: center;
  margin: 0 auto 18px;
  font-size: 26px;
}
.empty h4 { font-size: 17px; margin-bottom: 8px; font-weight: 700; }
.empty p {
  color: var(--ink-3); font-size: 13.5px;
  max-width: 360px; margin: 0 auto;
  line-height: 1.7;
}

/* =========================================================
   19. LOGIN — clean, formal, minimal
   ========================================================= */
.login-clean {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--canvas);
}
.login-clean-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 40px 32px 28px;
  box-shadow: var(--ring), var(--soft);
}
.login-clean-head {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--hair);
}
.login-clean-logo {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), var(--rose));
  color: white;
  display: grid; place-items: center;
  margin: 0 auto 16px;
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.04em;
  box-shadow: 0 8px 20px rgba(142, 91, 184, 0.28);
}
.login-clean-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 0 0 6px;
  color: var(--ink);
}
.login-clean-sub {
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 500;
}
.login-clean-section { margin-bottom: 24px; }
.login-clean-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  text-align: center;
}
.login-clean-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.login-clean-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--surface);
  box-shadow: var(--ring);
  border-radius: 12px;
  text-align: start;
  cursor: pointer;
  transition: 0.15s;
  border: none;
  width: 100%;
}
.login-clean-tile:hover {
  background: var(--canvas);
  box-shadow: 0 0 0 1px var(--accent), 0 4px 12px rgba(142, 91, 184, 0.10);
  transform: translateY(-1px);
}
.login-clean-tile .lct-info { flex: 1; min-width: 0; }
.login-clean-tile .lct-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.login-clean-tile .lct-meta {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 3px;
}
.login-clean-tile .lct-arrow {
  color: var(--ink-4);
  display: inline-flex;
  align-items: center;
}
.login-clean-tile:hover .lct-arrow { color: var(--accent); }
.login-clean-foot {
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-4);
  font-weight: 500;
  padding-top: 4px;
}

/* === Legacy login styles (still loaded for invite page) === */
.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--canvas);
  position: relative;
  overflow: hidden;
}
.login-left {
  padding: 80px 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.login-left::before {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, var(--accent-50), transparent 70%);
  pointer-events: none;
  opacity: 0.85;
}
.login-left::after {
  content: "";
  position: absolute;
  bottom: -160px; left: -160px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, var(--rose-50), transparent 70%);
  pointer-events: none;
  opacity: 0.65;
}
.login-headline {
  position: relative; z-index: 1;
}
.login-headline .display {
  font-size: 88px;
  letter-spacing: -0.05em;
  line-height: 0.95;
  font-weight: 800;
  background: linear-gradient(135deg, var(--ink), var(--accent-d));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 24px;
}
.login-headline p {
  font-size: 18px;
  color: var(--ink-2);
  line-height: 1.5;
  max-width: 420px;
}
.login-foot {
  font-size: 12px; color: var(--ink-3);
  position: relative; z-index: 1;
}

.login-right {
  display: grid;
  place-items: center;
  padding: 64px 48px;
  background: var(--surface);
  border-inline-start: 1px solid var(--hair);
}
.login-card {
  width: 100%; max-width: 420px;
}
.login-card .small-brand {
  display: flex; align-items: center; gap: 10px; margin-bottom: 32px;
}
.login-card .small-brand .logo {
  width: 36px; height: 36px; border-radius: 11px;
  background: linear-gradient(135deg, var(--accent), var(--rose));
  color: var(--surface);
  display: grid; place-items: center; font-weight: 800; font-size: 17px;
  letter-spacing: -0.04em;
  box-shadow: 0 4px 12px rgba(142, 91, 184, 0.3);
}
.login-card .small-brand .name {
  font-size: 18px; font-weight: 800; letter-spacing: -0.025em;
}
.login-card .helper {
  font-size: 13px; color: var(--ink-3);
  margin-bottom: 18px; font-weight: 500;
}
.login-card h2 {
  font-size: 28px; line-height: 1.15;
  margin-bottom: 28px;
  letter-spacing: -0.025em;
}

.role-tile {
  display: flex; gap: 14px; align-items: center;
  padding: 16px 18px;
  background: var(--surface);
  box-shadow: var(--ring);
  border-radius: 12px;
  cursor: pointer;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
  width: 100%; border: none; text-align: start;
}
.role-tile:hover {
  box-shadow: 0 0 0 1px var(--ink), 0 4px 12px rgba(10,10,20,0.06);
  transform: translateY(-1px);
}
.role-tile .ic {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.role-tile .ic.t { background: var(--accent-50); color: var(--accent-d); }
.role-tile .ic.p { background: var(--positive-50); color: var(--positive); }
.role-tile .ic.s { background: var(--warn-50); color: var(--warn); }
.role-tile .ic.a { background: var(--info-50); color: var(--info); }
.role-tile h4 { font-size: 14.5px; font-weight: 700; }
.role-tile .desc { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.role-tile > svg { color: var(--ink-4); margin-inline-start: auto; flex-shrink: 0; }

.login-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0;
  color: var(--ink-3); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.login-divider::before, .login-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--hair-2);
}
.login-hint {
  background: var(--canvas);
  border-radius: 10px;
  padding: 14px;
  margin-top: 16px;
  text-align: center;
  font-size: 11.5px; line-height: 1.8;
  color: var(--ink-3);
}

@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; }
  .login-left {
    padding: 48px 32px 32px;
    text-align: center;
    align-items: center;
  }
  .login-headline .display { font-size: 56px; }
  .login-headline p { margin: 0 auto; }
  .login-right { padding: 32px 24px 56px; border: none; }
}
@media (max-width: 480px) {
  .login-headline .display { font-size: 40px; }
  .login-headline p { font-size: 15px; }
}

/* =========================================================
   20. SIMPLE HOME (teacher dashboard)
   ========================================================= */
.simple-home { max-width: 720px; margin: 0 auto; padding-top: 8px; }

.greet-block { margin-bottom: 36px; }
.greet-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--ink-3); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.greet-eyebrow .week-pill {
  background: var(--accent); color: var(--surface);
  padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0; text-transform: none;
}
.greet-block h1 {
  font-size: 44px;
  line-height: 1.05;
  margin: 14px 0 12px;
  letter-spacing: -0.04em;
  font-weight: 800;
}
.greet-block .greet-meta {
  font-size: 14.5px; color: var(--ink-3);
  font-weight: 500;
}
.greet-block .greet-meta b { color: var(--ink); font-weight: 700; }

.greet-actions {
  margin-top: 4px;
}

.day-tabs {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  margin-bottom: 28px;
  background: var(--canvas-2);
  padding: 4px;
  border-radius: 12px;
}
.day-tab {
  background: transparent; border: none;
  border-radius: 9px; padding: 11px 6px;
  text-align: center;
  color: var(--ink-3);
  transition: background 0.15s, color 0.15s;
  position: relative; cursor: pointer;
}
.day-tab:hover { color: var(--ink-2); }
.day-tab.active {
  background: var(--surface); color: var(--ink);
  box-shadow: var(--ring);
}
.day-tab .d-name {
  font-weight: 700; font-size: 13px;
  letter-spacing: -0.01em;
}
.day-tab .d-count {
  font-size: 10.5px; opacity: 0.7;
  margin-top: 3px; font-weight: 500;
}
.day-tab.today:not(.active) .d-name::after {
  content: ""; display: inline-block;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--rose);
  margin-inline-start: 5px; vertical-align: middle;
}

.day-list {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--ring), var(--soft);
  overflow: hidden;
}
.day-list .session {
  display: flex; align-items: center;
  gap: 22px;
  padding: 24px 28px;
  color: inherit;
  border-bottom: 1px solid var(--hair);
  transition: background 0.15s;
  position: relative;
}
.day-list .session:last-child { border-bottom: none; }
.day-list .session:hover { background: var(--canvas); }
.day-list .session .time {
  text-align: start;
  min-width: 78px;
  flex-shrink: 0;
}
.day-list .session .time .t {
  font-weight: 800;
  font-size: 24px;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.day-list .session .time .dur {
  font-size: 11px; color: var(--ink-3);
  margin-top: 6px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.day-list .session .line { display: none; }
.day-list .session .who { flex: 1; min-width: 0; }
.day-list .session .who .name {
  font-weight: 700; font-size: 17px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.day-list .session .who .meta {
  font-size: 12.5px; color: var(--ink-3);
  margin-top: 4px;
}
.day-list .session .chev {
  color: var(--ink-4);
  transition: transform 0.18s, color 0.15s;
}
.day-list .session:hover .chev {
  color: var(--ink);
  transform: translateX(-3px);
}
.day-list .empty { padding: 80px 24px; }

@media (max-width: 700px) {
  .greet-block h1 { font-size: 30px; }
  .greet-block { margin-bottom: 28px; }
  .day-list .session { padding: 18px 18px; gap: 14px; }
  .day-list .session .time { min-width: 60px; }
  .day-list .session .time .t { font-size: 20px; }
  .day-list .session .who .name { font-size: 15.5px; }
  .day-list .session .avatar.lg { width: 44px; height: 44px; font-size: 14px; border-radius: 12px; }
}

/* =========================================================
   21. STUDENTS PAGE — editorial grid
   ========================================================= */
.grade-heading {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 18px;
  padding: 0;
}
.grade-heading h2 {
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.grade-heading .count {
  font-size: 12px; color: var(--ink-3);
  font-weight: 600;
}
.grade-heading .dot-bullet { display: none; }

.students-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
@media (max-width: 700px) {
  .students-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 380px) {
  .students-grid { grid-template-columns: 1fr; }
}

.student-tile {
  background: var(--surface);
  border: none;
  border-radius: var(--r);
  padding: 22px;
  color: inherit;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  display: block;
  position: relative;
  box-shadow: var(--ring);
}
.student-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--ring), var(--soft);
}
.student-tile .head {
  display: flex; align-items: center; gap: 16px;
  justify-content: space-between;
}
.student-tile .info { min-width: 0; flex: 1; }
.student-tile h3 {
  font-size: 17px; line-height: 1.3;
  margin-bottom: 8px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.student-tile .last-session {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
}
.student-tile .last-session .lbl {
  font-size: 10px; color: var(--ink-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px; font-weight: 700;
}
.student-tile .last-session .when {
  font-size: 13.5px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.student-tile .last-session .summary {
  font-size: 12.5px; color: var(--ink-3);
  margin-top: 4px; line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stage pill — small, neutral inside the tile */
.stage-pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  background: var(--canvas-2);
  color: var(--ink-2);
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: -0.005em;
}
.stage-pill.with-dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
  margin-inline-end: 6px;
}

/* Stage colors only color the dot (kept subtle) */
.stage-nursery .stage-pill::before, .stage-nursery .stage-pill.with-dot::before { background: var(--stage-2); }
.stage-kg .stage-pill::before { background: var(--stage-kg); }
.stage-prep .stage-pill::before { background: var(--stage-prep); }
.stage-1 .stage-pill::before { background: var(--stage-1); }
.stage-2 .stage-pill::before { background: var(--stage-2); }
.stage-3 .stage-pill::before { background: var(--stage-3); }
.stage-4 .stage-pill::before { background: var(--stage-4); }
.stage-5 .stage-pill::before { background: var(--stage-5); }
.stage-6 .stage-pill::before { background: var(--stage-6); }

/* Avatar inside student-tile uses ink — neutral */
.student-tile .stage-avatar {
  background: var(--ink) !important;
  color: var(--surface) !important;
}
.stage-1 .stage-avatar { background: var(--stage-1) !important; }
.stage-2 .stage-avatar { background: var(--stage-2) !important; }
.stage-3 .stage-avatar { background: var(--stage-3) !important; }
.stage-4 .stage-avatar { background: var(--stage-4) !important; }
.stage-5 .stage-avatar { background: var(--stage-5) !important; }
.stage-6 .stage-avatar { background: var(--stage-6) !important; }
.stage-kg .stage-avatar { background: var(--stage-kg) !important; }
.stage-prep .stage-avatar { background: var(--stage-prep) !important; }

/* =========================================================
   22. STUDENT HERO CARD — professional, clean
   ========================================================= */
.student-hero-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 24px 28px 28px;
  margin-bottom: 28px;
  box-shadow: var(--ring), var(--soft);
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
}
.student-hero-card * { min-width: 0; }
.student-hero-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--stage-grad-1, var(--accent)), var(--accent));
}

.hero-card-top {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.hero-card-top .hero-eyebrow {
  font-size: 11px; font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0;
}
.hero-settings-action {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  background: var(--canvas);
  border-radius: 10px;
  color: var(--ink-2);
  font-size: 12.5px; font-weight: 600;
  transition: 0.15s;
  box-shadow: var(--ring);
}
.hero-settings-action:hover {
  background: var(--accent-50);
  color: var(--accent-d);
  box-shadow: 0 0 0 1px var(--accent);
}
.hero-settings-action svg { width: 14px; height: 14px; }

.hero-name-row {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--hair);
}
.student-hero-card h1 {
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 800;
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.hero-progress-pill {
  display: flex; align-items: center; gap: 12px;
  background: var(--canvas);
  border-radius: 14px;
  padding: 10px 16px 10px 12px;
  flex-shrink: 0;
  box-shadow: var(--ring);
}
.hero-progress-pill .prog-ring {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--surface) 0);
  position: relative;
  flex-shrink: 0;
}
.hero-progress-pill .prog-ring::before {
  content: ""; position: absolute; inset: 4px;
  background: var(--canvas); border-radius: 50%;
}
.hero-progress-text .pct {
  font-size: 18px; font-weight: 800;
  color: var(--accent-d);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hero-progress-text .lbl {
  font-size: 10px; color: var(--ink-3);
  margin-top: 4px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 32px;
  margin: 0;
}
.hero-info-cell {
  display: flex; flex-direction: column;
  gap: 5px;
  padding-inline-start: 14px;
  position: relative;
}
.hero-info-cell::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 4px; bottom: 4px;
  width: 2px; border-radius: 999px;
  background: var(--hair-2);
}
.hero-info-cell dt {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}
.hero-info-cell dd {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
}
.hero-info-cell dd.mono {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

@media (max-width: 700px) {
  .student-hero-card {
    padding: 18px 18px 22px;
    margin-bottom: 22px;
  }
  .hero-card-top { margin-bottom: 14px; }
  .hero-name-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 18px;
  }
  .student-hero-card h1 { font-size: 26px; }
  .hero-progress-pill { align-self: flex-start; }
  .hero-info-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* =========================================================
   22b. STUDENT HERO — typography-first (legacy)
   ========================================================= */
.student-hero {
  background: transparent;
  border: none;
  padding: 0 0 32px;
  margin-bottom: 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
  border-bottom: 1px solid var(--hair);
}
.student-hero::before { display: none; }
.student-hero .hero-main { min-width: 0; }
.student-hero .hero-eyebrow {
  font-size: 11px; font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}
.student-hero h1 {
  font-size: 38px;
  line-height: 1.05;
  margin-bottom: 22px;
  letter-spacing: -0.04em;
  font-weight: 800;
}
.student-hero .hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.hero-facts .fact {
  padding: 0 18px;
  border-inline-end: 1px solid var(--hair-2);
  min-width: 0;
}
.hero-facts .fact:first-child { padding-inline-start: 0; }
.hero-facts .fact:last-child { border-inline-end: none; padding-inline-end: 0; }
.hero-facts .fact .lbl {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.hero-facts .fact .val {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.hero-facts .fact .val.mono {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.student-hero .hero-aside {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  flex-shrink: 0;
  min-width: 200px;
}
.student-hero .hero-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  box-shadow: var(--ring);
  border-radius: 12px;
  padding: 10px 16px 10px 12px;
}
.student-hero .prog-ring {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--canvas-2) 0);
  position: relative;
  flex-shrink: 0;
}
.student-hero .prog-ring::before {
  content: ""; position: absolute; inset: 4px;
  background: var(--surface);
  border-radius: 50%;
}
.student-hero .hero-progress-label .pct {
  font-size: 18px; font-weight: 800; line-height: 1;
  color: var(--accent-d); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.student-hero .hero-progress-label .lbl {
  font-size: 10px; color: var(--ink-3);
  margin-top: 4px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.student-hero .hero-aside .btn { width: 100%; justify-content: center; }
.dot-sep {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--ink-4);
  display: inline-block;
}
@media (max-width: 760px) {
  .student-hero {
    padding: 0 0 22px;
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 22px;
  }
  .student-hero h1 { font-size: 30px; margin-bottom: 18px; }
  .student-hero .hero-facts { flex-direction: column; gap: 12px; }
  .hero-facts .fact { padding: 0; border-inline-end: none; }
  .hero-facts .fact .lbl {
    display: inline-block; min-width: 80px;
    margin-bottom: 0; margin-inline-end: 8px;
  }
  .hero-facts .fact .val { display: inline-block; }
  .student-hero .hero-aside { flex-direction: row; min-width: 0; }
  .student-hero .hero-progress { flex: 1; }
}

/* =========================================================
   23. SKILL ROW
   ========================================================= */
.skill-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hair);
}
.skill-row:last-child { border-bottom: none; }
.skill-row .icon-tile {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--canvas-2); color: var(--ink-2);
  flex-shrink: 0;
}
.skill-row .meta { flex: 1; min-width: 0; }
.skill-row .name {
  font-weight: 600; font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.skill-row .pct {
  font-size: 13px; font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.skill-row .progress { margin-top: 6px; }

/* =========================================================
   24. FORM CARDS (assessment tab)
   ========================================================= */
.form-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 24px;
  position: relative;
  box-shadow: var(--ring);
  transition: box-shadow 0.16s, transform 0.16s;
  display: flex; flex-direction: column;
}
.form-card.is-done { box-shadow: var(--ring); }
.form-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 16px;
}
.form-card .form-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--accent-50); color: var(--accent-d);
  display: grid; place-items: center; font-size: 19px;
  flex-shrink: 0;
}
.form-card.is-done .form-icon {
  background: var(--positive-50); color: var(--positive);
}
.form-status {
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.form-status.done { background: var(--positive-50); color: var(--positive); }
.form-status.pending { background: var(--canvas-2); color: var(--ink-3); }
.form-card-title {
  font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.form-card-sub {
  font-size: 12.5px; color: var(--ink-3);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}
.form-card-score {
  font-size: 36px; font-weight: 800;
  color: var(--accent-d);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin: 4px 0 12px;
  flex: 1;
}
.form-card-score span {
  font-size: 14px; color: var(--ink-3);
  font-weight: 600;
  margin-inline-start: 2px;
}
.form-card-btn { margin-top: 18px; }

/* =========================================================
   25. AI / PLAN CARD
   ========================================================= */
.ai-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--ring), var(--soft);
}
.ai-badge {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--ink); color: var(--surface);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.ai-badge svg { width: 18px; height: 18px; }
.ai-section {
  margin-top: 22px; padding-top: 22px;
  border-top: 1px solid var(--hair);
}
.ai-section:first-of-type { border-top: none; padding-top: 0; margin-top: 18px; }
.goal-row {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--canvas);
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14px; line-height: 1.55;
}
.goal-num {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  display: grid; place-items: center;
  font-weight: 800; font-size: 13px;
  flex-shrink: 0;
  box-shadow: var(--ring);
  font-variant-numeric: tabular-nums;
}

/* Plan table — editorial grid */
.plan-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}
.plan-table thead th {
  background: var(--ink); color: var(--surface);
  padding: 12px 16px;
  font-size: 12.5px; font-weight: 700;
  text-align: center;
  letter-spacing: -0.005em;
}
.plan-table thead th:first-child { border-start-start-radius: 12px; }
.plan-table thead th:last-child  { border-start-end-radius: 12px; }
.plan-table tbody tr { vertical-align: top; }
.plan-table tbody td {
  border: 1px solid var(--hair);
  padding: 14px;
  background: var(--surface);
}
.plan-table .long-cell { width: 32%; background: var(--canvas) !important; }
.plan-table .long-pill {
  display: block;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--ring);
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.55;
  letter-spacing: -0.005em;
}
.plan-table .long-pill.sounds    { color: var(--warn); }
.plan-table .long-pill.memory    { color: var(--info); }
.plan-table .long-pill.pragmatic { color: var(--positive); }
.plan-table .long-pill.grammar   { color: var(--critical); }
.plan-table .short-list {
  display: flex; flex-direction: column; gap: 6px;
}
.plan-table .short-list li {
  padding: 9px 12px 9px 28px;
  background: var(--canvas);
  border-radius: 9px;
  font-size: 13px; line-height: 1.55;
  position: relative;
  letter-spacing: -0.005em;
}
.plan-table .short-list li::before {
  content: "—";
  position: absolute;
  inset-inline-end: 12px;
  top: 9px;
  color: var(--ink-3);
  font-weight: 800;
}
@media (max-width: 700px) {
  .plan-table thead { display: none; }
  .plan-table, .plan-table tbody, .plan-table tr, .plan-table td { display: block; width: 100%; }
  .plan-table tbody td { border-radius: 0; padding: 12px; }
  .plan-table .long-cell { border-bottom: none; border-radius: 12px 12px 0 0; }
  .plan-table tr { margin-bottom: 16px; border-radius: 12px; overflow: hidden; }
}

.initial-report {
  font-size: 14.5px; line-height: 1.85;
  padding: 18px 20px;
  background: var(--canvas);
  border-radius: 12px;
  border-inline-start: 3px solid var(--ink);
}
.report-section-card {
  background: var(--surface);
  box-shadow: var(--ring), var(--soft);
}

/* =========================================================
   26. SESSION LOGS — clean, editorial timeline
   ========================================================= */
.session-row {
  background: var(--surface);
  border-radius: var(--r);
  padding: 20px 22px;
  margin-bottom: 12px;
  box-shadow: var(--ring);
}
.session-row-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--hair);
}
.session-date .session-day {
  font-size: 15px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em;
}
.session-date .session-time-meta {
  font-size: 12px; color: var(--ink-3);
  margin-top: 4px; font-variant-numeric: tabular-nums;
}
.session-summary {
  display: flex; align-items: center; gap: 8px;
}
.mini-stat {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.mini-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.mini-dot.mastered { background: var(--positive); }
.mini-dot.partial  { background: var(--warn); }
.mini-dot.not      { background: var(--critical); }
.icon-action {
  width: 30px; height: 30px; border-radius: 8px;
  background: transparent; color: var(--ink-3);
  display: grid; place-items: center;
  transition: 0.15s;
}
.icon-action svg { width: 15px; height: 15px; }
.icon-action:hover { background: var(--critical-50); color: var(--critical); }

.session-goals {
  display: flex; flex-direction: column; gap: 4px;
  list-style: none; padding: 0; margin: 0;
}
.goal-line {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 6px 0;
  font-size: 14px; line-height: 1.5;
}
.goal-line .status-dot {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}
.goal-line.goal-mastered .status-dot { background: var(--positive-50); color: var(--positive); }
.goal-line.goal-partial  .status-dot { background: var(--warn-50);     color: var(--warn); }
.goal-line.goal-not-mastered .status-dot { background: var(--critical-50); color: var(--critical); }
.goal-line .goal-text {
  flex: 1; color: var(--ink-2);
  letter-spacing: -0.005em;
}
.goal-line.goal-mastered .goal-text { color: var(--ink); }

.session-foot {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--hair);
  display: flex; flex-direction: column; gap: 10px;
}
.session-tools {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.tool-tag {
  font-size: 11.5px; padding: 4px 10px;
  background: var(--canvas-2); color: var(--ink-2);
  border-radius: 7px; font-weight: 600;
  letter-spacing: -0.005em;
}
.session-note {
  font-size: 13.5px; color: var(--ink-2);
  line-height: 1.6;
  padding: 0;
  margin: 0;
  font-style: italic;
  position: relative;
  padding-inline-start: 12px;
  border-inline-start: 2px solid var(--hair-3);
}

/* Sessions section + collapsible timeline */
.session-section { margin-top: 18px; }
.session-section:first-child { margin-top: 0; }
.session-section-title {
  font-size: 11px; font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.session-section-title .ssn-count {
  color: var(--ink-4);
  font-weight: 600;
}
.session-timeline {
  display: flex; flex-direction: column;
  gap: 6px;
}
.session-collapsible {
  background: var(--surface);
  border-radius: 10px;
  box-shadow: var(--ring);
  transition: box-shadow 0.18s, background 0.18s;
}
.session-collapsible[open] {
  background: var(--canvas);
  box-shadow: 0 0 0 1px var(--accent-50), 0 4px 16px -8px rgba(142, 91, 184, 0.15);
}
.session-summary-row {
  display: flex; align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.session-summary-row::-webkit-details-marker { display: none; }
.ssr-date {
  font-size: 13.5px; font-weight: 700;
  color: var(--ink);
  flex-shrink: 0; min-width: 96px;
  letter-spacing: -0.01em;
}
.ssr-meta {
  font-size: 11.5px; color: var(--ink-3);
  flex: 1;
  font-variant-numeric: tabular-nums;
}
.ssr-stats {
  display: flex; gap: 8px; flex-shrink: 0;
}
.ssr-chev {
  color: var(--ink-3);
  transition: transform 0.18s;
  flex-shrink: 0;
  display: inline-flex; align-items: center;
}
.ssr-chev svg { width: 16px; height: 16px; }
.session-collapsible[open] .ssr-chev { transform: rotate(180deg); }
.session-collapsible-body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--hair);
  margin-top: 4px;
  padding-top: 14px;
}

/* Legacy .session-log alias — kept for any view still using it */
.session-log {
  background: var(--surface);
  border-radius: var(--r);
  padding: 18px;
  margin-bottom: 12px;
  box-shadow: var(--ring);
}
.session-log .ic {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--canvas-2); color: var(--ink-2);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.goals-list { display: flex; flex-direction: column; gap: 6px; }
.goal-eval {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--canvas);
}
.goal-eval .status-ic {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: 13px;
  flex-shrink: 0;
}
.goal-eval.mastered     { background: var(--positive-50); }
.goal-eval.mastered .status-ic { background: var(--positive); color: var(--surface); }
.goal-eval.partial      { background: var(--warn-50); }
.goal-eval.partial .status-ic  { background: var(--warn); color: var(--surface); }
.goal-eval.not-mastered { background: var(--critical-50); }
.goal-eval.not-mastered .status-ic { background: var(--critical); color: var(--surface); }

/* Suggest tag (inline label) */
.suggest-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600;
  color: var(--accent-d);
  background: var(--accent-50);
  padding: 2px 9px; border-radius: 999px;
  margin-inline-start: 8px;
  vertical-align: middle;
  letter-spacing: -0.005em;
}
.suggest-tag svg { width: 11px; height: 11px; }

/* Goal remove button (inside session goal row) */
.goal-remove {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-3);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: 0.15s;
}
.goal-remove svg { width: 13px; height: 13px; }
.goal-remove:hover { background: var(--critical-50); color: var(--critical); }

/* Goal picker (inline panel for adding more goals) */
.goal-picker {
  margin-top: 12px;
  background: var(--canvas);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--ring);
}
.goal-picker.hide { display: none; }
.goal-picker-head {
  display: flex; align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--hair);
}
.goal-picker-close {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-3);
  display: grid; place-items: center;
  transition: 0.15s;
}
.goal-picker-close:hover { background: var(--canvas-2); color: var(--ink); }
.goal-picker-close svg { width: 14px; height: 14px; }
.goal-picker-group { margin-bottom: 14px; }
.goal-picker-group:last-child { margin-bottom: 0; }
.goal-picker-cat {
  font-size: 11px; font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.goal-picker-items {
  display: flex; flex-direction: column;
  gap: 4px;
}
.goal-pick-item {
  text-align: start;
  padding: 10px 14px;
  background: var(--surface);
  box-shadow: var(--ring);
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  transition: 0.15s;
  cursor: pointer;
  position: relative;
  letter-spacing: -0.005em;
}
.goal-pick-item:hover {
  background: var(--accent-50);
  color: var(--accent-d);
  box-shadow: 0 0 0 1px var(--accent);
  transform: translateY(-1px);
}
.goal-pick-item::before {
  content: "+";
  position: absolute;
  inset-inline-start: 12px;
  top: 50%; transform: translateY(-50%);
  color: var(--ink-4);
  font-weight: 700;
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.15s;
}
.goal-pick-item:hover::before {
  opacity: 1; color: var(--accent);
}

/* Eval chips inside modals */
.goal-eval-row {
  background: var(--canvas);
  border-radius: 12px;
  padding: 14px;
}
.eval-chips { gap: 6px; flex-wrap: wrap; }
.eval-chip {
  flex: 1; min-width: 88px;
  justify-content: center;
  font-weight: 700; font-size: 13px;
  background: var(--surface);
  box-shadow: var(--ring);
}
.eval-chip.mastered     { color: var(--positive); }
.eval-chip.partial      { color: var(--warn); }
.eval-chip.not-mastered { color: var(--critical); }
.eval-chip.active.mastered     { background: var(--positive-50); box-shadow: 0 0 0 1.5px var(--positive); }
.eval-chip.active.partial      { background: var(--warn-50);     box-shadow: 0 0 0 1.5px var(--warn); }
.eval-chip.active.not-mastered { background: var(--critical-50); box-shadow: 0 0 0 1.5px var(--critical); }

.tool-chip { font-size: 13px; }
.tool-chip.active {
  background: var(--ink) !important;
  color: var(--surface);
  box-shadow: none;
}

.q-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  background: var(--canvas);
  border-radius: 10px;
  flex-wrap: wrap;
}
.q-row .row { gap: 4px; }

.consent-points {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 16px;
}
.consent-points li {
  padding: 11px 36px 11px 14px;
  background: var(--canvas);
  border-radius: 10px;
  font-size: 14px;
  position: relative;
  line-height: 1.5;
}
.consent-points li::before {
  content: "✓";
  position: absolute;
  inset-inline-end: 14px;
  top: 50%; transform: translateY(-50%);
  color: var(--positive);
  font-weight: 800;
}
.check-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--positive-50);
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  cursor: pointer;
  font-weight: 600;
}
.check-row input { width: 18px; height: 18px; accent-color: var(--positive); }

/* Assessment tabs */
.assessment-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  background: var(--canvas-2);
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 18px;
}
.assess-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-3);
  font-size: 12.5px; font-weight: 600;
  transition: 0.15s;
  cursor: pointer; border: none;
}
.assess-tab:hover { color: var(--ink-2); }
.assess-tab.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--ring);
}
.assess-tab .num {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--canvas-2);
  color: var(--ink-3);
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 800;
}
.assess-tab.active .num { background: var(--ink); color: var(--surface); }
.assess-section {
  background: var(--surface);
  border-radius: var(--r);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--ring);
}

/* =========================================================
   27. CHAT
   ========================================================= */
.chat-card { padding: 0; overflow: hidden; box-shadow: var(--ring), var(--soft); }
.chat-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hair);
  background: var(--canvas);
}
.chat-body {
  padding: 22px 20px;
  max-height: 540px; min-height: 320px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--canvas);
}
.chat-empty {
  text-align: center; padding: 60px 20px;
  color: var(--ink-3);
}
.msg { display: flex; flex-direction: column; max-width: 78%; }
.msg.mine   { align-self: flex-start; }
.msg.theirs { align-self: flex-end; }
.msg-bubble {
  padding: 11px 16px;
  border-radius: 16px;
  font-size: 14px; line-height: 1.55;
  word-wrap: break-word;
  letter-spacing: -0.005em;
}
.msg.mine   .msg-bubble {
  background: var(--ink);
  color: var(--surface);
  border-end-start-radius: 4px;
}
.msg.theirs .msg-bubble {
  background: var(--surface);
  box-shadow: var(--ring);
  color: var(--ink);
  border-end-end-radius: 4px;
}
.msg-time {
  font-size: 10.5px; color: var(--ink-3);
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
.msg.mine   .msg-time { text-align: start; padding-inline-start: 4px; }
.msg.theirs .msg-time { text-align: end; padding-inline-end: 4px; }

.chat-input {
  display: flex; gap: 8px;
  padding: 14px;
  border-top: 1px solid var(--hair);
  background: var(--surface);
}
.chat-input input {
  flex: 1; padding: 11px 14px;
  background: var(--canvas);
  border-radius: 10px; font-size: 14px;
  outline: none; border: none;
  box-shadow: none;
}
.chat-input input:focus { background: var(--surface); box-shadow: 0 0 0 2px var(--accent); }
.chat-input .btn { padding: 11px 16px; }
.chat-input .btn svg { transform: scaleX(-1); }

.chat-cta {
  background: var(--canvas);
  box-shadow: var(--ring);
}

/* File drop zone (library upload) */
.file-drop {
  display: block;
  cursor: pointer;
  border: 2px dashed var(--hair-3);
  border-radius: 14px;
  padding: 22px;
  text-align: center;
  color: var(--ink-3);
  background: var(--canvas);
  transition: 0.18s;
}
.file-drop:hover {
  border-color: var(--accent);
  background: var(--accent-50);
  color: var(--accent-d);
}
.file-drop svg { width: 22px; height: 22px; }
.file-drop-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.file-drop-chosen {
  display: flex; align-items: center; gap: 12px;
  text-align: start;
}
.file-drop-chosen.hide, .file-drop-empty.hide { display: none; }
.file-chosen-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--surface); color: var(--accent-d);
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: var(--ring);
}
.file-chosen-meta { flex: 1; min-width: 0; }
.file-chosen-name {
  font-size: 13.5px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-clear {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--surface); color: var(--ink-3);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: 0.15s;
}
.file-clear:hover { background: var(--critical-50); color: var(--critical); }
.file-clear svg { width: 14px; height: 14px; }

/* Edit student form section titles */
.edit-student-form .form-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  margin-top: 4px;
}
.edit-student-form .form-section-title:not(:first-child) { margin-top: 18px; }

/* Invite message preview */
.invite-msg-preview {
  width: 100%;
  min-height: 280px;
  padding: 18px 20px;
  background: var(--canvas);
  box-shadow: var(--ring);
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink);
  resize: vertical;
  outline: none;
  direction: rtl;
}
.invite-msg-preview:focus { box-shadow: 0 0 0 2px var(--accent); }
.mono-num {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  font-weight: 700;
}

/* Invite */
.invite-code {
  background: var(--canvas);
  box-shadow: var(--ring);
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 700; color: var(--ink);
  font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace;
  letter-spacing: 1px; font-size: 12px;
  display: inline-block;
}
.invite-card {
  background: var(--canvas);
  box-shadow: var(--ring);
  border-radius: var(--r);
  padding: 20px;
}
.invite-card .invite-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
}
.invite-card .invite-head .ic {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--surface);
  box-shadow: var(--ring);
  color: var(--ink-2);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.invite-link-row {
  background: var(--surface);
  box-shadow: var(--ring);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  overflow: hidden;
}
.invite-link {
  font-size: 12.5px; color: var(--ink-2);
  font-family: 'IBM Plex Mono', monospace;
  word-break: break-all;
  white-space: pre-wrap;
  display: block;
  direction: ltr; text-align: start;
}
.invite-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.invite-actions > .btn {
  flex: 1; min-width: 130px;
}

/* Invite welcome (parent invite landing) */
.invite-welcome {
  background: var(--surface);
  box-shadow: var(--ring);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 22px;
}
.invite-stage-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent);
}

/* =========================================================
   28. SCHEDULE EDITOR
   ========================================================= */
.schedule-editor {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .schedule-editor { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .schedule-editor { grid-template-columns: 1fr; } }

.day-col {
  background: var(--surface);
  box-shadow: var(--ring);
  border-radius: var(--r);
  padding: 14px;
  min-height: 220px;
}
.day-col .day-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 4px 14px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 14px;
}
.day-col .day-head .dn { font-weight: 800; font-size: 14px; letter-spacing: -0.015em; }
.day-col .day-head .dc { font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.day-col .add-day-btn {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--canvas-2); color: var(--ink-2);
  display: grid; place-items: center; transition: 0.15s;
}
.day-col .add-day-btn:hover { background: var(--ink); color: var(--surface); }

.day-slots { display: flex; flex-direction: column; gap: 8px; }
.schedule-slot {
  display: flex; align-items: center; gap: 10px;
  background: var(--canvas);
  border-radius: 10px;
  padding: 12px;
  position: relative;
}
.schedule-slot .time {
  font-weight: 800; font-size: 14px;
  color: var(--ink);
  min-width: 46px; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.schedule-slot .info { flex: 1; min-width: 0; }
.schedule-slot .nm {
  font-size: 13.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.schedule-slot .mt {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; margin-top: 4px;
}
.schedule-slot .mt .stage-pill { font-size: 10.5px; padding: 1px 8px; }
.schedule-slot .rm-slot {
  width: 26px; height: 26px; border-radius: 7px;
  background: transparent; color: var(--ink-3);
  display: grid; place-items: center;
  flex-shrink: 0;
  opacity: 0;
  transition: 0.15s;
}
.schedule-slot:hover .rm-slot { opacity: 1; }
.schedule-slot .rm-slot:hover { background: var(--critical-50); color: var(--critical); }
@media (max-width: 700px) { .schedule-slot .rm-slot { opacity: 1; } }

.day-empty-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 18px;
  background: var(--canvas);
  border: 1px dashed var(--hair-3);
  border-radius: 10px;
  color: var(--ink-3);
  font-size: 13px; font-weight: 600;
  transition: 0.15s;
}
.day-empty-btn:hover {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}

/* =========================================================
   29. LIBRARY
   ========================================================= */
.library-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.search-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  box-shadow: var(--ring);
  border-radius: 12px;
  padding: 10px 14px;
  flex: 1; min-width: 240px;
  transition: box-shadow 0.18s;
}
.search-bar:focus-within {
  box-shadow: 0 0 0 2px var(--accent);
}
.search-bar svg { color: var(--ink-3); flex-shrink: 0; width: 17px; height: 17px; }
.search-bar input {
  border: none; outline: none;
  background: transparent;
  flex: 1; font-size: 14px; padding: 2px 0;
  color: var(--ink);
}
.search-bar .x-btn {
  width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--canvas-2); color: var(--ink-2);
}
.search-bar .x-btn:hover { background: var(--critical-50); color: var(--critical); }

.filter-row .chip { gap: 8px; }
.filter-row .chip svg { width: 14px; height: 14px; }
.filter-row .chip .count {
  font-size: 11px; font-weight: 700;
  background: var(--canvas-2); color: var(--ink-3);
  padding: 1px 7px; border-radius: 999px;
}
.filter-row .chip.active .count {
  background: var(--surface); color: var(--ink);
}

/* =========================================================
   30. SETTINGS
   ========================================================= */
.settings-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: flex-start;
}
.settings-nav {
  background: var(--surface);
  box-shadow: var(--ring);
  border-radius: var(--r);
  padding: 8px;
  position: sticky; top: 88px;
  display: flex; flex-direction: column; gap: 2px;
}
.settings-logout-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  background: var(--surface);
  box-shadow: var(--ring);
  color: var(--critical);
  font-weight: 600; font-size: 14px;
  border-radius: 14px;
  width: 100%;
  transition: background 0.15s, box-shadow 0.15s;
}
.settings-logout-btn:hover {
  background: var(--critical-50);
  box-shadow: 0 0 0 1px var(--critical);
}
.settings-logout-btn svg { width: 16px; height: 16px; }
.settings-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ink-3);
  font-weight: 600;
  font-size: 13.5px;
  transition: 0.15s;
}
.settings-nav-item:hover { background: var(--canvas-2); color: var(--ink); }
.settings-nav-item.active {
  background: var(--canvas-2);
  color: var(--ink);
  font-weight: 700;
}
.settings-nav-item .ic {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: currentColor;
}
.settings-nav-item .ic svg { width: 18px; height: 18px; }
.settings-content { min-width: 0; }

.settings-badge {
  margin-inline-start: auto;
  background: var(--ink); color: var(--surface);
  font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
}

@media (max-width: 800px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 8px;
    overflow: visible;
  }
  .settings-nav-item {
    flex-direction: column; gap: 8px;
    padding: 16px 8px;
    text-align: center;
    font-size: 11.5px;
    min-width: 0;
    position: relative;
    border-radius: 12px;
    line-height: 1.3;
  }
  .settings-nav-item .ic { width: 24px; height: 24px; }
  .settings-nav-item .ic svg { width: 22px; height: 22px; }
  .settings-badge {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    margin: 0;
    font-size: 10px;
    padding: 1px 6px;
  }
  .settings-logout-btn { padding: 14px; }
}
@media (max-width: 420px) {
  .settings-nav { grid-template-columns: repeat(2, 1fr); }
}

/* School card in settings */
.school-card {
  background: var(--surface);
  box-shadow: var(--ring), var(--soft);
}
.school-card .school-logo {
  width: 56px; height: 56px; border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--rose));
  color: var(--surface);
  display: grid; place-items: center;
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.04em;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(142, 91, 184, 0.28);
}
.school-card .principal-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--canvas);
  box-shadow: var(--ring);
  border-radius: var(--r);
  padding: 12px 16px;
}

/* Archive */
.archive-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--canvas);
  box-shadow: var(--ring);
  border-radius: 12px;
  padding: 12px 14px;
  flex-wrap: wrap;
}

/* Onboarding card */
.onboarding-card {
  background: var(--surface);
  box-shadow: var(--ring), var(--soft);
}
.onboarding-card h3 { font-size: 24px; }
.onboarding-steps {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 16px;
}
.onboarding-steps li {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--canvas);
  border-radius: 10px;
  font-size: 13.5px;
}
.onboarding-steps .num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: var(--surface);
  display: grid; place-items: center;
  font-weight: 800; font-size: 12.5px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   31. STAGE CSS VARIABLES
   ========================================================= */
.stage-nursery, .stage-kg, .stage-prep,
.stage-1, .stage-2, .stage-3, .stage-4, .stage-5, .stage-6 {
  --stage-grad-1: var(--ink-2);
  --stage-grad-2: var(--ink-2);
}
.stage-nursery { --stage-grad-1: var(--stage-2);    --stage-grad-2: var(--stage-2); }
.stage-kg      { --stage-grad-1: var(--stage-kg);   --stage-grad-2: var(--stage-kg); }
.stage-prep    { --stage-grad-1: var(--stage-prep); --stage-grad-2: var(--stage-prep); }
.stage-1       { --stage-grad-1: var(--stage-1);    --stage-grad-2: var(--stage-1); }
.stage-2       { --stage-grad-1: var(--stage-2);    --stage-grad-2: var(--stage-2); }
.stage-3       { --stage-grad-1: var(--stage-3);    --stage-grad-2: var(--stage-3); }
.stage-4       { --stage-grad-1: var(--stage-4);    --stage-grad-2: var(--stage-4); }
.stage-5       { --stage-grad-1: var(--stage-5);    --stage-grad-2: var(--stage-5); }
.stage-6       { --stage-grad-1: var(--stage-6);    --stage-grad-2: var(--stage-6); }

/* =========================================================
   32. PRINTABLE REPORT
   ========================================================= */
.report {
  background: var(--surface);
  box-shadow: var(--ring), var(--soft);
  border-radius: var(--r-lg);
  padding: 40px;
  max-width: 820px;
  margin: 0 auto;
}
.report-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 22px; margin-bottom: 28px;
  border-bottom: 1px solid var(--hair-2);
}
.report-brand { display: flex; align-items: center; gap: 12px; }
.report-brand .logo {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--rose));
  color: var(--surface);
  display: grid; place-items: center;
  font-weight: 800; font-size: 20px;
  letter-spacing: -0.04em;
}
.report-brand .brand-name {
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.04em; line-height: 1;
}
.report-meta { text-align: end; font-size: 12.5px; }
.report-section { margin-bottom: 28px; page-break-inside: avoid; }
.report-h {
  font-size: 14px; padding: 6px 14px;
  background: var(--canvas-2);
  border-radius: 8px; margin-bottom: 16px;
  display: inline-block;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.report-meta-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  font-size: 12.5px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}
.report-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.report-stats .stat {
  background: var(--canvas);
  box-shadow: none;
  text-align: center;
  flex-direction: column;
  padding: 16px 12px;
  gap: 4px;
}
.report-stats .stat .num { font-size: 26px; }
.report-skill { margin-bottom: 14px; }
.report-goals {
  padding-inline-start: 24px;
  line-height: 2;
  font-size: 14px;
}
.report-session {
  background: var(--canvas);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}
.report-goal-line {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; padding: 4px 0;
}
.report-goal-line .goal-st {
  flex-shrink: 0; min-width: 88px;
  font-weight: 700; font-size: 12px;
}
.report-goal-line .goal-st.mastered     { color: var(--positive); }
.report-goal-line .goal-st.partial      { color: var(--warn); }
.report-goal-line .goal-st.not-mastered { color: var(--critical); }
.report-footer {
  margin-top: 32px; padding-top: 16px;
  border-top: 1px solid var(--hair);
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--ink-3);
}

@media print {
  @page { size: A4; margin: 12mm; }
  body { background: white !important; }
  .topbar, .bottombar, .sidenav, .no-print { display: none !important; }
  .main { padding: 0 !important; max-width: 100% !important; }
  .report {
    border: none !important; box-shadow: none !important;
    padding: 0 !important; max-width: 100% !important;
  }
  .report-section { page-break-inside: avoid; }
  .report-h {
    background: var(--canvas-2) !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .progress > .bar {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  a { color: inherit !important; text-decoration: none !important; }
}

/* =========================================================
   33. UTILITIES
   ========================================================= */
.row { display: flex; align-items: center; gap: 12px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack.gap-sm { gap: 8px; }
.stack.gap-lg { gap: 24px; }

.grid { display: grid; gap: 18px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-2-1 { grid-template-columns: 2fr 1fr; }
.grid.cols-1-2 { grid-template-columns: 1fr 2fr; }
@media (max-width: 1100px) { .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4,
  .grid.cols-2-1, .grid.cols-1-2 { grid-template-columns: 1fr; }
}

.text-muted { color: var(--ink-3); }
.text-sm    { font-size: 13px; }
.text-xs    { font-size: 11.5px; }
.text-bold  { font-weight: 700; color: var(--ink); }
.text-end   { text-align: end; }
.mt-0  { margin-top: 0; }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 24px; }
.mb-md { margin-bottom: 16px; }
.center { text-align: center; }
.hide { display: none !important; }
.divider { height: 1px; background: var(--hair); margin: 14px 0; }

/* Skeleton shimmer */
.skeleton {
  background: linear-gradient(90deg, var(--canvas-2) 25%, var(--surface-2) 50%, var(--canvas-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 8px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Calendar (attendance) */
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center;
}
.cal-day {
  aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 9px; font-size: 13px; font-weight: 600;
  background: var(--canvas-2); color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.cal-day.present { background: var(--positive-50); color: var(--positive); }
.cal-day.absent  { background: var(--critical-50); color: var(--critical); }
.cal-day.late    { background: var(--warn-50); color: var(--warn); }
.cal-day.excused { background: var(--info-50); color: var(--info); }
.cal-day.empty {
  background: transparent; color: var(--ink-4);
  font-weight: 400; opacity: 0.5;
}
.cal-head {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  font-size: 10.5px; color: var(--ink-3);
  margin-bottom: 8px; text-align: center;
  font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Greeting date row (legacy) */
.greet-date, .simple-greet .greet-date {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--ink-3); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.simple-greet .week-pill {
  background: var(--ink); color: var(--surface);
  padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0; text-transform: none;
}
.simple-greet { margin-bottom: 36px; }
.simple-greet h1 {
  font-size: 44px; line-height: 1.05;
  margin-top: 12px;
  letter-spacing: -0.04em;
  font-weight: 800;
}
.simple-greet .text-muted b { color: var(--ink); font-weight: 700; }
@media (max-width: 700px) {
  .simple-greet h1 { font-size: 28px; }
  .simple-greet { margin-bottom: 26px; }
}

/* Kid screen (still used by some legacy code paths) */
.kid {
  background: var(--canvas);
  min-height: calc(100vh - var(--topbar-h));
  border-radius: var(--r-lg);
  padding: 28px;
}