/* C2 Practice Desk */
:root {
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bg-main: #f4f6f8;
  --bg-soft: #eef3f2;
  --bg-card: #ffffff;
  --bg-ink: #17202a;
  --text-main: #17202a;
  --text-muted: #667085;
  --text-soft: #8a95a3;
  --border-color: #dfe5ec;
  --border-strong: #c8d2dc;
  --accent-color: #0f766e;
  --accent-hover: #0b5c56;
  --accent-soft: #e6f4f1;
  --color-success: #12805c;
  --color-success-bg: #e9f7f0;
  --color-error: #c83f49;
  --color-error-bg: #fff0f1;
  --color-warning: #b86b00;
  --color-warning-bg: #fff7e6;
  --color-info: #315fbd;
  --shadow-soft: 0 12px 30px rgba(23, 32, 42, 0.08);
  --shadow-line: 0 1px 2px rgba(23, 32, 42, 0.06);
}

/* Public demo, About and guided tour */
.about-button {
  min-height: 36px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 800;
}

.about-button:hover,
.about-button:focus-visible {
  background: #eef2f4;
  color: var(--text-main);
  outline: none;
}

.demo-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 14px 0 0;
  padding: 10px 12px 10px 14px;
  border: 1px solid #b9ddd2;
  border-radius: 10px;
  background: linear-gradient(90deg, #edf9f5 0%, #f8fcfb 100%);
  color: #17483f;
}

.demo-notice > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.demo-notice p {
  font-size: 0.78rem;
  line-height: 1.4;
}

.demo-notice-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12);
}

.demo-notice-action {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid #8cc7b7;
  border-radius: 7px;
  background: #ffffff;
  color: #0d665d;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 850;
}

.demo-notice-action:hover {
  border-color: var(--accent-color);
  background: #f5fffb;
}

.account-zero-note {
  padding: 10px 11px;
  border-left: 3px solid var(--accent-color);
  border-radius: 0 7px 7px 0;
  background: var(--accent-soft);
  color: #27584f;
  font-size: 0.78rem;
  line-height: 1.45;
}

.about-modal {
  width: min(900px, 100%);
  max-height: min(92vh, 900px);
  padding: 0;
  overflow: hidden;
}

.about-modal-header {
  margin: 0;
  padding: 24px 26px 20px;
  background: linear-gradient(135deg, #f2faf7 0%, #ffffff 70%);
}

.about-modal-header .modal-title {
  max-width: 620px;
  margin-top: 6px;
  font-size: clamp(1.35rem, 3vw, 2rem);
  letter-spacing: -0.035em;
}

.about-body {
  min-height: 0;
  padding: 22px 26px 26px;
  overflow-y: auto;
}

.about-intro > p {
  max-width: 720px;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

.about-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.about-mode-grid article {
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #fbfcfd;
}

.about-mode-grid article:last-child {
  border-color: #a7d9c9;
  background: #f0faf6;
}

.about-mode-grid span,
.about-section-heading span {
  display: block;
  color: var(--accent-color);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-mode-grid strong {
  display: block;
  margin-top: 5px;
  font-size: 0.95rem;
}

.about-mode-grid p,
.about-tab-grid p,
.about-flow p {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.about-section {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}

.about-section-heading h3 {
  margin-top: 4px;
  font-size: 1.05rem;
}

.about-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
  list-style: none;
}

.about-flow li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

.about-flow li > span {
  color: #9aa6af;
  font-size: 0.7rem;
  font-weight: 900;
}

.about-tab-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.about-tab-grid article {
  padding: 12px;
  border-radius: 8px;
  background: #f4f6f7;
}

.about-tab-grid strong {
  font-size: 0.8rem;
}

.about-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 26px;
  border-top: 1px solid var(--border-color);
  background: #fbfcfd;
}

.about-tour-layer {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10000;
  width: min(430px, calc(100vw - 48px));
  pointer-events: none;
}

.about-tour-card {
  position: relative;
  width: 100%;
  max-height: calc(100dvh - 48px);
  padding: 20px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 14px 40px rgba(20, 29, 36, 0.18);
  pointer-events: auto;
}

.about-tour-progress {
  height: 3px;
  margin: -2px 0 18px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6ecea;
}

.about-tour-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-color);
  transition: width 0.2s ease;
}

.about-tour-card h2 {
  margin-top: 5px;
  font-size: 1.25rem;
  letter-spacing: -0.025em;
}

.about-tour-step-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.about-tour-step-meta small {
  flex: 0 0 auto;
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 800;
}

.about-tour-card > p {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.about-tour-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
}

.about-tour-controls > div {
  display: flex;
  gap: 8px;
}

.tour-exit {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 750;
}

.tour-exit:hover {
  color: var(--text-main);
}

.about-tour-keyboard {
  display: block;
  margin-top: 12px;
  color: var(--text-soft);
  font-size: 0.68rem;
  text-align: right;
}

@media (max-width: 760px) {
  .about-button {
    order: 2;
  }

  .candidate-switch {
    order: 3;
  }

  .demo-notice {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .demo-notice-action {
    margin-left: 18px;
  }

  .about-modal {
    max-height: calc(100dvh - 16px);
  }

  .about-modal-header,
  .about-body,
  .about-actions {
    padding-left: 16px;
    padding-right: 16px;
  }

  .about-mode-grid,
  .about-flow {
    grid-template-columns: 1fr;
  }

  .about-tab-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-actions {
    flex-direction: column-reverse;
  }

  .about-actions .btn {
    width: 100%;
  }

  .about-tour-layer {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
  }

  .about-tour-card {
    max-height: calc(100dvh - 20px);
    padding: 18px;
  }

  .about-tour-keyboard {
    display: none;
  }
}

/* Exercise correction model and review */
.sheet-error-note-box {
  display: grid;
  gap: 7px;
}

.sheet-error-note-box label:not(:first-child) {
  margin-top: 4px;
}

.sheet-correct-answer-input,
.history-error-note-editor input {
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid #b9ddd6;
  border-radius: 8px;
  background: #ffffff;
  color: var(--text-main);
  font: inherit;
  font-weight: 800;
  text-transform: uppercase;
  outline: none;
}

.sheet-correct-answer-input:focus,
.history-error-note-editor input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}

.history-error-note-editor {
  display: grid;
  gap: 6px;
}

.history-error-note-editor label:not(:first-child) {
  margin-top: 5px;
}

.history-correct-answer {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 3px solid var(--accent-color);
  border-radius: 0 6px 6px 0;
  background: #eef7f5;
  color: var(--text-main);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.45;
  white-space: pre-wrap;
}

.history-correct-answer strong {
  display: block;
  margin-bottom: 2px;
  color: var(--accent-color);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.ue-error-correct-answer {
  margin-top: 7px;
  overflow-wrap: anywhere;
  color: var(--accent-color);
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.82rem;
  font-weight: 900;
}

.ue-error-note-wrap {
  margin-top: 10px;
}

.ue-error-note-wrap .error-answer-label {
  margin: 0 0 5px;
}

.ue-error-note {
  min-height: 48px;
  max-height: 150px;
  padding: 8px 9px;
  overflow-y: auto;
  border: 1px solid rgba(15, 118, 110, 0.14);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.72);
  resize: vertical;
}

.ue-error-item.compact .ue-error-note {
  max-height: 96px;
}

.history-error-note {
  max-height: 220px;
  overflow-y: auto;
  resize: vertical;
}

.ue-errors-panel > .panel-title {
  align-items: center;
}

.ue-errors-panel > .panel-title > div {
  display: grid;
  gap: 2px;
}

.ue-errors-panel > .panel-title > div > small {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.ue-start-review {
  min-height: 38px;
  padding: 8px 14px;
}


.study-review-container .review-main {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
}

.study-review-hero {
  align-items: center;
}

.study-review-back {
  display: block;
  margin-bottom: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-color);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
}

.study-review-algorithm-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 12px;
  margin-top: 14px;
}

.study-review-algorithm-action small {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.study-review-part-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 13px;
}

.study-review-part {
  display: grid;
  gap: 3px;
  min-height: 94px;
  padding: 13px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #ffffff;
  color: var(--text-main);
  cursor: pointer;
  text-align: left;
}

.study-review-part:hover {
  border-color: #8fc9bf;
}

.study-review-part.active {
  border-color: var(--accent-color);
  background: #eaf5f3;
  box-shadow: inset 0 0 0 1px var(--accent-color);
}

.study-review-part span,
.study-review-part small {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 750;
}

.study-review-part strong {
  font-size: 1rem;
}

.study-review-session {
  max-width: 1040px;
  margin: 0 auto;
}

.study-review-card {
  align-items: stretch;
  place-items: stretch;
  min-height: 460px;
  text-align: left;
}

.study-review-card.revealed {
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
}

.study-review-prompt {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.study-review-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--accent-color);
  font-size: 0.75rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.study-review-question-focus {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 14px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid #8fc9bf;
  border-radius: 11px;
  background: #eaf5f3;
}

.study-review-question-focus > span {
  grid-column: 1;
  color: var(--accent-color);
  font-size: 0.66rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.study-review-question-focus > strong {
  grid-column: 1;
  grid-row: 2;
  color: var(--accent-color);
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.study-review-question-focus > p {
  grid-column: 2;
  grid-row: 1 / 3;
  color: #40545d;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
}

.study-review-source {
  flex: 1;
  max-height: 420px;
  padding: 20px;
  overflow: auto;
  border: 1px solid #dce6e4;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.84);
  color: #26343f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.72;
  white-space: pre-wrap;
}

.study-review-source.question-excerpt {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
}

.study-review-source.full-part {
  max-height: 520px;
}

.study-review-prompt > small {
  margin-top: 8px;
  color: var(--text-soft);
  font-size: 0.7rem;
}

.study-review-instruction {
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.study-review-answer h2 {
  overflow-wrap: anywhere;
  color: var(--accent-color);
  font-size: clamp(1.35rem, 3vw, 2.2rem);
  text-transform: uppercase;
}

.study-review-answer-comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 18px;
}

.study-review-answer-comparison > div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid #cfe2de;
  border-radius: 8px;
  background: #ffffff;
}

.study-review-answer-comparison small {
  margin: 0;
}

.study-review-answer-comparison .missed strong {
  color: var(--color-error);
}

.study-review-answer-comparison .correct strong {
  color: var(--color-success);
}

.study-review-result-pill {
  display: inline-grid;
  gap: 2px;
  width: fit-content;
  margin-top: 16px;
  padding: 9px 12px;
  border: 1px solid #cfe2de;
  border-radius: 8px;
  background: #ffffff;
}

.study-review-result-pill small {
  margin: 0;
}

.study-review-result-pill.correct strong {
  color: var(--color-success);
}

.study-review-note-wrap {
  margin-top: 18px;
}

.study-review-note-wrap > span {
  display: block;
  margin-bottom: 6px;
  color: var(--text-soft);
  font-size: 0.69rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.study-review-answer blockquote {
  margin-top: 16px;
  padding: 12px 14px;
  border-left: 3px solid var(--accent-color);
  background: rgba(255, 255, 255, 0.7);
  color: #34434f;
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.study-review-answer .study-review-note {
  min-height: 82px;
  max-height: min(34vh, 260px);
  margin-top: 0;
  overflow-y: auto;
  resize: vertical;
}

.study-review-note-wrap > small {
  margin-top: 6px;
  font-size: 0.68rem;
}

@media (max-width: 760px) {
  .ue-errors-panel > .panel-title {
    align-items: stretch;
    flex-direction: column;
  }

  .ue-start-review {
    width: 100%;
  }


  .study-review-part-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .study-review-card,
  .study-review-card.revealed {
    grid-template-columns: minmax(0, 1fr);
    min-height: 400px;
    padding: 18px;
  }

  .study-review-source {
    max-height: 360px;
    padding: 15px;
    font-size: 0.94rem;
  }

  .study-review-answer-comparison {
    grid-template-columns: 1fr;
  }

  .study-review-question-focus {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 12px;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  min-height: 100%;
  overflow-x: hidden;
}

html.modal-open,
body.modal-open {
  overflow: hidden;
}

body {
  font-family: var(--font-family);
  background: var(--bg-main);
  color: var(--text-main);
  line-height: 1.5;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

#app-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.home-container,
.dash-container {
  padding: 24px 0 40px;
  flex: 1;
  overflow-y: auto;
}

.app-topbar {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0 22px;
  border-bottom: 1px solid var(--border-color);
}

.brand-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  min-width: 0;
}

.brand-mark {
  width: auto;
  height: auto;
  padding: 2px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  border-bottom: 2px solid var(--accent-color);
  background: transparent;
  color: var(--accent-color);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0;
}

.brand-title,
.brand-subtitle,
.candidate-label,
.candidate-name {
  display: block;
}

.brand-title {
  font-weight: 800;
  font-size: 1.02rem;
}

.brand-subtitle,
.candidate-label {
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 600;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.nav-pill,
.candidate-switch,
.btn {
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.nav-pill {
  padding: 0 14px;
  font-size: 0.88rem;
  font-weight: 700;
}

.nav-pill:hover,
.candidate-switch:hover,
.btn:hover {
  border-color: var(--border-strong);
  background: #f9fbfc;
}

.nav-pill.active {
  background: var(--bg-ink);
  border-color: var(--bg-ink);
  color: #ffffff;
}

.candidate-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 11px;
  max-width: 260px;
  box-shadow: var(--shadow-line);
}

.candidate-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.candidate-name {
  max-width: 125px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84rem;
  font-weight: 800;
}

.candidate-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-left: 9px;
  border-left: 1px solid var(--border-color);
  color: var(--text-muted);
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 750;
}

.candidate-status i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  font-size: 0.88rem;
  font-weight: 750;
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-secondary {
  background: #ffffff;
  color: var(--text-main);
}

.btn-danger {
  border-color: var(--color-error);
  background: var(--color-error);
  color: #ffffff;
}

.btn-danger:hover:not(:disabled) {
  border-color: #9f2630;
  background: #9f2630;
}

.btn-danger:disabled {
  border-color: #d8a6aa;
  background: #d8a6aa;
  color: rgba(255, 255, 255, 0.86);
  cursor: not-allowed;
}

.btn-full {
  width: 100%;
}

.btn-danger-link {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-error);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.btn-danger-link:hover {
  background: transparent;
  color: #9f2630;
  text-decoration: underline;
}

.btn-accent-link {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-color);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.btn-accent-link:hover {
  background: transparent;
  color: var(--accent-hover);
  text-decoration: underline;
}

.eyebrow {
  display: inline-block;
  color: var(--accent-color);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Home */
.home-main,
.dashboard-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 24px;
}

.home-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 18px;
  align-items: stretch;
}

.home-title-area {
  padding: 28px 0;
  min-width: 0;
}

.home-title-area h1 {
  margin-top: 8px;
  font-size: 2.4rem;
  line-height: 1.08;
  font-weight: 850;
  letter-spacing: 0;
}

.home-title-area p {
  max-width: 560px;
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 0.98rem;
}

.home-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-self: center;
}

.metric-tile,
.summary-card,
.dash-panel,
.section-square-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--shadow-line);
}

