:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --text: #152238;
  --muted: #5d6c80;
  --line: #dce5f2;
  --primary: #1f7a5a;
  --secondary: #2f5ea8;
  --accent: #ff9b3f;
}

html:not([data-i18n-ready]) body {
  visibility: hidden;
}

/* Shared language control */
.language-toggle {
  position: fixed;
  z-index: 1200;
  bottom: max(14px, env(safe-area-inset-bottom));
  left: max(16px, env(safe-area-inset-left));
  min-width: 44px;
  min-height: 36px;
  border: 1px solid rgba(86, 107, 118, 0.3);
  border-radius: 6px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.88);
  color: #1f343f;
  box-shadow: 0 4px 18px rgba(20, 34, 43, 0.1);
  font: 700 0.78rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  cursor: pointer;
}

.language-toggle:hover,
.language-toggle:focus-visible {
  border-color: rgba(27, 94, 72, 0.58);
  background: #fff;
}

/* Authentication */
.student-ui.auth-page {
  min-height: 100vh;
  overflow-x: clip;
  background:
    radial-gradient(640px 420px at 12% 8%, rgba(160, 205, 162, 0.35), transparent 60%),
    radial-gradient(520px 520px at 88% 18%, rgba(222, 183, 213, 0.3), transparent 60%),
    radial-gradient(720px 520px at 70% 95%, rgba(169, 212, 229, 0.32), transparent 60%),
    radial-gradient(480px 380px at 30% 80%, rgba(246, 166, 179, 0.32), transparent 60%),
    #141716;
  background-attachment: fixed;
  color: #f4f6f5;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.student-ui.auth-page .language-toggle {
  top: max(14px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  bottom: auto;
  left: auto;
  border-color: rgba(255, 255, 255, 0.2);
  background: #1d2220;
  color: #f4f6f5;
  box-shadow: none;
}

.student-ui.auth-page .language-toggle:hover,
.student-ui.auth-page .language-toggle:focus-visible {
  border-color: rgba(112, 203, 159, 0.6);
  background: #252b28;
}

.auth-page-controls {
  position: fixed;
  z-index: 1190;
  top: max(14px, env(safe-area-inset-top));
  right: max(74px, calc(env(safe-area-inset-right) + 74px));
  display: flex;
  align-items: center;
}

.auth-page-controls .home-theme-toggle {
  display: inline-grid;
  width: 44px;
  min-height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 0;
  background: #1d2220;
  color: #f4f6f5;
  cursor: pointer;
}

.auth-page-controls .home-theme-icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.8;
}

.auth-page-controls .home-theme-icon--sun,
[data-theme="dark"] .auth-page-controls .home-theme-icon--moon {
  display: none;
}

[data-theme="dark"] .auth-page-controls .home-theme-icon--sun,
.auth-page-controls .home-theme-icon--moon {
  display: block;
}

.auth-page-controls .home-theme-toggle:hover,
.auth-page-controls .home-theme-toggle:focus-visible {
  border-color: rgba(112, 203, 159, 0.6);
  background: #252b28;
}

html:not([data-theme="dark"]) .student-ui.auth-page {
  background:
    radial-gradient(640px 420px at 12% 8%, rgba(109, 181, 129, 0.25), transparent 60%),
    radial-gradient(520px 520px at 88% 18%, rgba(207, 151, 194, 0.2), transparent 60%),
    radial-gradient(720px 520px at 70% 95%, rgba(124, 190, 218, 0.22), transparent 60%),
    radial-gradient(480px 380px at 30% 80%, rgba(234, 141, 157, 0.2), transparent 60%),
    #edf2ef;
  color: #18221d;
}

html:not([data-theme="dark"]) .auth-box {
  border-color: rgba(255, 255, 255, 0.8);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.45));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.4),
    0 28px 72px rgba(35, 55, 45, 0.16);
}

html:not([data-theme="dark"]) .student-ui.auth-page .auth-heading h1 {
  color: #16221c;
}

html:not([data-theme="dark"]) .auth-heading p,
html:not([data-theme="dark"]) .auth-account-email {
  color: #52625a;
}

html:not([data-theme="dark"]) .student-ui.auth-page .auth-provider-button {
  border-color: rgba(31, 73, 51, 0.14);
  background: rgba(255, 255, 255, 0.76);
  color: #17231d;
}

html:not([data-theme="dark"]) .student-ui.auth-page .auth-input {
  border-color: rgba(31, 73, 51, 0.18);
  background: rgba(255, 255, 255, 0.82);
  color: #17231d;
}

html:not([data-theme="dark"]) .student-ui.auth-page .auth-input::placeholder {
  color: #718079;
}

html:not([data-theme="dark"]) .auth-divider {
  color: #65756d;
}

html:not([data-theme="dark"]) .auth-divider::before,
html:not([data-theme="dark"]) .auth-divider::after {
  background: rgba(31, 73, 51, 0.16);
}

html:not([data-theme="dark"]) .student-ui.auth-page .language-toggle,
html:not([data-theme="dark"]) .auth-page-controls .home-theme-toggle {
  border-color: rgba(31, 73, 51, 0.2);
  background: rgba(255, 255, 255, 0.76);
  color: #1f343f;
}

.auth-layout {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 72px 24px 44px;
}

.auth-box {
  position: relative;
  isolation: isolate;
  width: min(100%, 520px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 42px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 28px 72px rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
}

.auth-box::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 34%, transparent 68%, rgba(128, 208, 166, 0.08));
  pointer-events: none;
  content: "";
}

.auth-brand {
  display: inline-block;
  margin-bottom: 42px;
  color: #80d0a6 !important;
  font-family: "Plus Jakarta Sans", "DM Sans", sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
}

.auth-heading {
  margin-bottom: 40px;
  text-align: center;
}

.student-ui.auth-page .auth-heading h1 {
  margin: 0;
  color: #f7f8f7;
  font-family: "Plus Jakarta Sans", "DM Sans", sans-serif;
  font-size: 3.4rem;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0;
}

.auth-heading p {
  max-width: 460px;
  margin: 22px auto 0;
  color: #bac2be;
  font-size: 1.08rem;
  line-height: 1.55;
  text-align: center;
}

.auth-step[hidden] {
  display: none;
}

.auth-step form {
  display: grid;
  gap: 14px;
}

.student-ui.auth-page .auth-provider-button,
.student-ui.auth-page .auth-submit-button,
.student-ui.auth-page .auth-input {
  width: 100%;
  min-height: 54px;
  border-radius: 16px;
  font-size: 1rem;
}

.student-ui.auth-page .auth-provider-button,
.student-ui.auth-page .auth-submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0 20px;
  background: #1b201e;
  color: #f5f7f6;
}

.student-ui.auth-page .auth-provider-button:hover,
.student-ui.auth-page .auth-provider-button:focus-visible {
  border-color: rgba(128, 208, 166, 0.48);
  background: #222925;
}

.student-ui.auth-page .auth-submit-button {
  border-color: #71c99c;
  background: #71c99c;
  color: #102018;
}

.student-ui.auth-page .auth-submit-button:hover,
.student-ui.auth-page .auth-submit-button:focus-visible {
  border-color: #8bd7b1;
  background: #8bd7b1;
}

.student-ui.auth-page .auth-input {
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0 18px;
  background: #0c0f0e;
  color: #f7f8f7;
  box-shadow: none;
}

.student-ui.auth-page .auth-input::placeholder {
  color: #7f8984;
}

.student-ui.auth-page .auth-input:hover,
.student-ui.auth-page .auth-input:focus {
  border-color: rgba(128, 208, 166, 0.62);
}

.student-ui.auth-page .auth-input[aria-invalid="true"] {
  border-color: #e3837c;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0;
  color: #929b96;
  font-size: 0.78rem;
}

.auth-divider::before,
.auth-divider::after {
  height: 1px;
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  content: "";
}

.auth-field-error,
.auth-status {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.auth-field-error,
.student-ui.auth-page .auth-status.bad {
  color: #f0a099;
}

.student-ui.auth-page .auth-status.good {
  color: #8bd7b1;
}

.auth-status {
  margin-top: 20px;
  text-align: center;
}

.auth-account-email {
  margin: 0 0 18px;
  color: #cbd1ce;
  text-align: center;
  overflow-wrap: anywhere;
}

.student-ui.auth-page .auth-otp-input {
  padding-right: 116px;
  text-align: center;
  letter-spacing: 0;
}

.auth-otp-field {
  position: relative;
}

.student-ui.auth-page .auth-otp-resend {
  position: absolute;
  top: 50%;
  right: 10px;
  max-width: 100px;
  min-height: 36px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 10px;
  padding: 6px 8px;
  background: rgba(113, 201, 156, 0.12);
  color: #8bd7b1;
  font-size: 0.78rem;
  line-height: 1.15;
  cursor: pointer;
}

.student-ui.auth-page .auth-otp-resend:hover:not(:disabled),
.student-ui.auth-page .auth-otp-resend:focus-visible:not(:disabled) {
  background: rgba(113, 201, 156, 0.22);
}

.student-ui.auth-page .auth-otp-resend:disabled {
  color: #89928d;
  cursor: default;
}

.student-ui.auth-page .auth-back-link {
  display: block;
  width: fit-content;
  min-height: 0;
  margin: 18px auto 0;
  border: 0;
  padding: 4px;
  background: transparent;
  color: #80d0a6;
}

.student-ui.auth-page .auth-back-link:hover,
.student-ui.auth-page .auth-back-link:focus-visible {
  color: #a3e2c2;
  text-decoration: underline;
}

.student-ui.auth-page .auth-back-button {
  width: 40px;
  min-height: 40px;
  margin: 0 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 0;
  background: transparent;
  color: #dbe0dd;
  font-size: 1.35rem;
}

.auth-secondary-action {
  margin: 22px 0 0;
  color: #aeb7b2;
  font-size: 0.92rem;
  text-align: center;
}

.student-ui.auth-page .auth-secondary-action button {
  min-height: 0;
  border: 1px solid rgba(128, 208, 166, 0.22);
  border-radius: 999px;
  padding: 9px 16px;
  background: rgba(128, 208, 166, 0.06);
  color: #80d0a6;
}

.student-ui.auth-page .auth-secondary-action button:hover,
.student-ui.auth-page .auth-secondary-action button:focus-visible {
  border-color: rgba(128, 208, 166, 0.48);
  background: rgba(128, 208, 166, 0.12);
}

.student-ui.auth-page button {
  min-height: 42px;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
}

.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;
}

