/* ================================================================
   Interactive Quiz Module — Nordic Glass Theme
   ================================================================
   Adds interactive answering to grammarData-driven lesson pages.
   Supports: pair, choice, error, scramble, correction, fillin question types.
   ================================================================ */

/* ── Interactive zone injected below question text ── */
.iq-zone {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(120, 113, 108, 0.04);
  border: 1px solid var(--border, rgba(28, 25, 23, 0.08));
}
[data-theme="dark"] .iq-zone,
html.dark .iq-zone {
  background: rgba(255, 255, 255, 0.03);
}


/* ── Choice / Pair buttons ── */
.iq-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.iq-choice {
  flex: 1 1 0;
  min-height: 44px;
  padding: 10px 16px;
  border: 1.5px solid rgba(120, 113, 108, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  font: 500 15px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color: var(--text, #1C1917);
  cursor: pointer;
  user-select: none;
}
.iq-choice:hover {
  border-color: rgba(120, 113, 108, 0.35);
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.iq-choice:active {
  transform: scale(0.97);
}
[data-theme="dark"] .iq-choice,
html.dark .iq-choice {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text, #F5F3F0);
}
[data-theme="dark"] .iq-choice:hover,
html.dark .iq-choice:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Selected state */
.iq-choice.selected {
  border-color: #0D9488;
  background: rgba(13, 148, 136, 0.08);
  box-shadow: 0 0 0 1px rgba(13, 148, 136, 0.15);
}
[data-theme="dark"] .iq-choice.selected,
html.dark .iq-choice.selected {
  border-color: #14B8A6;
  background: rgba(20, 184, 166, 0.12);
}

/* Correct answer */
.iq-choice.correct {
  border-color: #16A34A;
  background: rgba(22, 163, 74, 0.1);
  color: #16A34A;
  pointer-events: none;
}
[data-theme="dark"] .iq-choice.correct,
html.dark .iq-choice.correct {
  border-color: #22C55E;
  background: rgba(34, 197, 94, 0.12);
  color: #22C55E;
}

/* Wrong answer */
.iq-choice.wrong {
  border-color: #DC2626;
  background: rgba(220, 38, 38, 0.08);
  color: #DC2626;
  pointer-events: none;
}
[data-theme="dark"] .iq-choice.wrong,
html.dark .iq-choice.wrong {
  border-color: #EF4444;
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

/* Dimmed (non-selected wrong choices after check) */
.iq-choice.dimmed {
  opacity: 0.4;
  pointer-events: none;
}


/* ── Error correction — clickable underlines ── */
.iq-error-option {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}
.iq-error-option:hover {
  background: rgba(13, 148, 136, 0.1);
}
.iq-error-option.selected {
  background: rgba(13, 148, 136, 0.15);
  outline: 2px solid #0D9488;
  outline-offset: 1px;
}
.iq-error-option.correct {
  background: rgba(22, 163, 74, 0.12);
  outline: 2px solid #16A34A;
  outline-offset: 1px;
}
.iq-error-option.wrong {
  background: rgba(220, 38, 38, 0.1);
  outline: 2px solid #DC2626;
  outline-offset: 1px;
}


/* ── Scramble chips ── */
.iq-scramble-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 40px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(120, 113, 108, 0.06);
  margin-bottom: 8px;
}

.iq-answer-zone {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 44px;
  padding: 10px;
  border-radius: 10px;
  border: 2px dashed rgba(120, 113, 108, 0.2);
  background: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}
[data-theme="dark"] .iq-answer-zone,
html.dark .iq-answer-zone {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.iq-answer-zone.has-items {
  border-style: solid;
  border-color: rgba(13, 148, 136, 0.3);
}

.iq-chip {
  padding: 6px 14px;
  border: 1.5px solid rgba(120, 113, 108, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  font: 500 14px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color: var(--text, #1C1917);
  cursor: pointer;
  user-select: none;
}
.iq-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.iq-chip:active {
  transform: scale(0.95);
}
[data-theme="dark"] .iq-chip,
html.dark .iq-chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text, #F5F3F0);
}

.iq-chip.placed {
  background: rgba(13, 148, 136, 0.1);
  border-color: rgba(13, 148, 136, 0.3);
}
[data-theme="dark"] .iq-chip.placed,
html.dark .iq-chip.placed {
  background: rgba(20, 184, 166, 0.12);
  border-color: rgba(20, 184, 166, 0.3);
}

.iq-chip.hidden {
  opacity: 0.2;
  pointer-events: none;
}

.iq-scramble-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #A3A09C);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}


/* ── Check button ── */
.iq-check-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 20px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #0D9488, #0F766E);
  color: #fff;
  font: 600 14px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(13, 148, 136, 0.2);
}
.iq-check-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3);
}
.iq-check-btn:active {
  transform: scale(0.97);
}
.iq-check-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
[data-theme="dark"] .iq-check-btn,
html.dark .iq-check-btn {
  background: linear-gradient(135deg, #14B8A6, #0D9488);
}


/* ── Feedback banner ── */
.iq-feedback {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font: 500 14px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
}

.iq-feedback.correct {
  background: rgba(22, 163, 74, 0.08);
  color: #16A34A;
  border: 1px solid rgba(22, 163, 74, 0.2);
}
[data-theme="dark"] .iq-feedback.correct,
html.dark .iq-feedback.correct {
  background: rgba(34, 197, 94, 0.1);
  color: #22C55E;
  border-color: rgba(34, 197, 94, 0.2);
}

.iq-feedback.incorrect {
  background: rgba(220, 38, 38, 0.06);
  color: #DC2626;
  border: 1px solid rgba(220, 38, 38, 0.15);
}
[data-theme="dark"] .iq-feedback.incorrect,
html.dark .iq-feedback.incorrect {
  background: rgba(239, 68, 68, 0.08);
  color: #EF4444;
  border-color: rgba(239, 68, 68, 0.2);
}



/* ── Nav bar progress toggle ── */
.iq-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 10px;
  background: var(--card, rgba(255,253,250,0.85));
  cursor: pointer;
  font-size: 16px;
  padding: 0;
}
.iq-nav-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.iq-nav-toggle:active {
  transform: scale(0.95);
}
[data-theme="dark"] .iq-nav-toggle,
html.dark .iq-nav-toggle {
  background: rgba(41, 37, 36, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
  color: #E7E5E4;
}

/* ── Progress tab (bottom-left, always visible) ── */
.iq-progress-tab {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9998;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255, 253, 250, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(168, 162, 158, 0.2);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}
.iq-progress-tab:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.1);
}
.iq-progress-tab:active {
  transform: scale(0.97);
}
[data-theme="dark"] .iq-progress-tab,
html.dark .iq-progress-tab {
  background: rgba(28, 25, 23, 0.88);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.2),
    0 8px 24px rgba(0, 0, 0, 0.3);
}