.metric-tile {
  min-height: 132px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.metric-tile.focus {
  border-color: #a7d8ce;
  background: var(--accent-soft);
}

.metric-label,
.summary-card-title {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.metric-tile strong {
  font-size: 1.9rem;
  line-height: 1;
  font-weight: 850;
}

.metric-note,
.summary-card-note {
  min-width: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 650;
}

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

.section-square-card {
  min-height: 280px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.section-square-card:hover {
  border-color: var(--accent-color);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.section-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.section-code {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #edf2f7;
  color: var(--text-main);
  flex-shrink: 0;
}

.section-code svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.section-card-badge {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.section-card-title {
  font-size: 1.08rem;
  line-height: 1.2;
  font-weight: 850;
}

.section-card-desc {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 0.84rem;
}

.section-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.section-card-stats div {
  min-width: 0;
}

.section-card-stats span {
  display: block;
  color: var(--text-soft);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.section-card-stats strong {
  display: block;
  margin-top: 2px;
  font-size: 1rem;
  font-weight: 850;
}

.mini-meter,
.meter {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #e8edf2;
  overflow: hidden;
}

.mini-meter span,
.meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-color);
}

/* Dashboard */
.insight-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 16px;
  align-items: center;
  padding: 24px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-line);
}

.insight-hero.strong {
  border-color: #9bd5bf;
}

.insight-hero.risk {
  border-color: #efb4ba;
}

.insight-copy h1 {
  margin-top: 6px;
  font-size: 2.1rem;
  line-height: 1.08;
  font-weight: 850;
}

.insight-copy p {
  margin-top: 8px;
  color: var(--text-muted);
  max-width: 620px;
}

.score-ring {
  width: 118px;
  height: 118px;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 50%;
  border: 10px solid var(--accent-soft);
  outline: 1px solid var(--border-color);
  background: #ffffff;
}

.score-ring strong {
  font-size: 2rem;
  line-height: 1;
  font-weight: 900;
}

.score-ring span {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.focus-strip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f7faf9;
  border: 1px solid #d8ebe6;
}

.focus-strip span {
  color: var(--accent-color);
  font-weight: 850;
}

.focus-strip strong {
  color: var(--text-main);
  font-size: 0.88rem;
}

.summary-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.summary-card {
  min-height: 126px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.summary-card-value {
  font-size: 2rem;
  line-height: 1;
  font-weight: 900;
}

.summary-card-value.positive,
.summary-card-value.pass,
.summary-card-value.excellent,
.attempt-score .pass,
.attempt-score .excellent,
.section-performance-head .pass,
.section-performance-head .excellent {
  color: var(--color-success);
}

.summary-card-value.warning,
.accuracy-value.warning {
  color: var(--color-warning);
}

.summary-card-value.negative,
.summary-card-value.risk,
.accuracy-value.risk,
.attempt-score .risk,
.section-performance-head .risk {
  color: var(--color-error);
}

.summary-card-value.good,
.accuracy-value.pass,
.accuracy-value.excellent {
  color: var(--color-success);
}

.summary-card-value.neutral,
.accuracy-value.neutral,
.section-performance-head .neutral {
  color: var(--text-main);
}

.accuracy-value {
  font-weight: 850;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  grid-template-areas:
    "progress progress"
    "sections attempts"
    "parts parts";
  gap: 14px;
  align-items: start;
}

.dash-panel {
  min-width: 0;
  padding: 18px;
}

.progress-panel {
  grid-area: progress;
}

.section-panel {
  grid-area: sections;
  align-self: stretch;
}

.attempts-panel {
  grid-area: attempts;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.part-panel {
  grid-area: parts;
}

.ue-errors-panel {
  margin-top: 0;
}

.ue-text-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}

.ue-text-workspace.text-open {
  grid-template-columns: minmax(0, 1fr) minmax(440px, 0.72fr);
}

.ue-errors-workspace {
  padding-top: 16px;
}

.ue-errors-workspace.text-open .ue-part-register {
  max-height: min(72vh, 720px);
  overflow-y: auto;
  padding-right: 5px;
}

.ue-errors-workspace.text-open .ue-part-register-grid {
  grid-template-columns: minmax(280px, 1fr);
}

.ue-errors-workspace.text-open .ue-part-card.text-source {
  border-color: #a7d8ce;
  background: #f7faf9;
}

.ue-part-error-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ue-error-item {
  padding: 11px;
  border: 1px solid #efd2d5;
  border-radius: 8px;
  background: var(--color-error-bg);
}

.ue-error-item.compact {
  padding: 9px;
  background: #ffffff;
}

.ue-error-item.noted-correct {
  border-color: #b9ddd6;
  background: #f1f8f6;
}

.ue-error-item.noted-correct .ue-error-item-head > span,
.ue-error-item.noted-correct .ue-error-part {
  color: var(--accent-color);
}

.ue-error-item-head,
.ue-error-item-head > div,
.ue-part-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ue-error-item-head > div {
  justify-content: flex-start;
}

.ue-error-item-head strong {
  font-size: 0.82rem;
}

.ue-error-item-head > span,
.ue-error-part {
  color: var(--color-error);
  font-size: 0.7rem;
  font-weight: 850;
}

.ue-error-part {
  padding: 2px 6px;
  border-radius: 999px;
  background: #ffffff;
}

.ue-error-answer {
  margin-top: 7px;
  overflow-wrap: anywhere;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.82rem;
  font-weight: 850;
  text-transform: uppercase;
}

.error-answer-label {
  display: block;
  margin-bottom: 3px;
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.error-answer-label {
  margin-top: 8px;
  margin-bottom: -4px;
}

.ue-error-note {
  margin-top: 6px;
  color: var(--text-main);
  font-size: 0.78rem;
  line-height: 1.4;
  white-space: pre-wrap;
}

.ue-error-note.empty,
.ue-part-empty {
  color: var(--text-muted);
  font-style: italic;
}

.ue-error-review {
  margin-top: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 750;
}

.ue-error-review:hover {
  color: var(--accent-color);
}

.ue-error-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.ue-error-actions .ue-error-review {
  margin-top: 0;
}

.ue-error-text-button,
.history-question-text-button,
.history-part-text-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-color);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 850;
}

.ue-error-text-button:hover,
.history-question-text-button:hover,
.history-part-text-button:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

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

.ue-part-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fbfcfd;
}

.ue-part-card-head {
  align-items: flex-start;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.ue-part-card-head span,
.ue-part-card-head strong {
  display: block;
}

.ue-part-card-head span {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.ue-part-card-head strong {
  margin-top: 2px;
  font-size: 0.8rem;
}

.ue-part-card-head b {
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-error-bg);
  color: var(--color-error);
  font-size: 0.78rem;
}

.ue-part-error-list,
.ue-part-empty {
  margin-top: 10px;
}

.ue-part-error-list {
  flex: 1;
}

.ue-part-empty {
  font-size: 0.76rem;
}

.ue-errors-empty {
  min-height: 120px;
}

.ue-view-all-errors {
  min-height: 36px;
  margin-top: 10px;
  font-size: 0.76rem;
}

.ue-part-text-panel {
  min-width: 0;
  align-self: start;
  position: sticky;
  top: 8px;
  height: min(72vh, 720px);
  display: flex;
  flex-direction: column;
  padding: 14px;
  overflow: hidden;
  border: 1px solid #a7d8ce;
  border-radius: 8px;
  background: #f7faf9;
}

.ue-part-text-panel[hidden] {
  display: none;
}

.ue-part-text-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #d8ebe6;
  flex: 0 0 auto;
}

.ue-part-text-panel-head span,
.ue-part-text-panel-head strong {
  display: block;
}

.ue-part-text-panel-head span {
  color: var(--accent-color);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ue-part-text-panel-head strong {
  margin-top: 2px;
  font-size: 0.92rem;
}

.ue-part-text-panel-head button {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.3rem;
}

.ue-part-text-panel-head button:hover {
  background: #e8f3f0;
  color: var(--text-main);
}

.ue-part-text-floating-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.3rem;
}

.ue-part-text-floating-close:hover {
  background: #e8f3f0;
  color: var(--text-main);
}

.ue-part-text-panel-meta {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  flex: 0 0 auto;
}

.ue-part-text-content,
.ue-part-text-missing {
  min-height: 0;
  flex: 1 1 auto;
  margin-top: 12px;
  padding: 12px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: #ffffff;
  color: var(--text-main);
  font-size: 0.82rem;
  line-height: 1.65;
  white-space: pre-wrap;
}

.ue-part-text-missing {
  color: var(--text-muted);
}

.ue-part-text-open-review {
  flex: 0 0 auto;
  margin-top: 12px;
  min-height: 36px;
  font-size: 0.76rem;
}

.modal-content.ue-all-errors-modal {
  width: min(1220px, calc(100vw - 16px));
  height: calc(100dvh - 16px);
  max-height: none;
  padding: 14px 16px;
}

.modal-content.ue-all-errors-modal > .ue-all-errors-workspace {
  overflow: hidden;
}

.ue-all-errors-modal .modal-header {
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.ue-error-search-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  margin-bottom: 10px;
}

.ue-error-search-row label {
  width: min(560px, 100%);
  display: grid;
  gap: 5px;
}

.ue-error-search-row .ue-error-scope-control {
  width: min(280px, 100%);
}

.ue-error-search-row label span {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.ue-error-search-row input,
.ue-error-search-row select {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fbfcfd;
  color: var(--text-main);
  font: inherit;
  font-size: 0.84rem;
  outline: none;
}

.ue-error-search-row input:focus,
.ue-error-search-row select:focus {
  border-color: var(--accent-color);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}

.ue-error-search-row small {
  padding-bottom: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  font-size: 0.74rem;
  font-weight: 800;
}

.ue-search-empty {
  min-height: 180px;
}

.all-attempts-modal {
  width: min(640px, calc(100vw - 24px));
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.all-attempts-filter-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 4px;
}

.all-attempts-filter-row label {
  width: min(300px, 100%);
  display: grid;
  gap: 5px;
}

.all-attempts-filter-row label span {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.all-attempts-filter-row select {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fbfcfd;
  color: var(--text-main);
  font: inherit;
  font-size: 0.84rem;
  outline: none;
}

.all-attempts-filter-row select:focus {
  border-color: var(--accent-color);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}

.all-attempts-filter-row small {
  padding-bottom: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  font-size: 0.74rem;
  font-weight: 800;
}

.all-attempts-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 2px 16px;
}

.all-attempts-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.ue-all-errors-workspace {
  min-height: 0;
  flex: 1 1 auto;
  height: auto;
  overflow: hidden;
}

.ue-all-errors-workspace.text-open {
  grid-template-columns: minmax(0, 1.1fr) minmax(500px, 0.95fr);
}

.ue-all-errors-list {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 5px;
}

.ue-all-errors-workspace .ue-part-text-panel {
  position: relative;
  height: 100%;
  padding: 12px;
}

.ue-all-errors-modal .ue-part-text-panel-head,
.history-review-modal.text-open .ue-part-text-panel-head {
  padding-bottom: 8px;
}

.ue-all-errors-modal .ue-part-text-panel-meta,
.history-review-modal.text-open .ue-part-text-panel-meta {
  margin-top: 7px;
}

.ue-all-errors-modal .ue-part-text-panel-meta {
  min-height: 28px;
  margin-top: 0;
  padding-right: 34px;
  display: flex;
  align-items: center;
}

.ue-all-errors-modal .ue-part-text-content,
.history-review-modal.text-open .ue-part-text-content {
  margin-top: 8px;
  padding: 10px;
  line-height: 1.55;
}

.ue-all-errors-modal .ue-part-text-open-review {
  min-height: 36px;
  margin-top: 8px;
}

.ue-all-errors-modal .history-review-actions {
  margin-top: 8px;
  padding-top: 8px;
}

.ue-all-errors-modal .history-review-actions .btn {
  min-height: 38px;
}

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  font-size: 1rem;
  font-weight: 850;
}

.panel-title small {
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.panel-body-scroll {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
  min-height: 0;
}

.panel-body-scroll::-webkit-scrollbar {
  width: 8px;
}

.panel-body-scroll::-webkit-scrollbar-track {
  background: #f0f3f6;
  border-radius: 999px;
}

.panel-body-scroll::-webkit-scrollbar-thumb {
  background: #c9d3dd;
  border-radius: 999px;
}

.chart-frame {
  position: relative;
  min-height: 260px;
  margin-top: 18px;
  padding: 24px 8px 0 44px;
  border-bottom: 1px solid var(--border-strong);
  background:
    linear-gradient(to bottom, transparent 0, transparent calc(100% - 1px), var(--border-color) calc(100% - 1px));
}

.chart-guide {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(23, 32, 42, 0.11);
}

.chart-guide span {
  position: absolute;
  left: 0;
  top: -10px;
  color: var(--text-soft);
  font-size: 0.68rem;
  font-weight: 800;
}

.guide-220 {
  top: 38px;
}

.guide-200 {
  top: 106px;
}

.chart-bars {
  height: 220px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
  gap: 10px;
  align-items: end;
}

.chart-bar {
  height: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: 22px minmax(0, 1fr) 18px 18px;
  gap: 4px;
  align-items: end;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.chart-value {
  align-self: start;
  justify-self: center;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.chart-fill {
  width: 100%;
  height: var(--bar-height);
  min-height: 8px;
  border-radius: 6px 6px 2px 2px;
  background: var(--accent-color);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.chart-bar.excellent .chart-fill {
  background: var(--color-success);
}

.chart-bar.pass .chart-fill {
  background: var(--accent-color);
}

.chart-bar.risk .chart-fill {
  background: var(--color-error);
}

.chart-date,
.chart-code {
  justify-self: center;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 750;
  white-space: nowrap;
}

.chart-code {
  color: var(--text-main);
}

.chart-legend {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 750;
}

.legend-mark {
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: -1px;
}

.legend-mark.pass {
  background: var(--accent-color);
}

.legend-mark.excellent {
  background: var(--color-success);
}

.progress-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 14px;
}

.progress-row {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fbfcfd;
}

.progress-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.progress-row-head div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-row-head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.96rem;
}

.progress-row-head > span {
  color: var(--text-main);
  font-size: 0.9rem;
  font-weight: 900;
  white-space: nowrap;
}

.progress-row-head > .progress-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.progress-row-average-foot {
  grid-column: 3;
  grid-row: 2;
  align-self: end;
  color: var(--text-main);
  font-size: 0.72rem;
  font-weight: 900;
  text-align: right;
}

.progress-row-weakest {
  grid-column: 1 / span 2;
  grid-row: 2;
}

.progress-evolution-button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid #b8d9d4;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent-hover);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 850;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.progress-evolution-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.progress-evolution-button:hover:not(:disabled) {
  border-color: var(--accent-color);
  background: #d8eee9;
  transform: translateY(-1px);
}

.progress-evolution-button:focus-visible,
.evolution-tab:focus-visible,
.evolution-point:focus-visible {
  outline: 3px solid rgba(15, 118, 110, 0.2);
  outline-offset: 2px;
}

.progress-evolution-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.scale-track {
  position: relative;
  height: 12px;
  margin-top: 14px;
  border-radius: 999px;
  background: #e8edf2;
  overflow: hidden;
}

.scale-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #667085, var(--accent-color));
}

.threshold {
  position: absolute;
  top: -1px;
  z-index: 2;
  color: rgba(23, 32, 42, 0.55);
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 12px;
}

.threshold-200 {
  left: 72%;
}

.threshold-220 {
  left: 91%;
}

.attempt-sparkline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 38px;
  margin-top: 12px;
}

.attempt-chip {
  min-width: 74px;
  max-width: 100%;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 9px;
  border: 1px solid rgba(23, 32, 42, 0.08);
  border-radius: 7px;
  background: #eef3f2;
  color: var(--text-main);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 850;
}

.attempt-chip.pass {
  background: var(--accent-soft);
}

.attempt-chip.excellent {
  background: var(--color-success-bg);
}

.attempt-chip.risk {
  background: var(--color-error-bg);
}

.attempt-chip strong {
  font-size: 0.82rem;
}

.no-attempts {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.progress-row-foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 750;
}

.progress-row-foot span {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

/* Full section evolution */
.modal-content.evolution-modal {
  width: min(1120px, 100%);
  max-height: 92vh;
  padding: 0;
  overflow: hidden;
}

.evolution-modal-header {
  flex: 0 0 auto;
  margin: 0;
  padding: 20px 22px 15px;
}

.evolution-tabs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 10px 22px;
  border-bottom: 1px solid var(--border-color);
  background: #f8fafb;
}

.evolution-tab {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
}

.evolution-tab .section-code {
  width: 28px;
  height: 28px;
  background: #e9eef3;
}

.evolution-tab:hover {
  background: #ffffff;
  color: var(--text-main);
}