@media (max-width: 560px) {
  .auth-layout {
    place-items: start center;
    padding: 84px 20px 32px;
  }

  .auth-brand {
    margin-bottom: 34px;
  }

  .auth-box {
    padding: 32px 24px;
  }

  .auth-heading {
    margin-bottom: 34px;
  }

  .auth-heading h1 {
    font-size: 2.35rem;
  }

  .student-ui.auth-page.admin-auth-page .auth-heading h1 {
    font-size: 2rem;
  }

  .auth-heading p {
    font-size: 1rem;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: radial-gradient(circle at 8% 8%, #e6f8ef 0%, var(--bg) 34%);
  color: var(--text);
}

.bg-shape {
  position: fixed;
  right: -140px;
  top: -120px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: linear-gradient(160deg, #fee4bf 0%, #f9c98f 100%);
  opacity: 0.35;
  z-index: -1;
}

.container {
  width: min(980px, 94vw);
  margin: 2rem auto;
  display: grid;
  gap: 1rem;
}

.container > * {
  min-width: 0;
}

.card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(20, 34, 53, 0.08);
  padding: 1.1rem;
}

.hero h1 { margin: 0; }
.hero p { margin: 0.45rem 0 0; color: var(--muted); }

.form-card h2, .panel h2 { margin-top: 0; }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 0.8rem;
}

label {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.92rem;
}

select, input {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  font-size: 0.95rem;
}

.actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

button {
  border: none;
  border-radius: 10px;
  padding: 0.62rem 1rem;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}

.data-table button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.data-table button {
  min-width: 4.5rem;
  padding: 0.45rem 0.7rem;
}

.btn-primary { background: var(--primary); }
.btn-secondary { background: var(--secondary); }
.btn-danger { background: #b3362d; }

.tip {
  margin-top: 0.7rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.panel { margin-top: 1rem; }

.admin-import-section {
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}

.admin-import-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.admin-import-section h3,
.admin-import-section h4 {
  margin: 0 0 0.75rem;
}

.admin-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.admin-section-heading h3 {
  margin: 0;
}

.admin-import-progress {
  width: 100%;
  height: 0.85rem;
  margin-top: 0.85rem;
  accent-color: var(--primary);
}

.admin-import-summary {
  grid-template-columns: repeat(5, minmax(100px, 1fr));
  margin-bottom: 1rem;
}

.admin-import-stat-value {
  font-size: 1.15rem;
  overflow-wrap: anywhere;
}

.admin-import-table {
  min-width: 680px;
}

.admin-import-issues {
  margin: 0;
  padding-left: 1.25rem;
  color: #9b2c2c;
}

.admin-import-issues li + li {
  margin-top: 0.35rem;
}

.admin-import-status-validated,
.admin-import-status-published {
  color: #176346;
  background: #e6f5ed;
}

.admin-import-status-failed {
  color: #8e2721;
  background: #fbeae8;
}

.admin-hint-filters {
  max-width: 220px;
  margin: 0.85rem 0;
}

.admin-hint-list {
  display: grid;
  gap: 1rem;
}

.admin-hint-card {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.admin-hint-card > header,
.admin-hint-card > header > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.admin-hint-question {
  display: grid;
  grid-template-columns: minmax(180px, 360px) minmax(0, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.admin-hint-question img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  border: 1px solid var(--line);
  background: #fff;
}

.admin-hint-question p,
.admin-hint-question ol,
.admin-hint-steps {
  margin-top: 0;
}

.admin-hint-steps {
  padding: 0.85rem 0.85rem 0.85rem 2.25rem;
  border-left: 3px solid #16865b;
  background: #f1faf6;
}

.admin-hint-steps li + li {
  margin-top: 0.6rem;
}

.admin-setting-row,
.admin-data-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.admin-setting-row p {
  margin: 0.25rem 0 0;
}

.admin-switch,
.admin-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: max-content;
}

.admin-switch input,
.admin-inline-check input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--primary);
}

.admin-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.45rem;
  min-width: 18rem;
}

.admin-action-grid:empty {
  display: none;
}

.admin-action-grid button {
  width: 100%;
  min-height: 2.25rem;
  margin: 0;
  white-space: normal;
}

.admin-action-table th:last-child,
.admin-action-table td:last-child {
  min-width: 19rem;
  width: 30%;
}

.admin-cell-wrap {
  min-width: 14rem;
  max-width: 28rem;
  overflow-wrap: anywhere;
  white-space: normal;
}

.admin-detail-dialog {
  width: min(1100px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 1.25rem;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--text, #172033);
}

.admin-detail-dialog::backdrop {
  background: rgba(20, 31, 45, 0.58);
}

.admin-detail-dialog h3 {
  margin: 1.25rem 0 0.6rem;
}

.admin-detail-dialog .data-table {
  min-width: 720px;
}

@media (max-width: 760px) {
  .admin-hint-question {
    grid-template-columns: 1fr;
  }

  .admin-hint-card > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-setting-row,
  .admin-data-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-switch,
  .admin-inline-check,
  .admin-action-grid {
    min-width: 0;
    width: 100%;
  }

  .admin-action-grid {
    grid-template-columns: 1fr;
  }
}

.account-collapsible > summary {
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 700;
  color: #244779;
  list-style: none;
}

.account-collapsible > summary::-webkit-details-marker {
  display: none;
}

.account-collapsible > summary::before {
  content: "▶ ";
  color: #2f5ea8;
}

.account-collapsible[open] > summary::before {
  content: "▼ ";
}

.account-collapsible[open] > summary {
  margin-bottom: 0.5rem;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.5rem;
}

.tag {
  font-size: 0.82rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: #edf3ff;
  color: #2e4f80;
}

.question {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.8rem;
  margin-bottom: 0.6rem;
}

.question h4 {
  margin: 0 0 0.4rem;
  font-size: 0.96rem;
}

.notebook-question {
  padding: 0;
  overflow: hidden;
}

.notebook-question > summary {
  min-height: 52px;
  padding: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
  color: #244779;
  font-weight: 700;
}

.notebook-question > summary::-webkit-details-marker {
  display: none;
}

.notebook-question > summary::after {
  content: "\203A";
  flex: 0 0 auto;
  color: #2f5ea8;
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 0.15s ease;
}

.notebook-question[open] > summary {
  border-bottom: 1px solid var(--line);
}

.notebook-question[open] > summary::after {
  transform: rotate(90deg);
}

.notebook-question > summary:focus-visible {
  outline: 3px solid rgba(47, 94, 168, 0.25);
  outline-offset: -3px;
}

.notebook-question-content {
  padding: 0.8rem;
}

.notebook-question-content > :first-child {
  margin-top: 0;
}

.notebook-pagination {
  justify-content: center;
  margin-top: 1rem;
}

.notebook-page-progress {
  color: var(--muted);
  font-size: 0.9rem;
}

.question-title-row,
.review-question-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.question-star-btn {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #cbd5e5;
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  font-size: 1.5rem;
  line-height: 1;
}

.question-star-btn.is-starred {
  border-color: #d99b13;
  background: #fff8dc;
  color: #b77900;
}

.review-star {
  color: #b77900;
  font-size: 1.35rem;
  line-height: 1;
}

.review-question-image {
  margin: 0.5rem 0 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0.5rem;
}

.review-question-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 720px;
  object-fit: contain;
}

.review-question-answers {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.review-question-answers > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  padding: 0.65rem 0.75rem;
}

.review-question-answers span {
  color: var(--muted);
}

.review-question-answers strong {
  font-size: 1.15rem;
}

.question-images-wrap {
  margin-top: 0.6rem;
  display: grid;
  gap: 0.5rem;
}

.question-image {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(180deg, #fbfdff 0%, #f1f6ff 100%);
  padding: 0.35rem;
  overflow: hidden;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.question-image.has-ratio {
  min-height: 0;
  aspect-ratio: var(--question-image-ratio);
}

.question-image img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  max-height: 100%;
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
}

.question-image-zoom {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
}

.question-image-zoom:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

.question-image-dialog {
  width: min(1200px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  border: 0;
  border-radius: 10px;
  padding: 0;
  background: var(--card);
  color: var(--text);
}

.question-image-dialog::backdrop {
  background: rgba(0, 0, 0, 0.72);
}

.question-image-dialog__shell {
  padding: 1rem;
}

.question-image-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.question-image-dialog__header h2 {
  margin: 0;
  font-size: 1.15rem;
}

.question-image-dialog__header .profile-dialog__close {
  flex: 0 0 auto;
}

.question-image-dialog__toolbar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}

.question-image-dialog__toolbar button,
.question-image-dialog__open {
  min-width: 2.35rem;
  min-height: 2.25rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.35rem 0.65rem;
  background: var(--surface-raised, #f5f7fa);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.question-image-dialog__toolbar button:hover,
.question-image-dialog__open:hover {
  background: var(--surface-pressed, #e8edf3);
}

.question-image-dialog__open {
  margin-left: auto;
  font-size: 0.9rem;
  font-weight: 600;
}

.question-image-dialog__viewport {
  max-height: calc(100vh - 10.5rem);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #17191d;
  padding: 0.75rem;
}

.question-image-dialog img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin: 0 auto;
  object-fit: contain;
}

.options-wrap {
  margin-top: 0.65rem;
  display: grid;
  gap: 0.45rem;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  padding: 0.45rem 0.55rem;
  color: #32445f;
}

/* No stylesheet targets input[type="radio"], so without this the option radios
   inherit the generic .site-ui input sizing (width:100%, min-height:48px,
   padding, rounded background) and paint as full-width pills with the option
   letter pushed to the far right. Specificity here is (0,2,1) against that
   rule's (0,1,1), so no !important is needed. */
.option-item input {
  margin: 0;
}

.option-item input[type="radio"] {
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  box-shadow: none;
  background: none;
  flex-shrink: 0;
  cursor: pointer;
}

.option-item > span {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.bad {
  color: #b3362d;
  font-weight: 700;
}

.good {
  color: #17704e;
  font-weight: 700;
}

.bar-wrap {
  display: grid;
  gap: 0.4rem;
}

.bar {
  height: 26px;
  border-radius: 8px;
  background: #eef2f9;
  overflow: hidden;
  position: relative;
}

.bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, #3d6ed1, #6da3ff);
}

.bar > em {
  position: absolute;
  right: 8px;
  top: 3px;
  font-style: normal;
  font-size: 0.8rem;
  color: #1c2e4a;
}

@media (max-width: 760px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* Curriculum mapping review */
.curriculum-review-page {
  background: #f4f5f7;
}

.curriculum-review-toolbar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.curriculum-review-toolbar label {
  min-width: 180px;
}

.curriculum-mapping-list {
  display: grid;
  gap: 1rem;
}

.curriculum-review-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1rem 0 2rem;
}

.curriculum-review-pagination span {
  min-width: 150px;
  text-align: center;
  color: #526165;
  font-weight: 700;
}

.curriculum-mapping-item {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr);
  gap: 1rem;
  border: 1px solid #d7dddf;
  border-radius: 8px;
  padding: 1rem;
  background: #fff;
}

.curriculum-mapping-source,
.curriculum-mapping-controls {
  min-width: 0;
}

.curriculum-mapping-id {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid #e2e6e7;
  padding-bottom: 0.55rem;
}

.curriculum-mapping-id span {
  color: #667276;
  font-size: 0.82rem;
}

.curriculum-mapping-source > p {
  white-space: pre-wrap;
  line-height: 1.5;
}

.curriculum-mapping-image {
  min-height: 240px;
  margin: 0.75rem 0 0;
  display: grid;
  place-items: center;
  border: 1px solid #e0e4e5;
  background: #f8faf9;
}

.curriculum-mapping-image img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
}

.curriculum-mapping-controls {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  border-left: 1px solid #e0e5e5;
  padding-left: 1rem;
}

.curriculum-mapping-controls label {
  display: grid;
  gap: 0.35rem;
}

.curriculum-mapping-controls select {
  width: 100%;
}

.curriculum-mapping-controls .mapping-primary-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.mapping-primary-toggle input {
  width: auto;
  margin: 0;
}

@media (max-width: 820px) {
  .curriculum-mapping-item {
    grid-template-columns: 1fr;
  }

  .curriculum-mapping-controls {
    border-top: 1px solid #e0e5e5;
    border-left: 0;
    padding-top: 1rem;
    padding-left: 0;
  }

  .curriculum-mapping-id {
    align-items: flex-start;
    flex-direction: column;
  }

  .curriculum-review-toolbar > * {
    flex: 1 1 180px;
  }

  .curriculum-review-pagination {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .curriculum-review-pagination span {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 0.7rem;
}

.stat-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.8rem;
  background: #f8fbff;
}

.stat-label {
  font-size: 0.85rem;
  color: var(--muted);
}

.stat-value {
  margin-top: 0.25rem;
  font-size: 1.45rem;
  font-weight: 800;
  color: #1e3f74;
}

.review-answer-overview {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 1rem;
  align-items: start;
}

.review-answer-table-card,
.review-chart-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfcff 0%, #f4f8ff 100%);
  padding: 0.9rem;
}

.review-answer-table-card h3,
.review-chart-card h3 {
  margin: 0 0 0.8rem;
  color: #27446f;
  font-size: 1.02rem;
}

.answer-status-table {
  min-width: 100%;
}

.answer-status-table th,
.answer-status-table td {
  text-align: center;
}

.answer-status-table td:nth-child(1) {
  width: 68px;
}

.tip-text {
  color: var(--muted);
  font-weight: 700;
}

.review-chart-card {
  min-height: 100%;
  display: grid;
  align-content: start;
  justify-items: center;
}

.review-pie-wrap {
  width: 100%;
  display: grid;
  place-items: center;
  padding: 0.35rem 0 0.8rem;
}

.review-pie-chart {
  width: min(280px, 72vw);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(58, 79, 112, 0.06);
}

.review-chart-legend {
  width: min(320px, 100%);
  display: grid;
  gap: 0.55rem;
}

.review-legend-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 0.55rem;
  color: #2e4363;
  font-size: 0.94rem;
}

.review-legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: inline-block;
}

