:root{
  --bg0:#0b1020;
  --bg1:#0e1630;
  --card:#0f1a33cc;
  --cardSolid:#101c36;
  --text:#e9eefc;
  --muted:#a8b3d6;
  --line:#223058;
  --primary:#7c5cff;
  --primary2:#22d3ee;
  --good:#22c55e;
  --bad:#ef4444;
  --shadow: 0 24px 60px rgba(0,0,0,.35);
  --ui-scale: 1;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ height:100%; width:100%; max-width:100%; overflow-x:hidden; }
:root{ color-scheme: dark; }
button{ color: var(--text); }
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(124,92,255,.32), transparent 58%),
    radial-gradient(900px 600px at 82% 18%, rgba(34,211,238,.22), transparent 58%),
    radial-gradient(900px 700px at 40% 90%, rgba(34,197,94,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

.bg{ position:fixed; inset:0; pointer-events:none; opacity:.55;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0);
  background-size: 28px 28px;
  mask-image: radial-gradient(closest-side, #000, transparent 85%);
}

.shell{
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 32px 18px 56px;
}

/* Apply UI scaling to app content only (not to fixed-position modals). */
.uiScale{
  zoom: var(--ui-scale);
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 18px;
}

.rightControls{ display:flex; align-items:center; gap:10px; position:relative; }
.fontControls{ display:flex; gap:8px; }
.btn.icon{ padding: 8px 10px; border-radius: 12px; font-weight: 900; min-width: 44px; }
.linkBtn{
  background: transparent;
  border-color: transparent;
  color: var(--primary2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.linkBtn:hover{
  border-color: rgba(34,211,238,.45);
  background: rgba(34,211,238,.08);
}

.brand{display:flex;align-items:center;gap:12px;min-width:0;cursor:pointer}
.brandLogo{ width: 46px; height: 46px; display:block; }
.title{ font-weight: 700; letter-spacing:.2px; text-transform: lowercase; }
.subtitle{ font-size: 12px; color:var(--muted); margin-top:2px; }

/* Status pill: shown when logged-in (JS toggles hidden/style); default visible */
#statusPill{ display:flex; }

.pill{
  gap:10px; align-items:center;
  border:1px solid var(--line);
  background: rgba(16,28,54,.55);
  backdrop-filter: blur(10px);
  padding: 10px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
}
.pill .sep{ opacity:.65; }

.card{
  border: 1px solid rgba(34,48,88,.85);
  background: linear-gradient(180deg, rgba(16,28,54,.78), rgba(16,28,54,.52));
  backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--shadow);
}

h1{ margin: 0 0 10px; font-size: 28px; }
h2{ margin: 6px 0 0; font-size: 20px; line-height:1.25; }

.muted{ color: var(--muted); }
.small{ font-size: 12px; }

.form{ margin-top: 18px; display:flex; flex-direction:column; gap:14px; }

/* Start view: split row2 into independent columns so hall of fame doesn't move actions */
.form.startGrid{ display:flex; flex-direction:column; gap: 14px; }
@media (min-width: 980px){
  .row.startRow2{ align-items: start; }
  .startLeft{ display:flex; flex-direction:column; }
  .startRight{ display:flex; flex-direction:column; }
  .actions.startActions{ margin-top: 12px; flex-wrap: wrap; }
}

.field{ display:flex; flex-direction:column; gap:8px; }
.field span{ font-size: 12px; color: var(--muted); }
.checkLine{ display:flex; align-items:center; gap:10px; color: var(--text); font-weight:700; }
.checkLine input{ width:18px; height:18px; accent-color: #7c5cff; }
.seqToggle{ margin-top: -2px; }
.seqRange{ align-items:end; }
.hint{ font-size: 11px; color: rgba(168,179,214,.85); line-height:1.25; }
.hint code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 11px; color: rgba(233,238,252,.9); }

input, select, textarea{
  border: 1px solid var(--line);
  background: rgba(10,16,32,.55);
  color: var(--text);
  border-radius: 12px;
  padding: 12px 12px;
  outline: none;
  font-size: var(--form-font-size, 16px);
}
input:focus, select:focus, textarea:focus{ border-color: rgba(124,92,255,.75); box-shadow: 0 0 0 4px rgba(124,92,255,.14); }

.row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px){ .row{ grid-template-columns: 1fr; } }

.actions{ display:flex; gap:12px; margin-top: 6px; }

.btn{
  border: 1px solid var(--line);
  background: rgba(10,16,32,.35);
  color: var(--text);
  border-radius: 14px;
  padding: 11px 15px;
  cursor:pointer;
  font-weight: 700;
  transition: transform .08s ease, border-color .2s ease, background .2s ease;
}
.btn:hover{ border-color: rgba(124,92,255,.7); transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.btn.primary{
  border-color: rgba(124,92,255,.85);
  background: linear-gradient(135deg, rgba(124,92,255,.98), rgba(34,211,238,.80));
}

.btn.danger{
  border-color: rgba(124,92,255,.55);
  background: rgba(10,16,32,.35);
  color: rgba(255, 170, 185, .95);
}
.btn.danger:hover{ border-color: rgba(255,96,122,.55); }

/* Modals */
.modalBackdrop{
  position: fixed;
  inset: 0;
  background: rgba(8,12,22,.65);
  backdrop-filter: blur(3px);
  z-index: 50;
}
.modalBackdrop[hidden]{ display:none !important; }

.modal{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 28px));
  background: rgba(18, 28, 54, .96);
  border: 1px solid rgba(124,92,255,.25);
  box-shadow: 0 18px 60px rgba(0,0,0,.5);
  border-radius: 14px;
  z-index: 51;
}
.modal[hidden]{ display:none !important; }

.modalHeader{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.modalHeader h2{
  margin:0;
  font-size: 18px;
}

.modalBody{ padding: 14px; }

.modalFooter{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.pwRow{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items:center;
}

.errorText{
  color: rgba(255, 170, 185, 1);
  font-weight: 700;
}

.footerHint{ margin-top: 16px; font-size: 13px; }

.note{ border:1px dashed rgba(34,48,88,.9); border-radius: 14px; padding: 12px; }
.note summary{ cursor:pointer; color: var(--muted); font-weight: 600; }
.noteBody{ margin-top: 10px; color: var(--muted); font-size: 13px; }

.quizHead{
  display:flex;
  flex-direction:column;
  gap: 10px;
  align-items:stretch;
}

.quizHeadTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

#questionText{ margin: 0; width: 100%; font-size: 18px; line-height: 1.3; }
.quizBtns{ display:flex; gap:10px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
.kicker{ font-size: 12px; color: var(--muted); }

.choices{ margin-top: 16px; display:grid; gap:10px; }
.choice{
  text-align:left;
  width:100%;
  border:1px solid var(--line);
  background: rgba(10,16,32,.35);
  padding: 14px 14px;
  border-radius: 16px;
  cursor:pointer;
  color: var(--text);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  transition: transform .08s ease, border-color .2s ease, background .2s ease;
}
.choice:hover{
  border-color: rgba(34,211,238,.65);
  background: rgba(10,16,32,.48);
  transform: translateY(-1px);
}
.choice:active{ transform: translateY(0px); }
.choice:focus{ outline: none; }
.choice:focus-visible{
  outline: 3px solid rgba(34,211,238,.75);
  outline-offset: 2px;
}
.choice:disabled{ opacity: .95; }

/* Multi-answer selection state */
.choice.selected{
  border-color: rgba(34,211,238,.95);
  background: rgba(34,211,238,.12);
  box-shadow: 0 0 0 2px rgba(34,211,238,.10) inset;
}

.meta{ margin-top: 14px; display:flex; justify-content:space-between; align-items:center; }
.translate-link{ font-size:13px; color:var(--link); cursor:pointer; user-select:none; white-space:nowrap; }
.translate-link:hover{ text-decoration:underline; color:var(--accent); }
.translate-link.loading{ opacity:.6; cursor:wait; }

.stats{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 14px; }
@media (max-width: 980px){ .stats{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .stats{ grid-template-columns: 1fr; } }
.stat{ border:1px solid var(--line); border-radius: 16px; padding: 14px; background: rgba(10,16,32,.25); }
.statLabel{ font-size: 12px; color: var(--muted); }
.statValue{ font-size: 26px; font-weight: 800; margin-top: 6px; }

/* Compact blocks (used on start page for small summary blocks) */
.stats.compact{ grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
@media (max-width: 980px){ .stats.compact{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .stats.compact{ grid-template-columns: 1fr; } }
.stats.compact .stat{ padding: 10px 12px; border-radius: 14px; }
.stats.compact .statValue{ font-size: 16px; font-weight: 800; margin-top: 4px; white-space: pre-line; line-height: 1.15; }
.stats.compact .statLabel{ font-size: 11px; }

/* Compact ranking table */
.ranking.compact{ margin-top: 8px; }
.ranking.compact .rankRow{ padding: 9px 12px; }
.ranking.compact .rankName{ font-weight: 700; }
.ranking.compact .rankHead{ font-size: 11px; }

.ranking{ margin-top: 10px; border:1px solid var(--line); border-radius: 16px; overflow:hidden; background: rgba(10,16,32,.25); }
.rankRow{ display:grid; grid-template-columns: 36px 1.2fr .8fr .8fr; gap: 10px; padding: 12px 14px; border-top: 1px solid rgba(34,48,88,.7); align-items:center; }
.rankRow:first-child{ border-top: none; }
.rankHead{ color: var(--muted); font-size: 12px; font-weight: 700; background: rgba(16,28,54,.55); }
.rankName{ font-weight: 800; }
.rankMono{ font-variant-numeric: tabular-nums; }

.toast{
  margin-top: 14px;
}
.toastInner{
  width: 100%;
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(34,48,88,.9);
  background: rgba(15,26,51,.95);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  font-weight: 700;
}
.toastInner.good{ border-color: rgba(34,197,94,.6); }
.toastInner.bad{ border-color: rgba(239,68,68,.6); }


/* Compact quiz layout for phones: lets long questions/options fit better. */
@media (max-width: 640px){
  .shell{
    padding: 12px 8px 24px;
  }
  .topbar{
    margin-bottom: 10px;
    gap: 8px;
  }
  .brand{ gap: 8px; min-width:0; }
  .rightControls{ min-width:0; flex-shrink:0; }
  .brandLogo{ width: 36px; height: 36px; }
  .title{ font-size: 15px; }
  .subtitle{ font-size: 10px; }
  .rightControls{ gap: 6px; }
  .fontControls{ gap: 4px; }
  .btn.icon{
    min-width: 36px;
    padding: 6px 8px;
    border-radius: 10px;
  }

  #viewQuiz.card{
    padding: 12px;
    border-radius: 14px;
  }
  #viewQuiz .quizHead{
    gap: 6px;
  }
  #viewQuiz .quizHeadTop{
    gap: 8px;
    align-items: flex-start;
  }
  #viewQuiz .quizBtns{
    gap: 6px;
  }
  #viewQuiz .quizBtns .btn{
    padding: 7px 9px;
    border-radius: 10px;
    font-size: 12px;
  }
  #viewQuiz .kicker{
    font-size: 10px;
    line-height: 1.15;
  }
  #questionText{
    font-size: 15px;
    line-height: 1.18;
  }
  #questionText p,
  #questionText ul,
  #questionText ol{
    margin-top: 0;
    margin-bottom: 4px;
  }
  #questionText ul,
  #questionText ol{
    padding-left: 18px;
  }
  .choices{
    margin-top: 8px;
    gap: 7px;
  }
  .choice{
    padding: 9px 10px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.18;
  }
  .choice p,
  .choice ul,
  .choice ol{
    margin-top: 0;
    margin-bottom: 3px;
  }
  .choice ul,
  .choice ol{
    padding-left: 18px;
  }
  .meta{
    margin-top: 8px;
    font-size: 11px;
  }
  .toastInner,
  #toastInner{
    font-size: 13px;
  }
}

