#classroomPracticeStudentRoot {
  color: #24362f;
}

#classroomPracticeStudentRoot * {
  box-sizing: border-box;
}

.cps-shell {
  --cps-green: #167153;
  --cps-green-soft: #e8f6ef;
  --cps-correct: #0f8a5f;
  --cps-correct-soft: #e6f8ef;
  --cps-wrong: #c73f2b;
  --cps-wrong-soft: #ffe4dd;
  --cps-line: #d5e4de;
  --cps-muted: #687b74;
  display: grid;
  gap: 14px;
  width: min(1120px, 100%);
  margin: 0 auto;
}

.cps-top {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 0 4px;
}

.cps-top h1,
.cps-detail h2,
.cps-feedback h3,
.cps-correction h3 {
  margin: 2px 0;
}

.cps-top h1 {
  color: #e8f5ef;
}

.cps-top > div > span {
  color: #6ee7b7;
}

.cps-top span,
.cps-detail > header span,
.cps-feedback header span,
.cps-correction header span {
  color: var(--cps-green);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .08em;
}

.cps-shell button,
.cps-shell input,
.cps-shell textarea {
  font: inherit;
}

.cps-shell button {
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--cps-line);
  border-radius: 11px;
  color: #28483d;
  background: #fff;
  cursor: pointer;
}

.cps-shell button.cps-primary {
  color: #fff;
  border-color: var(--cps-green);
  background: var(--cps-green);
}

.cps-shell button:disabled {
  cursor: wait;
  opacity: .6;
}

.cps-message {
  padding: 11px 13px;
  border-radius: 11px;
}

.cps-message.is-error {
  color: #9a3030;
  border: 1px solid #edcaca;
  background: #fff2f2;
}

.cps-message.is-success {
  color: #126443;
  border: 1px solid #bde0d0;
  background: #effaf4;
}

.cps-term-nav {
  position: sticky;
  top: 8px;
  z-index: 6;
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(190px, 1fr) minmax(170px, auto);
  align-items: stretch;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(104, 123, 116, .28);
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(22, 50, 40, .08);
  background: rgba(248, 252, 250, .96);
  backdrop-filter: blur(10px);
}

.cps-term-nav > button,
.cps-term-nav > label,
.cps-term-summary {
  min-height: 54px;
  border-radius: 11px;
}

.cps-term-nav > button {
  display: grid;
  align-content: center;
  gap: 2px;
  text-align: left;
}

.cps-term-nav > button.is-active {
  color: #fff;
  border-color: var(--cps-green);
  background: var(--cps-green);
}

.cps-term-nav > button span,
.cps-term-nav > label > span,
.cps-term-summary b {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
}

.cps-term-nav > label {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 7px 11px;
  border: 1px solid var(--cps-line);
  background: #fff;
}

.cps-term-nav select {
  width: 100%;
  min-height: 30px;
  border: 0;
  color: #244a3e;
  font: inherit;
  font-weight: 750;
  background: transparent;
}

.cps-term-summary {
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 9px 12px;
  color: #72501c;
  background: #fff4dc;
}

.cps-term-summary span {
  color: #705f43;
  font-size: 12px;
}

.cps-layout {
  display: grid;
  grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.cps-layout.is-focus-mode {
  grid-template-columns: minmax(0, 1fr);
}

.cps-list {
  display: grid;
  gap: 10px;
}

.cps-list-group {
  overflow: hidden;
  border: 1px solid var(--cps-line);
  border-radius: 14px;
  background: #fff;
}

.cps-list-group > summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  color: #244a3e;
  cursor: pointer;
  list-style: none;
  background: #f6faf8;
}

.cps-list-group > summary::-webkit-details-marker {
  display: none;
}

.cps-list-group > summary::after {
  flex: 0 0 auto;
  color: #527065;
  content: '▼';
  font-size: 11px;
  transition: transform .18s ease;
}

.cps-list-group:not([open]) > summary::after {
  transform: rotate(-90deg);
}

.cps-list-group > summary > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cps-list-group > summary span {
  color: var(--cps-green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}

.cps-list-group > summary strong {
  overflow: hidden;
  font-size: 14px;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.cps-list-group > summary small {
  flex: 0 0 auto;
  color: var(--cps-muted);
  font-size: 11px;
  white-space: nowrap;
}

.cps-list-parts {
  display: grid;
  gap: 7px;
  padding: 9px;
  border-top: 1px solid var(--cps-line);
}

.cps-list-parts button {
  display: grid;
  gap: 3px;
  min-width: 0;
  text-align: left;
}

.cps-list button > span {
  width: fit-content;
  padding: 2px 7px;
  border-radius: 999px;
  color: #1b684d;
  font-size: 11px;
  background: #e5f5ed;
}

.cps-list button small {
  color: var(--cps-muted);
}

.cps-list button .cps-resume-chip {
  width: fit-content;
  max-width: 100%;
  padding: 3px 8px;
  overflow: hidden;
  border: 1px solid rgba(190, 125, 15, .3);
  border-radius: 999px;
  color: #835513;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #fff3d7;
}

.cps-unit-chip {
  overflow: hidden;
  color: var(--cps-muted);
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cps-list button.is-active {
  border-color: #5ea78c;
  box-shadow: 0 0 0 2px rgba(94, 167, 140, .12);
}

.cps-resume-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(190, 125, 15, .34);
  border-radius: 11px;
  color: #734b10;
  background: linear-gradient(90deg, #fff1cf, #fffaf0);
}

.cps-resume-notice strong {
  font-size: 14px;
}

.cps-resume-notice span {
  color: #7d6847;
  font-size: 12px;
}

.cps-empty,
.cps-loading,
.cps-closed {
  display: grid;
  place-items: center;
  gap: 7px;
  min-height: 130px;
  padding: 24px;
  border: 1px dashed #bcd0c8;
  border-radius: 14px;
  color: var(--cps-muted);
  text-align: center;
  background: #fbfdfc;
}

.cps-history-lock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid #dbc38f;
  border-radius: 12px;
  color: #684915;
  background: #fff7e7;
}

.cps-history-lock span {
  color: #78694e;
  font-size: 12px;
}

.cps-history-missing dl {
  display: grid;
  gap: 7px;
  width: min(560px, 100%);
  margin: 6px 0;
}

.cps-history-missing dl > div {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 11px;
  border-radius: 9px;
  text-align: left;
  background: #fff;
}

.cps-history-missing dt,
.cps-history-missing dd {
  margin: 0;
}

.cps-history-missing dt {
  color: var(--cps-green);
  font-weight: 800;
}

.cps-history-question-notes {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid #ddc898;
  border-radius: 9px;
  color: #5f4b25;
  background: #fff9eb;
}

.cps-history-question-notes span {
  width: fit-content;
  padding: 2px 7px;
  border-radius: 999px;
  color: #704b0e;
  font-size: 11px;
  font-weight: 800;
  background: #ffe5a9;
}

.cps-history-question-notes p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.cps-history-corrections {
  display: grid;
  gap: 9px;
  padding-top: 4px;
}

.cps-history-corrections > header,
.cps-history-corrections > article > header,
.cps-history-corrections > article > div > p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cps-history-corrections > article {
  padding: 11px 12px;
  border: 1px solid var(--cps-line);
  border-radius: 11px;
  background: #fbfdfc;
}

.cps-history-corrections time,
.cps-history-corrections em {
  color: var(--cps-muted);
  font-size: 11px;
  font-style: normal;
}

.cps-history-corrections p {
  margin: 7px 0 0;
  padding-top: 7px;
  border-top: 1px solid #e5ece9;
}

.cps-history-corrections p span {
  color: var(--cps-green);
  font-size: 12px;
  font-weight: 800;
}

.cps-selection-guide {
  display: grid;
  align-content: center;
  gap: 12px;
  min-height: 300px;
  padding: 30px;
  border: 1px dashed #a9cabc;
  border-radius: 16px;
  color: #294e42;
  background: linear-gradient(145deg, #f8fcfa, #edf7f2);
}

.cps-selection-guide > span {
  color: var(--cps-green);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
}

.cps-selection-guide h2,
.cps-selection-guide p {
  margin: 0;
}

.cps-selection-guide p {
  color: var(--cps-muted);
  line-height: 1.7;
}

.cps-selection-guide > div {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr;
  align-items: baseline;
  gap: 5px 8px;
  margin-top: 6px;
  padding-top: 15px;
  border-top: 1px solid #d2e4dc;
}

.cps-selection-guide > div strong {
  color: #17674d;
  font-size: 22px;
}

.cps-selection-guide > div small {
  color: var(--cps-muted);
}

.cps-detail {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.cps-detail > header,
.cps-feedback > header,
.cps-correction > header,
.cps-answer-card > header,
.cps-grade-list article > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cps-detail > header {
  padding: 18px 20px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #17674d, #23906a);
}

.cps-detail > header span,
.cps-detail > header p {
  color: rgba(255, 255, 255, .82);
}

.cps-detail > header p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.cps-detail > header .cps-current-part {
  color: #fff;
  font-size: 14px;
}

.cps-detail > header p i {
  font-style: normal;
  opacity: .7;
}

.cps-detail-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.cps-shell .cps-switch-activity {
  border-color: rgba(255, 255, 255, .42);
  color: #fff;
  background: rgba(255, 255, 255, .14);
}

.cps-progress {
  display: grid;
  gap: 11px;
  padding: 15px;
  border: 1px solid var(--cps-line);
  border-radius: 15px;
  background: #fbfdfc;
}

.cps-progress > header,
.cps-progress-unit > header,
.cps-progress-parts article > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cps-progress > header span,
.cps-progress-unit > header span {
  color: var(--cps-green);
  font-size: 12px;
  font-weight: 750;
}

.cps-progress > header strong {
  display: block;
  margin-top: 2px;
  color: #173d31;
  font-size: 24px;
}

.cps-progress > header em {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 999px;
  color: #126443;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  background: var(--cps-green-soft);
}

.cps-progress p {
  margin: 0;
  color: var(--cps-muted);
  font-size: 13px;
}

.cps-progress-meter {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: #e2ece8;
}

.cps-progress-meter span {
  display: block;
  width: var(--cps-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--cps-green);
}

.cps-progress-unit {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.cps-progress-unit > header strong {
  overflow: hidden;
  color: #3b5c51;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cps-progress-parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.cps-progress-parts article {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #dce8e3;
  border-radius: 10px;
  background: #fff;
}

.cps-progress-parts article.is-current {
  border-color: #85b9a5;
  background: #f2faf6;
}

.cps-progress-parts article span {
  overflow: hidden;
  color: #48645a;
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cps-progress-parts article strong {
  flex: 0 0 auto;
  color: #173d31;
  font-size: 13px;
}

.cps-worksheet {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--cps-line);
  border-radius: 15px;
  background: #fff;
}

.cps-worksheet img {
  width: 100%;
  max-height: 580px;
  object-fit: contain;
  border-radius: 9px;
  background: #f6faf8;
}

.cps-worksheet-hidden {
  align-items: center;
  min-height: 128px;
  border-style: dashed;
  background: #f7fbf9;
  color: #294e42;
  text-align: center;
}

.cps-worksheet-hidden strong {
  font-size: 18px;
}

.cps-worksheet-hidden span {
  color: var(--cps-muted);
  font-size: 13px;
}

.cps-worksheet-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.cps-worksheet-pages span {
  min-width: 92px;
  color: #36594d;
  font-size: 13px;
  font-weight: 750;
  text-align: center;
}

.cps-shell .cps-worksheet-pages button {
  min-height: 34px;
  padding: 6px 10px;
}

.cps-worksheet figcaption {
  color: var(--cps-muted);
  font-size: 12px;
  text-align: center;
}

.cps-answer-card,
.cps-feedback,
.cps-correction,
.cps-result {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--cps-line);
  border-radius: 15px;
  background: #fff;
}

.cps-answer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.cps-answer-sections {
  display: grid;
  gap: 12px;
}

.cps-answer-section {
  overflow: hidden;
  border: 1px solid #d9e7e1;
  border-radius: 13px;
  background: #fff;
}

.cps-answer-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid #dfeae5;
  background: #f1f8f5;
}

.cps-answer-section > header div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cps-answer-section > header span {
  color: var(--cps-green);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
}

.cps-answer-section > header strong {
  overflow: hidden;
  color: #214a3c;
  font-size: 14px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cps-answer-section > header b {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  color: #176443;
  font-size: 11px;
  background: #fff;
}

.cps-answer-section .cps-answer-grid {
  padding: 10px;
}

.cps-answer-focus {
  position: sticky;
  top: 0;
  z-index: 4;
  margin: -18px -18px 0;
  padding: 13px 18px;
  border-bottom: 1px solid var(--cps-line);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
}

.cps-answer-focus div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cps-answer-focus span {
  color: var(--cps-green);
  font-size: 12px;
  font-weight: 750;
}

.cps-answer-focus strong {
  overflow: hidden;
  color: #173d31;
  font-size: 18px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cps-answer-focus small {
  overflow: hidden;
  color: var(--cps-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cps-answer-focus b {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  color: #176443;
  font-size: 13px;
  background: var(--cps-green-soft);
}

.cps-type-reminder {
  display: grid;
  gap: 3px;
  padding: 11px 13px;
  border: 1px solid #f1d293;
  border-radius: 11px;
  color: #624614;
  background: #fff8e8;
}

.cps-type-reminder strong {
  font-size: 14px;
}

.cps-type-reminder span {
  font-size: 12px;
  line-height: 1.55;
}

.cps-answer-grid label,
.cps-answer-grid .cps-answer-item {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid #e1ebe7;
  border-radius: 10px;
  background: #f9fbfa;
}

.cps-answer-grid label.is-teacher-resume,
.cps-answer-grid .cps-answer-item.is-teacher-resume,
.cps-grade-list article.is-teacher-resume {
  border-color: #c48a20;
  box-shadow: 0 0 0 3px rgba(196, 138, 32, .14);
}

.cps-answer-grid label > span,
.cps-answer-grid .cps-answer-item > span {
  font-size: 12px;
  font-weight: 750;
  color: #49645a;
}

.cps-answer-question-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.cps-answer-question-head > span {
  color: #294e42;
  font-size: 13px;
  font-weight: 800;
}

.cps-answer-type {
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.25;
  white-space: nowrap;
}

.cps-answer-type.is-choice {
  color: #185c77;
  background: #e7f5fb;
}

.cps-answer-type.is-fill {
  color: #744d16;
  background: #fff0d8;
}

.cps-question-resume-badge {
  width: 100%;
  color: #8a5a0d;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.35;
}

.cps-answer-grid input,
.cps-result-help textarea,
.cps-answer-issue-panel textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #c7d9d1;
  border-radius: 8px;
}

.cps-multi-blank {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cps-multi-blank label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cps-multi-blank label > span {
  color: var(--cps-muted);
  font-size: 11px;
  font-weight: 750;
}

.cps-correction-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 8px;
}

.cps-correction-pair label {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.cps-correction-pair label > span {
  color: var(--cps-muted);
  font-size: 11px;
  font-weight: 750;
}

.cps-correction-pair > b {
  align-self: end;
  padding: 8px 0;
  color: #176443;
  font-size: 18px;
  line-height: 1;
}

.cps-choice-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.cps-multi-choice {
  display: grid;
  gap: 10px;
}

.cps-choice-slot {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.cps-choice-slot + .cps-choice-slot {
  padding-top: 10px;
  border-top: 1px solid #dfe9e4;
}

.cps-choice-slot > span {
  color: var(--cps-muted);
  font-size: 11px;
  font-weight: 750;
}

.cps-answer-grid .cps-answer-item.has-choice-text {
  grid-column: span 2;
}

.cps-choice-options.has-text {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.cps-shell .cps-choice-options button {
  min-height: 38px;
  padding: 7px 0;
  border-radius: 8px;
  font-weight: 850;
  line-height: 1;
}

.cps-shell .cps-choice-options.has-text button {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 8px 10px;
  line-height: 1.35;
  text-align: left;
}

.cps-choice-options.has-text button b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #185c77;
  background: #e7f5fb;
}

.cps-choice-options.has-text button span {
  overflow-wrap: anywhere;
}

.cps-choice-options.has-text button.is-selected b {
  color: var(--cps-green);
  background: #fff;
}

.cps-shell .cps-choice-options button.is-selected {
  border-color: var(--cps-green);
  color: #fff;
  background: var(--cps-green);
}

.cps-answer-grid small,
.cps-lock-note,
.cps-correction p {
  color: var(--cps-muted);
  font-size: 12px;
}

.cps-confirm {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px;
  border-radius: 10px;
  background: var(--cps-green-soft);
}

.cps-confirm input {
  margin-top: 3px;
}

.cps-lock-note,
.cps-correction p {
  margin: 0;
}

.cps-score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px;
  border-radius: 14px;
  color: #fff;
  background:
    radial-gradient(circle at 90% 20%, rgba(255, 255, 255, .2), transparent 35%),
    linear-gradient(135deg, #17674d, #279972);
}

.cps-score div {
  display: grid;
  gap: 3px;
}

.cps-score div strong {
  font-size: 30px;
}

.cps-score > b {
  font-size: 34px;
}

.cps-grade-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cps-grade-list article {
  position: relative;
  overflow: hidden;
  padding: 14px 15px 13px 18px;
  border: 2px solid var(--cps-line);
  border-left-width: 8px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(23, 54, 46, .06);
}

.cps-grade-list article header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.cps-grade-list article header strong {
  font-size: 17px;
  line-height: 1.35;
}

.cps-grade-list article header span {
  flex: 0 0 auto;
  min-width: 58px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
  box-shadow: 0 3px 8px rgba(23, 54, 46, .14);
}

.cps-grade-list article .cps-question-resume-badge {
  width: 100%;
}

.cps-grade-list article.is-correct {
  border-color: rgba(15, 138, 95, .42);
  border-left-color: var(--cps-correct);
  background:
    linear-gradient(90deg, rgba(15, 138, 95, .16), rgba(230, 248, 239, .7) 40%, #fff 100%);
}

.cps-grade-list article.is-wrong,
.cps-grade-list article.is-blank {
  border-color: rgba(199, 63, 43, .46);
  border-left-color: var(--cps-wrong);
  background:
    linear-gradient(90deg, rgba(199, 63, 43, .2), rgba(255, 228, 221, .78) 42%, #fff 100%);
}

.cps-grade-list article p {
  margin: 7px 0;
  font-size: 13px;
}

.cps-grade-list article p b {
  font-size: 14px;
}

.cps-answer-line-standard {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.cps-answer-line-standard b {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cps-answer-issue-wrap {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.cps-shell .cps-answer-issue-btn {
  display: inline-grid;
  place-items: center;
  width: 26px;
  min-width: 26px;
  min-height: 26px;
  padding: 0;
  border-color: #d4b267;
  border-radius: 50%;
  color: #7a5410;
  font-weight: 900;
  line-height: 1;
  background: #fff8e6;
}

.cps-shell .cps-answer-issue-btn.is-active,
.cps-shell .cps-answer-issue-btn:hover {
  border-color: #b88318;
  color: #fff;
  background: #b88318;
}

.cps-answer-issue-saved {
  color: #7a5410;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.cps-answer-issue-panel {
  display: grid;
  gap: 8px;
  margin: 8px 0;
  padding: 10px;
  border: 1px solid #ead6a4;
  border-radius: 10px;
  background: #fffaf0;
}

.cps-answer-issue-resolution {
  padding: 9px 10px;
  border: 1px solid #9bcbb3;
  border-radius: 8px;
  color: #215f43;
  font-size: 13px;
  background: #edf9f2;
}

.cps-answer-issue-resolution p {
  margin: 4px 0 0;
  color: #315c4a;
}

.cps-answer-issue-types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cps-shell .cps-answer-issue-types button {
  min-height: 32px;
  padding: 6px 9px;
  border-radius: 8px;
  color: #73531a;
  font-size: 12px;
  background: #fff;
}

.cps-shell .cps-answer-issue-types button.is-selected {
  border-color: #b88318;
  color: #fff;
  background: #b88318;
}

.cps-answer-issue-panel footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.cps-question-prompt,
.cps-explanation-line {
  display: grid;
  gap: 3px;
}

.cps-question-prompt span,
.cps-explanation-line span {
  color: var(--cps-muted);
  font-size: 12px;
  font-weight: 750;
}

.cps-question-prompt b,
.cps-explanation-line b {
  color: #173d31;
  font-weight: 750;
  line-height: 1.45;
}

.cps-explanation-line {
  padding: 8px 9px;
  border-radius: 9px;
  background: #f5faf8;
}

.cps-grade-list article.is-correct p b,
.cps-grade-list article.is-correct .cps-answer-line-student b,
.cps-grade-list article.is-correct .cps-answer-line-standard b {
  color: #075f41;
}

.cps-grade-list article.is-wrong .cps-answer-line-student b,
.cps-grade-list article.is-blank .cps-answer-line-student b {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 5px;
  color: #9f2f22;
  background: var(--cps-wrong-soft);
}

.cps-grade-list article.is-wrong .cps-answer-line-standard b,
.cps-grade-list article.is-blank .cps-answer-line-standard b {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 5px;
  color: #086345;
  background: var(--cps-correct-soft);
}

.cps-grade-list article small {
  color: var(--cps-muted);
}

.cps-grade-list article.is-correct header span {
  background: var(--cps-correct);
}

.cps-grade-list article.is-wrong header span,
.cps-grade-list article.is-blank header span {
  background: var(--cps-wrong);
}

.cps-result-help {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #dfe9e5;
  border-radius: 10px;
  background: rgba(255, 255, 255, .72);
}

.cps-result-help.is-selected {
  border-color: #67aa90;
  background: #f0faf5;
}

.cps-result-help label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #28483d;
  font-size: 13px;
  font-weight: 750;
}

.cps-feedback-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--cps-line);
  border-radius: 12px;
  background: #f8fcfa;
}

.cps-feedback-actions div {
  display: grid;
  gap: 2px;
}

.cps-feedback-actions span {
  color: var(--cps-muted);
  font-size: 12px;
  font-weight: 750;
}

.cps-feedback-actions strong {
  color: #173d31;
}

.cps-all-correct {
  flex: 1 1 100%;
  margin: 0;
  color: #176443;
}

@media (max-width: 820px) {
  .cps-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .cps-term-nav {
    position: static;
    grid-template-columns: 1fr;
  }

  .cps-history-lock {
    align-items: flex-start;
    flex-direction: column;
  }

  .cps-resume-notice {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .cps-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .cps-detail > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .cps-detail-actions {
    justify-content: flex-start;
  }

  .cps-progress > header,
  .cps-progress-unit > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .cps-answer-grid,
  .cps-grade-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cps-answer-card,
  .cps-feedback,
  .cps-correction,
  .cps-result {
    padding: 13px;
  }

  .cps-answer-focus {
    margin: -13px -13px 0;
    padding: 11px 13px;
  }

  .cps-selection-guide {
    min-height: 220px;
    padding: 20px;
  }

  .cps-selection-guide > div {
    grid-template-columns: auto 1fr;
  }
}

@media (max-width: 390px) {
  .cps-answer-grid,
  .cps-grade-list {
    grid-template-columns: 1fr;
  }

  .cps-multi-blank {
    grid-template-columns: 1fr;
  }

  .cps-correction-pair {
    grid-template-columns: 1fr;
  }

  .cps-correction-pair > b {
    justify-self: center;
    padding: 0;
    transform: rotate(90deg);
  }

  .cps-answer-grid .cps-answer-item.has-choice-text {
    grid-column: auto;
  }

  .cps-list-group > summary {
    align-items: flex-start;
    flex-direction: column;
    padding-right: 38px;
  }

  .cps-list-group > summary::after {
    position: absolute;
    right: 18px;
  }
}
.cps-attempt-note { margin: 16px 0; padding: 14px 18px; border: 1px solid #6ee7b7; border-radius: 12px; background: #ecfdf5; color: #065f46; font-weight: 700; line-height: 1.7; }
.cps-attempt-note small { display: block; font-weight: 400; }