.iq-progress-tab-score {
  font-size: 13px;
  font-weight: 700;
  color: #0D9488;
}
[data-theme="dark"] .iq-progress-tab-score,
html.dark .iq-progress-tab-score {
  color: #14B8A6;
}

.iq-progress-tab-bar {
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: rgba(120, 113, 108, 0.12);
  overflow: hidden;
}
[data-theme="dark"] .iq-progress-tab-bar,
html.dark .iq-progress-tab-bar {
  background: rgba(255, 255, 255, 0.08);
}

.iq-progress-tab-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #0D9488, #14B8A6);
  width: 0%;
}


/* ── Progress panel (slides from left) ── */
.iq-progress-panel {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 320px;
  z-index: 9999;
  background: rgba(255, 253, 250, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid rgba(168, 162, 158, 0.15);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  display: flex;
  flex-direction: column;
  will-change: transform;
}
[data-theme="dark"] .iq-progress-panel,
html.dark .iq-progress-panel {
  background: rgba(28, 25, 23, 0.95);
  border-right-color: rgba(255, 255, 255, 0.06);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
}


/* ── Panel header ── */
.iq-progress-header {
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(168, 162, 158, 0.12);
}
[data-theme="dark"] .iq-progress-header,
html.dark .iq-progress-header {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.iq-progress-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.iq-progress-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #1C1917);
}

.iq-progress-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.iq-progress-close {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-muted, #A8A29E);
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
}
.iq-progress-close:hover {
  background: rgba(120, 113, 108, 0.1);
  color: var(--text, #1C1917);
}
[data-theme="dark"] .iq-progress-close:hover,
html.dark .iq-progress-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text, #F5F3F0);
}

.iq-progress-total {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #1C1917);
  margin-bottom: 6px;
}

.iq-progress-total-num {
  color: var(--accent, #0D9488);
  font-weight: 700;
}
[data-theme="dark"] .iq-progress-total-num,
html.dark .iq-progress-total-num {
  color: var(--accent-light, #14B8A6);
}

.iq-progress-total-answered {
  color: var(--text-muted, #A8A29E);
  font-weight: 500;
  font-size: 12px;
}

.iq-progress-total-bar {
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: rgba(120, 113, 108, 0.12);
  overflow: hidden;
}
[data-theme="dark"] .iq-progress-total-bar,
html.dark .iq-progress-total-bar {
  background: rgba(255, 255, 255, 0.08);
}

.iq-progress-total-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #0D9488, #14B8A6);
  width: 0%;
}


/* ── Panel body (scrollable section list) ── */
.iq-progress-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}

.iq-progress-category-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted, #A8A29E);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 12px;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(168, 162, 158, 0.08);
}
.iq-progress-category-name:first-child {
  margin-top: 0;
}
[data-theme="dark"] .iq-progress-category-name,
html.dark .iq-progress-category-name {
  border-bottom-color: rgba(255, 255, 255, 0.04);
}

.iq-progress-section-row {
  display: grid;
  grid-template-columns: 1fr auto 48px 10px;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  border-radius: 8px;
  cursor: pointer;
}
.iq-progress-section-row:hover {
  background: rgba(120, 113, 108, 0.06);
}
[data-theme="dark"] .iq-progress-section-row:hover,
html.dark .iq-progress-section-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.iq-progress-section-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #1C1917);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iq-progress-section-fraction {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #A8A29E);
  white-space: nowrap;
}

.iq-progress-section-bar {
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: rgba(120, 113, 108, 0.1);
  overflow: hidden;
}
[data-theme="dark"] .iq-progress-section-bar,
html.dark .iq-progress-section-bar {
  background: rgba(255, 255, 255, 0.06);
}

.iq-progress-section-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #0D9488, #14B8A6);
}

.iq-progress-section-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.iq-progress-section-status.not-started {
  background: rgba(120, 113, 108, 0.2);
}
[data-theme="dark"] .iq-progress-section-status.not-started,
html.dark .iq-progress-section-status.not-started {
  background: rgba(255, 255, 255, 0.12);
}
.iq-progress-section-status.partial {
  background: #EAB308;
}
.iq-progress-section-status.all-correct {
  background: #16A34A;
}


/* ── Panel footer ── */
.iq-progress-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(168, 162, 158, 0.12);
  display: flex;
  gap: 8px;
}
[data-theme="dark"] .iq-progress-footer,
html.dark .iq-progress-footer {
  border-top-color: rgba(255, 255, 255, 0.06);
}

.iq-progress-retry-btn,
.iq-progress-reset-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  font: 600 12px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  cursor: pointer;
}
.iq-progress-retry-btn:hover,
.iq-progress-reset-btn:hover {
  transform: translateY(-1px);
}
.iq-progress-retry-btn:active,
.iq-progress-reset-btn:active {
  transform: scale(0.97);
}

