/* ════════════════════════════════════════
   QUIZ HUB — config page + Azota session
════════════════════════════════════════ */

/* ── Config page ─────────────────────── */
.qhub-wrap {
  padding: 16px 16px calc(var(--nav-h) + 24px);
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qhub-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Source grid (2×2) */
.qhub-src-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.qhub-src-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.qhub-src-btn:hover      { border-color: var(--purple); background: var(--purple-light); }
.qhub-src-btn--active    { border-color: var(--purple); background: var(--purple-light); }
.qhub-src-icon { font-size: 1.4rem; line-height: 1; }
.qhub-src-name { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.qhub-src-cnt  { font-size: 0.7rem; color: var(--text-muted); font-weight: 500; }

/* Count row */
.qhub-count-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.qhub-count-btn {
  padding: 10px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.qhub-count-btn:hover      { border-color: var(--purple); }
.qhub-count-btn--active    { border-color: var(--purple); background: var(--purple-light); color: var(--purple); }

/* Order row */
.qhub-order-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.qhub-order-btn {
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.qhub-order-btn:hover      { border-color: var(--purple); }
.qhub-order-btn--active    { border-color: var(--purple); background: var(--purple-light); color: var(--purple); }

/* ── Azota session ───────────────────── */

/* Scroll container reset */
#page-quiz .focus-content { padding: 0; }

/* Sticky navigator at top */
.qsa-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px 8px;
}
.qsa-nav-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.qsa-nc {
  width: 32px; height: 32px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 0.78rem; font-weight: 700;
  color: var(--text-muted);
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.12s;
  flex-shrink: 0;
}
.qsa-nc:hover      { border-color: var(--purple); color: var(--purple); }
.qsa-nc--done { background: var(--purple); border-color: var(--purple); color: #fff; }
.qsa-nc--ok   { background: var(--green);  border-color: var(--green);  color: #fff; }
.qsa-nc--err  { background: var(--red);    border-color: var(--red);    color: #fff; }
.qsa-nc--skip { opacity: 0.4; }

.qsa-nav-status {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}
.qsa-result-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.qsa-rb-score { font-size: 1.1rem; font-weight: 800; color: var(--text); }
.qsa-rb-pct   { font-size: 0.9rem; font-weight: 700; color: var(--purple); }
.qsa-rb-msg   { font-size: 0.8rem; color: var(--text-muted); }

/* Question list */
.qsa-list {
  padding: 10px 16px 96px; /* bottom pad clears sticky footer */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qsa-q {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  transition: border-color 0.15s;
}
.qsa-q--done { border-color: var(--purple); }
.qsa-q--ok   { border-color: var(--green); background: rgba(5,150,105,0.04); }
.qsa-q--err  { border-color: var(--red);   background: rgba(220,38,38,0.04); }

.qsa-q-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.qsa-q-num {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
}
.qsa-q-badge {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 800;
}
.qsa-q-badge--ok  { background: var(--green-light); color: var(--green); }
.qsa-q-badge--err { background: var(--red-light);   color: var(--red); }

.qsa-q-prompt {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.4;
}
.qsa-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qsa-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.12s, background 0.12s;
  width: 100%;
}
.qsa-opt:hover:not(:disabled) { border-color: var(--purple); background: var(--purple-light); }
.qsa-opt--selected { border-color: var(--purple); background: var(--purple-light); }
.qsa-opt--correct  { border-color: var(--green) !important; background: var(--green-light) !important; }
.qsa-opt--wrong    { border-color: var(--red)   !important; background: var(--red-light)   !important; }
.qsa-opt-lbl {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 800;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.qsa-opt--selected .qsa-opt-lbl { background: var(--purple); color: #fff; }
.qsa-opt--correct  .qsa-opt-lbl { background: var(--green);  color: #fff; }
.qsa-opt--wrong    .qsa-opt-lbl { background: var(--red);    color: #fff; }
.qsa-opt-txt {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  text-align: left;
}

/* Sticky footer */
.qsa-footer {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qsa-footer .btn-primary,
.qsa-footer .btn-outline { width: 100%; }
.qsa-footer-lbl {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}

/* ── View toggle + single navigation ─── */
.qsa-nav-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.qsa-view-toggle {
  font-size: 0.72rem; font-weight: 700;
  padding: 4px 10px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer; font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}
.qsa-view-toggle:hover { border-color: var(--purple); color: var(--purple); }
.qsa-nc--cur { outline: 2px solid var(--purple); outline-offset: 1px; }

.qsa-single-ctrl {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.qsa-sc-btn {
  padding: 8px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: inherit;
  font-size: 0.85rem; font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.qsa-sc-btn:hover:not(:disabled) { border-color: var(--purple); color: var(--purple); }
.qsa-sc-btn:disabled { opacity: 0.35; cursor: default; }

/* ── Dark mode ───────────────────────── */
.dark-mode .qhub-src-btn,
.dark-mode .qhub-count-btn,
.dark-mode .qhub-order-btn { background: var(--surface); }
.dark-mode .qsa-opt  { background: var(--surface); }
.dark-mode .qsa-q    { background: var(--bg); }
.dark-mode .qsa-footer { background: var(--bg); }