.evolution-tab.active {
  border-color: #b8d9d4;
  background: #ffffff;
  color: var(--accent-hover);
  box-shadow: var(--shadow-line);
}

.evolution-tab.active .section-code {
  background: var(--accent-soft);
  color: var(--accent-color);
}

.evolution-modal-body {
  padding: 20px 22px 22px;
  overscroll-behavior: contain;
}

.evolution-section-heading,
.evolution-section-heading > div {
  display: flex;
  align-items: center;
}

.evolution-section-heading {
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.evolution-section-heading > div {
  gap: 10px;
  min-width: 0;
}

.evolution-section-heading h4 {
  font-size: 1.05rem;
  line-height: 1.2;
}

.evolution-section-heading > span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #edf2f7;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.evolution-metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.evolution-metric-card {
  min-width: 0;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fbfcfd;
}

.evolution-metric-card > span {
  color: var(--text-muted);
  font-size: 0.69rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.evolution-metric-card strong {
  margin: 5px 0 2px;
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 900;
}

.evolution-metric-card small {
  color: var(--text-muted);
  font-size: 0.67rem;
  line-height: 1.35;
  font-weight: 700;
}

.evolution-metric-card.featured {
  background: var(--accent-soft);
  border-color: #b8d9d4;
}

.evolution-metric-card.featured.excellent {
  background: var(--color-success-bg);
  border-color: #a9ddc6;
}

.evolution-metric-card.featured.risk {
  background: var(--color-error-bg);
  border-color: #f1c6ca;
}

.metric-positive {
  color: var(--color-success);
}

.metric-negative {
  color: var(--color-error);
}

.metric-neutral {
  color: var(--text-main);
}

.evolution-chart-card {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #ffffff;
}

.evolution-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}

.evolution-chart-head h5 {
  font-size: 0.91rem;
}

.evolution-chart-head p {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.7rem;
}

.evolution-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.evolution-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.evolution-legend i {
  width: 12px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent-color);
}

.evolution-legend i.grade-a {
  background: var(--color-success);
}

.evolution-chart-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 7px;
  background: linear-gradient(180deg, #fbfcfd 0%, #ffffff 100%);
  scrollbar-color: var(--border-strong) transparent;
  scrollbar-width: thin;
}

.evolution-chart {
  height: 320px;
  display: block;
  overflow: visible;
  font-family: var(--font-family);
}

.evolution-grid-line {
  stroke: #e3e8ee;
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.evolution-grid-line.c2-threshold {
  stroke: var(--accent-color);
  stroke-width: 1.4;
  stroke-dasharray: 7 5;
}

.evolution-grid-line.grade-a-threshold {
  stroke: var(--color-success);
  stroke-width: 1.4;
  stroke-dasharray: 7 5;
}

.evolution-axis-label,
.evolution-date-label {
  fill: var(--text-soft);
  font-size: 10px;
  font-weight: 700;
}

.evolution-axis-label.c2-threshold,
.evolution-axis-label.grade-a-threshold,
.evolution-threshold-label {
  fill: var(--accent-color);
  font-size: 10px;
  font-weight: 900;
}

.evolution-axis-label.grade-a-threshold {
  fill: var(--color-success);
}

.evolution-line {
  fill: none;
  stroke: var(--accent-color);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.evolution-point {
  cursor: pointer;
}

.evolution-point-halo {
  fill: rgba(15, 118, 110, 0.13);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.evolution-point-dot {
  fill: #ffffff;
  stroke: var(--accent-color);
  stroke-width: 3;
}

.evolution-point.excellent .evolution-point-dot {
  stroke: var(--color-success);
}

.evolution-point.risk .evolution-point-dot {
  stroke: var(--color-error);
}

.evolution-point:hover .evolution-point-halo,
.evolution-point:focus .evolution-point-halo {
  opacity: 1;
}

.evolution-point-score,
.evolution-attempt-label {
  fill: var(--text-main);
  font-size: 11px;
  font-weight: 900;
  pointer-events: none;
}

.evolution-attempt-label {
  font-size: 10px;
}

.evolution-study-focus {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 14px;
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px solid #b8d9d4;
  border-radius: 8px;
  background: var(--accent-soft);
}

.evolution-study-focus > span {
  color: var(--accent-hover);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.evolution-study-focus strong {
  display: block;
  color: var(--text-main);
  font-size: 0.85rem;
}

.evolution-study-focus p {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.73rem;
}

.evolution-empty {
  min-height: 260px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  background: #fbfcfd;
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 750;
}

/* Compact evolution workspace */
.modal-content.evolution-modal {
  width: min(1180px, 100%);
  max-height: calc(100vh - 24px);
}

.evolution-modal-header {
  padding: 13px 18px 11px;
}

.evolution-modal-header .modal-title {
  margin-top: 1px;
}

.evolution-tabs {
  gap: 6px;
  padding: 6px 18px;
}

.evolution-tab {
  min-height: 38px;
  padding: 4px 9px;
}

.evolution-tab .section-code {
  width: 26px;
  height: 26px;
}

.modal-body.evolution-modal-body {
  padding: 12px 18px 16px;
  overflow: hidden;
}

.evolution-section-heading {
  min-height: 38px;
  margin-bottom: 10px;
}

.evolution-section-heading .section-code {
  width: 30px;
  height: 30px;
}

.evolution-section-heading h4 {
  font-size: 0.98rem;
}

.evolution-workspace {
  height: 356px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 10px;
}

.evolution-chart-card {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 13px 14px 10px;
  border-color: #d8e2e5;
  border-radius: 10px;
  background: linear-gradient(145deg, #ffffff 0%, #f6faf9 100%);
}

.evolution-chart-head {
  flex: 0 0 auto;
  align-items: center;
  margin-bottom: 2px;
}

.evolution-chart-head h5 {
  font-size: 0.88rem;
}

.evolution-chart-head p {
  font-size: 0.67rem;
}

.evolution-legend {
  gap: 10px;
  font-size: 0.64rem;
}

.evolution-legend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: rgba(15, 118, 110, 0.18);
  border: 1px solid rgba(15, 118, 110, 0.42);
}

.evolution-legend i.grade-a {
  background: rgba(18, 128, 92, 0.22);
  border-color: rgba(18, 128, 92, 0.48);
}

.evolution-chart-frame {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.evolution-chart {
  width: 100%;
  height: auto;
  max-height: 286px;
  display: block;
  overflow: visible;
}

.evolution-zone.grade-a {
  fill: rgba(18, 128, 92, 0.075);
}

.evolution-zone.c2 {
  fill: rgba(15, 118, 110, 0.045);
}

.evolution-grid-line {
  stroke: #dde5e7;
  stroke-width: 1;
  stroke-dasharray: none;
}

.evolution-grid-line.c2-threshold,
.evolution-grid-line.grade-a-threshold {
  stroke-width: 1.15;
  stroke-dasharray: 4 5;
}

.evolution-area {
  pointer-events: none;
}

.evolution-line {
  stroke: #0f766e;
  stroke-width: 2.8;
  vector-effect: non-scaling-stroke;
}

.evolution-point-dot {
  fill: #ffffff;
  stroke-width: 2.3;
  vector-effect: non-scaling-stroke;
}

.evolution-point.latest .evolution-point-dot {
  fill: var(--accent-color);
  stroke: #ffffff;
  stroke-width: 2.5;
}

.evolution-point-score {
  fill: var(--accent-hover);
  font-size: 10px;
  font-weight: 900;
}

.evolution-date-label {
  fill: #7b8794;
  font-size: 9px;
  font-weight: 750;
}

.evolution-insights {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.evolution-score-summary {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #b8d9d4;
  border-radius: 10px;
  background: linear-gradient(135deg, #edf8f5, #f8fcfb);
}

.evolution-score-summary.excellent {
  border-color: #a9ddc6;
  background: linear-gradient(135deg, #e7f7ef, #f8fcfa);
}

.evolution-score-summary.risk {
  border-color: #ecc7ca;
  background: linear-gradient(135deg, #fff1f2, #fffafa);
}

.evolution-score-summary > div > span,
.evolution-compact-metrics span,
.evolution-accuracy span {
  display: block;
  color: var(--text-muted);
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.evolution-score-summary > div > strong {
  display: block;
  margin-top: 2px;
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 900;
}

.evolution-score-summary > div > small,
.evolution-improvement small,
.evolution-compact-metrics small {
  display: block;
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 700;
}

.evolution-improvement {
  flex: 0 0 auto;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 1.05rem;
  font-weight: 900;
  text-align: right;
}

.evolution-compact-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.evolution-compact-metrics article {
  min-width: 0;
  min-height: 64px;
  padding: 8px 9px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fbfcfd;
}

.evolution-compact-metrics strong {
  display: block;
  margin: 2px 0 1px;
  font-size: 1.12rem;
  line-height: 1;
  font-weight: 900;
}

.evolution-compact-metrics small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evolution-accuracy {
  padding: 7px 10px 8px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #ffffff;
}

.evolution-accuracy > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.evolution-accuracy strong {
  font-size: 0.76rem;
}

.evolution-accuracy-track {
  height: 4px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6ebef;
}

.evolution-accuracy-track span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #57a89e, var(--accent-color));
}

.evolution-study-focus {
  min-height: 58px;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
}

.evolution-study-focus > span {
  font-size: 0.61rem;
}

.evolution-study-focus strong {
  overflow: hidden;
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evolution-study-focus p {
  margin-top: 1px;
  font-size: 0.64rem;
  line-height: 1.3;
}

.part-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 14px;
}

.part-section {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fbfcfd;
}

.part-section-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.part-section-head div {
  min-width: 0;
}

.part-section-head strong,
.part-section-head div span {
  display: block;
}

.part-section-head strong {
  font-size: 0.96rem;
  font-weight: 900;
}

.part-section-head div > span {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 750;
}

.part-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.part-bar {
  min-width: 0;
}

.part-bar-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.part-bar-label span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.part-bar-label strong {
  color: var(--text-main);
  white-space: nowrap;
}

.part-bar.weakest .meter {
  background: var(--color-error-bg);
}

.part-bar.weakest .meter span {
  background: var(--color-error);
}

.empty-chart,
.empty-state {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  text-align: center;
  font-size: 0.9rem;
}

.attempt-list,
.section-performance-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
}

.attempt-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 28px;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fbfcfd;
  cursor: pointer;
}

.attempt-item:hover {
  border-color: var(--border-strong);
  background: #ffffff;
}

.attempt-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.attempt-copy {
  min-width: 0;
}

.attempt-copy strong,
.attempt-copy span {
  display: block;
}

.attempt-copy strong {
  overflow: hidden;
  color: var(--text-main);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
}

.attempt-copy span,
.attempt-score span {
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 650;
}

.attempt-score {
  text-align: right;
  white-space: nowrap;
}

.attempt-score strong {
  display: block;
  font-size: 1.1rem;
  line-height: 1.1;
  font-weight: 900;
}

.attempt-score .partial {
  color: var(--accent-color);
  font-size: 0.9rem;
}

.attempt-score .partial-practice-caption {
  color: var(--accent-hover);
}

.delete-hist-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 850;
}

.delete-hist-btn:hover {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.section-performance-card {
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fbfcfd;
}

.section-performance-card.needs-focus {
  border-color: var(--color-error);
  background: var(--color-error-bg);
}

.section-performance-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.section-performance-head div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.section-performance-head h3 {
  font-size: 0.94rem;
  line-height: 1.2;
  font-weight: 850;
}

.section-performance-head strong {
  font-size: 1.3rem;
  line-height: 1;
  font-weight: 900;
}

.section-performance-card .meter {
  margin-top: 12px;
}

.section-performance-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 750;
}

/* Legacy lists and analytics used by older detail blocks */
.history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fbfcfd;
}

.history-details {
  min-width: 0;
}

.history-header-line,
.history-meta-line {
  display: block;
}

.history-header-line {
  font-weight: 850;
}

.history-meta-line,
.history-raw-fraction {
  color: var(--text-muted);
  font-size: 0.74rem;
}

.history-score-badge {
  text-align: right;
  white-space: nowrap;
}

.history-scale-score {
  font-size: 1.08rem;
  font-weight: 900;
  color: var(--text-main);
}

.history-scale-score.pass {
  color: var(--color-success);
}

.history-scale-score.fail {
  color: var(--color-error);
}

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

.analytics-card {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfd;
}

.analytics-card-title {
  display: block;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.analytics-card-value {
  display: block;
  margin-top: 4px;
  font-size: 1rem;
  font-weight: 850;
}

/* Answer sheet */
.sheet-view {
  width: 100%;
  flex: 1;
  overflow-y: auto;
  padding: 28px 16px 44px;
}

.sheet-container {
  width: min(780px, 100%);
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 24px;
  box-shadow: var(--shadow-soft);
}

.sheet-container-wide {
  width: min(1680px, 100%);
}

.exam-listening-sheet-view {
  padding: 10px 8px 12px;
}

.exam-listening-sheet-view .sheet-container-wide {
  padding: 16px;
}

.exam-listening-sheet-view .sheet-header {
  margin-bottom: 12px;
  padding-bottom: 12px;
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 18px;
}

.sheet-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.practice-timer {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 6px 5px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fbfcfd;
}

.practice-timer span {
  min-width: 74px;
  color: var(--text-main);
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.94rem;
  font-weight: 900;
}

.practice-timer-actions {
  display: flex;
  gap: 6px;
}

.timer-btn {
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.78rem;
}

.sheet-title {
  min-width: 0;
}

.sheet-title h2 {
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 850;
}

.sheet-title p {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.sheet-notice {
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  background: #f7faf9;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.sheet-questions-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 22px;
}

.sheet-part-card {
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #ffffff;
}

.sheet-part-title {
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--accent-color);
  font-size: 1rem;
  font-weight: 700;
}

.listening-part4-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.listening-task-column {
  min-width: 0;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fbfcfd;
  overflow: hidden;
}

.listening-task-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border-color);
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.listening-task-header span {
  font-size: 0.9rem;
  font-weight: 900;
}

.listening-task-header small {
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

.listening-task-rows {
  padding: 2px 8px;
}

.listening-part4-row .sheet-row-main {
  grid-template-columns: minmax(52px, auto) minmax(120px, 1fr);
}

.listening-part4-row [id^="correction-controls-"] {
  grid-column: 1 / -1;
  justify-self: end;
}

.sheet-row {
  width: 100%;
}

.sheet-row-main {
  display: grid;
  grid-template-columns: minmax(64px, auto) minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.sheet-q-num {
  color: var(--accent-color);
  font-size: 0.92rem;
  font-weight: 900;
  white-space: nowrap;
}

input.sheet-text-input,
.sheet-select-input {
  width: 100%;
  max-width: 280px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fbfcfd;
  color: var(--text-main);
  outline: none;
  font-weight: 800;
}

input.sheet-text-input {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  text-transform: uppercase;
}

input.sheet-text-input-long {
  max-width: 540px;
}

input.sheet-text-input:focus,
.sheet-select-input:focus,
.sheet-error-note-input:focus,
.writing-sheet-textarea:focus {
  border-color: var(--accent-color);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

input.sheet-text-input:disabled,
.sheet-select-input:disabled {
  background: #eef2f5;
  color: #4a5563;
}

.sheet-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.sheet-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  font-size: 0.92rem;
  font-weight: 850;
  cursor: pointer;
}

.sheet-radio-input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-color);
}

.correction-controls-box,
.points-btn-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.correct-btn,
.incorrect-btn,
.points-btn {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  color: var(--text-main);
  font-size: 0.8rem;
  font-weight: 850;
}

.correct-btn:hover {
  background: var(--color-success-bg);
  border-color: var(--color-success);
}

.incorrect-btn:hover {
  background: var(--color-error-bg);
  border-color: var(--color-error);
}

.correct-btn.active,
.points-btn.active-2 {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #ffffff;
}

.incorrect-btn.active,
.points-btn.active-0 {
  background: var(--color-error);
  border-color: var(--color-error);
  color: #ffffff;
}

.points-btn.active-1 {
  background: var(--color-error);
  border-color: var(--color-error);
  color: #ffffff;
}

.sheet-error-note-box {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-color);
}

.sheet-model-answer-review {
  grid-template-columns: minmax(100px, auto) minmax(0, 1fr);
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #b9ddd6;
  border-radius: 8px;
  background: var(--accent-soft);
}

.sheet-model-answer-review span {
  color: var(--accent-hover);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.sheet-model-answer-review strong {
  overflow-wrap: anywhere;
  color: var(--text-main);
  font-size: 0.88rem;
}

.sheet-model-answer-review small {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.sheet-error-note-box label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 850;
}

.sheet-error-note-input {
  width: 100%;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  outline: none;
  resize: vertical;
  color: var(--text-main);
  font-family: inherit;
  line-height: 1.4;
}

.history-error-note {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 3px solid var(--color-error);
  border-radius: 0 6px 6px 0;
  background: var(--color-error-bg);
  color: var(--text-main);
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.history-error-note strong {
  display: block;
  margin-bottom: 2px;
  color: var(--color-error);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.history-error-note.noted-correct {
  border-left-color: var(--accent-color);
  background: #f1f8f6;
}

.history-error-note.noted-correct strong {
  color: var(--accent-color);
}

.history-question-row {
  padding: 0.65rem 0.25rem;
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.8rem;
}

.history-question-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.history-question-main > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.history-question-text-button {
  margin-top: 7px;
}

.history-part-card {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.history-part-card-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 0.35rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px dashed var(--border-color);
}

.history-part-card-headline h4 {
  color: var(--accent-color);
  font-size: 0.85rem;
  font-weight: 700;
}

.history-review-workspace.text-open {
  grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.1fr);
}

.modal-content.history-review-modal[data-history-section="useOfEnglish"].text-open,
.modal-content.history-review-modal[data-history-section="reading"].text-open {
  width: min(1220px, calc(100vw - 16px)) !important;
  max-width: 1220px !important;
}

.modal-content.history-review-modal[data-history-section="useOfEnglish"],
.modal-content.history-review-modal[data-history-section="reading"] {
  max-height: calc(100dvh - 16px) !important;
  padding: 14px 16px;
}

.history-review-modal[data-history-section="useOfEnglish"] .modal-header,
.history-review-modal[data-history-section="reading"] .modal-header {
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.history-review-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: #f9fafb;
}

.history-review-saved {
  flex: 0 0 auto;
  margin-bottom: 0.75rem;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.history-review-modal[data-history-section="useOfEnglish"] .history-review-summary,
.history-review-modal[data-history-section="reading"] .history-review-summary {
  margin-bottom: 10px;
  padding: 8px 12px;
}

.history-review-modal[data-history-section="useOfEnglish"] .history-review-saved,
.history-review-modal[data-history-section="reading"] .history-review-saved {
  margin-bottom: 7px;
}

.history-review-modal.text-open > .modal-body {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}

.history-review-modal.text-open .history-review-workspace {
  min-height: 0;
  flex: 1 1 auto;
  height: auto;
  overflow: hidden;
}

.history-review-modal.text-open .history-review-workspace > div {
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.history-review-modal.text-open .history-review-part-text-panel {
  align-self: stretch;
  position: static;
  height: 100%;
  padding: 12px;
}

.history-review-scroll-body {
  overflow-y: auto;
}

.history-review-workspace {
  min-height: 0;
  height: auto;
  overflow: visible;
}

.history-review-workspace > div {
  min-width: 0;
  overflow: visible;
}

.history-review-part-text-panel {
  height: min(62vh, 680px);
}

.history-grade-edit-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.history-error-note-editor {
  margin-top: 9px;
  padding: 9px 10px;
  border-left: 3px solid var(--accent-color);
  border-radius: 0 6px 6px 0;
  background: #f1f8f6;
}

.history-error-note-editor[hidden] {
  display: none;
}

.history-error-note-editor label {
  display: block;
  margin-bottom: 5px;
  color: var(--accent-color);
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
}

.history-error-note-editor textarea {
  width: 100%;
  min-height: 58px;
  padding: 8px 9px;
  border: 1px solid #b9ddd6;
  border-radius: 7px;
  background: #ffffff;
  color: var(--text-main);
  font: inherit;
  line-height: 1.4;
  resize: vertical;
  outline: none;
}

.history-error-note-editor textarea:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}

.ue-part-text-editor {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px dashed #a7d8ce;
  border-radius: 8px;
  background: #f7faf9;
}

.ue-part-text-editor label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.ue-part-text-editor label span {
  color: var(--accent-color);
  font-size: 0.76rem;
  font-weight: 900;
}

.ue-part-text-editor label small {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-align: right;
}

.ue-part-text-editor textarea {
  width: 100%;
  min-height: 124px;
  padding: 10px 11px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: #ffffff;
  color: var(--text-main);
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.55;
  resize: vertical;
  outline: none;
}

.ue-part-text-editor textarea:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}

.history-review-mode {
  display: block;
  margin-top: 3px;
  color: var(--accent-color);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.history-review-scale {
  color: var(--accent-color);
  font-size: 1.4rem;
  font-weight: 800;
}

.history-review-scale span {
  font-size: 0.85rem;
  font-weight: 400;
}

.history-review-raw {
  color: var(--text-main);
  font-size: 1.1rem;
  font-weight: 700;
}

.history-review-edit-notice {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px dashed #a7d8ce;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.history-partial-notice {
  margin: -2px 0 10px;
  padding: 9px 12px;
  border: 1px solid #a7d8ce;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.45;
}

.history-review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.history-review-modal[data-history-section="useOfEnglish"] > .history-review-actions,
.history-review-modal[data-history-section="reading"] > .history-review-actions {
  margin-top: 8px;
  padding-top: 8px;
}

.history-review-modal[data-history-section="useOfEnglish"] > .history-review-actions .btn,
.history-review-modal[data-history-section="reading"] > .history-review-actions .btn {
  min-height: 38px;
}

.history-review-delete {
  margin-right: auto;
  border-color: #e5b9be;
  background: #ffffff;
  color: var(--color-error);
}

.history-review-delete:hover {
  border-color: var(--color-error);
  background: var(--color-error-bg);
}

.history-writing-edit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.history-writing-edit-grid label {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(34px, auto) auto;
}

.history-writing-edit-grid label span {
  display: flex;
  align-items: flex-end;
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.25;
  text-transform: uppercase;
}

.history-writing-edit-grid select {
  width: 100%;
  min-height: 36px;
  padding: 0 7px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: #ffffff;
  color: var(--text-main);
  font-weight: 800;
  outline: none;
}

.history-writing-edit-grid select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}

.writing-sheet-textarea {
  width: 100%;
  min-height: 190px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  resize: vertical;
  outline: none;
  background: #fbfcfd;
  color: var(--text-main);
  line-height: 1.6;
}

.writing-part2-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 0.75rem;
}

.writing-type-control {
  min-width: min(220px, 100%);
  display: grid;
  gap: 5px;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 850;
  text-transform: uppercase;
}

.writing-type-control select {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text-main);
  font-size: 0.88rem;
  font-weight: 800;
  text-transform: none;
  outline: none;
}

.writing-prompt-panel {
  margin-bottom: 1.5rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #ffffff;
}

.writing-prompt-panel summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  cursor: pointer;
  color: var(--text-main);
  font-weight: 900;
}

.writing-prompt-panel summary small {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.writing-prompt-body {
  display: grid;
  gap: 10px;
  padding: 0 14px 14px;
  border-top: 1px solid var(--border-color);
}

.writing-prompt-textarea {
  width: 100%;
  min-height: 260px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fbfcfd;
  color: var(--text-main);
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  resize: vertical;
}

.writing-prompt-actions {
  display: flex;
  justify-content: flex-end;
}

.writing-word-badge {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #edf2f7;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.writing-word-badge.under {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.writing-word-badge.within {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.writing-word-badge.over {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.writing-grading-note {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #d8ebe6;
  border-radius: 8px;
  background: #f7faf9;
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 750;
}

.writing-criteria-checklist {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fbfcfd;
}

.writing-criteria-checklist h3 {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
  color: var(--accent-color);
  font-size: 1.02rem;
  font-weight: 850;
}

.writing-correction-field,
.history-writing-correction-editor {
  display: grid;
  gap: 6px;
}

.writing-correction-field {
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

.writing-correction-field > span,
.history-writing-correction-editor > span {
  color: var(--text-main);
  font-size: 0.82rem;
  font-weight: 850;
}

.writing-correction-field small {
  color: var(--text-muted);
  font-size: 0.74rem;
}

.writing-correction-field textarea,
.history-writing-correction-editor textarea {
  width: 100%;
  min-height: 130px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text-main);
  font: inherit;
  line-height: 1.5;
  resize: vertical;
  outline: none;
}

.writing-correction-field textarea:focus,
.history-writing-correction-editor textarea:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}

.history-writing-correction-editor {
  margin: 10px 0 14px;
}

.history-review-modal[data-history-section="writing"].editing .history-writing-correction-editor textarea {
  min-height: 280px;
}

.writing-part-total {
  margin-top: 2px;
  color: var(--text-main);
  font-size: 0.86rem;
  font-weight: 850;
  text-align: right;
}

.writing-score-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #a7d8ce;
  border-radius: 8px;
  background: var(--accent-soft);
}

.writing-score-summary div {
  min-width: 0;
}

.writing-score-summary span,
.history-writing-criteria {
  display: block;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.writing-score-summary strong {
  display: block;
  margin-top: 4px;
  color: var(--accent-hover);
  font-size: 0.96rem;
  font-weight: 900;
}

.criteria-title {
  color: var(--text-main);
  font-size: 0.86rem;
  font-weight: 850;
}

.criteria-desc {
  color: var(--text-muted);
  font-size: 0.76rem;
}

.criteria-slider-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 12px;
  align-items: center;
}

.criteria-slider {
  width: 100%;
  accent-color: var(--accent-color);
}

.criteria-value {
  text-align: right;
  font-weight: 850;
}

.history-writing-part {
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fbfcfd;
}

.history-writing-part h4 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  color: var(--accent-color);
  font-size: 0.96rem;
  font-weight: 850;
}

.history-writing-part h4 span {
  flex: 0 0 auto;
  color: var(--text-main);
  font-size: 0.82rem;
}

.history-writing-criteria {
  margin-top: 8px;
}

.history-writing-response {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text-main);
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.history-writing-correction {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #a7d8ce;
  border-radius: 8px;
  background: var(--accent-soft);
}

.history-writing-correction > strong {
  display: block;
  margin-bottom: 6px;
  color: var(--accent-hover);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.history-writing-markdown {
  color: var(--text-main);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.history-writing-markdown h2,
.history-writing-markdown h3,
.history-writing-markdown h4,
.history-writing-markdown h5,
.history-writing-markdown h6 {
  margin: 18px 0 8px;
  color: var(--text-main);
  line-height: 1.3;
  font-weight: 850;
}

.history-writing-markdown h2:first-child,
.history-writing-markdown h3:first-child,
.history-writing-markdown h4:first-child,
.history-writing-markdown h5:first-child,
.history-writing-markdown h6:first-child {
  margin-top: 0;
}

.history-writing-markdown h2 { font-size: 1.1rem; }
.history-writing-markdown h3 { font-size: 1rem; }
.history-writing-markdown h4,
.history-writing-markdown h5,
.history-writing-markdown h6 { font-size: 0.92rem; }

.history-writing-markdown p,
.history-writing-markdown ul,
.history-writing-markdown ol,
.history-writing-markdown blockquote,
.history-writing-markdown pre,
.history-writing-markdown .markdown-table-wrap {
  margin: 10px 0 0;
}

.history-writing-markdown p:first-child,
.history-writing-markdown ul:first-child,
.history-writing-markdown ol:first-child {
  margin-top: 0;
}

.history-writing-markdown ul,
.history-writing-markdown ol {
  padding-left: 1.4rem;
}

.history-writing-markdown li + li {
  margin-top: 6px;
}

.history-writing-markdown blockquote {
  padding: 8px 12px;
  border-left: 3px solid var(--accent-color);
  background: rgba(255, 255, 255, 0.62);
}

.history-writing-markdown code {
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(15, 118, 110, 0.1);
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.9em;
}

.history-writing-markdown pre {
  overflow-x: auto;
  padding: 10px 12px;
  border-radius: 7px;
  background: #ffffff;
}

.history-writing-markdown pre code {
  padding: 0;
  background: transparent;
}

.history-writing-markdown hr {
  margin: 16px 0;
  border: 0;
  border-top: 1px solid #a7d8ce;
}

.history-writing-markdown .markdown-table-wrap {
  overflow-x: auto;
}

.history-writing-markdown table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: #ffffff;
}

.history-writing-markdown th,
.history-writing-markdown td {
  padding: 7px 9px;
  border: 1px solid #cfe2de;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.history-writing-markdown th {
  background: rgba(15, 118, 110, 0.08);
  font-size: 0.76rem;
  font-weight: 850;
}

.history-writing-markdown .writing-assessment-table {
  min-width: 680px;
  table-layout: fixed;
}

.history-writing-markdown .writing-assessment-table .markdown-col-criterion {
  width: 190px;
}

.history-writing-markdown .writing-assessment-table .markdown-col-score {
  width: 88px;
}

.history-writing-markdown .writing-assessment-table .markdown-cell-score {
  text-align: center;
  white-space: nowrap;
}

/* Animated result summary */
.result-modal-overlay {
  background: rgba(18, 28, 36, 0.56);
  backdrop-filter: blur(7px);
}

.attempt-result-modal {
  --result-accent: var(--accent-color);
  position: relative;
  width: min(620px, 100%);
  max-height: calc(100vh - 24px);
  padding: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-top: 5px solid var(--result-accent);
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 4%, rgba(15, 118, 110, 0.13), transparent 28%),
    radial-gradient(circle at 92% 12%, rgba(49, 95, 189, 0.1), transparent 26%),
    #ffffff;
  text-align: center;
  animation: result-card-in 0.55s cubic-bezier(0.2, 0.85, 0.3, 1.15) both;
}

.attempt-result-modal.excellent {
  --result-accent: var(--color-success);
}

.attempt-result-modal.c1 {
  --result-accent: var(--color-info);
}

.attempt-result-modal.risk {
  --result-accent: var(--color-warning);
}

.attempt-result-modal.partial-practice-result {
  --result-accent: var(--accent-color);
}

.partial-practice-status {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 20px;
  padding: 18px;
  border: 1px solid #a7d8ce;
  border-radius: 12px;
  background: var(--accent-soft);
}

.partial-practice-status strong {
  color: var(--accent-hover);
  font-size: 1.15rem;
}

.partial-practice-status span {
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.result-stat-grid.partial-practice-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.result-modal-close {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
}

.result-mascot {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin: 0 auto 9px;
  border: 1px solid rgba(15, 118, 110, 0.15);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 24px rgba(23, 32, 42, 0.1);
  font-size: 2rem;
  animation: result-mascot-bob 1.8s ease-in-out 0.5s infinite;
}

.attempt-result-modal h2 {
  margin-top: 3px;
  font-size: 1.7rem;
  line-height: 1.15;
}

.result-message {
  max-width: 480px;
  margin: 7px auto 0;
  color: var(--text-muted);
  font-size: 0.84rem;
}

.result-score-layout {
  display: grid;
  grid-template-columns: 154px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  margin-top: 20px;
  padding: 15px 18px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(248, 250, 251, 0.82);
  text-align: left;
}

.result-score-ring {
  width: 138px;
  height: 138px;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--result-accent) var(--result-progress), #e4eaee 0);
  animation: result-ring-in 0.85s ease-out 0.12s both;
}

.result-score-ring::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: inherit;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(23, 32, 42, 0.04);
}

.result-score-ring > div {
  position: relative;
  z-index: 1;
  text-align: center;
}

.result-score-ring strong,
.result-score-ring span {
  display: block;
}

.result-score-ring strong {
  color: var(--result-accent);
  font-size: 2.35rem;
  line-height: 1;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.result-score-ring span {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.result-grade-copy > span,
.result-stat-grid span {
  display: block;
  color: var(--text-muted);
  font-size: 0.63rem;
  font-weight: 850;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.result-grade-copy > strong {
  display: block;
  margin-top: 4px;
  color: var(--text-main);
  font-size: 1.35rem;
  line-height: 1.2;
}

.result-grade-copy > small {
  display: inline-flex;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-size: 0.7rem;
  font-weight: 850;
}

.result-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.result-stat-grid article {
  min-width: 0;
  padding: 9px 8px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: #ffffff;
}

.result-stat-grid strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
  font-size: 0.86rem;
  line-height: 1.25;
}

.result-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.result-actions .btn {
  min-width: 150px;
}

.result-confetti {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.result-confetti i {
  width: 7px;
  height: 13px;
  position: absolute;
  top: -18px;
  left: var(--confetti-left);
  border-radius: 2px;
  background: var(--accent-color);
  opacity: 0;
  animation: result-confetti-fall 1.7s cubic-bezier(0.2, 0.75, 0.35, 1) var(--confetti-delay) both;
}

.result-confetti i:nth-child(4n + 2) {
  background: #f4b942;
}

.result-confetti i:nth-child(4n + 3) {
  background: #4f78c4;
  border-radius: 50%;
}

.result-confetti i:nth-child(4n) {
  background: #d75b67;
}

@keyframes result-card-in {
  from { opacity: 0; transform: translateY(20px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes result-ring-in {
  from { opacity: 0; transform: rotate(-35deg) scale(0.72); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes result-mascot-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-5px) rotate(3deg); }
}

@keyframes result-confetti-fall {
  0% { opacity: 0; transform: translate3d(0, -10px, 0) rotate(0); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--confetti-drift), 560px, 0) rotate(var(--confetti-rotation)); }
}

@media (prefers-reduced-motion: reduce) {
  .attempt-result-modal,
  .result-score-ring,
  .result-mascot,
  .result-confetti i {
    animation: none !important;
  }
}

/* Modal and profile management */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(23, 32, 42, 0.42);
  backdrop-filter: blur(3px);
}

.modal-content {
  width: min(650px, 100%);
  max-height: min(88vh, 760px);
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-card);
  box-shadow: var(--shadow-soft);
}

.profile-modal {
  max-width: 470px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

.modal-title {
  margin-top: 4px;
  color: var(--text-main);
  font-size: 1.1rem;
  line-height: 1.2;
  font-weight: 850;
}

.modal-close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
}

.modal-close:hover {
  background: #f1f4f7;
  color: var(--text-main);
}

.modal-body {
  overflow-y: auto;
  min-height: 0;
}

.user-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-item-btn {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fbfcfd;
  color: var(--text-main);
  cursor: pointer;
  font-weight: 850;
  text-align: left;
}

.user-item-btn.active {
  border-color: #9bd5bf;
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.new-profile-box {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.new-profile-box label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.45;
}

.new-profile-row {
  display: flex;
  gap: 8px;
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.account-form input,
.new-profile-row input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  outline: none;
}

.account-form input:focus,
.new-profile-row input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

/* Older profile trigger kept for backward compatibility */
.profile-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 6px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: #ffffff;
  cursor: pointer;
}

.profile-name {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84rem;
  font-weight: 850;
}

/* Responsive */
@media (max-width: 1040px) {
  .home-overview {
    grid-template-columns: 1fr;
  }

  .sections-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "progress"
      "sections"
      "attempts"
      "parts";
  }

  .progress-map,
  .part-grid {
    grid-template-columns: 1fr;
  }

  .evolution-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ue-text-workspace.text-open,
  .history-review-workspace.text-open {
    grid-template-columns: 1fr;
  }

  .ue-all-errors-workspace.text-open {
    grid-template-columns: 1fr;
  }

  .ue-all-errors-workspace {
    overflow: hidden;
  }

  .ue-all-errors-workspace.text-open .ue-all-errors-list {
    display: none;
  }

  .ue-all-errors-workspace .ue-part-text-panel {
    height: 100%;
  }

  .history-review-modal.text-open > .modal-body {
    display: block;
    overflow-y: auto;
  }

  .history-review-modal.text-open .history-review-workspace {
    height: auto;
    overflow: visible;
  }

  .history-review-modal.text-open .history-review-workspace > div {
    overflow: visible;
    padding-right: 0;
  }

  .history-review-part-text-panel {
    height: min(58vh, 620px);
  }

  .ue-part-register-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .ue-error-search-row {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
  }

  .ue-error-search-row small {
    padding-bottom: 0;
  }

  .all-attempts-filter-row {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
  }

  .all-attempts-filter-row small {
    padding-bottom: 0;
  }

  .modal-content.ue-all-errors-modal,
  .modal-content.history-review-modal[data-history-section="useOfEnglish"],
  .modal-content.history-review-modal[data-history-section="reading"] {
    width: min(100%, calc(100vw - 12px));
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px) !important;
    padding: 12px;
  }

  .app-shell {
    width: min(100% - 20px, 1180px);
  }

  .home-container,
  .dash-container {
    padding-top: 12px;
  }

  .app-topbar {
    align-items: flex-start;
    flex-direction: column;
    padding-bottom: 14px;
  }

  .topbar-actions {
    width: 100%;
    justify-content: stretch;
  }

  .nav-pill {
    flex: 1 1 0;
  }

  .candidate-switch {
    flex: 1 1 100%;
    justify-content: flex-start;
    max-width: none;
  }

  .candidate-name {
    max-width: none;
  }

  .home-title-area {
    padding: 12px 0;
  }

  .home-title-area h1,
  .insight-copy h1 {
    font-size: 1.8rem;
  }

  .home-metrics,
  .summary-row {
    grid-template-columns: 1fr;
  }

  .sections-grid {
    grid-template-columns: 1fr;
  }

  .section-square-card {
    min-height: auto;
  }

  .insight-hero {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .score-ring {
    justify-self: start;
    width: 104px;
    height: 104px;
  }

  .focus-strip {
    flex-direction: column;
    align-items: flex-start;
  }

  .chart-frame {
    min-height: 250px;
    padding-left: 34px;
    overflow-x: hidden;
  }

  .chart-bars {
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(22px, 1fr));
    gap: 5px;
  }

  .chart-bar {
    grid-template-rows: 20px minmax(0, 1fr) 16px;
  }

  .chart-date {
    display: none;
  }

  .attempt-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .attempt-item .delete-hist-btn {
    grid-column: 2;
  }

  .section-performance-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .progress-row-foot {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .progress-row-average-foot {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
  }

  .progress-row-weakest {
    grid-column: 1;
    grid-row: 2;
  }

  .progress-row-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .progress-row-head > .progress-row-actions {
    width: 100%;
    justify-content: space-between;
  }

  .modal-overlay {
    padding: 10px;
  }

  .attempt-result-modal {
    padding: 20px 16px 18px;
    overflow-y: auto;
  }

  .result-mascot {
    width: 54px;
    height: 54px;
    font-size: 1.7rem;
  }

  .attempt-result-modal h2 {
    font-size: 1.4rem;
  }

  .result-score-layout {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }

  .result-score-ring {
    width: 104px;
    height: 104px;
  }

  .result-score-ring::before {
    inset: 8px;
  }

  .result-score-ring strong {
    font-size: 1.8rem;
  }

  .result-grade-copy > strong {
    font-size: 1.05rem;
  }

  .result-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .result-actions {
    flex-direction: column-reverse;
  }

  .result-actions .btn {
    width: 100%;
  }

  .modal-content.evolution-modal {
    max-height: 96vh;
  }

  .evolution-modal-header {
    padding: 16px 16px 12px;
  }

  .evolution-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px 16px;
  }

  .evolution-tab {
    justify-content: flex-start;
    font-size: 0.72rem;
  }

  .evolution-modal-body {
    padding: 16px;
  }

  .modal-body.evolution-modal-body {
    overflow-y: auto;
  }

  .evolution-workspace {
    height: auto;
    grid-template-columns: 1fr;
  }

  .evolution-chart-card {
    height: auto;
    min-height: 0;
  }

  .evolution-chart-frame {
    flex: 0 0 auto;
  }

  .evolution-chart {
    max-height: none;
  }

  .evolution-insights {
    height: auto;
  }

  .evolution-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .evolution-chart-head {
    flex-direction: column;
  }

  .evolution-legend {
    justify-content: flex-start;
  }

  .evolution-study-focus {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .sheet-container {
    padding: 18px;
  }

  .sheet-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .sheet-header-actions,
  .practice-timer,
  .practice-timer-actions {
    width: 100%;
  }

  .practice-timer {
    justify-content: space-between;
  }

  .practice-timer-actions .btn {
    flex: 1;
  }

  .sheet-row-main {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .listening-part4-grid {
    grid-template-columns: 1fr;
  }

  .listening-task-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
  }

  .listening-part4-row .sheet-row-main {
    grid-template-columns: 1fr;
  }

  input.sheet-text-input,
  .sheet-select-input {
    max-width: none;
  }

  .correction-controls-box,
  .points-btn-group {
    justify-content: flex-start;
  }

  .writing-part2-head {
    flex-direction: column;
  }

  .ue-part-register-grid {
    grid-template-columns: 1fr;
  }

  .ue-part-text-editor label {
    align-items: flex-start;
    flex-direction: column;
  }

  .ue-part-text-editor label small {
    text-align: left;
  }

  .writing-type-control {
    width: 100%;
  }

  .writing-prompt-panel summary {
    align-items: flex-start;
    flex-direction: column;
    padding: 10px 14px;
  }

  .writing-score-summary {
    grid-template-columns: 1fr;
  }

  .history-writing-part h4 {
    flex-direction: column;
  }

  .history-question-main {
    align-items: flex-start;
    flex-direction: column;
  }

  .history-grade-edit-controls {
    justify-content: flex-start;
  }

  .history-writing-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .history-review-actions .btn {
    flex: 1;
  }

  .history-review-actions .history-review-delete {
    flex-basis: 100%;
    margin-right: 0;
  }

  .new-profile-row {
    flex-direction: column;
  }
}

@media (max-width: 420px) {
  .summary-card-value {
    font-size: 1.75rem;
  }
}

/* Vocabulary bank */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nav-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.nav-group .nav-pill {
  min-height: 34px;
  border: 0;
  background: transparent;
  padding: 0 12px;
}

.nav-group .nav-pill.active {
  background: var(--bg-ink);
}

.vocabulary-container {
  padding: 24px 0 56px;
  flex: 1;
}

.vocabulary-main,
.review-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  padding-top: 24px;
}

.vocabulary-hero,
.review-setup-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 28px 30px;
  overflow: hidden;
  border: 1px solid #cadbd8;
  border-radius: 14px;
  background:
    radial-gradient(circle at 92% 18%, rgba(15, 118, 110, 0.14), transparent 30%),
    linear-gradient(135deg, #f8fbfa, #edf5f3);
}

.vocabulary-hero h1,
.review-setup-hero h1,
.review-complete-panel h1 {
  margin-top: 6px;
  font-size: clamp(1.9rem, 4vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.vocabulary-hero p,
.review-setup-hero p,
.review-complete-panel > p {
  max-width: 660px;
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 0.98rem;
}

.vocabulary-hero-stats {
  display: flex;
  flex: 0 0 auto;
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-line);
}

.vocabulary-hero-stats > div {
  display: grid;
  min-width: 102px;
  padding: 13px 16px;
  border-right: 1px solid var(--border-color);
}

.vocabulary-hero-stats > div:last-child {
  border-right: 0;
}

.vocabulary-hero-stats strong {
  font-size: 1.15rem;
  letter-spacing: -0.025em;
}

.vocabulary-hero-stats span,
.review-setup-count span {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.quick-capture-panel,
.vocabulary-browser,
.review-setup-panel,
.review-session-shell,
.review-complete-panel {
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-card);
  box-shadow: var(--shadow-line);
}

.quick-capture-panel {
  padding: 22px;
}

.capture-heading,
.vocabulary-browser-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 17px;
}

.capture-heading h2,
.vocabulary-browser-head h2,
.review-setup-step h2 {
  margin-top: 3px;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
}

.vocabulary-capture-form {
  display: grid;
  grid-template-columns: 1.45fr 1.45fr 0.8fr 1fr auto;
  gap: 10px;
  align-items: end;
}

.capture-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.capture-field > span,
.review-scope-controls label > span {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.015em;
}

.capture-field small {
  font-weight: 600;
}

.capture-field input,
.capture-field select,
.capture-field textarea,
.vocabulary-filters input,
.vocabulary-filters select,
.review-scope-controls select {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fbfcfd;
  color: var(--text-main);
  outline: none;
}

.capture-field input:focus,
.capture-field select:focus,
.capture-field textarea:focus,
.vocabulary-filters input:focus,
.vocabulary-filters select:focus,
.review-scope-controls select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}

.capture-example {
  grid-column: 1 / -2;
}

.capture-field textarea {
  min-height: 62px;
  resize: vertical;
}

.capture-submit {
  min-height: 62px;
}

.capture-notice {
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--color-success-bg);
  color: var(--color-success);
  font-size: 0.82rem;
  font-weight: 700;
}

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

.vocabulary-family-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--bg-card);
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  transition: 0.15s ease;
}

.vocabulary-family-card:hover,
.vocabulary-family-card.active {
  border-color: #8bbeb7;
  background: var(--accent-soft);
  transform: translateY(-1px);
}

.family-monogram {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--bg-ink);
  color: #fff;
  font-weight: 850;
}

.vocabulary-family-card > span:last-child {
  display: grid;
  min-width: 0;
}

.vocabulary-family-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
}

.vocabulary-family-card small {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.vocabulary-browser {
  padding: 22px;
}

.vocabulary-filters {
  display: grid;
  grid-template-columns: minmax(210px, 1.8fr) repeat(3, minmax(145px, 1fr)) auto;
  gap: 8px;
  margin-bottom: 16px;
}

.vocabulary-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.vocabulary-entry-card {
  display: flex;
  flex-direction: column;
  min-height: 202px;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-top: 3px solid #667085;
  border-radius: 10px;
  background: #fff;
}

.vocabulary-entry-card.family-patterns { border-top-color: #315fbd; }
.vocabulary-entry-card.family-idioms { border-top-color: #8b5fbf; }
.vocabulary-entry-card.family-wordFormation { border-top-color: #b86b00; }
.vocabulary-entry-card.family-vocabulary { border-top-color: var(--accent-color); }

.vocabulary-entry-topline,
.vocabulary-entry-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vocabulary-family-tag,
.mastery-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #f1f4f6;
  color: var(--text-muted);
  font-size: 0.64rem;
  font-weight: 800;
}

.mastery-chip.good { background: var(--color-success-bg); color: var(--color-success); }
.mastery-chip.risk { background: var(--color-error-bg); color: var(--color-error); }

.vocabulary-card-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.vocabulary-card-actions button {
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.67rem;
  font-weight: 700;
  cursor: pointer;
}

.vocabulary-card-actions button:hover {
  color: var(--accent-color);
}

.vocabulary-entry-card h3 {
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.28;
  letter-spacing: -0.015em;
}

.vocabulary-meaning {
  margin-top: 7px;
  color: #435160;
  font-size: 0.79rem;
  line-height: 1.45;
}

.muted {
  color: var(--text-soft) !important;
  font-style: italic;
}

.vocabulary-entry-card blockquote,
.review-card-answer blockquote,
.review-card-front blockquote {
  margin-top: 9px;
  padding-left: 10px;
  border-left: 2px solid #bed4d1;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-style: italic;
}

.vocabulary-entry-meta {
  align-items: flex-end;
  margin-top: auto;
  padding-top: 12px;
  color: var(--text-soft);
  font-size: 0.62rem;
}

.vocabulary-entry-meta span {
  max-width: 49%;
}

.vocabulary-entry-meta span:last-child {
  text-align: right;
}

.vocabulary-empty {
  display: grid;
  grid-column: 1 / -1;
  place-items: center;
  min-height: 180px;
  color: var(--text-muted);
}

.vocabulary-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

/* Vocabulary review */
.review-main {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
}

.review-setup-hero {
  align-items: center;
}

.review-setup-count {
  display: grid;
  min-width: 150px;
  padding: 18px;
  border-radius: 12px;
  background: var(--bg-ink);
  color: #fff;
  text-align: center;
}

.review-setup-count strong {
  font-size: 1.8rem;
  line-height: 1;
}

.review-setup-count span {
  margin-top: 7px;
  color: #cbd5df;
}

.review-setup-panel {
  padding: 8px 24px 24px;
}

.review-setup-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border-color);
}

.review-step-number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-ink);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
}

.review-mode-grid,
.review-size-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.review-mode-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.review-mode-card,
.review-size-button {
  display: grid;
  gap: 3px;
  padding: 13px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: #fff;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
}

.review-mode-card:hover,
.review-mode-card.active,
.review-size-button:hover,
.review-size-button.active {
  border-color: #77ada6;
  background: var(--accent-soft);
}

.review-mode-card strong,
.review-size-button strong {
  font-size: 0.85rem;
}

.review-mode-card strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.review-mode-card strong small {
  color: var(--text-soft);
  font-size: 0.66rem;
  font-weight: 800;
  white-space: nowrap;
}

.review-mode-card span,
.review-size-button span,
.review-launch-row span {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.review-divider {
  border: 0;
  height: 1px;
  background-color: var(--border-color);
  margin: 18px 0 6px 0;
}

.review-scope-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.review-scope-controls label {
  display: grid;
  gap: 6px;
}

.review-size-row {
  max-width: 430px;
}

.review-size-button {
  place-items: center;
  text-align: center;
}

.review-size-button strong {
  font-size: 1.2rem;
}

.review-launch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 22px;
}

.review-launch-row > div {
  display: grid;
}

.review-launch-button {
  min-width: 170px;
}

.error-review-rated-panel {
  padding: 22px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-card);
  box-shadow: var(--shadow-line);
}

.error-review-rated-head,
.error-review-rated-filters {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.error-review-rated-head h2 {
  margin-top: 4px;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.error-review-rated-head > small {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.error-review-rated-limit-note {
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.4;
}

.error-review-rated-filters {
  display: grid;
  grid-template-columns: minmax(135px, 0.8fr) minmax(190px, 1fr) minmax(220px, 1.4fr);
  margin-top: 16px;
}

.error-review-rated-filters label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.error-review-rated-filters span {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.error-review-rated-filters select,
.error-review-rated-filters input,
.error-review-rating-select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fbfcfd;
  color: var(--text-main);
  outline: none;
}

.error-review-rated-filters select:focus,
.error-review-rated-filters input:focus,
.error-review-rating-select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}

.error-review-table-scroll {
  margin-top: 15px;
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

.error-review-rated-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  background: #fff;
}

.error-review-rated-table th,
.error-review-rated-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
  text-align: left;
  vertical-align: top;
}

.error-review-rated-table th {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.error-review-rated-table tr:last-child td {
  border-bottom: 0;
}

.error-review-rated-table td {
  font-size: 0.78rem;
}

.error-review-rated-table td > strong,
.error-review-rated-table td span,
.error-review-rated-table td small {
  display: block;
  margin-top: 4px;
}

.error-review-rated-table td > strong:first-child,
.error-review-rated-table td span:first-child,
.error-review-rated-table td small:first-child {
  margin-top: 0;
}

.error-review-rated-table td span,
.error-review-rated-table td small {
  color: var(--text-muted);
  font-size: 0.68rem;
}

.error-review-rated-table td:nth-child(4) {
  width: 150px;
}

.error-review-rating-select.again {
  border-color: #d98b91;
  background: var(--color-error-bg);
}

.error-review-rating-select.unsure {
  border-color: #dda34f;
  background: var(--color-warning-bg);
}

.error-review-rating-select.known {
  border-color: #63ad91;
  background: var(--color-success-bg);
}

.error-review-rated-empty {
  margin-top: 14px;
}

.review-session-shell {
  padding: 18px;
}

.review-session-topbar {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  align-items: center;
  gap: 16px;
}

.review-algorithm-session-button {
  white-space: nowrap;
}

.review-progress-copy {
  display: grid;
  min-width: 130px;
  font-size: 0.79rem;
}

.review-progress-copy span {
  color: var(--text-muted);
  font-size: 0.67rem;
}

.review-progress-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8edf1;
}

.review-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-color);
}

.review-flashcard {
  display: grid;
  place-items: center;
  min-height: 410px;
  margin-top: 16px;
  padding: 38px;
  border: 1px solid #d6dfE5;
  border-radius: 13px;
  background:
    linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.92)),
    repeating-linear-gradient(0deg, transparent, transparent 33px, #e9efef 34px);
  text-align: center;
}

.review-flashcard.revealed {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px;
  text-align: left;
}

.review-card-prompt,
.review-card-answer {
  width: 100%;
}

.review-card-prompt > span,
.review-card-answer > span {
  display: block;
  margin-bottom: 14px;
  color: var(--text-soft);
  font-size: 0.69rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.review-card-front h2,
.review-card-answer h2 {
  font-size: clamp(1.55rem, 4vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.review-card-answer {
  padding: 24px;
  border-radius: 11px;
  background: #eef6f4;
}

.review-card-answer p {
  margin-top: 10px;
  color: #34434f;
}

.review-card-answer small {
  display: block;
  margin-top: 18px;
  color: var(--text-soft);
}

.review-card-front mark {
  padding: 1px 8px;
  border-radius: 4px;
  background: #dcefeb;
  color: var(--accent-color);
  font-style: normal;
  letter-spacing: 0.08em;
}

.review-reveal-button {
  display: flex;
  width: min(360px, 100%);
  min-height: 52px;
  margin: 14px auto 0;
}

kbd {
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 4px;
  background: rgba(0,0,0,.12);
  font-family: inherit;
  font-size: 0.67rem;
}

.review-rating-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}

.review-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 62px;
  padding: 9px 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.review-rating span {
  display: grid;
  text-align: left;
}

.review-rating small {
  color: var(--text-muted);
  font-size: 0.66rem;
}

.review-rating kbd {
  background: #eef1f4;
  color: var(--text-muted);
}

.review-rating.again:hover { border-color: #d98b91; background: var(--color-error-bg); }
.review-rating.unsure:hover { border-color: #dda34f; background: var(--color-warning-bg); }
.review-rating.known:hover { border-color: #63ad91; background: var(--color-success-bg); }

.review-complete-panel {
  display: grid;
  justify-items: center;
  padding: 50px 32px;
  text-align: center;
}

.review-complete-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 17px;
  border-radius: 50%;
  background: var(--color-success-bg);
  color: var(--color-success);
  font-size: 1.5rem;
  font-weight: 900;
}

.review-complete-stats {
  display: grid;
  grid-template-columns: repeat(3, 110px);
  gap: 10px;
  margin-top: 24px;
}

.review-complete-stats div {
  display: grid;
  padding: 15px;
  border-radius: 10px;
  background: #f4f6f8;
}

.review-complete-stats strong {
  font-size: 1.35rem;
}

.review-complete-stats span {
  color: var(--text-muted);
  font-size: 0.7rem;
}

.review-complete-actions {
  display: flex;
  gap: 8px;
  margin-top: 25px;
}

.review-algorithm-modal {
  width: min(600px, 100%);
}

.review-algorithm-body {
  display: grid;
  gap: 18px;
  overflow-y: auto;
  padding: 2px 2px 4px;
}

.review-algorithm-body > p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.review-algorithm-weight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.review-algorithm-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #fbfcfd;
}

.review-algorithm-field > span {
  color: var(--text-main);
  font-size: 0.78rem;
  font-weight: 850;
}

.review-algorithm-field input {
  width: 100%;
  min-height: 38px;
  padding: 8px 9px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: #fff;
  color: var(--text-main);
  font: inherit;
  font-weight: 750;
  outline: none;
}

.review-algorithm-field input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}

.review-algorithm-field small {
  color: var(--text-muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

.review-algorithm-penalty-field {
  grid-template-columns: minmax(150px, 0.9fr) minmax(100px, 0.45fr) minmax(0, 1.65fr);
  align-items: center;
}

.review-algorithm-penalty-field small {
  grid-column: 3;
}

.review-algorithm-preview {
  display: grid;
  gap: 5px;
  padding: 14px;
  border-radius: 10px;
  background: var(--accent-soft);
}

.review-algorithm-preview strong {
  color: var(--accent-color);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.review-algorithm-preview > span {
  font-size: 0.87rem;
  font-weight: 800;
}

.review-algorithm-preview small {
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.review-algorithm-actions {
  margin-top: 18px;
}

.data-reset-modal {
  width: min(590px, 100%);
}

.data-reset-body {
  display: grid;
  gap: 16px;
  overflow-y: auto;
  padding: 2px;
}

.data-reset-body > p {
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.data-reset-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.data-reset-summary span {
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fbfcfd;
  color: var(--text-muted);
  font-size: 0.7rem;
}

.data-reset-summary strong {
  color: var(--text-main);
  font-size: 1rem;
}

.data-reset-warning {
  display: grid;
  gap: 4px;
  padding: 13px;
  border: 1px solid #e2b1b5;
  border-radius: 9px;
  background: var(--color-error-bg);
  color: #5c252a;
  font-size: 0.78rem;
  line-height: 1.45;
}

.data-reset-warning strong {
  color: var(--color-error);
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
}

.data-reset-sync-note {
  font-size: 0.75rem !important;
}

.data-reset-confirmation {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 13px;
  border: 1px solid #e2b1b5;
  border-radius: 9px;
  background: var(--color-error-bg);
  color: #5c252a;
  font-size: 0.8rem;
  font-weight: 750;
  line-height: 1.4;
  cursor: pointer;
}

.data-reset-confirmation input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--color-error);
}

.data-reset-actions {
  margin-top: 18px;
}

@media (max-width: 980px) {
  .app-topbar {
    align-items: flex-start;
  }

  .topbar-actions {
    max-width: 75%;
  }

  .candidate-switch {
    display: inline-flex;
    justify-content: center;
    width: 40px;
    max-width: 40px;
    flex: 0 0 40px;
    padding: 0;
  }

  .candidate-switch .candidate-name,
  .candidate-switch .candidate-status {
    display: none;
  }

  .vocabulary-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .vocabulary-capture-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capture-example {
    grid-column: 1 / -1;
  }

  .capture-submit {
    grid-column: 1 / -1;
    min-height: 44px;
  }

  .vocabulary-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vocabulary-search {
    grid-column: 1 / -1;
  }

  .vocabulary-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .vocabulary-container {
    padding-top: 14px;
  }

  .vocabulary-container .app-topbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .topbar-actions {
    width: 100%;
    max-width: none;
  }

  .nav-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.25fr) minmax(0, 0.85fr);
    gap: 2px;
    width: auto;
    flex: 1 1 0;
    overflow: visible;
    padding: 3px;
  }

  .nav-group .nav-pill {
    min-width: 0;
    width: 100%;
    padding: 0 3px;
    font-size: clamp(0.64rem, 3vw, 0.72rem);
    letter-spacing: -0.02em;
    white-space: nowrap;
  }

  .vocabulary-hero,
  .review-setup-hero,
  .quick-capture-panel,
  .vocabulary-browser,
  .review-setup-panel,
  .review-session-shell {
    padding: 17px;
  }

  .vocabulary-hero-stats {
    width: 100%;
  }

  .vocabulary-hero-stats > div {
    flex: 1;
    min-width: 0;
    padding: 10px;
  }

  .vocabulary-capture-form,
  .vocabulary-family-grid,
  .vocabulary-filters,
  .vocabulary-card-grid,
  .review-mode-grid,
  .review-scope-controls,
  .error-review-rated-filters,
  .review-rating-row {
    grid-template-columns: 1fr;
  }

  .capture-example,
  .vocabulary-search {
    grid-column: auto;
  }

  .vocabulary-family-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vocabulary-family-card strong {
    white-space: normal;
  }

  .vocabulary-browser-head,
  .review-launch-row {
    align-items: stretch;
    flex-direction: column;
  }

  .review-setup-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .review-setup-count {
    min-width: 0;
  }

  .review-setup-step {
    grid-template-columns: 1fr;
  }

  .review-size-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .review-session-topbar {
    grid-template-columns: auto auto;
    gap: 10px;
  }

  .review-progress-track {
    grid-column: 1 / -1;
  }

  .review-progress-copy {
    grid-column: 1 / -1;
  }

  .study-review-algorithm-action {
    align-items: flex-start;
    flex-direction: column;
  }

  .review-algorithm-weight-grid,
  .review-algorithm-penalty-field {
    grid-template-columns: 1fr;
  }

  .data-reset-summary {
    grid-template-columns: 1fr;
  }

  .review-algorithm-penalty-field small {
    grid-column: auto;
  }

  .review-flashcard,
  .review-flashcard.revealed {
    grid-template-columns: 1fr;
    min-height: 360px;
    padding: 24px;
  }

  .review-complete-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .review-complete-actions {
    flex-direction: column;
    width: 100%;
  }
}

/* Adaptive Notion-style vocabulary tables */
.vocabulary-table-main {
  gap: 16px;
  min-width: 0;
}

.vocabulary-table-main > *,
.notion-table-panel,
.vocabulary-table-toolbar,
.vocabulary-table-wrap {
  min-width: 0;
  max-width: 100%;
}

.compact-vocabulary-hero {
  align-items: center;
  padding: 15px 22px;
}

.compact-vocabulary-hero h1 {
  font-size: clamp(1.65rem, 2.7vw, 2.2rem);
}

.compact-vocabulary-hero p {
  margin-top: 4px;
}

.adaptive-capture-panel {
  padding: 18px 20px;
}

@media (min-width: 981px) {
  .adaptive-capture-panel.type-only {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 7px 18px;
    align-items: center;
    padding: 12px 18px;
  }

  .adaptive-capture-panel.type-only .capture-heading {
    margin: 0;
  }

  .adaptive-capture-panel.type-only .capture-heading .eyebrow {
    display: none;
  }

  .adaptive-capture-panel.type-only .capture-heading h2 {
    margin: 0;
    font-size: 0.9rem;
  }

  .adaptive-capture-panel.type-only .capture-type-hint {
    grid-column: 2;
    margin: 0;
  }
}

.capture-type-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.capture-type-picker button {
  min-height: 38px;
  padding: 6px 9px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: #fff;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 750;
  cursor: pointer;
}

.capture-type-picker button:hover,
.capture-type-picker button.active {
  border-color: #78aaa4;
  background: var(--accent-soft);
  color: var(--accent-color);
}

.capture-type-hint {
  margin-top: 10px;
  color: var(--text-soft);
  font-size: 0.74rem;
}

.adaptive-capture-panel .vocabulary-capture-form {
  grid-template-columns: 1.2fr 1.2fr 0.8fr auto;
  margin-top: 12px;
}

.adaptive-capture-panel .capture-example {
  grid-column: 1 / -2;
}

.adaptive-capture-panel .capture-submit {
  min-width: 150px;
}

.adaptive-capture-panel .adaptive-personal {
  grid-template-columns: 1.4fr 1fr auto;
}

.adaptive-capture-panel .adaptive-wordFormation {
  grid-template-columns: 1fr 1fr auto;
}

.adaptive-capture-panel .adaptive-personal .capture-submit,
.adaptive-capture-panel .adaptive-wordFormation .capture-submit {
  min-height: 62px;
}

.notion-table-panel {
  padding: 0;
  overflow: hidden;
}

.notion-table-panel .vocabulary-browser-head {
  align-items: center;
  margin: 0;
  padding: 20px 24px 16px;
}

.notion-table-panel .vocabulary-browser-head h2 {
  margin-top: 2px;
}

.notion-table-panel .vocabulary-browser-head p {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 0.76rem;
}

.vocabulary-collection-tabs {
  display: flex;
  gap: 2px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border-color);
}

.vocabulary-collection-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 750;
  cursor: pointer;
}

.vocabulary-collection-tabs button.active {
  border-bottom-color: var(--accent-color);
  color: var(--text-main);
}

.vocabulary-collection-tabs button span {
  padding: 1px 6px;
  border-radius: 999px;
  background: #eef2f4;
  color: var(--text-soft);
  font-size: 0.62rem;
}

.vocabulary-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 20px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: #fbfcfd;
}

.vocabulary-table-toolbar .vocabulary-search {
  width: min(420px, 70%);
}

.vocabulary-table-toolbar input {
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: #fff;
  outline: none;
}

.vocabulary-table-toolbar input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.08);
}

.vocabulary-table-toolbar > span {
  color: var(--text-soft);
  font-size: 0.7rem;
  font-weight: 700;
}

.vocabulary-table-wrap {
  max-height: min(690px, 70vh);
  width: auto;
  margin: 0 20px 20px;
  overflow: auto;
  border: 1px solid var(--border-color);
  border-radius: 0 0 9px 9px;
  scrollbar-gutter: stable;
}

.vocabulary-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.vocabulary-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 34px;
  padding: 7px 10px;
  border-right: 1px solid #e8ecf0;
  border-bottom: 1px solid var(--border-color);
  background: #f6f8f9;
  color: var(--text-soft);
  font-size: 0.63rem;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.vocabulary-table td {
  height: 42px;
  padding: 7px 10px;
  border-right: 1px solid #edf0f2;
  border-bottom: 1px solid #edf0f2;
  background: #fff;
  color: #435160;
  font-size: 0.74rem;
  line-height: 1.32;
  vertical-align: middle;
}

.vocabulary-table tbody tr:hover td {
  background: #fafcfb;
}

.vocabulary-table th:last-child,
.vocabulary-table td:last-child {
  border-right: 0;
}

.vocabulary-table .col-term {
  width: 28%;
}

.vocabulary-table .col-meaning,
.vocabulary-table .col-notes {
  width: 30%;
}

.vocabulary-table .col-example {
  width: auto;
}

.vocabulary-table .col-topic {
  width: 13%;
}

.vocabulary-table.table-personal .col-term {
  width: 58%;
}

.vocabulary-table.table-personal .col-notes {
  width: auto;
}

.vocabulary-table.table-wordFormation .col-term {
  width: 44%;
}

.vocabulary-table.table-wordFormation .col-meaning {
  width: auto;
}

.vocabulary-table.table-curated .col-term {
  width: 27%;
}

.vocabulary-table.table-curated .col-meaning {
  width: 29%;
}

.vocabulary-table.table-curated .col-topic {
  width: 20%;
}

.vocabulary-table td strong {
  display: inline;
  color: var(--text-main);
  font-size: 0.76rem;
  font-weight: 700;
}

.table-cell-copy {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.table-cell-copy.empty {
  color: #a2abb5;
  font-style: italic;
}

.table-mastery {
  display: inline-flex;
  margin-left: 7px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-color);
  font-size: 0.56rem;
  font-weight: 800;
  vertical-align: 1px;
}

.table-term-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.table-term-label {
  min-width: 0;
}

.table-row-actions {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 2px;
  border: 1px solid #e5e9ee;
  border-radius: 6px;
  background: #f8fafb;
}

.table-row-actions button {
  padding: 2px 5px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-soft);
  font-size: 0.62rem;
  font-weight: 700;
  cursor: pointer;
}

.table-row-actions button:hover {
  background: var(--accent-soft);
  color: var(--accent-color);
}

.vocabulary-listen-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #d5e4e1;
  background: #ffffff;
  color: var(--accent-color);
  cursor: pointer;
}

.vocabulary-listen-button svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vocabulary-listen-button svg path:last-child {
  fill: none;
}

.vocabulary-listen-button:hover,
.vocabulary-listen-button.is-speaking {
  border-color: #9bcfc5;
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.vocabulary-listen-button.is-speaking svg {
  transform: scale(1.08);
}

.vocabulary-listen-button.speech-error {
  border-color: #e8bdc1;
  background: var(--color-error-bg);
  color: var(--color-error);
}

.vocabulary-listen-button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.table-row-actions .vocabulary-listen-button {
  min-width: 25px;
  padding-inline: 4px;
}

.review-answer-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.review-answer-heading h2 {
  min-width: 0;
}

.review-answer-heading .vocabulary-listen-button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 7px 11px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 800;
}

.table-row-actions .delete-action:hover {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.notion-table-panel .vocabulary-empty {
  min-height: 180px;
}

.notion-table-panel .vocabulary-pagination {
  margin: 0;
  padding: 12px;
  border-top: 1px solid var(--border-color);
}

.review-mode-card strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.review-mode-card strong small {
  padding: 1px 6px;
  border-radius: 999px;
  background: #eef2f4;
  color: var(--text-soft);
  font-size: 0.62rem;
}

.review-mode-card:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.review-scope-controls.single-control {
  grid-template-columns: minmax(260px, 560px);
}

@media (max-width: 980px) {
  .capture-type-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .adaptive-capture-panel .vocabulary-capture-form,
  .adaptive-capture-panel .adaptive-personal,
  .adaptive-capture-panel .adaptive-wordFormation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adaptive-capture-panel .capture-example {
    grid-column: 1 / -1;
  }

  .adaptive-capture-panel .capture-submit {
    grid-column: 1 / -1;
    min-height: 42px;
  }
}

@media (max-width: 680px) {
  .vocabulary-main,
  .vocabulary-main > *,
  .notion-table-panel {
    width: 100%;
    min-width: 0;
  }

  .compact-vocabulary-hero,
  .adaptive-capture-panel {
    padding: 16px;
  }

  .capture-type-picker {
    display: flex;
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .capture-type-picker button {
    flex: 0 0 auto;
  }

  .adaptive-capture-panel .vocabulary-capture-form,
  .adaptive-capture-panel .adaptive-personal,
  .adaptive-capture-panel .adaptive-wordFormation {
    grid-template-columns: 1fr;
  }

  .notion-table-panel .vocabulary-browser-head {
    align-items: stretch;
    padding: 16px;
  }

  .vocabulary-collection-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    padding: 0 14px;
  }

  .vocabulary-collection-tabs button {
    min-width: 0;
    justify-content: center;
    gap: 4px;
    padding: 0 4px;
    font-size: 0.7rem;
  }

  .vocabulary-collection-tabs button span {
    padding-inline: 4px;
  }

  .vocabulary-table-toolbar {
    margin: 0 12px;
    padding: 9px 10px;
  }

  .vocabulary-table-toolbar .vocabulary-search {
    width: auto;
    flex: 1;
  }

  .vocabulary-table-wrap {
    max-height: 66vh;
    width: auto;
    margin: 0 12px 14px;
  }

  .vocabulary-table {
    min-width: 680px;
  }
}

/* Writing lab */
.writing-lab-container {
  flex: 1;
  padding: 24px 0 56px;
}

.writing-lab-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding-top: 24px;
}

.writing-lab-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
  align-items: center;
  gap: 34px;
  padding: 28px 30px;
  overflow: hidden;
  border: 1px solid #c8d9d6;
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% 10%, rgba(15, 118, 110, 0.19), transparent 34%),
    linear-gradient(135deg, #fbfdfc 0%, #eaf3f1 100%);
}

.writing-lab-hero h1 {
  max-width: 640px;
  margin-top: 6px;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

.writing-lab-hero p {
  max-width: 630px;
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 0.96rem;
}

.writing-lab-hero-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.writing-lab-hero-flow span {
  display: grid;
  align-content: center;
  min-height: 92px;
  padding: 12px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--text-muted);
  font-size: 0.67rem;
  font-weight: 700;
  line-height: 1.25;
}

.writing-lab-hero-flow b {
  display: block;
  margin-bottom: 7px;
  color: var(--accent-color);
  font-size: 0.95rem;
}

.writing-lab-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.writing-lab-tabs button {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #fff;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
}

.writing-lab-tabs button:hover,
.writing-lab-tabs button.active {
  border-color: #86b8b1;
  background: var(--accent-soft);
}

.writing-lab-tabs strong {
  font-size: 0.82rem;
}

.writing-lab-tabs span {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.writing-lab-content,
.writing-lab-section {
  min-width: 0;
}

.writing-lab-section {
  padding: 24px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-line);
}

.writing-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.writing-section-heading.compact {
  margin-bottom: 14px;
}

.writing-section-heading h2 {
  margin-top: 3px;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

.writing-section-heading p {
  max-width: 680px;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.essay-brief-strip {
  display: grid;
  grid-template-columns: 1fr auto 1.2fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid #d7e5e2;
  border-radius: 11px;
  background: #f7fbfa;
}

.essay-brief-strip div {
  display: grid;
}

.essay-brief-strip span {
  color: var(--text-soft);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.essay-brief-strip strong {
  font-size: 0.82rem;
}

.essay-brief-strip i {
  color: #7ba9a3;
  font-style: normal;
}

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

.essay-stage-card {
  position: relative;
  display: grid;
  grid-template-rows: 62px 96px 58px auto;
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: #fff;
}

.essay-stage-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.essay-stage-head > span,
.position-number {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 9px;
  border: 1px solid #b9d8d4;
  background: var(--accent-soft);
  color: var(--accent-color);
  font-size: 0.72rem;
  font-weight: 850;
}

.essay-stage-head h3 {
  font-size: 0.91rem;
  line-height: 1.15;
}

.essay-stage-head small {
  color: var(--text-soft);
  font-size: 0.63rem;
}

.essay-stage-card > p {
  margin-top: 15px;
  color: var(--text-muted);
  font-size: 0.77rem;
}

.essay-move-row {
  align-content: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 13px;
}

.essay-move-row span,
.position-tags span {
  padding: 2px 7px;
  border-radius: 999px;
  background: #edf2f5;
  color: #5d6977;
  font-size: 0.59rem;
  font-weight: 800;
}

.essay-stage-card details {
  margin-top: 0;
  padding-top: 13px;
  border-top: 1px solid #e7ecef;
}

.essay-stage-card summary {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-color);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 800;
  list-style: none;
}

.essay-stage-card summary::before {
  width: 15px;
  height: 15px;
  border: 1px solid #b9d8d4;
  border-radius: 50%;
  color: var(--accent-color);
  content: "+";
  display: grid;
  flex: 0 0 auto;
  font-size: 0.65rem;
  line-height: 1;
  place-items: center;
}

.essay-stage-card details[open] summary::before {
  content: "−";
}

.essay-stage-card blockquote {
  margin-top: 10px;
  min-height: 220px;
  padding: 12px;
  border: 1px solid #dce9e7;
  border-radius: 8px;
  background: #f7fbfa;
  color: #52606d;
  font-size: 0.7rem;
  line-height: 1.52;
}

.writing-lab-search {
  width: min(370px, 100%);
}

.writing-lab-search input {
  width: 100%;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fbfcfd;
  outline: none;
}

.writing-lab-search input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.09);
}

.writing-filter-row,
.writing-toolkit-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.writing-filter-row button,
.writing-toolkit-tabs button {
  padding: 7px 10px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: #fff;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 750;
}

.writing-filter-row button:hover,
.writing-filter-row button.active,
.writing-toolkit-tabs button:hover,
.writing-toolkit-tabs button.active {
  border-color: #86b8b1;
  background: var(--accent-soft);
  color: var(--accent-color);
}

.writing-situation-count {
  margin: 15px 0 10px;
  color: var(--text-soft);
  font-size: 0.68rem;
}

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

.writing-situation-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: #fbfcfd;
}

.writing-situation-card.compact {
  padding: 13px;
}

.writing-situation-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.situation-group {
  display: block;
  color: var(--accent-color);
  font-size: 0.58rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.writing-situation-head h3 {
  margin-top: 2px;
  font-size: 0.88rem;
}

.position-tags {
  display: flex;
  flex: 0 0 auto;
  gap: 3px;
}

.position-tags span {
  background: var(--bg-ink);
  color: #fff;
}

.writing-situation-card > p {
  margin: 7px 0 11px;
  color: var(--text-muted);
  font-size: 0.7rem;
}

.writing-phrase-list {
  display: grid;
  gap: 5px;
}

.writing-phrase {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid #e4e9ee;
  border-radius: 7px;
  background: #fff;
  color: #465463;
  cursor: pointer;
  text-align: left;
}

.writing-phrase:hover,
.writing-phrase.copied {
  border-color: #8bbeb7;
  background: var(--accent-soft);
}

.writing-phrase span {
  font-size: 0.71rem;
  line-height: 1.42;
}

.writing-phrase small {
  flex: 0 0 auto;
  padding-top: 1px;
  color: var(--accent-color);
  font-size: 0.57rem;
  font-weight: 800;
}

.writing-empty {
  display: grid;
  place-content: center;
  min-height: 260px;
  color: var(--text-muted);
  text-align: center;
}

.writing-language-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.writing-language-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: #fff;
}

.writing-language-card > div:first-child {
  padding: 15px;
  background: #f7faf9;
}

.writing-language-card h3 {
  margin-top: 2px;
  font-size: 0.92rem;
}

.writing-language-card p {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 0.68rem;
}

.writing-language-table > div {
  display: grid;
  grid-template-columns: 86px 140px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 9px 12px;
  border-top: 1px solid #edf0f2;
}

.writing-language-table strong {
  color: var(--text-main);
  font-size: 0.69rem;
}

.writing-language-table code {
  color: #6b5c8c;
  font-family: var(--font-family);
  font-size: 0.65rem;
  font-weight: 700;
}

.writing-language-table span {
  color: var(--text-muted);
  font-size: 0.66rem;
  line-height: 1.4;
}

.writing-resource-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 11px;
  margin-top: 14px;
}

.writing-upgrade-panel,
.writing-safe-panel {
  padding: 17px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: #fbfcfd;
}

.writing-upgrade-row {
  display: grid;
  grid-template-columns: 100px 1fr 1.2fr;
  gap: 9px;
  padding: 8px 0;
  border-top: 1px solid #e8edf0;
}

.writing-upgrade-row strong,
.writing-safe-panel strong {
  font-size: 0.68rem;
}

.writing-upgrade-row span,
.writing-upgrade-row small,
.writing-safe-panel span {
  color: var(--text-muted);
  font-size: 0.64rem;
}

.writing-safe-panel > div:not(.writing-section-heading) {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid #e8edf0;
}

.writing-safe-panel > div:not(.writing-section-heading) > span {
  max-width: 55%;
  text-align: right;
}

.writing-safe-eyebrow {
  max-width: none;
  text-align: left;
}

.writing-genre-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.writing-genre-picker button {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.writing-genre-picker button:hover,
.writing-genre-picker button.active {
  border-color: #86b8b1;
  background: var(--accent-soft);
}

.writing-genre-picker strong {
  font-size: 0.75rem;
}

.writing-genre-picker span {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.59rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.writing-genre-workspace {
  margin-top: 12px;
  padding: 19px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: #fff;
}

.writing-genre-title h2 {
  margin-top: 2px;
  font-size: 1.05rem;
}

.writing-genre-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.writing-genre-meta span {
  padding: 4px 8px;
  border: 1px solid #dce9e7;
  border-radius: 999px;
  background: #f7fbfa;
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 700;
}

.writing-genre-structure {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  margin: 17px 0 19px;
  overflow: hidden;
  border: 1px solid #dce9e7;
  border-radius: 9px;
  background: #f7fbfa;
}

.writing-genre-structure div {
  display: flex;
  min-width: 0;
}

.writing-genre-structure > div {
  align-items: flex-start;
  flex-direction: row;
  gap: 10px;
  min-height: 94px;
  padding: 14px;
  border-right: 1px solid #dce9e7;
  color: var(--text-main);
  text-align: left;
}

.writing-genre-structure > div:last-child {
  border-right: 0;
}

.writing-genre-structure > div > div {
  display: block;
  flex: 1;
}

.writing-genre-structure > div > span {
  display: grid;
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid #abd1cc;
  border-radius: 50%;
  background: #fff;
  color: var(--accent-color);
  font-size: 0.62rem;
  font-weight: 850;
}

.writing-genre-structure strong {
  display: block;
  font-size: 0.7rem;
  line-height: 1.25;
}

.writing-genre-structure p {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 0.62rem;
  line-height: 1.42;
}

.writing-letter-guide {
  margin-bottom: 19px;
  padding: 15px;
  border: 1px solid #cfe2de;
  border-radius: 10px;
  background: #f7fbfa;
}

.writing-letter-guide-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
}

.writing-letter-guide-heading h3 {
  margin-top: 3px;
  font-size: 0.9rem;
}

.writing-letter-guide-heading p {
  max-width: 520px;
  color: var(--text-muted);
  font-size: 0.66rem;
  line-height: 1.45;
  text-align: right;
}

.writing-letter-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.writing-letter-guide-card {
  padding: 12px;
  border: 1px solid #dce9e7;
  border-radius: 8px;
  background: #fff;
}

.writing-letter-guide-reader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e8efee;
}

.writing-letter-guide-reader strong {
  color: var(--accent-color);
  font-size: 0.72rem;
}

.writing-letter-guide-reader span {
  color: var(--text-muted);
  font-size: 0.61rem;
  text-align: right;
}

.writing-letter-guide-card > div:not(.writing-letter-guide-reader) {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.writing-letter-guide-card > div:not(.writing-letter-guide-reader) > span {
  color: var(--text-soft);
  font-size: 0.59rem;
  font-weight: 850;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.writing-letter-guide-card p {
  font-size: 0.66rem;
  font-weight: 750;
  line-height: 1.4;
}

.writing-letter-guide-card small {
  display: block;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed #dce9e7;
  color: var(--text-muted);
  font-size: 0.59rem;
  line-height: 1.45;
}

.writing-letter-template-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 20px 0 12px;
  padding-top: 16px;
  border-top: 1px solid #cfe2de;
}

.writing-letter-template-heading h3 {
  margin-top: 3px;
  font-size: 0.9rem;
}

.writing-letter-template-heading p {
  max-width: 430px;
  color: var(--text-muted);
  font-size: 0.66rem;
  line-height: 1.45;
  text-align: right;
}

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

.writing-letter-template-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  border: 1px solid #dce9e7;
  border-radius: 8px;
  background: #fff;
}

.writing-letter-template-card > span {
  color: var(--accent-color);
  font-size: 0.7rem;
  font-weight: 850;
}

.writing-letter-template-card .writing-phrase {
  min-height: 100%;
}

.writing-letter-addressee-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 20px 0 12px;
  padding-top: 16px;
  border-top: 1px solid #cfe2de;
}

.writing-letter-addressee-heading h3 {
  margin-top: 3px;
  font-size: 0.9rem;
}

.writing-letter-addressee-heading p {
  max-width: 520px;
  color: var(--text-muted);
  font-size: 0.66rem;
  line-height: 1.45;
  text-align: right;
}

.writing-letter-addressee-heading p strong {
  color: var(--text-main);
}

.writing-letter-addressee-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.writing-letter-addressee-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  border: 1px solid #dce9e7;
  border-radius: 8px;
  background: #fff;
}

.writing-letter-addressee-card > span {
  color: var(--accent-color);
  font-size: 0.7rem;
  font-weight: 850;
}

.writing-letter-addressee-card > div {
  display: grid;
  gap: 2px;
  padding-top: 7px;
  border-top: 1px solid #e8efee;
}

.writing-letter-addressee-card small {
  color: var(--text-soft);
  font-size: 0.57rem;
  font-weight: 850;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.writing-letter-addressee-card strong,
.writing-letter-addressee-card > div p {
  color: var(--text-main);
  font-size: 0.64rem;
  line-height: 1.4;
}

.writing-letter-addressee-card > p {
  color: var(--text-muted);
  font-size: 0.59rem;
  line-height: 1.45;
}

.writing-genre-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(360px, 2fr);
  gap: 12px;
}

.writing-genre-phrases,
.writing-genre-language {
  padding: 15px;
  border: 1px solid #e3e8ed;
  border-radius: 9px;
  background: #fff;
}

.writing-genre-phrases h3,
.writing-genre-language h3 {
  margin-bottom: 9px;
  font-size: 0.83rem;
}

.writing-genre-phrases > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin-top: 5px;
}

.writing-genre-phrases > div > span {
  padding-top: 9px;
  color: var(--text-soft);
  font-size: 0.62rem;
  font-weight: 800;
}

.writing-genre-language {
  background: #f7fbfa;
}

.writing-genre-language > div {
  display: grid;
  grid-template-columns: minmax(135px, 0.9fr) minmax(0, 1.1fr);
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid #dce9e7;
}

.writing-genre-language strong {
  color: var(--accent-color);
  font-size: 0.68rem;
}

.writing-genre-language > div span {
  color: var(--text-muted);
  font-size: 0.64rem;
  line-height: 1.4;
}

.writing-toolkit-overlay {
  justify-content: flex-end;
  padding: 14px;
}

.writing-toolkit-modal {
  width: min(760px, 100%);
  max-height: calc(100vh - 28px);
  padding: 18px;
  border-radius: 14px;
}

.writing-toolkit-modal .modal-header p {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 0.72rem;
}

.writing-toolkit-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.writing-toolkit-mode-tabs button {
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: #fff;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 800;
}

.writing-toolkit-mode-tabs button:hover,
.writing-toolkit-mode-tabs button.active {
  border-color: #86b8b1;
  background: var(--accent-soft);
  color: var(--accent-color);
}

.writing-toolkit-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(42px, auto);
  gap: 8px;
  margin-bottom: 12px;
}

.writing-toolkit-tabs button {
  display: grid;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 8px 10px;
  place-items: center;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}

.writing-toolkit-note {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  padding: 9px 11px;
  border-radius: 8px;
  background: #f2f7f6;
  color: var(--text-muted);
  font-size: 0.68rem;
}

.writing-toolkit-note strong {
  color: var(--accent-color);
}

.writing-toolkit-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.writing-toolkit-language .writing-language-grid,
.writing-toolkit-language .writing-resource-split {
  grid-template-columns: 1fr;
}

@media (max-width: 980px) {
  .writing-lab-hero {
    grid-template-columns: 1fr;
  }

  .essay-stage-grid,
  .writing-situation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .writing-language-grid,
  .writing-resource-split {
    grid-template-columns: 1fr;
  }

  .writing-genre-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .writing-genre-structure {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .writing-genre-structure > div,
  .writing-genre-structure > div:last-child {
    min-height: 88px;
    border: 1px solid #dce9e7;
    border-radius: 8px;
    background: #f7fbfa;
  }

  .writing-letter-addressee-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .writing-lab-container {
    min-width: 0;
    padding-top: 14px;
  }

  .writing-lab-main,
  .writing-lab-main > * {
    width: 100%;
    min-width: 0;
  }

  .writing-lab-hero,
  .writing-lab-section {
    padding: 17px;
  }

  .writing-lab-hero h1 {
    font-size: 2.25rem;
  }

  .writing-lab-hero-flow,
  .writing-lab-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .writing-lab-hero-flow span {
    min-height: 72px;
  }

  .writing-lab-tabs span {
    white-space: normal;
  }

  .writing-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .writing-lab-search {
    width: 100%;
  }

  .essay-brief-strip {
    grid-template-columns: 1fr;
  }

  .essay-brief-strip i {
    display: none;
  }

  .essay-stage-grid,
  .writing-situation-grid,
  .writing-toolkit-list,
  .writing-genre-grid {
    grid-template-columns: 1fr;
  }

  .essay-stage-card {
    grid-template-rows: auto auto auto auto;
  }

  .writing-toolkit-note {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .writing-filter-row {
    flex-wrap: nowrap;
    padding-bottom: 3px;
    overflow-x: auto;
  }

  .writing-filter-row button {
    flex: 0 0 auto;
  }

  .writing-language-table > div {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .writing-language-table span {
    grid-column: 1 / -1;
  }

  .writing-upgrade-row {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .writing-upgrade-row small {
    grid-column: 1 / -1;
  }

  .writing-genre-picker {
    display: flex;
    padding-bottom: 3px;
    overflow-x: auto;
  }

  .writing-genre-picker button {
    flex: 0 0 150px;
  }

  .writing-genre-structure {
    grid-template-columns: 1fr;
  }

  .writing-letter-guide-heading,
  .writing-letter-template-heading,
  .writing-letter-addressee-heading,
  .writing-letter-guide-reader {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .writing-letter-guide-heading p,
  .writing-letter-template-heading p,
  .writing-letter-addressee-heading p,
  .writing-letter-guide-reader span {
    max-width: none;
    text-align: left;
  }

  .writing-letter-guide-grid {
    grid-template-columns: 1fr;
  }

  .writing-letter-template-grid {
    grid-template-columns: 1fr;
  }

  .writing-letter-addressee-grid {
    grid-template-columns: 1fr;
  }

  .writing-genre-structure > div {
    min-height: 0;
  }

  .essay-stage-card blockquote {
    min-height: 0;
  }

  .writing-genre-phrases > div {
    grid-template-columns: 1fr;
  }

  .writing-genre-phrases > div > span {
    padding-top: 4px;
  }

  .writing-genre-language > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .writing-toolkit-overlay {
    align-items: flex-end;
    padding: 8px;
  }

  .writing-toolkit-modal {
    max-height: calc(100vh - 16px);
    padding: 14px;
  }

  .writing-toolkit-tabs {
    grid-auto-rows: minmax(52px, auto);
    gap: 6px;
  }

  .writing-toolkit-tabs button {
    padding: 7px 6px;
    font-size: 0.62rem;
  }
}

@media (max-width: 760px) {
  .topbar-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px;
  }

  .topbar-actions .nav-group {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2px;
    overflow: hidden;
  }

  .topbar-actions .nav-group .nav-pill {
    min-width: 0;
    width: 100%;
    padding: 0 2px;
    font-size: clamp(0.61rem, 2.8vw, 0.7rem);
    letter-spacing: -0.025em;
  }

  .topbar-actions .about-button {
    grid-column: 1;
    width: auto;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
  }

  .topbar-actions .candidate-switch {
    grid-column: 2;
    width: 100%;
    max-width: none;
    display: inline-flex;
    justify-content: flex-start;
    padding: 0 11px;
  }

  .topbar-actions .candidate-switch .candidate-name,
  .topbar-actions .candidate-switch .candidate-status {
    display: block;
  }

  .demo-notice,
  .demo-notice > div,
  .demo-notice p,
  .home-overview,
  .home-metrics,
  .metric-tile {
    min-width: 0;
    max-width: 100%;
  }

  .demo-notice p {
    overflow-wrap: anywhere;
  }
}

/* Claude writing feedback uses the existing C2 Practice Log palette and cards. */
.writing-task-context {
  margin: 0 0 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #ffffff;
}

.writing-task-context summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  color: var(--accent-color);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 850;
}

.writing-task-context > div {
  display: grid;
  gap: 6px;
  padding: 0 12px 12px;
}

.writing-task-context label {
  color: var(--text-main);
  font-size: 0.78rem;
  font-weight: 800;
}

.writing-task-context textarea {
  width: 100%;
  min-height: 105px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: #fbfcfd;
  color: var(--text-main);
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.5;
  resize: vertical;
}

.writing-task-context small {
  color: var(--text-muted);
  font-size: 0.73rem;
  line-height: 1.4;
}

.writing-task-context textarea:focus {
  border-color: var(--accent-color);
  outline: 3px solid rgba(15, 118, 110, 0.12);
}

.writing-ai-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 10px;
}

.writing-ai-actions .btn {
  min-height: 42px;
}

.writing-ai-actions > span {
  color: var(--text-muted);
  font-size: 0.73rem;
  line-height: 1.4;
}

.writing-ai-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.writing-ai-feedback-slot {
  min-width: 0;
  max-width: 100%;
}

.writing-ai-feedback-slot.loading > p,
.writing-ai-feedback-slot.error > p,
.writing-ai-feedback-slot.stale > p {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.writing-ai-feedback-slot.error > p {
  border-color: #f1d1c9;
  background: var(--color-error-bg);
  color: var(--color-error);
}

.writing-ai-feedback-slot.stale > p {
  border-color: #eadab0;
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.writing-ai-card {
  min-width: 0;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #a7d8ce;
  border-radius: 9px;
  background: #f7faf9;
  color: var(--text-main);
  overflow-wrap: anywhere;
}

.writing-ai-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 12px;
}

.writing-ai-card-head .eyebrow {
  color: var(--accent-hover);
}

.writing-ai-card-head h4 {
  margin: 3px 0 0;
  color: var(--text-main);
  font-size: 0.96rem;
}

.writing-ai-card-head > span:last-child {
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 999px;
  background: #e7f1ef;
  color: var(--accent-hover);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.35;
}

.writing-ai-criteria,
.writing-ai-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.writing-ai-criterion {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: #ffffff;
}

.writing-ai-criterion > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.writing-ai-card h5 {
  min-width: 0;
  margin: 0;
  color: var(--text-main);
  font-size: 0.79rem;
  font-weight: 850;
  line-height: 1.4;
}

.writing-ai-criterion strong {
  flex: 0 0 auto;
  color: var(--accent-hover);
  font-size: 0.84rem;
}

.writing-ai-criterion strong span {
  color: var(--text-muted);
  font-size: 0.68rem;
}

.writing-ai-criterion p,
.writing-ai-overall p {
  margin: 7px 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.writing-ai-overall {
  margin: 10px 0;
  padding: 10px;
  border-left: 3px solid var(--accent-color);
  border-radius: 0 7px 7px 0;
  background: #ffffff;
}

.writing-ai-lists {
  margin-top: 8px;
}

.writing-ai-list,
.writing-ai-errors {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: #ffffff;
}

.writing-ai-card ul {
  margin: 7px 0 0;
  padding-left: 18px;
  color: var(--text-muted);
  font-size: 0.79rem;
  line-height: 1.5;
}

.writing-ai-card li + li {
  margin-top: 5px;
}

.writing-ai-errors {
  margin-top: 8px;
}

.writing-ai-errors li {
  overflow-wrap: anywhere;
}

.writing-ai-errors li > span,
.writing-ai-errors li > strong,
.writing-ai-errors li > small {
  display: block;
  overflow-wrap: anywhere;
}

.writing-ai-errors li > span {
  color: var(--color-error);
  text-decoration: line-through;
}

.writing-ai-errors li > strong {
  color: var(--accent-hover);
}

.writing-ai-errors li > small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.74rem;
}

.history-writing-ai-feedback {
  margin: 10px 0;
  border: 1px solid #c9e2dc;
  border-radius: 8px;
  background: #f7faf9;
}

.history-writing-ai-feedback > summary,
.history-writing-ai-task > summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 9px 12px;
  color: var(--accent-hover);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.history-writing-ai-feedback > .writing-ai-card {
  margin: 0 10px 10px;
}

.history-writing-ai-task {
  margin: 0 10px 10px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: #ffffff;
  overflow-wrap: anywhere;
}

.history-writing-ai-task > div,
.history-writing-ai-task > section {
  padding: 8px 10px;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.history-writing-ai-task > section {
  border-top: 1px solid var(--border-color);
}

.history-writing-ai-task > section strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text-main);
}

.history-writing-ai-feedback .writing-ai-card-head > span:last-child {
  white-space: normal;
}

@media (max-width: 600px) {
  .writing-ai-card {
    padding: 10px;
  }

  .writing-ai-criteria,
  .writing-ai-lists {
    grid-template-columns: minmax(0, 1fr);
  }

  .writing-ai-card-head > span:last-child {
    border-radius: 7px;
  }
}