.review-legend-dot.is-correct {
  background: #19b7a6;
}

.review-legend-dot.is-wrong {
  background: #ff6b73;
}

.review-legend-dot.is-unanswered {
  background: #c9cfde;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 840px;
  font-size: 0.9rem;
}

.data-table th,
.data-table td {
  border-bottom: 1px solid var(--line);
  padding: 0.55rem 0.6rem;
  text-align: left;
  vertical-align: top;
}

.data-table th {
  background: #f1f6ff;
  color: #2b4978;
  font-weight: 700;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.mono {
  font-family: "Consolas", "SFMono-Regular", "Menlo", monospace;
  font-size: 0.82rem;
}

@media (max-width: 760px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

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

  .review-pie-chart {
    width: min(240px, 68vw);
  }

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

  .admin-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

.text-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.text-modal.open {
  display: block;
}

.text-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 27, 45, 0.5);
}

.text-modal-card {
  position: relative;
  width: min(840px, 92vw);
  max-height: 80vh;
  margin: 7vh auto 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 20px 55px rgba(10, 26, 46, 0.25);
  display: grid;
  grid-template-rows: auto 1fr;
}

.text-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 0.8rem 0.95rem;
}

.text-modal-header h3 {
  margin: 0;
  font-size: 1rem;
  color: #1f365d;
}

.text-modal-close {
  background: #2f5ea8;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
}

.text-modal-body {
  margin: 0;
  padding: 0.9rem 1rem 1rem;
  overflow: auto;
  white-space: pre-wrap;
  line-height: 1.55;
  color: #22354f;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.question-body-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 0.8rem;
  align-items: start;
}

.question-side {
  position: sticky;
  top: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 0.65rem;
}

.question-side-title {
  font-size: 0.9rem;
  color: #2a4b7a;
  font-weight: 700;
  margin-bottom: 0.55rem;
}

.question-jump-panel {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
}

.jump-btn {
  position: relative;
  border: 1px solid var(--line);
  background: #f3f7ff;
  color: #2c4672;
  border-radius: 8px;
  padding: 0.35rem 0;
  cursor: pointer;
  font-size: 0.85rem;
}

.jump-btn.active {
  background: #2053a5;
  color: #fff;
  border-color: #2f5ea8;
}

.jump-btn.answered {
  border-color: #1f7a5a;
  box-shadow: inset 0 0 0 1px rgba(31, 122, 90, 0.25);
}

.jump-btn.answered::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1f7a5a;
}

.jump-btn.active.answered::after {
  background: #fff;
}

.jump-btn.starred::before {
  content: "★";
  position: absolute;
  top: 1px;
  left: 3px;
  color: #b77900;
  font-size: 0.62rem;
}

.jump-btn.active.starred::before {
  color: #ffe07a;
}

