/* ═══════════════════════════════════════════════════════════════
   MEDPREP EXAM — coursology-style UI
   Themes: white | black | sepia
═══════════════════════════════════════════════════════════════ */

/* ── THEMES ── */
[data-theme="white"] {
  --bg: #f5f5f5;
  --panel: #ffffff;
  --panel2: #ffffff;
  --topbar: #1d3a8a;
  --topbar-text: #ffffff;
  --topbar-icon: rgba(255,255,255,0.92);
  --topbar-icon-hover: #ffffff;
  --bottombar: #354556;
  --bottombar-text: rgba(255,255,255,0.88);
  --sidebar: #ffffff;
  --sidebar-border: #e0e0e0;
  --text: #1a1a1a;
  --text2: #555;
  --text3: #888;
  --border: #d4d4d4;
  --border-light: #ececec;
  --link: #1d3a8a;
  --opt-hover: #f5f7fa;
  --opt-sel-border: #1d3a8a;
  --opt-correct-bg: #e8f5e9;
  --opt-correct-border: #2e7d32;
  --opt-correct-text: #1a5c20;
  --opt-wrong-bg: #fdecea;
  --opt-wrong-border: #c62828;
  --opt-wrong-text: #8b0000;
  --opt-cross: rgba(0,0,0,0.4);
  --modal-bg: #ffffff;
  --modal-overlay: rgba(0,0,0,0.55);
  --highlight-yellow: rgba(255,235,59,0.55);
  --highlight-green: rgba(129,199,132,0.5);
  --highlight-pink: rgba(244,143,177,0.5);
  --highlight-blue: rgba(144,202,249,0.55);
  --slider-track: #d4d4d4;
  --slider-thumb: #1d3a8a;
  --switch-on: #1d3a8a;
  --switch-off: #c0c0c0;
  --btn-primary: #1d3a8a;
  --btn-primary-text: #ffffff;
  --btn-end: #d32f2f;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-modal: 0 16px 48px rgba(0,0,0,0.18);
}

[data-theme="black"] {
  --bg: #0d0d0d;
  --panel: #1a1a1a;
  --panel2: #1a1a1a;
  --topbar: #0a1a3a;
  --topbar-text: #ffffff;
  --topbar-icon: rgba(255,255,255,0.85);
  --topbar-icon-hover: #ffffff;
  --bottombar: #1a242f;
  --bottombar-text: rgba(255,255,255,0.85);
  --sidebar: #161616;
  --sidebar-border: #2a2a2a;
  --text: #e8e8e8;
  --text2: #b0b0b0;
  --text3: #888;
  --border: #353535;
  --border-light: #252525;
  --link: #6ba3ff;
  --opt-hover: #232323;
  --opt-sel-border: #6ba3ff;
  --opt-correct-bg: rgba(46,125,50,0.18);
  --opt-correct-border: #66bb6a;
  --opt-correct-text: #81c784;
  --opt-wrong-bg: rgba(198,40,40,0.18);
  --opt-wrong-border: #ef5350;
  --opt-wrong-text: #ff8a80;
  --opt-cross: rgba(255,255,255,0.5);
  --modal-bg: #1e1e1e;
  --modal-overlay: rgba(0,0,0,0.75);
  --highlight-yellow: rgba(255,235,59,0.4);
  --highlight-green: rgba(129,199,132,0.35);
  --highlight-pink: rgba(244,143,177,0.4);
  --highlight-blue: rgba(144,202,249,0.4);
  --slider-track: #353535;
  --slider-thumb: #6ba3ff;
  --switch-on: #4a7fcc;
  --switch-off: #4a4a4a;
  --btn-primary: #4a7fcc;
  --btn-primary-text: #ffffff;
  --btn-end: #c62828;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-modal: 0 16px 48px rgba(0,0,0,0.6);
}

