:root {
  --purple: #7c3aed;
  --purple-dark: #6d28d9;
  --purple-light: #f4effe;
  --purple-track: #ede9fe;
  --green-bg: #eaf7ec;
  --green-text: #1e7d32;
  --red-bg: #fdecea;
  --red-text: #c0392b;
  --gray-pill: #f5f1fb;
  --gray-pill-hover: #ece1f7;
  --text-main: #170f22;
  --text-muted: #6b6b76;
  --border: #ececef;
  --radius: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #ffffff;
  color: var(--text-main);
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 20;
  /* The action row is populated from four places — this file, plus
     history-ui, profile-badge and sync-ui, each of which appends its own
     control at load. Nothing owns the total width, so the row is pinned
     to one line here and the items are allowed to compress instead of
     wrapping. A wrapped header is the worse failure: it is sticky, so a
     second line eats vertical space on every page for good. */
  flex-wrap: nowrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--purple-dark);
  text-decoration: none;
}

.brand .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), #a78bfa);
}

.brand-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}

a.brand {
  cursor: pointer;
  transition: opacity .12s ease;
}
a.brand:hover { opacity: .75; }

.header-right {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--text-muted);
  flex-wrap: nowrap;
  min-width: 0; /* lets the row shrink inside the header rather than overflowing it */
}

.header-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--purple-light);
  color: var(--purple-dark);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease;
  /* A pill that breaks mid-label is worse than a pill that is clipped:
     it silently turns the row into two rows. */
  white-space: nowrap;
  flex-shrink: 0;
}
.header-nav-link:hover { background: var(--purple-track); border-color: var(--purple); }

/* Progressive compression rather than wrapping. The row holds ten
   controls once every module has loaded, so on a narrower window the
   pills give up padding first, then letter width, and only the least
   load-bearing labels are dropped to their icons. Order of sacrifice is
   deliberate: "Share & export" and "Upload a quiz" both have duplicates
   in the page body, so losing their labels costs the least. */
@media (max-width: 1420px) {
  .app-header { padding: 14px 16px; gap: 12px; }
  .header-right { gap: 5px; }
  .header-nav-link { padding: 7px 9px; font-size: 12.5px; }
}
@media (max-width: 1240px) {
  .header-nav-link { padding: 6px 8px; font-size: 12px; gap: 4px; }
  .brand span { display: none; }
}
@media (max-width: 1080px) {
  .header-nav-link.compactable { font-size: 0; gap: 0; padding: 7px 9px; }
  .header-nav-link.compactable::first-letter { font-size: 14px; }
}

.pill-stat {
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 600;
  font-size: 13px;
}
.pill-stat.wrong { background: var(--red-bg); color: var(--red-text); }
.pill-stat.right { background: var(--purple-track); color: var(--purple-dark); }

.progress-wrap {
  padding: 18px 28px 6px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Draggable question slider (replaces the old static fill bar) — a native
   range input styled to look like the purple progress bar, with a real
   thumb you can drag to any question. --fill is kept in sync via JS on
   every 'input' tick so the purple portion tracks the thumb live. */
.q-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--purple) 0%,
    var(--purple) var(--fill, 0%),
    var(--border) var(--fill, 0%),
    var(--border) 100%
  );
  outline: none;
  cursor: pointer;
  margin: 0;
}
.q-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--purple);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.q-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--purple);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.q-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--border);
}
.q-slider::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--purple);
}
.progress-label {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}

.quiz-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 24px 80px;
}

/* Compact corner widget: collapsed by default (just a small toggle with a
   badge) so it doesn't eat into writing/diagram space, per the "keep it
   small" request. Bottom-left, clear of the annotation toolbar which lives
   top-right, and well below its z-index so the toolbar always wins. */
.progress-widget {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 500;
}
.pw-toggle {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--purple);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.pw-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--red-text);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.pw-panel {
  display: none;
  position: absolute;
  left: 0;
  bottom: 48px;
  width: 220px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  padding: 12px;
}
.pw-panel.open { display: block; }
.pw-missed-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--gray-pill);
  color: var(--text-main);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 10px;
}
.pw-missed-btn:hover:not(:disabled) { background: var(--gray-pill-hover); }
.pw-missed-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pw-resume-btn {
  background: var(--purple-track);
  border-color: var(--purple);
  color: var(--purple-dark);
}
.pw-resume-btn:hover { background: var(--purple-light); }
.pw-reviewing-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--purple-dark);
  background: var(--purple-track);
  border-radius: 6px;
  padding: 4px 8px;
  margin-bottom: 8px;
  text-align: center;
}
.pw-badge-inline {
  background: var(--red-text);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 6px;
}
.pw-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.pw-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 150px;
  overflow-y: auto;
}
.pw-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.pw-dot:hover { border-color: var(--purple); }
.pw-dot.current { border-color: var(--purple); border-width: 2.5px; color: var(--purple-dark); }
.pw-dot.correct { background: var(--green-bg); border-color: var(--green-text); color: var(--green-text); }
.pw-dot.incorrect { background: var(--red-bg); border-color: var(--red-text); color: var(--red-text); }

.quiz-layout {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 24px 80px;
  display: flex;
  align-items: flex-start;
  gap: 28px;
}
.quiz-layout .quiz-main { flex: 1; min-width: 0; }
.diagram-panel {
  width: 260px;
  flex-shrink: 0;
  background: var(--purple-light);
  border-radius: var(--radius);
  padding: 16px;
  position: sticky;
  top: 20px;
}
.diagram-panel svg { width: 100%; height: auto; display: block; }
.diagram-caption {
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 6px;
}
@media (max-width: 720px) {
  .quiz-layout { flex-direction: column; }
  .diagram-panel { width: 100%; position: static; order: -1; }
}

