:root {
  --primary: #2563eb;
  --success: #198754;
  --danger: #dc3545;
  --bg: #f8fafc;
  --border-dark: #333333;
  --card-bg: #ffffff;
  --header-bg: #ffffff;
  --card-border: #000000;
  --text-main: #111111;
  --soft-border: #e2e8f0;
}

body.dark-mode {
  --bg: #020617;
  --card-bg: #1e293b;
  --header-bg: #0f172a;
  --border-dark: #475569;
  --card-border: #334155;
  --text-main: #f8fafc;
  --soft-border: #334155;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  font-family: 'Inter', 'Noto Sans Devanagari', 'Segoe UI', sans-serif;
  background: var(--bg); margin: 0; padding-bottom: 76px;
  color: var(--text-main);
}

/* ---------- HEADER (thin) ---------- */
.header {
  background: var(--header-bg); padding: 6px 10px; position: sticky; top: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08); z-index: 1000;
  display: flex; flex-direction: column; gap: 6px;
  border-bottom: 1px solid var(--soft-border);
}
.header-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.header-title-group { display: flex; align-items: center; gap: 10px; }
.header-title { font-size: 14px; font-weight: 800; color: var(--text-main); letter-spacing: 0.02em; }

/* Circular icon button — used for the back arrow (Font Awesome icon, no emoji) */
.icon-circle-btn {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1.3px solid var(--soft-border); background: var(--card-bg);
  color: var(--text-main); cursor: pointer; font-size: 13px;
}
.icon-circle-btn:active { background: var(--bg); }

.lang-select {
  border: 1.3px solid var(--soft-border); border-radius: 20px;
  padding: 5px 10px; font-size: 12px; font-weight: 700;
  background: var(--card-bg); color: var(--text-main); flex-shrink: 0;
}

/* List / Focus mode — spread evenly, not shrunk */
.mode-switch {
  display: flex; width: 100%; background: var(--bg); border-radius: 9px;
  padding: 3px; gap: 4px;
}
.mode-btn {
  flex: 1 1 50%; border: none; padding: 8px 6px; border-radius: 7px;
  font-weight: 700; cursor: pointer; background: transparent; color: #64748b; font-size: 12.5px;
}
.mode-btn.active { background: var(--card-bg); color: var(--primary); box-shadow: 0 2px 6px rgba(0,0,0,0.08); }

/* ---------- Subject filter chips ---------- */
.subject-filter-row {
  display: flex; gap: 6px; overflow-x: auto; padding: 1px 0 2px;
  scrollbar-width: none;
}
.subject-filter-row::-webkit-scrollbar { display: none; }
.subject-chip {
  flex: 0 0 auto; padding: 5px 12px; border-radius: 20px; font-size: 11.5px;
  font-weight: 700; border: 1.2px solid var(--soft-border); background: var(--card-bg);
  color: var(--text-main); cursor: pointer; white-space: nowrap;
}
.subject-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---------- Container / Cards ---------- */
.container { padding: 10px; max-width: 98% !important; margin: auto; width: 100%; }

