/* Page-specific composition; shared.css is the sole shell and token source. */
.journal-page textarea {
  font: inherit;
  line-height: 1.8;
  resize: vertical;
}
.journal-page main {
  max-width: 1120px;
  min-width: 0;
}
.journal-page main > * {
  min-width: 0;
}
.journal-page h1 {
  margin: 10px 0 12px;
}
.journal-page h2 {
  font-size: 1.375rem;
  line-height: 1.5;
}
.journal-page h3 {
  line-height: 1.6;
}
.journal-page p {
  margin-bottom: 12px;
}
.journal-page img,
.journal-page canvas {
  max-width: 100%;
  height: auto;
}
.journal-page label {
  display: block;
  font-size: 0.875rem;
}
.journal-page input:not([type="checkbox"]):not([type="radio"]),
.journal-page select,
.journal-page textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid #b8cee2;
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface);
  color: var(--ink);
  margin-top: 8px;
}
.journal-page input[type="checkbox"],
.journal-page input[type="radio"] {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.journal-page fieldset {
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 24px 0;
}
.journal-page legend {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: 16px;
}
.journal-page legend > span {
  font:
    500 0.875rem "Noto Sans TC",
    sans-serif;
  color: var(--accent);
  margin-right: 12px;
}
.journal-page button:where(:not(#navigation button):not(.text-button)),
.primary-button,
.primary-action,
.secondary-button,
.secondary-action,
.outline-button,
.primary-link,
.paper-link,
.question-open,
.support-action {
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.journal-page button:hover {
  border-color: var(--accent);
}
.journal-page .primary-button,
.journal-page .primary-action,
.journal-page .calculate-button,
.journal-page .primary-link {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.journal-page .primary-button:hover,
.journal-page .primary-action:hover {
  background: var(--student-primary-hover,#005eb2);
}
.journal-page .text-button {
  color: var(--accent);
}
.journal-page summary {
  cursor: pointer;
  min-height: 44px;
  padding: 10px 0;
  font-size: 0.875rem;
}
.journal-page
  :where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.journal-page [aria-invalid="true"] {
  border-color: var(--accent) !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.page-intro,
.source-note,
.practice-meta,
.study-meta,
.privacy-note,
.sync-status {
  color: var(--muted);
  font-size: 0.875rem;
}
.hero,
.bank-heading,
.simulator-heading,
.dashboard-hero,
.admin-hero,
.practice-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}
.hero > div:first-child,
.bank-heading > div,
.practice-heading > div {
  min-width: 0;
}
.bank-heading {
  align-items: end;
}
.hero-stats {
  border-left: 1px solid var(--line);
  padding-left: 24px;
  flex-shrink: 0;
}
.hero-stats strong {
  display: block;
  font:
    600 2rem "Noto Sans TC",
    sans-serif;
}
.hero-stats span {
  font-size: 0.875rem;
  color: var(--muted);
}
.simulator-heading {
  display: block;
}
.site-footer {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 40px 110px;
  font-size: 0.875rem;
  color: var(--muted);
  display: flex;
  gap: 24px;
  justify-content: space-between;
}
.site-footer a {
  color: var(--accent);
}
/* Shared lists, tabs, feedback, and tables. */
.mode-tabs,
.tab-list,
.v23-workspace-tabs,
.v23-answer-method {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  margin: 24px 0;
  overflow-x: auto;
  max-width: 100%;
  padding: 0;
}
.journal-page
  :is(.mode-tabs, .tab-list, .v23-workspace-tabs, .v23-answer-method)
  button {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 0;
  min-height: 48px;
  font-size: 0.875rem;
}
.journal-page
  :is(.mode-tabs, .tab-list, .v23-workspace-tabs, .v23-answer-method)
  [aria-selected="true"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent);
  font-weight: 600;
}
.tab-panel {
  padding: 0;
}
.table-wrap,
.source-table-scroll,
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.journal-page table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.875rem;
  text-align: left;
  line-height: 1.85;
}
.journal-page th,
.journal-page td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  overflow-wrap: anywhere;
}
.journal-page th {
  background: #e9e8df;
  color: var(--ink);
  font-weight: 600;
}
.form-message,
.form-error,
[role="alert"] {
  color: #9f3326;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}
.empty-state,
.empty-panel,
.loading-state,
.catalog-empty {
  padding: 24px;
  border: 1px dashed var(--line);
  color: var(--muted);
  margin-top: 24px;
}
.section-heading,
.browser-heading-row,
.result-heading,
.answer-heading-row,
.result-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 24px 0 16px;
}
.section-heading p,
.result-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}
.badge,
.practice-status,
.status-pill,
.topic-chip {
  display: inline-block;
  padding: 3px 8px;
  background: #e7e8df;
  border-radius: 3px;
  font-size: 0.875rem;
  color: var(--muted);
}
.notice,
.unit-notice,
.draft-conflict,
.unscored-note,
.v23-sync-note {
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 1px solid var(--accent);
  background: var(--surface);
  margin: 16px 0;
  font-size: 0.875rem;
}
/* Question bank: dark feature band, searchable editorial rows. */
.home-search {
  max-width: 720px;
}
.home-search input {
  font-size: 1rem;
}
.home-progress {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.home-progress > div:not(.home-progress-track) {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.home-progress strong {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 1.5rem;
}
.home-progress span,
.home-progress p {
  font-size: 0.875rem;
  color: var(--muted);
}
.home-progress p {
  margin: 0;
}
.home-progress-track {
  display: none;
}
.study-launch {
  display: grid;
  grid-template-columns: 1fr 1fr 160px;
  background: var(--ink);
  color: var(--surface);
  border-radius: 16px;
  padding: 24px;
  gap: 24px;
  margin-bottom: 24px;
}
.launch-card {
  min-width: 0;
  border-right: 1px solid #46534d;
  padding-right: 24px;
}
.launch-label {
  display: block;
  font-size: 0.875rem;
  color: #bfcbbc;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.launch-card h2 {
  font:
    600 1.375rem/1.6 "Noto Sans TC",
    sans-serif;
}
.launch-card-link {
  display: block;
  text-decoration: none;
}
.launch-card-link:hover h2 {
  text-decoration: underline;
  text-underline-offset: 6px;
}
.journal-page .launch-random {
  background: var(--accent);
  border: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}
.launch-random .launch-label {
  color: #fff;
  margin: 0;
}
.filter-drawer {
  border-bottom: 1px solid var(--line);
  margin: 0 0 16px;
}
.search-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 8px 0 24px;
}
.result-heading label {
  display: flex;
  align-items: center;
  gap: 12px;
}
.result-heading select {
  width: auto !important;
  margin: 0 !important;
}
.question-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
}
.question-card {
  padding: 24px 0;
  border-top: 1px solid var(--line);
  min-width: 0;
}
.question-card-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 12px;
}
.question-card h3 {
  font:
    600 1.375rem/1.65 "Noto Sans TC",
    sans-serif;
  margin-bottom: 12px;
}
.question-preview {
  font-size: 0.875rem;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.question-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
.question-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--muted);
}
.question-open {
  color: var(--accent);
  flex-shrink: 0;
  border-color: #c4daed;
  font-size: 0.875rem;
}
/* Course and map catalogues collapse ahead of the workspace on smaller screens. */
.study-grid,
.app-grid {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.catalog-drawer {
  min-width: 0;
  border-top: 2px solid var(--ink);
}
.catalog-drawer > summary {
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
}
.catalog-drawer > summary span {
  font-size: 0.875rem;
  color: var(--muted);
  font-weight: 400;
}
.catalog {
  min-width: 0;
}
.catalog-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin: 12px 0 20px;
}
.catalog-heading h2 {
  font-size: 1rem;
}
.catalog-total,
.catalog-meta,
.catalog-code,
.catalog-item-score,
.catalog-scores {
  font-size: 0.875rem;
  color: var(--muted);
}
.part-filters,
.chapter-filters {
  display: flex;
  gap: 4px;
  margin: 16px 0;
}
.journal-page :is(.part-filters, .chapter-filters) button {
  font-size: 0.875rem;
  flex: 1;
  padding: 8px;
}
.journal-page :is(.part-filters, .chapter-filters) .is-active {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}
.catalog-list {
  max-height: 65vh;
  overflow: auto;
  scrollbar-width: thin;
}
.journal-page .catalog-item {
  width: 100%;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  text-align: left;
  align-items: start;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 16px 8px;
  justify-content: stretch;
}
.journal-page .catalog-item.is-active {
  background: #edf5fc;
  box-shadow: inset 3px 0 0 var(--accent);
}
.catalog-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.catalog-title {
  font-size: 0.875rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.catalog-progress {
  grid-column: 2;
  height: 3px;
  background: var(--line);
}
.catalog-progress > span {
  display: block;
  height: 3px;
  background: var(--accent);
}
.study,
.practice {
  min-width: 0;
}
.study-header,
.practice-top {
  padding: 24px;
  background: var(--ink);
  color: var(--surface);
  border-radius: 16px;
}
.study-header .overline,
.practice-top .overline,
.study-header .study-meta,
.practice-top .practice-meta {
  color: #bfcbbe;
  font-size: 0.875rem;
  margin: 0 0 8px;
}
.study-header h2,
.practice-top h2 {
  font:
    600 1.75rem/1.6 "Noto Sans TC",
    sans-serif;
  margin-bottom: 8px;
}
.study-header .paper-link {
  margin-top: 8px;
  background: transparent;
  color: var(--surface);
  border-color: #7f8b81;
  font-size: 0.875rem;
}
.study-body {
  padding: 8px 0;
}
.chapter-picker {
  margin-bottom: 24px;
}
.reading-block,
.read-block,
.lesson-block,
.quiz-card {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.study-body h3 {
  margin: 20px 0 12px;
}
.study-body p,
.study-body li {
  line-height: 1.9;
}
.study-body table {
  background: var(--surface);
}
.study-body td:first-child {
  min-width: 90px;
}
.flashcard,
.recall-card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 32px;
  border-radius: 8px;
  margin: 24px 0;
}
.recall-question,
.card-prompt {
  font:
    600 1.5rem/1.75 "Noto Sans TC",
    sans-serif;
}
.recall-answer,
.quiz-answer {
  padding: 20px;
  margin-top: 16px;
  border-left: 1px solid var(--accent);
  background: #e9ede2;
}
.recall-actions,
.rating-actions,
.card-actions,
.finish-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0;
}
.practice-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.progress-label,
.overline {
  font-size: 0.875rem;
  color: var(--muted);
}
.quiz-list {
  display: grid;
  gap: 16px;
}
.review-summary,
.schedule {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 24px;
}
.review-stat,
.schedule-step {
  display: grid;
  gap: 8px;
}
.review-stat strong {
  font-size: 2rem;
  font-family: "Noto Sans TC", sans-serif;
}
.schedule-step {
  border-left: 2px solid var(--line);
  padding-left: 16px;
}
.schedule-step span {
  font-size: 0.875rem;
  color: var(--muted);
}
.due-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.due-item span {
  display: block;
  font-size: 0.875rem;
  color: var(--muted);
}
/* Map pins retain coordinate geometry and zoom within a local scroll container. */
.settings-grid,
.practice-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 24px 0;
}
.setting-group {
  min-width: 0;
  flex: 1 1 180px;
}
.setting-group > span,
.setting-label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 8px;
}
.segmented {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.journal-page [data-setting] {
  font-size: 0.875rem;
  padding: 8px 12px;
}
.journal-page [data-setting].is-active,
.journal-page [data-setting][aria-pressed="true"] {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}
.session-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.875rem;
  margin: 20px 0;
}
.session-bar .progress-track {
  flex: 1;
  height: 4px;
  background: var(--line);
  min-width: 40px;
}
.progress-fill {
  display: block;
  height: 100%;
  background: var(--accent);
}
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.map-column,
.question-column {
  min-width: 0;
}
.map-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.map-credit {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.6;
}
.map-credit strong { font-weight: 600; }
.map-toolbar-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.journal-page .map-toolbar button {
  font-size: 0.875rem;
  padding: 8px;
}
.map-scroll {
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: white;
  border-radius: 6px;
}
.map-scroll.is-zoomed {
  max-height: 65vh;
  overflow: auto;
}
.map-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.map-stage.is-zoomed {
  width: max(1050px, 165%);
  max-width: none;
}
.map-stage img {
  display: block;
  width: 100%;
  height: auto;
}
.map-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.marker-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.marker-lines line {
  stroke: #36674c;
  stroke-width: 1.2px;
  vector-effect: non-scaling-stroke;
}
.journal-page .map-marker {
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--marker-size, 29px);
  height: var(--marker-size, 29px);
  min-height: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -50%);
  border: 2px solid white !important;
  border-radius: 100%;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
  color: white;
  font-size: var(--marker-font-size, 0.75rem);
  pointer-events: auto;
  line-height: 1;
}
.journal-page .map-marker.is-current {
  background: var(--accent);
}
.journal-page .map-marker.is-filled,
.journal-page .map-marker.is-correct {
  background: #336444;
}
.journal-page .map-marker.is-wrong {
  background: #9d3827;
}
.answer-reveal {
  position: absolute;
  z-index: 1;
  padding: 4px 8px;
  transform: translate(16px, -32px);
  background: white;
  border: 1px solid #336444;
  border-radius: 4px;
  font-size: 0.875rem;
  white-space: nowrap;
}
.question-column {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.question-column h3 {
  font:
    600 1.375rem/1.6 "Noto Sans TC",
    sans-serif;
  margin-bottom: 16px;
}
.question-label,
.question-helper {
  font-size: 0.875rem;
  color: var(--muted);
}
.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0;
}
.journal-page [data-choice].is-selected,
.journal-page [data-choice][aria-pressed="true"] {
  border-color: var(--ink);
  background: #e4ebdd;
  box-shadow: inset 0 0 0 1px var(--ink);
}
.choice-list {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}
.journal-page .choice-button {
  justify-content: flex-start;
  text-align: left;
}
.choice-letter {
  color: var(--muted);
  width: 24px;
  flex-shrink: 0;
}
.journal-page tbody tr:focus-within {
  background: #e9e8df;
}
.feedback {
  padding: 16px;
  background: #e4ebdd;
  margin: 16px 0;
}
.is-wrong.feedback {
  background: #f1dfd4;
}
.whole-answer-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.whole-answer-card {
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--bg);
}
.whole-answer-card.is-correct {
  border-color: #426447;
}
.whole-answer-card.is-wrong {
  border-color: var(--accent);
}
.answer-number {
  font-weight: 600;
  color: var(--accent);
  margin-right: 8px;
}
.answer-result {
  display: block;
  font-size: 0.875rem;
  margin-top: 8px;
}
.answer-main {
  margin-top: 16px;
}
.finish-score {
  font:
    600 2.5rem "Noto Sans TC",
    sans-serif;
}
.missed-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* Reading and writing use one persistent DOM so switching never discards drafts. */
.back-to-bank {
  font-size: 0.875rem;
  color: var(--muted);
  display: inline-block;
  margin-bottom: 24px;
}
.practice-title-line {
  display: flex;
  gap: 16px;
  align-items: baseline;
  flex-wrap: wrap;
}
.practice-title-line h1 {
  margin-top: 8px;
}
.practice-kicker {
  font-size: 0.875rem;
  color: var(--muted);
}
#questionMarks {
  font-size: 0.875rem;
  background: #edf5fc;
  padding: 3px 8px;
}
.save-indicator {
  font-size: 0.875rem;
  color: var(--muted);
  max-width: 240px;
}
.practice-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.question-paper,
.answer-editor {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 24px;
  border-radius: 6px;
}
.answer-workspace {
  min-width: 0;
}
.question-paper {
  max-height: calc(100dvh - 40px);
  position: sticky;
  top: 20px;
  overflow: auto;
}
.part-jumps {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.part-jumps a {
  padding: 8px 12px;
  border: 1px solid var(--line);
  font-size: 0.875rem;
  text-decoration: none;
}
.paper-part {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 80px;
}
.paper-part h3 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.paper-part p,
.paper-materials p {
  line-height: 1.95;
}
.paper-part h3 span {
  font-size: 0.875rem;
  color: var(--muted);
}
.source-block,
.source-table-scroll {
  margin: 16px 0;
}
.source-block-heading {
  background: #e9e8df;
  padding: 12px;
}
.source-image img {
  max-width: 100%;
  height: auto;
}
.paper-materials summary {
  font-size: 1rem;
  font-weight: 600;
}
.original-source-image { margin: 1.25rem 0 1.75rem; max-width: 100%; }
.original-source-image figcaption { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; align-items: baseline; margin-bottom: .65rem; font-weight: 600; }
.original-source-image figcaption a { font-size: .9rem; font-weight: 500; }
.original-source-image img { display: block; max-width: 100%; width: auto; height: auto; background: #fff; }
.part-answer {
  margin: 24px 0;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.part-answer textarea {
  min-height: 220px;
}
.part-answer label {
  font-weight: 500;
}
.answer-question {
  display: none;
}
.part-answer .skip-label {
  display: flex;
  align-items: start;
  gap: 8px;
  margin-top: 12px;
}
.v23-answer-read,
.v23-source-return {
  font-size: 0.875rem;
  color: var(--accent);
  display: inline-block;
  margin: 8px 0;
}
.answer-heading-row {
  margin-top: 0;
}
.answer-heading-row span {
  font-size: 0.875rem;
  color: var(--muted);
}
.v23-answer-method {
  margin-top: 16px;
}
.v23-answer-method button {
  flex: 1;
}
.v23-workspace-tabs {
  display: none;
}
.pdf-upload-area {
  margin: 20px 0;
}
.pdf-confirm {
  display: flex !important;
  align-items: start;
  gap: 8px;
  font-size: 0.875rem;
  margin-top: 16px;
}
.pdf-selection-head,
.pdf-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  margin: 16px 0;
}
.pdf-filename {
  overflow-wrap: anywhere;
}
.pdf-canvas-wrap,
.pdf-pages {
  max-width: 100%;
  overflow: auto;
}
.submission-history {
  border-top: 1px solid var(--line);
  margin-top: 24px;
  padding-top: 16px;
}
.submission-history-body {
  padding: 16px 0;
}
.submission-item,
.submission-feedback,
.attempt-card {
  border: 1px solid var(--line);
  padding: 20px;
  margin-top: 16px;
  background: var(--surface);
}
.submission-feedback h3 {
  color: #336444;
  margin-bottom: 12px;
}
.v23-next-action {
  display: inline-flex;
  background: var(--accent);
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  margin-top: 16px;
  border-radius: 4px;
}
.v23-dialog-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.guided-step,
.guide-step,
.step-card {
  padding: 20px;
  background: #e7eadd;
  margin-bottom: 16px;
}
.guided-step h3,
.guide-step h3 {
  margin-bottom: 12px;
}
.unit-original img {
  display: block;
  max-width: 100%;
}
/* Score simulator. */
.score-form {
  max-width: 900px;
}
.calculation-notes {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
  margin-bottom: 32px;
  font-size: 0.875rem;
}
.calculation-notes p {
  color: var(--muted);
}
.score-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.score-grid-topics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.score-field {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.score-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.score-label small,
.field-hint {
  font-size: 0.875rem;
  color: var(--muted);
}
.score-field input {
  font-size: 1.375rem;
  font-variant-numeric: tabular-nums;
}
.field-hint {
  display: block;
  margin-top: 8px;
}
.form-actions {
  display: flex;
  gap: 16px;
  margin: 24px 0;
  flex-wrap: wrap;
}
.simulation-result {
  margin-top: 40px;
}
.result-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  background: var(--ink);
  color: var(--surface);
  padding: 32px;
  border-radius: 8px;
}
.result-summary h2 {
  font:
    600 1.5rem "Noto Sans TC",
    sans-serif;
}
.result-summary h2 strong {
  font-size: 2.5rem;
  color: #edaf8d;
}
.total-score strong {
  font:
    600 2.5rem "Noto Sans TC",
    sans-serif;
  display: block;
}
.total-score span {
  font-size: 0.875rem;
  color: #becbbc;
}
.result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.result-card {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.result-label {
  color: var(--accent);
  font-size: 0.875rem;
}
.support-message {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  background: #e9e6d9;
  margin-top: 24px;
}
.result-card ul {
  padding-left: 20px;
}
.result-card li {
  margin-bottom: 12px;
}
/* Student and teacher dashboards. */
.login-layout {
  min-height: 65vh;
  display: grid;
  place-items: center;
}
.login-card {
  width: min(100%, 440px);
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 1px solid var(--accent);
  border-radius: 6px;
}
.login-card label {
  margin: 24px 0;
}
.login-card > .primary-button {
  width: 100%;
}
.login-card .privacy-note {
  margin-top: 16px;
}
.journal-page[data-page="login"] .login-card h1 { font-size: 2rem; }
.login-return { margin-top: 12px; color: var(--muted); }
.login-browse { display: inline-block; margin-top: 20px; color: var(--accent); min-height: 44px; }
.login-card input[aria-invalid="true"] { border-color: var(--danger); }
.board-access { min-height: 50vh; display: grid; align-content: center; justify-items: center; gap: 24px; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 24px 0;
}
.stat-grid article,
.stat-card {
  padding: 20px;
  border-right: 1px solid var(--line);
}
.stat-grid strong {
  display: block;
  font:
    600 2rem "Noto Sans TC",
    sans-serif;
  margin-top: 12px;
}
.stat-grid span,
.stat-grid p {
  font-size: 0.875rem;
  color: var(--muted);
}
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.nickname-card {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
  margin-bottom: 24px;
}
.nickname-card h2 {
  font-size: 1rem;
}
.nickname-card p {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
}
.nickname-card form {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 240px;
  max-width: 450px;
}
.nickname-card input {
  margin-top: 0 !important;
}
.nickname-card button {
  flex-shrink: 0;
}
.board-rules {
  font-size: 0.875rem;
  color: var(--muted);
}
.podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 16px 0 32px;
}
.podium-card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 20px;
  border-radius: 6px;
  text-align: center;
  min-width: 0;
}
.podium-card strong {
  font:
    600 1.25rem "Noto Sans TC",
    sans-serif;
  display: block;
  overflow-wrap: anywhere;
}
.podium-card .rank {
  color: var(--accent);
  font-size: 1.5rem;
}
.progress-filters {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.progress-filters label {
  flex: 1;
  min-width: 140px;
}
.progress-grid,
.reward-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.progress-card,
.reward-card {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  min-width: 0;
}
.progress-card h3,
.reward-card h3 {
  margin-bottom: 12px;
}
.reward-card p,
.progress-card p {
  font-size: 0.875rem;
  color: var(--muted);
}
.reward-callout {
  padding: 20px;
  background: #e4e8dc;
  font-size: 0.875rem;
}
.request-item,
.admin-item {
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--surface);
  margin: 16px 0;
  border-radius: 6px;
  min-width: 0;
}
.request-item p {
  font-size: 0.875rem;
}
.admin-auth {
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.admin-auth p {
  margin: 24px 0;
}
.admin-tabs {
  margin-bottom: 24px;
}
.admin-panel .table-wrap {
  border: 1px solid var(--line);
}
.admin-panel table {
  min-width: 680px;
}
.admin-item form {
  display: grid;
  gap: 16px;
}
.admin-item input,
.admin-item textarea {
  margin-top: 8px;
}
.admin-item textarea {
  min-height: 130px;
}
.review-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.review-filter select {
  width: auto !important;
  margin: 0 !important;
}
.review-meta,
.review-score-hint,
.review-answer {
  font-size: 0.875rem;
}
.review-answer {
  white-space: pre-wrap;
  background: var(--bg);
  padding: 16px;
  margin: 16px 0;
}
.review-parts,
.review-part-scores,
.prize-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.review-actions,
.quick-comments,
.redemption-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}
.admin-item summary {
  font-size: 1rem;
}
.admin-panel .section-heading {
  align-items: start;
  margin-top: 0;
}
.admin-panel #taskDurationFields {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-panel label:has(input[type="checkbox"]) {
  display: flex;
  align-items: start;
  gap: 8px;
}
.skill-tags {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.skill-feedback .skill-help {
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 16px;
}
.skill-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.admin-panel .skill-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  min-width: 0;
  min-height: 48px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.skill-option:has(:checked) {
  border-color: var(--ink);
  background: #e4ebdd;
}
.skill-option:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.skill-option input[type="checkbox"] { margin-top: 5px; }
.skill-option strong { display: block; font-size: 1rem; font-weight: 600; }
.skill-option small { display: block; color: var(--muted); font-size: .875rem; line-height: 1.65; margin-top: 4px; }
.admin-panel .legacy-skill { margin-bottom: 16px; border-style: dashed; }
.journal-page .skill-save-status { font-size: .875rem; color: var(--ink); margin: 0; }
@media (max-width: 767px) { .skill-options { grid-template-columns: minmax(0, 1fr); } }
.admin-panel table button {
  font-size: 0.875rem;
  padding: 8px !important;
}
.history-table {
  font-size: 0.875rem;
}
.review-paper {
  margin: 20px 0;
}
.review-part {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 1199px) {
  .answer-question {
    display: block;
    margin: 0 0 16px;
    padding: 16px;
    border-left: 1px solid var(--accent);
    background: #edf5fc;
  }
  .answer-question > span {
    display: block;
    margin-bottom: 8px;
    color: var(--accent);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
  }
  .answer-question p {
    margin: 0;
    color: var(--ink);
    line-height: 1.8;
  }
  .answer-question .v23-answer-read {
    margin: 12px 0 0;
  }
  .study-grid,
  .app-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .catalog-list {
    max-height: 320px;
  }
  .practice-layout {
    display: block;
  }
  .question-paper {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .v23-workspace-tabs {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 15;
    background: var(--bg);
    padding-top: 8px;
    margin-bottom: 16px;
  }
  .v23-workspace-tabs button {
    flex: 1;
  }
  .journal-page[data-workspace="read"] .answer-workspace,
  .journal-page[data-workspace="write"] .question-paper {
    display: none;
  }
  .journal-page.keyboard-open #navigation {
    visibility: hidden;
  }
  .study-launch {
    grid-template-columns: 1fr 1fr;
  }
  .launch-random {
    grid-column: 1/-1;
  }
  .launch-card:nth-child(2) {
    border: 0;
  }
  .score-grid-topics {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 1200px) {
  .catalog-drawer {
    position: sticky;
    top: 24px;
  }
  .journal-page[data-page="question"] main {
    max-width: 1120px;
  }
  .journal-page[data-page="simulator"] main {
    max-width: 1120px;
  }
}
@media (max-width: 767px) {
  .journal-page main {
    padding-top: 24px;
  }
  .hero,
  .bank-heading,
  .dashboard-hero,
  .admin-hero,
  .practice-heading {
    align-items: start;
    gap: 16px;
    margin-bottom: 24px;
  }
  .dashboard-hero,
  .admin-hero {
    flex-direction: column;
  }
  .journal-page h1 {
    font-size: 1.875rem;
  }
  .journal-page h2 {
    font-size: 1.25rem;
  }
  .hero-stats {
    padding-left: 16px;
  }
  .hero-stats strong {
    font-size: 1.5rem;
  }
  .home-progress {
    gap: 12px 24px;
  }
  .home-progress > div:not(.home-progress-track) {
    gap: 8px;
  }
  .home-progress strong {
    font-size: 1.25rem;
  }
  .home-progress p {
    width: 100%;
  }
  .study-launch {
    padding: 16px;
    gap: 16px;
  }
  .journal-page .launch-random {
    flex-direction: row;
    justify-content: space-between;
  }
  .launch-label {
    margin-bottom: 4px;
  }
  .home-progress {
    margin-bottom: 16px;
    padding: 12px 0;
  }
  .journal-page[data-page="lessons"] .hero,
  .journal-page[data-page="maps"] .hero {
    margin-bottom: 16px;
  }
  .study-grid,
  .app-grid {
    gap: 16px;
  }
  .study-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 12px;
  }
  .study-header > div {
    display: contents;
  }
  .study-header .overline,
  .study-header h2 {
    grid-column: 1 / -1;
    margin: 0;
  }
  .study-header .study-meta {
    margin: 0;
  }
  .study-header .paper-link {
    margin-top: 0;
    padding: 8px;
    font-size: .875rem;
    max-width: none;
  }
  .study-header h2 {
    line-height: 1.5;
  }
  .study .mode-tabs {
    margin: 16px 0;
  }
  .launch-card {
    padding-right: 12px;
  }
  .launch-card h2 {
    font-size: 1.125rem;
  }
  .question-list {
    grid-template-columns: 1fr;
  }
  .search-row {
    grid-template-columns: 1fr;
  }
  .question-card-footer {
    align-items: start;
  }
  .question-open {
    font-size: 0.875rem;
    padding: 8px 12px;
    white-space: nowrap;
  }
  .question-card h3 {
    font-size: 1.25rem;
  }
  .question-card {
    padding: 24px 0;
  }
  .question-preview {
    line-height: 1.8;
  }
  .study-header,
  .practice-top {
    padding: 20px;
  }
  .study-header h2,
  .practice-top h2 {
    font-size: 1.5rem;
  }
  .flashcard,
  .recall-card {
    padding: 24px;
  }
  .practice-intro {
    align-items: start;
    flex-direction: column;
  }
  .whole-answer-list,
  .choice-grid {
    grid-template-columns: 1fr;
  }
  .question-column {
    padding: 20px;
  }
  .question-paper,
  .answer-editor {
    padding: 20px 16px;
  }
  .practice-heading {
    flex-direction: column;
  }
  .practice-heading h1 {
    font-size: 1.875rem;
  }
  .save-indicator {
    max-width: none;
  }
  .part-answer textarea {
    min-height: 200px;
  }
  .score-grid {
    grid-template-columns: 1fr;
  }
  .score-form fieldset {
    margin: 24px 0;
  }
  .result-summary {
    padding: 24px;
    align-items: start;
    flex-direction: column;
  }
  .total-score {
    display: flex;
    gap: 16px;
    align-items: baseline;
  }
  .result-grid {
    grid-template-columns: 1fr;
  }
  .support-message {
    flex-direction: column;
    align-items: start;
  }
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stat-grid article {
    padding: 16px;
    border-bottom: 1px solid var(--line);
  }
  .stat-grid strong {
    font-size: 1.625rem;
  }
  .podium {
    gap: 8px;
  }
  .podium-card {
    padding: 16px 8px;
  }
  .podium-card strong {
    font-size: 1rem;
  }
  .progress-grid,
  .reward-grid {
    grid-template-columns: 1fr;
  }
  .nickname-card {
    gap: 16px;
  }
  .nickname-card form {
    min-width: 0;
    width: 100%;
    flex: auto;
    flex-wrap: wrap;
  }
  .nickname-card input {
    flex: 1;
    min-width: 120px !important;
  }
  .login-card {
    padding: 24px;
  }
  .login-layout {
    min-height: 60vh;
  }
  .review-parts,
  .review-part-scores,
  .prize-fields,
  .admin-panel #taskDurationFields {
    grid-template-columns: 1fr;
  }
  .admin-item {
    padding: 20px 16px;
  }
  .site-footer {
    padding: 24px 20px 110px;
    flex-wrap: wrap;
  }
  .catalog-drawer > summary {
    font-size: 1rem;
  }
}
@media (min-width: 1400px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
  }
  .whole-answer-list {
    grid-template-columns: 1fr;
  }
  .map-column {
    position: sticky;
    top: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}
/* Dynamic catalogue and review content uses the same editorial rhythm. */
.catalog-item-copy {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.catalog-item-title {
  display: block;
  font-weight: 500;
  line-height: 1.6;
}
.catalog-item-meta,
.catalog-number {
  font-size: 0.875rem;
  color: var(--muted);
}
.catalog-number {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.choice-list,
.setting-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.choice-list {
  flex-direction: column;
  margin: 16px 0;
}
.journal-page .choice-button {
  justify-content: start;
  text-align: left;
}
.lesson-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}
.review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
}
.review-layout > div {
  min-width: 0;
}
.answer-box {
  padding: 20px;
  background: var(--bg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.9;
}
.review-comments,
.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.review-comments button {
  font-size: 0.875rem;
}
.prize-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.prize-controls .switch-label {
  align-items: center;
}
.part-marking input {
  margin-bottom: 16px;
}
.review-reference ul {
  padding-left: 24px;
}
.request-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.reward-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0;
}
.reward-meta span {
  font-size: 0.875rem;
  color: var(--muted);
}
@media (max-width: 1199px) {
  .review-layout {
    grid-template-columns: 1fr;
  }
  .prize-controls {
    grid-template-columns: 1fr;
  }
}

/* v2.5: spacious year-led question catalogue. */
.journal-page main{max-width:1440px}.journal-page h1{font-family:"Noto Sans TC",sans-serif;font-size:3rem;line-height:1.2;letter-spacing:-.025em}.journal-page :is(h2,h3,legend,.home-progress strong,.launch-card h2){font-family:"Noto Sans TC",sans-serif}
.journal-page[data-page=bank] main{padding-top:40px}.bank-hero{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;padding:0 0 26px 100px}.bank-heading{display:block;margin:0}.bank-heading h1{margin:0 0 8px}.bank-heading #sourceNote{font-size:1.25rem;color:var(--ink);margin:0}.bank-search-area{display:flex;align-items:center;gap:16px;margin-top:6px}.bank-search-area .home-search{flex:1;min-width:0}.bank-search-area input{margin:0!important;border-color:var(--line)!important;border-radius:16px!important;padding:14px 18px!important}.bank-search-area .primary{white-space:nowrap;border-radius:28px;min-height:52px;padding:10px 24px}
.bank-toolbar{display:flex;align-items:center;gap:20px;padding-left:100px;margin-bottom:24px;flex-wrap:wrap}.bank-topic{min-width:200px}.bank-topic select{margin:0!important;border-color:var(--line)!important}.status-segments{display:flex;align-items:stretch;background:white;border:1px solid var(--line);border-radius:10px;overflow:hidden}.journal-page .status-segments button{border:0;border-radius:0;min-height:46px;padding:10px 20px;background:white;color:var(--ink);white-space:nowrap}.journal-page .status-segments button[aria-pressed=true]{background:var(--accent);color:white}.bank-toolbar .filter-drawer{border:0;margin:0}.bank-toolbar .filter-drawer summary{font-size:.875rem;color:var(--muted);padding:10px;min-height:44px}.bank-toolbar .filter-drawer[open]{flex-basis:100%;background:#fff;border-radius:12px;padding:0 16px}.bank-toolbar .search-row{margin:0 0 16px}
.bank-layout{display:grid;grid-template-columns:170px minmax(0,1fr);gap:32px}.year-rail{border-right:1px solid var(--line);padding-right:16px}.year-rail>span{display:block;font-size:.875rem;color:var(--muted);margin:0 0 12px 12px}.year-rail #bankYears{display:grid;gap:4px;align-content:start;position:sticky;top:20px;max-height:70vh;overflow:auto}.journal-page .year-rail button{background:none;border:0;border-radius:12px;color:var(--ink);text-align:left;min-height:52px;padding:8px 20px;font-size:1.25rem;font-weight:500}.journal-page .year-rail button[aria-pressed=true]{background:#d9edff;color:var(--accent);font-weight:700}.year-rail button:hover{background:#e3f1ff}.bank-results{min-width:0}.bank-results .result-heading{display:flex;gap:16px;align-items:center;margin:0 0 16px;min-height:0}.bank-results .result-heading h2{font-size:1rem}.bank-results .result-heading p{font-size:.875rem;margin:0;color:var(--muted)}.bank-results .reset-button{margin-left:auto;border:0;background:none;color:var(--accent);padding:4px;min-height:36px;font-size:.875rem}
.question-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.question-card{background:white;border:1px solid var(--line);border-radius:16px;padding:22px 24px;display:flex;flex-direction:column;min-height:226px}.question-card-topline{font-size:1rem;margin-bottom:12px;gap:8px}.journal-page .question-card h3{font-family:"Noto Sans TC",sans-serif;font-size:1.75rem;line-height:1.4;font-weight:750;margin-bottom:16px;letter-spacing:-.02em}.study-card-meta{font-size:1rem;color:var(--ink);margin:0 0 12px!important}.question-card-footer{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);min-height:52px}.question-tags strong{font-size:1.1rem;font-weight:600;color:var(--ink)}.question-open{display:inline-flex;min-height:44px;align-items:center;justify-content:center;border:0;background:var(--accent);color:white;border-radius:26px;padding:8px 22px;text-decoration:none;font-size:.95rem;font-weight:600}.question-open:hover{background:var(--student-primary-hover,#005eb2)}.practice-status{border:0!important;border-radius:20px!important;padding:4px 12px!important;font-size:.8rem!important;background:#eff5fa!important;color:#536275!important;white-space:nowrap}.practice-status-review{background:#fff0f1!important;color:#a53242!important}.practice-status-pending{background:#fff5df!important;color:#795416!important}.home-progress{padding:14px 20px;background:white;border:1px solid var(--line);border-radius:14px;margin:20px 0 0;gap:16px;font-size:.875rem}.home-progress strong{font:600 1rem "Noto Sans TC",sans-serif}.home-progress>div:not(.home-progress-track){gap:8px}.home-progress p{margin-left:auto}.practice-shortcuts{margin-top:28px;padding-left:202px}.practice-shortcuts>summary{min-height:44px;cursor:pointer;color:var(--muted)}.study-launch{background:white;color:var(--ink);border:1px solid var(--line);margin-top:16px}.launch-card{border-color:var(--line)}.launch-label{color:var(--muted)}.journal-page .launch-random{border-radius:12px}.bank-results .empty-state{background:white;border-radius:16px;padding:32px}
@media(max-width:1100px){.bank-hero,.bank-toolbar{padding-left:0}.bank-layout{grid-template-columns:120px minmax(0,1fr);gap:20px}.bank-search-area{flex-wrap:wrap}.bank-search-area .primary{min-height:44px}.journal-page .question-card h3{font-size:1.4rem}.question-card{padding:20px;min-height:230px}.practice-shortcuts{padding-left:140px}}
@media(max-width:767px){.journal-page h1{font-size:2.125rem}.journal-page[data-page=bank] main{padding-top:24px}.bank-hero{display:block;padding:0;margin-bottom:20px}.bank-heading{margin-bottom:18px}.bank-heading #sourceNote{font-size:1rem}.bank-search-area{display:flex;flex-wrap:nowrap;gap:8px}.bank-search-area .primary{display:none}.bank-search-area .home-search input{font-size:1rem;min-height:48px}.bank-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;margin-bottom:16px}.bank-topic{min-width:0}.status-segments{grid-column:1/-1;grid-row:2;overflow:auto}.journal-page .status-segments button{flex:1;padding:9px 12px;font-size:.875rem;min-height:44px}.bank-toolbar .filter-drawer{grid-column:2;grid-row:1}.bank-toolbar .filter-drawer[open]{grid-column:1/-1;grid-row:3;padding:4px 12px}.search-row{grid-template-columns:1fr 1fr;gap:12px}.bank-layout{display:block}.year-rail{border:0;padding:0;margin-bottom:16px}.year-rail>span{display:none}.year-rail #bankYears{display:flex;position:static;gap:6px;overflow:auto;max-height:none;padding:2px}.journal-page .year-rail button{padding:8px 15px;min-height:44px;font-size:1rem;flex-shrink:0}.bank-results .result-heading{margin-bottom:12px;gap:12px}.question-list{grid-template-columns:minmax(0,1fr);gap:14px}.question-card{min-height:0;padding:20px}.journal-page .question-card h3{font-size:1.35rem;margin-bottom:12px}.question-card-topline{font-size:.95rem}.question-card-footer{margin-top:4px;padding-top:12px}.question-open{font-size:.9rem;min-height:44px;padding:8px 20px}.study-card-meta{font-size:.95rem}.home-progress{gap:8px 16px;padding:16px}.home-progress p{width:100%;margin:0}.practice-shortcuts{padding-left:0}.study-launch{grid-template-columns:1fr}.launch-card{border-right:0;border-bottom:1px solid var(--line);padding-bottom:16px}.launch-random{grid-column:auto}}

.journal-page .bank-topic{width:224px;flex:0 0 224px;max-width:100%}.journal-page #findUnsubmitted{background:var(--accent);color:#fff;border:0;font-size:1rem;font-weight:600;min-width:178px}.bank-toolbar{flex-wrap:nowrap}.bank-toolbar:has(.filter-drawer[open]){flex-wrap:wrap}.bank-results .result-heading{margin:0 0 8px;min-height:28px}.bank-layout{gap:32px}.question-card{min-height:236px}.question-card h3{max-width:18ch}.question-card-footer{border-top:0}.bank-hero{padding-bottom:24px}.bank-toolbar{margin-bottom:24px}.year-rail #bankYears{gap:4px}.journal-page .year-rail button{min-height:60px;font-size:1.4rem}.bank-search-area .home-search{max-width:none}.bank-search-area input{font-size:1.1rem}.question-card-topline{font-size:1.15rem}.study-card-meta{font-size:1.1rem}.question-open{font-size:1rem}.brand{font-size:1.65rem}#navigation{gap:30px}.account{font-size:1rem}
@media(max-width:1100px){.journal-page .bank-topic{width:180px;flex-basis:180px}.bank-toolbar{gap:12px}.journal-page .status-segments button{padding-inline:12px}}
@media(max-width:767px){.journal-page .bank-topic{width:auto;min-width:0}.bank-toolbar{gap:10px}.bank-results .result-heading{margin:0 0 10px}.journal-page .year-rail button{min-height:44px;font-size:1rem}.question-card{min-height:0}.question-card-topline{font-size:.95rem}.study-card-meta{font-size:.95rem}.question-open{font-size:.9rem}.brand{font-size:1.2rem}#navigation{gap:0}.account{font-size:.8rem}.bank-search-area input{font-size:1rem}.question-card h3{max-width:none}}
.journal-page .question-card h3{max-width:none;font-size:1.875rem;line-height:1.25;margin-bottom:8px}.question-card-topline{line-height:1.35}.study-card-meta{line-height:1.4;margin-bottom:0!important}.question-card{min-height:238px}.question-card-footer{min-height:44px;padding-top:12px}.bank-results .result-heading{position:static;width:auto;height:auto;overflow:visible;clip-path:none;margin:0 0 12px;min-height:44px}.bank-results .result-heading:focus-within{position:static;width:auto;height:auto;overflow:visible;clip-path:none}.bank-toolbar{margin-bottom:24px}.year-rail #bankYears{max-height:480px}.year-rail #bankYears button[data-bank-year=all]{font-size:1rem;min-height:44px}.home-progress{font-size:1rem}@media(max-width:767px){.journal-page .question-card h3{font-size:1.3rem;line-height:1.45}.question-card{min-height:0}.question-card-topline{line-height:1.5}.year-rail #bankYears{max-height:none}.bank-results .result-heading{position:static;width:auto;height:auto;overflow:visible;clip-path:none;margin-bottom:12px}.home-progress{font-size:.875rem}}

/* Reading, practice and secondary student tools. */
.journal-page input:not([type=checkbox]):not([type=radio]),.journal-page select,.journal-page textarea{border-color:#b8cee2;border-radius:10px}.journal-page :is(.primary-button,.primary-action,.calculate-button,.primary-link){border-radius:26px}.journal-page :is(.primary-button,.primary-action,.calculate-button,.primary-link):hover{background:var(--student-primary-hover,#005eb2)}.journal-page :is(.mode-tabs,.tab-list,.v23-workspace-tabs,.v23-answer-method){border-bottom:0;background:#fff;border-radius:12px;padding:4px;gap:4px}.journal-page :is(.mode-tabs,.tab-list,.v23-workspace-tabs,.v23-answer-method) button{border-radius:9px}.journal-page :is(.mode-tabs,.tab-list,.v23-workspace-tabs,.v23-answer-method) [aria-selected=true]{background:#e1f0ff;color:var(--student-primary,#005faf);box-shadow:none}.page-intro{color:var(--muted);font-size:1rem}.hero,.practice-heading,.dashboard-hero{margin-bottom:28px}.catalog-drawer{border:1px solid var(--line);border-radius:16px;padding:0 18px;background:white}.catalog-drawer>summary{padding:16px 0;gap:8px}.catalog-list{margin-bottom:16px}.journal-page .catalog-item{border-radius:10px;border-bottom:0;margin-bottom:4px;padding:14px 10px}.journal-page .catalog-item.is-active{background:var(--soft);color:var(--student-primary,#005faf);box-shadow:none}.catalog-title{font-size:.95rem;font-weight:600}.journal-page :is(.part-filters,.chapter-filters) .is-active{background:var(--accent);border-color:var(--accent)}.study-header,.practice-top{background:white;border:1px solid var(--line);border-radius:16px;padding:24px;margin-bottom:20px}.study-block,.study-section,.flashcard,.quiz-panel,.practice-panel{border-radius:16px}.study-content,.lesson-content,.source-block{line-height:1.85}.journal-page[data-page=lessons] :is(.study-panel,.content-panel){background:white;border:1px solid var(--line);border-radius:16px;padding:28px}.question-paper,.answer-editor{border-radius:16px;padding:28px}.question-paper{top:24px;max-height:calc(100dvh - 48px)}.paper-part p,.paper-materials p{font-size:1.05rem;line-height:1.9}.paper-part h3{font-family:"Noto Sans TC",sans-serif}.back-to-bank{margin-bottom:14px;color:var(--accent)}.practice-title-line h1{font-size:2.25rem}.practice-kicker{font-size:.875rem}.answer-editor textarea{font-size:1.0625rem;line-height:1.85;padding:18px}.part-jumps a{border-radius:22px;min-height:44px;background:#f3f9ff}.answer-question{border-left:0!important;border-radius:12px}.map-stage{border-radius:14px;border-color:var(--line)}.map-toolbar,.map-controls{gap:10px}.score-form{max-width:1120px}.score-field{border-radius:16px;padding:24px}.score-field input{border-color:var(--line)}.result-summary{background:white;color:var(--ink);border:1px solid var(--line);border-radius:16px}.result-summary :is(p,span,small){color:var(--muted)}.result-summary strong{color:var(--accent)}.dashboard-section,.dashboard-panel,.student-panel,.login-card,.reward-card,.summary-card,.leaderboard-card{border-radius:16px}.journal-page table{background:white}.journal-page th{background:#e6f2fc;color:var(--ink)}.site-footer{border-color:var(--line)}
@media(min-width:1200px){.journal-page[data-page=question] main,.journal-page[data-page=simulator] main{max-width:1440px}.study-grid,.app-grid{grid-template-columns:260px minmax(0,1fr);gap:28px}.practice-layout{gap:24px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:767px){.journal-page .practice-title-line h1{font-size:1.7rem}.question-paper,.answer-editor{padding:20px}.question-paper{max-height:none}.paper-part p,.paper-materials p{font-size:1rem}.journal-page :is(.study-header,.practice-top){padding:20px}.catalog-drawer{padding:0 16px}.journal-page[data-page=lessons] :is(.study-panel,.content-panel){padding:20px}.v23-workspace-tabs{top:0}.score-grid,.score-grid-topics{grid-template-columns:minmax(0,1fr)}.score-field{padding:20px}.result-summary{padding:24px;gap:16px}.journal-page .hero-stats{border:0;padding-left:0}.journal-page .hero-stats strong{font-size:1.4rem}}

/* Review fixes: visible reading headers, search, compact phone controls. */
.study-header,.practice-top{color:var(--ink)}.study-header :is(.overline,.study-meta),.practice-top :is(.overline,.practice-meta){color:var(--muted)}.study-header .paper-link{background:var(--accent);color:white;border-color:var(--accent)}.journal-page :is([data-setting].is-active,[data-setting][aria-pressed=true],.mode-switch .is-active){background:var(--accent);border-color:var(--accent);color:white}.bank-search-area .home-search{position:relative;margin:0}.home-search>svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}.bank-search-area input{padding-left:46px!important}.journal-page .question-card h3{max-width:14em}.bank-results .reset-button{min-height:44px}.journal-page .question-card-topline,.journal-page .study-card-meta{font-family:"Noto Sans TC",sans-serif}
@media(max-width:767px){.bank-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}.bank-heading h1{margin:0}.bank-heading #sourceNote{font-size:.875rem}.bank-hero{padding:0;margin-bottom:12px}.bank-toolbar{margin-bottom:8px;gap:8px}.bank-search-area{margin-top:0}.bank-search-area .home-search input{min-height:44px;padding-block:10px!important}.year-rail{margin-bottom:0}.bank-results .result-heading{margin-bottom:8px;min-height:44px}.bank-results .result-heading h2{font-size:.9rem}.journal-page[data-page=maps] .hero{margin-bottom:12px}.journal-page[data-page=maps] .hero h1{margin-top:0}.journal-page[data-page=maps] .hero .page-intro{display:none}.journal-page[data-page=maps] .practice-top{padding:16px;margin-bottom:12px}.journal-page[data-page=maps] .practice-top h2{font-size:1.25rem;line-height:1.4}.journal-page[data-page=maps] .practice-top .overline{font-size:.75rem;margin-bottom:4px}.journal-page[data-page=maps] .practice-meta{margin-bottom:0;font-size:.75rem}.journal-page[data-page=maps] .practice-settings{gap:8px}.journal-page[data-page=maps] .setting-group{flex:1 1 90px;min-width:0}.journal-page[data-page=maps] .setting-group>span{font-size:.8rem;margin-bottom:4px}.journal-page[data-page=maps] [data-setting]{padding:8px 9px;font-size:.8rem}.journal-page[data-page=maps] .session-bar{margin:12px 0}.journal-page[data-page=maps] .map-toolbar{gap:8px;margin-bottom:8px}.journal-page[data-page=maps] .map-toolbar strong{font-size:.875rem}}

.journal-page :is(.primary-button,.primary-action,.calculate-button,.primary-link):hover{color:#fff}

.journal-page .question-card-topline,.journal-page .study-card-meta{font-family:"Segoe UI","Noto Sans TC",sans-serif}@media(min-width:768px){.journal-page .question-card h3{max-width:13em}}

.journal-page .question-card h3{text-wrap:balance}

/* v2.8 durable draft controls */
.draft-save-actions{display:flex;gap:10px;flex-wrap:wrap}.draft-save-actions button{min-height:44px;padding:8px 12px;border:1px solid var(--line);background:white;color:var(--accent);border-radius:8px}.draft-save-actions button[hidden]{display:none}.draft-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%;margin:16px 0}.draft-compare label{min-width:0;display:grid;gap:8px}.draft-compare textarea{width:100%;min-width:0;padding:12px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:white;font:inherit}.draft-conflict{flex-wrap:wrap}.conflict-actions{display:flex;gap:12px;flex-wrap:wrap}.conflict-actions button{min-height:44px}@media(max-width:767px){.draft-compare{grid-template-columns:minmax(0,1fr)}}
.reward-rules { color: var(--muted); max-width: 72ch; margin-block: 16px 24px; line-height: 1.75; }
.reward-search { display: grid; gap: 8px; max-width: 30rem; margin-bottom: 20px; }
.journal-page .reward-callout { background: var(--soft); color: var(--ink); }
.reward-request-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.request-item > div { min-width: 0; overflow-wrap: anywhere; }
.reward-card h3, .admin-item h3 { overflow-wrap: anywhere; }
.reward-card p { line-height: 1.7; }
.reward-meta { flex-wrap: wrap; gap: 8px; }
.reward-import { margin-bottom: 24px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.reward-import summary { cursor: pointer; font-weight: 650; min-height: 44px; }
#rewardUploadForm { display: grid; gap: 16px; margin-top: 16px; max-width: 65ch; }
#rewardUploadResults { padding-inline-start: 20px; overflow-wrap: anywhere; }
#rewardUploadResults li { margin-bottom: 12px; }
.prize-controls input[type=number], #rewardFiles { min-width: 0; width: 100%; font-size: 1rem; }
.prize-controls > p { align-self: center; }
@media(max-width: 767px) { .request-item { flex-direction: column; align-items: flex-start; gap: 16px; } .reward-import { padding: 16px; } }