@media (max-width: 620px) {
  .review-question-answers {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .question-body-layout {
    grid-template-columns: 1fr;
  }

  .question-side {
    position: static;
  }

  .question-jump-panel {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

.text-toggle-row {
  margin: 0.15rem 0 0.45rem;
  display: flex;
  justify-content: flex-start;
}

.text-view-box {
  margin-top: 0.45rem;
  border: 1px dashed #b9c9e4;
  border-radius: 10px;
  background: #f9fbff;
  padding: 0.65rem 0.75rem;
  color: #2c4263;
  line-height: 1.5;
}

.hidden-panel {
  display: none;
}

.mode-landing {
  padding: 2rem 2rem 1.3rem;
  border-radius: 28px;
  background:
    radial-gradient(circle at top center, rgba(102, 127, 234, 0.08) 0%, rgba(102, 127, 234, 0) 32%),
    linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  box-shadow: 0 24px 60px rgba(30, 44, 76, 0.12);
}

.stageo-hero-art {
  position: relative;
  width: min(420px, 88vw);
  height: 280px;
  margin: 0 auto 1.2rem;
}

.stageo-blob {
  position: absolute;
  inset: 10px 20px 24px;
  border-radius: 40% 44% 38% 42%;
  background: linear-gradient(180deg, #dbe4ff 0%, #cad6fb 100%);
}

.stageo-desk {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 14px;
  height: 13px;
  border-radius: 999px;
  background: #52518b;
}

.stageo-book-stack {
  position: absolute;
  right: 24px;
  bottom: 26px;
  width: 82px;
  display: grid;
  gap: 5px;
}

.stageo-book-stack span {
  display: block;
  height: 11px;
  border-radius: 4px;
}

.stageo-book-stack span:nth-child(1) { background: #49b06f; }
.stageo-book-stack span:nth-child(2) { background: #6f8ae8; }
.stageo-book-stack span:nth-child(3) { background: #f08ab0; }

.stageo-mug {
  position: absolute;
  right: 74px;
  bottom: 44px;
  width: 24px;
  height: 28px;
  border-radius: 4px 4px 7px 7px;
  background: #6f7fd9;
}

.stageo-mug::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 7px;
  width: 8px;
  height: 9px;
  border: 2px solid #6f7fd9;
  border-left: none;
  border-radius: 0 8px 8px 0;
}

.stageo-character {
  position: absolute;
  inset: 0;
}

.stageo-hair {
  position: absolute;
  left: 184px;
  top: 54px;
  width: 108px;
  height: 116px;
  border-radius: 44% 44% 36% 38%;
  background: #0f3158;
}

.stageo-head {
  position: absolute;
  left: 208px;
  top: 88px;
  width: 48px;
  height: 56px;
  border-radius: 44% 44% 40% 40%;
  background: #ff8a5c;
}

.stageo-head::before,
.stageo-head::after {
  content: "";
  position: absolute;
  top: 22px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #18263c;
}

.stageo-head::before { left: 11px; }
.stageo-head::after { right: 11px; }

.stageo-body {
  position: absolute;
  left: 196px;
  top: 136px;
  width: 92px;
  height: 86px;
  border-radius: 30px 30px 20px 20px;
  background: linear-gradient(135deg, #ef2f68 0%, #c92758 100%);
}

.stageo-arm {
  position: absolute;
  height: 16px;
  border-radius: 999px;
  background: #ff8a5c;
  transform-origin: left center;
}

.stageo-arm-left {
  left: 145px;
  top: 160px;
  width: 84px;
  transform: rotate(-12deg);
}

.stageo-arm-right {
  left: 230px;
  top: 176px;
  width: 72px;
  transform: rotate(35deg);
}

.stageo-book {
  position: absolute;
  left: 162px;
  top: 162px;
  width: 96px;
  height: 60px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fff0f5 0%, #f8b0c7 100%);
  transform: rotate(-10deg);
  box-shadow: 0 12px 24px rgba(215, 71, 122, 0.18);
}

.stageo-book::before,
.stageo-book::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: rgba(239, 47, 104, 0.35);
}

.stageo-book::before {
  left: 18px;
  top: 24px;
  width: 14px;
  height: 14px;
}

.stageo-book::after {
  left: 34px;
  top: 18px;
  width: 20px;
  height: 20px;
}

.mode-landing-copy {
  width: min(100%, 1190px);
  margin: 0 auto;
}

.mode-landing-copy h1 {
  margin: 0 0 1.4rem;
  text-align: center;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: #24283a;
  letter-spacing: -0.03em;
}

.mode-summary-list {
  display: grid;
  gap: 0.95rem;
  margin-bottom: 1.7rem;
  color: #9aa4ad;
}

.mode-summary-row {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 0.7rem;
  align-items: baseline;
  font-size: 1rem;
}

.mode-summary-label {
  font-weight: 800;
}

.mode-choice-block {
  margin-top: 0.3rem;
}

.mode-choice-title {
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: #2c3042;
}

/*
 * 试卷模式选择区的基础布局
 * ----------------------
 * 这个文件只负责“控件放在哪里、占多大空间”，例如两列排列、内部间距和
 * 单选圆点的位置。flat（平）、raised（凸）、inset（凹）的最终外观放在
 * site-design.css 中，因为那里会同时处理亮色和暗色主题。
 *
 * 页面加载顺序是 styles.css -> site-design.css。这里保留的颜色是未加载
 * 主题时的回退值；正常的 .site-ui 页面会被 site-design.css 覆盖。以后
 * 如果只想调整阴影或选中状态，请去修改 site-design.css。
 */
.mode-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.mode-option-card {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0.95rem;
  align-items: start;
  padding: 1.2rem 1.25rem;
  border: 1.5px solid #d6ddeb;
  border-radius: 20px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

/* hover 的最终“凸起”效果由 site-design.css 覆盖；这里是无主题时的回退。 */
.mode-option-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(47, 94, 168, 0.08);
}

.mode-option-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mode-option-radio {
  width: 24px;
  height: 24px;
  border: 2px solid #6e7687;
  border-radius: 50%;
  margin-top: 0.1rem;
  position: relative;
}

.mode-option-copy {
  display: grid;
  gap: 0.45rem;
}

.mode-option-copy strong {
  font-size: 1rem;
  color: #2a2f3d;
}

.mode-option-copy small {
  font-size: 0.94rem;
  line-height: 1.5;
  color: #4c556a;
}

/*
 * JavaScript 会给当前模式添加 .selected。site-design.css 再利用这个类
 * 把当前选项显示为“凹”，不需要额外编写 JavaScript 来控制阴影。
 */
.mode-option-card.selected {
  border-color: #2d57de;
  box-shadow: 0 0 0 3px rgba(45, 87, 222, 0.07);
}

.mode-option-card.selected .mode-option-radio {
  border-color: #2d57de;
}

.mode-option-card.selected .mode-option-radio::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #2d57de;
}

.mode-landing-actions {
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

.mode-btn-primary,
.mode-btn-secondary {
  border: 1px solid #d6ddeb;
  border-radius: 14px;
  padding: 0.95rem 1rem;
  font-size: 1rem;
  font-weight: 800;
}

.mode-btn-primary {
  background: #2d57de;
  color: #fff;
}

.mode-btn-secondary {
  background: #fff;
  color: #2a2f3d;
}

/*
 * 试卷选择列表的基础布局
 * --------------------
 * .paper-set-item 是一行静态资料，真正执行操作的是行内的开始或重做按钮。
 * 因此列表行本身不应伪装成可点击的凸按钮；它的 flat 外观由
 * site-design.css 统一设置。这里仅保留网格列、间距和移动端换行规则。
 */
.paper-picker {
  padding: 0;
  overflow: hidden;
  border-radius: 24px;
}

.paper-picker-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.35rem 1.35rem 0.7rem;
}

.paper-picker-head h1 {
  margin: 0;
  font-size: 1.55rem;
  color: #1e2740;
}

.paper-picker-head .tip {
  margin-top: 0.35rem;
}

.paper-picker-actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.paper-filter-bar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.35rem 1rem;
  border-top: 1px solid #e3e8f2;
  background: #f7f9fc;
}

.paper-filter-bar label {
  width: min(220px, 100%);
  color: #34445f;
  font-weight: 700;
}

.paper-filter-bar select {
  min-height: 42px;
  background: #fff;
}

.paper-filter-count {
  margin: 0 0 0.65rem;
  color: #5d6c80;
  font-size: 0.9rem;
}

.paper-set-list {
  display: grid;
}

.paper-set-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1.25rem 1.35rem;
  border-top: 1px solid #e3e8f2;
  background: #fff;
}

.paper-set-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  font-weight: 800;
}

.paper-set-icon.done {
  background: #c6f4bf;
  color: #137629;
}

.paper-set-icon.idle {
  background: #d5e8ff;
  color: #2356d7;
}

.paper-set-main {
  min-width: 0;
}

.paper-set-title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 800;
  color: #16233b;
  line-height: 1.35;
}

.paper-set-meta {
  margin-top: 0.22rem;
  color: #34445f;
  font-size: 0.98rem;
}

.paper-set-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.paper-set-history {
  color: #2651db;
  font-size: 0.98rem;
  font-weight: 700;
  text-decoration: none;
}

.paper-set-btn {
  border-radius: 12px;
  padding: 0.9rem 1.35rem;
  font-size: 0.98rem;
  font-weight: 800;
}

.paper-set-btn.start {
  background: #2957df;
  color: #fff;
}

.paper-set-btn.retry {
  background: #24822f;
  color: #fff;
}

@media (max-width: 760px) {
  .mode-landing {
    padding: 1.35rem 1rem 1rem;
  }

  .stageo-hero-art {
    height: 220px;
  }

  .mode-summary-row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .mode-option-grid,
  .mode-landing-actions {
    grid-template-columns: 1fr;
  }

  .paper-picker-head,
  .paper-set-item {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .paper-picker-head {
    flex-direction: column;
  }

  .paper-filter-bar {
    align-items: stretch;
    flex-direction: column;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .paper-filter-count {
    margin: 0;
  }

  .paper-set-item {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .paper-set-actions {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

.btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 10px;
  padding: 0.58rem 0.9rem;
  background: var(--secondary);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.compact-actions {
  margin-top: 0.65rem;
  gap: 0.45rem;
}

.community-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 1rem;
  align-items: start;
}

.community-sidebar {
  display: grid;
  gap: 0.75rem;
  border-right: 1px solid var(--line);
  padding-right: 1rem;
}

.community-sidebar h2,
.community-main h2 {
  margin: 0;
}

.paper-reference-preview {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  padding: 0.65rem 0.7rem;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.inline-check {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 0.45rem;
}

.inline-check input {
  width: auto;
}

.community-main {
  min-width: 0;
  display: grid;
  gap: 0.9rem;
}

.community-toolbar,
.discussion-detail-head,
.discussion-thread-head,
.discussion-post-meta,
.moderation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.community-toolbar {
  flex-wrap: wrap;
}

.question-context {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fbff;
  padding: 0.75rem;
}

.question-context:empty {
  display: none;
}

.discussion-question-reference {
  position: relative;
  max-width: 820px;
  margin: 0 0 0.85rem;
  padding: 0;
}

.discussion-question-reference img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 680px;
  object-fit: contain;
  object-position: left top;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.discussion-question-reference figcaption {
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.discussion-question-menu {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
}

.discussion-question-menu summary {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
  list-style: none;
  box-shadow: 0 4px 14px rgba(24, 44, 76, 0.12);
}

.discussion-question-menu summary::-webkit-details-marker {
  display: none;
}

.discussion-question-menu-list {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  width: max-content;
  min-width: 180px;
  display: grid;
  padding: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(24, 44, 76, 0.16);
}

.discussion-question-menu-list a {
  padding: 0.6rem 0.7rem;
  border-radius: 6px;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

.discussion-question-menu-list a:hover {
  background: #eef4ff;
}

.discussion-list,
.discussion-posts {
  display: grid;
  gap: 0.7rem;
}

.discussion-thread,
.discussion-post {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfdff;
  padding: 0.85rem;
}

.discussion-thread.is-sticky {
  border-color: #f3bd72;
  background: #fffaf2;
}

.thread-title-button {
  padding: 0;
  background: transparent;
  color: var(--text);
  border-radius: 0;
  font-size: 1rem;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  background: #eef4ff;
  color: #244779;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.status-solved {
  background: #e5f8ef;
  color: #17704e;
}

.status-locked,
.status-hidden {
  background: #f7e8e6;
  color: #a6322b;
}

.discussion-detail-head {
  align-items: flex-start;
  margin-bottom: 0.9rem;
}

.discussion-detail-head h2 {
  margin: 0 0 0.4rem;
}

.discussion-post-meta {
  justify-content: flex-start;
  color: var(--muted);
  font-size: 0.9rem;
}

.discussion-post p {
  line-height: 1.58;
}

.markdown-body {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.58;
}

.markdown-body img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 520px;
  margin: 0.65rem 0;
  object-fit: contain;
}

.community-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.community-page-head > div {
  min-width: 0;
}

.community-page-head > button {
  flex: 0 0 auto;
}

.markdown-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.markdown-editor-head > span {
  font-weight: 700;
}

.editor-tool-toggle {
  min-height: 36px;
  padding: 0.4rem 0.7rem;
}

.markdown-editor-field {
  margin-top: 0.35rem;
}

.rich-editor-source[hidden] {
  display: none;
}

.rich-text-editor {
  min-height: 140px;
  max-height: 520px;
  overflow: auto;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.rich-text-editor:focus {
  border-color: #2455d6;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(36, 85, 214, 0.1);
}

.rich-text-editor[contenteditable="false"] {
  background: #f3f5f8;
  color: #667085;
}

.rich-text-editor img {
  cursor: default;
}

@media (max-width: 520px) {
  .community-page-head {
    align-items: stretch;
    flex-direction: column;
  }

  .community-page-head > button {
    align-self: flex-start;
  }
}

.rich-text-editor.is-empty::before {
  color: #7c879a;
  content: attr(data-placeholder);
  pointer-events: none;
}

.rich-text-editor a {
  color: #2455d6;
  text-decoration: underline;
}

.rich-editor-math {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  margin: 0 0.15rem;
  vertical-align: middle;
}

.rich-editor-math.is-display {
  display: flex;
  width: 100%;
  margin: 0.45rem 0;
  justify-content: center;
  overflow-x: auto;
}

.rich-editor-math math-field {
  display: inline-block;
  min-width: 1.8rem;
  max-width: 100%;
  padding: 0.12rem 4.2rem 0.12rem 0.25rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  font-size: 1.1em;
  --caret-color: #2455d6;
  --selection-background-color: #d8e6ff;
  --contains-highlight-background-color: #edf3ff;
}

.rich-editor-math math-field:focus-within {
  border-color: #2455d6;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(36, 85, 214, 0.1);
}

.rich-editor-math math-field::part(menu-toggle),
.rich-editor-math math-field::part(virtual-keyboard-toggle) {
  display: none;
}

.rich-editor-math-actions {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.rich-editor-math.is-active .rich-editor-math-actions {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.rich-editor-math-action,
.rich-editor-math-menu summary {
  display: grid;
  width: 26px;
  height: 26px;
  min-height: 26px;
  place-items: center;
  padding: 0;
  border: 1px solid #c8d0dd;
  border-radius: 4px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  list-style: none;
}

.rich-editor-math-action:hover,
.rich-editor-math-action:focus-visible,
.rich-editor-math-menu summary:hover,
.rich-editor-math-menu summary:focus-visible {
  border-color: #5e83dc;
  background: #edf3ff;
  outline: 0;
}

.rich-editor-math-menu summary::-webkit-details-marker {
  display: none;
}

.rich-editor-math-menu-list {
  position: fixed;
  z-index: 100;
  display: grid;
  width: max-content;
  min-width: 142px;
  padding: 0.3rem;
  border: 1px solid #c8d0dd;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(27, 38, 59, 0.16);
}

.rich-editor-math-menu-list button {
  min-height: 34px;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.rich-editor-math-menu-list button:hover,
.rich-editor-math-menu-list button:focus-visible,
.rich-editor-math-menu-list button.is-active {
  background: #edf3ff;
  outline: 0;
}

.rich-editor-math-menu-list button.is-active::before {
  content: "✓";
  display: inline-block;
  width: 1.2rem;
  color: #2455d6;
  font-weight: 800;
}

.rich-editor-math-menu-list button:not(.is-active)::before {
  content: "";
  display: inline-block;
  width: 1.2rem;
}

.markdown-body .katex-display {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.2rem 0;
}

.math-input-panel {
  margin-top: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  padding: 0.8rem;
}

.math-input-panel[hidden] {
  display: none;
}

.math-input-head,
.math-input-footer,
.math-edit-controls {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.math-input-head,
.math-input-footer {
  justify-content: space-between;
}

.math-input-head h3 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0;
}

.math-input-head .tip {
  margin: 0.2rem 0 0;
}

.math-keyboard-tabs {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.7rem;
  padding-bottom: 0.15rem;
  overflow-x: auto;
}

.math-keyboard-tab {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.math-keyboard-tab.is-active {
  border-color: #2455d6;
  background: #e9f0ff;
  color: #173f9f;
}

.math-keyboard-keys {
  display: grid;
  grid-template-columns: repeat(8, minmax(54px, 1fr));
  gap: 0.45rem;
  margin-top: 0.6rem;
}

.math-key {
  min-width: 0;
  height: 44px;
  padding: 0.3rem;
  border: 1px solid #ced7e5;
  border-radius: 7px;
  background: #fff;
  color: #1d2b46;
  font-family: "Cambria Math", "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 700;
  overflow: hidden;
}

.math-key:hover,
.math-key:focus-visible {
  border-color: #5e83dc;
  background: #edf3ff;
}

.math-input-footer {
  flex-wrap: wrap;
  margin-top: 0.7rem;
}

.math-icon-btn {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 7px;
  font-size: 1rem;
  line-height: 1;
}

.formatting-toolbar {
  position: fixed;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem;
  border: 1px solid #c8d0dd;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(27, 38, 59, 0.16);
}

.formatting-toolbar[hidden] {
  display: none;
}

.formatting-toolbar button {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
}

.formatting-toolbar button:hover,
.formatting-toolbar button:focus-visible,
.formatting-toolbar button.is-active {
  background: #edf3ff;
  outline: 0;
}

.formatting-toolbar button.is-active {
  color: #173f9f;
  box-shadow: inset 0 0 0 1px #8eaae9;
}

.formatting-toolbar .formatting-link-button {
  width: auto;
  padding: 0 0.55rem;
}

@media (max-width: 760px) {
  .math-keyboard-keys {
    grid-template-columns: repeat(4, minmax(52px, 1fr));
  }

  .math-input-head,
  .math-input-footer {
    align-items: stretch;
  }

  .math-input-footer {
    flex-direction: column;
  }

}

.markdown-body > :first-child {
  margin-top: 0;
}

.markdown-body > :last-child {
  margin-bottom: 0;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  margin: 1rem 0 0.45rem;
  letter-spacing: 0;
  line-height: 1.3;
}

.markdown-body h1 { font-size: 1.35rem; }
.markdown-body h2 { font-size: 1.2rem; }
.markdown-body h3,
.markdown-body h4 { font-size: 1.05rem; }

.markdown-body pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 0.75rem;
  border-radius: 6px;
  background: #172033;
  color: #f4f7fb;
}

.markdown-body code {
  padding: 0.12rem 0.3rem;
  border-radius: 4px;
  background: #eef1f6;
  font-size: 0.9em;
}

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

.markdown-body blockquote {
  margin-left: 0;
  padding-left: 0.8rem;
  border-left: 3px solid #8ea7d6;
  color: var(--muted);
}

.markdown-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.markdown-body th,
.markdown-body td {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
}

.answer-status-table tr.is-target-question td {
  background: #fff3c4;
  box-shadow: inset 0 1px #e2b93b, inset 0 -1px #e2b93b;
}

.moderation-row {
  justify-content: flex-start;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fbff;
  padding: 0.75rem;
  margin-bottom: 0.8rem;
}

.moderation-row label {
  min-width: 160px;
}

textarea {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.7rem;
  font: inherit;
  resize: vertical;
}

#mappingInput {
  width: 100%;
}

#jsonOutput {
  margin: 0;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fbff;
  white-space: pre-wrap;
}

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

  .community-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
    padding-bottom: 1rem;
  }

  .discussion-thread-head,
  .discussion-detail-head,
  .moderation-row {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Homepage course dashboard */
body.home-dashboard {
  min-height: 100vh;
  background: #f4f5f7;
  color: #17202d;
}

.home-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid #d9dde3;
  background: #fff;
}

.home-topbar__inner,
.home-main {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.home-topbar__inner {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.home-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: #17202d;
  font-size: 1.02rem;
  font-weight: 800;
  text-decoration: none;
}

.home-brand__mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #147d62;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 900;
}

.home-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.home-nav-button {
  min-height: 40px;
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  background: transparent;
  color: #273446;
  font-weight: 700;
}

.home-nav-button:hover,
.home-nav-button:focus-visible {
  background: #edf5f2;
  color: #0f654f;
}

.home-nav-button--logout {
  color: #a23932;
}

.home-nav-button--logout:hover,
.home-nav-button--logout:focus-visible {
  background: #fff0ee;
  color: #892d27;
}

.home-nav-button:focus-visible,
.course-card:focus-visible,
.home-brand:focus-visible,
.profile-dialog__close:focus-visible {
  outline: 3px solid rgba(31, 122, 90, 0.28);
  outline-offset: 2px;
}

.home-main {
  padding: 3rem 0 4rem;
}

.home-section-heading {
  margin-bottom: 1.75rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

.home-section-heading h1 {
  margin: 0;
  letter-spacing: 0;
}

.home-section-heading h1 {
  font-size: 3rem;
  line-height: 1.08;
}

.home-eyebrow {
  margin: 0 0 0.45rem;
  color: #147d62;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.home-admin-button {
  flex: 0 0 auto;
  border-radius: 6px;
}

.home-heading-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.65rem;
}

.home-pdf-download-button {
  border-radius: 6px;
}

.home-pdf-download-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.15rem;
}

.course-card {
  width: 100%;
  min-width: 0;
  min-height: 416px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #d9dde3;
  border-radius: 8px;
  padding: 1.35rem 1rem 1rem;
  overflow: hidden;
  background: #fff;
  color: #17202d;
  box-shadow: 0 4px 14px rgba(23, 32, 45, 0.06);
  text-align: left;
}

.course-card:hover,
.course-card:focus-visible {
  border-color: var(--book-accent, #147d62);
  box-shadow: 0 12px 26px rgba(23, 32, 45, 0.12);
}

.course-card--biology {
  --book: #19744f;
  --book-dark: #0e5137;
  --book-accent: #8dd6a8;
}

.course-card--chemistry {
  --book: #246fb5;
  --book-dark: #184d82;
  --book-accent: #8fc8ef;
}

.course-card--sciences {
  --book: #d29319;
  --book-dark: #98670c;
  --book-accent: #ffe18b;
}

.course-card--economics {
  --book: #bd4a41;
  --book-dark: #84332e;
  --book-accent: #f1aaa0;
}

.course-card--physics {
  --book: #3f6f9f;
  --book-dark: #274c72;
  --book-accent: #a8c9e8;
}

.course-card--default {
  --book: #586579;
  --book-dark: #394456;
  --book-accent: #bec6d1;
}

.home-more-subjects {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid #d9dde3;
}

.home-more-subjects__heading h2 {
  margin: 0 0 1.15rem;
  color: #273446;
  font-size: 1.25rem;
}

[data-theme="dark"] .home-more-subjects {
  border-top-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .home-more-subjects__heading h2 {
  color: #e8ecef;
}

/*
 * Biology 章节选择页的基础布局
 * --------------------------
 * 这里负责章节、统计数据和开始按钮的排列。视觉状态遵循同一规则：
 * 模式切换按钮未选时为平、鼠标经过时为凸、当前模式为凹；这些主题化
 * 规则写在 site-design.css。章节内容行本身只展示资料，不作为整行按钮。
 */
body.chapter-practice-page {
  min-height: 100vh;
  background: #f3f5f6;
  color: #17202d;
}

.chapter-practice-page [hidden] {
  display: none !important;
}

.chapter-topbar {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid #d9dde3;
  padding: 0 24px;
  background: #fff;
}

.chapter-topbar > .btn-secondary {
  border-radius: 6px;
}

.chapter-shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 2.5rem 0 4rem;
}

.chapter-heading,
.chapter-practice-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

.chapter-heading h1 {
  margin: 0;
  font-size: 2.65rem;
  letter-spacing: 0;
}

.chapter-mode-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(112px, 1fr));
  border: 1px solid #bdc7cc;
  border-radius: 6px;
  padding: 3px;
  background: #fff;
}

.chapter-mode-switch button {
  min-height: 42px;
  border-radius: 4px;
  background: transparent;
  color: #4e5a65;
}

.chapter-mode-switch button.is-active {
  background: #176e52;
  color: #fff;
}

.chapter-status {
  min-height: 1.5rem;
  margin: 1rem 0;
  color: #36554a;
}

.chapter-list {
  display: grid;
  gap: 1.25rem;
}

.chapter-band {
  border-top: 1px solid #cfd7d9;
  background: #fff;
}

.chapter-band__heading {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: #e9f3ee;
}

.chapter-band__heading h2,
.chapter-band__heading p {
  margin: 0;
  letter-spacing: 0;
}

.chapter-band__heading h2 {
  font-size: 1.25rem;
}

.chapter-band__heading p {
  margin-top: 0.15rem;
  color: #5e6d69;
  font-size: 0.88rem;
}

.chapter-number {
  width: 42px;
  height: 42px;
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 6px;
  background: #176e52;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
}

.chapter-section-list {
  display: grid;
}

.chapter-section-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(230px, 1.35fr) minmax(460px, 2fr) minmax(130px, auto);
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid #e1e5e6;
  padding: 1rem 1.25rem;
}

.chapter-section-row:last-child {
  border-bottom: 0;
}

.chapter-section-main {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.chapter-section-main strong,
.chapter-section-main span {
  overflow-wrap: anywhere;
}

.chapter-section-main span {
  color: #68747a;
  font-size: 0.84rem;
}

.chapter-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(72px, 1fr));
  gap: 0.35rem;
  margin: 0;
}

.chapter-metrics div {
  min-width: 0;
  border-left: 1px solid #dfe5e3;
  padding-left: 0.65rem;
}

.chapter-metrics dt {
  min-height: 2.25rem;
  color: #6b777c;
  font-size: 0.72rem;
  line-height: 1.25;
}

.chapter-metrics dd {
  margin: 0.25rem 0 0;
  color: #203c33;
  font-size: 1.05rem;
  font-weight: 800;
}

.chapter-start {
  width: 100%;
  min-width: 130px;
  border-radius: 6px;
}

.chapter-start:disabled {
  cursor: not-allowed;
  background: #c9cfcd;
  color: #58615e;
}

.chapter-practice-workspace {
  border-top: 1px solid #ccd4d5;
  background: #fff;
  padding: 1.35rem;
}

.chapter-practice-toolbar {
  padding-bottom: 1rem;
}

.chapter-practice-toolbar h2,
.chapter-practice-toolbar p {
  margin: 0;
  letter-spacing: 0;
}

.chapter-question-progress {
  border-top: 1px solid #e0e5e5;
  border-bottom: 1px solid #e0e5e5;
  padding: 0.7rem 0;
  color: #596769;
  font-weight: 700;
}

.chapter-question {
  min-height: 460px;
  padding: 1.25rem 0;
}

.chapter-question h3 {
  margin: 0.9rem 0;
  max-width: 900px;
  font-size: 1.08rem;
  line-height: 1.55;
  letter-spacing: 0;
}

.chapter-question-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chapter-question-meta span {
  border: 1px solid #d4ddda;
  border-radius: 4px;
  padding: 0.25rem 0.45rem;
  background: #eef5f2;
  color: #35564a;
  font-size: 0.78rem;
}

.chapter-question .options-wrap {
  max-width: 900px;
}

.chapter-question .option-item {
  min-height: 48px;
  border-radius: 6px;
}

.chapter-question .option-item.is-correct {
  border-color: #2f8c69;
  background: #e9f6f0;
}

.chapter-question .option-item.is-wrong {
  border-color: #c55c53;
  background: #fff0ee;
}

.chapter-hint-button {
  margin-top: 0.85rem;
}

.chapter-question-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  border-top: 1px solid #e0e5e5;
  padding-top: 1rem;
}

.chapter-question-actions #submitChapterPractice {
  margin-left: auto;
}

.chapter-result {
  margin-top: 1.25rem;
  border-top: 2px solid #176e52;
  padding-top: 1rem;
}

.chapter-result h3 {
  margin: 0 0 0.8rem;
}

.chapter-result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.chapter-result-grid div {
  display: grid;
  gap: 0.25rem;
  border-left: 3px solid #71ab94;
  padding: 0.65rem 0.8rem;
  background: #f1f7f4;
}

.chapter-result-grid span {
  color: #68746f;
  font-size: 0.82rem;
}

.chapter-result-grid strong {
  font-size: 1.35rem;
}

@media (max-width: 1040px) {
  .chapter-section-row {
    grid-template-columns: minmax(220px, 1fr) minmax(400px, 1.6fr);
  }

  .chapter-section-row .chapter-start {
    grid-column: 1 / -1;
    width: max-content;
  }
}

@media (max-width: 760px) {
  .chapter-topbar {
    padding: 0 14px;
  }

  .chapter-shell {
    width: min(100% - 24px, 1180px);
    padding-top: 1.5rem;
  }

  .chapter-heading,
  .chapter-practice-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .chapter-heading h1 {
    font-size: 2.1rem;
  }

  .chapter-mode-switch {
    width: 100%;
  }

  .chapter-band__heading {
    padding: 1rem;
  }

  .chapter-section-row {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

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

  .chapter-metrics div {
    min-height: 58px;
  }

  .chapter-section-row .chapter-start {
    width: 100%;
  }

  .chapter-practice-workspace {
    padding: 1rem;
  }

  .chapter-question {
    min-height: 360px;
  }

  .chapter-question-actions > button {
    flex: 1 1 120px;
  }

  .chapter-question-actions #submitChapterPractice {
    margin-left: 0;
    flex-basis: 100%;
  }

  .chapter-result-grid {
    grid-template-columns: 1fr;
  }
}

.subject-book {
  position: relative;
  width: 188px;
  height: 244px;
  flex: 0 0 244px;
  margin: 0 auto 1.15rem;
}

.subject-book__pages {
  position: absolute;
  top: 8px;
  right: 1px;
  width: 178px;
  height: 230px;
  border: 1px solid #c8c5b9;
  border-radius: 1px 5px 5px 1px;
  background: repeating-linear-gradient(to bottom, #fffef8 0, #fffef8 4px, #e5e0d3 5px);
  box-shadow: 7px 10px 16px rgba(31, 39, 50, 0.22);
}

.subject-book__cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 178px;
  height: 230px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--book-dark);
  border-radius: 3px 6px 6px 3px;
  padding: 22px 16px 18px 40px;
  overflow: hidden;
  background: linear-gradient(145deg, var(--book-accent) -55%, var(--book) 54%, var(--book-dark) 145%);
  color: #fff;
  box-shadow: inset -4px 0 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.subject-book__cover::before {
  content: "";
  position: absolute;
  right: -36px;
  bottom: 38px;
  width: 130px;
  height: 72px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  transform: rotate(-24deg);
}

.subject-book__spine {
  position: absolute;
  inset: 0 auto 0 0;
  width: 25px;
  border-right: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.13);
  box-shadow: inset -5px 0 8px rgba(0, 0, 0, 0.12);
}

.subject-book__level {
  font-size: 0.67rem;
  font-weight: 800;
  opacity: 0.82;
}

.subject-book__emblem {
  min-width: 54px;
  margin-top: 28px;
  padding-bottom: 6px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.68);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
}

