/* ── Quiz System ── */
.quiz-page { padding: 18px; max-width: 700px; margin: 0 auto; }

.qcard {
  background: var(--surf); border: 1px solid var(--bdr);
  border-radius: var(--r); padding: 14px;
  cursor: pointer; transition: all .2s; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.qcard:hover { border-color: var(--acc); transform: translateY(-1px); }

.quiz-active-card { background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--r); overflow: hidden; }

.qpb { height: 3px; background: var(--bdr); }
.qpf { height: 100%; background: var(--acc); transition: width .4s; }

.qopt {
  padding: 10px 13px; border-radius: 8px; border: 1px solid var(--bdr);
  background: var(--surf2); cursor: pointer; transition: all .2s;
  font-size: 13px; text-align: left; color: var(--txt);
  width: 100%; margin-bottom: 7px; font-family: var(--body);
}
.qopt:hover:not(:disabled) { border-color: var(--acc); background: #7c6bff12; }
.qopt.correct { border-color: var(--acc3); background: #00d4aa18; color: var(--acc3); }
.qopt.wrong   { border-color: var(--acc2); background: #ff6b9d18; color: var(--acc2); }
.qopt.reveal  { border-color: var(--acc3); background: #00d4aa0a; }

.qfb { margin-top: 14px; padding: 11px 14px; border-radius: 7px; font-size: 13px; line-height: 1.6; }
.qfb.ok  { background: #00d4aa18; border: 1px solid #00d4aa44; color: var(--acc3); }
.qfb.bad { background: #ff6b9d18; border: 1px solid #ff6b9d44; color: var(--acc2); }

/* SM-2 buttons */
.sm2-row { display: flex; gap: 5px; margin-top: 12px; flex-wrap: wrap; }
.sm2-btn {
  padding: 7px 10px; border-radius: 7px; border: 1px solid var(--bdr);
  background: var(--surf2); color: var(--txt);
  font-size: 11px; cursor: pointer; font-family: var(--mono);
  transition: all .2s; flex: 1; min-width: 50px; text-align: center;
}
.sm2-btn:hover { border-color: var(--acc); }

/* Spaced repetition panel */
.sr-panel { background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--r); overflow: hidden; margin-bottom: 16px; }
.sr-ph { padding: 12px 16px; border-bottom: 1px solid var(--bdr); display: flex; align-items: center; justify-content: space-between; }
.sr-ph-title { font-size: 13px; font-weight: 600; }

.sr-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 14px; }
.sr-day { border-radius: 5px; padding: 4px 3px; text-align: center; font-size: 10px; font-family: var(--mono); }
.sr-day-hdr { color: var(--mut); font-weight: 600; }
.sr-day-cell { background: var(--surf2); border: 1px solid var(--bdr); cursor: pointer; transition: background .15s; }
.sr-day-cell:hover { border-color: var(--acc); }
.sr-day-cell.today    { border-color: var(--acc); color: var(--acc); }
.sr-day-cell.has-review { background: #7c6bff22; border-color: #7c6bff55; }
.sr-day-cell.done     { background: #00d4aa18; border-color: #00d4aa44; }
.sr-day-cell.overdue  { background: #ff6b9d18; border-color: #ff6b9d44; }

.sr-q-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 7px;
  background: var(--surf2); border: 1px solid var(--bdr);
  margin-bottom: 6px; cursor: pointer; transition: all .2s;
}
.sr-q-item:hover { border-color: var(--acc); }
.sr-q-topic { font-size: 12px; font-weight: 500; flex: 1; }
.sr-q-meta  { font-size: 10px; font-family: var(--mono); color: var(--mut); }
.sr-q-due   { font-size: 10px; font-family: var(--mono); }
.due-today { color: var(--acc3); }
.due-over  { color: var(--acc2); }
.due-soon  { color: var(--amb); }

/* Quiz hub cards */
.quiz-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 20px; }
.quiz-hub-card {
  background: var(--surf); border: 1px solid var(--bdr);
  border-radius: var(--r); padding: 16px; cursor: pointer; transition: all .2s;
}
.quiz-hub-card:hover { border-color: var(--acc); transform: translateY(-1px); }
.qc-bar { margin-top: 8px; height: 3px; background: var(--bdr); border-radius: 2px; overflow: hidden; }
.qc-fill { height: 100%; border-radius: 2px; }
.qc-due { font-size: 10px; font-family: var(--mono); color: var(--acc2); margin-top: 5px; }