:root {
  --indigo: #4f46e5;
  --indigo-dark: #3730a3;
  --ink: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --bg: #f8fafc;
  --card: #ffffff;
  --good: #059669;
  --mid: #d97706;
  --bad: #dc2626;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 20px;
  line-height: 1.6;
}
button, input, textarea { font-family: inherit; font-size: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.err { color: var(--bad); font-weight: 600; }
.center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
a { color: var(--indigo); }

/* ---- top bar / nav ------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: var(--ink);
  color: #fff;
  flex-wrap: wrap; gap: 10px;
}
.topbar-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 21px; letter-spacing: .01em; }
.home-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25);
  color: #fff; text-decoration: none; padding: 7px 14px; border-radius: 99px;
  font-weight: 600; font-size: 16px; transition: background .15s;
}
.home-btn:hover { background: rgba(255,255,255,.2); }
#tabs { display: flex; gap: 6px; flex-wrap: wrap; }
#tabs button {
  background: transparent; border: 1px solid rgba(255,255,255,.25); color: #fff;
  padding: 8px 16px; border-radius: 99px; cursor: pointer; font-weight: 600; font-size: 17px;
  transition: background .15s;
}
#tabs button:hover { background: rgba(255,255,255,.12); }
#tabs button.active { background: var(--indigo); border-color: var(--indigo); }

.wrap { max-width: 720px; margin: 0 auto; padding: 20px 16px 60px; }

/* ---- cards / hero -------------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
}
.hero {
  background: linear-gradient(135deg, var(--indigo), var(--indigo-dark));
  color: #fff;
  border-radius: 14px;
  padding: 24px 22px;
  margin-bottom: 16px;
}
.hero h2 { margin: 4px 0 0; font-size: 28px; }
.eyebrow { text-transform: uppercase; font-size: 14px; letter-spacing: .08em; opacity: .85; font-weight: 700; }

.qlist { margin: 0; padding: 0; }
.qlist li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  font-size: 18px;
}
.qlist li:last-child { border-bottom: none; }
.qnum {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--indigo); color: #fff; font-size: 15px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ---- buttons -------------------------------------------------------------- */
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  border: none; border-radius: 10px; padding: 12px 20px;
  font-weight: 700; font-size: 18px; cursor: pointer;
  transition: opacity .15s, transform .05s;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--indigo); color: #fff; }