[data-theme="sepia"] {
  --bg: #f4ecd8;
  --panel: #fbf6e9;
  --panel2: #fbf6e9;
  --topbar: #5d4037;
  --topbar-text: #fbf6e9;
  --topbar-icon: rgba(251,246,233,0.92);
  --topbar-icon-hover: #ffffff;
  --bottombar: #4e342e;
  --bottombar-text: rgba(251,246,233,0.9);
  --sidebar: #f4ecd8;
  --sidebar-border: #d7c9a7;
  --text: #3d2817;
  --text2: #6d4c2f;
  --text3: #9a7a52;
  --border: #c9b88c;
  --border-light: #e6dab8;
  --link: #5d4037;
  --opt-hover: #efe5c8;
  --opt-sel-border: #5d4037;
  --opt-correct-bg: #d8e8c8;
  --opt-correct-border: #5e7a3c;
  --opt-correct-text: #3d5520;
  --opt-wrong-bg: #f0d4cc;
  --opt-wrong-border: #a0463a;
  --opt-wrong-text: #6b2820;
  --opt-cross: rgba(61,40,23,0.5);
  --modal-bg: #fbf6e9;
  --modal-overlay: rgba(61,40,23,0.55);
  --highlight-yellow: rgba(255,213,79,0.6);
  --highlight-green: rgba(174,213,129,0.55);
  --highlight-pink: rgba(239,154,154,0.55);
  --highlight-blue: rgba(158,200,235,0.55);
  --slider-track: #d7c9a7;
  --slider-thumb: #5d4037;
  --switch-on: #5d4037;
  --switch-off: #c9b88c;
  --btn-primary: #5d4037;
  --btn-primary-text: #fbf6e9;
  --btn-end: #a0463a;
  --shadow-card: 0 1px 3px rgba(61,40,23,0.1);
  --shadow-modal: 0 16px 48px rgba(61,40,23,0.25);
}

/* ── BASE ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background 0.25s, color 0.25s;
}

/* ═══════════════════════════════════════════════════════════════
   TOP BAR (Coursology blue)
═══════════════════════════════════════════════════════════════ */
.topbar {
  background: var(--topbar);
  color: var(--topbar-text);
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  flex-shrink: 0;
  gap: 8px;
}

.tb-left, .tb-center, .tb-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tb-back {
  background: none;
  border: none;
  color: var(--topbar-icon);
  cursor: pointer;
  padding: 6px 8px;
  font-size: 1.2rem;
  border-radius: 5px;
  text-decoration: none;
  transition: background 0.15s;
}
.tb-back:hover { background: rgba(255,255,255,0.1); }

.tb-menu {
  background: none;
  border: none;
  color: var(--topbar-icon);
  cursor: pointer;
  padding: 8px 10px;
  font-size: 1.1rem;
  border-radius: 5px;
  transition: background 0.15s;
}
.tb-menu:hover { background: rgba(255,255,255,0.1); }

.tb-counter {
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 8px;
}
.tb-counter b { font-weight: 700; }
.tb-counter .qid {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  opacity: 0.75;
  margin-top: 1px;
}

