/* RR5 — mobile-first, for 10-11 year olds: big text, big targets, friendly colours */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --ink: #1e293b; --soft: #64748b; --bg: #eef2ff; --card: #ffffff;
  --brand: #534AB7; --brand-light: #7F77DD; --brand-bg: #EEEDFE; --brand-dark: #3C3489;
  --good: #1D9E75; --good-bg: #E1F5EE; --good-dark: #0F6E56;
  --bad: #E24B4A; --bad-bg: #FCEBEB; --bad-dark: #A32D2D;
  --warn: #BA7517; --warn-bg: #FAEEDA; --warn-dark: #854F0B;
  --line: #e2e4ea; --hint: #FAEEDA;
}
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg); color: var(--ink);
  min-height: 100vh; min-height: 100dvh;
  font-size: 18px; line-height: 1.55;
}

/* ---------- login ---------- */
.center-page { display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card {
  background: var(--card); border-radius: 24px; padding: 36px 28px;
  width: 100%; max-width: 380px; text-align: center;
  box-shadow: 0 10px 30px rgba(83, 74, 183, .15);
}
.login-accent { height: 6px; border-radius: 24px 24px 0 0; margin: -36px -28px 20px;
  background: linear-gradient(135deg, var(--brand), var(--brand-light)); }
.logo { font-size: 52px; color: var(--brand); margin-bottom: 4px; line-height: 1; }
.login-card h1 { color: var(--brand); font-size: 26px; margin-bottom: 2px; }
.sub { color: var(--soft); margin: 0 0 22px; font-size: 15px; }
input {
  width: 100%; padding: 14px; font-size: 18px; text-align: center;
  border: 2px solid var(--line); border-radius: 14px; margin-bottom: 12px;
  outline: none; background: #f8f9fc;
}
input:focus { border-color: var(--brand); background: #fff; }
.msg { color: var(--bad); min-height: 24px; margin-top: 10px; font-weight: 600; }

/* ---------- pupil login (playful) ---------- */
.lp-body { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 20px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #3C3489, #534AB7 45%, #7F77DD); }
.lp-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.lp-float { position: absolute; font-size: 40px; opacity: .55; animation: lp-drift 9s ease-in-out infinite; }
.lp-float.f1 { left: 8%; top: 13%; }
.lp-float.f2 { right: 11%; top: 19%; font-size: 48px; animation-delay: 1.4s; }
.lp-float.f3 { left: 13%; bottom: 16%; font-size: 44px; animation-delay: .8s; }
.lp-float.f4 { right: 13%; bottom: 21%; animation-delay: 2.2s; }
.lp-float.f5 { left: 47%; top: 7%; font-size: 32px; animation-delay: 1.1s; }
@keyframes lp-drift { 0%,100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-20px) rotate(5deg); } }
.lp-card { position: relative; z-index: 2; background: #fff; border-radius: 28px; padding: 34px 26px 26px;
  width: 100%; max-width: 380px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.32); margin-top: 50px; }