.q-card {
  background: var(--card-bg); border: 1px solid var(--soft-border); border-radius: 10px;
  margin-bottom: 14px; position: relative; width: 100%;
  overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Two-row header on mobile: row 1 = quiz id + qno, row 2 = subject select + remove */
.q-bar {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px; border-bottom: 1px solid var(--soft-border);
  background: var(--header-bg); font-size: 12px; font-weight: 700;
  color: var(--text-main);
}
.q-bar-row1 { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.q-bar-row2 { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.q-bar-quiz { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-bar-no { flex-shrink: 0; color: #64748b; }
.q-bar-actions { display: flex; align-items: center; gap: 8px; }

/* Move-to as a native select, styled like the language select */
.move-select {
  border: 1.3px solid var(--soft-border); border-radius: 20px;
  padding: 5px 10px; font-size: 11px; font-weight: 700;
  background: #eef5ff; color: #0369a1; max-width: 130px;
}
body.dark-mode .move-select { background: #075985; color: #e0f2fe; border-color: var(--soft-border); }

.q-bar-btn.remove {
  border: none; border-radius: 20px; padding: 5px 10px; font-size: 11px;
  font-weight: 800; cursor: pointer; background: #fee2e2; color: var(--danger);
}
body.dark-mode .q-bar-btn.remove { background: #7f1d1d; color: #fee2e2; }

/* Desktop: collapse into a single row since there's room */
@media (min-width: 640px) {
  .q-bar { flex-direction: row; align-items: center; justify-content: space-between; }
  .q-bar-row1, .q-bar-row2 { width: auto; }
}

.qtext {
  padding: 12px; font-size: 17px; color: var(--text-main);
  line-height: 1.4; border-bottom: 1px solid var(--soft-border);
}

/* ---------- Options — circle radio on the RIGHT, text on the left ---------- */
.opt {
  display: grid; grid-template-columns: 44px 1fr;
  border-bottom: 1px solid var(--soft-border); min-height: 44px;
  cursor: pointer; align-items: center;
}
.opt:last-child { border-bottom: none; }

.opt-text { padding: 9px 12px; font-size: 16px; color: var(--text-main); font-weight: 500; line-height: 1.3; }

.custom-radio {
  position: relative; display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--soft-border); height: 100%; min-height: 44px;
}
.custom-radio::before {
  content: ""; width: 18px; height: 18px; border: 2px solid #94a3b8;
  border-radius: 50%; background: transparent;
}
/* Selected (mid-attempt, before correctness is revealed) */
.opt.selected .custom-radio::before { border-color: var(--primary); }
.opt.selected .custom-radio::after {
  content: ""; position: absolute; width: 10px; height: 10px;
  background: var(--primary); border-radius: 50%;
}
/* Correct / wrong — full row highlight, matching the live quiz template */
.opt.correct { background: #dcfce7; }
body.dark-mode .opt.correct { background: #14532d; }
.opt.correct .custom-radio::before { border-color: var(--success); background: var(--success); }
.opt.correct .custom-radio::after {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  color: #fff; font-size: 9px; background: none; width: auto; height: auto;
}
.opt.wrong-pick .custom-radio::before { border-color: var(--danger); background: var(--danger); }
.opt.wrong-pick .custom-radio::after {
  content: "\f00d"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  color: #fff; font-size: 9px; background: none; width: auto; height: auto;
}

.explanation {
  padding: 12px; background: #f0f9ff; border-top: 1px solid var(--soft-border); color: #000; font-size: 17px; line-height: 1.4;
}
body.dark-mode .explanation { background: #0c4a6e; color: #e0f2fe; }

.reattempt-hint {
  padding: 10px 12px; font-size: 12.5px; font-weight: 700; color: #64748b;
  border-top: 1px dashed var(--soft-border); text-align: center;
}

/* ---------- Images ---------- */
.q-img, .opt-img {
  max-width: 100%; width: auto; height: auto;
  display: block; margin: 6px auto; border-radius: 4px;
  border: 1px solid var(--soft-border); object-fit: contain;
  background: #ffffff;
}
.opt-img { margin: 2px 0; }

body.dark-mode mjx-container { color: inherit !important; }

mjx-container { max-width: 100% !important; overflow: visible !important; }
mjx-container, mjx-math, mjx-mtext { word-break: normal !important; overflow-wrap: normal !important; }
mjx-container[display="true"] { display: block !important; max-width: 100% !important; }
mjx-math { white-space: normal !important; }
.qtext, #qtext, .opt-text, .explanation {
  overflow-wrap: break-word !important; word-break: normal !important;
}
.container { max-width: 100%; overflow-x: hidden; }

.save-toast {
  position: fixed; bottom: 90px; right: 20px; background: #333; color: white;
  padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 700;
  z-index: 3000; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: slideInToast 0.3s ease-out;
}
@keyframes slideInToast {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

#focusView { display: none; padding-bottom: 90px; }

/* ---------- Bottom bar (replaces bottom-nav): small Prev / Reattempt toggle / Next ---------- */
.focus-nav {
  position: fixed; bottom: 0; left: 0; width: 100%; height: 52px;
  display: none; align-items: center; gap: 8px; padding: 0 10px;
  background: var(--card-bg); border-top: 1px solid var(--soft-border); z-index: 2001;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
}
.focus-nav-btn {
  flex: 1; height: 34px; border: none; border-radius: 17px;
  background: var(--primary); color: #fff; font-weight: 800; font-size: 11.5px;
  cursor: pointer;
}
.focus-nav-btn:active { opacity: 0.85; }

/* Reattempt toggle, centered between Prev/Next in the thin bottom bar */
.focus-reattempt {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex: 0 0 auto; padding: 0 4px;
}
.focus-reattempt-label { font-size: 9px; font-weight: 700; color: #64748b; white-space: nowrap; }
.toggle-switch { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background-color: #cbd5e1; transition: 0.2s; border-radius: 20px;
}
.toggle-slider::before {
  position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px;
  background-color: white; transition: 0.2s; border-radius: 50%;
}
.toggle-switch input:checked + .toggle-slider { background-color: #16a34a; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }

/* ---------- Question Palette — slides in from the RIGHT (mobile), persistent sidebar (desktop) ---------- */
.palette-fab {
  display: none;
  position: fixed; right: 16px; bottom: 66px; z-index: 2002;
  width: 48px; height: 48px; border-radius: 50%;
  background: #16a34a; color: #fff; border: none;
  box-shadow: 0 6px 16px rgba(22,163,74,0.4);
  font-size: 18px; align-items: center; justify-content: center; cursor: pointer;
}
.palette-fab.enabled { display: flex; }

.palette-wrap {
  position: fixed; top: 0; right: 0; bottom: 0; width: 260px;
  background: var(--card-bg); border-left: 1px solid var(--soft-border);
  z-index: 2005; padding: 60px 14px 14px; overflow-y: auto;
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  transform: translateX(100%); transition: transform 0.25s ease;
  display: none;
}
.palette-wrap.enabled { display: block; }
.palette-wrap.enabled.open { transform: translateX(0); }

.palette-close-btn {
  position: absolute; top: 10px; right: 10px;
}

.palette-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.palette-btn {
  width: 34px; height: 34px; border-radius: 8px; border: 1.2px solid var(--soft-border);
  background: var(--bg); color: var(--text-main); font-size: 11.5px; font-weight: 800; cursor: pointer;
}
.palette-btn.current { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Backdrop behind the mobile palette overlay */
.palette-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 2004;
}
.palette-backdrop.open { display: block; }

/* Desktop: palette is an always-visible right sidebar, no FAB, no backdrop, no close button needed */
@media (min-width: 900px) {
  .palette-wrap.enabled {
    display: block !important; transform: none !important;
    top: 0; bottom: 0; padding: 70px 14px 14px;
  }
  .palette-fab.enabled { display: none !important; }
  .palette-backdrop { display: none !important; }
  .palette-close-btn { display: none; }
  body:has(.palette-wrap.enabled) #focusView,
  body:has(.palette-wrap.enabled) #listView {
    margin-right: 260px;
  }
}

.spinner {
  width: 40px; height: 40px; border: 4px solid #f3f3f3;
  border-top: 4px solid var(--primary); border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }