/* 主动回想卡片、练习弹层与复习设置。 */
.learning-card {
  margin: 18px 30px 0;
  padding: 17px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--moss);
  color: var(--ink);
  background: var(--surface-soft);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.learning-card[data-status="due"] {
  border-left-color: var(--cinnabar);
  background: var(--accent-soft);
}

.learning-card[data-status="mastered"] {
  border-left-color: var(--moss);
}

.learning-card-mark {
  width: 38px;
  height: 38px;
  border: 1px solid var(--accent-outline);
  border-radius: 50%;
  color: var(--paper-light);
  background: var(--moss);
  text-align: center;
  font: 500 17px/36px var(--serif);
}

.learning-card[data-status="due"] .learning-card-mark {
  background: var(--cinnabar);
}

.learning-card-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.learning-card-copy strong {
  font: 600 15px/1.4 var(--serif);
  letter-spacing: .08em;
}

.learning-card-copy span,
.learning-card-copy small {
  color: var(--ink-soft);
  font: 400 11px/1.55 var(--sans);
  letter-spacing: .025em;
}

.learning-card-copy small {
  font-size: 10px;
}

.learning-card-action,
.learning-check,
.learning-next {
  min-height: 42px;
  padding: 9px 18px;
  border: 1px solid var(--cinnabar);
  border-radius: 2px;
  color: var(--paper-light);
  background: var(--cinnabar);
  cursor: pointer;
  white-space: nowrap;
  font: 600 12px/1 var(--sans);
  letter-spacing: .08em;
  transition: color .18s, background .18s, transform .18s;
}

.learning-card-action:hover,
.learning-card-action:focus-visible,
.learning-check:hover,
.learning-check:focus-visible,
.learning-next:hover,
.learning-next:focus-visible {
  color: var(--cinnabar-dark);
  background: var(--surface);
  transform: translateY(-1px);
}

.learning-dialog {
  width: min(700px, calc(100vw - 48px));
  max-width: none;
  max-height: min(760px, calc(100dvh - 64px));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 4px;
  color: var(--ink);
  background: transparent;
  overflow: hidden auto;
}

.learning-dialog-shell {
  min-height: 520px;
  padding-bottom: 30px;
  border: 1px solid var(--paper-border);
}

.learning-dialog-header {
  min-height: 132px;
  padding: 28px 32px 23px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.learning-dialog-kicker {
  margin-bottom: 8px;
  color: var(--cinnabar);
  font: 600 11px/1 var(--sans);
  letter-spacing: .28em;
}

.learning-dialog-header h2 {
  margin: 0;
  font: 500 31px/1.2 var(--kai);
  letter-spacing: .1em;
}

.learning-dialog-header p {
  margin: 9px 0 0;
  color: var(--ink-soft);
  font: 400 12px/1.55 var(--sans);
  letter-spacing: .05em;
}

.learning-dialog-close {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  background: var(--surface);
  cursor: pointer;
  font: 300 28px/1 var(--sans);
  transition: color .18s, border-color .18s, transform .18s;
}

.learning-dialog-close:hover,
.learning-dialog-close:focus-visible {
  color: var(--cinnabar);
  border-color: var(--cinnabar);
  transform: rotate(6deg);
}

.learning-practice {
  padding: 28px 34px 0;
}

.learning-progress-row {
  color: var(--ink-soft);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  font: 500 11px/1 var(--sans);
  letter-spacing: .08em;
}

.learning-progress-track {
  height: 3px;
  background: var(--line);
  overflow: hidden;
}

.learning-progress-fill {
  width: 0;
  height: 100%;
  background: var(--cinnabar);
  display: block;
  transition: width .24s ease;
}

.learning-prompt {
  min-height: 66px;
  margin: 34px 0 25px;
  color: var(--placeholder);
  text-align: center;
  overflow-wrap: anywhere;
  font: 500 clamp(25px, 4vw, 35px)/1.85 var(--kai);
  letter-spacing: .12em;
}

.learning-answer-field {
  display: grid;
  gap: 8px;
}

.learning-answer-field span {
  color: var(--ink-soft);
  font: 500 11px/1 var(--sans);
  letter-spacing: .1em;
}

.learning-answer-field input {
  width: 100%;
  height: 52px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink);
  background: var(--surface);
  outline: none;
  font: 500 18px/1 var(--serif);
  letter-spacing: .08em;
}

.learning-answer-field input:focus {
  border-color: var(--cinnabar);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.learning-result {
  margin-top: 14px;
  padding: 13px 15px;
  border-left: 3px solid var(--moss);
  color: var(--ink);
  background: var(--surface-soft);
}

.learning-result[data-correct="false"] {
  border-left-color: var(--cinnabar);
}

.learning-result strong {
  font: 600 12px/1.3 var(--sans);
  letter-spacing: .08em;
}

.learning-result p {
  margin: 6px 0 0;
  color: var(--muted-copy);
  font: 500 16px/1.6 var(--serif);
  letter-spacing: .05em;
}

.learning-step-actions {
  min-height: 74px;
  padding-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.learning-next {
  border-color: var(--moss);
  background: var(--moss);
}

.learning-complete {
  padding: 32px 34px 0;
  text-align: center;
}

.learning-complete-mark {
  width: 58px;
  height: 58px;
  margin: 0 auto 15px;
  border-radius: 50%;
  color: var(--paper-light);
  background: var(--moss);
  font: 500 25px/58px var(--serif);
}

.learning-complete h3 {
  margin: 0;
  font: 500 25px/1.3 var(--kai);
  letter-spacing: .1em;
}

.learning-complete > p {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font: 400 12px/1.6 var(--sans);
}

.learning-ratings {
  margin: 26px 0 0;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.learning-ratings legend {
  width: 100%;
  margin-bottom: 10px;
  color: var(--ink-soft);
  font: 500 11px/1.4 var(--sans);
  letter-spacing: .06em;
}

.learning-ratings button {
  min-height: 82px;
  padding: 13px 8px;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink);
  background: var(--surface);
  cursor: pointer;
  display: grid;
  align-content: center;
  gap: 7px;
  transition: border-color .18s, background .18s, transform .18s;
}

.learning-ratings button:hover,
.learning-ratings button:focus-visible {
  border-color: var(--cinnabar);
  background: var(--accent-soft);
  transform: translateY(-1px);
}

.learning-ratings button:disabled {
  cursor: not-allowed;
  opacity: .42;
  transform: none;
}

.learning-ratings button strong {
  font: 600 14px/1.2 var(--serif);
  letter-spacing: .06em;
}

.learning-ratings button small {
  color: var(--ink-soft);
  font: 400 10px/1.2 var(--sans);
  letter-spacing: .05em;
}

.learning-rating-hint {
  min-height: 38px;
}

.reading-settings {
  margin: 26px 30px 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.reading-settings-header {
  margin-bottom: 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.reading-settings-kicker {
  margin-bottom: 6px;
  color: var(--cinnabar);
  font: 600 10px/1 var(--sans);
  letter-spacing: .24em;
}

.reading-settings-header h3 {
  margin: 0;
  font: 500 22px/1.2 var(--kai);
  letter-spacing: .1em;
}

.reading-settings-header p {
  margin: 0;
  color: var(--ink-soft);
  font: 400 11px/1.5 var(--sans);
  letter-spacing: .06em;
}

.reading-settings .auto-next-field {
  width: min(440px, 100%);
  min-height: 50px;
  grid-column: auto;
  grid-row: auto;
  grid-template-columns: minmax(0, 1fr) 150px;
}