.lp-mascot { width: 92px; height: 92px; margin: -78px auto 10px; border-radius: 50%;
  background: linear-gradient(160deg, #7F77DD, #534AB7); display: flex; align-items: center; justify-content: center;
  font-size: 52px; box-shadow: 0 12px 30px rgba(83,74,183,.42); border: 5px solid #fff;
  animation: lp-bob 2.6s ease-in-out infinite; }
@keyframes lp-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.lp-title { font-size: 30px; font-weight: 900; color: #534AB7; letter-spacing: -.5px; }
.lp-sub { color: #7F77DD; font-weight: 700; font-size: 15px; margin: 4px 0 22px; }
.lp-field { position: relative; margin-bottom: 14px; }
.lp-field i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #7F77DD; font-size: 20px; }
.lp-card input { width: 100%; margin: 0; padding: 15px 16px 15px 46px; font-size: 18px; text-align: left;
  border: 2px solid #e2e4ea; border-radius: 16px; background: #f6f7fb; font-weight: 600; color: #1e293b; }
.lp-card input:focus { border-color: #534AB7; background: #fff; outline: none; }
.lp-card input::placeholder { color: #9aa1b3; font-weight: 500; }
.lp-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px;
  font-size: 19px; font-weight: 800; color: #fff; border: 0; border-radius: 16px; cursor: pointer; margin-top: 4px;
  background: linear-gradient(135deg, #534AB7, #7F77DD); box-shadow: 0 10px 26px rgba(83,74,183,.42); transition: transform .08s; }
.lp-btn:active { transform: scale(.97); }
.lp-btn:disabled { opacity: .7; }
.lp-msg { color: #E24B4A; min-height: 22px; margin-top: 12px; font-weight: 700; font-size: 14px; }
.lp-rewards { margin-top: 16px; font-size: 13px; color: #94a0b8; font-weight: 600; line-height: 1.9; }
.lp-rewards .em { font-size: 22px; letter-spacing: 4px; }

/* Teacher route off the shared login page. Deliberately quieter than .lp-btn —
   outlined, smaller, below the rewards line — because the page belongs to the
   pupils and a second bright button competes with "Let's play!". Still a real
   button-sized tap target, not a text link, so a teacher finds it at a glance. */
.lp-teacher { display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 18px; padding: 12px 16px; font-size: 14px; font-weight: 700;
  color: #534AB7; text-decoration: none; background: #fff;
  border: 2px solid #E2E1F3; border-radius: 14px; transition: border-color .12s, background .12s; }
.lp-teacher:hover { border-color: #534AB7; background: #F7F6FE; }
.lp-teacher:active { transform: scale(.98); }
.lp-teacher i { font-size: 16px; }

/* ---------- buttons ---------- */
.btn-big {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px; font-size: 18px; font-weight: 600; box-sizing: border-box;
  color: #fff; background: var(--brand); border: 2px solid transparent; border-radius: 14px;
  cursor: pointer; touch-action: manipulation; transition: transform .06s;
}
.btn-big:active { transform: scale(.97); background: var(--brand-dark); }
.btn-big:disabled { background: #CECBF6; }
.btn-big.green { background: var(--good); }
.btn-big.green:active { background: var(--good-dark); }
.btn-big i { font-size: 18px; }

/* ---------- tutor topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
  color: #fff;
}
.chip {
  background: rgba(255,255,255,.2); padding: 4px 12px; border-radius: 999px;
  font-weight: 600; font-size: 14px; white-space: nowrap;
}
.timer-chip { gap: 4px; display: inline-flex; align-items: center; }
.timer-chip.warn { background: rgba(255,80,80,.35); animation: timer-pulse 1s ease infinite; }
@keyframes timer-pulse { 0%,100% { opacity: 1; } 50% { opacity: .6; } }
.xp-bar { flex: 1; margin: 0 10px; height: 8px; background: rgba(255,255,255,.2); border-radius: 999px; overflow: hidden; }
.xp-fill { height: 100%; background: #5DCAA5; border-radius: 999px; transition: width .4s ease; }

/* ---------- tutor layout ---------- */
.panel { padding: 16px; max-width: 640px; margin: 0 auto; }
.center { text-align: center; }
.hidden { display: none !important; }
.card {
  background: var(--card); border-radius: 18px; padding: 18px;
  box-shadow: 0 2px 10px rgba(30, 41, 59, .06); margin-bottom: 14px;
}
.card h2 { color: var(--brand); font-size: 20px; margin-bottom: 10px; }

/* ---------- level + streak bar ---------- */
.meta-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.level-badge {
  display: inline-block; padding: 3px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--good-bg); color: var(--good-dark);
}
.streak { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--warn-dark); }
.streak i { font-size: 15px; }

/* ---------- passage ---------- */
.passage { white-space: pre-line; font-size: 18px; line-height: 1.65; margin-bottom: 16px; }
.passage .sig { background: var(--warn-bg); border-radius: 4px; padding: 1px 4px; font-weight: 600; color: var(--warn-dark); }
.gloss {
  background: var(--warn-bg); border-radius: 12px; padding: 10px 14px;
  font-size: 15px; margin-bottom: 14px; color: var(--warn-dark);
}
.hint {
  background: var(--warn-bg); border-radius: 12px; padding: 10px 14px;
  font-size: 15px; margin-bottom: 12px; color: var(--warn-dark);
}
.stem { font-size: 18px; font-weight: 500; margin-bottom: 14px; white-space: pre-line; color: var(--brand); }

/* ---------- options ---------- */
.options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; font-size: 17px; background: #f8f9fc;
  border: 2px solid var(--line); border-radius: 14px; cursor: pointer;
  touch-action: manipulation; transition: border-color .15s, background .15s;
}
.opt .letter {
  flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--line);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
  color: var(--soft); transition: background .15s, color .15s;
}
.opt.picked { border-color: var(--brand); background: var(--brand-bg); }
.opt.picked .letter { background: var(--brand); color: #fff; }
.opt.reveal-good { border-color: var(--good); background: var(--good-bg); }
.opt.reveal-good .letter { background: var(--good); color: #fff; }
.opt.reveal-bad { border-color: var(--bad); background: var(--bad-bg); }
.opt.reveal-bad .letter { background: var(--bad); color: #fff; }

/* ---------- feedback ---------- */
.fb-hero { text-align: center; padding: 16px 10px 12px; }
.fb-ring { position: relative; width: 80px; height: 80px; margin: 0 auto 8px; }
.fb-ring svg { width: 80px; height: 80px; }
.fb-ring-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 28px; }
.fb-ring-icon.good { color: var(--good-dark); }
.fb-ring-icon.try { color: var(--warn-dark); }
.fb-title { font-size: 22px; font-weight: 600; }
.fb-title.good { color: var(--good-dark); }
.fb-title.bad { color: var(--warn-dark); }
.fb-sub { font-size: 14px; color: var(--soft); margin-top: 2px; }
.fb-xp {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; margin: 8px 0 4px;
}
.fb-xp.good { background: var(--brand-bg); color: var(--brand); }
.fb-xp.bad { background: var(--warn-bg); color: var(--warn-dark); }
.fb-streak-mini { display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 13px; color: var(--warn-dark); font-weight: 600; margin-top: 2px; }

.fb-card { background: var(--card); border-radius: 14px; padding: 14px 16px;
  margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.fb-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fb-card-icon { width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.fb-card-icon.coach { background: var(--brand-bg); color: var(--brand); }
.fb-card-icon.answer { background: var(--good-bg); color: var(--good-dark); }
.fb-card-icon.answer-wrong { background: var(--bad-bg); color: var(--bad-dark); }
.fb-card-icon.tip { background: var(--warn-bg); color: var(--warn-dark); }
.fb-card-label { font-size: 12px; font-weight: 600; color: var(--soft); text-transform: uppercase; letter-spacing: 0.5px; }
.fb-card-text { font-size: 15px; line-height: 1.55; }
.fb-card-bm { font-size: 14px; color: var(--soft); font-style: italic; margin-top: 6px; line-height: 1.5; }

.fb-answer-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; margin-bottom: 6px; font-size: 14px; }
.fb-answer-row:last-child { margin-bottom: 0; }
.fb-answer-row.correct { background: var(--good-bg); color: var(--good-dark); }
.fb-answer-row.wrong-picked { background: var(--bad-bg); color: var(--bad-dark); }
.fb-answer-letter { width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; color: #fff; }
.fb-answer-letter.correct { background: var(--good); }
.fb-answer-letter.wrong { background: var(--bad); }
.fb-answer-check { margin-left: auto; font-size: 14px; }

.fb-misconception { border-left: 3px solid #CECBF6; border-radius: 0 14px 14px 0; }

.confetti-box { position: absolute; top: 0; left: 0; right: 0; height: 140px; overflow: hidden; pointer-events: none; z-index: 5; }
.confetti-dot { position: absolute; border-radius: 2px; opacity: 0; animation: confetti-fall 1.2s ease-out forwards; }
@keyframes confetti-fall {
  0% { opacity: 0; transform: translateY(-20px) rotate(0deg); }
  20% { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(120px) rotate(360deg); }
}

/* ---------- session done ---------- */
.done-body { text-align: center; }
.done-ring { position: relative; width: 120px; height: 120px; margin: 10px auto; }
.done-ring svg { width: 120px; height: 120px; }
.ring-bg { stroke: var(--line); }
.ring-fill { stroke: var(--good); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center;
  transition: stroke-dashoffset .8s ease; }
.ring-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.ring-score { font-size: 24px; font-weight: 600; }
.ring-label { font-size: 12px; color: var(--soft); }
.done-title { font-size: 20px; font-weight: 600; color: var(--brand); margin: 8px 0 4px; }
.done-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.done-stat { background: #f8f9fc; border-radius: 12px; padding: 12px 8px; }
.done-stat-val { font-size: 20px; font-weight: 600; }
.done-stat-lbl { font-size: 12px; color: var(--soft); }
.done-stat-lbl i { font-size: 12px; }
.done-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
  border-radius: 999px; background: var(--warn-bg); color: var(--warn-dark);
  font-size: 13px; font-weight: 600; margin: 8px 0; }
.done-ladder { font-size: 13px; color: var(--soft); margin: 8px 0; line-height: 1.6; }
.leaderboard { background: #f8f9fc; border-radius: 14px; padding: 12px 14px; margin: 12px 0; text-align: left; }
.lb-title { font-size: 14px; font-weight: 600; color: var(--brand); margin-bottom: 6px; text-align: center; }
.lb-title i { font-size: 14px; vertical-align: -1px; }
.lb-row { display: flex; justify-content: space-between; padding: 5px 0;
  border-bottom: 0.5px solid var(--line); font-size: 13px; color: var(--soft); }
.lb-row:last-child { border: 0; }
.lb-row.me { color: var(--brand); font-weight: 600; }

/* ---------- lounge (home screen) ---------- */
.outline-btn { background: #fff; color: var(--brand); border: 2px solid var(--line); }
.outline-btn:active { background: #f8f9fc; }

.lng-anim { opacity: 0; transform: translateY(16px); animation: lng-up .5s cubic-bezier(.2,.7,.3,1) forwards; animation-delay: calc(var(--d) * .09s); }
@keyframes lng-up { to { opacity: 1; transform: none; } }

.lng-hero {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(150deg, var(--brand), var(--brand-light));
  color: #fff; border-radius: 22px; padding: 26px 20px 22px; margin-bottom: 14px;
  box-shadow: 0 12px 28px rgba(83,74,183,.28);
}
.lng-hero-glow { position: absolute; top: -60px; right: -50px; width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(255,255,255,.25), transparent 70%); }
.lng-avatar { position: relative; width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 50%;
  background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center;
  font-size: 36px; animation: lng-bob 3s ease-in-out infinite; border: 0; cursor: pointer;
  color: #fff; padding: 0; }
.lng-avatar:active { transform: scale(.94); }
.lng-avatar-emoji { font-size: 40px; line-height: 1; }
.lng-avatar-edit { position: absolute; bottom: -2px; right: -2px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--good); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 13px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.lng-avatar.needs-pick { animation: lng-bob 3s ease-in-out infinite, lng-attn 1.4s ease-in-out infinite; }
@keyframes lng-attn { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); } 50% { box-shadow: 0 0 0 10px rgba(255,255,255,0); } }

/* avatar picker overlay */
.lng-picker { position: fixed; inset: 0; z-index: 50; background: rgba(30,41,59,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(2px); }
.lng-picker-card { background: var(--card); border-radius: 22px; padding: 22px; width: 100%; max-width: 340px;
  text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.3); animation: lng-pop .25s ease; }
@keyframes lng-pop { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.lng-picker-title { font-family: -apple-system, sans-serif; font-weight: 700; font-size: 18px;
  color: var(--brand); margin-bottom: 14px; }
.lng-picker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.lng-av-opt { font-size: 30px; aspect-ratio: 1; border: 2px solid var(--line); border-radius: 14px;
  background: #f8f9fc; cursor: pointer; transition: transform .08s, border-color .15s; line-height: 1; }
.lng-av-opt:active { transform: scale(.9); }
.lng-av-opt.sel { border-color: var(--brand); background: var(--brand-bg); }
.lng-picker-close { margin-top: 16px; width: 100%; padding: 12px; font-size: 16px; font-weight: 600;
  color: #fff; background: var(--brand); border: 0; border-radius: 12px; cursor: pointer; }

.lng-lb-face { font-size: 18px; line-height: 1; }

/* ---------- badges ---------- */
.lng-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lng-badge { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 12px 6px; border-radius: 14px; background: #f8f9fc; border: 1px solid var(--line); transition: transform .15s; }
.lng-badge.got { background: linear-gradient(160deg, #fff, var(--brand-bg)); border-color: var(--brand-light); }
.lng-badge.got:active { transform: scale(.95); }
.lng-badge-ic { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 24px; background: #eceef5; color: var(--soft); }
.lng-badge.got .lng-badge-ic { background: #fff; box-shadow: 0 5px 14px rgba(83,74,183,.25); }
.lng-badge-lbl { font-size: 11px; font-weight: 600; color: var(--soft); line-height: 1.2; }
.lng-badge.got .lng-badge-lbl { color: var(--brand-dark); }
.lng-badge:not(.got) { opacity: .55; }

/* ---------- level-up celebration ---------- */
.lvl-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, rgba(127,119,221,.96), rgba(60,52,137,.98)); }
.lvl-card { position: relative; z-index: 2; text-align: center; color: #fff; max-width: 360px; animation: lng-pop .35s ease; }
.lvl-rings { position: absolute; top: 48px; left: 50%; width: 0; height: 0; }
.lvl-rings span { position: absolute; left: 0; top: 0; width: 96px; height: 96px; margin: -48px 0 0 -48px;
  border: 2px solid rgba(255,255,255,.55); border-radius: 50%; animation: lvl-ring 2.1s ease-out infinite; }
.lvl-rings span:nth-child(2) { animation-delay: .7s; }
.lvl-rings span:nth-child(3) { animation-delay: 1.4s; }
@keyframes lvl-ring { 0% { transform: scale(.4); opacity: .85; } 100% { transform: scale(2.8); opacity: 0; } }
.lvl-burst { width: 96px; height: 96px; margin: 0 auto 18px; border-radius: 50%; position: relative; z-index: 2;
  background: linear-gradient(160deg, #FAEEDA, #5DCAA5); display: flex; align-items: center; justify-content: center;
  font-size: 50px; color: var(--brand-dark); box-shadow: 0 16px 44px rgba(0,0,0,.32);
  animation: lng-bob 2.4s ease-in-out infinite; }
.lvl-kicker { font-family: -apple-system, sans-serif; font-weight: 800; letter-spacing: .22em; font-size: 14px;
  color: #FAEEDA; margin-bottom: 6px; }
.lvl-text { font-family: -apple-system, sans-serif; font-weight: 800; font-size: 30px; line-height: 1.15; margin-bottom: 10px; }
.lvl-sub { font-size: 15px; color: rgba(255,255,255,.85); margin: 0 auto 26px; max-width: 280px; }
.lvl-go { background: #fff; color: var(--brand-dark); max-width: 260px; margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.lvl-go:active { background: #f1f0fb; }

/* ---------- daily "Coach says" overlay (full-screen, colour-coded by advice) ---------- */
.coach-overlay { position: fixed; inset: 0; z-index: 62; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; color: #fff;
  padding: 32px 26px calc(32px + env(safe-area-inset-bottom)); overflow: hidden; cursor: pointer;
  opacity: 0; transition: opacity .35s ease, background .5s ease;
  background: linear-gradient(160deg, #534AB7, #7F77DD); }   /* default; mood class overrides */
.coach-overlay.show { opacity: 1; }
/* mood gradients — colour encodes the kind of advice */
.coach-overlay.mood-celebrate { background: linear-gradient(160deg, #BA7517, #E24B4A); }
.coach-overlay.mood-levelup   { background: linear-gradient(160deg, #7F77DD, #534AB7); }
.coach-overlay.mood-praise    { background: linear-gradient(160deg, #1D9E75, #5DCAA5); }
.coach-overlay.mood-welcome   { background: linear-gradient(160deg, #534AB7, #7F77DD); }
.coach-overlay.mood-return    { background: linear-gradient(160deg, #1D9E75, #378ADD); }
.coach-overlay.mood-slow      { background: linear-gradient(160deg, #BA7517, #EF9F27); }
.coach-overlay.mood-tip       { background: linear-gradient(160deg, #378ADD, #185FA5); }
.coach-overlay.mood-cheer     { background: linear-gradient(160deg, #D85A30, #F0997B); }
.coach-rings { position: absolute; top: 24%; left: 50%; width: 0; height: 0; }
.coach-rings span { position: absolute; left: 0; top: 0; width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border: 2px solid rgba(255,255,255,.5); border-radius: 50%; animation: lvl-ring 2.4s ease-out infinite; }
.coach-rings span:nth-child(2) { animation-delay: .8s; }
.coach-rings span:nth-child(3) { animation-delay: 1.6s; }
.coach-icon { width: 92px; height: 92px; border-radius: 50%; background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; margin-bottom: 22px; position: relative; z-index: 2;
  animation: lng-bob 2.6s ease-in-out infinite; }
.coach-icon i { font-size: 46px; color: #fff; }
.coach-label { position: relative; z-index: 2; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  font-size: 13px; opacity: .9; margin-bottom: 12px; }
.coach-streak { position: relative; z-index: 2; font-weight: 800; font-size: 52px; line-height: 1; margin-bottom: 6px;
  font-variant-numeric: tabular-nums; }
.coach-msg { position: relative; z-index: 2; font-weight: 700; font-size: 21px; line-height: 1.45;
  max-width: 290px; margin: 0 auto 32px; animation: lng-pop .4s ease; }
.coach-go { background: #fff; color: var(--brand-dark); max-width: 260px; margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); position: relative; z-index: 2; }
.coach-go:active { background: #f1f0fb; }
.coach-tap { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom)); left: 0; right: 0;
  font-size: 11px; opacity: .7; }

/* ---------- leaderboard deadline countdown ---------- */
.lng-deadline { background: linear-gradient(135deg, #E24B4A, #BA7517); color: #fff; border-radius: 18px;
  padding: 14px 16px; margin-bottom: 14px; text-align: center; box-shadow: 0 10px 26px rgba(226,75,74,.35); }
.lng-deadline.closed { background: linear-gradient(135deg, #1D9E75, #0F6E56); box-shadow: 0 10px 26px rgba(29,158,117,.32); }
.dl-top { font-size: 14px; font-weight: 700; }
.dl-top i { vertical-align: -2px; margin-right: 2px; }
.dl-top b { font-weight: 800; }
.dl-sub { font-size: 13px; opacity: .92; margin-top: 4px; }
.dl-grid { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.dl-box { background: rgba(255,255,255,.18); border-radius: 12px; padding: 8px 0; min-width: 58px; }
.dl-num { display: block; font-size: 24px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.dl-lbl { display: block; font-size: 11px; opacity: .9; margin-top: 3px; letter-spacing: .5px; }

/* ---------- daily check-in streak ---------- */
.lng-streak-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.16);
  border-radius: 999px; padding: 5px 13px; font-weight: 700; font-size: 14px; }
.lng-streak-chip i { color: #FAC775; font-size: 15px; }
.checkin-toast { position: fixed; top: 14px; left: 50%; transform: translate(-50%, -140%); z-index: 70;
  background: linear-gradient(135deg, #BA7517, #E24B4A); color: #fff; padding: 12px 20px; border-radius: 999px;
  font-weight: 700; font-size: 15px; box-shadow: 0 12px 30px rgba(0,0,0,.3); white-space: nowrap; opacity: 0;
  transition: transform .4s cubic-bezier(.2,.8,.3,1), opacity .4s; }
.checkin-toast i { color: #FAEEDA; vertical-align: -1px; }
.checkin-toast b { font-weight: 800; }
.checkin-toast.show { transform: translate(-50%, 0); opacity: 1; }
@keyframes lng-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.lng-hi { font-size: 14px; opacity: .9; margin: 0; }
.lng-name { font-size: 30px; line-height: 1.1; margin: 0 0 10px; letter-spacing: .5px; }
.lng-level { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.lng-band-pill { background: rgba(255,255,255,.22); border-radius: 999px; padding: 5px 14px;
  font-weight: 700; font-size: 15px; }
.lng-band-pill i { font-size: 15px; vertical-align: -2px; }
.lng-rung { font-size: 13px; opacity: .9; }

.lng-ladder { display: flex; justify-content: space-between; gap: 4px; margin-top: 16px; }
.lng-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lng-step-dot { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.3);
  border: 2px solid rgba(255,255,255,.4); }
.lng-step.done .lng-step-dot { background: var(--good); border-color: var(--good); }
.lng-step.here .lng-step-dot { background: #5DCAA5; border-color: #fff; transform: scale(1.4);
  box-shadow: 0 0 0 4px rgba(93,202,165,.5); animation: lng-pulse 1.3s ease-in-out infinite; }
@keyframes lng-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(93,202,165,.55); } 50% { box-shadow: 0 0 0 10px rgba(93,202,165,0); } }
.lng-step-lbl { font-size: 9px; opacity: .85; white-space: nowrap; }
.lng-step.here .lng-step-lbl { font-weight: 700; opacity: 1; }

.lng-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.lng-stat { background: var(--card); border-radius: 16px; padding: 12px 6px; text-align: center;
  box-shadow: 0 4px 14px rgba(30,41,59,.06); }
.lng-stat-ic { width: 34px; height: 34px; margin: 0 auto 5px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 18px; }
.lng-stat-ic.points { background: var(--brand-bg); color: var(--brand); }
.lng-stat-ic.stars  { background: var(--good-bg); color: var(--good-dark); }
.lng-stat-ic.fluent { background: var(--warn-bg); color: var(--warn); }
.lng-stat-ic.streak { background: var(--bad-bg); color: var(--bad); }
.lng-stat-val { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1; }
.lng-stat-lbl { font-size: 11px; color: var(--soft); margin-top: 3px; }

.lng-card { background: var(--card); border-radius: 18px; padding: 14px 16px; margin-bottom: 14px;
  box-shadow: 0 4px 14px rgba(30,41,59,.06); }
.lng-card-head { display: flex; justify-content: space-between; align-items: center;
  font-weight: 700; color: var(--brand); font-size: 15px; margin-bottom: 8px; }
.lng-card-head i { vertical-align: -2px; }
.lng-myrank { font-size: 12px; color: var(--soft); font-weight: 600; }
.lng-leader-rows { display: flex; flex-direction: column; gap: 2px; }
.lng-school-rank { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line, #eef0f6);
  font-size: 13px; color: var(--soft); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.lng-school-rank:empty { display: none; }
.lng-school-rank b { color: var(--brand, #534AB7); }
.lng-school-rank i { font-size: 15px; }
.lng-lb-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; font-size: 14px; }
.lng-lb-row.me { background: var(--brand-bg); font-weight: 700; color: var(--brand-dark); }
.lng-lb-code { flex: 1; }
.lng-lb-pts { color: var(--soft); font-size: 13px; }
.lng-lb-row.me .lng-lb-pts { color: var(--brand); }
.lng-rankn { width: 22px; text-align: center; color: var(--soft); font-size: 13px; font-weight: 600; }
.lng-medal { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 800; color: #fff; }
.lng-medal.m1 { background: #E9B949; } .lng-medal.m2 { background: #AEB6C2; } .lng-medal.m3 { background: #C58A4B; }
.lng-empty { color: var(--soft); font-size: 14px; text-align: center; padding: 8px 0; }
.lng-start { font-size: 19px; padding: 16px; box-shadow: 0 8px 20px rgba(83,74,183,.3); }
.lng-foot-hint { text-align: center; color: var(--soft); font-size: 13px; margin-top: 10px; }

/* ---------- spinner ---------- */
.spinner {
  width: 46px; height: 46px; margin: 40px auto 16px;
  border: 5px solid var(--line); border-top-color: var(--brand);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- teacher dashboard ---------- */
body.dash { background: #f8f9fc; font-size: 15px; margin: 0; }
/* larger-text mode for readability (toggle in the top bar; persisted) */
body.dash.font-lg .d-shell { zoom: 1.16; }
.d-shell { display: flex; flex-direction: column; min-height: 100vh; }

/* ---------- left sidebar navigation (drawer below 1024px) ---------- */
.d-logo { font-size: 16px; font-weight: 700; color: var(--brand); display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.d-logo i { font-size: 18px; }
.d-mobilebar { display: none; }
.d-side { position: fixed; left: 0; top: 0; bottom: 0; width: 232px; z-index: 90;
  background: #fff; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 18px 14px 14px; overflow-y: auto; }
.d-side-brand { padding: 2px 10px 10px; }
.d-side-school { font-size: 12px; color: var(--soft); margin-top: 5px; line-height: 1.4; font-weight: 600;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.d-side-sec { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--soft);
  font-weight: 700; margin: 14px 10px 6px; }
.d-tabs { display: flex; flex-direction: column; gap: 2px; }
/* Administration group: a wrapper inside the nav (so applyRole can show/hide the
   whole section at once) — mirror the nav's own column+gap so spacing stays even.
   .hidden still wins: it is display:none !important. */
#adminSideGroup { display: flex; flex-direction: column; gap: 2px; }
.d-tab { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
  font-size: 14px; font-weight: 600; color: var(--soft); background: none; border: 0;
  border-radius: 10px; cursor: pointer; text-align: left; transition: background .12s, color .12s; }
.d-tab:hover { background: #f4f5fa; color: var(--ink); }
.d-tab.active { background: var(--brand); color: #fff; }
.d-tab i { font-size: 17px; flex-shrink: 0; }
.d-side-user { margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 12px 10px 8px; }
.d-side-avatar { width: 30px; height: 30px; border-radius: 50%; background: #eceafd; color: var(--brand);
  font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.d-side-uname { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.d-side-urole { font-size: 11px; color: var(--soft); }
.d-side-foot { padding: 10px 4px 0; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.d-logout { font-size: 13.5px; font-weight: 600; color: var(--soft); background: none; border: 0;
  cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px; }
.d-logout:hover { color: var(--bad); background: #fdf3f3; }
.d-logout i { font-size: 15px; }
.d-side-scrim { display: none; }
.d-burger { display: none; }

/* main content sits beside the fixed sidebar */
.d-main { margin-left: 232px; padding: 26px 30px; width: auto; }
.d-pane { max-width: 1160px; margin: 0 auto; }
.d-pane-header { margin-bottom: 20px; }
.d-pane-header h1 { font-size: 22px; font-weight: 600; color: var(--ink); margin: 0; }
.d-pane-sub { font-size: 14px; color: var(--soft); margin-top: 2px; display: block; }

/* metrics row */
.d-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.d-metric { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 4px 14px rgba(30,41,59,.05); min-width: 0; }
.d-metric-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.d-metric-chip { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; font-size: 18px; background: #eef0f6; color: var(--soft); flex-shrink: 0; }
.d-metric-chip.good { background: var(--good-bg); color: var(--good); }
.d-metric-chip.warn { background: var(--warn-bg); color: var(--warn); }
.d-metric-chip.bad { background: var(--bad-bg); color: var(--bad); }
/* legacy icon (kept for safety) */
.d-metric-icon { font-size: 18px; color: var(--soft); margin-bottom: 4px; }
.d-metric-label { font-size: 12.5px; color: var(--soft); text-transform: uppercase; letter-spacing: .4px; }
.d-metric-val { font-size: 26px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.d-metric-val.good { color: var(--good); }
.d-metric-val.warn { color: var(--warn); }
.d-metric-val.bad { color: var(--bad); }
.d-metric-sub { font-size: 12px; color: var(--soft); margin-top: 1px; }
.d-metric-sub.good { color: var(--good-dark); }
.d-metric-sub.warn { color: var(--warn-dark); }
.d-metric-sub.bad { color: var(--bad-dark); }

/* ---------- teacher login ---------- */
.tch-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
  position: relative; overflow: hidden; background: linear-gradient(160deg, #3C3489, #534AB7 55%, #7F77DD); }
.tch-bg { position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 42px 42px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 75%); }
.tch-card { position: relative; z-index: 2; background: #fff; border-radius: 22px; padding: 40px 32px 30px;
  width: 100%; max-width: 380px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.tch-logo { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 16px;
  background: linear-gradient(160deg, #7F77DD, #534AB7); display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 32px; box-shadow: 0 10px 24px rgba(83,74,183,.35); }
.tch-title { font-size: 26px; font-weight: 800; color: var(--brand-dark); margin: 0; }
.tch-sub { color: var(--soft); font-size: 14px; margin: 4px 0 24px; }
.tch-field { position: relative; margin-bottom: 12px; }
.tch-field i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--brand-light); font-size: 18px; }
#login .tch-card input { width: 100%; padding: 13px 14px 13px 44px; font-size: 15px; text-align: left;
  border: 1.5px solid var(--line); border-radius: 12px; background: #f8f9fc; color: var(--ink); outline: none; margin: 0; }
#login .tch-card input:focus { border-color: var(--brand); background: #fff; }
.tch-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px;
  font-size: 16px; font-weight: 700; color: #fff; border: 0; border-radius: 12px; cursor: pointer; margin-top: 6px;
  background: linear-gradient(135deg, #534AB7, #7F77DD); box-shadow: 0 8px 22px rgba(83,74,183,.35); }
.tch-btn:active { transform: scale(.98); }
.tch-btn:disabled { opacity: .7; }
.tch-msg { color: var(--bad); min-height: 22px; margin-top: 12px; font-weight: 600; font-size: 14px; }

/* cards */
.d-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; }
.d-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.d-card-title { font-size: 15px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.d-card-title i { font-size: 16px; color: var(--soft); }
.d-card-summary { cursor: pointer; font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.d-card-summary i { font-size: 16px; color: var(--soft); }
.d-link { font-size: 14px; color: var(--brand); background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; gap: 3px; font-weight: 500; }
.d-link:hover { text-decoration: underline; }
.d-link i { font-size: 13px; }
.d-grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
@media (min-width: 800px) { .d-grid-2 { grid-template-columns: 1fr 1fr; } }

/* tables */
.d-table { width: 100%; border-collapse: collapse; }
.d-table thead th { font-size: 13px; letter-spacing: .1px; color: #475569;
  font-weight: 700; padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line); background: none; }
.d-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #f1f5f9; font-size: 14px; color: var(--ink); }
.d-table tbody tr:last-child td { border-bottom: 0; }
.d-clickable { cursor: pointer; transition: background .1s; }
.d-clickable:hover td { background: #f8f9fc; }

/* pupil code chip */
.d-pupil-code { font-weight: 600; color: var(--ink); }

/* band pill */
.d-band-pill { display: inline-block; padding: 2px 10px; border-radius: 6px; font-size: 12px; font-weight: 600;
  background: var(--brand-bg); color: var(--brand); }

/* flags */
.d-flag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 6px;
  font-size: 12px; font-weight: 600; }
.d-flag.good { background: var(--good-bg); color: var(--good-dark); }
.d-flag.warn { background: var(--warn-bg); color: var(--warn-dark); }
.d-flag.bad { background: var(--bad-bg); color: var(--bad-dark); }
.d-flag.brand { background: var(--brand-bg); color: var(--brand); }
.d-flag i { font-size: 12px; }

/* detail page */
.d-detail-header { margin-bottom: 16px; }
.d-detail-header h2 { font-size: 20px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.d-detail-sep { margin-left: 10px; font-size: 13px; color: var(--soft); }

/* bar chart */
.d-bars { display: flex; gap: 8px; height: 140px; align-items: flex-end; padding: 8px 0; }
.d-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.d-bar-val { font-size: 12px; font-weight: 600; color: var(--ink); }
.d-bar-track { width: 100%; max-width: 48px; height: 90px; background: #f1f5f9; border-radius: 6px;
  display: flex; align-items: flex-end; overflow: hidden; }
.d-bar-fill { width: 100%; background: var(--brand); border-radius: 6px; transition: height .4s ease; min-height: 2px; }
.d-bar-label { font-size: 10px; color: var(--soft); text-align: center; white-space: nowrap; }

/* misconception bars */
.d-mis-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.d-mis-label { width: 140px; font-size: 12px; color: var(--soft); flex-shrink: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.d-mis-track { flex: 1; height: 8px; background: #f1f5f9; border-radius: 4px; overflow: hidden; }
.d-mis-fill { height: 100%; background: var(--brand); border-radius: 4px; transition: width .3s ease; }
.d-mis-count { font-size: 12px; font-weight: 600; color: var(--ink); width: 24px; text-align: right; }

/* alerts */
.d-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px;
  border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.d-alert.warn { background: var(--warn-bg); color: var(--warn-dark); }
.d-alert i { font-size: 18px; flex-shrink: 0; margin-top: 1px; }

/* sub tabs (bank) */
.d-sub-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.d-sub-tab { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; font-weight: 500; font-size: 14px; color: var(--soft);
  display: flex; align-items: center; gap: 4px; transition: all .15s; }
.d-sub-tab i { font-size: 14px; }
.d-sub-tab:hover { border-color: var(--brand); color: var(--brand); }
.d-sub-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* bulk card */
.d-bulk-card { border-left: 3px solid var(--good); border-radius: 0 12px 12px 0; }
.d-bulk-card i { font-size: 16px; vertical-align: -2px; }

/* buttons */
.d-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px;
  min-height: 40px; box-sizing: border-box; border-radius: 8px; white-space: nowrap;
  border: 1px solid var(--line); cursor: pointer; font-weight: 600; font-size: 14px;
  background: #fff; color: var(--ink); transition: all .12s; }
.d-btn:hover { border-color: var(--brand); }
.d-btn i { font-size: 14px; }
.d-btn.brand { background: var(--brand); color: #fff; border-color: var(--brand); }
.d-btn.brand:hover { background: var(--brand-dark); }
.d-btn.green { background: var(--good); color: #fff; border-color: var(--good); }
.d-btn.green:hover { background: var(--good-dark); }
.d-btn.bad { background: var(--bad); color: #fff; border-color: var(--bad); }
.d-btn.bad:hover { background: var(--bad-dark); }
.d-btn.outline { background: #fff; color: var(--ink); }
.d-btn.outline:hover { background: #f8f9fc; }
a.d-btn { text-decoration: none; }

/* item cards */
.d-item-card { }
.d-item-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.d-item-passage { font-size: 14px; line-height: 1.6; color: var(--soft); margin: 8px 0; max-height: 80px; overflow: hidden; }
.d-item-stem { font-weight: 600; font-size: 15px; color: var(--brand); white-space: pre-line; margin: 8px 0; }
.d-item-options { margin: 6px 0 6px 22px; font-size: 14px; }
.d-item-options li { padding: 2px 0; }
.d-item-options li.correct { color: var(--good); font-weight: 600; }
.d-item-actions { display: flex; gap: 8px; margin-top: 10px; }

/* form elements — one control height (40px) shared by inputs, selects and buttons.
   Fields sit inside labelled .d-f wrappers (visible label above each control). */
.d-add-pupil { display: flex; gap: 12px 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 12px; }
.d-add-pupil > .d-f { flex: 1 1 150px; min-width: 130px; max-width: 230px; }
.d-add-pupil input, .d-add-pupil select { width: 100%; min-width: 0; max-width: none;
  margin: 0; height: 40px; box-sizing: border-box; padding: 0 12px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.d-add-pupil select { cursor: pointer; }
.d-add-pupil .d-btn { width: 100%; min-height: 40px; }
.d-add-pupil input:focus, .d-add-pupil select:focus { border-color: var(--brand); outline: none; }
.d-file-input { font-size: 13px; margin: 6px 0; }

/* bulk entry: textarea + a side column of controls, plus the .xlsx tools row */
.d-bulk-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.d-bulk-tools .d-file-name { font-size: 13px; color: var(--soft); }
.d-upload-btn { position: relative; overflow: hidden; }
.d-upload-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.d-bulk-entry { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.d-bulk-entry textarea { flex: 1 1 260px; min-width: 240px; }
.d-bulk-side { display: flex; flex-direction: column; gap: 8px; min-width: 190px; }
.d-bulk-side select { height: 40px; box-sizing: border-box; padding: 0 12px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.d-bulk-side select:focus { border-color: var(--brand); outline: none; }
.d-checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 10px 0; cursor: pointer; }
.d-checkbox input { width: auto; margin: 0; }
.d-code { background: #f1f5f9; padding: 10px 14px; border-radius: 8px; font-size: 13px;
  overflow-x: auto; font-family: 'SF Mono', Menlo, monospace; border: 1px solid var(--line); }
.d-export-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.d-export-btns a { text-decoration: none; }

/* msgs */
.d-msg { font-size: 14px; min-height: 20px; margin-top: 8px; }
.d-msg.ok { color: var(--good); }
.d-msg.err { color: var(--bad); }
.d-text-muted { color: var(--soft); font-size: 14px; }

/* forgot-password link on the login card */
.tch-forgot { display: block; margin: 12px auto 0; background: none; border: 0; cursor: pointer;
  color: var(--brand); font-size: 14px; font-weight: 600; }
.tch-forgot:hover { text-decoration: underline; }

/* A+ larger-text toggle in the top bar */
.d-font-toggle { font-size: 15px; font-weight: 700; color: var(--soft); background: none;
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; cursor: pointer;
  display: flex; align-items: baseline; gap: 1px; flex-shrink: 0; transition: all .15s; }
.d-font-toggle .d-font-plus { font-size: 11px; }
.d-font-toggle:hover { border-color: var(--brand); color: var(--brand); }
body.dash.font-lg .d-font-toggle { background: var(--brand); border-color: var(--brand); color: #fff; }

/* one shared width for single-column panes (Import, Settings) — no more ragged boxes */
.d-narrow { max-width: 760px; }

/* bulk-approval card aligned with normal card headers */
.d-bulk-card b { font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.d-bulk-card .d-btn { margin-top: 10px; }

/* manage classes & pupils */
.d-class-row { display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.d-class-row:last-child { border-bottom: 0; }
.d-class-count { margin-left: auto; color: var(--soft); font-size: 13px; white-space: nowrap; }
#bulkLines { padding: 10px 12px; font-size: 14px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; font-family: 'SF Mono', Menlo, monospace; resize: vertical; }
#bulkLines:focus { border-color: var(--brand); outline: none; }
.d-btn.small { padding: 4px 10px; min-height: 32px; font-size: 13px; }
.d-status-pill { display: inline-block; padding: 2px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.d-status-pill.active { background: var(--good-bg); color: var(--good-dark); }
.d-status-pill.inactive { background: #eef0f6; color: var(--soft); }

/* admin forms (schools / teachers) */
.d-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: center; }
.d-form-grid input, .d-form-grid select { width: 100%; margin: 0; height: 40px; box-sizing: border-box;
  padding: 0 12px; font-size: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.d-form-grid select { cursor: pointer; }
.d-form-grid .d-btn { min-height: 40px; }
.d-form-grid input:focus, .d-form-grid select:focus { border-color: var(--brand); outline: none; }
.d-role-pill { display: inline-block; padding: 2px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.d-role-pill.admin { background: var(--brand-bg); color: var(--brand); }
.d-role-pill.teacher { background: var(--good-bg); color: var(--good-dark); }
#classesTable select, #classesTable input { padding: 5px 8px; font-size: 13px; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; margin: 0; }
#classesTable input[type=number] { width: 64px; }
.d-steps { margin: 4px 0 0 18px; font-size: 14px; color: var(--soft); line-height: 1.9; }
.d-steps li { margin: 0; }
.d-steps b { color: var(--ink); }

/* manage toolbar: search + bulk actions */
.d-manage-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0 20px 12px; }
.d-search { position: relative; flex: 1; min-width: 200px; max-width: 340px; }
.d-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--soft); font-size: 16px; }
.d-search input { width: 100%; height: 40px; box-sizing: border-box; margin: 0; padding: 0 12px 0 38px;
  text-align: left; font-size: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.d-search input:focus { border-color: var(--brand); outline: none; }
.d-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* class filter sits between the search box and the buttons, so it takes the same
   40px height / 8px radius as both — without this it falls back to the native
   control, which is shorter and visibly out of line with its neighbours. */
.d-manage-toolbar select { height: 40px; box-sizing: border-box; margin: 0; padding: 0 12px;
  max-width: 220px; font-size: 14px; color: var(--ink); cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.d-manage-toolbar select:hover { border-color: var(--brand); }
.d-manage-toolbar select:focus { border-color: var(--brand); outline: none; }

/* row-action buttons: uniform width so every row lines up */
#manageTable .d-row-actions { display: flex; gap: 6px; justify-content: flex-end; }
#manageTable .d-btn.small { min-width: 104px; justify-content: center; }
#manageTable .d-btn.icon { min-width: 0; width: 34px; padding: 5px 0; justify-content: center; }
#manageTable .d-btn.icon i { font-size: 15px; }
.d-check { width: 16px; height: 16px; cursor: pointer; accent-color: var(--brand); margin: 0; vertical-align: middle; }

/* edit modal (pupil info) */
.d-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.d-modal.hidden { display: none; }
.d-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); backdrop-filter: blur(1px); }
.d-modal-card { position: relative; background: #fff; border-radius: 14px; width: 100%; max-width: 460px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28); max-height: 90vh; display: flex; flex-direction: column;
  animation: pmIn .16s ease; }
@keyframes pmIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.d-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.d-modal-head h3 { margin: 0; font-size: 17px; }
.d-modal-x { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--soft); cursor: pointer; padding: 0 4px; }
.d-modal-x:hover { color: var(--ink); }
.d-modal-body { padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.d-field { display: flex; flex-direction: column; gap: 6px; }
.d-field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.d-field .d-field-hint { font-weight: 400; color: var(--soft); }
.d-field input, .d-field select { height: 40px; box-sizing: border-box; padding: 0 12px; font-size: 14px; margin: 0;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; width: 100%; }
.d-field select { cursor: pointer; }
.d-field input:focus, .d-field select:focus { border-color: var(--brand); outline: none; }
.d-field input[readonly] { background: #f5f6fa; color: var(--soft); cursor: default; }
.d-modal-foot { padding: 14px 20px 18px; border-top: 1px solid var(--line); }
.d-modal-foot .d-msg { margin: 0 0 10px; min-height: 0; }
.d-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
/* the bulk popup holds a textarea, upload tools and a results table — give it room */
.d-modal-card.wide { max-width: 640px; }

/* Pupils › Manage: the add actions are buttons that open the popups above the table */
.d-manage-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }

/* Boot cover: shown on top while the initial auth check runs, so a logged-in reload
   never flashes the login screen (or a bare dashboard) before data arrives. */
.d-boot { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  background: var(--bg, #f5f7fb); }
.d-boot.hidden { display: none; }
.d-boot-spin { width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--line, #e2e8f0); border-top-color: var(--brand, #534AB7);
  animation: d-boot-spin .7s linear infinite; }
@keyframes d-boot-spin { to { transform: rotate(360deg); } }
.d-modal-body textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; }
.d-modal-body textarea:focus { border-color: var(--brand); outline: none; }

/* toast */
.d-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 10px; font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .28); opacity: 0; pointer-events: none; transition: all .2s ease; z-index: 300;
  display: flex; align-items: center; gap: 8px; }
.d-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.d-toast.err { background: var(--bad); }

/* ---------- labelled form fields (designer rule: visible label, never placeholder-only) ---------- */
.d-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.d-f-lbl { font-size: 12.5px; font-weight: 600; color: #475569; line-height: 1.2; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.d-f-lbl em { font-style: normal; font-weight: 400; color: var(--soft); }
.d-f-lbl .req { color: var(--bad); font-weight: 700; }
.d-f-err { font-size: 12px; color: var(--bad); line-height: 1.35; }
.d-f-err:empty { display: none; }
.d-f-hint { font-size: 12px; color: var(--good-dark); line-height: 1.35; }
.d-f-hint:empty { display: none; }
.dash .d-f input.err, .dash .d-f select.err { border-color: var(--bad); }

/* ---------- register-teacher form: fields sized to purpose, on a 12-col grid ---------- */
.d-reg-grid { display: grid; gap: 12px 10px; grid-template-columns: repeat(12, 1fr); align-items: start; }
.dash .d-reg-grid input:not([type="checkbox"]):not([type="file"]):not([type="search"]),
.dash .d-reg-grid select {
  width: 100%; height: 40px; box-sizing: border-box; margin: 0; padding: 0 12px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; text-align: left; }
.d-reg-grid select { cursor: pointer; }
.dash .d-reg-grid input:focus, .dash .d-reg-grid select:focus { border-color: var(--brand); outline: none; }
.d-reg-grid .d-btn { width: 100%; min-height: 40px; }
.d-reg-grid > * { grid-column: span 12; }                 /* stacked on mobile */
@media (min-width: 760px) {
  .d-reg-grid .rg-user   { grid-column: span 4; }
  .d-reg-grid .rg-name   { grid-column: span 4; }
  .d-reg-grid .rg-delima { grid-column: span 4; }
  .d-reg-grid .rg-code   { grid-column: span 3; }
  .d-reg-grid .rg-school { grid-column: span 6; }
  .d-reg-grid .rg-role   { grid-column: span 3; }
  .d-reg-grid .rg-pass   { grid-column: span 4; }
  .d-reg-grid .rg-add    { grid-column: 9 / span 4; }      /* action flush right */
  /* generic spans for other forms on the same grid */
  .d-reg-grid .gs-2 { grid-column: span 2; }
  .d-reg-grid .gs-3 { grid-column: span 3; }
  .d-reg-grid .gs-4 { grid-column: span 4; }
  .d-reg-grid .gs-5 { grid-column: span 5; }
  .d-reg-grid .gs-6 { grid-column: span 6; }
  .d-reg-grid .gs-end-3 { grid-column: 10 / span 3; }
  .d-reg-grid .gs-end-4 { grid-column: 9 / span 4; }
}
/* Inside a popup, registration forms read as a single column — one field per line
   is faster to scan and complete than a multi-column grid (form-usability best
   practice), and the eye follows one clear vertical path. Overrides the span
   utilities above for the school/teacher popups. */
.d-modal .d-reg-grid { grid-template-columns: 1fr; gap: 14px; }
.d-modal .d-reg-grid > * { grid-column: 1 / -1 !important; }

/* ---------- compact section help (one-liner + expandable details) ---------- */
.d-help-btn { background: none; border: 0; cursor: pointer; color: var(--soft); font-size: 17px;
  padding: 2px 4px; line-height: 1; vertical-align: -2px; }
.d-help-btn:hover { color: var(--brand); }
.d-help-body { margin-top: 10px; padding: 12px 14px; background: #f8f9fc; border: 1px solid var(--line);
  border-radius: 10px; font-size: 13.5px; color: var(--soft); line-height: 1.6; }

/* ---------- row overflow menu (keeps destructive actions out of the way) ---------- */
.d-menu { position: relative; display: inline-block; }
.d-menu-list { position: absolute; right: 0; top: calc(100% + 4px); background: #fff; z-index: 60;
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, .14);
  min-width: 170px; padding: 5px; display: none; text-align: left; }
.d-menu.open .d-menu-list { display: block; }
.d-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px;
  border: 0; background: none; border-radius: 7px; font-size: 13.5px; font-weight: 600;
  color: var(--ink); cursor: pointer; white-space: nowrap; }
.d-menu-item:hover { background: #f8f9fc; }
.d-menu-item.danger { color: var(--bad); }
.d-menu-item i { font-size: 15px; }

/* view-mode controls in editable tables: look like text until Edit is pressed.
   The :not() chain matches the uniform-table-control rule's specificity so the
   transparent border actually wins. */
.dash .d-table input.plain:not([type="checkbox"]):not([type="file"]):not([type="search"]),
.dash .d-table select.plain {
  border-color: transparent; background: transparent; pointer-events: none;
  appearance: none; -webkit-appearance: none; padding-left: 2px; }
.dash .d-table select.plain:disabled { color: var(--ink); opacity: 1; -webkit-text-fill-color: var(--ink); }

/* ---------- Results tab ---------- */
.res-crumb { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; font-size: 14px; flex-wrap: wrap; }
.res-crumb a { color: var(--brand); font-weight: 600; text-decoration: none; cursor: pointer; }
.res-crumb a:hover { text-decoration: underline; }
.res-crumb .sep { color: var(--soft); }
.res-crumb .here { font-weight: 700; color: var(--ink); }
.res-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.res-stat { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.res-stat-val { font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.res-stat-val .unit { font-size: 14px; font-weight: 600; color: var(--soft); }
.res-stat-lbl { font-size: 12.5px; color: var(--soft); margin-top: 4px; }
.res-stat i { color: var(--brand); font-size: 15px; vertical-align: -2px; margin-right: 4px; }

/* Results search + drill-down dropdown */
.res-search-wrap { position: relative; margin: 0 0 16px; }
.res-drop { position: absolute; top: calc(100% + 4px); left: 0; width: min(420px, 100%); background: #fff; z-index: 70;
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 34px rgba(15, 23, 42, .14); padding: 6px; }
.res-hit { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 0; background: none;
  border-radius: 8px; font-size: 14px; color: var(--ink); cursor: pointer; text-align: left; }
.res-hit:hover { background: #f8f9fc; }
.res-hit i { color: var(--brand); font-size: 15px; flex-shrink: 0; }
.res-hit em { font-style: normal; color: var(--soft); font-size: 12.5px; margin-left: auto; padding-left: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.res-hit-none { padding: 10px 12px; font-size: 13.5px; color: var(--soft); }

/* Results charts: thin brand bars, rounded data end, direct value labels */
.res-chart { margin-bottom: 16px; }
.rc-row { display: grid; grid-template-columns: minmax(90px, 180px) 1fr auto; gap: 10px; align-items: center; padding: 5px 0; }
.rc-click { cursor: pointer; }
.rc-click:hover .rc-lbl { color: var(--brand); }
.rc-lbl { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-track { height: 12px; background: #eef0f6; border-radius: 4px; overflow: hidden; }
.rc-fill { display: block; height: 100%; background: var(--brand); border-radius: 0 4px 4px 0; }
.rc-val { font-size: 13px; font-weight: 600; color: var(--ink); text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 44px; }
.rc-trend { display: flex; gap: 8px; align-items: flex-end; padding: 6px 2px 0; overflow-x: auto; }
.rc-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 34px; }
.rc-col-val { font-size: 11.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.rc-col-bar { height: 110px; width: 18px; background: #eef0f6; border-radius: 4px; display: flex; align-items: flex-end; overflow: hidden; }
.rc-col-fill { display: block; width: 100%; background: var(--brand); border-radius: 4px 4px 0 0; }
.rc-col-lbl { font-size: 11px; color: var(--soft); }
.rc-movers { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px;
  border-top: 1px solid #f1f5f9; padding-top: 10px; }
.rc-mover { font-size: 12.5px; color: var(--ink); display: inline-flex; align-items: center; gap: 5px; }
.rc-mover em { font-style: normal; color: var(--soft); }

/* school logo preview (My School) */
.d-logo-preview { width: 72px; height: 72px; border: 1px solid var(--line); border-radius: 12px;
  background: #f8f9fc; display: flex; align-items: center; justify-content: center; overflow: hidden;
  color: var(--soft); font-size: 22px; flex-shrink: 0; }
.d-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- A4 PDF sheet (converted by html2pdf) ----------
   Hidden with display:none and flipped to a normal in-flow block only while
   rendering: html2canvas returns a BLANK capture for position:fixed elements
   parked off-screen, but handles in-flow below-the-fold content fine. */
/* Full A4 width at 96dpi (210mm ≈ 794px) so html2pdf renders it edge-to-edge with no
   horizontal page margin; the side whitespace is this element's own padding. box-sizing
   keeps the padding inside the 794px so nothing overflows the page (which was clipping
   the 4th stat card and the last table column). */
.pdf-sheet { display: none; width: 794px; box-sizing: border-box; margin: 0 auto; background: #fff;
  padding: 6px 40px 10px;
  font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; color: #16233b; }
.pdf-sheet.rendering { display: block; }
.pdf-head { display: flex; align-items: center; gap: 16px; border-bottom: 3px solid #534AB7;
  padding: 4px 0 14px; margin-bottom: 16px; }
.pdf-logo { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; }
.pdf-school { font-size: 20px; font-weight: 700; }
.pdf-title { font-size: 14px; color: #534AB7; font-weight: 600; margin-top: 2px; }
.pdf-date { font-size: 11px; color: #64748b; margin-top: 2px; }
.pdf-stats { display: flex; gap: 10px; margin: 0 0 14px; }
.pdf-stat { flex: 1; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; }
.pdf-stat b { display: block; font-size: 20px; }
.pdf-stat span { font-size: 11px; color: #64748b; }
.pdf-sheet h3 { font-size: 13px; margin: 14px 0 6px; color: #16233b; }
.pdf-sheet table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.pdf-sheet th { text-align: left; background: #f1f5f9; padding: 6px 8px; border: 1px solid #e2e8f0;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; color: #475569; }
.pdf-sheet td { padding: 6px 8px; border: 1px solid #e2e8f0; }
.pdf-foot { margin-top: 16px; padding-top: 8px; border-top: 1px solid #e2e8f0;
  font-size: 10px; color: #94a3b8; display: flex; justify-content: space-between; }
/* charts dropped into the report: keep each on one page, side-by-side pairs */
.pdf-sheet .res-chart, .pdf-sheet .d-card { break-inside: avoid; page-break-inside: avoid;
  border: 1px solid #e2e8f0; box-shadow: none; }
.pdf-sheet .d-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.pdf-sheet .res-chart { margin-bottom: 10px; }

/* behavioral grid */
.d-beh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.d-beh-item { background: #f8f9fc; border-radius: 8px; padding: 10px 12px; }
.d-beh-label { display: block; font-size: 11px; color: var(--soft); text-transform: uppercase; letter-spacing: .3px; }
.d-beh-val { display: block; font-size: 18px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.d-beh-val.d-beh-bad { color: var(--bad); }
.d-beh-sub { display: block; font-size: 11px; color: var(--soft); }

/* responsive: the sidebar becomes a slide-in drawer, opened from a slim top bar */
@media (max-width: 1023px) {
  .d-mobilebar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 80;
    background: #fff; border-bottom: 1px solid var(--line); padding: 10px 14px; }
  .d-burger { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    background: none; border: 1px solid var(--line); border-radius: 8px; font-size: 20px;
    color: var(--ink); cursor: pointer; }
  .d-side { transform: translateX(-105%); transition: transform .2s ease; }
  .d-shell.side-open .d-side { transform: none; box-shadow: 0 12px 44px rgba(15, 23, 42, .28); }
  .d-side-scrim { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 85; }
  .d-shell.side-open .d-side-scrim { display: block; }
  .d-main { margin-left: 0; padding: 14px; }
}
@media (max-width: 768px) {
  .d-metrics { grid-template-columns: 1fr 1fr; gap: 10px; }
  .d-metric { padding: 14px; }
  .d-metric-val { font-size: 22px; }
  .d-pane-header h1 { font-size: 19px; }
  .d-card { padding: 14px; }
  .d-table thead th { padding: 8px; font-size: 10px; }
  .d-table td { padding: 8px; font-size: 12px; }
}

/* dashboard input overrides */
.dash input:not([type="checkbox"]):not([type="file"]):not([type="search"]) { text-align: left; font-size: 14px; padding: 10px 14px;
  border-radius: 8px; border-width: 1px; margin-bottom: 8px; }
.dash .login-card input { text-align: center; font-size: 18px; border-radius: 14px; border-width: 2px; margin-bottom: 12px; padding: 14px; }

/* Controls INSIDE data tables: one compact, uniform size. Without this, inputs
   inherit the tall default padding above while selects keep the browser default,
   so rows look ragged (mismatched shapes/heights). Placed after the normalizer
   on purpose — same specificity, later wins. */
.dash .d-table input:not([type="checkbox"]):not([type="file"]):not([type="search"]),
.dash .d-table select {
  height: 34px; box-sizing: border-box; padding: 0 10px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; margin: 0;
}
.dash .d-table select { cursor: pointer; }
.dash .d-table input:focus, .dash .d-table select:focus { border-color: var(--brand); outline: none; }

/* ---------- AI chat widget ---------- */
.d-chat-widget { position: fixed; bottom: 24px; right: 24px; z-index: 80; }
.d-chat-toggle {
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--brand), #7c6fe0); color: #fff; font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(83,74,183,.35); transition: transform .15s, box-shadow .15s;
}
.d-chat-toggle:hover { transform: scale(1.08); box-shadow: 0 12px 32px rgba(83,74,183,.45); }
.d-chat-toggle:active { transform: scale(.95); }

.d-chat-panel {
  position: fixed; bottom: 90px; right: 24px; width: 380px; max-height: 520px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 16px 48px rgba(30,41,59,.18); z-index: 80;
  display: flex; flex-direction: column; overflow: hidden;
  animation: d-chat-pop .2s ease;
}
@keyframes d-chat-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

.d-chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, var(--brand), #7c6fe0); color: #fff;
  border-radius: 16px 16px 0 0;
}
.d-chat-header-left { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.d-chat-header-left i { font-size: 18px; }
.d-chat-header-actions { display: flex; align-items: center; gap: 6px; }
.d-chat-hbtn { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,.18); border: 0;
  color: #fff; cursor: pointer; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px; }
.d-chat-hbtn i { font-size: 15px; }
.d-chat-hbtn:hover { background: rgba(255,255,255,.3); }
.d-chat-close { display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,.2); border: 0;
  color: #fff; cursor: pointer; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 8px; }
.d-chat-close:hover { background: rgba(255,255,255,.32); }

.d-chat-messages {
  flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px;
  min-height: 200px; max-height: 340px;
}
.d-chat-messages:empty::before {
  content: 'Ask me anything about your pupils!';
  color: var(--soft); font-size: 13px; text-align: center; margin: auto; padding: 20px;
}

.d-chat-bubble { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.55; word-wrap: break-word; }
.d-chat-bubble.user { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.d-chat-bubble.bot { align-self: flex-start; background: #f1f5f9; color: var(--ink); border-bottom-left-radius: 4px; }
.d-chat-bubble.bot .cb-src { font-size: 10px; color: var(--soft); margin-top: 6px; display: block; }
.d-chat-bubble .cb-link { color: var(--brand); font-weight: 600; cursor: pointer; text-decoration: underline; }
.d-chat-bubble .cb-link:hover { opacity: .8; }

.d-chat-typing { align-self: flex-start; padding: 10px 16px; background: #f1f5f9; border-radius: 14px; border-bottom-left-radius: 4px; }
.d-chat-typing span { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--soft); margin: 0 2px; animation: cb-dot .6s ease-in-out infinite; }
.d-chat-typing span:nth-child(2) { animation-delay: .15s; }
.d-chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes cb-dot { 0%,80%,100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }

.d-chat-suggestions { padding: 4px 16px 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.d-chat-suggestions:empty { display: none; }
.d-chat-sug {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; font-size: 12px; color: var(--brand);
  font-weight: 500; transition: all .12s; white-space: nowrap;
}
.d-chat-sug:hover { border-color: var(--brand); background: rgba(83,74,183,.06); }

.d-chat-input-row { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.d-chat-input-row input {
  flex: 1; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 13px; background: #f8f9fc; outline: none; margin: 0;
}
.d-chat-input-row input:focus { border-color: var(--brand); background: #fff; }
.d-chat-send {
  width: 38px; height: 38px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--brand); color: #fff; font-size: 16px;
  display: flex; align-items: center; justify-content: center; transition: background .12s; flex-shrink: 0;
}
.d-chat-send:disabled { background: #cbc8f0; cursor: default; }
.d-chat-send:not(:disabled):hover { background: #4a3fb0; }

@media (max-width: 768px) {
  /* fullscreen chat sheet — easy to read and type on a phone */
  .d-chat-panel { position: fixed; inset: 0; width: auto; max-height: none; border-radius: 0; border: 0; z-index: 90; }
  .d-chat-header { border-radius: 0; padding: 16px; }
  .d-chat-messages { max-height: none; }
  .d-chat-bubble { max-width: 90%; font-size: 14px; }
  .d-chat-sug { font-size: 13px; padding: 8px 14px; }
  .d-chat-input-row { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  /* 16px stops iOS auto-zoom on focus; needs .dash to beat the global .dash input rule */
  .dash .d-chat-input-row input:not([type="file"]) { font-size: 16px; }
  .d-chat-send { width: 44px; height: 44px; }
  .d-chat-close, .d-chat-hbtn { font-size: 14px; padding: 9px 14px; }
  .d-chat-widget { bottom: 16px; right: 16px; }
}