.q-number {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.q-topic {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--purple-dark);
  background: var(--purple-light);
  border-radius: 999px;
  padding: 2px 10px;
  margin-bottom: 10px;
}
.q-stem {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 22px;
}

.choice {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  background: var(--gray-pill);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 12px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s ease;
}
.choice:hover { background: var(--gray-pill-hover); }
.choice.locked { cursor: default; }
.choice.correct { background: var(--green-bg); border-color: #cdebd2; }
.choice.incorrect { background: var(--red-bg); border-color: #f6cfca; }

.choice-main { display: flex; gap: 10px; }
.choice-letter { font-weight: 700; }
.choice-text { font-size: 15.5px; }
.choice-your-answer { color: var(--text-muted); font-size: 12.5px; margin-left: 6px; font-weight: 500; }
.choice-mark { font-weight: 700; }
.choice-mark.correct { color: var(--green-text); }
.choice-mark.incorrect { color: var(--red-text); }

.choice-explain {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
}
.choice-explain.correct { color: #2c6b39; }
.choice-explain.incorrect { color: #a53c2f; }

.hint-box {
  margin-top: 4px;
  margin-bottom: 18px;
}
.hint-toggle {
  background: none;
  border: none;
  color: var(--purple-dark);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  padding: 4px 0;
}
.hint-content {
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-muted);
  background: var(--purple-light);
  border-radius: 10px;
  padding: 12px 14px;
}

.nav-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 30px;
}
.btn {
  border: none;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
.btn-secondary {
  background: var(--gray-pill);
  color: var(--text-main);
}
.btn-secondary:disabled { opacity: .5; cursor: default; }
.btn-primary {
  background: var(--purple);
  color: #fff;
}
.btn-primary:hover { background: var(--purple-dark); }
.btn-outline {
  background: #fff;
  color: var(--purple-dark);
  border: 1px solid var(--purple-track);
}

/* Results screen */
.results-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  text-align: center;
}
.results-title { font-size: 15px; color: var(--text-muted); margin-bottom: 26px; }
.gauge-label { font-size: 15px; color: var(--text-muted); margin-bottom: 8px; }
.gauge {
  width: 170px;
  height: 170px;
  margin: 0 auto 10px;
}
.gauge-score { font-size: 30px; font-weight: 700; }
.gauge-caption { font-size: 13px; color: var(--text-muted); }
.results-meta { font-size: 13.5px; color: var(--text-muted); margin: 10px 0 18px; }
.results-encourage { font-size: 17px; margin-bottom: 30px; }

.results-section {
  text-align: left;
  margin-top: 26px;
  border-top: 1px solid var(--border);
  padding-top: 22px;
}
.results-section h3 { font-size: 16px; margin-bottom: 10px; }
.results-section ol { margin: 0; padding-left: 20px; }
.results-section li { margin-bottom: 10px; font-size: 14.5px; line-height: 1.5; }

.keep-learning {
  display: grid;
  /* Two, not three: the audio-overview placeholder is gone and the two
     remaining cards are both real, so they get the width. */
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 30px;
  text-align: left;
}
@media (max-width: 620px) {
  .keep-learning { grid-template-columns: 1fr; }
}
.kl-card {
  background: var(--gray-pill);
  border-radius: var(--radius);
  padding: 16px;
}
.kl-card h4 { margin: 0 0 4px; font-size: 15px; }
.kl-card .kl-sub { font-size: 11.5px; color: var(--purple-dark); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.kl-card p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.45; }

.results-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 26px;
}
.link-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,16,30,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal-box {
  background: #fff;
  border-radius: 18px;
  padding: 26px;
  width: 380px;
  max-width: 90vw;
}
.modal-box h3 { margin-top: 0; }
.modal-group { margin-bottom: 18px; }
.modal-group-label { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--border);
  background: var(--gray-pill);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13.5px;
  cursor: pointer;
}
.chip.selected {
  background: var(--purple-track);
  border-color: var(--purple);
  color: var(--purple-dark);
  font-weight: 600;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

/* ---- Share / export / import panels ----
   Content in this app is meant to leave it: sold, given away, or
   assigned. These are the screens for that, plus the confirmation card
   everything arriving from outside has to pass through first. */
.pack-modal { width: 520px; max-height: 86vh; overflow-y: auto; }
.pack-modal-wide { width: 620px; }
.pack-intro { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; margin: 0 0 18px; }
.pack-section { margin-bottom: 22px; }
.pack-section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.pack-row {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.pack-row-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pack-row-title { font-weight: 600; font-size: 14px; }
.pack-row-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.pack-row-actions { display: flex; gap: 8px; flex-shrink: 0; }
.pack-row-actions .btn { padding: 6px 12px; font-size: 12.5px; }
.pack-link-out { margin-top: 12px; }
.pack-link-box {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.45;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  resize: vertical;
  word-break: break-all;
  background: var(--gray-pill);
}
.pack-link-meter { font-size: 12.5px; line-height: 1.5; margin-top: 8px; padding: 8px 10px; border-radius: 8px; }
.pack-link-meter.tier-safe { background: var(--purple-light); color: var(--purple-dark); }
.pack-link-meter.tier-caution { background: #fff7e6; color: #8a5a00; }
.pack-link-meter.tier-over { background: var(--red-bg); color: var(--red-text); }
.pack-link-actions { margin-top: 8px; }
.pack-url-input, .pack-newlib-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13.5px;
  margin-bottom: 8px;
}
.pack-error {
  background: var(--red-bg);
  color: var(--red-text);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.pack-empty { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.pack-note { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin: 8px 0 0; }

.pack-incoming {
  border: 1px solid var(--purple);
  background: var(--purple-light);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 6px;
}
.pack-incoming-head { font-weight: 700; font-size: 15px; color: var(--purple-dark); }
.pack-incoming-sub { font-size: 13px; color: var(--purple-dark); opacity: .85; margin-top: 3px; }
.pack-meta-line { font-size: 12.5px; color: var(--purple-dark); opacity: .85; margin-top: 6px; }
.pack-desc { font-size: 13px; line-height: 1.55; margin: 10px 0 0; color: var(--text); }
.pack-incoming-actions { flex-wrap: wrap; }
.pack-import-target { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.pack-target-list { display: flex; flex-direction: column; gap: 8px; }
.pack-target-btn {
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.pack-target-btn:hover { border-color: var(--purple); background: var(--purple-light); color: var(--purple-dark); }
.pack-newlib-form { display: flex; gap: 8px; align-items: flex-start; margin-top: 4px; }
.pack-newlib-form .pack-newlib-input { margin-bottom: 0; }

/* Quick-share paperclip: same pill height as its neighbours in the
   header, but square, so it reads as an action rather than a label. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  background: var(--purple-light);
  color: var(--purple-dark);
  border: 1px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.icon-btn:hover { background: var(--purple-track); border-color: var(--purple); }
.icon-btn:active { transform: scale(.94); }
.icon-btn.busy { opacity: .55; pointer-events: none; }
.icon-btn svg { display: block; }

/* Confirmation that the link is on the clipboard. Anchored under the
   button that produced it, and it says how long the link is when that
   might matter — a copied link that silently won't survive email is
   worse than no link. */
.share-toast {
  position: fixed;
  z-index: 60;
  max-width: 300px;
  padding: 10px 13px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
  background: var(--purple);
  box-shadow: 0 8px 24px rgba(80, 40, 160, .28);
  animation: share-toast-in .16s ease-out;
}
.share-toast.tone-warn { background: #b8770a; }
.share-toast.tone-err { background: #b3261e; }
.share-toast-bar {
  height: 2px;
  margin-top: 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .55);
  animation: share-toast-drain 15s linear forwards;
}
/* Manual-copy fallback, shown when the clipboard can't be reached. */
.share-toast-link {
  width: 100%;
  margin-top: 8px;
  padding: 7px 8px;
  border: none;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  line-height: 1.4;
  word-break: break-all;
  resize: vertical;
  color: #1f2024;
}
.share-toast-close {
  margin-top: 8px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.share-toast-close:hover { background: rgba(255, 255, 255, .15); }
@keyframes share-toast-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@keyframes share-toast-drain {
  from { width: 100%; }
  to { width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .share-toast { animation: none; }
  .share-toast-bar { animation-duration: 15s; }
}

/* First-run: the app ships with no content, so the empty state has to
   actually teach what to do rather than just say "nothing here". */
.get-started {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  margin-bottom: 26px;
  background: var(--gray-pill);
}
.get-started h2 { margin: 0 0 8px; font-size: 18px; }
.get-started p { margin: 0 0 16px; font-size: 13.5px; color: var(--text-muted); line-height: 1.6; max-width: 60ch; }
.get-started-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Homepage app shell: minimizable library sidebar + main content.
   Sidebar only ever appears on the homepage, never on a quiz page. */
.app-layout { display: flex; align-items: flex-start; }
.app-sidebar {
  width: 250px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 18px 14px;
  transition: width .15s ease, padding .15s ease, opacity .1s ease;
}
.app-sidebar.collapsed {
  width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  overflow: hidden;
  border-right: none;
}
.sidebar-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; padding: 0 8px; margin-bottom: 8px; }

/* Collapsible library switcher at the top of the sidebar — collapsed to
   just the current library's name by default so the space below can be
   used for that library's own unit outline (Khan-style jump list),
   without the library list ever being more than one click away. */
.sidebar-switcher-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  border: none;
  background: var(--purple-track);
  color: var(--purple-dark);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.sidebar-switcher-toggle:hover { background: var(--gray-pill-hover); }
.sidebar-switcher-toggle .chevron { margin-left: auto; transition: transform .12s ease; flex-shrink: 0; }
.sidebar-switcher-toggle.open .chevron { transform: rotate(180deg); }
.sidebar-switcher-list { padding: 6px 0 2px; }
.sidebar-divider { height: 1px; background: var(--border); margin: 12px 4px; }
.sidebar-outline-link {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-main);
  font-size: 13px;
  line-height: 1.35;
}
.sidebar-outline-link:hover { background: var(--gray-pill); }
.sidebar-outline-link .outline-index { font-size: 11px; font-weight: 700; color: var(--purple); flex-shrink: 0; min-width: 14px; }
.sidebar-outline-link.locked { color: var(--text-muted); }
.sidebar-outline-empty { padding: 6px 10px; font-size: 12.5px; color: var(--text-muted); }

.sidebar-lib-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border-radius: 10px;
  border: none;
  background: transparent;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  margin-bottom: 2px;
}
.sidebar-lib-row:hover { background: var(--gray-pill); }
.sidebar-lib-row.active { background: var(--purple-track); color: var(--purple-dark); }
.sidebar-lib-row .lib-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); flex-shrink: 0; }
.sidebar-lib-row.active .lib-dot { background: var(--purple-dark); }
.sidebar-new-lib { margin-top: 10px; padding: 0 8px; }
.sidebar-new-lib-btn {
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px dashed var(--border);
  background: transparent;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
}
.sidebar-new-lib-btn:hover { border-color: var(--purple); color: var(--purple-dark); }
.sidebar-new-lib-form { display: flex; gap: 6px; padding: 0 2px; }
.sidebar-new-lib-form input {
  flex: 1;
  min-width: 0;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 13px;
}
.sidebar-toggle {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
}
.sidebar-toggle:hover { background: var(--gray-pill); color: var(--text-main); }
.app-main { flex: 1; min-width: 0; }

/* Homepage */
.home-wrap { max-width: 1040px; margin: 0 auto; padding: 40px 24px 80px; }

/* Compact quiz rows (replaces big boxed shelf-cards so a large category
   list stays scannable — the "big picture" the boxed layout hid). */
.quiz-list { display: flex; flex-direction: column; gap: 1px; }
.quiz-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-main);
  font-size: 13.5px;
}
.quiz-row:hover { background: var(--gray-pill); }
.quiz-row-icon { flex-shrink: 0; color: var(--purple); display: flex; }
.quiz-row-title { flex: 1; min-width: 0; }
.quiz-row-meta { font-size: 11.5px; color: var(--text-muted); flex-shrink: 0; white-space: nowrap; }
.quiz-row.locked, .quiz-row.coming-soon { opacity: .55; cursor: default; }
.quiz-row.coming-soon { font-style: italic; }
.quiz-row.locked .quiz-row-title { font-weight: 400; }
.home-title { font-size: 26px; font-weight: 700; margin-bottom: 6px; }
.home-sub { color: var(--text-muted); margin-bottom: 30px; }
.shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.shelf-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  text-decoration: none;
  color: var(--text-main);
  display: block;
}
.shelf-card:hover { border-color: var(--purple-track); background: var(--purple-light); }
.shelf-card .tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--purple-dark);
  background: var(--purple-light);
  border-radius: 999px;
  padding: 2px 9px;
  display: inline-block;
  margin-bottom: 10px;
}
.shelf-card h3 { margin: 0 0 6px; font-size: 16px; }
.shelf-card p { margin: 0; font-size: 13px; color: var(--text-muted); }
.shelf-card .meta { margin-top: 12px; font-size: 12px; color: var(--text-muted); }