@media (max-width: 420px){
  #viewQuiz.card{
    padding: 10px;
  }
  #questionText{
    font-size: 14px;
    line-height: 1.15;
  }
  .choices{
    margin-top: 7px;
    gap: 6px;
  }
  .choice{
    padding: 8px 9px;
    font-size: 13.5px;
    line-height: 1.15;
  }
}

/* Mobile first-fit guard: avoid accidental horizontal overflow that forces pinch zoom. */
body{ min-width:0; }
#app, #appShell{ max-width:100%; }
.card{min-width:0}
.card table{min-width:100%}
.card select, .card input[type=text], .card input[type=email], .card input[type=date]{max-width:100%;box-sizing:border-box}
img, video, svg{max-width:100%;height:auto}
td, th{word-break:break-word;overflow-wrap:break-word}
@media (max-width: 640px){
  .card{padding:16px;border-radius:14px}
  .card h1{font-size:22px}
  select, .btn{font-size:13px}
}

/* ── Modo Concentración (tema claro · fondo pergamino) ── */
/* Fondo amarillo pálido + texto oscuro. Los tonos cálidos mejoran
   el rendimiento de lectura y reducen la fatiga visual en sesiones largas. */
html.focus-mode {
  --bg0: #F4EDD8;
  --bg1: #EDE5CC;
  --card: #FDF8EDf0;
  --cardSolid: #FDF8ED;
  --text: #2C2416;
  --muted: #6B5E4F;
  --line: #D4C9B5;
  --primary: #5B7FA5;
  --primary2: #5A9E6F;
  --good: #3D7A4F;
  --bad: #C4554A;
  --shadow: 0 14px 40px rgba(0,0,0,.06);
  color-scheme: light;
}