.subject-book__name {
  width: 100%;
  margin-top: 13px;
  overflow-wrap: anywhere;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.15;
}

.subject-book__code {
  margin-top: auto;
  font-size: 0.65rem;
  font-weight: 800;
  opacity: 0.82;
}

.course-card__details {
  width: 100%;
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.course-card__title {
  overflow-wrap: anywhere;
  font-size: 1.05rem;
  line-height: 1.3;
}

.course-card__qualification,
.course-card__stats {
  color: #657181;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.45;
}

.course-card__qualification {
  margin-top: 0.3rem;
}

.course-card__stats {
  margin-top: 0.65rem;
}

.course-card__action {
  margin-top: auto;
  padding-top: 0.75rem;
  color: var(--book-dark);
  font-size: 0.83rem;
  font-weight: 800;
}

.course-card__action::after {
  content: " →";
}

.course-card--loading {
  min-height: 416px;
  cursor: default;
  background: #eef1f4;
}

.course-grid__empty {
  grid-column: 1 / -1;
  margin: 0;
  border: 1px dashed #c8ced7;
  border-radius: 8px;
  padding: 2rem;
  background: #fff;
  color: #657181;
  text-align: center;
}

.home-status {
  min-height: 1.35rem;
  margin: 0.85rem 0 0;
  color: #657181;
  font-size: 0.82rem;
}

.profile-dialog {
  width: min(720px, calc(100% - 32px));
  max-height: min(780px, calc(100vh - 32px));
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 24px 70px rgba(18, 27, 39, 0.28);
}

.profile-dialog::backdrop {
  background: rgba(20, 27, 37, 0.54);
}

.profile-dialog__shell {
  padding: 1.35rem;
}

.profile-dialog__header {
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.profile-dialog__header h2 {
  margin: 0;
  font-size: 1.35rem;
}

.profile-dialog__close {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  padding: 0;
  background: #edf0f3;
  color: #273446;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
}

.profile-dialog__divider {
  height: 1px;
  margin: 1.25rem 0;
  background: #d9dde3;
}

.profile-dialog button:not(.profile-dialog__close) {
  border-radius: 6px;
}

.pdf-download-dialog {
  width: min(560px, calc(100% - 32px));
}

.pdf-download-fields {
  display: grid;
  gap: 1rem;
}

.pdf-download-fields select {
  width: 100%;
  min-width: 0;
  border-radius: 6px;
  background: #fff;
}

.pdf-download-status {
  min-height: 1.35rem;
  margin: 0.85rem 0 0;
  color: #657181;
  font-size: 0.86rem;
}

.pdf-download-status[hidden] {
  display: none;
}

.pdf-download-actions {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.pdf-download-action {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 0.65rem 0.9rem;
  background: #1f7a5a;
  color: #fff;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.pdf-download-action--answer {
  background: #2f5ea8;
}

.pdf-download-action:hover,
.pdf-download-action:focus-visible {
  filter: brightness(0.92);
}

.pdf-download-action:focus-visible {
  outline: 3px solid rgba(31, 122, 90, 0.28);
  outline-offset: 2px;
}

.pdf-download-action.is-disabled {
  pointer-events: none;
  opacity: 0.5;
}

@media (max-width: 960px) {
  .course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .home-topbar__inner {
    width: min(100% - 24px, 1180px);
    padding: 0.7rem 0;
    display: grid;
    gap: 0.55rem;
  }

  .home-nav-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #e5e8ec;
    padding-top: 0.45rem;
  }

  .home-nav-button {
    min-width: 0;
    padding: 0.5rem 0.25rem;
    font-size: 0.82rem;
  }

  .home-main {
    width: min(100% - 24px, 1180px);
    padding: 2rem 0 3rem;
  }

  .home-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }

  .home-section-heading h1 {
    font-size: 2rem;
  }

  .home-heading-actions {
    width: 100%;
    display: flex;
  }

  .home-heading-actions button {
    flex: 1 1 12rem;
  }

  .course-grid {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .course-card {
    min-height: 0;
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    padding: 1rem;
  }

  .subject-book {
    width: 118px;
    height: 154px;
    margin: 0;
  }

  .subject-book__pages {
    top: 5px;
    width: 112px;
    height: 146px;
  }

  .subject-book__cover {
    width: 112px;
    height: 146px;
    padding: 13px 8px 11px 25px;
  }

  .subject-book__spine {
    width: 17px;
  }

  .subject-book__level {
    font-size: 0.48rem;
  }

  .subject-book__emblem {
    min-width: 38px;
    margin-top: 17px;
    padding-bottom: 4px;
    font-size: 0.95rem;
  }

  .subject-book__name {
    margin-top: 8px;
    font-size: 0.7rem;
  }

  .subject-book__code {
    font-size: 0.46rem;
  }

  .course-card__title {
    font-size: 1rem;
  }

  .course-card__action {
    margin-top: 0.6rem;
  }

  .course-card--loading {
    min-height: 186px;
    display: block;
  }

  .profile-dialog {
    max-height: calc(100vh - 16px);
  }

  .profile-dialog__shell {
    padding: 1rem;
  }

  .profile-dialog .grid-2 {
    grid-template-columns: 1fr;
  }

  .pdf-download-actions {
    grid-template-columns: 1fr;
  }
}

/* Timer display — make it stand out on the exam page */
#timerDisplay {
  display: inline-block;
  margin: 0.6rem 0;
  padding: 0.5rem 1rem;
  font-size: 1.7rem;
  font-weight: 800;
  color: #d94141;
  background: #fff4f4;
  border: 2px solid #f2b3b3;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 6px rgba(217, 65, 65, 0.12);
}

/* Timer pinned to top-right, always visible on scroll */
#timerDisplay {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 1000;
  margin: 0;
}
@media (max-width: 640px) {
  #timerDisplay {
    top: 10px;
    right: 10px;
    font-size: 1.2rem;
    padding: 0.35rem 0.7rem;
  }
}

/* ===== Timer polish: navy pill with pulse dot ===== */
#timerDisplay {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 1000;
  margin: 0;
  padding: 0.55rem 1.15rem 0.55rem 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;

  font-family: "SF Mono", "JetBrains Mono", "Cascadia Code", "Consolas", ui-monospace, monospace;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  background: linear-gradient(135deg, #1e3a5f 0%, #2c5b96 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow:
    0 10px 24px -8px rgba(30, 58, 95, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#timerDisplay:hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 28px -8px rgba(30, 58, 95, 0.5),
    0 3px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Pulsing red dot before the text — signals "timer running" */
#timerDisplay::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff6b6b;
  box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.55);
  animation: timerPulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes timerPulse {
  0%   { box-shadow: 0 0 0 0   rgba(255, 107, 107, 0.55); transform: scale(1);    }
  70%  { box-shadow: 0 0 0 9px rgba(255, 107, 107, 0);    transform: scale(1.05); }
  100% { box-shadow: 0 0 0 0   rgba(255, 107, 107, 0);    transform: scale(1);    }
}

@media (max-width: 640px) {
  #timerDisplay {
    top: 12px;
    right: 12px;
    font-size: 1.05rem;
    padding: 0.4rem 0.85rem 0.4rem 0.75rem;
    gap: 0.5rem;
  }
  #timerDisplay::before { width: 7px; height: 7px; }
}

/* Account-synced desktop pet */
.profile-pet-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(160px, 0.55fr);
  gap: 16px;
  align-items: end;
}

.profile-pet-settings h3,
.profile-pet-settings p {
  margin: 0;
}

.profile-pet-settings > .tip {
  grid-column: 1 / -1;
}

.setting-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  cursor: pointer;
}

.setting-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.setting-toggle > span {
  position: relative;
  width: 42px;
  height: 24px;
  border: 1px solid rgba(69, 91, 104, 0.22);
  border-radius: 999px;
  background: rgba(123, 139, 149, 0.24);
  transition: background 160ms ease;
}

.setting-toggle > span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(41, 57, 68, 0.22);
  transition: transform 160ms ease;
}

.setting-toggle input:checked + span {
  background: #16865b;
}

.setting-toggle input:checked + span::after {
  transform: translateX(18px);
}

.setting-toggle input:focus-visible + span {
  outline: 3px solid rgba(30, 125, 201, 0.28);
  outline-offset: 2px;
}

.site-pet {
  position: fixed;
  z-index: 85;
  width: 88px;
  height: 104px;
  touch-action: none;
  user-select: none;
}

.site-pet[hidden] {
  display: none;
}

.site-pet__character {
  position: absolute;
  inset: 7px 0 0;
  width: 88px;
  height: 97px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
}

.site-pet__character:active {
  cursor: grabbing;
}

.site-pet__character:focus-visible {
  outline: 3px solid rgba(30, 125, 201, 0.34);
  outline-offset: 2px;
  border-radius: 8px;
}

.site-pet__head,
.site-pet__body {
  position: absolute;
  left: 50%;
  display: block;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(205, 230, 235, 0.72));
  box-shadow: inset 0 1px 0 #fff, 0 8px 18px rgba(48, 77, 89, 0.18);
  backdrop-filter: blur(18px) saturate(135%);
}

.site-pet__head {
  top: 12px;
  width: 62px;
  height: 48px;
  border-radius: 8px;
}

.site-pet__head i {
  position: absolute;
  top: 17px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16865b;
  box-shadow: 0 0 8px rgba(22, 134, 91, 0.52);
}

.site-pet__head i:first-child { left: 14px; }
.site-pet__head i:nth-child(2) { right: 14px; }

.site-pet__head b {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  color: #47606d;
  font: 700 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.site-pet__body {
  top: 58px;
  width: 48px;
  height: 30px;
  border-radius: 8px 8px 6px 6px;
}

.site-pet__body i {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 18px;
  height: 8px;
  transform: translateX(-50%);
  border: 1px solid rgba(22, 134, 91, 0.42);
  border-radius: 3px;
  background: rgba(22, 134, 91, 0.14);
}

.site-pet__antenna {
  position: absolute;
  top: 3px;
  left: 50%;
  width: 2px;
  height: 14px;
  transform: translateX(-50%);
  background: #708995;
}

.site-pet__antenna i {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #27b47e;
  box-shadow: 0 0 9px rgba(39, 180, 126, 0.52);
}

.site-pet__shadow {
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 54px;
  height: 8px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(42, 63, 73, 0.14);
  filter: blur(3px);
}

.site-pet__bubble {
  position: absolute;
  right: 74px;
  bottom: 56px;
  width: max-content;
  max-width: min(280px, calc(100vw - 132px));
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 8px 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: #263c47;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 12px 28px rgba(48, 69, 81, 0.2);
  backdrop-filter: blur(24px) saturate(135%);
  pointer-events: auto;
  touch-action: manipulation;
}

.site-pet__bubble[hidden] {
  display: none;
}

.site-pet.has-action .site-pet__bubble {
  border-color: rgba(22, 134, 91, 0.36);
  color: #0f6946;
  font-weight: 700;
}

.site-pet__bubble-message {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
  letter-spacing: 0;
  cursor: pointer;
}

.site-pet__bubble-close {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(69, 87, 98, 0.08);
  color: #40545f;
  font-size: 17px;
  line-height: 22px;
  cursor: pointer;
}

.site-pet__bubble-message:focus-visible,
.site-pet__bubble-close:focus-visible {
  outline: 3px solid rgba(30, 125, 201, 0.3);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .profile-pet-settings {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .profile-pet-settings > .tip {
    grid-column: auto;
  }

  .site-pet {
    z-index: 65;
  }

  .site-pet__bubble {
    position: fixed;
    top: calc(122px + env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    left: max(12px, env(safe-area-inset-left));
    bottom: auto;
    width: auto;
    max-width: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .site-pet__character {
    animation: petFloat 3.4s ease-in-out infinite;
  }

  .site-pet__antenna i {
    animation: petSignal 2.8s ease-in-out infinite;
  }
}

@keyframes petFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes petSignal {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}
/* ===== Notebook: star/note UI additions (2026-08-01) ===== */

.notebook-star-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.notebook-star-marker {
  color: #f5a623;
  font-size: 1rem;
  margin-left: 0.4rem;
}

.notebook-tag-starred {
  background: #fff7e6;
  color: #b7791f;
  border-color: #f6d18a;
}

.notebook-star-btn.is-active {
  background: #fff4d3;
  color: #b7791f;
  border-color: #f2c469;
}

.notebook-star-btn.is-active::before {
  content: "★ ";
  color: #f5a623;
}

.notebook-note {
  margin: 0.5rem 0 0.2rem;
  padding: 0.55rem 0.8rem;
  background: #f6f8fb;
  border-left: 3px solid #6b90d6;
  border-radius: 6px;
  color: #34435a;
  white-space: pre-wrap;
  word-break: break-word;
}

.notebook-note-empty {
  margin: 0.5rem 0 0.2rem;
  font-style: italic;
  opacity: 0.6;
}

.notebook-reason-label {
  background: #eef2fa;
  color: #4a5b7a;
  font-weight: 600;
}

.notebook-reason-tag {
  background: #f0e6fb;
  color: #6a3fb0;
}

.notebook-question.starred > summary::before {
  content: "★";
  color: #f5a623;
  margin-right: 0.4rem;
}

/* Notebook practice: build-a-paper dialog on the notebook page */
/* Blend into the panel it sits in rather than sitting on it as a lighter card.
   Uses the shared surface token so light and dark themes both stay correct.
   Note: on .notebook-page this is overridden into a centred modal, because
   there the dialog floats over the list instead of sitting inside a panel. */
.notebook-practice-dialog {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--surface-border-soft, transparent);
  border-radius: 10px;
  background: transparent;
}

.notebook-practice-dialog[hidden] {
  display: none;
}

.notebook-practice-dialog h3 {
  margin: 0 0 0.6rem;
}

.notebook-practice-reasons {
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  margin-top: 0.2rem;
}

/* Checkboxes are stretched by the global .site-ui input sizing, so pin them the
   same way site-design.css does for the mastered/star filters. min-height and
   padding both have to be reset: min-height always beats height, which is what
   left these rendering as tall narrow bars. */
.notebook-practice-reason {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.45rem !important;
  min-height: 0 !important;
  white-space: nowrap;
}

.notebook-practice-reason > input[type="checkbox"] {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 4px;
  box-shadow: none;
  flex-shrink: 0;
  cursor: pointer;
}

.notebook-practice-reason > span {
  line-height: 1;
  white-space: nowrap;
}

.notebook-practice-cta-row {
  margin-top: 0.6rem;
}

/* Notebook practice: the retry paper page */
.notebook-practice-question {
  margin-bottom: 1.2rem;
}

/* The image is the question here - the stem text is suppressed for image
   questions - so let it use the full card width instead of the 560px cap
   that applies when it sits beside stem prose. */
.notebook-practice-question .question-images-wrap {
  margin-top: 0.4rem;
}

.notebook-practice-question .question-image {
  padding: 0.6rem;
}

.notebook-practice-question .question-image img {
  max-width: 100%;
}

/* Radio sizing and label layout now come from the shared .option-item rules. */
.notebook-practice-question .option-item {
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
}

/* Tints are built from --accent-rgb / --error, which both themes redefine, so
   these stay legible in dark mode. An opaque light fill here would leave light
   theme text on a light background once the theme flips. */
.notebook-practice-question .option-item.option-correct {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: var(--accent);
}

.notebook-practice-question .option-item.option-wrong {
  background: rgba(176, 72, 94, 0.12);
  border-color: var(--error);
}

[data-theme="dark"] .notebook-practice-question .option-item.option-wrong {
  background: rgba(246, 166, 179, 0.16);
}

/* ===== Weekly study plan on the analysis page (2026-08-02) ===== */

.weekly-plan-table {
  width: 100%;
  margin-top: 0.6rem;
  border-collapse: collapse;
}

.weekly-plan-table th,
.weekly-plan-table td {
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.weekly-plan-table th {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
}

.weekly-plan-table td:first-child {
  white-space: nowrap;
}

/* The row inherits the theme's text colour, so this fill has to be a
   translucent tint. A fixed light green left the text invisible in dark mode. */
.weekly-plan-table tr.is-today td {
  background: rgba(var(--accent-rgb), 0.14);
}

.weekly-plan-table tr.is-done td {
  opacity: 0.55;
}

.weekly-plan-table tr.is-done strong {
  text-decoration: line-through;
}

.weekly-plan-meta {
  display: block;
  font-size: 0.8rem;
}

/* Same global .site-ui input trap as the option radios. Note the selector has
   to out-specify .site-ui input (0,1,1) - a lone .weekly-plan-check class is
   (0,1,0) and loses, which is why these still rendered as big input boxes.
   Only the sizing is overridden so these match the notebook page's own
   checkboxes instead of inventing a second look. */
.weekly-plan-table input[type="checkbox"] {
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.weekly-plan-table th:last-child,
.weekly-plan-table td:last-child {
  width: 1%;
  text-align: center;
  white-space: nowrap;
}

.notebook-practice-result {
  margin: 0.8rem 0 0.2rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border-left: 4px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--text);
  font-size: 1rem;
}

.notebook-practice-result[hidden] {
  display: none;
}

.notebook-tag-correct {
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent);
  border-color: var(--accent);
}

.notebook-tag-wrong {
  background: rgba(176, 72, 94, 0.14);
  color: var(--error);
  border-color: var(--error);
}

[data-theme="dark"] .notebook-tag-wrong {
  background: rgba(246, 166, 179, 0.18);
}

/* Fix: notebook filter labels wrapping character-by-character */
.notebook-star-filter,
.notebook-mastered-filter {
  white-space: nowrap;
}
.notebook-star-filter span,
.notebook-mastered-filter span {
  white-space: nowrap;
}

/* Fix: force notebook-star-filter to horizontal layout with normal checkbox */
.notebook-star-filter {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
.notebook-star-filter > input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  flex-shrink: 0;
  cursor: pointer;
}
.notebook-star-filter > span {
  line-height: 1;
}
/* ===== Mistake reasons multi-select on review page (2026-08-01) ===== */

/* This block predates the green-theme pass below, which overrides most of it.
   The hover rule is the one declaration that survives, so it also has to be
   theme-aware; the rest is kept token-based so a future reorder can't
   resurrect light-only colours. */
.mistake-reasons {
  margin: 0.5rem 0 0.4rem;
  padding: 0.5rem 0.8rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.07);
  display: block;
}

.mistake-reasons > legend {
  padding: 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
}

.mistake-reason-option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.2rem 0.9rem 0.2rem 0;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text);
  user-select: none;
}

.mistake-reason-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  accent-color: var(--accent);
}

.mistake-reason-option:hover span {
  color: var(--text);
}

/* ===== Mistake reasons: restyle to match site's green theme =====
   Fills are built from --accent-rgb and text from --text/--muted, both of
   which each theme redefines. The original pass pinned these to light-theme
   values (a #ffffff fieldset, dark green legend), which turned into a white
   slab with unreadable text once the dark theme was applied. */
.mistake-reasons {
  margin: 0.6rem 0 0.3rem;
  padding: 0.7rem 1rem 0.8rem;
  border: none;
  border-radius: 14px;
  background: rgba(var(--accent-rgb), 0.07);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.16);
  display: block;
}
.mistake-reasons > legend {
  padding: 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.mistake-reason-option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.25rem 0.5rem 0.25rem 0;
  padding: 0.28rem 0.75rem;
  cursor: pointer;
  font-size: 0.86rem;
  color: var(--text);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.13);
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  user-select: none;
}
.mistake-reason-option:hover {
  background: rgba(var(--accent-rgb), 0.22);
}
.mistake-reason-option:has(input:checked) {
  background: rgba(var(--accent-rgb), 0.32);
  color: var(--text);
  font-weight: 600;
}
.mistake-reason-option:active {
  transform: scale(0.97);
}
.mistake-reason-option input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  accent-color: var(--accent);
}

/* ===== Question difficulty tags on the notebook (2026-08-03) =====
   Tints come from theme tokens so the tags stay legible in both themes. */
.notebook-difficulty-tag {
  font-weight: 600;
}

.notebook-difficulty-tag.is-basic {
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent);
  border-color: var(--accent);
}

.notebook-difficulty-tag.is-medium {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--muted);
  border-color: var(--line);
}

.notebook-difficulty-tag.is-challenge {
  background: rgba(176, 72, 94, 0.14);
  color: var(--error);
  border-color: var(--error);
}

[data-theme="dark"] .notebook-difficulty-tag.is-challenge {
  background: rgba(246, 166, 179, 0.18);
}
/* ===== Notebook: single-screen layout (2026-08-03) =====
   Fits the page into one viewport: only the entry list scrolls. Every control
   that used to sit in the overview panel keeps its id and behaviour - this is
   purely where things are placed. Sizing is written for the longer English
   strings, which run up to 4x the Chinese (e.g. "从错题本组卷" -> "Build paper
   from notebook"), so nothing is pinned to a single line. */
.notebook-page .notebook-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-width: 1440px;
}

.notebook-page .notebook-layout {
  display: grid;
  /* Sidebar flexes because the English labels do not fit a fixed 290px. */
  grid-template-columns: minmax(0, 1fr) clamp(260px, 23vw, 330px);
  gap: 1rem;
  /* Must stretch, not start: with align-items:start the columns size to their
     content, the list's minmax(0,1fr) row is never capped, and it grows past
     the fold instead of scrolling inside. */
  align-items: stretch;
  min-height: 0;
}

.notebook-page .notebook-col-main,
.notebook-page .notebook-col-side {
  display: grid;
  gap: 0.75rem;
  min-height: 0;
}

.notebook-page .notebook-col-main {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.notebook-page .notebook-col-side {
  grid-template-rows: auto auto 1fr auto;
}

.notebook-page .notebook-heading h1 {
  margin: 0;
  font-size: 1.55rem;
}

.notebook-page .notebook-heading .tip {
  margin: 0.25rem 0 0;
  /* The English subtitle is ~88 characters; clamping keeps it from pushing the
     list off the fold. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stats: one row of four, rendered by renderStats() into #notebookStats. */
.notebook-page #notebookStats .stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
}

.notebook-page #notebookStats .stat-card {
  padding: 0.6rem 0.8rem;
}

.notebook-page #notebookStats .stat-label {
  line-height: 1.25;
  /* Reserve two lines so the four cards stay level once the labels are in
     English ("Total wrong attempts" wraps, "Mastered" does not). */
  min-height: 2.5em;
}

.notebook-page #notebookStats .tip {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
}

/* Records card: the card itself never scrolls, the list inside it does. */
.notebook-page .notebook-records-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.5rem;
  min-height: 0;
  padding: 0.9rem 1rem;
}

.notebook-page .notebook-records-card > h2 {
  margin: 0;
  font-size: 1.02rem;
}

.notebook-page #notebookList {
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.35rem;
}

/* Pagination is rendered inside #notebookList, so pin it to the bottom of the
   scroll area instead of letting it scroll away. */
.notebook-page .notebook-pagination {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: 0.5rem 0 0;
  padding: 0.5rem 0 0.1rem;
  background: var(--card-bg, var(--bg));
}

/* Sidebar */
.notebook-page .notebook-side-cta,
.notebook-page .notebook-side-foot {
  display: grid;
  gap: 0.45rem;
}

.notebook-page .notebook-side-cta button,
.notebook-page .notebook-side-foot button {
  width: 100%;
  min-height: 42px;
  /* English labels wrap to two lines; a fixed height would clip them. */
  white-space: normal;
  line-height: 1.25;
}

.notebook-page .notebook-filters-card {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 0.85rem 0.9rem;
}

.notebook-page .notebook-filters-card > h2 {
  margin: 0;
  font-size: 0.95rem;
}

.notebook-page .notebook-filters-card label {
  display: grid;
  gap: 0.2rem;
  min-height: 0;
}

.notebook-page .notebook-filters-card select {
  min-height: 40px;
  max-width: 100%;
}

.notebook-page .notebook-filters-card .notebook-mastered-filter,
.notebook-page .notebook-filters-card .notebook-star-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 0;
  align-self: start;
}

/* One screen on a laptop: only the entry list scrolls.
   Done as a flex chain from the body down rather than by subtracting the
   header height. Two earlier attempts failed for reasons worth recording:
   a max-height parent leaves percentage heights unresolved, and
   calc(100vh - 68px) relied on .site-topbar's min-height, which is a floor
   rather than its real height. Flex needs no such number.
   Selectors are element+class so they out-specify .site-ui .container, which
   is (0,2,0), loads later from site-design.css, and would otherwise keep its
   40px/64px padding - 104px of the fold on its own. */
@media (min-width: 900px) and (min-height: 640px) {
  body.notebook-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 0;
    overflow: hidden;
  }

  /* Injected by site-ui.js on load; whatever height it ends up, flex absorbs. */
  body.notebook-page > .site-topbar {
    flex: 0 0 auto;
  }

  body.notebook-page > .notebook-shell {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  body.notebook-page .notebook-layout {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }
}
/* ===== Notebook: the build-paper dialog as a real modal (2026-08-04) =====
   In the single-screen layout the dialog is a child of the shell and floats
   over the entry list, so the transparent fill it used while sitting inside a
   panel left text overlapping text. --bg is used rather than --card-bg because
   --card-bg resolves to a translucent glass fill under the dark theme, which
   would let the list show through again. */
.notebook-page .notebook-practice-dialog {
  position: fixed;
  z-index: 60;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, calc(100vw - 2.5rem));
  max-height: min(82vh, 660px);
  overflow-y: auto;
  margin: 0;
  padding: 1.1rem 1.25rem 1.2rem;
  border: 1px solid var(--surface-border, rgba(var(--accent-rgb), 0.22));
  border-radius: 16px;
  background: var(--bg);
  box-shadow: var(--dialog-shadow);
}

.notebook-page .notebook-practice-dialog > h3 {
  margin: 0 0 0.7rem;
  font-size: 1.05rem;
}

/* The dialog is narrower than the old panel, so let the controls wrap instead
   of squeezing four of them onto one line. */
.notebook-page .notebook-practice-dialog .actions {
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem;
}

.notebook-page .notebook-practice-dialog .actions > label {
  min-width: 148px;
}

.notebook-page .notebook-practice-reasons {
  gap: 0.5rem 1rem;
}
/* ===== Notebook records: tighten the header and the pager (2026-08-04) ===== */

/* Reclaim the space above the first group: the card's own padding, the heading
   and the group <h3>'s default ~1em margin stacked up to roughly 50px of empty
   space before the first entry. */
.notebook-page .notebook-records-card {
  gap: 0.3rem;
  padding: 0.65rem 0.85rem 0.6rem;
}

.notebook-page .notebook-records-card > h2 {
  font-size: 0.92rem;
  line-height: 1.2;
}

.notebook-page .notebook-group-title {
  margin: 0.5rem 0 0.28rem;
  font-size: 0.8rem;
}

.notebook-page .notebook-group:first-child .notebook-group-title {
  margin-top: 0;
}

/* Opaque, or the entries scroll through it. --card-bg resolves to a
   translucent glass fill under the dark theme, which is exactly what let the
   rows show through; --bg is solid in both themes. */
.notebook-page .notebook-pagination {
  margin: 0.35rem 0 0;
  padding: 0.4rem 0 0.15rem;
  background: var(--bg);
  border-top: 1px solid var(--surface-border-soft, rgba(var(--accent-rgb), 0.14));
  font-size: 0.78rem;
}

/* A full-size button pair here reads as heavier than the rows it pages
   through, so scale it back to a control strip. */
.notebook-page .notebook-pagination button {
  min-height: 0;
  padding: 0.25rem 0.7rem;
  font-size: 0.78rem;
  border-radius: 9px;
}

.notebook-page .notebook-page-progress {
  font-size: 0.76rem;
}

/* ===== Theme toggle: desk lamp (2026-08-08) =============================
 * Replaces the sun/moon icon pair. One drawing, restyled by [data-theme]:
 * unlit on the light theme, lit on the dark one. Because the lit state keys
 * off the theme attribute and not :hover, it holds for as long as dark mode
 * is on instead of flickering with the pointer.
 *
 * The dark rules live here rather than in site-design.css, against the usual
 * split, because login.html and admin-login.html load only styles.css and
 * login.css. Putting the lit state in site-design.css would leave the lamp
 * permanently unlit on both login pages.
 */
.home-theme-lamp {
  width: 26px;
  height: 26px;
  /* The outer <svg> clips at its viewport by default, which would cut the
     glow blur and the shade's drop-shadow off at the edges. */
  overflow: visible;
}

.home-theme-lamp .lamp-shade,
.home-theme-lamp .lamp-post,
.home-theme-lamp .lamp-base {
  fill: currentColor;
  transition: fill 0.35s ease, filter 0.35s ease;
}

.home-theme-lamp .lamp-cord {
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  opacity: 0.55;
}

.home-theme-lamp .lamp-bead {
  fill: #c9962f;
  transition: fill 0.35s ease, filter 0.35s ease;
}

.home-theme-lamp .lamp-cord,
.home-theme-lamp .lamp-bead {
  transition: transform 0.18s ease, opacity 0.35s ease;
}

/* Unlit: no pool of light under the shade at all. */
.home-theme-lamp .lamp-glow {
  fill: #ffc46e;
  opacity: 0;
  transition: opacity 0.4s ease;
}

[data-theme="dark"] .home-theme-lamp .lamp-shade {
  fill: #f6f1e4;
  filter: drop-shadow(0 3px 7px rgba(255, 186, 94, 0.75));
}

[data-theme="dark"] .home-theme-lamp .lamp-post,
[data-theme="dark"] .home-theme-lamp .lamp-base {
  fill: #efe9dc;
}

[data-theme="dark"] .home-theme-lamp .lamp-glow {
  opacity: 0.5;
  filter: blur(3px);
}

[data-theme="dark"] .home-theme-lamp .lamp-bead {
  fill: #ffcb73;
  filter: drop-shadow(0 0 3px rgba(255, 190, 100, 0.9));
}

/* A short tug on the cord acknowledges the click in both directions. */
.home-theme-toggle:active .lamp-cord,
.home-theme-toggle:active .lamp-bead {
  transform: translateY(1.4px);
}

@media (prefers-reduced-motion: reduce) {
  .home-theme-lamp .lamp-shade,
  .home-theme-lamp .lamp-post,
  .home-theme-lamp .lamp-base,
  .home-theme-lamp .lamp-cord,
  .home-theme-lamp .lamp-bead,
  .home-theme-lamp .lamp-glow {
    transition: none;
  }
}