.missed-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-bottom: 26px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--red-bg);
  color: var(--red-text);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
}
.missed-banner:hover { background: #fbdcd8; }
.missed-banner-badge {
  background: var(--red-text);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.category-section { margin-bottom: 34px; scroll-margin-top: 76px; }
.category-section:first-of-type { margin-top: 6px; }
.category-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 3px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.category-title .cat-index {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--purple);
  border-radius: 999px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.category-blurb { font-size: 13px; color: var(--text-muted); margin: 0 0 14px; }
.shelf-card.custom-quiz-card {
  border-style: dashed;
  border-color: var(--purple);
  background: var(--purple-light);
}
.shelf-card.custom-quiz-card:hover { background: var(--purple-track); }

/* Study settings flyout (shared by index.html and quiz-engine.js) */
.study-settings-panel {
  position: fixed;
  width: 300px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(23,15,34,0.14);
  padding: 14px;
  z-index: 60;
}
.ssp-title { font-size: 12.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px; }
.ssp-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 4px;
  cursor: pointer;
  border-radius: 10px;
}
.ssp-row:hover { background: var(--gray-pill); }
.ssp-row input { margin-top: 3px; flex-shrink: 0; }
.ssp-row span { font-size: 12.5px; line-height: 1.45; color: var(--text-main); }
.ssp-row strong { font-size: 13px; }

/* Locked category shelves (Guided pathway) */
.shelf-card.locked {
  opacity: .6;
  cursor: default;
  border-style: dashed;
}
.shelf-card.locked:hover { background: transparent; border-color: var(--border); }
.shelf-card .lock-note { margin-top: 10px; font-size: 12px; color: var(--purple-dark); font-weight: 600; }

.pathway-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: 10px 16px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--purple-track);
  color: var(--purple-dark);
  font-size: 13px;
}
.pathway-bar strong { font-weight: 700; }

/* Mixed Review entry point */
.mixed-review-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--purple-light);
  color: var(--purple-dark);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
}
.mixed-review-banner:hover { background: var(--purple-track); }

/* ---- Master Question Bank ----------------------------------------
   The pool spans every library, so its entry point sits above the
   library switcher's outline rather than inside any one library's
   section, and its panel is the widest modal in the app: a search
   result is only useful if enough of the stem is legible to recognize
   the question from it. */

.sidebar-bank-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: var(--purple-light);
  color: var(--purple-dark);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.sidebar-bank-btn:hover { background: var(--purple-track); }
.sidebar-bank-icon { display: flex; flex-shrink: 0; }
.sidebar-bank-label { flex: 1; min-width: 0; }
.sidebar-bank-count {
  flex-shrink: 0;
  background: var(--purple);
  color: #fff;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
}

.bank-modal {
  width: 820px;
  max-width: 94vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 18px;
}
.bank-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.bank-title { margin: 0 0 4px; font-size: 19px; }
.bank-sub { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.bank-close {
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 4px;
}
.bank-close:hover { color: var(--text-main); }

.bank-controls { margin: 16px 0 10px; }
.bank-search {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
}
.bank-search:focus { outline: none; border-color: var(--purple-track); box-shadow: 0 0 0 3px var(--purple-light); }
.bank-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.bank-select {
  flex: 1;
  min-width: 150px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-main);
}