.btn-primary:hover { background: var(--indigo-dark); }
.btn-secondary { background: #eef2ff; color: var(--indigo-dark); }
.btn-secondary:hover { background: #e0e7ff; }

/* ---- spinner ---------------------------------------------------------------- */
.spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid #e0e7ff; border-top-color: var(--indigo);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- question / rich text --------------------------------------------------- */
.qtext p { margin: 0 0 10px; line-height: 1.55; }
.qtext ul { margin: 0 0 10px 18px; padding: 0; }
.qtext .katex { font-size: 1.05em; }

/* ---- practice: method toggle ------------------------------------------------ */
.method-toggle { display: flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 16px; }
.method-toggle button {
  flex: 1; padding: 11px; border: none; background: #fff; cursor: pointer;
  font-weight: 600; font-size: 17px; color: var(--muted);
  border-right: 1px solid var(--border);
}
.method-toggle button:last-child { border-right: none; }
.method-toggle button.active { background: var(--indigo); color: #fff; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 15px; font-weight: 700; color: var(--muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .03em; }
.field textarea, .field input[type="text"] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  resize: vertical; font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: var(--work-font, 22px); line-height: 1.5;
}
.field input[type="text"] { font-family: inherit; }
.field textarea:focus, .field input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px #eef2ff; }

.photo-drop {
  display: block; border: 2px dashed var(--border); border-radius: 12px;
  padding: 28px 16px; text-align: center; cursor: pointer; background: #fafbff;
}
.photo-drop input[type="file"] { display: none; }
.photo-preview { width: 100%; max-height: 340px; object-fit: contain; border-radius: 10px; border: 1px solid var(--border); background: #f1f5f9; }
.photo-actions { margin-top: 10px; }

#submitErr:empty { display: none; }

/* ---- feedback --------------------------------------------------------------- */
.feedback-box { border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; border: 1px solid; }
.fb-good { background: #ecfdf5; border-color: #a7f3d0; }
.fb-mid  { background: #fffbeb; border-color: #fde68a; }
.fb-low  { background: #fef2f2; border-color: #fecaca; }
.feedback-box h3 { margin: 0; }
.feedback-box ul { margin: 0 0 8px 18px; padding: 0; font-size: 17.5px; }
.feedback-box p { font-size: 17.5px; }

.badge {
  display: inline-block; font-size: 14px; font-weight: 700; padding: 3px 10px;
  border-radius: 99px; white-space: nowrap;
}
.badge-strong { background: #d1fae5; color: var(--good); }
.badge-dev { background: #fef3c7; color: var(--mid); }
.badge-open { background: #fee2e2; color: var(--bad); }

/* ---- mistake bank ------------------------------------------------------------ */
.stage-dots { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.stage-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex: none; }
.stage-dots span.on { background: var(--indigo); }
.stage-dots .stage-label { white-space: nowrap; min-width: 0; }
.mistake-remove-btn {
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 4px;
}
.mistake-remove-btn:hover { color: var(--bad); background: #fee2e2; }
.mistake-bank-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

/* ---- progress ----------------------------------------------------------------- */
.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px; text-align: center; }
.stat .num { font-size: 30px; font-weight: 800; color: var(--indigo-dark); }
.stat .lbl { font-size: 15px; color: var(--muted); margin-top: 2px; }

.progress-track { height: 8px; background: var(--border); border-radius: 99px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--indigo); border-radius: 99px; }

table { width: 100%; border-collapse: collapse; font-size: 17px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); }
th { font-size: 14px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); background: #f8fafc; }
tr:last-child td { border-bottom: none; }

/* ---- tutor modal --------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; background: rgba(15,23,42,.55);
  display: flex; align-items: flex-end; justify-content: center; z-index: 50;
}
.modal-box {
  background: #fff; width: 100%; max-width: 480px; max-height: 82vh;
  border-radius: 16px 16px 0 0; display: flex; flex-direction: column; overflow: hidden;
}
@media (min-width: 600px) {
  .modal { align-items: center; }
  .modal-box { border-radius: 16px; max-height: 78vh; }
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border); background: #fafbff;
}

/* The tutor card is draggable (see enableModalDrag() in app.js) so a
   student can slide it aside to see the question behind it, instead of
   the usual full-screen dimmed backdrop blocking it. Its own backdrop is
   left transparent and click-through, so the page underneath stays
   visible and usable while the card is open. */
.tutor-modal { background: transparent; pointer-events: none; }
.tutor-modal .modal-box { pointer-events: auto; box-shadow: 0 12px 40px rgba(15,23,42,.28), 0 0 0 1px var(--border); }
.tutor-modal .modal-head { cursor: move; touch-action: none; user-select: none; }
@media (min-width: 600px) {
  .tutor-modal .modal-box { margin: 0; }
}
.tutor-brand { display: flex; align-items: center; gap: 8px; }
.tutor-avatar { font-size: 22px; line-height: 1; }
.icon-btn { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--muted); }

/* Which question Jet is currently helping with, plus a badge for the last error type */
.tutor-context-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 18px; background: #eef2ff; border-bottom: 1px solid var(--border);
  font-size: 14.5px; font-weight: 700; color: var(--indigo-dark); text-transform: uppercase; letter-spacing: .02em;
}
.badge-warning { background: #fef3c7; color: var(--mid); text-transform: none; letter-spacing: normal; }

.modal-body { flex: 1; overflow-y: auto; padding: 16px 18px; }

/* Low-friction quick-reply chips above the message input */
.tutor-quick-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 10px; }
.chip-btn {
  background: #f1f5f9; border: 1px solid var(--border); border-radius: 99px;
  padding: 7px 13px; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.chip-btn:hover { background: #e2e8f0; }

.modal-foot { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); }
.modal-foot input { flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
.modal-foot input:focus { outline: none; border-color: var(--indigo); }

.chat-turn { margin-bottom: 12px; padding: 11px 14px; border-radius: 12px; font-size: 17.5px; line-height: 1.5; max-width: 90%; }
.chat-turn p { margin: 0 0 6px; }
.chat-turn p:last-child { margin-bottom: 0; }
.chat-student { background: var(--indigo); color: #fff; margin-left: auto; border-bottom-right-radius: 3px; }
.chat-tutor { background: #f1f5f9; margin-right: auto; border-bottom-left-radius: 3px; }
.chat-level { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .7; margin-bottom: 4px; }

/* ---- history ------------------------------------------------------------------ */
.history-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; transition: border-color .15s, transform .05s;
}
.history-card:hover { border-color: var(--indigo); }
.history-card:active { transform: scale(.99); }
.history-date { font-weight: 700; font-size: 18px; }
.history-meta { font-size: 15px; color: var(--muted); margin-top: 2px; }
.history-score { font-size: 22px; font-weight: 800; }
.history-q-row { padding: 14px 0; border-bottom: 1px solid var(--border); }
.history-q-row:last-child { border-bottom: none; }

/* ---- practice: fraction toolbar + live math preview ---------------------------- */
.math-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.math-toolbar .chip-btn { padding: 5px 11px; font-size: 14.5px; }

/* Working-out textarea and its live-rendered preview sit side by side, so
   typing and seeing the rendered number sentence happen in the same
   glance instead of the preview being scrolled out of view below. Drops
   to a stacked layout on narrow/mobile screens. */
.working-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
.working-preview-grid textarea { margin: 0; height: 100%; min-height: 130px; }
.math-preview {
  margin-top: 0; padding: 10px 12px; background: #f8fafc; border: 1px solid var(--border);
  border-radius: 8px; min-height: 130px; overflow-y: auto;
}
.math-preview-line { font-size: var(--work-font, 22px); padding: 4px 0; }
@media (max-width: 640px) {
  .working-preview-grid { grid-template-columns: 1fr; }
  .working-preview-grid textarea { min-height: 110px; }
  .math-preview { min-height: 40px; }
}

/* ---- practice: prev/next navigation ------------------------------------------- */
.practice-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.practice-nav .btn { flex: 0 0 auto; }
.practice-nav .nav-status { flex: 1; text-align: center; font-size: 15px; color: var(--muted); }

/* ---- print worksheet -------------------------------------------------------------- */
.print-sheet { display: none; }
.q-block { break-inside: avoid; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px dashed #cbd5e1; }
.working-box { border: 1px solid #cbd5e1; border-radius: 4px; }

@media print {
  body * { visibility: hidden; }
  .print-sheet, .print-sheet * { visibility: visible; }
  .print-sheet { display: block; position: absolute; top: 0; left: 0; width: 100%; padding: 14mm; font-size: 15px; color: #000; }
  .no-print { display: none !important; }
  @page { size: A4; margin: 0; }
}

/* Parent check (History) */
.parent-check { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.parent-check summary { cursor: pointer; font-weight: 600; font-size: 16px; color: var(--muted); }
.parent-check .pc-body { margin-top: 10px; font-size: 16px; }
.pc-badge { display: inline-block; font-size: 14px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: #eef2f7; color: #475569; margin-right: 6px; }
.pc-badge.pc-good { background: #dcfce7; color: #166534; }
.pc-badge.pc-warn { background: #fef3c7; color: #92400e; }
.pc-input { display: block; width: 100%; box-sizing: border-box; margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; }

/* Practice: the question stays in view beside the working (wide screens),
   or in a pop-up panel opened from a floating button (narrow screens). */
.wrap.wide { max-width: 1240px; }
.practice-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; align-items: start; }
.practice-q-col { position: sticky; top: 92px; max-height: calc(100vh - 112px); overflow-y: auto; }
.practice-q-col .card { margin-bottom: 0; }
.practice-work-col { min-width: 0; }
.q-float-btn { display: none; }
.q-float-panel { display: none; }
@media (max-width: 1000px) {
  .practice-layout { grid-template-columns: 1fr; }
  .practice-q-col { position: static; max-height: none; overflow: visible; margin-bottom: 16px; }
  .q-float-btn {
    display: block; position: fixed; right: 14px; bottom: 16px; z-index: 30;
    background: var(--indigo); color: #fff; border: none; border-radius: 99px;
    padding: 12px 18px; font-weight: 700; font-size: 16px; box-shadow: 0 6px 18px rgba(15,23,42,.3); cursor: pointer;
  }
  .q-float-panel:not(.hidden) {
    display: block; position: fixed; left: 10px; right: 10px; top: 10px; max-height: 55vh; overflow-y: auto; z-index: 40;
    background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; box-shadow: 0 12px 40px rgba(15,23,42,.3);
  }
  .q-float-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
}