.iq-progress-retry-btn {
  background: linear-gradient(135deg, #DC2626, #B91C1C);
  color: #fff;
  box-shadow: 0 1px 4px rgba(220, 38, 38, 0.2);
}
.iq-progress-retry-btn:hover {
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.iq-progress-reset-btn {
  background: rgba(120, 113, 108, 0.08);
  color: var(--text-muted, #78716C);
  border: 1px solid rgba(120, 113, 108, 0.15);
}
.iq-progress-reset-btn:hover {
  color: #DC2626;
  border-color: rgba(220, 38, 38, 0.3);
}
[data-theme="dark"] .iq-progress-reset-btn,
html.dark .iq-progress-reset-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-muted, #A8A29E);
}
[data-theme="dark"] .iq-progress-reset-btn:hover,
html.dark .iq-progress-reset-btn:hover {
  color: #EF4444;
  border-color: rgba(239, 68, 68, 0.3);
}


/* ── Backdrop (mobile overlay) ── */
.iq-progress-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .iq-progress-backdrop,
html.dark .iq-progress-backdrop {
  background: rgba(0, 0, 0, 0.5);
}

/* ── Edge trigger (left-edge hover zone for panel access) ── */
.iq-edge-trigger {
  position: fixed;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 14px;
  z-index: 9997;
  cursor: pointer;
}
.iq-edge-trigger::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 32px;
  border-radius: 0 3px 3px 0;
  background: rgba(13, 148, 136, 0);
}
.iq-edge-trigger:hover::after {
  background: rgba(13, 148, 136, 0.5);
  height: 48px;
}
[data-theme="dark"] .iq-edge-trigger:hover::after,
html.dark .iq-edge-trigger:hover::after {
  background: rgba(20, 184, 166, 0.5);
}
/* ── Edge trigger hint label ── */
.iq-edge-hint {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 11px;
  color: rgba(13, 148, 136, 0);
  background: var(--card, #fff);
  padding: 4px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  pointer-events: none;
  opacity: 0;
}
.iq-edge-trigger:hover .iq-edge-hint {
  color: rgba(13, 148, 136, 0.9);
  opacity: 1;
}
[data-theme="dark"] .iq-edge-hint,
html.dark .iq-edge-hint {
  background: var(--card, #1e293b);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
[data-theme="dark"] .iq-edge-trigger:hover .iq-edge-hint,
html.dark .iq-edge-trigger:hover .iq-edge-hint {
  color: rgba(20, 184, 166, 0.9);
}


/* ── Locked state (answered, no more interaction) ── */
.iq-zone.locked .iq-choice,
.iq-zone.locked .iq-chip,
.iq-zone.locked .iq-check-btn {
  pointer-events: none;
}


/* ── Responsive ── */
/* ── Tablet (768-1024px) ── */
@media (min-width: 601px) and (max-width: 1024px) {
  .iq-choice {
    min-height: 48px;
    padding: 12px 16px;
    font-size: 15px;
  }
  .iq-chip {
    padding: 7px 14px;
    font-size: 14px;
  }
  .iq-progress-panel {
    width: 340px;
  }
  .iq-focus-arrow {
    font-size: 28px;
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 600px) {
  .iq-progress-tab {
    bottom: 12px;
    left: 12px;
    padding: 6px 10px;
    gap: 6px;
  }
  .iq-progress-tab-score { font-size: 11px; }
  .iq-progress-tab-bar { width: 36px; }
  .iq-edge-trigger { display: none; }

  .iq-progress-panel {
    width: 280px;
  }

  .iq-choice {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
  }
  .iq-chip {
    padding: 5px 10px;
    font-size: 12px;
  }
}


/* ── Error correction text input ── */
.iq-correction-input {
  display: block;
  width: 100%;
  max-width: 300px;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1.5px solid rgba(120, 113, 108, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  font: 500 15px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color: var(--text, #1C1917);
}
.iq-correction-input:focus {
  outline: none;
  border-color: #0D9488;
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.1);
}
.iq-correction-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
[data-theme="dark"] .iq-correction-input,
html.dark .iq-correction-input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text, #F5F3F0);
}
[data-theme="dark"] .iq-correction-input:focus,
html.dark .iq-correction-input:focus {
  border-color: #14B8A6;
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15);
}

.iq-correction-answer {
  margin-top: 4px;
  font: 600 14px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color: #16A34A;
}
[data-theme="dark"] .iq-correction-answer,
html.dark .iq-correction-answer {
  color: #22C55E;
}


/* ── Error highlight (single-underline correction) ── */
.iq-error-highlight {
  background: rgba(234, 179, 8, 0.15);
  padding: 1px 4px;
  border-radius: 4px;
  border-bottom: 2px solid #EAB308;
}
[data-theme="dark"] .iq-error-highlight,
html.dark .iq-error-highlight {
  background: rgba(250, 204, 21, 0.12);
  border-bottom-color: #FACC15;
}
.iq-error-highlight.correct {
  background: rgba(22, 163, 74, 0.12);
  border-bottom-color: #16A34A;
}
[data-theme="dark"] .iq-error-highlight.correct,
html.dark .iq-error-highlight.correct {
  background: rgba(34, 197, 94, 0.1);
  border-bottom-color: #22C55E;
}
.iq-error-highlight.wrong {
  background: rgba(220, 38, 38, 0.1);
  border-bottom-color: #DC2626;
}
[data-theme="dark"] .iq-error-highlight.wrong,
html.dark .iq-error-highlight.wrong {
  background: rgba(239, 68, 68, 0.08);
  border-bottom-color: #EF4444;
}


/* ── Fill-in-the-blank inline inputs ── */
.iq-fillin-input {
  display: inline-block;
  width: 70px;
  border: none;
  border-bottom: 2px solid rgba(120, 113, 108, 0.3);
  background: transparent;
  text-align: center;
  font: inherit;
  padding: 2px 4px;
  margin: 0 2px;
  border-radius: 0;
  outline: none;
}
.iq-fillin-input:focus {
  border-bottom-color: #0D9488;
}
.iq-fillin-input:disabled {
  opacity: 0.7;
}
.iq-fillin-input.correct {
  border-bottom-color: #16A34A;
  color: #16A34A;
  font-weight: 600;
}
.iq-fillin-input.wrong {
  border-bottom-color: #DC2626;
  color: #DC2626;
}
[data-theme="dark"] .iq-fillin-input,
html.dark .iq-fillin-input {
  border-bottom-color: rgba(255, 255, 255, 0.25);
  color: var(--text, #F5F3F0);
}
[data-theme="dark"] .iq-fillin-input:focus,
html.dark .iq-fillin-input:focus {
  border-bottom-color: #14B8A6;
}
[data-theme="dark"] .iq-fillin-input.correct,
html.dark .iq-fillin-input.correct {
  border-bottom-color: #22C55E;
  color: #22C55E;
}
[data-theme="dark"] .iq-fillin-input.wrong,
html.dark .iq-fillin-input.wrong {
  border-bottom-color: #EF4444;
  color: #EF4444;
}


/* ── Compose (free-form writing with self-evaluation) ── */
.iq-compose-input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid rgba(120, 113, 108, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  font: 500 15px/1.5 -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color: var(--text, #1C1917);
  resize: vertical;
}
.iq-compose-input:focus {
  outline: none;
  border-color: #0D9488;
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.1);
}
.iq-compose-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
[data-theme="dark"] .iq-compose-input,
html.dark .iq-compose-input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text, #F5F3F0);
}
[data-theme="dark"] .iq-compose-input:focus,
html.dark .iq-compose-input:focus {
  border-color: #14B8A6;
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15);
}

.iq-compose-reveal {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(13, 148, 136, 0.06);
  border-left: 3px solid #0D9488;
  font: 500 15px/1.5 -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color: var(--text, #1C1917);
}
[data-theme="dark"] .iq-compose-reveal,
html.dark .iq-compose-reveal {
  background: rgba(20, 184, 166, 0.08);
  border-left-color: #14B8A6;
  color: var(--text, #F5F3F0);
}

.iq-self-eval {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.iq-eval-btn {
  flex: 1 1 0;
  padding: 8px 16px;
  border: none;
  border-radius: 10px;
  font: 600 14px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color: #fff;
  cursor: pointer;
}
.iq-eval-btn:hover {
  transform: translateY(-1px);
}
.iq-eval-btn:active {
  transform: scale(0.97);
}
.iq-eval-btn.right {
  background: linear-gradient(135deg, #16A34A, #15803D);
  box-shadow: 0 1px 4px rgba(22, 163, 74, 0.2);
}
.iq-eval-btn.right:hover {
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
}
.iq-eval-btn.wrong {
  background: linear-gradient(135deg, #DC2626, #B91C1C);
  box-shadow: 0 1px 4px rgba(220, 38, 38, 0.2);
}
.iq-eval-btn.wrong:hover {
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}


/* ── Scramble sentence frame (prefix/suffix around answer zone) ── */
.iq-scramble-frame {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 42px;
}
.iq-scramble-context {
  font: 500 15px/1.4 -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color: var(--text, #1C1917);
  white-space: nowrap;
}
[data-theme="dark"] .iq-scramble-context,
html.dark .iq-scramble-context {
  color: var(--text, #F5F3F0);
}


/* ── Hide static choices/scramble when interactive UI is present ── */
.qcard-question:has(.iq-zone) > .choices,
.qcard-question:has(.iq-zone) > .scramble {
  display: none;
}


/* ── Wrong Answer Review ── */
.iq-review-nav {
  position: fixed;
  bottom: 80px;
  left: 24px;
  z-index: 9997;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 253, 250, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(220, 38, 38, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  max-width: 280px;
}
[data-theme="dark"] .iq-review-nav,
html.dark .iq-review-nav {
  background: rgba(28, 25, 23, 0.9);
  border-color: rgba(239, 68, 68, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.iq-review-label {
  width: 100%;
  font: 600 11px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color: #DC2626;
  margin-bottom: 2px;
}
[data-theme="dark"] .iq-review-label,
html.dark .iq-review-label {
  color: #EF4444;
}

.iq-review-sec-btn {
  padding: 4px 10px;
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 6px;
  background: rgba(220, 38, 38, 0.06);
  color: #DC2626;
  font: 600 11px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  cursor: pointer;
}
.iq-review-sec-btn:hover {
  background: rgba(220, 38, 38, 0.12);
  transform: translateY(-1px);
}
[data-theme="dark"] .iq-review-sec-btn,
html.dark .iq-review-sec-btn {
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.08);
  color: #EF4444;
}


/* ── Student Response Aggregation (teacher panel) ── */
.sr-section-responses {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(120, 113, 108, 0.04);
  border: 1px solid rgba(168, 162, 158, 0.12);
}
[data-theme="dark"] .sr-section-responses,
html.dark .sr-section-responses {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

.sr-total {
  font: 600 10px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color: var(--text-muted, #A8A29E);
  margin-bottom: 4px;
}

.sr-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  height: 20px;
}

.sr-label {
  font: 700 11px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color: #57534E;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
[data-theme="dark"] .sr-label,
html.dark .sr-label {
  color: #D6D3D1;
}
.sr-label.sr-text-label {
  width: auto;
  max-width: 120px;
  text-align: left;
  font-weight: 600;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-fill-track {
  flex: 1;
  height: 14px;
  border-radius: 4px;
  background: rgba(120, 113, 108, 0.08);
  overflow: hidden;
}
[data-theme="dark"] .sr-fill-track,
html.dark .sr-fill-track {
  background: rgba(255, 255, 255, 0.06);
}

.sr-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #0D9488, #14B8A6);
  min-width: 2px;
}

.sr-count {
  font: 700 11px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color: #44403C;
  width: 20px;
  text-align: right;
  flex-shrink: 0;
}
[data-theme="dark"] .sr-count,
html.dark .sr-count {
  color: #E7E5E4;
}

.sr-question-label {
  font: 700 11px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color: #0D9488;
  margin-bottom: 4px;
}
[data-theme="dark"] .sr-question-label,
html.dark .sr-question-label { color: #14B8A6; }

.sr-fill.sr-correct { background: linear-gradient(90deg, #16A34A, #22C55E); }
.sr-fill.sr-wrong { background: linear-gradient(90deg, #DC2626, #EF4444); }
.sr-label.sr-correct { color: #16A34A; }
.sr-label.sr-wrong { color: #DC2626; }
[data-theme="dark"] .sr-label.sr-correct,
html.dark .sr-label.sr-correct { color: #22C55E; }
[data-theme="dark"] .sr-label.sr-wrong,
html.dark .sr-label.sr-wrong { color: #EF4444; }

.sr-question-display {
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(168, 162, 158, 0.1);
}
.sr-question-display:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}



@media (max-width: 600px) {
  .iq-review-nav {
    bottom: 64px;
    left: 12px;
    max-width: 240px;
  }
}

/* ── Gamification: Streak ── */

.iq-streak {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #e65100;
  white-space: nowrap;
}

.iq-streak-pulse {
  animation: iq-streak-pop 0.4s ease-out;
}

@keyframes iq-streak-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}

/* ── Gamification: Trophy Button ── */

.iq-trophy-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 2px 4px;
  margin-left: 6px;
  line-height: 1;
  opacity: 0.7;
}
.iq-trophy-btn:hover {
  opacity: 1;
  transform: scale(1.15);
}

/* ── Gamification: Badge Panel ── */

.iq-badge-panel {
  position: fixed;
  bottom: 60px;
  left: 16px;
  width: 320px;
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  padding: 16px;
  z-index: 10001;
  animation: iq-panel-in 0.25s ease-out;
}

@keyframes iq-panel-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.iq-badge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
}
.iq-badge-count {
  font-size: 12px;
  color: #888;
  font-weight: 500;
}

.iq-badge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.iq-badge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 6px;
  border-radius: 8px;
  background: #f5f5f5;
  opacity: 0.45;
  filter: grayscale(1);
}
.iq-badge-card.iq-badge-earned {
  opacity: 1;
  filter: none;
  background: #fffde7;
}

.iq-badge-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 4px;
}
.iq-badge-name {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 2px;
}
.iq-badge-desc {
  font-size: 10px;
  color: #777;
}

.iq-badge-reset {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 6px;
  background: none;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 11px;
  color: #999;
  cursor: pointer;
}
.iq-badge-reset:hover {
  color: #e53935;
  border-color: #e53935;
}

.iq-badge-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #999;
  padding: 2px 6px;
  line-height: 1;
}
.iq-badge-close:hover {
  color: #333;
}

/* ── Gamification: Toast ── */

.iq-toast {
  position: fixed;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #fff8e1, #fff3c4);
  color: #5d4037;
  border: 1px solid #ffd54f;
  border-radius: 12px;
  padding: 12px 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  z-index: 10002;
  white-space: nowrap;
}
.iq-toast-show {
  bottom: 80px;
}
.iq-toast-hide {
  opacity: 0;
  bottom: 80px;
}
.iq-toast-icon {
  font-size: 28px;
  line-height: 1;
}
.iq-toast-text {
  font-size: 13px;
  line-height: 1.3;
}
.iq-toast-text strong {
  font-size: 14px;
}

/* ── Gamification: Dark Mode ── */

[data-theme="dark"] .iq-streak,
html.dark .iq-streak {
  color: #ffab40;
}
[data-theme="dark"] .iq-streak-pulse,
html.dark .iq-streak-pulse {
  color: #ffab40;
}
[data-theme="dark"] .iq-badge-panel,
html.dark .iq-badge-panel {
  background: #1e1e1e;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
[data-theme="dark"] .iq-badge-header,
html.dark .iq-badge-header {
  border-bottom-color: #333;
}
[data-theme="dark"] .iq-badge-count,
html.dark .iq-badge-count {
  color: #aaa;
}
[data-theme="dark"] .iq-badge-card,
html.dark .iq-badge-card {
  background: #2a2a2a;
}
[data-theme="dark"] .iq-badge-card.iq-badge-earned,
html.dark .iq-badge-card.iq-badge-earned {
  background: #3a3520;
}
[data-theme="dark"] .iq-badge-desc,
html.dark .iq-badge-desc {
  color: #999;
}
[data-theme="dark"] .iq-badge-reset,
html.dark .iq-badge-reset {
  border-color: #444;
  color: #777;
}
[data-theme="dark"] .iq-badge-reset:hover,
html.dark .iq-badge-reset:hover {
  color: #ef5350;
  border-color: #ef5350;
}
[data-theme="dark"] .iq-badge-close,
html.dark .iq-badge-close {
  color: #777;
}
[data-theme="dark"] .iq-badge-close:hover,
html.dark .iq-badge-close:hover {
  color: #ddd;
}
[data-theme="dark"] .iq-toast,
html.dark .iq-toast {
  background: linear-gradient(135deg, #3a3520, #332d18);
  color: #ffe0b2;
  border-color: #8d6e00;
}

/* ── Gamification: Mobile ── */

@media (max-width: 600px) {
  .iq-badge-panel {
    width: calc(100vw - 32px);
    left: 16px;
    bottom: 56px;
  }
  .iq-toast {
    width: calc(100vw - 40px);
    white-space: normal;
  }
}

/* ── Gamification: Reduced Motion ── */

@media (prefers-reduced-motion: reduce) {
  .iq-streak-pulse {
    animation: none;
  }
  .iq-badge-panel {
    animation: none;
  }
}


/* ══════════════════════════════════════════════════════════
   Check Popup (appears above selected element)
   ══════════════════════════════════════════════════════════ */

.iq-check-popup {
  position: absolute;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(13, 148, 136, 0.25);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(13, 148, 136, 0.1);
  white-space: nowrap;
  pointer-events: auto;
}
.iq-check-popup::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.08));
}
.iq-check-popup.below::after {
  bottom: auto;
  top: -7px;
  border-top: none;
  border-bottom: 7px solid rgba(255, 255, 255, 0.92);
}

.iq-popup-check-btn {
  padding: 6px 20px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #0D9488, #0F766E);
  color: #fff;
  font: 600 13px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(13, 148, 136, 0.25);
}
.iq-popup-check-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.35);
}
.iq-popup-check-btn:active {
  transform: scale(0.96);
}

/* Result states */
.iq-check-popup.result {
  padding: 10px 18px;
  gap: 6px;
}
.iq-check-popup.result.correct {
  border-color: rgba(22, 163, 74, 0.4);
  background: rgba(240, 253, 244, 0.95);
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.15);
}
.iq-check-popup.result.incorrect {
  border-color: rgba(220, 38, 38, 0.4);
  background: rgba(254, 242, 242, 0.95);
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.15);
}
.iq-check-popup.result.correct::after {
  border-top-color: rgba(240, 253, 244, 0.95);
}
.iq-check-popup.result.correct.below::after {
  border-bottom-color: rgba(240, 253, 244, 0.95);
}
.iq-check-popup.result.incorrect::after {
  border-top-color: rgba(254, 242, 242, 0.95);
}
.iq-check-popup.result.incorrect.below::after {
  border-bottom-color: rgba(254, 242, 242, 0.95);
}

.iq-popup-icon {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.iq-check-popup.correct .iq-popup-icon {
  color: #16A34A;
}
.iq-check-popup.incorrect .iq-popup-icon {
  color: #DC2626;
}

.iq-popup-msg {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  max-width: 260px;
  white-space: normal;
}
.iq-check-popup.correct .iq-popup-msg {
  color: #15803D;
}
.iq-check-popup.incorrect .iq-popup-msg {
  color: #B91C1C;
}

/* Dark mode */
[data-theme="dark"] .iq-check-popup,
html.dark .iq-check-popup {
  background: rgba(30, 30, 30, 0.92);
  border-color: rgba(20, 184, 166, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .iq-check-popup::after,
html.dark .iq-check-popup::after {
  border-top-color: rgba(30, 30, 30, 0.92);
}
[data-theme="dark"] .iq-check-popup.below::after,
html.dark .iq-check-popup.below::after {
  border-bottom-color: rgba(30, 30, 30, 0.92);
}
[data-theme="dark"] .iq-popup-check-btn,
html.dark .iq-popup-check-btn {
  background: linear-gradient(135deg, #14B8A6, #0D9488);
}
[data-theme="dark"] .iq-check-popup.result.correct,
html.dark .iq-check-popup.result.correct {
  background: rgba(22, 101, 52, 0.9);
  border-color: rgba(34, 197, 94, 0.4);
}
[data-theme="dark"] .iq-check-popup.result.correct::after,
html.dark .iq-check-popup.result.correct::after {
  border-top-color: rgba(22, 101, 52, 0.9);
}
[data-theme="dark"] .iq-check-popup.result.correct.below::after,
html.dark .iq-check-popup.result.correct.below::after {
  border-bottom-color: rgba(22, 101, 52, 0.9);
}
[data-theme="dark"] .iq-check-popup.correct .iq-popup-icon,
html.dark .iq-check-popup.correct .iq-popup-icon {
  color: #4ADE80;
}
[data-theme="dark"] .iq-check-popup.correct .iq-popup-msg,
html.dark .iq-check-popup.correct .iq-popup-msg {
  color: #BBF7D0;
}
[data-theme="dark"] .iq-check-popup.result.incorrect,
html.dark .iq-check-popup.result.incorrect {
  background: rgba(127, 29, 29, 0.9);
  border-color: rgba(239, 68, 68, 0.4);
}
[data-theme="dark"] .iq-check-popup.result.incorrect::after,
html.dark .iq-check-popup.result.incorrect::after {
  border-top-color: rgba(127, 29, 29, 0.9);
}
[data-theme="dark"] .iq-check-popup.result.incorrect.below::after,
html.dark .iq-check-popup.result.incorrect.below::after {
  border-bottom-color: rgba(127, 29, 29, 0.9);
}
[data-theme="dark"] .iq-check-popup.incorrect .iq-popup-icon,
html.dark .iq-check-popup.incorrect .iq-popup-icon {
  color: #FCA5A5;
}
[data-theme="dark"] .iq-check-popup.incorrect .iq-popup-msg,
html.dark .iq-check-popup.incorrect .iq-popup-msg {
  color: #FECACA;
}


/* ══════════════════════════════════════════════════════════
   Confirmation Dialog (GSAP-animated overlay)
   ══════════════════════════════════════════════════════════ */

.iq-confirm-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
}

.iq-confirm-dialog {
  position: relative;
  width: 340px;
  max-width: calc(100vw - 40px);
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
}

.iq-retry-close {
  position: absolute;
  top: 8px;
  right: 8px;
}

.iq-confirm-title {
  font: 700 17px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color: #1a1a1a;
  margin-bottom: 10px;
}

.iq-confirm-text {
  font-size: 14px;
  line-height: 1.5;
  color: #555;
  margin-bottom: 20px;
}

.iq-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.iq-confirm-cancel {
  padding: 8px 18px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f5f5f5;
  color: #555;
  font: 600 13px -apple-system, BlinkMacSystemFont, sans-serif;
  cursor: pointer;
}
.iq-confirm-cancel:hover {
  background: #eee;
}

.iq-confirm-ok {
  padding: 8px 18px;
  border: none;
  border-radius: 8px;
  background: #DC2626;
  color: #fff;
  font: 600 13px -apple-system, BlinkMacSystemFont, sans-serif;
  cursor: pointer;
}
.iq-confirm-ok:hover {
  background: #B91C1C;
}
.iq-confirm-ok:active {
  transform: scale(0.97);
}

/* Confirm dialog dark mode */
[data-theme="dark"] .iq-confirm-dialog,
html.dark .iq-confirm-dialog {
  background: #1e1e1e;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .iq-confirm-title,
html.dark .iq-confirm-title {
  color: #eee;
}
[data-theme="dark"] .iq-confirm-text,
html.dark .iq-confirm-text {
  color: #aaa;
}
[data-theme="dark"] .iq-confirm-cancel,
html.dark .iq-confirm-cancel {
  background: #333;
  border-color: #444;
  color: #ccc;
}
[data-theme="dark"] .iq-confirm-cancel:hover,
html.dark .iq-confirm-cancel:hover {
  background: #3a3a3a;
}


/* ══════════════════════════════════════════════════════════
   Popup + Retry + Dialog: Reduced Motion
   ══════════════════════════════════════════════════════════ */

/* ── Retry Summary Overlay ── */
.iq-retry-summary-icon {
  font-size: 36px;
  text-align: center;
  margin-bottom: 8px;
}
.iq-retry-summary-score {
  text-align: center;
  margin-bottom: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
}
.iq-retry-summary-num {
  font-size: 40px;
  font-weight: 800;
  color: #0D9488;
}
.iq-retry-summary-sep {
  font-size: 28px;
  font-weight: 300;
  color: #A8A29E;
  margin: 0 2px;
}
.iq-retry-summary-den {
  font-size: 28px;
  font-weight: 700;
  color: #57534E;
}
.iq-retry-summary-label {
  font-size: 14px;
  font-weight: 500;
  color: #78716C;
  margin-left: 4px;
}
.iq-retry-summary-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 12px;
}
.iq-retry-dot {
  padding: 3px 8px;
  border-radius: 6px;
  font: 700 11px -apple-system, BlinkMacSystemFont, sans-serif;
}
.iq-retry-dot.correct {
  background: rgba(22, 163, 74, 0.1);
  color: #16A34A;
}
.iq-retry-dot.wrong {
  background: rgba(220, 38, 38, 0.1);
  color: #DC2626;
}

/* Retry Summary: Dark mode */
[data-theme="dark"] .iq-retry-summary-num,
html.dark .iq-retry-summary-num { color: #14B8A6; }
[data-theme="dark"] .iq-retry-summary-den,
html.dark .iq-retry-summary-den { color: #D6D3D1; }
[data-theme="dark"] .iq-retry-summary-label,
html.dark .iq-retry-summary-label { color: #A8A29E; }
[data-theme="dark"] .iq-retry-dot.correct,
html.dark .iq-retry-dot.correct {
  background: rgba(22, 163, 74, 0.15);
  color: #22C55E;
}
[data-theme="dark"] .iq-retry-dot.wrong,
html.dark .iq-retry-dot.wrong {
  background: rgba(220, 38, 38, 0.15);
  color: #EF4444;
}

@media (prefers-reduced-motion: reduce) {
  .iq-check-popup,
  .iq-confirm-overlay,
  .iq-confirm-dialog {
    animation-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════
   Popup + Retry: Mobile
   ══════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .iq-popup-msg {
    max-width: 180px;
  }
}


/* ══════════════════════════════════════════════════════════
   Loading Spinner (CSS-only, for Firebase operations)
   ══════════════════════════════════════════════════════════ */

.iq-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: var(--text-muted, #A8A29E);
  font: 500 14px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
}

.iq-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(13, 148, 136, 0.2);
  border-top-color: #0D9488;
  border-radius: 50%;
  animation: iq-spin 0.6s linear infinite;
  flex-shrink: 0;
}
[data-theme="dark"] .iq-spinner,
html.dark .iq-spinner {
  border-color: rgba(20, 184, 166, 0.2);
  border-top-color: #14B8A6;
}

@keyframes iq-spin {
  to { transform: rotate(360deg); }
}

/* Skeleton placeholder for answer content */
.iq-skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
}
.iq-skeleton-line {
  height: 14px;
  border-radius: 4px;
  background: rgba(120, 113, 108, 0.1);
  animation: iq-skeleton-pulse 1.5s ease-in-out infinite;
}
.iq-skeleton-line:nth-child(1) { width: 60%; }
.iq-skeleton-line:nth-child(2) { width: 80%; }
.iq-skeleton-line:nth-child(3) { width: 45%; }

[data-theme="dark"] .iq-skeleton-line,
html.dark .iq-skeleton-line {
  background: rgba(255, 255, 255, 0.06);
}

@keyframes iq-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Teacher login button loading state */
.tr-login-btn.loading {
  pointer-events: none;
  opacity: 0.7;
}
.tr-login-btn.loading::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: iq-spin 0.6s linear infinite;
  vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
  .iq-spinner,
  .iq-skeleton-line,
  .tr-login-btn.loading::after {
    animation-duration: 0.01ms !important;
  }
}


/* ══════════════════════════════════════════════════════════
   Offline Banner (Firebase connection monitor)
   ══════════════════════════════════════════════════════════ */

.iq-offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  padding: 8px 16px;
  background: #92400E;
  color: #FEF3C7;
  font: 600 13px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}


/* ══════════════════════════════════════════════════════════
   Spaced Repetition Review UI
   ══════════════════════════════════════════════════════════ */

.sr-review-container {
  margin-top: 24px;
}

.sr-review-btn {
  position: relative;
  padding: 14px 28px;
  border: 2px solid var(--border, #E7E5E4);
  border-radius: 100px;
  background: var(--card, #fff);
  color: var(--text, #1C1917);
  font: 600 15px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  cursor: pointer;
}
.sr-review-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.sr-review-btn--due {
  border-color: #F59E0B;
  background: rgba(245, 158, 11, 0.06);
  color: #92400E;
}
[data-theme="dark"] .sr-review-btn--due,
html.dark .sr-review-btn--due {
  border-color: #D97706;
  background: rgba(217, 119, 6, 0.1);
  color: #FCD34D;
}
.sr-review-btn--none {
  opacity: 0.5;
  cursor: default;
}

.sr-review-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #EF4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  margin-left: 10px;
  vertical-align: middle;
}

/* Review Modal */
.sr-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
}

.sr-modal {
  width: 90vw;
  max-width: 1000px;
  max-height: 80vh;
  background: var(--card, #fff);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
[data-theme="dark"] .sr-modal,
html.dark .sr-modal {
  background: var(--card, #1e1e1e);
}

.sr-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, #E7E5E4);
}
[data-theme="dark"] .sr-modal-header,
html.dark .sr-modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.sr-modal-title {
  font: 700 16px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color: var(--text, #1C1917);
}

.sr-modal-counter {
  font: 600 13px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color: var(--text-muted, #A8A29E);
  margin-left: auto;
}

.sr-modal-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-muted, #A8A29E);
  padding: 4px 8px;
  border-radius: 6px;
}
.sr-modal-close:hover {
  background: rgba(120, 113, 108, 0.1);
}

.sr-modal-body {
  padding: 32px 40px;
  overflow-y: auto;
  flex: 1;
}

.sr-modal-question {
  font: 500 18px/1.6 -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color: var(--text, #1C1917);
  margin-bottom: 16px;
}

.sr-modal-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.sr-modal-choice-item {
  padding: 5px 12px;
  border-radius: 6px;
  background: rgba(120, 113, 108, 0.06);
  color: var(--text, #1C1917);
  font: 400 14px/1.4 -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  border: 1px solid rgba(120, 113, 108, 0.12);
}
[data-theme="dark"] .sr-modal-choice-item,
html.dark .sr-modal-choice-item {
  background: rgba(168, 162, 158, 0.08);
  color: var(--text, #E7E5E4);
  border-color: rgba(168, 162, 158, 0.15);
}

.sr-modal-box {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(13, 148, 136, 0.08);
  color: #0D9488;
  font: 600 12px -apple-system, BlinkMacSystemFont, sans-serif;
  margin-bottom: 12px;
}
[data-theme="dark"] .sr-modal-box,
html.dark .sr-modal-box {
  background: rgba(20, 184, 166, 0.1);
  color: #14B8A6;
}

.sr-modal-wrong {
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.15);
  color: #DC2626;
  font: 500 14px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  margin-bottom: 16px;
}
[data-theme="dark"] .sr-modal-wrong,
html.dark .sr-modal-wrong {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
  color: #EF4444;
}
.iq-choice.sr-prev-wrong {
  opacity: 0.45;
  border-style: dashed;
}
[data-theme="dark"] .iq-choice.sr-prev-wrong,
html.dark .iq-choice.sr-prev-wrong {
  opacity: 0.4;
}
.iq-error-option.sr-prev-wrong {
  opacity: 0.45;
  outline: 2px dashed rgba(220, 38, 38, 0.4);
  outline-offset: 1px;
}
[data-theme="dark"] .iq-error-option.sr-prev-wrong,
html.dark .iq-error-option.sr-prev-wrong {
  opacity: 0.4;
}

.sr-modal-reveal-btn {
  display: block;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #0D9488, #0F766E);
  color: #fff;
  font: 600 15px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  cursor: pointer;
}
.sr-modal-reveal-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3);
}

.sr-modal-answer {
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(22, 163, 74, 0.06);
  border: 1px solid rgba(22, 163, 74, 0.2);
  color: #16A34A;
  font: 600 15px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  margin-bottom: 16px;
}
[data-theme="dark"] .sr-modal-answer,
html.dark .sr-modal-answer {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.2);
  color: #22C55E;
}

.sr-modal-eval {
  display: flex;
  gap: 10px;
}

.sr-modal-eval-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font: 600 14px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color: #fff;
  cursor: pointer;
}
.sr-modal-eval-btn:hover {
  transform: translateY(-1px);
}
.sr-modal-eval-btn.sr-correct {
  background: linear-gradient(135deg, #16A34A, #15803D);
}
.sr-modal-eval-btn.sr-wrong {
  background: linear-gradient(135deg, #DC2626, #B91C1C);
}

.sr-modal-done {
  text-align: center;
  padding: 32px 0;
  font: 600 18px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color: #16A34A;
}
[data-theme="dark"] .sr-modal-done,
html.dark .sr-modal-done {
  color: #22C55E;
}

/* ── Review modal card override ── */
.sr-review-card {
  margin: 0;
  border: 1px solid var(--border-visible, rgba(120, 113, 108, 0.15));
  border-radius: var(--radius, 20px);
  box-shadow: none;
}
.sr-review-card .qcard-question {
  border-bottom: none;
}
.sr-review-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

/* ── Scramble chips in review modal ── */
.sr-scramble-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.sr-scramble-chip {
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--border, #E7E5E4);
  background: var(--card, #fff);
  cursor: pointer;
  font: 500 14px/1 -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color: var(--text, #1C1917);
}
.sr-scramble-chip:hover {
  background: rgba(13, 148, 136, 0.06);
  border-color: #0D9488;
}
.sr-scramble-chip.used {
  opacity: 0.3;
  pointer-events: none;
}
[data-theme="dark"] .sr-scramble-chip,
html.dark .sr-scramble-chip {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text, #F5F3F0);
}
[data-theme="dark"] .sr-scramble-chip:hover,
html.dark .sr-scramble-chip:hover {
  background: rgba(20, 184, 166, 0.1);
  border-color: #14B8A6;
}
.sr-scramble-answer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 44px;
  padding: 12px;
  border: 2px dashed var(--border, #E7E5E4);
  border-radius: 12px;
  margin-bottom: 12px;
}
[data-theme="dark"] .sr-scramble-answer,
html.dark .sr-scramble-answer {
  border-color: rgba(255, 255, 255, 0.1);
}
.sr-scramble-placed {
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(13, 148, 136, 0.08);
  color: #0D9488;
  cursor: pointer;
  font: 500 14px/1 -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
}
[data-theme="dark"] .sr-scramble-placed,
html.dark .sr-scramble-placed {
  background: rgba(20, 184, 166, 0.12);
  color: #14B8A6;
}


/* ══════════════════════════════════════════════════════════
   Leaderboard
   ══════════════════════════════════════════════════════════ */

.lb-panel {
  position: fixed;
  top: 80px;
  right: 16px;
  width: 260px;
  z-index: 9998;
  background: rgba(255, 253, 250, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(168, 162, 158, 0.15);
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
}
[data-theme="dark"] .lb-panel,
html.dark .lb-panel {
  background: rgba(28, 25, 23, 0.95);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.lb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(168, 162, 158, 0.1);
}
[data-theme="dark"] .lb-header,
html.dark .lb-header {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.lb-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #1C1917);
}

.lb-close {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  color: var(--text-muted, #A8A29E);
  padding: 2px 6px;
  border-radius: 4px;
}
.lb-close:hover {
  background: rgba(120, 113, 108, 0.1);
}

.lb-list {
  padding: 8px 12px;
  max-height: 300px;
  overflow-y: auto;
}

.lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 8px;
}
.lb-row--me {
  background: rgba(13, 148, 136, 0.06);
  border: 1px solid rgba(13, 148, 136, 0.15);
}
[data-theme="dark"] .lb-row--me,
html.dark .lb-row--me {
  background: rgba(20, 184, 166, 0.08);
  border-color: rgba(20, 184, 166, 0.15);
}

.lb-rank {
  width: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted, #A8A29E);
  flex-shrink: 0;
}

.lb-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #1C1917);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-score {
  font-size: 14px;
  font-weight: 700;
  color: #0D9488;
  flex-shrink: 0;
}
[data-theme="dark"] .lb-score,
html.dark .lb-score {
  color: #14B8A6;
}

.lb-separator {
  text-align: center;
  color: var(--text-muted, #A8A29E);
  font-size: 12px;
  padding: 4px 0;
}

.lb-empty {
  text-align: center;
  padding: 16px;
  color: var(--text-muted, #A8A29E);
  font-size: 13px;
}

/* Nickname dialog */
.lb-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
}

.lb-dialog {
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--card, #fff);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
  text-align: center;
}
[data-theme="dark"] .lb-dialog,
html.dark .lb-dialog {
  background: var(--card, #1e1e1e);
}

.lb-dialog-title {
  font: 700 18px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color: var(--text, #1C1917);
  margin-bottom: 6px;
}

.lb-dialog-subtitle {
  font-size: 13px;
  color: var(--text-muted, #A8A29E);
  margin-bottom: 20px;
}

.lb-dialog-input {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: 2px solid rgba(168, 162, 158, 0.2);
  border-radius: 10px;
  background: var(--card, #fff);
  font: 500 16px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color: var(--text, #1C1917);
  text-align: center;
  margin-bottom: 16px;
  box-sizing: border-box;
}
.lb-dialog-input:focus {
  outline: none;
  border-color: #0D9488;
}
[data-theme="dark"] .lb-dialog-input,
html.dark .lb-dialog-input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text, #F5F3F0);
}

.lb-dialog-btn {
  display: block;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #0D9488, #0F766E);
  color: #fff;
  font: 600 15px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  cursor: pointer;
}
.lb-dialog-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3);
}
.lb-dialog-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 600px) {
  .lb-panel {
    right: 8px;
    width: 220px;
    top: 68px;
  }
}


/* ── Update banner ── */
.iq-update-banner {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #1E293B;
  color: #F1F5F9;
  border-radius: 10px;
  font: 500 14px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: 10000;
}
.iq-update-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  background: #0D9488;
  color: #fff;
  font: 600 13px -apple-system, BlinkMacSystemFont, sans-serif;
  cursor: pointer;
}
.iq-update-btn:hover {
  background: #0F766E;
}

/* ── Install banner ── */
.iq-install-banner {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #1E293B;
  color: #F1F5F9;
  border-radius: 10px;
  font: 500 14px -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: 10000;
}
.iq-install-dismiss {
  background: none;
  border: none;
  color: #94A3B8;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}
.iq-install-dismiss:hover {
  color: #F1F5F9;
}

/* ── Keyboard hint badges ── */
.iq-kbd-hint {
  display: none;
  font: 600 10px/1 -apple-system, BlinkMacSystemFont, sans-serif;
  background: rgba(0, 0, 0, 0.08);
  color: #64748B;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
  pointer-events: none;
}
body.iq-kbd-hints-visible .iq-kbd-hint {
  display: inline;
}
html.dark .iq-kbd-hint {
  background: rgba(255, 255, 255, 0.1);
  color: #94A3B8;
}
@media (hover: none) {
  .iq-kbd-hint { display: none !important; }
  .iq-kbd-toggle { display: none !important; }
}

/* ── Nav toggle buttons (keyboard, mute, focus) ── */
.iq-kbd-toggle,
.iq-mute-toggle,
.iq-focus-toggle {
  background: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  color: #64748B;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iq-kbd-toggle:hover,
.iq-mute-toggle:hover,
.iq-focus-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #334155;
}
html.dark .iq-kbd-toggle,
html.dark .iq-mute-toggle,
html.dark .iq-focus-toggle {
  color: #94A3B8;
}
html.dark .iq-kbd-toggle:hover,
html.dark .iq-mute-toggle:hover,
html.dark .iq-focus-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #E2E8F0;
}
.iq-kbd-toggle.active,
.iq-focus-toggle.active {
  border-color: #0D9488;
  background: rgba(13, 148, 136, 0.08);
  color: #0D9488;
}
html.dark .iq-kbd-toggle.active,
html.dark .iq-focus-toggle.active {
  border-color: #2DD4BF;
  background: rgba(45, 212, 191, 0.1);
  color: #2DD4BF;
}
.iq-mute-toggle.muted {
  color: #DC2626;
}
html.dark .iq-mute-toggle.muted {
  color: #F87171;
}

/* ── Focus mode overlay ── */
.iq-focus-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 998;
  pointer-events: none;
  display: none;
}
.iq-focus-overlay.active {
  display: block;
}
.iq-focus-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  font-size: 24px;
  color: #334155;
  cursor: pointer;
  pointer-events: auto;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}
html.dark .iq-focus-arrow {
  background: rgba(30, 41, 59, 0.85);
  color: #E2E8F0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.iq-focus-prev { left: 16px; }
.iq-focus-next { right: 16px; }
.iq-focus-arrow:hover:not(:disabled) {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
}
html.dark .iq-focus-arrow:hover:not(:disabled) {
  background: rgba(30, 41, 59, 1);
}
.iq-focus-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
.iq-focus-indicator {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 16px;
  border-radius: 20px;
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, sans-serif;
  color: #334155;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  pointer-events: auto;
  z-index: 999;
}
html.dark .iq-focus-indicator {
  background: rgba(30, 41, 59, 0.9);
  color: #E2E8F0;
}
.iq-focus-exit {
  background: none;
  border: none;
  color: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  padding: 4px 8px 4px 10px;
  margin-left: 8px;
  cursor: pointer;
  opacity: 0.7;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.iq-focus-exit:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.06);
}
html.dark .iq-focus-exit:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ── Focus mode body state ── */
body.iq-focus-active .search-wrap,
body.iq-focus-active .sub-nav {
  display: none !important;
}
body.iq-focus-active .questions-list {
  contain: layout style;
}

/* ── Review modal responsive sizing ── */
@media (min-width: 1200px) {
  .sr-modal { max-width: 1100px; }
}
@media (min-width: 1440px) {
  .sr-modal { max-width: 1250px; }
}
@media (min-width: 1728px) {
  .sr-modal { max-width: 1400px; }
}

/* ── Focus mode mobile ── */
@media (max-width: 768px) {
  .iq-focus-prev,
  .iq-focus-next {
    top: auto;
    bottom: 80px;
    transform: none;
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  .iq-focus-prev { left: 16px; }
  .iq-focus-next { right: 16px; }
  .iq-focus-indicator {
    bottom: 84px;
  }
}