.tb-mark {
  background: none;
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--topbar-icon);
  padding: 5px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
}
.tb-mark:hover { background: rgba(255,255,255,0.1); }
.tb-mark.marked { background: #f59f00; border-color: #f59f00; color: #000; }
.tb-mark .flag-ico { font-size: 0.9rem; }

.tb-arrows { display: flex; gap: 4px; }
.tb-arrow {
  background: rgba(255,255,255,0.1);
  border: none;
  color: var(--topbar-icon);
  width: 32px;
  height: 32px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.tb-arrow:hover { background: rgba(255,255,255,0.22); }
.tb-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.tb-arrow-label {
  font-size: 0.7rem;
  margin-top: 2px;
  opacity: 0.7;
}

.tb-prev-wrap, .tb-next-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.tb-prev-wrap span, .tb-next-wrap span {
  font-size: 0.62rem;
  opacity: 0.7;
  margin-top: 1px;
}

.tb-timer {
  font-family: 'DM Sans', system-ui;
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0 10px;
  letter-spacing: 0.5px;
  min-width: 64px;
  text-align: center;
}

.tb-tool {
  background: none;
  border: none;
  color: var(--topbar-icon);
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 5px;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: all 0.15s;
  min-width: 56px;
}
.tb-tool:hover { background: rgba(255,255,255,0.1); }
.tb-tool .ico { font-size: 1.05rem; line-height: 1; }
.tb-tool.active-tool { color: #ffd54f; }

/* Color picker buttons next to Marker */
.mk-colors {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 6px;
  height: 32px;
}
.mk-colors.show { display: flex; }
.mk-color-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s, border-color 0.15s;
}
.mk-color-btn:hover { transform: scale(1.15); }
.mk-color-btn.active { border-color: #fff; box-shadow: 0 0 6px rgba(255,255,255,0.5); }
.mk-color-btn.yellow { background: #ffe066; }
.mk-color-btn.green  { background: #81c784; }
.mk-color-btn.pink   { background: #f48fb1; }
.mk-color-btn.blue   { background: #90caf9; }

/* ═══════════════════════════════════════════════════════════════
   MAIN
═══════════════════════════════════════════════════════════════ */
.main {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════════ */
.sidebar {
  width: 56px;
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 6px;
  gap: 4px;
  flex-shrink: 0;
  transition: width 0.2s, transform 0.2s, background 0.25s;
}

.sidebar.hidden {
  transform: translateX(-100%);
  margin-right: -56px;
}

/* hover-edge mode: hidden by default, slides in on hover */
.sidebar.hover-mode {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 20;
  transform: translateX(-100%);
  box-shadow: 4px 0 20px rgba(0,0,0,0.15);
}
.sidebar.hover-mode.show {
  transform: translateX(0);
}

.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.q-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text2);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-family: inherit;
  position: relative;
  flex-shrink: 0;
}
.q-dot:hover { background: var(--opt-hover); }
.q-dot.active {
  background: var(--btn-primary);
  color: var(--btn-primary-text);
}
.q-dot .check {
  color: #2e7d32;
  font-weight: 700;
}
.q-dot .cross {
  color: #c62828;
  font-weight: 700;
}
[data-theme="black"] .q-dot .check { color: #66bb6a; }
[data-theme="black"] .q-dot .cross { color: #ef5350; }
.q-dot.active .check, .q-dot.active .cross { color: var(--btn-primary-text); }

.q-dot.flagged::after {
  content: '🚩';
  position: absolute;
  top: -2px;
  right: -2px;
  font-size: 0.6rem;
}

.q-dot.unsubmitted-indicator::before {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: #f59f00;
  border-radius: 50%;
}

/* hover edge trigger zone */
.edge-trigger {
  position: absolute;
  top: 52px;
  left: 0;
  width: 12px;
  height: calc(100% - 52px - 38px);
  z-index: 15;
  display: none;
}
.edge-trigger.active { display: block; }

/* ═══════════════════════════════════════════════════════════════
   QUESTION PANEL
═══════════════════════════════════════════════════════════════ */
.q-panel {
  flex: 1;
  overflow-y: auto;
  padding: 28px 36px;
  transition: padding 0.2s;
}

.q-panel.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
}
.q-panel.split .q-text-section {
  padding: 28px 32px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.q-panel.split .q-options-section {
  padding: 28px 32px;
  overflow-y: auto;
}

.q-text-section, .q-options-section {
  max-width: 900px;
  margin: 0 ;
  width: 100%;
}

.q-panel::-webkit-scrollbar,
.q-text-section::-webkit-scrollbar,
.q-options-section::-webkit-scrollbar { width: 6px; }
.q-panel::-webkit-scrollbar-thumb,
.q-text-section::-webkit-scrollbar-thumb,
.q-options-section::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.question-text {
  font-size: 1.06rem;
  line-height: 1.78;
  color: var(--text);
  cursor: text;
  user-select: text;
  margin-bottom: 28px;
  font-weight: 400;
  word-wrap: break-word;
}

.q-text-section.aligned-left .question-text { text-align: left; }
.q-text-section.aligned-center .question-text { text-align: center; }
.q-text-section.aligned-right .question-text { text-align: right; }
.q-text-section.aligned-justify .question-text { text-align: justify; }

/* Highlights */
.hl {
  border-radius: 2px;
  padding: 1px 2px;
  transition: filter 0.2s;
}
.hl-yellow { background: var(--highlight-yellow); }
.hl-green { background: var(--highlight-green); }
.hl-pink { background: var(--highlight-pink); }
.hl-blue { background: var(--highlight-blue); }

[data-bold-hl="on"] .hl { font-weight: 700; }
[data-shadow-hl="on"] .hl { text-shadow: 0 0 var(--shadow-blur, 4px) currentColor; }

[data-theme="black"][data-shine-hl="on"] .hl {
  filter: brightness(calc(1 + var(--shine-amt, 0.3)));
}

/* ═══════════════════════════════════════════════════════════════
   OPTIONS
═══════════════════════════════════════════════════════════════ */
.options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: var(--panel);
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--text);
  user-select: none;
  position: relative;
}
.option:hover:not(.disabled) { background: var(--opt-hover); }
.option.selected {
  background: var(--opt-hover);
  border-color: var(--opt-sel-border);
}
.option.correct {
  background: var(--opt-correct-bg);
  border-color: var(--opt-correct-border);
  color: var(--opt-correct-text);
}
.option.wrong {
  background: var(--opt-wrong-bg);
  border-color: var(--opt-wrong-border);
  color: var(--opt-wrong-text);
}
.option.disabled { cursor: default; }

.option.crossed-out .opt-text {
  text-decoration: line-through;
  text-decoration-color: var(--opt-cross);
  text-decoration-thickness: 2px;
  opacity: 0.55;
}
.option.crossed-out .opt-radio {
  opacity: 0.4;
}

.opt-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--text2);
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  background: transparent;
}
.option.selected .opt-radio { border-color: var(--opt-sel-border); }
.option.selected .opt-radio::after {
  content: '';
  width: 9px;
  height: 9px;
  background: var(--opt-sel-border);
  border-radius: 50%;
}
.option.correct .opt-radio { border-color: var(--opt-correct-border); background: var(--opt-correct-border); color: #fff; font-size: 0.75rem; }
.option.correct .opt-radio::after { content: '✓'; width: auto; height: auto; background: none; color: #fff; font-weight: 700; }
.option.wrong .opt-radio { border-color: var(--opt-wrong-border); background: var(--opt-wrong-border); color: #fff; }
.option.wrong .opt-radio::after { content: '✕'; width: auto; height: auto; background: none; color: #fff; font-weight: 700; font-size: 0.7rem; }

.opt-letter {
  font-weight: 700;
  margin-right: 4px;
}
.opt-text { flex: 1; }
.opt-pct {
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--text3);
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 2px;
  white-space: nowrap;
}
.option.correct .opt-pct { color: var(--opt-correct-text); }
.option.wrong .opt-pct { color: var(--opt-wrong-text); }

[data-hide-pct="on"] .opt-pct { display: none; }

/* ═══════════════════════════════════════════════════════════════
   EXPLANATION
═══════════════════════════════════════════════════════════════ */
.explanation {
  display: none;
  margin-top: 18px;
  background: var(--panel2);
  border: 1px solid var(--border);
  padding: 18px 20px;
  border-radius: 6px;
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--text2);
}
.explanation.show { display: block; }
.exp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.exp-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 3px;
  background: var(--opt-correct-border);
  color: #fff;
}
.exp-badge.wrong { background: var(--opt-wrong-border); }
.exp-title {
  font-weight: 700;
  color: var(--text);
  font-size: 0.96rem;
}
.exp-body strong { color: var(--text); font-weight: 700; }
.exp-kp {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}
.exp-kp h4 {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--link);
  margin-bottom: 8px;
}
.exp-kp ul { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.exp-kp li {
  font-size: 0.86rem;
  color: var(--text2);
  padding-left: 14px;
  position: relative;
}
.exp-kp li::before {
  content: '•';
  color: var(--text3);
  position: absolute;
  left: 0;
}

/* ═══════════════════════════════════════════════════════════════
   MARKER POPUP — shows on click of existing highlight (copy/delete only)
═══════════════════════════════════════════════════════════════ */
.marker-popup {
  display: none;
  position: fixed;
  z-index: 800;
  background: var(--btn-primary);
  border-radius: 22px;
  padding: 5px 7px;
  gap: 4px;
  align-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.marker-popup.show {
  display: flex;
  animation: popupIn 0.18s ease;
}
@keyframes popupIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Action buttons */
.mp-action {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
  padding: 0;
}
.mp-action:hover {
  background: rgba(255,255,255,0.18);
  transform: scale(1.1);
}
.mp-action.mp-delete:hover { background: rgba(255,80,80,0.4); }

/* Highlights are clickable */
.hl { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════
   BOTTOM BAR
═══════════════════════════════════════════════════════════════ */
.bottombar {
  background: var(--bottombar);
  color: var(--bottombar-text);
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
  font-size: 0.78rem;
}
.bb-left { display: flex; align-items: center; gap: 16px; }
.bb-right { display: flex; align-items: center; gap: 4px; }

.bb-info { opacity: 0.85; white-space: nowrap; }

.bb-tool {
  background: none;
  border: none;
  color: var(--bottombar-text);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s;
}
.bb-tool:hover { background: rgba(255,255,255,0.1); }
.bb-tool .ico { font-size: 0.95rem; }

.bb-end {
  background: var(--btn-end);
  color: #fff;
  border: none;
  padding: 5px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  margin-left: 8px;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.bb-end:hover { opacity: 0.88; }

/* ═══════════════════════════════════════════════════════════════
   MODALS / OVERLAYS
═══════════════════════════════════════════════════════════════ */
.overlay {
  position: fixed;
  inset: 0;
  background: var(--modal-overlay);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 900;
  padding: 16px;
}
.overlay.show { display: flex; }

.modal {
  background: var(--modal-bg);
  border-radius: 12px;
  padding: 28px 32px;
  max-width: 460px;
  width: 100%;
  color: var(--text);
  animation: fadeUp 0.22s ease;
  box-shadow: var(--shadow-modal);
  max-height: 90vh;
  overflow-y: auto;
}
@keyframes fadeUp { from { opacity:0; transform: translateY(10px) } to { opacity:1; transform: translateY(0) } }

.modal h2 {
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}
.modal p {
  font-size: 0.9rem;
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: 20px;
}
.m-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}
.m-cancel {
  padding: 9px 20px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.m-cancel:hover { background: var(--opt-hover); }
.m-confirm {
  padding: 9px 20px;
  border-radius: 6px;
  background: var(--btn-end);
  border: none;
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.m-confirm:hover { opacity: 0.88; }
.m-primary {
  padding: 9px 20px;
  border-radius: 6px;
  background: var(--btn-primary);
  border: none;
  color: var(--btn-primary-text);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.m-primary:hover { opacity: 0.88; }

/* Results */
.score-ring {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 4px solid var(--btn-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 8px auto 16px;
}
.score-num {
  font-size: 1.85rem;
  font-weight: 900;
  color: var(--btn-primary);
}
.score-lbl {
  font-size: 0.7rem;
  color: var(--text2);
  margin-top: 2px;
}
.res-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0;
}
.res-cell {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}
.res-n {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 3px;
}
.res-l {
  font-size: 0.72rem;
  color: var(--text2);
}

/* Lab Values */
.lab-modal { max-width: 600px; }
.lab-tbl {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 0.85rem;
}
.lab-tbl th {
  text-align: left;
  padding: 9px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--link);
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.lab-tbl td {
  padding: 9px 12px;
  color: var(--text2);
  border-bottom: 1px solid var(--border-light);
}
.lab-tbl tr:hover td { color: var(--text); }

/* Notes */
.notes-ta {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 12px;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
  min-height: 110px;
  outline: none;
  line-height: 1.6;
  margin-bottom: 14px;
}
.notes-ta:focus { border-color: var(--btn-primary); }

/* Calculator */
.calc-modal { max-width: 290px; }
.calc-disp {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: right;
  margin-bottom: 8px;
  min-height: 52px;
  word-break: break-all;
  color: var(--text);
  font-family: inherit;
}
.calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 12px;
}
.c-btn {
  padding: 13px;
  border-radius: 6px;
  border: none;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.c-num { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.c-num:hover { border-color: var(--text2); }
.c-op { background: var(--opt-hover); color: var(--btn-primary); border: 1px solid var(--border); }
.c-op:hover { background: var(--btn-primary); color: var(--btn-primary-text); }
.c-eq { background: var(--btn-primary); color: var(--btn-primary-text); }
.c-eq:hover { opacity: 0.88; }
.c-clr { background: var(--opt-wrong-bg); color: var(--opt-wrong-text); border: 1px solid var(--border); }

/* ═══════════════════════════════════════════════════════════════
   SETTINGS PANEL
═══════════════════════════════════════════════════════════════ */
.settings-overlay {
  position: fixed;
  inset: 0;
  background: var(--modal-overlay);
  display: none;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.settings-overlay.show { display: flex; }

.settings-panel {
  background: var(--modal-bg);
  width: 380px;
  max-width: 95vw;
  max-height: 90vh;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-modal);
  animation: fadeUp 0.22s ease;
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  position: relative;
}
.settings-header h3 {
  flex: 1;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.settings-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--btn-primary);
  color: var(--btn-primary-text);
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}
.settings-close:hover { opacity: 0.85; }

.settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px 20px;
}
.settings-body::-webkit-scrollbar { width: 4px; }
.settings-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.setting-section {
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.setting-section h4 {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text3);
  margin: 14px 0 8px;
  letter-spacing: 0.3px;
}
.setting-section h4.section-title {
  font-size: 0.92rem;
  color: var(--text);
  font-weight: 700;
  margin-top: 12px;
}

.setting-card {
  background: var(--bg);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-light);
  gap: 12px;
}
.setting-row:last-child { border-bottom: none; }
.setting-row.col {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.setting-label {
  font-size: 0.88rem;
  color: var(--text);
  flex: 1;
  font-weight: 500;
}
.setting-label .info-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--text3);
  color: var(--text3);
  font-size: 0.65rem;
  margin-left: 5px;
  cursor: help;
  font-style: italic;
}

.setting-sub {
  font-size: 0.75rem;
  color: var(--text3);
  margin-top: 3px;
  font-weight: 400;
}

/* Toggle Switch */
.switch {
  position: relative;
  width: 42px;
  height: 24px;
  background: var(--switch-off);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.switch::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: left 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.switch.on { background: var(--switch-on); }
.switch.on::after { left: 21px; }

/* Slider */
.slider-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.slider-wrap .small-a { font-size: 0.85rem; color: var(--text2); }
.slider-wrap .big-a { font-size: 1.1rem; color: var(--text); font-weight: 700; }

.slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--slider-track);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--slider-thumb);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--panel);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--slider-thumb);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--panel);
}

.slider-value {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text2);
  min-width: 38px;
  text-align: right;
}

/* Stepper buttons (Font Size) */
.stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}
.step-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background 0.15s;
}
.step-btn:hover { background: var(--opt-hover); }
.step-btn.label-A {
  font-size: 0.92rem;
  background: var(--opt-hover);
}