.bank-resultbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 8px;
  font-size: 12.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.bank-resultbar-actions { display: flex; gap: 14px; }
.bank-resultbar-actions .link-btn { font-size: 12.5px; }

.bank-list { flex: 1; overflow-y: auto; min-height: 120px; margin: 0 -4px; padding: 4px; }
.bank-empty { padding: 32px 8px; text-align: center; font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }

.bank-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.bank-row:hover { background: var(--gray-pill); }
.bank-check { margin-top: 3px; flex-shrink: 0; accent-color: var(--purple); }
.bank-row-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bank-row-stem { font-size: 13.5px; line-height: 1.45; }
.bank-row-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11.5px; }
.bank-tag {
  background: var(--gray-pill);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 2px 9px;
  font-weight: 600;
}
.bank-tag-easy { background: var(--green-bg); color: var(--green-text); }
.bank-tag-hard { background: var(--red-bg); color: var(--red-text); }
.bank-row-src { color: var(--text-muted); }

.bank-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.bank-foot-note { font-size: 12px; color: var(--text-muted); line-height: 1.5; max-width: 420px; }
.bank-foot .modal-actions { display: flex; gap: 8px; margin: 0; flex-shrink: 0; }

/* ---- Manage Outline (category manager) ---------------------------- */

.tax-modal {
  width: 760px;
  max-width: 94vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 18px;
}
.tax-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tax-title { margin: 0 0 4px; font-size: 19px; }
.tax-sub { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

.tax-list { flex: 1; overflow-y: auto; min-height: 100px; margin: 14px -4px 0; padding: 4px; }
.tax-empty { padding: 26px 10px; text-align: center; font-size: 13px; color: var(--text-muted); line-height: 1.6; }

.tax-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
}
.tax-row:hover { background: var(--gray-pill); border-radius: 10px; }
.tax-row-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--purple);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tax-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.tax-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text-main);
  background: #fff;
}
.tax-input:focus { outline: none; border-color: var(--purple-track); box-shadow: 0 0 0 3px var(--purple-light); }
.tax-input-title { font-weight: 600; }
.tax-input-desc { font-size: 12.5px; color: var(--text-muted); }
.tax-row-meta { display: flex; align-items: center; gap: 10px; font-size: 11.5px; }
.tax-id { background: var(--gray-pill); color: var(--text-muted); border-radius: 5px; padding: 1px 6px; font-size: 11px; }
.tax-count { color: var(--purple-dark); font-weight: 600; }
.tax-count-empty { color: var(--text-muted); font-weight: 400; }

.tax-row-actions { display: flex; gap: 4px; flex-shrink: 0; margin-top: 4px; }
.tax-icon {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text-main);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.tax-icon:hover:not(:disabled) { background: var(--purple-light); border-color: var(--purple-track); }
.tax-icon:disabled { opacity: .35; cursor: default; }
.tax-icon-danger:hover:not(:disabled) { background: var(--red-bg); border-color: var(--red-text); color: var(--red-text); }

.tax-add { padding-top: 12px; border-top: 1px solid var(--border); margin-top: 4px; }
.tax-add-form { display: flex; gap: 8px; align-items: center; }
.tax-add-form .tax-input { flex: 1; }
.tax-add-btn { padding: 8px 16px; font-size: 13px; white-space: nowrap; flex-shrink: 0; }

.tax-reassign { padding: 14px 10px; }
.tax-reassign-head { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.tax-reassign-note { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; margin: 0 0 12px; }
.tax-reassign-label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.tax-reassign-label .bank-select { flex: 1; }
.tax-reassign-list { margin: 0 0 14px; padding-left: 20px; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }

.tax-ai-box { border: 1px solid var(--border); border-radius: 12px; margin-top: 14px; background: var(--purple-light); }
.tax-ai-summary { padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--purple-dark); cursor: pointer; list-style: none; }
.tax-ai-summary::-webkit-details-marker { display: none; }
.tax-ai-summary::before { content: "▸ "; }
details[open] .tax-ai-summary::before { content: "▾ "; }
.tax-ai-body { padding: 0 14px 14px; }
.tax-ai-note { font-size: 12px; color: var(--text-muted); line-height: 1.55; margin: 0 0 8px; }
.tax-ai-prompt {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  background: #fff;
}
.tax-ai-prompt:focus { outline: none; border-color: var(--purple-track); box-shadow: 0 0 0 3px #fff; }
.tax-ai-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.tax-ai-actions .btn { padding: 7px 14px; font-size: 13px; }
.tax-ai-status { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.tax-busy { opacity: .6; }

.tax-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 14px;
  margin-top: 12px;
  border-top: 1px solid var(--border);
}
.tax-foot-note { font-size: 12px; color: var(--text-muted); }
.tax-foot .modal-actions { display: flex; gap: 8px; margin: 0; flex-shrink: 0; }

/* The library's own header line, where Manage Outline lives — kept off
   the sticky top bar so that row stays on one line as modules add to it. */
.home-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.home-title-row .home-title { margin: 0; }
.outline-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border: 1px solid var(--purple-track);
  border-radius: 999px;
  background: #fff;
  color: var(--purple-dark);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.outline-edit-btn:hover { background: var(--purple-light); border-color: var(--purple); }

/* ---- Account & Security -------------------------------------------- */

.profile-badge.is-local { background: var(--purple-track); color: var(--purple-dark); }
.profile-badge .pb-avatar { font-size: 16px; line-height: 1; }

.acct-modal {
  width: 520px;
  max-width: 94vw;
  max-height: 88vh;
  overflow-y: auto;
  padding: 22px 24px 20px;
}
.acct-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.acct-title { margin: 0 0 6px; font-size: 19px; }
.acct-note { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; margin: 0 0 12px; }

.acct-section { padding: 16px 0; border-top: 1px solid var(--border); }
.acct-section:first-child { border-top: none; }
.acct-section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.acct-input {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-main);
  background: #fff;
}
.acct-input:focus { outline: none; border-color: var(--purple-track); box-shadow: 0 0 0 3px var(--purple-light); }
.acct-code { letter-spacing: .3em; font-variant-numeric: tabular-nums; text-align: center; font-size: 17px; }

.acct-row { display: flex; gap: 8px; align-items: center; }
.acct-row .acct-input { margin-bottom: 0; }
.acct-verify { margin-top: 10px; }
.acct-btn { padding: 9px 16px; font-size: 13px; white-space: nowrap; flex-shrink: 0; }
.acct-btn-wide { width: 100%; padding: 10px 16px; font-size: 14px; margin-top: 4px; }
.acct-danger { width: 100%; color: var(--red-text); background: var(--red-bg); }
.acct-danger:hover { background: #fbdcd8; }

.acct-status { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin-top: 8px; min-height: 1em; }
.acct-status-err { color: var(--red-text); }
.acct-status-ok { color: var(--green-text); }

.acct-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--border);
}
.acct-identity-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--purple-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.acct-identity-name { font-weight: 700; font-size: 15px; }
.acct-identity-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.acct-identity .acct-btn { margin-left: auto; }

.acct-avatars { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.acct-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--gray-pill);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.acct-avatar:hover { background: var(--gray-pill-hover); }
.acct-avatar.selected { border-color: var(--purple); background: var(--purple-light); }

.acct-pill {
  background: var(--gray-pill);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.acct-pill-on { background: var(--green-bg); color: var(--green-text); }

.acct-secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  letter-spacing: .06em;
  word-break: break-all;
  background: var(--gray-pill);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  user-select: all;
}
.acct-expect { font-size: 12px; color: var(--text-muted); margin: 8px 0 6px; font-variant-numeric: tabular-nums; }

.acct-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.acct-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
  opacity: .45;
  filter: grayscale(1);
}
.acct-badge.earned { opacity: 1; filter: none; background: var(--purple-light); border-color: var(--purple-track); }
.acct-badge-icon { font-size: 20px; line-height: 1; }
.acct-badge-title { font-size: 11px; font-weight: 700; }
.acct-badge-progress { font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.acct-security {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  background: var(--gray-pill);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 4px;
}
.acct-security strong { color: var(--text-main); display: block; margin-bottom: 3px; }

/* ---- Shelf drag and drop ------------------------------------------- */

.quiz-row-draggable { cursor: grab; }
.quiz-row-draggable:active { cursor: grabbing; }
.quiz-row-dragging { opacity: .4; }

/* The drop target is the whole shelf section, so the dashed outline is
   drawn on it rather than on a thin strip — a 4px-tall drop zone is a
   frustration, not an affordance. */
.category-shelf { border-radius: 12px; transition: background .12s ease, box-shadow .12s ease; }
.category-shelf.shelf-drop-active {
  background: var(--purple-light);
  box-shadow: 0 0 0 2px var(--purple) inset;
  outline: 2px dashed var(--purple);
  outline-offset: -8px;
}

.mismatch-modal { width: 460px; max-width: 92vw; text-align: left; }
.mismatch-icon { font-size: 26px; line-height: 1; margin-bottom: 8px; }
.mismatch-title { margin: 0 0 10px; font-size: 18px; }
.mismatch-body { font-size: 13.5px; line-height: 1.6; color: var(--text-main); margin: 0 0 14px; }
.mismatch-topics { margin-bottom: 12px; }
.mismatch-topics-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.mismatch-topics .bank-tag { display: inline-block; margin: 0 4px 4px 0; }
.mismatch-suggest { font-size: 13px; color: var(--purple-dark); margin: 0 0 12px; }
.mismatch-caveat { font-size: 12px; color: var(--text-muted); line-height: 1.55; margin: 0 0 16px; }

/* Insertion indicator for intra-shelf reordering. Drawn as a positioned
   pseudo-element rather than a border: a border would add 2px to the
   card's height and shove every card below it down by that much on every
   dragover tick, which reads as the list flinching. */
.quiz-row-draggable { position: relative; }
.quiz-row.drop-before::after,
.quiz-row.drop-after::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--purple);
  box-shadow: 0 0 0 3px var(--purple-light);
  pointer-events: none;
}
.quiz-row.drop-before::after { top: -2px; }
.quiz-row.drop-after::after { bottom: -2px; }

/* ---- Workspace tab bar (src/workspace-tabs.js) ----------------------
   A fixed strip above everything. The app header is sticky at top:0, so
   when the bar is present the body is padded down and the header's
   stick-point moves below the bar — both keyed off one body class so
   pages without the script are untouched. */

.ws-tabbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 4px 8px 0;
  background: #f3f1fa;
  border-bottom: 1px solid var(--border);
  z-index: 60;
}
body.has-ws-tabs { padding-top: 36px; }
body.has-ws-tabs .app-header { top: 36px; }
/* While a whiteboard tab is active its canvas (z-index 9998) covers the
   page — the strip must ride above it or there is no way back. Elevated
   only in that state so ordinary modals still cover the bar. */
body.ws-board-active .ws-tabbar { z-index: 10000; }

/* ---- Standalone whiteboard view (src/whiteboard-view.js) ------------
   A board tab is its own view, not a film over the page: the page BODY
   is removed from the picture and a solid stage sits under the drawing
   canvas. The app header stays — Study settings, the score chips and
   above all Live session should remain reachable mid-whiteboard — so it
   is lifted above the canvas (which sits at 9998) instead of hidden.
   Page scrolling is disabled because wheel input pans the board. */
body.wb-standalone { overflow: hidden; }
body.wb-standalone .app-layout { display: none !important; }
body.wb-standalone #quiz-root > :not(.app-header) { display: none !important; }
body.wb-standalone .app-header { z-index: 9999; }
/* Modals (Live session, Group Jam) must open above the board stage. */
body.wb-standalone .modal-overlay { z-index: 10001; }
#wb-stage {
  position: fixed;
  inset: 0;
  display: none;
  background: #ffffff;
  z-index: 9990; /* under the canvas (9998); above everything page-level */
}

.ws-tabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ws-tabs::-webkit-scrollbar { display: none; }

.ws-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 9px 9px 0 0;
  background: transparent;
  color: var(--text-muted);
  font: 600 12px/1 inherit;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.ws-tab span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-tab:hover { background: #e9e5f6; }
.ws-tab.active {
  background: #ffffff;
  border-color: var(--border);
  color: var(--purple-dark);
}
.ws-tab-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  font-size: 13px;
  color: var(--text-muted);
}
.ws-tab-x:hover { background: var(--purple-light); color: var(--purple-dark); }
.ws-tab-add {
  align-self: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--purple);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.ws-tab-add:hover { background: #e9e5f6; }

/* The + menu: whiteboard-or-quiz, then library > topic > quiz. Above
   the whiteboard stage (9990) so it works from a board tab too. */
.ws-menu {
  position: fixed;
  width: 270px;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(23, 15, 34, 0.18);
  padding: 6px;
  z-index: 10002;
}
.ws-menu-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ws-menu-back {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  width: 20px;
  height: 20px;
  line-height: 1;
  font-size: 14px;
  cursor: pointer;
  color: var(--text-main);
}
.ws-menu-back:hover { background: var(--purple-light); }
.ws-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font: 600 12.5px/1.3 inherit;
  font-family: inherit;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
}
.ws-menu-row:hover { background: var(--purple-light); color: var(--purple-dark); }
.ws-menu-row.ws-menu-empty { color: var(--text-muted); cursor: default; }
.ws-menu-note { font-size: 10.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }

/* ---- Whiteboards & Folders dashboard (src/board-library-ui.js) ---- */

.sidebar-boards-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-main);
  font: 600 13px/1.2 inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.sidebar-boards-btn:hover { background: var(--purple-light); color: var(--purple-dark); }