/* ── Fondo ── */
html.focus-mode body {
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(91,127,165,.08), transparent 60%),
    radial-gradient(900px 600px at 82% 18%, rgba(90,158,111,.06), transparent 60%),
    radial-gradient(900px 700px at 40% 90%, rgba(180,160,120,.10), transparent 58%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* Patrón de puntos: oscuro sutil sobre fondo claro */
html.focus-mode .bg {
  opacity: .28;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.12) 1px, transparent 0);
}

/* ── Tarjetas ── */
html.focus-mode .card {
  border-color: var(--line);
  background: linear-gradient(180deg, rgba(253,248,237,.94), rgba(248,242,225,.88));
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}

/* ── Topbar / Pill ── */
html.focus-mode .pill {
  background: rgba(240,232,215,.75);
  border-color: var(--line);
  backdrop-filter: blur(6px);
}

/* ── Botones ── */
html.focus-mode .btn {
  border-color: var(--line);
  background: rgba(245,238,222,.65);
  color: var(--text);
}
html.focus-mode .btn:hover {
  border-color: rgba(91,127,165,.55);
  background: rgba(235,228,212,.75);
}
html.focus-mode .btn:active {
  background: rgba(225,218,200,.8);
}

html.focus-mode .btn.primary {
  border-color: rgba(91,127,165,.7);
  background: linear-gradient(135deg, rgba(91,127,165,.92), rgba(90,158,111,.78));
  color: #FDFBF5;
}

html.focus-mode .btn.danger {
  color: #B0453E;
  border-color: rgba(196,85,74,.35);
}
html.focus-mode .btn.danger:hover {
  border-color: rgba(196,85,74,.55);
}

/* ── Inputs ── */
html.focus-mode input,
html.focus-mode select,
html.focus-mode textarea {
  background: rgba(255,252,245,.85);
  color: var(--text);
  border-color: var(--line);
}
html.focus-mode input:focus,
html.focus-mode select:focus,
html.focus-mode textarea:focus {
  border-color: rgba(91,127,165,.65);
  box-shadow: 0 0 0 4px rgba(91,127,165,.10);
}

/* ── Choices (opciones de respuesta) ── */
html.focus-mode .choice {
  background: rgba(255,252,245,.65);
  border-color: var(--line);
  color: var(--text);
}
html.focus-mode .choice:hover {
  border-color: rgba(90,158,111,.5);
  background: rgba(245,240,225,.75);
}
html.focus-mode .choice.selected {
  border-color: rgba(90,158,111,.75);
  background: rgba(90,158,111,.08);
  box-shadow: 0 0 0 2px rgba(90,158,111,.08) inset;
}

/* ── Toast ── */
html.focus-mode .toastInner {
  background: rgba(253,248,240,.92);
  border-color: var(--line);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
html.focus-mode .toastInner.good { border-color: rgba(61,122,79,.45); }
html.focus-mode .toastInner.bad  { border-color: rgba(196,85,74,.45); }

/* ── Modal ── */
html.focus-mode .modal {
  background: rgba(253,248,240,.97);
  border-color: rgba(91,127,165,.25);
  box-shadow: 0 14px 48px rgba(0,0,0,.12);
}
html.focus-mode .modalBackdrop {
  background: rgba(244,237,216,.55);
  backdrop-filter: blur(3px);
}

/* ── Stats / Ranking ── */
html.focus-mode .stat {
  background: rgba(255,252,245,.55);
  border-color: var(--line);
}
html.focus-mode .ranking {
  background: rgba(255,252,245,.45);
  border-color: var(--line);
}
html.focus-mode .rankRow {
  border-top-color: rgba(212,201,181,.5);
}
html.focus-mode .rankHead {
  background: rgba(240,232,215,.55);
  color: var(--muted);
}

/* ── Editor Markdown image preview ───────────────────────────────────── */
.qMarkdownPreview{
  margin-top:8px;
  padding:10px;
  border:1px dashed var(--primary2);
  border-radius:10px;
  background:color-mix(in srgb, var(--primary2) 10%, var(--bg0));
}
.qMarkdownPreview[hidden]{display:none!important}
.qMarkdownPreviewLabel{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:8px;
  padding:3px 8px;
  border-radius:999px;
  background:var(--primary2);
  color:var(--bg0);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.qMarkdownPreviewLabel::before{content:"👁️"}
.qMarkdownPreviewBody{
  color:var(--text);
}
.qMarkdownPreviewBody p:last-child{margin-bottom:0}
.qMarkdownPreview img{
  max-width:100%;
  height:auto;
  border-radius:10px;
  display:block;
}
.qOptText .qMarkdownPreview{
  padding:8px;
  font-size:13px;
}

/* ── Editor de preguntas ── */
html.focus-mode .qItem {
  background: rgba(255,252,245,.45);
  border-color: var(--line);
}
html.focus-mode .qTextarea,
html.focus-mode .qOptTextarea {
  background: rgba(255,252,245,.7);
  border-color: rgba(180,170,150,.35);
  color: var(--text);
}
html.focus-mode .qTextarea:focus,
html.focus-mode .qOptTextarea:focus {
  border-color: rgba(91,127,165,.5);
  box-shadow: 0 0 0 2px rgba(91,127,165,.1);
}
html.focus-mode .qEdit .qText,
html.focus-mode .qEdit .qOptText {
  outline-color: rgba(91,127,165,.3);
  background: rgba(255,252,245,.5);
}

/* ── Notas / Misc ── */
html.focus-mode .note {
  border-color: rgba(180,170,150,.5);
}
html.focus-mode hr {
  border-color: rgba(212,201,181,.4) !important;
}

/* ── AI Ask ── */
html.focus-mode .aiResponse {
  background: rgba(245,238,222,.7);
  color: var(--text);
}
html.focus-mode .aiResponse h1,
html.focus-mode .aiResponse h2,
html.focus-mode .aiResponse h3 {
  color: #4A6E8A;
}
html.focus-mode .btnAskAI {
  border-color: #6A8FA8;
  color: #4A6E8A;
}
html.focus-mode .btnAskAI:hover:not(:disabled) {
  background: rgba(91,127,165,.08);
}
html.focus-mode .btnAiClose {
  background: rgba(235,228,212,.6);
  border-color: var(--line);
  color: var(--text);
}
html.focus-mode .btnAiClose:hover { background: rgba(225,218,200,.75); }

/* ── AI Loading / Spinner / Cancel in focus mode ── */
html.focus-mode .aiLoading { color: var(--text); }
html.focus-mode .aiFunny { color: var(--muted); }
html.focus-mode .aiSpinner {
  border-color: rgba(91,127,165,.15);
  border-top-color: #5B7FA5;
}
html.focus-mode .btnAiCancel {
  background: rgba(235,228,212,.7);
  border-color: var(--line);
  color: var(--muted);
}
html.focus-mode .btnAiCancel:hover {
  background: rgba(220,213,195,.85);
  color: var(--text);
}

/* ── User Menu ── */
#userMenu{
  position:absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(280px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  padding: 12px;
  z-index: 2500;
  overflow: hidden;
}
.userMenuActions{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:8px;
}
#userMenu .btn{
  width:100%;
  justify-content:center;
  white-space:nowrap;
}
html.focus-mode #userMenu {
  background: rgba(253,248,240,.96);
  border-color: var(--line);
  box-shadow: 0 12px 36px rgba(0,0,0,.08);
}
@media (max-width: 640px){
  #userMenu{
    position: fixed;
    top: 68px;
    right: 8px;
    left: auto;
    width: min(280px, calc(100vw - 16px));
  }

  /* ── Editor textareas: bigger on mobile ── */
  .qTextarea {
    min-height: 100px !important;
    font-size: 16px !important; /* prevent iOS zoom */
  }
  .qOptTextarea {
    min-height: 48px !important;
    font-size: 16px !important;
  }
  .qExpArea {
    min-height: 72px !important;
    font-size: 16px !important;
  }
  .qItem {
    padding: 12px 10px !important;
  }
  .qSubQItem .qOptTextarea {
    min-height: 40px !important;
  }
  /* ── Editor option buttons: wrap on mobile ── */
  .qOptBtns {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  .qOptBtns .qOptBtn {
    font-size: 14px !important;
    padding: 6px 12px !important;
  }
  /* ── Editor image upload button on its own line ── */
  .qItem.qEdit .qTop {
    flex-wrap: wrap;
  }
  .qItem.qEdit .qNum {
    align-self: flex-start;
  }
}

/* ── Problem area (quiz) ── */
#problemArea {
  margin: 16px 0;
}
.problemStatement {
  padding: 16px 18px;
  background: rgba(34,211,238,.08);
  border: 1px solid rgba(34,211,238,.15);
  border-radius: 12px;
  margin-bottom: 16px;
}
.problemHeader {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary2);
  margin-bottom: 8px;
}
.problemBody {
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}
.problemBody p { margin: 4px 0; }

.subQuestionList {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.subQuestion {
  padding: 14px;
  background: var(--cardSolid);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.subQHead {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.5;
}
.subQHead strong {
  color: var(--primary2);
  margin-right: 6px;
}
.subQOptions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.subChoice {
  text-align: left;
  padding: 10px 14px;
  font-size: 14px;
}
.subQFeedback {
  margin-top: 8px;
  font-size: 13px;
  min-height: 20px;
}
.subQFeedback.correct {
  color: var(--good);
}
.subQFeedback.incorrect {
  color: var(--bad);
}
.subQCorrect {
  font-weight: 600;
}
.subQIncorrect {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.subQIncorrect .muted {
  color: var(--muted);
  font-weight: 600;
}

/* ── Include problems checkbox on start page ── */
#includeProblemsField {
  margin-bottom: 4px;
}

/* ── Attachments ── */
.attachmentsSection {
  margin: 0 0 20px;
  padding: 14px 16px;
  background: rgba(34,211,238,.06);
  border: 1px solid rgba(34,211,238,.14);
  border-radius: 10px;
}
.attachmentsSection .attTitle {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary2);
  margin-bottom: 10px;
  letter-spacing: .03em;
}
.attachmentsSection .attTitle.collapsible,
.attachmentsInline .attTitle.collapsible {
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
  line-height: 1.6;
}
.attachmentsSection .attTitle.collapsible:hover,
.attachmentsInline .attTitle.collapsible:hover {
  opacity: 0.85;
}
.attBody {
  margin-top: 10px;
}
.attachmentItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.attachmentItem:last-child {
  border-bottom: none;
}
.attachmentLink {
  color: var(--primary2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  word-break: break-all;
}
.attachmentLink:hover {
  text-decoration: underline;
  color: #60e8ff;
}
.attachmentDesc {
  color: var(--muted);
  font-size: 12px;
  flex: 1;
  min-width: 120px;
}
.attachmentUpload {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.attachmentUpload input[type="file"] {
  font-size: 13px;
  color: var(--muted);
  max-width: 200px;
}
.attachmentUpload input[type="file"]::file-selector-button {
  background: var(--line);
  border: 1px solid var(--primary2);
  color: var(--primary2);
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.attachmentUpload input[type="file"]::file-selector-button:hover {
  background: rgba(34,211,238,.15);
}
.attachmentDescInput {
  background: var(--bg0);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  min-width: 180px;
  max-width: 300px;
}
.attachmentDescInput:focus {
  border-color: var(--primary2);
  outline: none;
}
.btnAttachUpload,
.btnAttachDelete {
  padding: 4px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid;
}
.btnAttachUpload {
  background: rgba(34,211,238,.12);
  border-color: var(--primary2);
  color: var(--primary2);
}
.btnAttachUpload:hover {
  background: rgba(34,211,238,.22);
}
.btnAttachDelete {
  background: transparent;
  border-color: var(--bad);
  color: var(--bad);
}
.btnAttachDelete:hover {
  background: rgba(239,68,68,.12);
}

/* Attachments in quiz — question-level */
.attachmentsInline {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: rgba(34,211,238,.05);
  border: 1px solid rgba(34,211,238,.10);
  border-radius: 8px;
}
.attachmentsInline .attTitle {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary2);
  margin-bottom: 6px;
}

/* Attachments inside problem statement */
.problemAttachments {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(34,211,238,.12);
}
.problemAttachments .attTitle {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary2);
  margin-bottom: 6px;
}

/* Sub-question attachments */
.subQAttachments {
  margin-bottom: 8px;
}
.subQAttachments .attTitle {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary2);
  margin-bottom: 4px;
}
.subQAttachments .attachmentLink {
  font-size: 12px;
  margin-right: 12px;
}

/* ── Focus mode overrides for attachments ── */
html.focus-mode .attachmentsSection {
  background: rgba(91,127,165,.08);
  border-color: rgba(91,127,165,.18);
}
html.focus-mode .attachmentsSection .attTitle {
  color: #5B7FA5;
}
html.focus-mode .attachmentLink {
  color: #4A7A9B;
}
html.focus-mode .attachmentLink:hover {
  color: #3A6A8B;
}
html.focus-mode .attachmentDesc {
  color: var(--muted);
}
html.focus-mode .attachmentUpload input[type="file"]::file-selector-button {
  border-color: #5B7FA5;
  color: #5B7FA5;
  background: rgba(91,127,165,.12);
}
html.focus-mode .attachmentUpload input[type="file"]::file-selector-button:hover {
  background: rgba(91,127,165,.22);
}
html.focus-mode .btnAttachUpload {
  border-color: #5B7FA5;
  color: #5B7FA5;
  background: rgba(91,127,165,.12);
}
html.focus-mode .btnAttachUpload:hover {
  background: rgba(91,127,165,.22);
}
html.focus-mode .attachmentsInline {
  background: rgba(91,127,165,.06);
  border-color: rgba(91,127,165,.14);
}
html.focus-mode .attachmentsInline .attTitle {
  color: #5B7FA5;
}

/* ── Matching / drag & drop ──────────────────────────────────── */
.matchingWrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 12px 0;
}
.matchingCol {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.matchingItem {
  background: var(--cardSolid);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.4;
  min-height: 44px;
  display: flex;
  align-items: center;
  user-select: none;
}
.matchingItemFixed {
  background: rgba(34,211,238,0.06);
  border-color: rgba(34,211,238,0.2);
  font-weight: 600;
  color: var(--primary2);
}
.matchingItemDrag {
  cursor: grab;
  touch-action: none;
  gap: 10px;
}
.matchingItemDrag:active {
  cursor: grabbing;
}
.matchingHandle {
  font-size: 20px;
  color: var(--muted);
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  cursor: grab;
}
.matchingGhost {
  opacity: 0.3;
  background: rgba(34,211,238,0.1);
  border-style: dashed;
}
.matchingDrag {
  background: rgba(124,92,255,0.15);
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

@media (max-width: 600px) {
  .matchingWrap {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .matchingCol {
    gap: 6px;
  }
  .matchingItem {
    padding: 10px 12px;
    font-size: 13px;
    min-height: 38px;
  }
}

/* ── Matching pair colors ──────────────────────────────── */
.matchingItem[data-color="0"] { border-left: 4px solid #7c5cff; }
.matchingItem[data-color="1"] { border-left: 4px solid #22d3ee; }
.matchingItem[data-color="2"] { border-left: 4px solid #f59e0b; }
.matchingItem[data-color="3"] { border-left: 4px solid #22c55e; }
.matchingItem[data-color="4"] { border-left: 4px solid #ef4444; }
.matchingItem[data-color="5"] { border-left: 4px solid #ec4899; }
.matchingItem[data-color="6"] { border-left: 4px solid #8b5cf6; }
.matchingItem[data-color="7"] { border-left: 4px solid #14b8a6; }

html.focus-mode .matchingItem[data-color="0"] { border-left-color: #5B7FA5; }
html.focus-mode .matchingItem[data-color="1"] { border-left-color: #5A9E6F; }
html.focus-mode .matchingItem[data-color="2"] { border-left-color: #C4903A; }
html.focus-mode .matchingItem[data-color="3"] { border-left-color: #3D7A4F; }
html.focus-mode .matchingItem[data-color="4"] { border-left-color: #C4554A; }
html.focus-mode .matchingItem[data-color="5"] { border-left-color: #B0458A; }
html.focus-mode .matchingItem[data-color="6"] { border-left-color: #7B5DBF; }
html.focus-mode .matchingItem[data-color="7"] { border-left-color: #3E9B8F; }