/* Theme dots */
.theme-dots {
  display: flex;
  gap: 8px;
}
.theme-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--border);
  transition: transform 0.15s, border-color 0.15s;
  position: relative;
}
.theme-dot:hover { transform: scale(1.05); }
.theme-dot.active { border-color: var(--btn-primary); }
.theme-dot.active::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text);
  font-weight: 700;
  font-size: 0.85rem;
}
.theme-dot.white { background: #ffffff; border-color: #cccccc; }
.theme-dot.white.active::after { color: #000; }
.theme-dot.black { background: #1a1a1a; }
.theme-dot.black.active::after { color: #fff; }
.theme-dot.sepia { background: #d7c9a7; }
.theme-dot.sepia.active::after { color: #3d2817; }

/* Segmented buttons */
.segmented {
  display: flex;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px;
}
.seg-btn {
  flex: 1;
  padding: 6px 12px;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: var(--text2);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.seg-btn.on {
  background: var(--btn-primary);
  color: var(--btn-primary-text);
}
.seg-btn .check-mark {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.65rem;
}

/* Reset button inline */
.reset-inline {
  background: var(--btn-primary);
  color: var(--btn-primary-text);
  border: none;
  padding: 4px 14px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.reset-inline:hover { opacity: 0.85; }

/* Alignment icons */
.align-icons {
  display: flex;
  gap: 4px;
}
.align-btn {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  background: var(--panel);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
  font-size: 0.85rem;
  position: relative;
  transition: all 0.15s;
}
.align-btn:hover { background: var(--opt-hover); }
.align-btn.on {
  border-color: var(--btn-primary);
  color: var(--btn-primary);
}
.align-btn.on::before {
  content: '✓';
  position: absolute;
  top: -7px;
  right: -7px;
  background: var(--btn-primary);
  color: var(--btn-primary-text);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 0.62rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* Time picker for night mode */
.time-input {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  width: 90px;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .topbar { padding: 0 6px; gap: 4px; }
  .tb-tool { min-width: auto; padding: 5px 6px; }
  .tb-tool span:not(.ico) { display: none; }
  .tb-counter { font-size: 0.78rem; padding: 0 4px; }
  .tb-counter .qid { display: none; }
  .tb-mark { padding: 4px 8px; font-size: 0.72rem; }
  .tb-mark span:not(.flag-ico) { display: none; }
  .q-panel { padding: 16px 14px; }
  .q-panel.split { grid-template-columns: 1fr; }
  .q-panel.split .q-text-section { border-right: none; border-bottom: 1px solid var(--border); }
  .sidebar { width: 44px; }
  .q-dot { width: 30px; height: 30px; font-size: 0.7rem; }
  .bottombar { padding: 0 8px; font-size: 0.72rem; }
  .bb-tool span:not(.ico) { display: none; }
  .bb-info { font-size: 0.7rem; }
}