.board-dash {
  display: flex;
  width: 860px;
  max-width: 94vw;
  max-height: 84vh;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(23, 15, 34, 0.28);
}
.bd-side {
  width: 200px;
  flex-shrink: 0;
  padding: 16px 12px;
  background: #f7f5fc;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.bd-side-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 8px 4px;
}
.bd-folder {
  display: block;
  width: 100%;
  padding: 7px 9px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font: 600 12.5px/1.3 inherit;
  font-family: inherit;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bd-folder:hover { background: #ece7f8; }
.bd-folder.active { background: var(--purple-light); color: var(--purple-dark); }
.bd-folder-row { display: flex; align-items: center; gap: 2px; }
.bd-folder-row .bd-folder { flex: 1; min-width: 0; }
.bd-mini {
  flex-shrink: 0;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 11px;
  padding: 4px;
  cursor: pointer;
  color: var(--text-muted);
}
.bd-mini:hover { background: #ece7f8; color: var(--purple-dark); }
.bd-newfolder { display: flex; gap: 4px; margin-top: 10px; }
.bd-newfolder input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: 500 12px/1.2 inherit;
  font-family: inherit;
}
.bd-newfolder button {
  width: 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--purple);
  font-weight: 700;
  cursor: pointer;
}
.bd-newfolder button:hover { background: var(--purple-light); }

.bd-main {
  flex: 1;
  min-width: 0;
  padding: 18px 20px;
  overflow-y: auto;
}
.bd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.bd-head h3 { margin: 0; font-size: 17px; }
.bd-head-actions { display: flex; gap: 8px; }
.bd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.bd-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: #fff;
  transition: box-shadow .12s ease;
}
.bd-card:hover { box-shadow: 0 4px 16px rgba(23, 15, 34, 0.10); }
.bd-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  margin-bottom: 8px;
}
.bd-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--gray-pill);
}
.bd-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-date { font-size: 11px; color: var(--text-muted); margin: 2px 0 8px; }
.bd-actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.bd-act {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  padding: 4px 7px;
  font: 600 11px/1 inherit;
  font-family: inherit;
  color: var(--text-main);
  cursor: pointer;
}
.bd-act:hover { background: var(--purple-light); color: var(--purple-dark); }
.bd-act-open { background: var(--purple-light); color: var(--purple-dark); border-color: var(--purple-track); }
.bd-act-danger:hover { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.bd-act.bd-armed, .bd-mini.bd-armed { background: #fee2e2; color: #b91c1c; }
.bd-move {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  padding: 3px 4px;
  font: 600 11px/1.2 inherit;
  font-family: inherit;
  color: var(--text-muted);
  max-width: 90px;
  cursor: pointer;
}
.bd-empty {
  padding: 40px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  background: var(--gray-pill);
  border-radius: 12px;
}
.bd-rename-input {
  width: 100%;
  padding: 4px 6px;
  border: 1.5px solid var(--purple);
  border-radius: 7px;
  font: 700 12.5px/1.2 inherit;
  font-family: inherit;
}

@media (max-width: 640px) {
  .board-dash { flex-direction: column; }
  .bd-side { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
}

/* ==================================================================
   Staples Cloud migration — the account panel's promotion flow
   ==================================================================
   Scoped under .acct-cloud-* / .acct-mig-*, so it only affects the
   Account & Security modal. The preview banner is styled to be read
   rather than skipped: while the service is not live it is the most
   important sentence on the panel.
*/
.acct-cloud-preview {
  background: #fff8ec;
  border: 1px solid #f0d9ae;
  border-left: 3px solid #E27A1E;
  border-radius: 7px;
  padding: 9px 11px;
  line-height: 1.55;
}
.acct-cloud-cta { text-align: center; }
.acct-cloud-linked { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.acct-cloud-handle { font-weight: 700; font-size: 14px; color: #5b1d97; }
.acct-cloud-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

.acct-mig-overlay { align-items: flex-start; overflow-y: auto; padding: 30px 16px; }
.acct-mig { width: min(560px, 100%); max-height: none; }
.acct-mig-banner {
  background: #fff8ec; border: 1px solid #f0d9ae; border-left: 3px solid #E27A1E;
  border-radius: 8px; padding: 11px 13px; margin-bottom: 16px;
  font-size: 12.5px; line-height: 1.55; color: #5a4526;
}
.acct-mig-step { margin-bottom: 18px; }
.acct-mig-steplabel {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #8d88a8; margin-bottom: 7px;
}
.acct-mig-manifest {
  background: #faf9fe; border: 1px solid #ece9f5; border-radius: 9px; padding: 11px 13px;
  font-size: 12.5px; color: #4a4560;
}
.acct-mig-list { margin: 0; padding-left: 17px; line-height: 1.75; }
.acct-mig-list b { color: #241c40; }
.acct-mig-warn { color: #C0392B; font-size: 11.5px; }
.acct-mig-size {
  margin-top: 8px; padding-top: 7px; border-top: 1px solid #ece9f5;
  font-size: 11.5px; color: #7b7699;
}
.acct-mig-handlerow { display: flex; align-items: center; gap: 7px; }
.acct-mig-at { font-size: 16px; color: #8d88a8; font-weight: 700; }
.acct-mig-input { flex: 1 1 auto; margin: 0 !important; }
.acct-mig-suggestions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.acct-mig-sugglabel { font-size: 11.5px; color: #7b7699; }
.acct-mig-sugg {
  font: inherit; font-size: 12px; padding: 4px 10px;
  border: 1px solid #ddd8ec; border-radius: 99px; background: #fff;
  color: #5b1d97; cursor: pointer;
}
.acct-mig-sugg:hover { border-color: #A020F0; background: #faf5ff; }
.acct-mig-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.acct-mig-acts button[disabled] { opacity: 0.5; cursor: default; }

/* ==================================================================
   Import repair report + API key setup
   ==================================================================
   The repair report is collapsed by default and opens on click: most
   imports need no attention, but the ones that do must be inspectable
   before anything is saved.
*/
.pack-repair {
  margin-top: 10px; border: 1px solid #e0dcf0; border-radius: 8px;
  background: #faf9fe; font-size: 12.5px;
}
.pack-repair.has-skips { border-color: #f0d9ae; background: #fffaf2; }
.pack-repair > summary {
  cursor: pointer; padding: 8px 11px; color: #55506e; font-weight: 600;
  list-style: revert;
}
.pack-repair.has-skips > summary { color: #8a5a1a; }
.pack-repair > summary:hover { color: #241c40; }
.pack-repair-group { padding: 0 11px 9px; }
.pack-repair-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: #8d88a8; margin: 6px 0 5px;
}
.pack-repair-item { margin-bottom: 7px; color: #4a4560; line-height: 1.5; }
.pack-repair-item ul { margin: 3px 0 0; padding-left: 18px; }
.pack-repair-item li { margin-bottom: 2px; }
.pack-repair-item.skip { color: #8d3227; }
.pack-repair-stem {
  font-size: 11.5px; color: #7b7699; font-style: italic; margin-top: 2px;
}

.ssp-key-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.ssp-key-test {
  font: inherit; font-size: 12px; padding: 4px 11px;
  border: 1px solid #ddd8ec; border-radius: 7px; background: #fff;
  color: #4a4560; cursor: pointer;
}
.ssp-key-test:hover { border-color: #A020F0; color: #5b1d97; }
.ssp-key-test[disabled] { opacity: 0.55; cursor: default; }
.ssp-key-link { font-size: 12px; color: #5b1d97; text-decoration: none; }
.ssp-key-link:hover { text-decoration: underline; }
.ssp-key-status { font-size: 11.8px; margin-top: 6px; line-height: 1.45; color: #6c6788; }
.ssp-key-status.ok { color: #2E7D32; }
.ssp-key-status.err { color: #C0392B; }