* {
  box-sizing: border-box;
}

.practice2-hero {
  display: none;
}

.practice2-hero span,
.practice2-overview span {
  color: #63766d;
  font-size: 13px;
  font-weight: 700;
}

.practice2-hero h2 {
  margin: 6px 0 8px;
  color: #20372f;
  font-size: 26px;
  letter-spacing: 0;
}

.practice2-hero p {
  margin: 0;
  color: #53665d;
  line-height: 1.7;
}

.practice2-overview {
  min-width: 260px;
  display: grid;
  gap: 8px;
  align-content: center;
  color: #273d35;
}

.practice2-overview strong {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.practice2-overview div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.practice2-overview em {
  padding: 5px 9px;
  border: 1px solid rgba(188, 205, 196, 0.85);
  border-radius: 6px;
  background: #ffffff;
  color: #496257;
  font-style: normal;
  font-size: 12px;
}

.practice2-shell {
  width: min(1120px, 100%);
  margin: 0 auto 40px;
  display: block;
}

.practice2-sidebar {
  border: 1px solid rgba(199, 214, 207, 0.82);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(48, 66, 58, 0.07);
}

.practice2-sidebar {
  position: static;
  max-height: none;
  margin-bottom: 14px;
  padding: 13px 14px;
  display: grid;
  gap: 12px;
  overflow: visible;
  border-radius: 18px;
  background: rgba(255, 255, 251, 0.92);
  box-shadow: 0 10px 24px rgba(37, 51, 45, 0.06);
}

.practice2-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #284137;
}

.practice2-panel-head span {
  color: #6f7f76;
  font-size: 13px;
}

.practice2-batch-list,
.practice2-question-list {
  display: grid;
  gap: 8px;
}

.practice2-batch-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.practice2-question-list {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.practice2-batch-card,
.practice2-question-chip,
.practice2-filter-bar button,
.practice2-review-actions button {
  border: 1px solid rgba(192, 210, 201, 0.88);
  border-radius: 7px;
  background: #fbfcf9;
  color: #283e35;
  text-align: left;
  cursor: pointer;
}

.practice2-batch-card {
  flex: 0 0 min(260px, 72vw);
  padding: 9px 10px;
  display: grid;
  gap: 3px;
}

.practice2-batch-card span,
.practice2-batch-card small,
.practice2-batch-card em,
.practice2-question-chip small {
  color: #64776e;
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.practice2-batch-card strong {
  color: #233a32;
  font-size: 13px;
  line-height: 1.45;
}

.practice2-batch-card small {
  display: none;
}

.practice2-batch-card.active,
.practice2-question-chip.active,
.practice2-filter-bar button.active,
.practice2-review-actions button.active {
  border-color: #6c9b82;
  background: #edf6ef;
  color: #1f4a36;
}

.practice2-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.practice2-filter-bar button {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 12px;
  text-align: center;
}

.practice2-question-chip {
  flex: 0 0 auto;
  min-width: 96px;
  padding: 7px 9px;
  display: inline-grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

.practice2-question-chip strong,
.practice2-question-chip small {
  display: none;
}

.practice2-question-chip.issue {
  border-color: rgba(204, 110, 96, 0.65);
}

.practice2-question-chip.approved {
  border-color: rgba(95, 152, 119, 0.65);
}

.practice2-question-chip.hold {
  border-color: rgba(181, 150, 82, 0.65);
}

.practice2-reader {
  min-height: 620px;
  padding: 0;
  display: grid;
  gap: 14px;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  border: 0;
}

.practice2-paper {
  --practice2-cn-font: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", "Segoe UI", sans-serif;
  --practice2-math-font: "Cambria Math", "STIX Two Math", "Times New Roman", "Segoe UI Symbol", serif;
  padding: 28px 36px 34px;
  color: #2f4050;
  font-family: var(--practice2-cn-font);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
}

.practice2-flow-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 0 2px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #2d463c;
  box-shadow: none;
}

.practice2-flow-head span {
  color: #63766d;
  font-size: 13px;
}

.practice2-flow-tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.practice2-flow-tools button {
  min-height: 28px;
  padding: 3px 10px;
  border: 1px solid rgba(179, 198, 189, 0.78);
  border-radius: 999px;
  background: rgba(255, 255, 250, 0.82);
  color: #526d62;
  box-shadow: none;
  font-size: 12px;
  font-weight: 650;
}

.practice2-flow-tools button.active {
  border-color: #74a78e;
  background: #eaf5ee;
  color: #285d49;
}

.practice2-question-flow {
  display: grid;
  gap: 14px;
}

.practice2-question-card {
  padding: 16px;
  border: 1px solid rgba(204, 219, 207, 0.74);
  border-radius: 18px;
  background: rgba(255, 255, 251, 0.94);
  box-shadow: 0 10px 24px rgba(37, 51, 45, 0.06);
  scroll-margin-top: 72px;
}

.practice2-question-card.active-question {
  border-color: rgba(111, 167, 127, 0.78);
  background: #fffffb;
  box-shadow: 0 0 0 3px rgba(111, 167, 127, 0.14), 0 13px 28px rgba(37, 51, 45, 0.09);
}

.practice2-question-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 6px;
}

.practice2-question-leading {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.practice2-mode-selector {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin-top: 2px;
  padding: 0;
  border: 1.5px solid #9db8aa;
  border-radius: 999px;
  background: #fff;
  box-shadow: none;
}

.practice2-mode-selector:hover,
.practice2-mode-selector:focus-visible {
  border-color: #5f9278;
  background: #f2f8f4;
  box-shadow: 0 0 0 3px rgba(111, 167, 127, 0.12);
}

.practice2-mode-selector.selected::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: #39755d;
}

.practice2-mode-selector.mode-feedback {
  border-color: #c1aa78;
}

.practice2-mode-selector.mode-feedback:hover,
.practice2-mode-selector.mode-feedback:focus-visible {
  border-color: #9c7833;
  background: #fff9ed;
}

.practice2-question-header span {
  color: #718178;
  font-size: 13px;
}

.practice2-question-header .practice2-question-code-badge {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 3px 8px;
  border: 1px solid rgba(184, 207, 194, 0.78);
  border-radius: 999px;
  background: rgba(246, 250, 246, 0.88);
  color: #5c7268;
  font-family: "Aptos", "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}

.practice2-question-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* Question-card tools follow the compact Answer/Detail control scale. */
.practice2-question-actions > button:not(.practice2-focus-button) {
  min-height: 26px;
  padding: 2px 8px;
  border: 1px solid rgba(179, 198, 189, 0.72);
  border-radius: 999px;
  background: rgba(255, 255, 250, 0.74);
  color: #526d62;
  box-shadow: none;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.practice2-question-actions > button.similar-practice-button {
  border-color: rgba(139, 184, 153, 0.62);
  background: rgba(247, 251, 247, 0.9);
  color: #4f765f;
}

.practice2-question-actions > button:hover,
.practice2-question-actions > button:focus-visible {
  border-color: rgba(139, 184, 153, 0.78);
  background: rgba(237, 248, 240, 0.94);
  color: #315f4d;
  box-shadow: none;
}

.practice2-question-actions > .custom-paper-select-button.selected {
  border-color: #8bb8a2;
  background: #edf7f1;
  color: #315f4d;
}

.practice2-focus-button {
  display: inline-grid;
  place-items: center;
  width: 27px;
  height: 27px;
  min-height: 27px;
  padding: 0;
  border: 1px solid rgba(184, 207, 194, 0.7);
  border-radius: 999px;
  background: rgba(255, 255, 250, 0.7);
  color: #60756c;
  box-shadow: none;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.practice2-focus-button:hover,
.practice2-focus-button:focus-visible {
  background: rgba(239, 248, 242, 0.94);
  color: #315f4d;
  box-shadow: 0 0 0 3px rgba(111, 167, 127, 0.12);
}

body.practice2-focus-active {
  overflow: hidden;
}

.practice2-focus-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  box-sizing: border-box;
  height: var(--practice2-focus-vh, 100dvh);
  min-height: var(--practice2-focus-vh, 100dvh);
  max-height: var(--practice2-focus-vh, 100dvh);
  padding: clamp(10px, 2vw, 22px);
  background: rgba(238, 247, 240, 0.92);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.practice2-focus-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  border: 1px solid rgba(179, 204, 190, 0.8);
  border-radius: 18px;
  background: #fffffb;
  box-shadow: 0 22px 64px rgba(31, 54, 42, 0.18);
  overflow: hidden;
}

.practice2-focus-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(214, 226, 219, 0.92);
  background: rgba(250, 253, 249, 0.96);
}

.practice2-focus-close {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(185, 205, 195, 0.8);
  background: #fffefa;
  color: #4f675d;
  box-shadow: none;
  font-size: 22px;
  line-height: 1;
}

.practice2-focus-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  color: #5e7169;
}

.practice2-focus-title span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.practice2-focus-title strong {
  flex: 0 0 auto;
  padding: 3px 9px;
  border: 1px solid rgba(184, 207, 194, 0.78);
  border-radius: 999px;
  background: rgba(246, 250, 246, 0.9);
  color: #526b5f;
  font-size: 12px;
  line-height: 1.2;
}

.practice2-focus-nav {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: max-content;
}

.practice2-focus-nav button {
  min-height: 30px;
  padding: 3px 10px;
  border: 1px solid rgba(184, 207, 194, 0.78);
  border-radius: 999px;
  background: rgba(255, 255, 250, 0.76);
  color: #526b5f;
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.practice2-focus-nav button:hover:not(:disabled),
.practice2-focus-nav button:focus-visible:not(:disabled) {
  background: rgba(239, 248, 242, 0.96);
  color: #315f4d;
}

.practice2-focus-nav button:disabled {
  opacity: 0.38;
  cursor: default;
}

.practice2-focus-nav span {
  min-width: 48px;
  color: #7a8c84;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.practice2-focus-pen-wrap {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  top: 50%;
  transform: translateY(-50%);
  z-index: 10020;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.practice2-focus-nav .practice2-focus-pen-toggle,
.practice2-focus-pen-toggle {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  border-color: rgba(184, 207, 194, 0.78);
  background: rgba(255, 255, 250, 0.9);
  color: #5a7067;
  box-shadow: 0 8px 22px rgba(44, 62, 55, 0.12);
}

.practice2-focus-nav .practice2-focus-pen-toggle.active,
.practice2-focus-pen-toggle.active {
  border-color: rgba(191, 74, 67, 0.42);
  background: #fff6f3;
  color: #9c433b;
}

.practice2-focus-pen-disable {
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  display: none;
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: 0;
  transform: translateX(-50%);
  border-color: rgba(211, 104, 96, 0.46);
  background: rgba(255, 246, 244, 0.88);
  color: #b4564f;
  box-shadow: 0 8px 18px rgba(126, 53, 45, 0.12);
}

.practice2-focus-pen-disable.visible,
.practice2-focus-shell.pen-active .practice2-focus-pen-disable {
  display: inline-flex;
}

.practice2-focus-shell.pen-active {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.practice2-focus-shell.pen-active .practice2-focus-question-content,
.practice2-focus-shell.pen-active .practice2-focus-draft-paper {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.practice2-focus-pen-disable .practice2-focus-tool-svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}

.practice2-focus-pen-popover {
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  right: auto;
  transform: translateY(-50%);
  z-index: 18;
  display: none;
  align-items: stretch;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(207, 219, 209, 0.58);
  border-radius: 10px;
  background: rgba(255, 255, 251, 0.68);
  box-shadow: 0 12px 24px rgba(44, 62, 55, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #5d7269;
}

.practice2-focus-shell.pen-panel-open .practice2-focus-pen-popover {
  display: inline-flex;
}

.practice2-focus-nav .practice2-focus-pen-popover button,
.practice2-focus-pen-popover button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 999px;
  font-size: 0;
  background: rgba(255, 255, 251, 0.7);
}

.practice2-focus-nav .practice2-focus-pen-popover button > span,
.practice2-focus-pen-popover button > span {
  min-width: 0;
  color: inherit;
  line-height: 1;
  text-align: center;
}

.practice2-focus-tool-svg {
  display: block;
  width: 18px;
  height: 18px;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.practice2-focus-pen-toggle .practice2-focus-tool-svg {
  width: 19px;
  height: 19px;
}

.practice2-focus-tool-combo {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 22px;
  margin: auto;
}

.practice2-focus-tool-combo .practice2-focus-tool-svg {
  width: 17px;
  height: 17px;
  transform: translateY(-1px);
}

.practice2-focus-tool-combo-small .practice2-focus-tool-svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.75;
}

.practice2-focus-tool-combo-large .practice2-focus-tool-svg {
  width: 21px;
  height: 21px;
  stroke-width: 2;
  transform: translateY(-1px) rotate(-1deg);
}

.practice2-focus-nav .practice2-focus-pen-popover button.selected,
.practice2-focus-pen-popover button.selected {
  border-color: rgba(111, 156, 134, 0.42);
  background: rgba(239, 248, 242, 0.92);
  color: #366b59;
}

.practice2-focus-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.88fr) minmax(340px, 1.12fr);
  gap: 0;
  min-width: 0;
  min-height: 0;
  padding: 0;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.95;
}

.practice2-focus-question {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: clamp(20px, 3.2vw, 42px);
  padding-bottom: max(clamp(20px, 3.2vw, 42px), calc(72px + env(safe-area-inset-bottom)));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  scroll-padding-bottom: 76px;
}

.practice2-focus-question-content {
  position: relative;
  z-index: 1;
}

.practice2-focus-ink-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  pointer-events: none;
  touch-action: none;
  cursor: crosshair;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.practice2-focus-ink-canvas.active {
  pointer-events: auto;
}

.practice2-focus-side {
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  min-width: 0;
  min-height: 0;
  padding: 14px 10px 16px;
  padding-bottom: max(clamp(18px, 2vw, 28px), calc(76px + env(safe-area-inset-bottom)));
  border-left: 1px solid rgba(213, 226, 219, 0.95);
  background: #fbfdf9;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  scroll-padding-bottom: 82px;
  overflow-wrap: anywhere;
}

.practice2-focus-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  margin: 0 0 10px;
  color: #536a62;
  font-size: 14px;
  line-height: 1.5;
}

.practice2-focus-side-head strong {
  color: #315f56;
  font-size: 15px;
  font-weight: 760;
}

.practice2-focus-side .practice2-reveal-controls {
  justify-content: flex-start;
  margin: 0 0 12px;
}

.practice2-wrong-result-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  padding: 9px 10px;
  border: 1px solid rgba(190, 211, 202, 0.74);
  border-radius: 8px;
  background: rgba(247, 251, 247, 0.84);
}

.practice2-wrong-result-controls button {
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid rgba(174, 198, 187, 0.78);
  border-radius: 999px;
  background: #fffef9;
  color: #586d65;
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
}

.practice2-wrong-result-controls button.correct {
  border-color: rgba(126, 177, 143, 0.72);
  color: #3f7354;
}

.practice2-wrong-result-controls button.selected {
  background: #e8f3eb;
  color: #315f46;
}

.practice2-wrong-result-controls [data-practice2-wrong-result-state] {
  color: #71827b;
  font-size: 12px;
}

.practice2-focus-draft-area {
  position: relative;
  --practice2-draft-zoom: 1;
  --practice2-draft-min-height: max(980px, 170vh);
  --practice2-draft-grid-left: 18px;
  --practice2-draft-grid-step: 34px;
  min-width: 0;
  min-height: max(700px, 118vh);
  border: 1px solid rgba(190, 211, 202, 0.86);
  border-radius: 12px;
  background: #fffffb;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  overflow: auto;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

.practice2-focus-draft-zoom-layer {
  position: relative;
  width: 100%;
  min-width: 100%;
  min-height: var(--practice2-draft-min-height);
  border-radius: inherit;
}

.practice2-focus-draft-paper {
  position: absolute;
  inset: 0;
  width: 100%;
  min-width: 100%;
  min-height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(126, 157, 143, 0.12) 1px, transparent 1px) var(--practice2-draft-grid-left, 18px) 0 / 1px 100% no-repeat,
    repeating-linear-gradient(0deg, transparent 0, transparent calc(var(--practice2-draft-grid-step, 34px) - 1px), rgba(126, 157, 143, 0.2) var(--practice2-draft-grid-step, 34px));
  pointer-events: none;
}

.practice2-focus-draft-ink-canvas {
  touch-action: none;
}

.practice2-focus-empty {
  display: grid;
  place-items: center;
  min-height: 128px;
  border: 1px dashed rgba(183, 205, 194, 0.78);
  border-radius: 12px;
  background: rgba(255, 255, 250, 0.72);
  color: #8a9a92;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}

.practice2-focus-empty.only {
  min-height: 180px;
}

.practice2-focus-layout.practice2-reveal-open .practice2-focus-empty {
  display: none;
}

.practice2-focus-layout.practice2-reveal-open .practice2-focus-draft-area {
  display: none;
}

.practice2-focus-reveal-panel {
  --practice2-reveal-zoom: 1;
  max-height: none;
  min-height: 0;
  margin-top: 0;
  padding-right: 4px;
  padding-bottom: 44px;
  overflow-x: auto;
  overflow-y: visible;
  overflow-wrap: anywhere;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

.practice2-focus-reveal-panel.open {
  display: block;
}

.practice2-focus-reveal-panel .practice2-doc-section {
  padding-top: 0;
}

.practice2-focus-reveal-panel .practice2-doc-content p {
  font-size: calc(0.92em * var(--practice2-reveal-zoom, 1));
  line-height: 1.8;
}

.practice2-focus-side .practice2-table-scroll,
.practice2-focus-side table {
  max-width: 100%;
}

.practice2-focus-side .practice2-table-scroll {
  overflow-x: auto;
}

.practice2-focus-side img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 1180px) and (orientation: landscape) {
  .practice2-focus-layout {
    grid-template-columns: minmax(0, 1.68fr) minmax(360px, 1.32fr);
  }

  .practice2-focus-side {
    padding: 10px 8px 12px;
    padding-left: 6px;
    padding-right: 6px;
  }

  .practice2-focus-side-head {
    padding-left: 2px;
  }

  .practice2-focus-side .practice2-reveal-controls {
    gap: 6px;
  }

  .practice2-focus-side .practice2-reveal-button {
    padding-inline: 10px;
  }

  .practice2-focus-draft-area {
    border-radius: 10px;
    min-height: max(740px, 130vh);
  }

  .practice2-focus-draft-paper {
    min-height: 100%;
    background:
      linear-gradient(90deg, rgba(126, 157, 143, 0.12) 1px, transparent 1px) var(--practice2-draft-grid-left, 12px) 0 / 1px 100% no-repeat,
      repeating-linear-gradient(0deg, transparent 0, transparent calc(var(--practice2-draft-grid-step, 34px) - 1px), rgba(126, 157, 143, 0.2) var(--practice2-draft-grid-step, 34px));
  }

  .practice2-focus-draft-area {
    --practice2-draft-min-height: max(860px, 160vh);
    --practice2-draft-grid-left: 12px;
  }
}

@media (max-width: 900px), (orientation: portrait) {
  .practice2-focus-overlay {
    padding: 8px;
  }

  .practice2-focus-shell {
    border-radius: 14px;
  }

  .practice2-focus-toolbar {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .practice2-focus-nav {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .practice2-focus-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(180px, 36vh);
    font-size: 18px;
  }

  .practice2-focus-question {
    padding: 18px 18px 22px;
  }

  .practice2-focus-side {
    border-left: 0;
    border-top: 1px solid rgba(213, 226, 219, 0.95);
    padding: 10px 8px 12px;
  }

  .practice2-focus-draft-area {
    min-height: max(360px, 54vh);
  }

  .practice2-focus-draft-paper {
    min-height: 100%;
  }

  .practice2-focus-draft-area {
    --practice2-draft-min-height: max(620px, 96vh);
  }

  .practice2-focus-empty {
    min-height: 78px;
  }

  .practice2-focus-question .practice2-text-choice-grid {
    --practice2-focus-choice-indent: 12px;
    gap: 12px 20px;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .practice2-focus-overlay {
    padding: 8px;
  }

  .practice2-focus-toolbar {
    min-height: 44px;
    padding: 6px 10px;
  }

  .practice2-focus-question {
    padding-top: 16px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .practice2-focus-side {
    padding-top: 12px;
    padding-left: 14px;
    padding-right: 14px;
  }
}

.practice2-status-pill,
.practice2-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid rgba(191, 208, 200, 0.86);
  background: #fbfcf9;
  color: #4d675b;
  font-size: 13px;
  line-height: 1.4;
}

.practice2-status-pill.approved {
  border-color: rgba(87, 151, 111, 0.7);
  background: #edf8ef;
  color: #25613f;
}

.practice2-status-pill.issue {
  border-color: rgba(202, 101, 83, 0.7);
  background: #fff1ed;
  color: #9a3828;
}

.practice2-status-pill.hold {
  border-color: rgba(178, 139, 62, 0.72);
  background: #fff8e4;
  color: #765311;
}

.practice2-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
}

.practice2-tag.muted {
  color: #8a6f35;
}

.practice2-review-bar {
  margin: 0 0 16px;
  padding: 10px;
  display: grid;
  gap: 9px;
  border: 1px solid rgba(201, 217, 209, 0.86);
  border-radius: 12px;
  background: #f7faf7;
}

.practice2-review-actions,
.practice2-flag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.practice2-review-actions button {
  min-height: 30px;
  padding: 5px 10px;
  text-align: center;
}

.practice2-flag-grid label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #53665d;
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
}

.practice2-flag-grid input {
  flex: 0 0 auto;
}

.practice2-review-bar textarea {
  width: 100%;
  min-height: 54px;
  resize: vertical;
  border: 1px solid rgba(186, 204, 196, 0.9);
  border-radius: 7px;
  padding: 9px 10px;
  background: #ffffff;
  color: #263b34;
  font: inherit;
  font-size: 14px;
  line-height: 1.6;
}

.practice2-doc-section {
  padding: 18px 0;
  border-top: 1px solid rgba(214, 224, 219, 0.9);
}

.practice2-doc-section.stem {
  padding-top: 8px;
  border-top: 0;
}

.practice2-doc-section.answer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  width: fit-content;
  max-width: 100%;
  margin: 10px 0 8px;
  padding: 8px 12px;
  column-gap: 12px;
  border: 1px solid rgba(174, 203, 184, 0.72);
  border-left: 4px solid #77a587;
  border-radius: 7px;
  background: #f8fbf7;
  box-shadow: none;
}

.practice2-doc-section h3 {
  margin: 0 0 10px;
  color: #4d6577;
  font-size: 16px;
  font-family: var(--practice2-cn-font);
  font-weight: 700;
  letter-spacing: 0;
}

.practice2-doc-section.answer h3 {
  margin: 0;
  color: #526b5b;
  font-size: 14px;
  line-height: 1.45;
}

.practice2-doc-section.analysis h3 {
  color: #5c6c80;
}

.practice2-doc-section.detail h3 {
  color: #6a624f;
}

.practice2-doc-content p {
  margin: 0 0 12px;
  color: #2f4050;
  font-family: var(--practice2-cn-font);
  font-size: 1em;
  line-height: 1.95;
  letter-spacing: 0;
}

.practice2-doc-section.stem .practice2-doc-content {
  width: 100%;
  max-width: none;
}

.practice2-doc-section.stem .practice2-doc-content > p:first-child {
  margin-bottom: 12px;
  color: #2d4050;
  font-size: 18.5px;
  line-height: 1.68;
}

.practice2-doc-section.stem .practice2-doc-content > p.practice2-subquestion {
  margin-bottom: 7px;
  padding-left: 2.2em;
  color: #344858;
  text-indent: -2.2em;
  font-size: 18px;
  line-height: 1.68;
}

.practice2-doc-section.answer .practice2-doc-content p {
  margin: 0;
  color: #3f5f4e;
  font-size: 0.96em;
  line-height: 1.5;
}

.practice2-doc-section.analysis .practice2-doc-content p {
  color: #4d6378;
}

.practice2-doc-section.detail .practice2-doc-content p {
  color: #5f5b4b;
}

.practice2-doc-section.insight .practice2-doc-content p {
  color: #655d70;
}

.practice2-doc-content p:has(.practice2-insight-label) {
  margin-top: 16px;
  margin-bottom: 8px;
  color: #655d70;
}

.practice2-insight-label {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 1px 9px;
  border: 1px solid rgba(213, 166, 84, 0.5);
  border-radius: 999px;
  background: #fff8e9;
  color: #8a5a13;
  font-size: 0.82em;
  font-weight: 700;
  line-height: 1.45;
}

.practice2-reveal-controls {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
}

.practice2-reveal-button {
  --practice2-reveal-color: #60756c;
  --practice2-reveal-border: rgba(179, 198, 189, 0.72);
  --practice2-reveal-bg: rgba(255, 255, 250, 0.74);
  --practice2-reveal-active-bg: rgba(242, 248, 244, 0.92);
  min-height: 26px;
  padding: 2px 8px;
  border: 1px solid var(--practice2-reveal-border);
  border-radius: 999px;
  background: rgba(255, 255, 250, 0.74);
  color: var(--practice2-reveal-color);
  box-shadow: none;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.practice2-reveal-button[data-practice2-reveal="answer"] {
  --practice2-reveal-color: #4f765f;
  --practice2-reveal-border: rgba(139, 184, 153, 0.62);
  --practice2-reveal-active-bg: rgba(237, 248, 240, 0.94);
}

.practice2-reveal-button[data-practice2-reveal="analysis"] {
  --practice2-reveal-color: #4e6f87;
  --practice2-reveal-border: rgba(132, 168, 194, 0.58);
  --practice2-reveal-active-bg: rgba(238, 246, 251, 0.94);
}

.practice2-reveal-button[data-practice2-reveal="detail"] {
  --practice2-reveal-color: #806033;
  --practice2-reveal-border: rgba(197, 166, 104, 0.56);
  --practice2-reveal-active-bg: rgba(252, 247, 235, 0.96);
}

.practice2-reveal-button:hover,
.practice2-reveal-button.active {
  border-color: var(--practice2-reveal-border);
  background: var(--practice2-reveal-active-bg);
  color: var(--practice2-reveal-color);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.66);
}

.practice2-note-button {
  min-height: 26px;
  padding: 2px 9px;
  border: 1px solid rgba(151, 188, 171, 0.62);
  border-radius: 999px;
  background: rgba(244, 250, 246, 0.82);
  color: #527469;
  box-shadow: none;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.practice2-note-button:hover,
.practice2-note-button.added {
  background: rgba(235, 247, 240, 0.96);
  color: #3f6f5e;
}

.practice2-note-button:disabled {
  opacity: 0.62;
  cursor: default;
}

.practice2-reveal-panel {
  display: none;
  max-height: min(48vh, 520px);
  margin-top: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.practice2-reveal-panel.open {
  display: block;
}

.practice2-focus-side .practice2-focus-reveal-panel,
.practice2-focus-side .practice2-focus-reveal-panel.open {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}

.practice2-reveal-content .practice2-doc-section {
  margin-top: 0;
}

.practice2-choice-figure-grid {
  display: grid;
  gap: 10px 16px;
  width: 100%;
  margin: 10px 0 14px;
}

.practice2-choice-figure-grid.choice-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: min(920px, 100%);
}

.practice2-choice-figure-grid.choice-count-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.practice2-choice-figure-grid.choice-count-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: min(980px, 100%);
}

.practice2-text-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 26px;
  width: 100%;
  max-width: min(760px, 100%);
  margin: 10px 0 12px;
}

.practice2-focus-question .practice2-text-choice-grid {
  --practice2-focus-choice-indent: clamp(28px, 4.4vw, 76px);
  width: calc(100% - var(--practice2-focus-choice-indent));
  max-width: min(1120px, calc(100% - var(--practice2-focus-choice-indent)));
  margin: 18px 0 18px var(--practice2-focus-choice-indent);
  gap: 18px clamp(42px, 6.2vw, 96px);
}

.practice2-focus-question .practice2-text-choice-option {
  grid-template-columns: 34px minmax(0, 1fr);
}

.practice2-choice-figure-option {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  min-height: 132px;
  padding: 8px 10px;
  border: 1px solid rgba(203, 216, 210, 0.78);
  border-radius: 7px;
  background: #ffffff;
}

.practice2-text-choice-option {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: baseline;
  min-width: 0;
  color: #26384c;
  font-family: var(--practice2-cn-font);
  font-size: 1em;
  font-weight: 500;
  line-height: 1.72;
}

.practice2-choice-label {
  align-self: start;
  color: #31506a;
  font-size: 0.95em;
  font-weight: 700;
  line-height: 1.45;
}

/* Text choices use one typographic rhythm; formulas keep the math font only for glyph shaping. */
.practice2-text-choice-option > .practice2-choice-label {
  align-self: baseline;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.practice2-text-choice-option > span:last-child {
  min-width: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.practice2-text-choice-option mjx-container {
  font-size: 1.02em !important;
  vertical-align: -0.05em;
}

.practice2-choice-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.practice2-choice-figure img.figure-img,
.practice2-choice-figure .figure-img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 132px;
  min-width: 0;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.practice2-focus-question .practice2-choice-figure img.figure-img,
.practice2-focus-question .practice2-choice-figure .figure-img {
  max-height: 160px;
}

.practice2-wide-option-grid {
  max-width: min(980px, 100%);
}

.practice2-wide-option-slice {
  display: block;
  width: 100%;
  min-height: 118px;
  background-repeat: no-repeat;
  background-color: #ffffff;
  background-origin: border-box;
  background-clip: border-box;
}

.practice2-doc-content .image-row {
  display: grid;
  gap: 10px 16px;
  width: 100%;
  margin: 10px 0 14px;
}

.practice2-doc-content .image-row.choice-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: min(920px, 100%);
}

.practice2-doc-content .image-row.panel-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: min(920px, 100%);
  margin-inline: auto;
}

.practice2-doc-content .figure-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0;
}

.practice2-doc-content .figure-panel img.figure-img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 260px;
  min-width: 0;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.practice2-doc-content .image-row.choice-count-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.practice2-doc-content .image-row.choice-count-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: min(980px, 100%);
}

.practice2-doc-content .image-row .figure-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 132px;
  padding: 8px 10px;
  border: 1px solid rgba(203, 216, 210, 0.78);
  border-radius: 7px;
  background: #ffffff;
}

.practice2-doc-content .image-row .figure-choice img.figure-img,
.practice2-doc-content .image-row .figure-choice .figure-img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 132px;
  min-width: 0;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.practice2-focus-question .practice2-doc-content .image-row .figure-choice img.figure-img,
.practice2-focus-question .practice2-doc-content .image-row .figure-choice .figure-img {
  max-height: 160px;
}

.practice2-doc-section.stem .practice2-doc-content > img.figure-img,
.practice2-doc-section.stem .practice2-doc-content > .figure-img,
.practice2-doc-section.stem .practice2-doc-content > p > img.figure-img,
.practice2-doc-content > img.figure-img,
.practice2-doc-content > .figure-img,
.practice2-doc-content > p > img.figure-img {
  display: block;
  width: auto;
  min-width: min(340px, 76vw);
  max-width: min(620px, 100%);
  max-height: 360px;
  height: auto;
  margin: 10px auto 12px;
  object-fit: contain;
}

.practice2-doc-content .math,
.practice2-doc-content .math-text,
.practice2-doc-content .inline-symbol,
.practice2-doc-content .math-op,
.practice2-doc-content .geo-symbol {
  color: currentColor;
  font-family: var(--practice2-math-font);
  font-weight: 500;
  letter-spacing: 0;
  text-indent: 0;
}

.practice2-doc-content .math,
.practice2-doc-content .math-text {
  white-space: nowrap;
}

.practice2-doc-content .math-text {
  display: inline-block;
  font-size: 1.03em;
  line-height: 1;
  vertical-align: -0.02em;
}

.practice2-doc-content .fill-blank {
  display: inline-block;
  min-width: 5.2em;
  height: 1.05em;
  margin: 0 0.18em;
  border-bottom: 2px solid rgba(38, 78, 68, 0.58);
  vertical-align: -0.08em;
}

.practice2-doc-content .geo-symbol {
  display: inline-block;
  font-family: var(--practice2-math-font);
  font-weight: 500;
  line-height: 1;
}

.practice2-doc-content .geo-triangle {
  font-size: 1.14em;
  margin: 0 0.02em;
  transform: translateY(0.035em);
}

.practice2-doc-content .math-geometry {
  position: relative;
  display: inline-block;
  min-width: 1em;
  vertical-align: -0.02em;
}

.practice2-doc-content .math-geometry mjx-container {
  position: relative !important;
  display: inline-block !important;
  max-width: none !important;
  overflow: visible !important;
  margin: 0 0.03em !important;
  font-size: 1.06em !important;
}

.practice2-doc-content .geo-angle {
  font-size: 1.08em;
  margin: 0 0.02em;
  transform: translateY(0.02em);
}

.practice2-doc-content .geo-congruent {
  font-size: 1.18em;
  margin: 0 0.08em;
  transform: translateY(0.03em);
}

.practice2-doc-content .geo-perp {
  font-size: 1.1em;
  margin: 0 0.06em;
  transform: translateY(0.02em);
}

.practice2-doc-content .geo-parallel {
  position: relative;
  width: 0.72em;
  height: 1.05em;
  margin: 0 0.1em;
  color: inherit;
  line-height: 1;
  overflow: hidden;
  text-indent: -999px;
  vertical-align: -0.13em;
}

.practice2-doc-content .geo-parallel::before,
.practice2-doc-content .geo-parallel::after {
  content: "";
  position: absolute;
  top: 0.1em;
  bottom: 0.05em;
  width: 0.12em;
  border-radius: 999px;
  background: currentColor;
}

.practice2-doc-content .geo-parallel::before {
  left: 0.2em;
}

.practice2-doc-content .geo-parallel::after {
  right: 0.2em;
}

.practice2-doc-content .math-op {
  display: inline-block;
  font-family: var(--practice2-math-font);
  font-weight: 500;
  line-height: 1;
}

.practice2-doc-content .math-minus {
  min-width: 0.4em;
  margin: 0 0.02em;
  text-align: center;
  font-size: 1em;
  transform: none;
}

.practice2-doc-content img.formula-img-inline,
.practice2-reader img.formula-img-inline {
  display: inline-block;
  width: auto;
  max-width: min(16em, 100%);
  max-height: 1.35em;
  height: 1.12em;
  margin: 0 0.06em;
  border: 0;
  object-fit: contain;
  vertical-align: -0.24em;
  filter: contrast(1.12);
}

.practice2-doc-content .formula-missing {
  padding: 1px 5px;
  border: 1px solid #ffc9c9;
  border-radius: 5px;
  background: #fff5f5;
  color: #c92a2a;
  font-size: 0.92em;
}

.practice2-doc-content .fallback {
  background: #fff8e8;
  border-bottom: 1px dashed #d18a24;
}

.practice2-doc-content img,
.practice2-reader .figure-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px auto;
}

.practice2-paper .docx-table,
.practice2-doc-content .docx-table,
.practice2-reader .docx-table,
.practice2-docx-table {
  width: auto;
  max-width: 100%;
  margin: 12px 0;
  border-collapse: collapse;
  font-family: var(--practice2-cn-font);
  font-size: 17px;
  line-height: 1.65;
}

.practice2-table-scroll {
  max-width: 100%;
  margin: 12px 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.practice2-paper .table-wrap,
.practice2-doc-content .table-wrap {
  max-width: 100%;
  margin: 12px 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.practice2-doc-section.stem .practice2-table-scroll,
.practice2-doc-section.stem .table-wrap {
  width: fit-content;
  max-width: 100%;
}

.practice2-doc-section.stem .docx-table {
  background: #fffefb;
}

.practice2-table-scroll .docx-table,
.practice2-table-scroll .practice2-docx-table {
  margin: 0;
}

.practice2-paper .docx-table th,
.practice2-paper .docx-table td,
.practice2-doc-content .docx-table th,
.practice2-doc-content .docx-table td,
.practice2-reader .docx-table th,
.practice2-reader .docx-table td,
.practice2-docx-table th,
.practice2-docx-table td {
  min-width: 72px;
  padding: 7px 10px;
  border: 1px solid #aebfb7;
  vertical-align: middle;
  text-align: center;
  background: #fffefb;
}

.practice2-paper .docx-table tr:first-child td,
.practice2-paper .docx-table tr:first-child th,
.practice2-doc-content .docx-table tr:first-child td,
.practice2-doc-content .docx-table tr:first-child th {
  background: #f5f9f6;
}

.practice2-reader mjx-container {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  color: currentColor;
  font-size: 100% !important;
  vertical-align: -0.03em;
}

.practice2-empty {
  padding: 26px;
  color: #687a72;
  font-size: 15px;
  line-height: 1.7;
}

.practice2-empty.small {
  padding: 12px;
  border: 1px dashed rgba(190, 207, 199, 0.9);
  border-radius: 7px;
  background: #fbfcf9;
  font-size: 13px;
}

/* iPad 竖屏和常见横屏都优先给知识图完整宽度，避免右栏缩成缩略图。 */
@media (max-width: 1280px) {
  .practice2-hero,
  .practice2-shell {
    width: 100%;
  }

  .practice2-hero {
    flex-direction: column;
  }

  .practice2-shell {
    grid-template-columns: 1fr;
  }

  .practice2-sidebar {
    position: static;
    max-height: none;
  }

  .practice2-paper {
    padding: 22px 18px 28px;
    font-size: 18px;
  }

  .practice2-choice-figure-grid.choice-count-3,
  .practice2-choice-figure-grid.choice-count-4,
  .practice2-doc-content .image-row.choice-count-3,
  .practice2-doc-content .image-row.choice-count-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .practice2-text-choice-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .practice2-doc-section.stem .practice2-doc-content > p:first-child,
  .practice2-doc-section.stem .practice2-doc-content > p.practice2-subquestion {
    font-size: 17px;
    line-height: 1.68;
  }
}

@media (max-width: 560px) {
  .practice2-choice-figure-grid.choice-count-2,
  .practice2-choice-figure-grid.choice-count-3,
  .practice2-choice-figure-grid.choice-count-4,
  .practice2-doc-content .image-row.choice-count-2,
  .practice2-doc-content .image-row.choice-count-3,
  .practice2-doc-content .image-row.choice-count-4,
  .practice2-doc-content .image-row.panel-count-2 {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}

/* Compact achievement cards: final override */
#achievementWall.achievement-wall {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 14px;
}

#achievementWall .achievement-wall-card {
  display: grid;
  grid-template-rows: 112px minmax(0, 1fr);
  gap: 9px;
  min-height: 246px;
  padding: 12px;
  border-radius: 15px;
  overflow: visible;
}

#achievementWall .achievement-badge-frame {
  width: 100%;
  height: 112px;
  aspect-ratio: auto;
  overflow: visible;
  border-radius: 13px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.5) 64%, transparent 65%),
    linear-gradient(180deg, rgba(248, 253, 245, 0.78), rgba(255, 251, 240, 0.48));
}

#achievementWall .achievement-badge-frame img {
  width: 104px;
  height: 104px;
  object-fit: contain;
  object-position: center;
}

#achievementWall .achievement-card-body {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 7px;
  min-width: 0;
}

#achievementWall .achievement-card-head strong {
  display: -webkit-box;
  min-height: 40px;
  overflow: hidden;
  color: #203b34;
  font-size: 18px;
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#achievementWall .achievement-card-tags {
  margin-top: 6px;
  gap: 6px;
}

#achievementWall .achievement-state-pill,
#achievementWall .title-chip {
  padding: 4px 8px;
  font-size: 12px;
}

#achievementWall .achievement-progress-row {
  grid-template-columns: 1fr auto;
  gap: 7px;
  margin-top: 2px;
}

#achievementWall .achievement-card-foot {
  min-height: 20px;
  margin: 0;
  color: #718078;
  font-size: 12px;
}

#achievementWall .achievement-actions {
  margin-top: 0;
}

#achievementWall .achievement-actions button {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 12px;
}

#achievementWall .achievement-hover-detail {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 20;
  display: grid;
  width: min(280px, 78vw);
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(204, 219, 207, 0.95);
  border-radius: 13px;
  background: rgba(255, 255, 250, 0.98);
  box-shadow: 0 16px 34px rgba(45, 62, 54, 0.16);
  color: #30463e;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

#achievementWall .achievement-hover-detail::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 12px;
  height: 12px;
  border-right: 1px solid rgba(204, 219, 207, 0.95);
  border-bottom: 1px solid rgba(204, 219, 207, 0.95);
  background: rgba(255, 255, 250, 0.98);
  transform: translate(-50%, -6px) rotate(45deg);
}

#achievementWall .achievement-hover-detail p {
  margin: 0;
  color: #52635b;
  font-size: 13px;
}

#achievementWall .achievement-hover-detail span {
  color: #66766e;
  font-size: 12px;
}

#achievementWall .achievement-wall-card:hover .achievement-hover-detail {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 1180px) {
  #achievementWall.achievement-wall {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }
}

@media (max-width: 820px) {
  #achievementWall.achievement-wall {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
}

/* Final parchment contract skin. This must stay at the end of the file. */
.profile-dialog.contract-book-dialog {
  width: min(1120px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  max-height: calc(100vh - 24px);
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.profile-dialog.contract-book-dialog form.contract-shell {
  position: relative;
  display: grid;
  width: 100%;
  max-height: calc(100vh - 24px);
  gap: 18px;
  padding: 34px 38px 30px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 3px solid #2b1a0f;
  border-radius: 18px;
  color: #1e2f25;
  font-family: "STKaiti", "KaiTi", "FZKai-Z03", "Songti SC", serif;
  background:
    radial-gradient(circle at 8% 9%, rgba(255, 234, 167, 0.4), transparent 15%),
    radial-gradient(circle at 90% 13%, rgba(54, 30, 14, 0.36), transparent 18%),
    radial-gradient(circle at 8% 88%, rgba(43, 26, 15, 0.4), transparent 18%),
    radial-gradient(circle at 91% 87%, rgba(43, 26, 15, 0.42), transparent 17%),
    repeating-linear-gradient(16deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 8px),
    linear-gradient(135deg, #e2c28a 0%, #cdae78 45%, #b98f52 100%);
  box-shadow:
    inset 0 0 0 2px rgba(224, 183, 92, 0.66),
    inset 0 0 46px rgba(43, 26, 15, 0.6),
    0 28px 70px rgba(23, 15, 8, 0.42);
}

.profile-dialog.contract-book-dialog form.contract-shell::before {
  content: "";
  position: absolute;
  inset: 16px;
  z-index: 0;
  border: 1px solid rgba(107, 67, 31, 0.72);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(224, 183, 92, 0.48), inset 0 0 34px rgba(43, 26, 15, 0.2);
  pointer-events: none;
}

.profile-dialog.contract-book-dialog form.contract-shell::after {
  content: "✦";
  position: absolute;
  right: 24px;
  bottom: 16px;
  z-index: 0;
  color: rgba(122, 46, 27, 0.4);
  font-size: 72px;
  transform: rotate(-12deg);
  pointer-events: none;
}

.profile-dialog.contract-book-dialog .contract-header,
.profile-dialog.contract-book-dialog .contract-summary-card,
.profile-dialog.contract-book-dialog .contract-days-grid,
.profile-dialog.contract-book-dialog .reward-card,
.profile-dialog.contract-book-dialog .signature-panel,
.profile-dialog.contract-book-dialog .contract-book-footer,
.profile-dialog.contract-book-dialog .contract-book-page-actions,
.profile-dialog.contract-book-dialog .parent-praise-dialog-status {
  position: relative;
  z-index: 1;
}

.profile-dialog.contract-book-dialog .contract-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(107, 67, 31, 0.56);
}

.profile-dialog.contract-book-dialog .contract-header::after {
  content: "❦  ◆  ❦";
  position: absolute;
  left: 50%;
  bottom: -14px;
  padding: 0 16px;
  color: #6b431f;
  background: #cdae78;
  font-size: 20px;
  letter-spacing: 8px;
  transform: translateX(-50%);
}

.profile-dialog.contract-book-dialog .contract-kicker {
  color: #5c4a32;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1px;
}

.profile-dialog.contract-book-dialog .contract-kicker i {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(107, 67, 31, 0.55);
  border-radius: 999px;
  color: #e0b75c;
  background: #173d2f;
  box-shadow: inset 0 0 0 2px rgba(224, 183, 92, 0.22);
}

.profile-dialog.contract-book-dialog .contract-header h2 {
  margin: 12px 0 0;
  color: #173d2f;
  font-size: clamp(42px, 5vw, 62px);
  font-weight: 800;
  letter-spacing: 4px;
  text-shadow: 0 1px 0 rgba(255, 232, 169, 0.62), 0 3px 12px rgba(58, 36, 20, 0.18);
}

.profile-dialog.contract-book-dialog .contract-header p {
  color: #5c4a32;
  font-size: 20px;
  font-weight: 800;
}

.profile-dialog.contract-book-dialog .contract-close-button {
  width: 58px;
  height: 58px;
  min-height: 58px;
  border: 2px solid #5c2617;
  border-radius: 999px;
  color: #f5d992;
  background: radial-gradient(circle at 34% 28%, #b8502c, #7a2e1b 62%, #3a2414 100%);
  box-shadow: inset 0 0 0 3px rgba(224, 183, 92, 0.28), 0 10px 20px rgba(43, 26, 15, 0.26);
  font-size: 30px;
}

.profile-dialog.contract-book-dialog .contract-summary-card {
  display: grid;
  grid-template-columns: minmax(150px, 0.82fr) repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 14px;
  border: 2px solid rgba(107, 67, 31, 0.76);
  border-radius: 16px;
  background: rgba(226, 194, 138, 0.42);
  box-shadow: inset 0 0 20px rgba(58, 36, 20, 0.16);
}

.profile-dialog.contract-book-dialog .contract-summary-lead,
.profile-dialog.contract-book-dialog .contract-rule-pill {
  min-height: 78px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.profile-dialog.contract-book-dialog .contract-summary-lead {
  border-right: 1px solid rgba(107, 67, 31, 0.45);
}

.profile-dialog.contract-book-dialog .contract-rule-pill {
  border-left: 1px solid rgba(107, 67, 31, 0.25);
}

.profile-dialog.contract-book-dialog .contract-summary-lead i,
.profile-dialog.contract-book-dialog .contract-rule-pill i,
.profile-dialog.contract-book-dialog .reward-card-copy i {
  width: 42px;
  height: 42px;
  border: 2px solid rgba(107, 67, 31, 0.62);
  border-radius: 999px;
  color: #173d2f;
  background: radial-gradient(circle at 35% 25%, #e0b75c, #a4752c);
  box-shadow: inset 0 0 0 2px rgba(255, 235, 170, 0.18);
}

.profile-dialog.contract-book-dialog .contract-summary-lead strong,
.profile-dialog.contract-book-dialog .contract-rule-pill strong {
  color: #1e2f25;
  font-size: 18px;
  font-weight: 900;
  white-space: nowrap;
}

.profile-dialog.contract-book-dialog .contract-summary-lead span {
  color: #5c4a32;
  font-size: 14px;
}

.profile-dialog.contract-book-dialog .contract-days-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.profile-dialog.contract-book-dialog .contract-day-card {
  position: relative;
  gap: 14px;
  padding: 18px 18px 26px;
  border: 2px solid rgba(107, 67, 31, 0.7);
  border-radius: 12px;
  background:
    radial-gradient(circle at 85% 92%, rgba(122, 46, 27, 0.34), transparent 12%),
    linear-gradient(135deg, rgba(238, 207, 146, 0.94), rgba(191, 146, 80, 0.9));
  box-shadow: inset 0 0 18px rgba(58, 36, 20, 0.16), 0 12px 26px rgba(43, 26, 15, 0.18);
}

.profile-dialog.contract-book-dialog .contract-day-card::before {
  content: "⌘";
  position: absolute;
  top: 8px;
  right: 10px;
  color: rgba(107, 67, 31, 0.36);
  font-size: 20px;
}

.profile-dialog.contract-book-dialog .contract-day-card::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: -12px;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(90, 37, 20, 0.55);
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #b8502c, #7a2e1b 70%);
  box-shadow: inset 0 0 0 3px rgba(224, 183, 92, 0.18), 0 6px 14px rgba(43, 26, 15, 0.24);
}

.profile-dialog.contract-book-dialog .contract-day-card-head strong {
  color: #173d2f;
  font-size: 30px;
}

.profile-dialog.contract-book-dialog .contract-day-card-head span {
  color: #5c4a32;
  font-size: 18px;
}

.profile-dialog.contract-book-dialog .contract-day-progress {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.profile-dialog.contract-book-dialog .day-progress-badge {
  min-height: 82px;
  border: 1px solid rgba(107, 67, 31, 0.45);
  border-radius: 999px;
  color: #173d2f;
  background: rgba(224, 183, 92, 0.34);
  box-shadow: inset 0 0 10px rgba(58, 36, 20, 0.12);
}

.profile-dialog.contract-book-dialog .day-progress-badge i {
  color: #e0b75c;
  background: #204c39;
}

.profile-dialog.contract-book-dialog .day-progress-badge b,
.profile-dialog.contract-book-dialog .day-progress-badge strong {
  color: #173d2f;
  white-space: nowrap;
}

.profile-dialog.contract-book-dialog .contract-day-checklist {
  border-top: 1px dashed rgba(107, 67, 31, 0.55);
}

.profile-dialog.contract-book-dialog .contract-day-checklist span,
.profile-dialog.contract-book-dialog .contract-day-checklist em {
  color: #243a2e;
  font-size: 16px;
  font-weight: 800;
}

.profile-dialog.contract-book-dialog .contract-day-checklist span::before,
.profile-dialog.contract-book-dialog .contract-day-checklist em::before {
  border-color: #6b431f;
  background: rgba(226, 194, 138, 0.82);
}

.profile-dialog.contract-book-dialog .contract-day-checklist span.done::before,
.profile-dialog.contract-book-dialog .contract-day-checklist em.done::before {
  border-color: #173d2f;
  background: #173d2f;
}

.profile-dialog.contract-book-dialog .reward-card {
  display: grid;
  grid-template-columns: minmax(190px, 0.38fr) minmax(0, 1fr);
  border: 2px solid rgba(107, 67, 31, 0.74);
  border-radius: 16px;
  background: radial-gradient(circle at 94% 65%, rgba(32, 76, 57, 0.12), transparent 16%), rgba(226, 194, 138, 0.42);
  box-shadow: inset 0 0 18px rgba(58, 36, 20, 0.14);
}

.profile-dialog.contract-book-dialog .reward-card-copy strong {
  color: #173d2f;
  font-size: 26px;
}

.profile-dialog.contract-book-dialog .reward-card-copy span,
.profile-dialog.contract-book-dialog .reward-card-input small {
  color: #5c4a32;
}

.profile-dialog.contract-book-dialog .reward-card-input textarea,
.profile-dialog.contract-book-dialog .reward-card-input p {
  min-height: 62px;
  border: 0;
  border-bottom: 2px solid rgba(107, 67, 31, 0.72);
  border-radius: 0;
  color: #173d2f;
  background: transparent;
  font-family: "STKaiti", "KaiTi", "FZKai-Z03", "Songti SC", serif;
  font-size: 22px;
  font-weight: 800;
  box-shadow: none;
}

.profile-dialog.contract-book-dialog .signature-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(140px, 0.58fr) minmax(140px, 0.58fr) 128px;
  gap: 14px;
  align-items: center;
  border: 2px solid rgba(107, 67, 31, 0.76);
  border-radius: 18px;
  background: rgba(43, 26, 15, 0.18);
  box-shadow: inset 0 0 22px rgba(43, 26, 15, 0.18);
}

.profile-dialog.contract-book-dialog .contract-agree-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.profile-dialog.contract-book-dialog .contract-agree-line {
  min-height: 48px;
  border: 1px solid rgba(107, 67, 31, 0.68);
  border-radius: 8px;
  color: #1e2f25;
  background: rgba(226, 194, 138, 0.58);
  font-size: 16px;
}

.profile-dialog.contract-book-dialog .contract-agree-line input {
  width: 18px;
  height: 18px;
  accent-color: #173d2f;
}

.profile-dialog.contract-book-dialog .pin-input {
  color: #3a2414;
  font-size: 16px;
}

.profile-dialog.contract-book-dialog .pin-input input {
  border: 1px solid rgba(107, 67, 31, 0.68);
  border-radius: 8px;
  color: #173d2f;
  background: rgba(226, 194, 138, 0.58);
  font-family: Georgia, "Times New Roman", serif;
}

.profile-dialog.contract-book-dialog .primary-contract-button {
  display: grid;
  width: 118px;
  min-width: 118px;
  height: 118px;
  min-height: 118px;
  place-items: center;
  padding: 0 18px;
  border: 3px solid rgba(224, 183, 92, 0.62);
  border-radius: 999px;
  color: #f8eac0;
  background: radial-gradient(circle at 32% 28%, #b8502c, #9b3d24 46%, #7a2e1b 74%, #3a2414 100%);
  box-shadow: inset 0 0 0 5px rgba(43, 26, 15, 0.2), 0 13px 22px rgba(43, 26, 15, 0.34);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.18;
  white-space: normal;
}

.profile-dialog.contract-book-dialog .primary-contract-button:disabled {
  opacity: 0.52;
  filter: grayscale(0.25);
}

.profile-dialog.contract-book-dialog .contract-book-footer {
  color: #3a2414;
  font-size: 18px;
  font-weight: 900;
}

@media (max-width: 1080px) {
  .profile-dialog.contract-book-dialog .signature-panel {
    grid-template-columns: 1fr 1fr 128px;
  }

  .profile-dialog.contract-book-dialog .contract-agree-row {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .profile-dialog.contract-book-dialog form.contract-shell {
    padding: 26px 22px;
  }

  .profile-dialog.contract-book-dialog .contract-summary-card,
  .profile-dialog.contract-book-dialog .contract-days-grid,
  .profile-dialog.contract-book-dialog .reward-card,
  .profile-dialog.contract-book-dialog .signature-panel,
  .profile-dialog.contract-book-dialog .contract-agree-row {
    grid-template-columns: 1fr;
  }

  .profile-dialog.contract-book-dialog .primary-contract-button {
    justify-self: center;
  }
}

/* Parchment contract redesign. Keep after older contract rules. */
.profile-dialog.contract-book-dialog {
  width: min(1080px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 26px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.profile-dialog.contract-book-dialog form.contract-shell {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  gap: 18px;
  max-height: calc(100vh - 26px);
  padding: 34px 38px 30px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 3px solid #2b1a0f;
  border-radius: 18px;
  color: #1e2f25;
  font-family: "STKaiti", "KaiTi", "FZKai-Z03", "Songti SC", serif;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 239, 174, 0.38), transparent 16%),
    radial-gradient(circle at 84% 12%, rgba(75, 39, 15, 0.32), transparent 18%),
    radial-gradient(circle at 8% 88%, rgba(63, 35, 17, 0.34), transparent 19%),
    radial-gradient(circle at 90% 86%, rgba(49, 25, 12, 0.36), transparent 18%),
    repeating-linear-gradient(14deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 7px),
    linear-gradient(135deg, #e2c28a 0%, #cdae78 42%, #b98f52 100%);
  box-shadow:
    inset 0 0 0 2px rgba(224, 183, 92, 0.62),
    inset 0 0 42px rgba(43, 26, 15, 0.58),
    0 28px 70px rgba(23, 15, 8, 0.42);
}

.profile-dialog.contract-book-dialog form.contract-shell::before {
  content: "";
  position: absolute;
  inset: 16px;
  z-index: 0;
  border: 1px solid rgba(107, 67, 31, 0.72);
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 1px rgba(224, 183, 92, 0.48),
    inset 0 0 32px rgba(43, 26, 15, 0.2);
  pointer-events: none;
}

.profile-dialog.contract-book-dialog form.contract-shell::after {
  content: "✦";
  position: absolute;
  right: 24px;
  bottom: 18px;
  z-index: 0;
  color: rgba(122, 46, 27, 0.42);
  font-size: 72px;
  line-height: 1;
  transform: rotate(-12deg);
  pointer-events: none;
}

.profile-dialog.contract-book-dialog .contract-header,
.profile-dialog.contract-book-dialog .contract-summary-card,
.profile-dialog.contract-book-dialog .contract-days-grid,
.profile-dialog.contract-book-dialog .reward-card,
.profile-dialog.contract-book-dialog .signature-panel,
.profile-dialog.contract-book-dialog .contract-book-footer,
.profile-dialog.contract-book-dialog .contract-book-page-actions,
.profile-dialog.contract-book-dialog .parent-praise-dialog-status {
  position: relative;
  z-index: 1;
}

.profile-dialog.contract-book-dialog .contract-header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(107, 67, 31, 0.56);
}

.profile-dialog.contract-book-dialog .contract-header::after {
  content: "❦  ◆  ❦";
  position: absolute;
  left: 50%;
  bottom: -14px;
  padding: 0 16px;
  color: #6b431f;
  background: #cdae78;
  font-size: 20px;
  letter-spacing: 8px;
  transform: translateX(-50%);
}

.profile-dialog.contract-book-dialog .contract-kicker {
  color: #5c4a32;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1px;
}

.profile-dialog.contract-book-dialog .contract-kicker i {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(107, 67, 31, 0.55);
  border-radius: 999px;
  color: #e0b75c;
  background: #173d2f;
  box-shadow: inset 0 0 0 2px rgba(224, 183, 92, 0.22);
}

.profile-dialog.contract-book-dialog .contract-header h2 {
  margin: 12px 0 0;
  color: #173d2f;
  font-family: "STKaiti", "KaiTi", "FZKai-Z03", "Songti SC", serif;
  font-size: clamp(42px, 5.2vw, 62px);
  font-weight: 800;
  letter-spacing: 4px;
  text-shadow: 0 1px 0 rgba(255, 232, 169, 0.6), 0 3px 12px rgba(58, 36, 20, 0.18);
}

.profile-dialog.contract-book-dialog .contract-header p {
  color: #5c4a32;
  font-size: 20px;
  font-weight: 800;
}

.profile-dialog.contract-book-dialog .contract-close-button {
  width: 58px;
  height: 58px;
  min-height: 58px;
  border: 2px solid #5c2617;
  border-radius: 999px;
  color: #f5d992;
  background:
    radial-gradient(circle at 34% 28%, #b8502c, #7a2e1b 62%, #3a2414 100%);
  box-shadow: inset 0 0 0 3px rgba(224, 183, 92, 0.28), 0 10px 20px rgba(43, 26, 15, 0.26);
  font-size: 30px;
}

.profile-dialog.contract-book-dialog .contract-summary-card {
  grid-template-columns: minmax(150px, 0.82fr) repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 14px;
  border: 2px solid rgba(107, 67, 31, 0.76);
  border-radius: 16px;
  background: rgba(226, 194, 138, 0.42);
  box-shadow: inset 0 0 20px rgba(58, 36, 20, 0.16);
}

.profile-dialog.contract-book-dialog .contract-summary-lead,
.profile-dialog.contract-book-dialog .contract-rule-pill {
  min-height: 78px;
  border-radius: 0;
  background: transparent;
}

.profile-dialog.contract-book-dialog .contract-summary-lead {
  border-right: 1px solid rgba(107, 67, 31, 0.45);
}

.profile-dialog.contract-book-dialog .contract-rule-pill {
  border-left: 1px solid rgba(107, 67, 31, 0.25);
}

.profile-dialog.contract-book-dialog .contract-summary-lead i,
.profile-dialog.contract-book-dialog .contract-rule-pill i,
.profile-dialog.contract-book-dialog .reward-card-copy i {
  width: 42px;
  height: 42px;
  border: 2px solid rgba(107, 67, 31, 0.62);
  border-radius: 999px;
  color: #173d2f;
  background: radial-gradient(circle at 35% 25%, #e0b75c, #a4752c);
  box-shadow: inset 0 0 0 2px rgba(255, 235, 170, 0.18);
}

.profile-dialog.contract-book-dialog .contract-summary-lead strong,
.profile-dialog.contract-book-dialog .contract-rule-pill strong {
  color: #1e2f25;
  font-size: 18px;
  font-weight: 900;
}

.profile-dialog.contract-book-dialog .contract-summary-lead span {
  color: #5c4a32;
  font-size: 14px;
}

.profile-dialog.contract-book-dialog .contract-days-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.profile-dialog.contract-book-dialog .contract-day-card {
  position: relative;
  gap: 14px;
  padding: 18px 18px 26px;
  border: 2px solid rgba(107, 67, 31, 0.7);
  border-radius: 12px;
  background:
    radial-gradient(circle at 85% 92%, rgba(122, 46, 27, 0.34), transparent 12%),
    linear-gradient(135deg, rgba(238, 207, 146, 0.94), rgba(191, 146, 80, 0.9));
  box-shadow: inset 0 0 18px rgba(58, 36, 20, 0.16), 0 12px 26px rgba(43, 26, 15, 0.18);
}

.profile-dialog.contract-book-dialog .contract-day-card::before {
  content: "⌘";
  position: absolute;
  top: 8px;
  right: 10px;
  color: rgba(107, 67, 31, 0.36);
  font-size: 20px;
}

.profile-dialog.contract-book-dialog .contract-day-card::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: -12px;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(90, 37, 20, 0.55);
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #b8502c, #7a2e1b 70%);
  box-shadow: inset 0 0 0 3px rgba(224, 183, 92, 0.18), 0 6px 14px rgba(43, 26, 15, 0.24);
}

.profile-dialog.contract-book-dialog .contract-day-card-head strong {
  color: #173d2f;
  font-size: 30px;
}

.profile-dialog.contract-book-dialog .contract-day-card-head span {
  color: #5c4a32;
  font-size: 18px;
}

.profile-dialog.contract-book-dialog .contract-day-progress {
  gap: 8px;
}

.profile-dialog.contract-book-dialog .day-progress-badge {
  min-height: 82px;
  border: 1px solid rgba(107, 67, 31, 0.45);
  border-radius: 999px;
  color: #173d2f;
  background: rgba(224, 183, 92, 0.34);
  box-shadow: inset 0 0 10px rgba(58, 36, 20, 0.12);
}

.profile-dialog.contract-book-dialog .day-progress-badge i {
  color: #e0b75c;
  background: #204c39;
}

.profile-dialog.contract-book-dialog .day-progress-badge b {
  color: #3a2414;
}

.profile-dialog.contract-book-dialog .day-progress-badge strong {
  color: #173d2f;
  font-size: 19px;
}

.profile-dialog.contract-book-dialog .contract-day-checklist {
  border-top: 1px dashed rgba(107, 67, 31, 0.55);
}

.profile-dialog.contract-book-dialog .contract-day-checklist span,
.profile-dialog.contract-book-dialog .contract-day-checklist em {
  color: #243a2e;
  font-size: 16px;
  font-weight: 800;
}

.profile-dialog.contract-book-dialog .contract-day-checklist span::before,
.profile-dialog.contract-book-dialog .contract-day-checklist em::before {
  border-color: #6b431f;
  background: rgba(226, 194, 138, 0.82);
}

.profile-dialog.contract-book-dialog .contract-day-checklist span.done::before,
.profile-dialog.contract-book-dialog .contract-day-checklist em.done::before {
  border-color: #173d2f;
  background: #173d2f;
}

.profile-dialog.contract-book-dialog .reward-card {
  grid-template-columns: minmax(190px, 0.38fr) minmax(0, 1fr);
  border: 2px solid rgba(107, 67, 31, 0.74);
  border-radius: 16px;
  background:
    radial-gradient(circle at 94% 65%, rgba(32, 76, 57, 0.12), transparent 16%),
    rgba(226, 194, 138, 0.42);
  box-shadow: inset 0 0 18px rgba(58, 36, 20, 0.14);
}

.profile-dialog.contract-book-dialog .reward-card-copy strong {
  color: #173d2f;
  font-size: 26px;
}

.profile-dialog.contract-book-dialog .reward-card-copy span,
.profile-dialog.contract-book-dialog .reward-card-input small {
  color: #5c4a32;
}

.profile-dialog.contract-book-dialog .reward-card-input textarea,
.profile-dialog.contract-book-dialog .reward-card-input p {
  min-height: 62px;
  border: 0;
  border-bottom: 2px solid rgba(107, 67, 31, 0.72);
  border-radius: 0;
  color: #173d2f;
  background: transparent;
  font-family: "STKaiti", "KaiTi", "FZKai-Z03", "Songti SC", serif;
  font-size: 22px;
  font-weight: 800;
  box-shadow: none;
}

.profile-dialog.contract-book-dialog .signature-panel {
  grid-template-columns: minmax(220px, 1fr) minmax(140px, 0.58fr) minmax(140px, 0.58fr) 128px;
  gap: 14px;
  align-items: center;
  border: 2px solid rgba(107, 67, 31, 0.76);
  border-radius: 18px;
  background: rgba(43, 26, 15, 0.18);
  box-shadow: inset 0 0 22px rgba(43, 26, 15, 0.18);
}

.profile-dialog.contract-book-dialog .contract-agree-row {
  grid-template-columns: 1fr;
  gap: 9px;
}

.profile-dialog.contract-book-dialog .contract-agree-line {
  min-height: 48px;
  border: 1px solid rgba(107, 67, 31, 0.68);
  border-radius: 8px;
  color: #1e2f25;
  background: rgba(226, 194, 138, 0.58);
  font-size: 16px;
}

.profile-dialog.contract-book-dialog .contract-agree-line input {
  width: 18px;
  height: 18px;
  accent-color: #173d2f;
}

.profile-dialog.contract-book-dialog .pin-input {
  color: #3a2414;
  font-size: 16px;
}

.profile-dialog.contract-book-dialog .pin-input input {
  border: 1px solid rgba(107, 67, 31, 0.68);
  border-radius: 8px;
  color: #173d2f;
  background: rgba(226, 194, 138, 0.58);
  font-family: Georgia, "Times New Roman", serif;
}

.profile-dialog.contract-book-dialog .primary-contract-button {
  display: grid;
  width: 118px;
  min-width: 118px;
  height: 118px;
  min-height: 118px;
  place-items: center;
  padding: 0 18px;
  border: 3px solid rgba(224, 183, 92, 0.62);
  border-radius: 999px;
  color: #f8eac0;
  background:
    radial-gradient(circle at 32% 28%, #b8502c, #9b3d24 46%, #7a2e1b 74%, #3a2414 100%);
  box-shadow: inset 0 0 0 5px rgba(43, 26, 15, 0.2), 0 13px 22px rgba(43, 26, 15, 0.34);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 18px;
  line-height: 1.15;
  white-space: normal;
}

.profile-dialog.contract-book-dialog .primary-contract-button::first-line {
  font-size: 16px;
}

.profile-dialog.contract-book-dialog .primary-contract-button:disabled {
  opacity: 0.52;
  filter: grayscale(0.25);
}

.profile-dialog.contract-book-dialog .contract-book-footer {
  color: #3a2414;
  font-size: 18px;
  font-weight: 900;
}

@media (max-width: 1080px) {
  .profile-dialog.contract-book-dialog .contract-days-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .profile-dialog.contract-book-dialog .signature-panel {
    grid-template-columns: 1fr 1fr 128px;
  }

  .profile-dialog.contract-book-dialog .contract-agree-row {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .profile-dialog.contract-book-dialog form.contract-shell {
    padding: 26px 22px;
  }

  .profile-dialog.contract-book-dialog .contract-summary-card,
  .profile-dialog.contract-book-dialog .contract-days-grid,
  .profile-dialog.contract-book-dialog .reward-card,
  .profile-dialog.contract-book-dialog .signature-panel,
  .profile-dialog.contract-book-dialog .contract-agree-row {
    grid-template-columns: 1fr;
  }

  .profile-dialog.contract-book-dialog .primary-contract-button {
    justify-self: center;
  }
}

/* Final contract layout overrides: keep this after generic dialog styles. */
.profile-dialog.contract-book-dialog {
  width: min(1160px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  max-height: calc(100vh - 28px);
  border: 0;
  border-radius: 24px;
  background: transparent;
  overflow: visible;
}

.profile-dialog.contract-book-dialog form.contract-shell {
  width: 100%;
  box-sizing: border-box;
}

.profile-dialog.contract-book-dialog .contract-summary-card {
  grid-template-columns: minmax(150px, 0.72fr) repeat(3, minmax(0, 1fr));
}

.profile-dialog.contract-book-dialog .contract-days-grid,
.profile-dialog.contract-book-dialog .contract-day-progress {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-dialog.contract-book-dialog .contract-summary-lead strong,
.profile-dialog.contract-book-dialog .contract-rule-pill strong,
.profile-dialog.contract-book-dialog .day-progress-badge b,
.profile-dialog.contract-book-dialog .contract-day-checklist span,
.profile-dialog.contract-book-dialog .contract-day-checklist em {
  word-break: normal;
  overflow-wrap: normal;
}

.profile-dialog.contract-book-dialog .contract-rule-pill strong,
.profile-dialog.contract-book-dialog .day-progress-badge b {
  white-space: nowrap;
}

.profile-dialog.contract-book-dialog .signature-panel {
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto;
}

@media (max-width: 1080px) {
  .profile-dialog.contract-book-dialog {
    width: min(1020px, calc(100vw - 24px));
  }

  .profile-dialog.contract-book-dialog .contract-header h2 {
    font-size: 36px;
  }

  .profile-dialog.contract-book-dialog .contract-summary-card {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .profile-dialog.contract-book-dialog .contract-summary-lead,
  .profile-dialog.contract-book-dialog .contract-rule-pill {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 7px;
  }

  .profile-dialog.contract-book-dialog .contract-summary-lead {
    border-right: 1px dashed rgba(215, 230, 216, 0.95);
    border-bottom: 0;
  }

  .profile-dialog.contract-book-dialog .contract-day-card {
    padding: 14px;
  }

  .profile-dialog.contract-book-dialog .contract-day-card-head strong {
    font-size: 24px;
  }

  .profile-dialog.contract-book-dialog .contract-day-progress {
    gap: 5px;
  }

  .profile-dialog.contract-book-dialog .day-progress-badge {
    min-height: 68px;
    padding: 7px 3px;
  }

  .profile-dialog.contract-book-dialog .day-progress-badge i {
    width: 24px;
    height: 24px;
  }

  .profile-dialog.contract-book-dialog .contract-day-checklist span,
  .profile-dialog.contract-book-dialog .contract-day-checklist em {
    font-size: 13px;
  }
}

@media (max-width: 820px) {
  .profile-dialog.contract-book-dialog .contract-summary-card,
  .profile-dialog.contract-book-dialog .contract-days-grid,
  .profile-dialog.contract-book-dialog .signature-panel {
    grid-template-columns: 1fr;
  }

  .profile-dialog.contract-book-dialog .contract-summary-lead {
    border-right: 0;
    border-bottom: 1px dashed rgba(215, 230, 216, 0.95);
  }
}

#cardPackView {
  display: grid;
  gap: 18px;
}

#cardPackView.hidden {
  display: none;
}

.card-pack-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 18px;
  align-items: stretch;
  padding: 24px;
  border: 1px solid rgba(190, 205, 196, 0.76);
  border-radius: 8px;
  background: #fbfcf7;
  box-shadow: 0 12px 26px rgba(42, 55, 45, 0.08);
}

.card-pack-hero span {
  color: #6a7a70;
  font-size: 13px;
}

.card-pack-hero h2 {
  margin: 4px 0 8px;
  color: #243d34;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0;
}

.card-pack-hero p {
  max-width: 760px;
  margin: 0;
  color: #52635a;
  line-height: 1.75;
}

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

.card-pack-summary div {
  min-height: 78px;
  padding: 14px;
  border: 1px solid rgba(195, 211, 199, 0.86);
  border-radius: 8px;
  background: #ffffff;
}

.card-pack-summary span,
.collection-card-body span,
.collection-card-body small {
  display: block;
  color: #6b7a72;
  font-size: 12px;
}

.card-pack-summary strong {
  display: block;
  margin-top: 6px;
  color: #28483d;
  font-size: 28px;
}

.card-pack-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.card-pack-actions button.active {
  border-color: #35695f;
  color: #ffffff;
  background: #35695f;
}

.card-pack-open-result {
  display: grid;
  gap: 12px;
}

.opened-pack-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #31483f;
}

.opened-card-row,
.card-collection-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 14px;
}

.opened-card,
.collection-card {
  --rarity-border: rgba(193, 208, 198, 0.86);
  --rarity-glow: rgba(38, 52, 43, 0.08);
  --rarity-accent: #5d7468;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rarity-border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 22px var(--rarity-glow);
}

.opened-card::after,
.collection-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

.rarity-common {
  --rarity-border: rgba(193, 208, 198, 0.86);
  --rarity-glow: rgba(38, 52, 43, 0.08);
  --rarity-accent: #5d7468;
}

.rarity-rare {
  --rarity-border: rgba(70, 139, 204, 0.72);
  --rarity-glow: rgba(65, 132, 202, 0.24);
  --rarity-accent: #3377bd;
}

.rarity-epic {
  --rarity-border: rgba(139, 92, 194, 0.76);
  --rarity-glow: rgba(129, 77, 188, 0.26);
  --rarity-accent: #7a4cb6;
}

.rarity-legend {
  --rarity-border: rgba(218, 163, 49, 0.82);
  --rarity-glow: rgba(226, 167, 43, 0.34);
  --rarity-accent: #b87517;
}

.rarity-rare .collection-card-image,
.rarity-rare .pack-result-back {
  background: linear-gradient(145deg, rgba(221, 241, 255, 0.9), rgba(255, 248, 216, 0.85));
}

.rarity-epic .collection-card-image,
.rarity-epic .pack-result-back {
  background: linear-gradient(145deg, rgba(238, 226, 255, 0.95), rgba(255, 239, 213, 0.9));
}

.rarity-legend .collection-card-image,
.rarity-legend .pack-result-back {
  background: linear-gradient(145deg, rgba(255, 245, 199, 0.95), rgba(225, 239, 255, 0.88));
}

.rarity-rare::before,
.rarity-epic::before,
.rarity-legend::before {
  content: "";
  position: absolute;
  inset: -34%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.45;
  background: conic-gradient(from 90deg, transparent, color-mix(in srgb, var(--rarity-accent) 52%, white), transparent 38%);
  animation: cardRarityShimmer 8s linear infinite;
}

.rarity-epic::before {
  opacity: 0.58;
  animation-duration: 6s;
}

.rarity-legend::before {
  opacity: 0.72;
  animation-duration: 4.8s;
}

.opened-card > *,
.collection-card > * {
  position: relative;
  z-index: 2;
}

.opened-card img,
.collection-card-image img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: #eef3ea;
}

.opened-card {
  display: grid;
  gap: 6px;
  padding-bottom: 10px;
}

.opened-card strong,
.opened-card span {
  padding: 0 10px;
}

.opened-card strong {
  color: #29473c;
  font-size: 15px;
}

.opened-card span {
  color: #6f7a73;
  font-size: 12px;
}

.opened-card.new {
  border-color: rgba(198, 166, 78, 0.78);
}

.collection-card.locked {
  opacity: 0.58;
}

.collection-card.locked .collection-card-image {
  background:
    linear-gradient(135deg, rgba(44, 75, 64, 0.08), rgba(198, 166, 78, 0.16)),
    #eef3ea;
}

.collection-card.locked .collection-card-image > span {
  color: transparent;
  text-shadow: 0 0 12px rgba(43, 66, 56, 0.28);
}

.collection-card-image {
  position: relative;
  min-height: 210px;
  background: #eef3ea;
}

.collection-card-image img {
  display: block;
  width: calc(100% + 10px);
  max-width: none;
  margin: -5px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 12px;
  clip-path: inset(5px round 12px);
  cursor: zoom-in;
}

.collection-card-image > span {
  display: grid;
  min-height: 210px;
  place-items: center;
  color: #7b897f;
  font-weight: 700;
}

.collection-card-image em {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(42, 67, 56, 0.82);
  font-size: 12px;
  font-style: normal;
}

.collection-card-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 12px;
}

.collection-card-body strong {
  color: #263f36;
  font-size: 15px;
}

.card-detail-dialog {
  width: min(920px, calc(100vw - 28px));
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: 0 28px 80px rgba(22, 33, 27, 0.24);
}

.card-detail-dialog::backdrop {
  background: rgba(12, 20, 16, 0.42);
}

.card-detail-shell {
  --rarity-border: rgba(193, 208, 198, 0.86);
  --rarity-glow: rgba(38, 52, 43, 0.08);
  --rarity-accent: #5d7468;
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
  gap: 22px;
  padding: 22px;
  border: 1px solid var(--rarity-border);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.58), 0 16px 46px var(--rarity-glow);
  overflow: hidden;
}

.card-detail-shell::before {
  content: "";
  position: absolute;
  inset: -45% -25%;
  opacity: 0.22;
  background: radial-gradient(circle at 28% 18%, color-mix(in srgb, var(--rarity-accent) 32%, transparent), transparent 34%);
  pointer-events: none;
}

.card-detail-shell > * {
  position: relative;
  z-index: 1;
}

.card-detail-image img,
.card-detail-image span {
  display: grid;
  width: 100%;
  aspect-ratio: 2 / 3;
  place-items: center;
  border-radius: 8px;
  object-fit: cover;
  color: #617267;
  background: #eef3ea;
  font-weight: 800;
}

.card-detail-info {
  display: grid;
  align-content: start;
  gap: 12px;
}

.card-detail-info > span {
  width: min(100%, 900px);
  padding: 4px 9px;
  border: 1px solid var(--rarity-border);
  border-radius: 999px;
  color: var(--rarity-accent);
  background: rgba(255,255,255,0.72);
  font-size: 12px;
  font-weight: 800;
}

.card-detail-info h2 {
  margin: 0;
  color: #223b32;
  font-size: 28px;
  letter-spacing: 0;
}

.card-detail-info p {
  margin: 0;
  color: #52645a;
  line-height: 1.7;
}

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

.card-detail-stats div {
  padding: 10px;
  border: 1px solid rgba(210, 222, 214, 0.86);
  border-radius: 8px;
  background: rgba(250, 252, 248, 0.78);
}

.card-detail-stats span,
.card-detail-info small {
  display: block;
  color: #6c7b72;
  font-size: 12px;
}

.card-detail-stats strong {
  display: block;
  margin-top: 4px;
  color: #263f36;
  font-size: 20px;
}

.card-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.duplicate-status {
  margin-top: 6px;
  color: #b42318;
}

.duplicate-side-tag {
  flex: 0 0 auto;
  min-width: 58px;
  padding: 8px 12px;
  border: 1px solid rgba(180, 35, 24, 0.34);
  border-radius: 8px;
  background: #fff0ef;
  color: #b42318;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  box-shadow: 0 8px 20px rgba(180, 35, 24, 0.12);
}

.card-pack-actions button:disabled,
.card-pack-actions button.disabled,
.card-detail-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  filter: grayscale(0.25);
  box-shadow: none;
}

@media (max-width: 1180px) {
  .opened-card-row,
  .card-collection-grid {
    grid-template-columns: repeat(4, minmax(140px, 1fr));
  }
}

@media (max-width: 860px) {
  .card-pack-hero {
    grid-template-columns: 1fr;
  }

  .card-detail-shell {
    grid-template-columns: 1fr;
  }

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

  .opened-card-row,
  .card-collection-grid {
    grid-template-columns: repeat(2, minmax(135px, 1fr));
  }
}

.card-pack-dialog {
  width: min(980px, calc(100vw - 28px));
  max-height: min(860px, calc(100vh - 28px));
  overflow: auto;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

.card-pack-dialog::backdrop {
  background: rgba(24, 35, 31, 0.38);
}

.card-pack-dialog.pack-opening::backdrop {
  animation: packBackdropIn 240ms ease-out both;
}

.card-pack-dialog-shell {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(199, 211, 202, 0.9);
  border-radius: 8px;
  background: #fbfcf7;
  box-shadow: 0 24px 56px rgba(24, 35, 31, 0.28);
}

.card-pack-dialog.pack-opening .card-pack-dialog-shell {
  animation: packDialogIn 320ms cubic-bezier(.22, .7, .22, 1) both;
}

.card-pack-dialog-head,
.opened-pack-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.card-pack-dialog-head span {
  color: #6d7c73;
  font-size: 12px;
}

.card-pack-dialog-head h3 {
  margin: 3px 0 0;
  color: #263f36;
  font-size: 24px;
}

.card-pack-wrapper {
  display: grid;
  place-items: center;
}

.card-pack-cover {
  position: relative;
  display: grid;
  width: min(220px, 52vw);
  aspect-ratio: 2 / 3;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(199, 174, 101, 0.85);
  border-radius: 8px;
  background: #f4efe0;
  box-shadow: 0 18px 34px rgba(86, 69, 34, 0.2);
}

.card-pack-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
  filter: saturate(0.8);
}

.card-pack-cover strong,
.card-pack-cover span {
  position: relative;
  z-index: 1;
  padding: 5px 10px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(37, 60, 51, 0.78);
}

.card-pack-cover strong {
  align-self: end;
  margin-bottom: 8px;
  font-size: 18px;
}

.card-pack-cover span {
  align-self: start;
  font-size: 12px;
}

.card-pack-flip-area {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 14px;
  align-items: start;
  min-height: 390px;
}

.pack-flip-card {
  position: relative;
  min-height: 380px;
  transform: translateY(calc(var(--card-offset) * 20px)) rotate(calc(var(--card-offset) * -4deg));
  transition: transform 0.2s ease;
}

.pack-flip-card:hover,
.pack-flip-card.revealed {
  transform: translateY(0) rotate(0);
}

.pack-card-face {
  position: absolute;
  inset: 0;
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(185, 202, 191, 0.9);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(34, 48, 41, 0.16);
}

.pack-card-back {
  place-items: center;
  cursor: pointer;
  background:
    linear-gradient(135deg, rgba(58, 93, 76, 0.14), rgba(202, 168, 83, 0.2)),
    #f7f5ea;
}

.pack-card-back span {
  color: #324f43;
  font-size: 18px;
  font-weight: 900;
}

.pack-card-front {
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 8px;
  padding-bottom: 10px;
  opacity: 0;
  pointer-events: none;
  transform: rotateY(8deg);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.pack-flip-card.revealed .pack-card-back {
  opacity: 0;
  pointer-events: none;
}

.pack-flip-card.revealed .pack-card-front {
  opacity: 1;
  pointer-events: auto;
  transform: rotateY(0);
}

.pack-card-front img,
.pack-card-placeholder {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: #eef3ea;
}

.pack-card-placeholder {
  display: grid;
  place-items: center;
  color: #607064;
  font-weight: 900;
}

.pack-card-front div,
.pack-card-front button {
  margin: 0 10px;
}

.pack-card-front strong,
.pack-card-front span {
  display: block;
}

.pack-card-front strong {
  color: #263f36;
  font-size: 16px;
}

.pack-card-front span {
  color: #6a7a70;
  font-size: 12px;
}

.pack-flip-card.claimed .pack-card-front button {
  border-color: #9db29f;
  background: #eef4ed;
  color: #506258;
}

@media (max-width: 760px) {
  .card-pack-flip-area {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .pack-flip-card {
    min-height: 430px;
    transform: none;
  }
}

.card-pack-result-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 16px;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.card-pack-result-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.pack-result-card {
  position: relative;
  display: grid;
  aspect-ratio: 2 / 3;
  min-height: auto;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 18px 26px rgba(15, 25, 20, 0.28));
  transform-style: preserve-3d;
  transition: transform 0.22s ease, filter 0.18s ease;
}

.card-pack-dialog.pack-opening .pack-result-card {
  animation: packCardDeal 520ms cubic-bezier(.18, .74, .18, 1) both;
  animation-delay: calc(var(--pack-card-index, 0) * 85ms + 80ms);
}

.pack-result-card:hover {
  transform: translateY(-5px);
  filter: drop-shadow(0 24px 34px rgba(15, 25, 20, 0.34));
}

.pack-result-front {
  position: relative;
  z-index: 2;
  display: grid;
  opacity: 0;
  pointer-events: none;
  transform: rotateY(14deg) scale(0.96);
  transform-origin: 50% 50%;
  transition: opacity 0.2s ease, transform 0.36s cubic-bezier(.22, .72, .18, 1);
}

.pack-result-card.revealed .pack-result-front {
  opacity: 1;
  pointer-events: auto;
  transform: rotateY(0) scale(1);
}

.pack-result-card.revealed {
  animation: packCardRevealSettle 520ms ease-out both;
}

.pack-result-card.revealed::after {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: 1;
  border-radius: 18px;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 246, 196, 0.66), transparent 42%),
    linear-gradient(135deg, rgba(120, 181, 139, 0.18), rgba(214, 168, 79, 0.16));
  animation: packCardGlow 720ms ease-out both;
}

.pack-result-card.rarity-rare::after,
.pack-result-card.rarity-epic::after,
.pack-result-card.rarity-legend::after {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 236, 164, 0.82), transparent 43%),
    linear-gradient(135deg, rgba(104, 155, 205, 0.22), rgba(214, 168, 79, 0.24));
}

.pack-result-back {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  color: #31483f;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
  transition: opacity 0.2s ease, transform 0.34s cubic-bezier(.22, .72, .18, 1), filter 0.18s ease;
  box-shadow: none;
}

.pack-result-card:hover .pack-result-back {
  filter: brightness(1.04) saturate(1.04);
}

.pack-result-back img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  border-radius: 12px;
  clip-path: none;
}

.pack-result-card.revealed .pack-result-back {
  opacity: 0;
  pointer-events: none;
  transform: rotateY(-92deg) scale(0.96);
}

.pack-result-front img,
.pack-result-card .pack-card-placeholder {
  display: block;
  width: calc(100% + 10px);
  max-width: none;
  margin: -5px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: transparent;
  border-radius: 12px;
  clip-path: inset(5px round 12px);
}

.pack-result-card.claimed {
  border-color: rgba(111, 167, 127, 0.8);
  box-shadow: 0 12px 24px rgba(49, 104, 78, 0.16);
  animation: packCardClaimed 520ms ease-out both;
}

.card-pack-result-action {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 220px;
  padding: 0;
  border-left: 0;
}

.card-pack-result-action button {
  min-height: 58px;
  padding: 0 24px;
  border: 1px solid rgba(186, 216, 200, 0.9);
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(180deg, #3d9a78 0%, #236b5e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 12px 26px rgba(22, 72, 59, 0.32);
  font-size: 16px;
  font-weight: 800;
}

.card-pack-result-action button:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 16px 32px rgba(22, 72, 59, 0.38);
}

.card-pack-saved .card-pack-result-action button {
  border-color: rgba(190, 216, 184, 0.95);
  color: #24463b;
  background: linear-gradient(180deg, #eff8ed 0%, #c8dfc3 100%);
}

@keyframes packBackdropIn {
  from {
    background: rgba(24, 35, 31, 0);
  }
}

@keyframes packDialogIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes packCardDeal {
  from {
    opacity: 0;
    transform: translateY(26px) rotate(calc((var(--pack-card-index, 0) - 1) * -5deg)) scale(0.94);
    filter: drop-shadow(0 8px 16px rgba(15, 25, 20, 0.12));
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes packCardRevealSettle {
  0% {
    transform: translateY(0) scale(1);
  }
  45% {
    transform: translateY(-8px) scale(1.025);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes packCardGlow {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  36% {
    opacity: 0.95;
    transform: scale(1.03);
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes packCardClaimed {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  42% {
    transform: translateY(-6px) scale(0.985);
  }
}

.partner-shop-card.purchase-confirmed,
.pet-shop-item.purchase-confirmed,
.supermarket-card.purchase-confirmed {
  border-color: rgba(203, 164, 70, 0.9);
  background: linear-gradient(180deg, #fffdf5 0%, #f7fbf1 100%);
  box-shadow: 0 16px 32px rgba(116, 88, 28, 0.16);
}

.partner-shop-card.purchase-confirmed .shop-card-price,
.supermarket-card.purchase-confirmed .shop-card-price {
  border-color: rgba(204, 157, 45, 0.92);
  color: #ffffff;
  background: linear-gradient(180deg, #d9a332 0%, #9b651d 100%);
  box-shadow: 0 8px 18px rgba(119, 77, 18, 0.24);
}

button.purchase-done {
  border-color: rgba(111, 167, 127, 0.9);
  color: #ffffff;
  background: linear-gradient(180deg, #4f9a70 0%, #2f7655 100%);
  box-shadow: 0 8px 18px rgba(44, 112, 78, 0.24);
}

/* Achievement collection album final pass */
#achievementsView {
  padding: 8px 18px 28px;
  background:
    radial-gradient(circle at 16% 0%, rgba(238, 248, 232, 0.92), transparent 34%),
    linear-gradient(180deg, #f5fbf1 0%, #fffdf5 56%, #eef8ef 100%);
}

#achievementsView .achievement-wall-panel {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 18px;
  border: 1px solid rgba(203, 220, 207, 0.72);
  border-radius: 18px;
  background: rgba(255, 255, 250, 0.92);
  box-shadow: 0 18px 42px rgba(52, 78, 62, 0.11);
}

#achievementsView .achievement-wall-header {
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) repeat(5, minmax(116px, 1fr));
  gap: 10px;
  align-items: stretch;
  padding: 16px;
  border: 1px solid rgba(204, 219, 207, 0.7);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(247, 253, 244, 0.98), rgba(255, 252, 240, 0.94));
}

#achievementsView .achievement-overview-copy {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 88% 52%, rgba(214, 168, 79, 0.18), transparent 34%),
    rgba(255, 255, 252, 0.62);
}

#achievementsView .achievement-overview-copy > span {
  color: #4d725f;
  font-size: 13px;
  font-weight: 900;
}

#achievementWallTitle {
  margin: 4px 0 2px;
  color: #203b34;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: 0;
}

#achievementsView .achievement-overview-copy p {
  max-width: 420px;
  margin: 0;
  color: #607064;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

#achievementsView .achievement-completion,
#achievementWallStats.growth-meta {
  display: contents;
}

#achievementsView .achievement-wall-header article,
#achievementsView .achievement-wall-header .summary-item,
#achievementsView .achievement-wall-header .growth-meta > * {
  min-width: 0;
}

#achievementsView .achievement-wall-header article {
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 86px;
  padding: 12px;
  border: 1px solid rgba(207, 222, 211, 0.66);
  border-radius: 12px;
  background: rgba(255, 255, 252, 0.76);
  box-shadow: none;
}

#achievementsView .achievement-wall-header article:nth-of-type(3) {
  border-color: rgba(214, 168, 79, 0.46);
  background: linear-gradient(180deg, rgba(255, 249, 232, 0.92), rgba(255, 255, 250, 0.78));
}

#achievementsView .achievement-wall-header article span,
#achievementsView .achievement-wall-header article small {
  color: #718178;
  font-size: 12px;
  font-weight: 850;
}

#achievementsView .achievement-wall-header article strong {
  color: #203b34;
  font-size: 25px;
  font-weight: 950;
  line-height: 1.05;
}

#achievementFilters.subject-tabs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgba(206, 222, 211, 0.68);
  border-radius: 14px;
  background: rgba(250, 253, 248, 0.9);
}

#achievementFilters .achievement-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

#achievementFilters button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(197, 216, 202, 0.9);
  border-radius: 999px;
  color: #52675c;
  background: rgba(255, 255, 252, 0.86);
  box-shadow: none;
  font-size: 13px;
  font-weight: 850;
}

#achievementFilters button.active {
  border-color: rgba(71, 145, 102, 0.86);
  color: #ffffff;
  background: linear-gradient(180deg, #5ca878, #2f7655);
  box-shadow: 0 8px 16px rgba(47, 118, 85, 0.18);
}

#achievementFilters button.has-dot::after {
  top: 5px;
  right: 6px;
  background: #d6a84f;
  box-shadow: 0 0 0 3px rgba(214, 168, 79, 0.16);
}

#achievementFilters .achievement-sort-control {
  display: grid;
  gap: 5px;
  min-width: 132px;
  color: #718178;
  font-size: 12px;
  font-weight: 850;
}

#achievementFilters select {
  min-height: 36px;
  padding: 0 34px 0 12px;
  border: 1px solid rgba(197, 216, 202, 0.9);
  border-radius: 10px;
  color: #40544b;
  background: rgba(255, 255, 252, 0.92);
  font: inherit;
}

#achievementWall.achievement-wall {
  display: grid;
  gap: 14px;
}

#achievementWall .achievement-unclaimed-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgba(214, 168, 79, 0.42);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(255, 247, 225, 0.94), rgba(255, 253, 247, 0.96));
  box-shadow: 0 10px 24px rgba(111, 80, 28, 0.08);
}

#achievementWall .achievement-unclaimed-notice > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(214, 168, 79, 0.58);
  border-radius: 12px;
  color: #7a5a1f;
  background: #fff2c8;
  font-size: 20px;
  font-weight: 950;
}

#achievementWall .achievement-unclaimed-notice strong {
  color: #31483f;
  font-size: 17px;
  font-weight: 950;
}

#achievementWall .achievement-unclaimed-notice p {
  margin: 2px 0 0;
  color: #6b735f;
  font-size: 13px;
}

#achievementWall .achievement-unclaimed-notice button {
  min-height: 36px;
  border-radius: 10px;
  color: #745316;
  background: #fff8e2;
  box-shadow: none;
}

#achievementWall .achievement-section {
  display: grid;
  gap: 12px;
  overflow: visible !important;
}

#achievementWall .achievement-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

#achievementWall .achievement-section-head h3 {
  margin: 0;
  color: #263f36;
  font-size: 20px;
  font-weight: 950;
}

#achievementWall .achievement-section-head span {
  color: #718178;
  font-size: 13px;
  font-weight: 850;
}

#achievementWall .achievement-section-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(154px, 1fr)) !important;
  gap: 13px !important;
  align-items: stretch !important;
  overflow: visible !important;
}

#achievementWall .achievement-wall-card {
  position: relative !important;
  display: grid !important;
  grid-template-rows: 92px minmax(74px, 1fr) !important;
  gap: 9px !important;
  min-width: 0 !important;
  min-height: 184px !important;
  height: auto !important;
  padding: 10px !important;
  overflow: visible !important;
  border: 1px solid rgba(203, 220, 207, 0.78) !important;
  border-radius: 14px !important;
  color: #40544b !important;
  background: linear-gradient(180deg, #fbfdf8, #f5faf1) !important;
  box-shadow: 0 10px 24px rgba(49, 76, 58, 0.08) !important;
  cursor: pointer !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease !important;
}

#achievementWall .achievement-wall-card.unlocked,
#achievementWall .achievement-wall-card.pending_unlock {
  border-color: rgba(214, 168, 79, 0.46) !important;
  background:
    radial-gradient(circle at 86% 10%, rgba(214, 168, 79, 0.18), transparent 30%),
    linear-gradient(180deg, #fffdf4, #f7fff2) !important;
}

#achievementWall .achievement-wall-card.in_progress,
#achievementWall .achievement-wall-card.not_started {
  background: linear-gradient(180deg, #f8faf6, #f2f5ef) !important;
}

#achievementWall .achievement-wall-card.hidden-locked {
  border-style: dashed !important;
  background: linear-gradient(180deg, #f3f6f0, #eef2eb) !important;
}

#achievementWall .achievement-wall-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(95, 155, 118, 0.7) !important;
  box-shadow: 0 16px 30px rgba(37, 51, 45, 0.14) !important;
}

#achievementWall .achievement-badge-frame {
  display: grid !important;
  width: 100% !important;
  height: 92px !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(214, 225, 216, 0.72) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.5) 58%, transparent 59%),
    linear-gradient(180deg, rgba(249, 253, 246, 0.96), rgba(255, 250, 236, 0.74)) !important;
}

#achievementWall .achievement-badge-frame img {
  display: block !important;
  width: 74px !important;
  height: 74px !important;
  object-fit: contain !important;
  object-position: center !important;
  mix-blend-mode: normal !important;
}

#achievementWall .achievement-wall-card.in_progress .achievement-badge-frame img,
#achievementWall .achievement-wall-card.not_started .achievement-badge-frame img,
#achievementWall .achievement-wall-card.hidden-locked .achievement-badge-frame img {
  opacity: 0.68 !important;
  filter: grayscale(0.82) saturate(0.58) !important;
}

#achievementWall .achievement-card-body {
  position: static !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

#achievementWall .achievement-card-head {
  display: block !important;
}

#achievementWall .achievement-card-head > div {
  min-width: 0;
}

#achievementWall .achievement-card-title {
  display: -webkit-box !important;
  min-height: 35px !important;
  overflow: hidden !important;
  color: #263f36 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.18 !important;
  text-align: center !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

#achievementWall .achievement-card-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 5px !important;
  margin: 1px 0 0 !important;
}

#achievementWall .achievement-state-pill,
#achievementWall .title-chip {
  min-width: 0 !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

#achievementWall .achievement-card-status-line {
  overflow: hidden;
  color: #718178;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#achievementWall .achievement-tile-progress {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(218, 228, 219, 0.86);
}

#achievementWall .achievement-tile-progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--achievement-progress, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, #63a978, #d6a84f);
}

#achievementWall .achievement-progress-row,
#achievementWall .achievement-card-foot,
#achievementWall .achievement-actions,
#achievementWall .hidden-achievement-clue {
  display: none !important;
}

#achievementWall .equipped-ribbon {
  display: grid !important;
  position: absolute !important;
  left: 8px !important;
  top: 8px !important;
  z-index: 2 !important;
  min-height: 20px !important;
  padding: 0 7px !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: #4f9a70 !important;
  box-shadow: 0 4px 10px rgba(47, 118, 85, 0.18) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

#achievementWall .achievement-wall-card.unlocked::after,
#achievementWall .achievement-wall-card.pending_unlock::after {
  top: 8px !important;
  right: 8px !important;
  width: 10px !important;
  height: 10px !important;
}

#achievementWall .achievement-lock-mark {
  width: 48px !important;
  height: 48px !important;
  color: #7b887f !important;
  font-size: 20px !important;
}

#achievementWall .achievement-hover-detail {
  left: 50% !important;
  bottom: calc(100% + 12px) !important;
  z-index: 90 !important;
  display: grid !important;
  width: min(280px, 82vw) !important;
  gap: 6px !important;
  padding: 12px !important;
  border: 1px solid rgba(204, 219, 207, 0.95) !important;
  border-radius: 12px !important;
  color: #30463e !important;
  background: rgba(255, 255, 250, 0.98) !important;
  box-shadow: 0 18px 38px rgba(45, 62, 54, 0.18) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  text-align: left !important;
  transform: translate(-50%, 6px) !important;
}

#achievementWall .achievement-wall-card:hover .achievement-hover-detail {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

body[data-current-view="achievements"] .floating-pet {
  display: none;
}

@media (max-width: 1120px) {
  #achievementsView .achievement-wall-header {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #achievementsView .achievement-overview-copy {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  #achievementsView {
    padding: 6px 10px 22px;
  }

  #achievementsView .achievement-wall-panel {
    padding: 12px;
    border-radius: 14px;
  }

  #achievementsView .achievement-wall-header {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
  }

  #achievementsView .achievement-wall-header article {
    min-height: 74px;
    padding: 10px;
  }

  #achievementsView .achievement-wall-header article strong {
    font-size: 21px;
  }

  #achievementFilters.subject-tabs {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  #achievementFilters .achievement-sort-control {
    min-width: 0;
  }

  #achievementWall .achievement-unclaimed-notice {
    grid-template-columns: auto minmax(0, 1fr);
  }

  #achievementWall .achievement-unclaimed-notice button {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  #achievementWall .achievement-section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #achievementWall .achievement-wall-card {
    grid-template-rows: 82px minmax(82px, 1fr) !important;
    min-height: 178px !important;
    padding: 8px !important;
  }

  #achievementWall .achievement-badge-frame {
    height: 82px !important;
  }

  #achievementWall .achievement-badge-frame img {
    width: 66px !important;
    height: 66px !important;
  }

  #achievementWall .achievement-card-title {
    font-size: 14px !important;
  }

  #achievementWall .achievement-hover-detail {
    display: none !important;
  }
}

@media (max-width: 380px) {
  #achievementWall .achievement-section-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Achievement collection mobile final override */
@media (max-width: 520px) {
  body[data-current-view="achievements"] #achievementsView {
    padding-inline: 6px !important;
  }

  body[data-current-view="achievements"] #achievementWall .achievement-section-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body[data-current-view="achievements"] #achievementWall .achievement-wall-card {
    grid-template-columns: 86px minmax(0, 1fr) !important;
    grid-template-rows: minmax(118px, auto) !important;
    align-items: center !important;
    min-height: 136px !important;
    width: 100% !important;
  }

  body[data-current-view="achievements"] #achievementWall .achievement-badge-frame {
    height: 86px !important;
  }

  body[data-current-view="achievements"] #achievementWall .achievement-card-title {
    min-height: 0 !important;
    text-align: left !important;
  }

  body[data-current-view="achievements"] #achievementWall .achievement-card-tags,
  body[data-current-view="achievements"] #achievementWall .achievement-card-status-line {
    justify-content: flex-start !important;
    text-align: left !important;
  }
}

@media (max-width: 520px) {
  #achievementsView {
    padding-inline: 6px;
  }

  #achievementWall .achievement-section-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #achievementWall .achievement-wall-card {
    grid-template-columns: 86px minmax(0, 1fr) !important;
    grid-template-rows: minmax(118px, auto) !important;
    align-items: center !important;
    min-height: 136px !important;
  }

  #achievementWall .achievement-badge-frame {
    height: 86px !important;
  }

  #achievementWall .achievement-card-title {
    min-height: 0 !important;
    text-align: left !important;
  }

  #achievementWall .achievement-card-tags,
  #achievementWall .achievement-card-status-line {
    justify-content: flex-start !important;
    text-align: left !important;
  }
}

@media (max-width: 860px) {
  .card-pack-result-shell {
    grid-template-columns: 1fr;
  }

  .card-pack-result-action {
    min-height: auto;
    border-top: 0;
    border-left: 0;
  }
}

@media (max-width: 680px) {
  .card-pack-result-cards {
    grid-template-columns: 1fr;
  }
}

.card-image-preview-dialog {
  width: min(520px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.card-image-preview-dialog::backdrop {
  background: rgba(16, 24, 21, 0.62);
}

.card-image-preview-dialog img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 36px);
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.32);
}

.card-preview-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.68);
  color: #ffffff;
  background: rgba(25, 38, 32, 0.58);
}

/* Achievement icon-wall trial: real final override */
#achievementWall .achievement-section-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)) !important;
  gap: 13px !important;
  align-items: start !important;
  overflow: visible !important;
}

#achievementWall .achievement-section {
  overflow: visible !important;
}

#achievementWall .achievement-wall-card {
  grid-template-rows: 1fr !important;
  min-height: 98px !important;
  height: 98px !important;
  padding: 8px !important;
  border-radius: 16px !important;
  overflow: visible !important;
  cursor: pointer !important;
}

#achievementWall .achievement-wall-card.in_progress,
#achievementWall .achievement-wall-card.not_started {
  background: linear-gradient(180deg, #f8faf6, #f2f5ef) !important;
}

#achievementWall .achievement-wall-card.in_progress .achievement-badge-frame,
#achievementWall .achievement-wall-card.not_started .achievement-badge-frame {
  opacity: 0.48 !important;
  filter: grayscale(0.92) saturate(0.55) !important;
}

#achievementWall .achievement-wall-card.unlocked,
#achievementWall .achievement-wall-card.pending_unlock {
  border-color: rgba(214, 168, 79, 0.5) !important;
  background: linear-gradient(180deg, #fffdf4, #f7fff2) !important;
  box-shadow: 0 10px 22px rgba(61, 89, 70, 0.08) !important;
}

#achievementWall .achievement-badge-frame {
  height: 82px !important;
  aspect-ratio: auto !important;
  border-radius: 13px !important;
  background: transparent !important;
}

#achievementWall .achievement-badge-frame img {
  width: 76px !important;
  height: 76px !important;
  object-fit: contain !important;
  object-position: center !important;
}

#achievementWall .achievement-card-body {
  position: static !important;
  display: block !important;
  min-height: 0 !important;
}

#achievementWall .achievement-card-head,
#achievementWall .achievement-progress-row,
#achievementWall .achievement-card-foot,
#achievementWall .achievement-actions,
#achievementWall .hidden-achievement-clue,
#achievementWall .equipped-ribbon {
  display: none !important;
}

#achievementWall .achievement-hover-detail {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 12px) !important;
  z-index: 80 !important;
  display: grid !important;
  width: 270px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, 6px) !important;
}

#achievementWall .achievement-wall-card:hover .achievement-hover-detail {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

#achievementWall .achievement-wall-card {
  background: linear-gradient(180deg, #fbfdf7, #f5faf1) !important;
  border-color: rgba(203, 220, 207, 0.74) !important;
}

#achievementWall .achievement-badge-frame {
  background: #f7fbf2 !important;
}

#achievementWall .achievement-badge-frame img {
  mix-blend-mode: multiply;
}

#achievementWall .achievement-wall-card.unlocked .achievement-badge-frame img,
#achievementWall .achievement-wall-card.pending_unlock .achievement-badge-frame img,
#achievementWall .achievement-wall-card:hover .achievement-badge-frame img {
  mix-blend-mode: normal;
}

#achievementWall .achievement-wall-card.hidden-locked .achievement-badge-frame {
  opacity: 0.56 !important;
  filter: grayscale(0.95) saturate(0.5) !important;
}

#achievementWall .achievement-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 13px;
  align-items: start;
  overflow: visible;
}

#achievementWall .achievement-section {
  overflow: visible;
}

#achievementWall .achievement-wall-card {
  grid-template-rows: 1fr;
  min-height: 98px;
  height: 98px;
  padding: 8px;
  border-radius: 16px;
  overflow: visible;
  cursor: pointer;
}

#achievementWall .achievement-wall-card.in_progress,
#achievementWall .achievement-wall-card.not_started {
  background: linear-gradient(180deg, #f8faf6, #f2f5ef);
}

#achievementWall .achievement-wall-card.in_progress .achievement-badge-frame,
#achievementWall .achievement-wall-card.not_started .achievement-badge-frame {
  opacity: 0.48;
  filter: grayscale(0.92) saturate(0.55);
}

#achievementWall .achievement-wall-card.unlocked,
#achievementWall .achievement-wall-card.pending_unlock {
  border-color: rgba(214, 168, 79, 0.5);
  background: linear-gradient(180deg, #fffdf4, #f7fff2);
  box-shadow: 0 10px 22px rgba(61, 89, 70, 0.08);
}

#achievementWall .achievement-wall-card.unlocked::after,
#achievementWall .achievement-wall-card.pending_unlock::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff8df;
  border-radius: 50%;
  background: #d6a84f;
  box-shadow: 0 0 0 3px rgba(214, 168, 79, 0.16);
}

#achievementWall .achievement-wall-card.equipped-title::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6fa77f;
  box-shadow: 0 0 0 3px rgba(111, 167, 127, 0.16);
}

#achievementWall .achievement-badge-frame {
  height: 82px;
  border-radius: 13px;
  background: transparent;
}

#achievementWall .achievement-badge-frame img {
  width: 76px;
  height: 76px;
}

#achievementWall .achievement-lock-mark {
  width: 54px;
  height: 54px;
  font-size: 22px;
}

#achievementWall .achievement-card-body {
  position: static;
  display: block;
  min-height: 0;
}

#achievementWall .achievement-card-head,
#achievementWall .achievement-progress-row,
#achievementWall .achievement-card-foot,
#achievementWall .achievement-actions,
#achievementWall .hidden-achievement-clue {
  display: none;
}

#achievementWall .equipped-ribbon {
  display: none;
}

#achievementWall .achievement-hover-detail {
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: 80;
  width: 270px;
  gap: 6px;
  text-align: left;
}

#achievementWall .achievement-wall-card:hover {
  transform: translateY(-2px);
  border-color: rgba(111, 167, 127, 0.6);
  box-shadow: 0 14px 28px rgba(37, 51, 45, 0.12);
}

#achievementWall .achievement-wall-card:hover .achievement-badge-frame {
  opacity: 1;
  filter: none;
}

#achievementWall .achievement-wall-card:hover .achievement-hover-detail {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 1180px) {
  #achievementWall .achievement-section-grid {
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  }

  #achievementWall .achievement-wall-card {
    height: 92px;
    min-height: 92px;
  }

  #achievementWall .achievement-badge-frame {
    height: 76px;
  }

  #achievementWall .achievement-badge-frame img {
    width: 70px;
    height: 70px;
  }
}

/* Wrong review page refresh */
#wrongReviewView {
  padding: 8px 18px 24px;
  background:
    radial-gradient(circle at 16% 0%, rgba(234, 247, 231, 0.92), transparent 34%),
    linear-gradient(180deg, #f3faf1 0%, #fffdf4 58%, #eef8ee 100%);
}

#wrongReviewView .wrong-review-panel {
  position: relative;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 18px;
  border: 1px solid rgba(204, 219, 207, 0.72);
  border-radius: 18px;
  background: rgba(255, 255, 250, 0.9);
  box-shadow: 0 16px 38px rgba(55, 84, 67, 0.1);
}

#wrongReviewView .safety-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(204, 219, 207, 0.68);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(248, 253, 245, 0.96), rgba(255, 252, 242, 0.9));
}

#wrongReviewView .safety-header h2 {
  margin: 0;
  color: #203b34;
  font-size: 26px;
}

#wrongReviewView .safety-header p {
  max-width: 760px;
  margin: 6px 0 0;
  color: #607064;
  font-size: 14px;
  line-height: 1.55;
}

#wrongReviewView .safety-header button {
  min-height: 42px;
  padding: 0 18px;
  border-color: rgba(111, 167, 127, 0.62);
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fff5, #e7f4e7);
  color: #315f43;
  font-weight: 850;
  box-shadow: 0 8px 18px rgba(73, 112, 86, 0.1);
}

#wrongReviewView .wrong-review-rule-card {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 12;
  margin: 0;
}

#wrongReviewView .wrong-review-help {
  display: grid;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(178, 205, 184, 0.72);
  border-radius: 50%;
  background: rgba(248, 253, 245, 0.86);
  box-shadow: none;
  color: #6f8a7b;
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
}

#wrongReviewView .wrong-review-rule-card > div {
  position: absolute;
  top: 36px;
  right: 0;
  display: grid;
  width: min(430px, calc(100vw - 48px));
  gap: 8px;
  padding: 13px 14px;
  border: 1px solid rgba(214, 225, 210, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 251, 0.98);
  box-shadow: 0 16px 34px rgba(55, 84, 67, 0.13);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

#wrongReviewView .wrong-review-rule-card:hover > div,
#wrongReviewView .wrong-review-rule-card:focus-within > div {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#wrongReviewView .wrong-review-rule-card strong {
  color: #315f43;
  font-size: 15px;
}

#wrongReviewView .wrong-review-rule-card p {
  margin: 5px 0 0;
  color: #66766e;
  font-size: 13px;
  line-height: 1.55;
}

#wrongReviewView .wrong-review-rule-steps {
  display: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  max-width: 420px;
}

#wrongReviewView .wrong-review-rule-card:hover .wrong-review-rule-steps,
#wrongReviewView .wrong-review-rule-card:focus-within .wrong-review-rule-steps {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#wrongReviewView .wrong-review-rule-steps span {
  padding: 5px 9px;
  border: 1px solid rgba(191, 211, 194, 0.86);
  border-radius: 999px;
  background: #fffffb;
  color: #526b5c;
  font-size: 12px;
  font-weight: 800;
}

#wrongReviewView #wrongReviewSummary.import-summary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

#wrongReviewView .summary-item {
  min-height: 66px;
  padding: 10px 12px;
  border-color: rgba(204, 219, 207, 0.74);
  border-radius: 13px;
  background: rgba(255, 255, 251, 0.82);
  box-shadow: none;
}

#wrongReviewView button.summary-item:hover,
#wrongReviewView button.summary-item.active {
  border-color: rgba(111, 167, 127, 0.66);
  background: #eef8ec;
}

#wrongReviewView .summary-item span {
  color: #607064;
  font-size: 12px;
  font-weight: 760;
}

#wrongReviewView .summary-item strong {
  margin-top: 5px;
  color: #203b34;
  font-size: 24px;
}

#wrongReviewView .wrong-review-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px 230px;
  gap: 12px;
  align-items: end;
  margin: 0 0 14px;
  padding: 13px;
  border: 1px solid rgba(204, 219, 207, 0.72);
  border-radius: 16px;
  background: rgba(255, 255, 251, 0.82);
}

#wrongReviewView .wrong-review-filters .subject-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#wrongReviewView .wrong-review-filters .subject-tabs button {
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border-color: rgba(204, 219, 207, 0.88);
  background: #fffffb;
  color: #526b5c;
  font-weight: 800;
}

#wrongReviewView .wrong-review-filters .subject-tabs button.active {
  border-color: #5f9b76;
  background: #5f9b76;
  color: #fff;
}

#wrongReviewView .wrong-review-filters label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #607064;
  font-size: 13px;
  font-weight: 760;
}

#wrongReviewView .wrong-review-filters select {
  height: 42px;
  border-radius: 12px;
  border-color: rgba(177, 202, 184, 0.9);
  background-color: #fffffb;
}

#wrongReviewView .wrong-review-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

#wrongReviewView .wrong-review-item {
  display: grid;
  grid-template-columns: minmax(250px, 320px) minmax(430px, 1fr) minmax(132px, 146px);
  gap: 16px;
  align-items: center;
  min-height: 210px;
  padding: 16px 18px;
  border: 1px solid rgba(204, 219, 207, 0.74);
  border-radius: 18px;
  background: rgba(255, 255, 251, 0.9);
  box-shadow: 0 8px 18px rgba(55, 84, 67, 0.045);
}

#wrongReviewView .wrong-review-item:hover {
  border-color: rgba(111, 167, 127, 0.55);
  background: #fbfef8;
}

#wrongReviewView .wrong-review-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  align-self: stretch;
}

#wrongReviewView .wrong-review-item .paper-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 330px;
  max-height: none;
  margin: 4px 0 8px;
  overflow: visible;
}

#wrongReviewView .wrong-review-item .badge {
  padding: 4px 9px;
  border-color: rgba(186, 211, 192, 0.82);
  border-radius: 999px;
  background: #f8fcf4;
  color: #486456;
  font-size: 12px;
}

#wrongReviewView .wrong-review-item h2 {
  margin: 0 0 4px;
  color: #203b34;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: 0;
}

#wrongReviewView .wrong-review-item p {
  margin: auto 0 0;
  color: #52635b;
  font-size: 15px;
  font-weight: 780;
}

#wrongReviewView .wrong-review-actions {
  display: grid;
  gap: 8px;
  min-width: 0;
  align-self: center;
}

#wrongReviewView .wrong-review-actions button {
  width: 100%;
  min-height: 38px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 820;
}

#wrongReviewView .wrong-review-actions button:first-child {
  border-color: rgba(111, 167, 127, 0.68);
  background: #edf8ed;
  color: #315f43;
}

#wrongReviewView .wrong-review-actions button.secondary {
  border-color: rgba(186, 202, 191, 0.9);
  background: #fffffb;
  color: #52635b;
}

#wrongReviewView .wrong-review-actions button.danger {
  border-color: rgba(209, 139, 124, 0.58);
  background: #fff6f2;
  color: #8c4b3e;
}

#wrongReviewView .wrong-review-actions button.danger:hover {
  border-color: rgba(191, 104, 89, 0.72);
  background: #ffebe4;
  color: #78392f;
}

#wrongReviewView .wrong-review-thumb {
  display: block;
  width: 100%;
  max-height: 176px;
  object-fit: contain;
  border: 1px solid rgba(199, 216, 203, 0.9);
  border-radius: 12px;
  background: #fff;
}

#wrongReviewView .wrong-review-preview {
  display: grid;
  place-items: center;
  min-height: 184px;
  border: 1px solid rgba(215, 226, 215, 0.72);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 251, 0.96), rgba(243, 250, 240, 0.86));
}

#wrongReviewView .wrong-review-preview span {
  color: #8a978c;
  font-size: 13px;
  font-weight: 760;
}

@media (max-width: 900px) {
  .partner-shop-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  #wrongReviewView .safety-header,
  #wrongReviewView .wrong-review-rule-card,
  #wrongReviewView .wrong-review-filters,
  #wrongReviewView .wrong-review-item {
    grid-template-columns: 1fr;
  }

  #wrongReviewView .wrong-review-item {
    min-height: 0;
  }

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

  #wrongReviewView .wrong-review-rule-card {
    top: 12px;
    right: 12px;
  }
}

/* Achievement icon-wall trial */
#achievementWall .achievement-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 13px;
  align-items: start;
  overflow: visible;
}

#achievementWall .achievement-section {
  overflow: visible;
}

#achievementWall .achievement-wall-card {
  grid-template-rows: 1fr;
  min-height: 98px;
  height: 98px;
  padding: 8px;
  border-radius: 16px;
  overflow: visible;
  cursor: pointer;
}

#achievementWall .achievement-wall-card.in_progress,
#achievementWall .achievement-wall-card.not_started {
  background: linear-gradient(180deg, #f8faf6, #f2f5ef);
}

#achievementWall .achievement-wall-card.in_progress .achievement-badge-frame,
#achievementWall .achievement-wall-card.not_started .achievement-badge-frame {
  opacity: 0.48;
  filter: grayscale(0.92) saturate(0.55);
}

#achievementWall .achievement-wall-card.unlocked,
#achievementWall .achievement-wall-card.pending_unlock {
  border-color: rgba(214, 168, 79, 0.5);
  background: linear-gradient(180deg, #fffdf4, #f7fff2);
  box-shadow: 0 10px 22px rgba(61, 89, 70, 0.08);
}

#achievementWall .achievement-wall-card.unlocked::after,
#achievementWall .achievement-wall-card.pending_unlock::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff8df;
  border-radius: 50%;
  background: #d6a84f;
  box-shadow: 0 0 0 3px rgba(214, 168, 79, 0.16);
}

#achievementWall .achievement-wall-card.equipped-title::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6fa77f;
  box-shadow: 0 0 0 3px rgba(111, 167, 127, 0.16);
}

#achievementWall .achievement-badge-frame {
  height: 82px;
  border-radius: 13px;
  background: transparent;
}

#achievementWall .achievement-badge-frame img {
  width: 76px;
  height: 76px;
}

#achievementWall .achievement-lock-mark {
  width: 54px;
  height: 54px;
  font-size: 22px;
}

#achievementWall .achievement-card-body {
  position: static;
  display: block;
  min-height: 0;
}

#achievementWall .achievement-card-head,
#achievementWall .achievement-progress-row,
#achievementWall .achievement-card-foot,
#achievementWall .achievement-actions,
#achievementWall .hidden-achievement-clue {
  display: none;
}

#achievementWall .equipped-ribbon {
  display: none;
}

#achievementWall .achievement-hover-detail {
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: 80;
  width: 270px;
  gap: 6px;
  text-align: left;
}

#achievementWall .achievement-wall-card:hover {
  transform: translateY(-2px);
  border-color: rgba(111, 167, 127, 0.6);
  box-shadow: 0 14px 28px rgba(37, 51, 45, 0.12);
}

#achievementWall .achievement-wall-card:hover .achievement-badge-frame {
  opacity: 1;
  filter: none;
}

#achievementWall .achievement-wall-card:hover .achievement-hover-detail {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 1180px) {
  #achievementWall .achievement-section-grid {
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  }

  #achievementWall .achievement-wall-card {
    height: 92px;
    min-height: 92px;
  }

  #achievementWall .achievement-badge-frame {
    height: 76px;
  }

  #achievementWall .achievement-badge-frame img {
    width: 70px;
    height: 70px;
  }
}

/* Achievement icon-wall trial: final override */
#achievementWall .achievement-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 13px;
  align-items: start;
  overflow: visible;
}

#achievementWall .achievement-section {
  overflow: visible;
}

#achievementWall .achievement-wall-card {
  grid-template-rows: 1fr;
  min-height: 98px;
  height: 98px;
  padding: 8px;
  border-radius: 16px;
  overflow: visible;
  cursor: pointer;
}

#achievementWall .achievement-wall-card.in_progress,
#achievementWall .achievement-wall-card.not_started {
  background: linear-gradient(180deg, #f8faf6, #f2f5ef);
}

#achievementWall .achievement-wall-card.in_progress .achievement-badge-frame,
#achievementWall .achievement-wall-card.not_started .achievement-badge-frame {
  opacity: 0.48;
  filter: grayscale(0.92) saturate(0.55);
}

#achievementWall .achievement-wall-card.unlocked,
#achievementWall .achievement-wall-card.pending_unlock {
  border-color: rgba(214, 168, 79, 0.5);
  background: linear-gradient(180deg, #fffdf4, #f7fff2);
  box-shadow: 0 10px 22px rgba(61, 89, 70, 0.08);
}

#achievementWall .achievement-wall-card.unlocked::after,
#achievementWall .achievement-wall-card.pending_unlock::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff8df;
  border-radius: 50%;
  background: #d6a84f;
  box-shadow: 0 0 0 3px rgba(214, 168, 79, 0.16);
}

#achievementWall .achievement-wall-card.equipped-title::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6fa77f;
  box-shadow: 0 0 0 3px rgba(111, 167, 127, 0.16);
}

#achievementWall .achievement-badge-frame {
  height: 82px;
  border-radius: 13px;
  background: transparent;
}

#achievementWall .achievement-badge-frame img {
  width: 76px;
  height: 76px;
}

#achievementWall .achievement-lock-mark {
  width: 54px;
  height: 54px;
  font-size: 22px;
}

#achievementWall .achievement-card-body {
  position: static;
  display: block;
  min-height: 0;
}

#achievementWall .achievement-card-head,
#achievementWall .achievement-progress-row,
#achievementWall .achievement-card-foot,
#achievementWall .achievement-actions,
#achievementWall .hidden-achievement-clue {
  display: none;
}

#achievementWall .equipped-ribbon {
  display: none;
}

#achievementWall .achievement-hover-detail {
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: 80;
  width: 270px;
  gap: 6px;
  text-align: left;
}

#achievementWall .achievement-wall-card:hover {
  transform: translateY(-2px);
  border-color: rgba(111, 167, 127, 0.6);
  box-shadow: 0 14px 28px rgba(37, 51, 45, 0.12);
}

#achievementWall .achievement-wall-card:hover .achievement-badge-frame {
  opacity: 1;
  filter: none;
}

#achievementWall .achievement-wall-card:hover .achievement-hover-detail {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 1180px) {
  #achievementWall .achievement-section-grid {
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  }

  #achievementWall .achievement-wall-card {
    height: 92px;
    min-height: 92px;
  }

  #achievementWall .achievement-badge-frame {
    height: 76px;
  }

  #achievementWall .achievement-badge-frame img {
    width: 70px;
    height: 70px;
  }
}

body {
  margin: 0;
  color: #24312f;
  background:
    radial-gradient(circle at 12% 8%, rgba(225, 241, 228, 0.72), transparent 28%),
    linear-gradient(180deg, #f8fbf6 0%, #edf5ee 100%);
  font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
}

:root {
  --side-nav-width: 172px;
  --side-nav-collapsed: 68px;
  --ui-radius-card: 18px;
  --ui-radius-control: 12px;
  --ui-border-soft: rgba(188, 207, 194, 0.64);
  --ui-shadow-card: 0 14px 34px rgba(42, 70, 57, 0.09);
  --ui-shadow-soft: 0 8px 22px rgba(42, 70, 57, 0.07);
  --ui-surface: rgba(255, 255, 255, 0.88);
  --ui-surface-warm: rgba(255, 253, 246, 0.92);
}

.side-nav {
  position: fixed;
  top: 18px;
  bottom: 18px;
  left: 18px;
  z-index: 55;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  width: var(--side-nav-width);
  padding: 12px;
  border: 1px solid var(--ui-border-soft);
  border-radius: var(--ui-radius-card);
  background:
    linear-gradient(180deg, rgba(255, 255, 251, 0.96) 0%, rgba(245, 251, 242, 0.94) 100%);
  box-shadow: var(--ui-shadow-card);
}

.side-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 6px 6px 12px;
  border-bottom: 1px solid rgba(207, 221, 203, 0.55);
}

.side-brand-icon,
.side-nav-icon {
  flex: 0 0 auto;
  background-position: center;
  background-repeat: no-repeat;
}

.side-brand-icon {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(196, 214, 201, 0.68);
  border-radius: var(--ui-radius-control);
  background-color: rgba(255, 255, 255, 0.72);
  background-image: url("/static/assets/icons/owl-buddy-logo.png");
  background-size: 42px 42px;
  box-shadow: var(--ui-shadow-soft);
}

.side-brand-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.side-brand-text strong {
  color: #2f5f50;
  font-size: 14px;
  line-height: 1.2;
}

.side-brand-text small {
  color: #76867b;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.side-nav-scroll {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding: 12px 0;
  scrollbar-width: thin;
}

.side-nav-group {
  display: grid;
  gap: 5px;
}

.side-nav-divider {
  height: 1px;
  margin: 7px 9px 5px;
  background: linear-gradient(90deg, transparent, rgba(166, 190, 174, 0.62), transparent);
}

.side-nav-admin {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(207, 221, 203, 0.48);
}

.side-nav-heading {
  padding: 0 9px 3px;
  color: #89978d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

.side-nav-item,
.side-collapse-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: var(--ui-radius-control);
  padding: 0 9px;
  color: #3f5f53;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

.side-nav-item:hover,
.side-collapse-btn:hover {
  color: #2d6656;
  background: rgba(236, 246, 234, 0.9);
  box-shadow: inset 0 0 0 1px rgba(180, 204, 189, 0.34);
}

.side-nav-item.active {
  color: #ffffff;
  background: linear-gradient(180deg, #62ab82 0%, #3d846b 100%);
  box-shadow: 0 9px 18px rgba(48, 126, 96, 0.22);
}

.side-nav-item.active .side-nav-icon {
  background-color: rgba(255, 255, 255, 0.88);
  filter: none;
}

.side-nav-icon {
  position: relative;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(157, 196, 174, 0.64);
  border-radius: 11px;
  background-color: rgba(232, 246, 235, 0.92);
  background-size: 27px 27px;
  box-shadow: inset 0 -3px 0 rgba(79, 143, 114, 0.08), 0 4px 10px rgba(44, 72, 58, 0.06);
}

.side-nav-item:hover .side-nav-icon {
  border-color: rgba(128, 180, 151, 0.72);
  background-color: rgba(221, 241, 226, 0.96);
}

.icon-achievement,
.icon-bank-pack,
.icon-card-pack {
  background-color: rgba(255, 244, 216, 0.9);
  border-color: rgba(224, 184, 88, 0.48);
  box-shadow: inset 0 -3px 0 rgba(214, 168, 79, 0.08), 0 4px 10px rgba(44, 72, 58, 0.06);
}

.icon-wrong {
  background-color: rgba(232, 244, 252, 0.92);
  border-color: rgba(126, 174, 200, 0.48);
  box-shadow: inset 0 -3px 0 rgba(111, 143, 199, 0.08), 0 4px 10px rgba(44, 72, 58, 0.06);
}

.icon-paper,
.icon-book,
.icon-safety {
  background-color: rgba(239, 248, 240, 0.92);
  border-color: rgba(166, 202, 177, 0.56);
}

.icon-practice,
.icon-physics,
.icon-store,
.icon-backpack,
.icon-collection,
.icon-pet-setting,
.icon-import,
.icon-quality {
  background-color: rgba(232, 246, 235, 0.92);
  border-color: rgba(157, 196, 174, 0.64);
}

.side-nav-label {
  overflow: hidden;
  white-space: nowrap;
}

.icon-home { background-image: url("/static/assets/icons/desktop6-growth-home-a.png"); }
.icon-growth { background-image: url("/static/assets/icons/today-path-growth.png"); }
.icon-achievement { background-image: url("/static/assets/icons/desktop5-achievement-badge.png"); }
.icon-card-pack { background-image: url("/static/assets/icons/desktop5-reward-chest.png"); }
.icon-wrong { background-image: url("/static/assets/icons/desktop6-wrong-review-a.png"); }
.icon-paper { background-image: url("/static/assets/icons/desktop5-chapter-book.png"); }
.icon-book { background-image: url("/static/assets/icons/subject-book.png"); }
.icon-physics { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23428f72' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 5 13h6l-1 9 8-12h-6l1-8Z'/%3E%3Cpath d='M4 18h3m10 0h3M7 18c1.4-2 3.1-2 5 0s3.6 2 5 0'/%3E%3C/svg%3E"); }
.icon-practice { background-image: url("/static/assets/icons/desktop5-add-task.png"); }
.icon-store { background-image: url("/static/assets/icons/desktop5-store.png"); }
.icon-backpack { background-image: url("/static/assets/icons/desktop5-backpack.png"); }
.icon-collection { background-image: url("/static/assets/icons/subject-book.png"); }
.icon-pet-setting { background-image: url("/static/assets/icons/pet-helper.png"); }
.icon-import { background-image: url("/static/assets/icons/desktop5-add-task.png"); }
.icon-quality { background-image: url("/static/assets/icons/desktop5-weekly-plan.png"); }
.icon-safety { background-image: url("/static/assets/icons/desktop5-weekly-summary.png"); }
.icon-bank-pack { background-image: url("/static/assets/icons/desktop5-reward-chest.png"); }

.icon-achievement { background-position: center; }
.icon-wrong { background-position: 50% calc(50% - 1px); }
.icon-paper,
.icon-book,
.icon-physics { background-position: center; }
.icon-practice { background-position: center; }
.icon-backpack { background-position: calc(50% + 1px) 50%; }
.icon-store,
.icon-backpack {
  background-position: center;
  background-size: 24px 24px;
}
.icon-collection {
  background-position: center;
  background-size: 25px 25px;
}
.icon-book {
  background-size: 25px 25px;
}
.icon-pet-setting { background-position: calc(50% + 1px) calc(50% - 2px); }
.icon-import { background-position: calc(50% - 1px) 50%; }
.icon-quality { background-position: calc(50% - 1px) calc(50% - 2px); }
.icon-safety {
  background-position: center;
  background-size: 25px 25px;
}
.icon-bank-pack,
.icon-card-pack { background-position: calc(50% + 1px) calc(50% - 2px); }

.side-collapse-btn {
  justify-content: center;
  border: 1px solid rgba(201, 214, 197, 0.58);
  background: rgba(255, 255, 255, 0.58);
  color: #698078;
}

.side-version {
  padding: 7px 6px 5px;
  color: #8a978e;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

body.sidebar-collapsed .side-version {
  overflow: hidden;
  padding-inline: 0;
  font-size: 9px;
  white-space: nowrap;
}

.side-collapse-btn > span:first-child {
  font-size: 20px;
  line-height: 1;
}

body.sidebar-collapsed .side-nav {
  width: var(--side-nav-collapsed);
  padding: 10px;
}

body.sidebar-collapsed .side-brand {
  justify-content: center;
  padding: 6px 0 11px;
}

body.sidebar-collapsed .side-brand-text,
body.sidebar-collapsed .side-nav-label,
body.sidebar-collapsed .side-nav-heading {
  display: none;
}

body.sidebar-collapsed .side-nav-item {
  justify-content: center;
  padding: 0;
}

body.sidebar-collapsed .side-nav-divider {
  margin: 7px auto 5px;
  width: 28px;
}

body.sidebar-collapsed .side-collapse-btn > span:first-child {
  transform: rotate(180deg);
}

.app {
  max-width: 1480px;
  margin: 0 auto;
  padding: 18px 24px;
  padding-left: calc(var(--side-nav-width) + 42px);
}

body.sidebar-collapsed .app {
  padding-left: calc(var(--side-nav-collapsed) + 42px);
}

body.book-notebook-active .app {
  max-width: none;
  width: 100%;
  margin: 0;
  padding-right: 32px;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding-bottom: 18px;
  border-bottom: 1px solid #c9d6c5;
}

.toolbar > div:first-child {
  display: grid;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

h1 {
  margin: 2px 0 0;
  font-size: 26px;
}

p {
  margin: 0;
}

.app-brand {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid #c9d6c5;
  border-radius: 999px;
  color: #52635b;
  background: #f8fbf4;
  font-size: 13px;
  font-weight: 600;
}

#status {
  color: #607064;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.actions,
.filters,
.paper-filters,
.source-config,
.chips div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-menu {
  position: relative;
}

.admin-menu summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 1px solid #879b91;
  border-radius: 6px;
  padding: 0 10px;
  color: #40544b;
  background: #f8fbf4;
  cursor: pointer;
  list-style: none;
}

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

.admin-menu summary::after {
  content: "鈻?;
  margin-left: 8px;
  font-size: 11px;
}

.admin-menu[open] summary {
  border-color: #35695f;
  color: #ffffff;
  background: #35695f;
}

.admin-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  display: grid;
  gap: 8px;
  width: min(290px, calc(100vw - 32px));
  padding: 12px;
  border: 1px solid #c9d6c5;
  border-radius: 8px;
  background: #fbfdf8;
  box-shadow: 0 14px 35px rgba(42, 64, 54, 0.18);
}

.admin-panel button,
.admin-panel .locator {
  width: 100%;
}

.admin-panel .locator input {
  flex: 1;
  min-width: 0;
}

.admin-divider {
  height: 1px;
  background: #dbe5d6;
}

.locator {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.practice-locator-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: min(1180px, 100%);
  margin: 0 auto 12px;
  padding: 12px 14px;
  border: 1px solid rgba(204, 219, 207, 0.68);
  border-radius: 18px;
  background: rgba(250, 253, 247, 0.82);
  box-shadow: 0 8px 22px rgba(37, 51, 45, 0.055);
}

.practice-locator-card > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.practice-locator-card strong {
  color: #334d43;
  font-size: 14px;
}

.practice-locator-card span {
  color: #6c7c72;
  font-size: 12px;
}

.practice-locator-card .locator {
  flex: 0 1 320px;
}

.practice-locator-card input {
  flex: 1;
  min-width: 0;
}

.practice-direct-mode #practiceView .practice-locator-card,
.practice-direct-mode #practiceView > .filters,
.practice-direct-mode #practiceView > .chips {
  display: none;
}

body.practice-wrong-review-single-mode #practiceView > .practice-chapter-stats,
body.practice-wrong-review-single-mode #practiceView > .coach-route-panel,
body.practice-wrong-review-single-mode #practiceView > .filters,
body.practice-wrong-review-single-mode #practiceView > .master-coach-entry,
body.practice-wrong-review-single-mode #practiceView > .master-coach-panel,
body.practice-wrong-review-single-mode #practiceView > .topic-family-panel,
body.practice-wrong-review-single-mode #practiceView > .chips,
body.practice-wrong-review-single-mode #practiceView > .practice-timer,
body.practice-wrong-review-single-mode #practiceView > .practice-summary {
  display: none !important;
}

body.practice-wrong-review-single-mode #practiceView > .subject-overview-strip,
body.practice-wrong-review-single-mode #practiceView > .practice-return,
body.practice-wrong-review-single-mode #practiceView > #practice {
  width: min(1180px, 100%);
}

body.practice-wrong-review-single-mode #practiceView > .practice-return {
  margin-top: 12px;
  margin-bottom: 12px;
}

body.practice-wrong-review-single-mode .wrong-review-single-annotation .coach-writing-toolbar {
  display: none;
}

body.practice-wrong-review-single-mode .wrong-review-single-annotation [class~="coach-annotation-canvas"] {
  pointer-events: none;
  opacity: 1;
}

body.practice-wrong-review-pen-active .wrong-review-single-annotation [class~="coach-annotation-canvas"] {
  pointer-events: auto;
}

html.practice-wrong-review-pen-active,
body.practice-wrong-review-pen-active {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

button {
  min-height: 32px;
  border: 1px solid #2f6f73;
  border-radius: 6px;
  padding: 0 10px;
  color: #ffffff;
  background: #35695f;
  cursor: pointer;
}

button:hover,
.button-link:hover {
  background: #265d60;
}

button.selected {
  border-color: #8cae8e;
  color: #2f5b42;
  background: #eaf4e8;
  font-weight: 700;
}

button.selected:hover {
  border-color: #7fa894;
  color: #28523b;
  background: #dceedd;
}

@media (max-width: 1180px) {
  body:not(.sidebar-expanded) {
    --side-nav-width: var(--side-nav-collapsed);
  }

  body:not(.sidebar-expanded) .side-nav {
    width: var(--side-nav-collapsed);
    padding: 10px;
  }

  body:not(.sidebar-expanded) .side-brand {
    justify-content: center;
    padding: 6px 0 11px;
  }

  body:not(.sidebar-expanded) .side-brand-text,
  body:not(.sidebar-expanded) .side-nav-label,
  body:not(.sidebar-expanded) .side-nav-heading {
    display: none;
  }

  body:not(.sidebar-expanded) .side-nav-item {
    justify-content: center;
    padding: 0;
  }
}

@media (max-width: 760px) {
  .side-nav {
    top: 10px;
    bottom: 10px;
    left: 8px;
    border-radius: 20px;
  }

  .app,
  body.sidebar-collapsed .app {
    padding: 12px 10px 12px 84px;
  }

  body[data-current-view="englishReading"] {
    overflow-x: hidden;
  }

  body[data-current-view="englishReading"] .app {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body[data-current-view="englishReading"] #englishReadingView {
    width: calc(100% - var(--side-nav-collapsed) - 16px);
    margin-left: calc(var(--side-nav-collapsed) + 16px);
  }
}

button.danger {
  border-color: #d88989;
  background: #fff1f1;
  color: #9b3d3d;
}

body[data-current-view="physicsLab"] .app {
  max-width: none;
  width: 100%;
}

#physicsLabView {
  min-height: calc(100vh - 112px);
}

.physics-lab-page {
  min-height: calc(100vh - 136px);
  border: 1px solid rgba(189, 211, 202, 0.72);
  border-radius: 18px;
  background: rgba(246, 250, 248, 0.94);
  box-shadow: 0 18px 44px rgba(31, 55, 46, 0.1);
  overflow: hidden;
}

.physics-lab-frame {
  display: block;
  width: 100%;
  height: calc(100vh - 136px);
  min-height: 680px;
  border: 0;
  background: #eef7f8;
}

@media (max-width: 1100px) {
  body[data-current-view="physicsLab"] .side-nav {
    width: var(--side-nav-collapsed);
    padding: 10px;
  }

  body[data-current-view="physicsLab"] .side-brand {
    justify-content: center;
    padding: 6px 0 11px;
  }

  body[data-current-view="physicsLab"] .side-brand-text,
  body[data-current-view="physicsLab"] .side-nav-label,
  body[data-current-view="physicsLab"] .side-nav-heading {
    display: none;
  }

  body[data-current-view="physicsLab"] .side-nav-item {
    justify-content: center;
    padding: 0;
  }

  body[data-current-view="physicsLab"] .side-nav-divider {
    margin: 7px auto 5px;
    width: 28px;
  }

  body[data-current-view="physicsLab"] .app {
    padding-left: calc(var(--side-nav-collapsed) + 42px);
  }
}

button.danger:hover {
  background: #ffe3e3;
}

button.secondary {
  border-color: #c9d6c5;
  color: #40544b;
  background: #f8fbf4;
}

button.secondary:hover {
  border-color: #7fa894;
  color: #2f6f73;
  background: #eef6ec;
}

.button-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 1px solid #2f6f73;
  border-radius: 6px;
  padding: 0 10px;
  color: #ffffff;
  background: #35695f;
  text-decoration: none;
  font-size: 14px;
}

.tabs {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  width: min(1180px, 100%);
  margin: 18px auto 0;
  padding: 6px;
  border: 1px solid rgba(204, 219, 207, 0.72);
  border-radius: 18px;
  background: rgba(250, 253, 247, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 8px 22px rgba(37, 51, 45, 0.055);
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border-color: rgba(211, 224, 211, 0.78);
  border-radius: 14px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.7);
  color: #315f52;
  font-size: 15px;
  font-weight: 700;
  box-shadow: none;
}

.tab::before,
.growth-card > span:first-child::before,
.calendar-header > span::before,
.learning-reminder-head span::before,
.tomorrow-card-head > span::before,
.planner-header > div > span::before,
.chart-header > div > span::before,
.summary-card-head > span::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.72);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 26px 26px;
  box-shadow: 0 4px 10px rgba(42, 64, 54, 0.06);
  transform: translateY(-1px);
}

.tab[data-view="home"]::before {
  background-image: url("/static/assets/icons/today-learning.png");
}

.today-task-card > span:first-child::before {
  background-image: url("/static/assets/icons/home-task-clock-check.png");
}

.tab[data-view="achievements"]::before {
  background-color: #fff6df;
  background-image: url("/static/assets/icons/desktop5-achievement-badge.png");
}

.achievement-preview-card > span:first-child::before {
  background-color: #fff6df;
  background-image: url("/static/assets/icons/home-achievement-trophy.png");
}

.tab[data-view="wrongReview"]::before {
  background-color: rgba(255, 255, 255, 0.72);
  background-image: url("/static/assets/icons/encourage-moon.png");
}

.learning-reminder-head span::before {
  background-color: rgba(255, 255, 255, 0.72);
  background-image: url("/static/assets/icons/home-reminder-bell.png");
}

.tab[data-view="papers"]::before {
  background-color: rgba(255, 255, 255, 0.72);
  background-image: url("/static/assets/icons/learning-analysis.png");
}

.analysis-card > span:first-child::before {
  background-color: rgba(255, 255, 255, 0.72);
  background-image: url("/static/assets/icons/home-learning-analysis-compass.png");
}

.chart-header > div > span::before {
  background-color: rgba(255, 255, 255, 0.72);
  background-image: url("/static/assets/icons/home-growth-chart-curve.png");
}

.tab[data-view="practice"]::before {
  background-color: #fff7e6;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23d4912f' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l4.2-1 10-10a2.1 2.1 0 0 0-3-3l-10 10L4 20Z'/%3E%3Cpath d='M13.8 7.2l3 3'/%3E%3C/svg%3E");
}

.home-return-bar {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: min(1180px, 100%);
  margin: 0 auto -8px;
  padding: 0 2px;
}

.home-return-bar button {
  grid-column: 2;
  justify-self: end;
  min-height: 40px;
  padding: 0 16px;
  border-color: rgba(111, 167, 127, 0.62);
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fff5, #edf8ec);
  color: #315f43;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(73, 112, 86, 0.08);
}

body[data-current-view="achievements"] .home-return-bar,
body[data-current-view="wrongReview"] .home-return-bar,
body[data-current-view="papers"] .home-return-bar,
body[data-current-view="practice"] .home-return-bar {
  margin-bottom: -12px;
}

.home-return-bar span {
  grid-column: 1;
  justify-self: end;
  min-width: 0;
  max-width: 360px;
  overflow: hidden;
  color: #607064;
  font-size: 13px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#achievementWallTitle {
  display: none;
}

#achievementWall .achievement-section {
  padding: 0 26px 28px;
}

#achievementWall .achievement-section-grid {
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)) !important;
  gap: 20px !important;
  padding: 14px 16px 18px !important;
}

#achievementWall .achievement-wall-card {
  height: 104px !important;
  min-height: 104px !important;
}

.achievement-help-popover {
  position: relative;
  display: inline-grid;
  justify-items: end;
}

.achievement-help-popover button {
  display: grid;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(178, 205, 184, 0.72);
  border-radius: 50%;
  background: rgba(248, 253, 245, 0.86);
  color: #6f8a7b;
  font-size: 15px;
  font-weight: 900;
  box-shadow: none;
}

.achievement-help-popover > div {
  position: absolute;
  top: 36px;
  right: 0;
  z-index: 30;
  width: min(360px, calc(100vw - 48px));
  padding: 13px 14px;
  border: 1px solid rgba(214, 225, 210, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 251, 0.98);
  box-shadow: 0 16px 34px rgba(55, 84, 67, 0.13);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.achievement-help-popover:hover > div,
.achievement-help-popover:focus-within > div {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.achievement-help-popover strong {
  color: #315f43;
  font-size: 15px;
}

.achievement-help-popover p {
  margin: 6px 0 0;
  color: #66766e;
  font-size: 13px;
  line-height: 1.55;
}

.tomorrow-card > span:first-child::before,
.tomorrow-card-head > span::before {
  background-color: rgba(255, 255, 255, 0.72);
  background-image: url("/static/assets/icons/home-tomorrow-sun-bag.png");
}

.calendar-header > span::before {
  background-image: url("/static/assets/icons/home-study-calendar-check.png");
}

.weekly-card > span:first-child::before,
.weekly-card .summary-card-head > span::before {
  background-color: #fff6df;
  background-image: url("/static/assets/icons/home-weekly-summary-clipboard.png");
}

.today-card > span:first-child::before,
.today-card .summary-card-head > span::before {
  background-image: url("/static/assets/icons/home-today-reading.png");
}

.weekly-planner .planner-header > div > span::before {
  background-color: #fff1ee;
  background-image: url("/static/assets/icons/home-week-plan-book-loop.png");
}

/* Home title icons: match the standalone, no-badge feel of the diagnosis phoenix icon. */
#homeView .growth-card > span:first-child::before,
#homeView .calendar-header > span::before,
#homeView .learning-reminder-head span::before,
#homeView .tomorrow-card-head > span::before,
#homeView .planner-header > div > span::before,
#homeView .chart-header > div > span::before,
#homeView .summary-card-head > span::before {
  width: 34px;
  height: 34px;
  border-radius: 0;
  background-color: transparent !important;
  background-size: 34px 34px;
  box-shadow: none;
  filter: drop-shadow(0 5px 8px rgba(42, 64, 54, 0.16));
  transform: none;
}

.tab.active {
  border-color: #2f745f;
  color: #ffffff;
  background: linear-gradient(180deg, #3f8b69 0%, #286955 100%);
  box-shadow: 0 8px 18px rgba(45, 112, 83, 0.22);
  font-weight: 800;
}

.tab.active::before {
  background-color: rgba(255, 255, 255, 0.18);
  filter: brightness(0) invert(1);
  box-shadow: inset 0 -6px 0 rgba(255, 255, 255, 0.08);
}

.tab:hover {
  border-color: #b8cabe;
  color: #35695f;
  background: #f3f8f2;
}

.tab.active:hover {
  color: #ffffff;
  background: linear-gradient(180deg, #3f8b69 0%, #286955 100%);
}

.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
  margin: 20px 0 12px;
  padding: 16px;
  background: #fbfdf8;
  border: 1px solid #d1ddcd;
  border-radius: 8px;
}

.filters label {
  min-width: 0;
}

.filters select,
.filters input[type="number"] {
  width: 100%;
}

.practice-count-label {
  grid-column: span 2;
  min-width: 260px;
}

.practice-start-control {
  display: grid;
  grid-template-columns: minmax(84px, 110px) minmax(112px, max-content);
  gap: 10px;
  align-items: center;
}

.practice-start-control button {
  min-width: 112px;
  min-height: 34px;
  border-color: #9fb7ac;
  background: #edf5ee;
  color: #2f5b54;
  font-weight: 600;
  white-space: nowrap;
}

.practice-start-control button:hover {
  border-color: #86aa9a;
  background: #e0efe6;
  color: #284f49;
}

.paper-filters {
  align-items: end;
  margin: 16px 0 14px;
  padding: 14px 16px;
  background: #fbfdf8;
  border: 1px solid #d1ddcd;
  border-radius: 8px;
}

.practice-return {
  position: sticky;
  top: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid #95b39b;
  border-radius: 8px;
  background: #eef7e8;
  color: #263b36;
  box-shadow: 0 8px 18px rgba(54, 92, 70, 0.14);
}

.practice-return button {
  border-color: #4f7f5d;
  background: #4f7f5d;
  color: #fffffb;
  font-weight: 700;
}

.practice-return button:hover {
  border-color: #3f6c4e;
  background: #3f6c4e;
  color: #fffffb;
}

.practice-return span {
  color: #4a5d52;
  font-size: 13px;
}

.practice-return-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.practice-return .wrong-review-single-pen-button.active {
  border-color: #b83232;
  background: #dc2626;
  color: #fffdf8;
}

.practice-return.hidden {
  display: none;
}

.question-actions .wrong-review-inline-back {
  border-color: #4f7f5d;
  background: #4f7f5d;
  color: #fffffb;
  font-weight: 700;
}

.question-actions .wrong-review-inline-back:hover {
  border-color: #3f6c4e;
  background: #3f6c4e;
  color: #fffffb;
}

.wrong-review-complete-card {
  text-align: center;
}

.wrong-review-complete-card p {
  color: #52645b;
  margin: 8px 0 18px;
}

.practice-timer {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(150px, 0.8fr) minmax(150px, 0.8fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  margin: 10px 0 12px;
  padding: 10px 12px;
  background: #fffffb;
  border: 1px solid rgba(197, 221, 204, 0.96);
  border-radius: 18px;
  box-shadow: 0 12px 26px rgba(43, 70, 53, 0.1);
}

.practice-timer span {
  display: block;
  color: #607064;
  font-size: 13px;
}

.practice-timer small {
  display: block;
  margin-top: 2px;
  color: #6f7b73;
  font-size: 12px;
  font-weight: 700;
}

.practice-timer strong {
  display: block;
  color: #263b36;
  font-family: Consolas, "Microsoft YaHei", monospace;
  font-size: 23px;
  letter-spacing: 1px;
  line-height: 1;
}

.timer-status-block {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.timer-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 12px;
  background: #e7f4eb;
  box-shadow: inset 0 0 0 11px rgba(125, 175, 105, 0.12);
  position: relative;
}

.timer-icon::before,
.timer-icon::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: #6fa77f;
}

.timer-icon::before {
  width: 4px;
  height: 12px;
  left: 17px;
  top: 9px;
}

.timer-icon::after {
  width: 11px;
  height: 4px;
  left: 18px;
  top: 20px;
  transform-origin: left center;
  transform: rotate(38deg);
}

.timer-display-block,
.timer-segment-block {
  min-width: 0;
  min-height: 48px;
  padding: 7px 12px;
  border: 1px solid #d6e7db;
  border-radius: 14px;
  background: #f5faf6;
}

.timer-segment-block {
  border-left: 1px solid #d6e7db;
}

.timer-progress {
  height: 4px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7eee5;
}

.timer-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #72a96e, #3f7d62);
  transition: width 0.25s ease;
}

.timer-actions {
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.timer-more-menu {
  position: relative;
}

.timer-more-menu summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 66px;
  min-height: 38px;
  border: 1px solid rgba(186, 202, 191, 0.9);
  border-radius: 11px;
  background: #fffffb;
  color: #52635b;
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
  list-style: none;
}

.timer-more-menu summary::-webkit-details-marker {
  display: none;
}

.timer-more-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  min-width: 132px;
  padding: 9px;
  border: 1px solid rgba(197, 221, 204, 0.96);
  border-radius: 14px;
  background: #fffffb;
  box-shadow: 0 16px 34px rgba(43, 70, 53, 0.16);
}

.timer-settings-dialog {
  width: min(520px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(191, 207, 187, 0.96);
  border-radius: 18px;
  background: #fbfdf8;
  box-shadow: 0 24px 62px rgba(37, 51, 45, 0.22);
}

.timer-settings-dialog[open] {
  position: fixed;
  inset: 0;
  margin: auto;
}

.timer-settings-dialog::backdrop {
  background: rgba(30, 42, 38, 0.28);
}

.timer-settings-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
}

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

.timer-settings-head span {
  color: #6d7d71;
  font-size: 13px;
  font-weight: 760;
}

.timer-settings-head h3 {
  margin: 3px 0 0;
  color: #253b34;
  font-size: 22px;
}

.timer-settings-head button {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
}

.timer-mode-list {
  display: grid;
  gap: 9px;
}

.timer-mode-list label {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 3px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid #d6e2d1;
  border-radius: 12px;
  background: #fffffb;
}

.timer-mode-list label:has(input:checked) {
  border-color: rgba(95, 166, 109, 0.82);
  background: #edf8ed;
}

.timer-mode-list input {
  grid-row: span 2;
}

.timer-mode-list span {
  color: #263b36;
  font-weight: 830;
}

.timer-mode-list small {
  color: #69786e;
  font-size: 12px;
}

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

.timer-custom-row label {
  display: grid;
  gap: 6px;
  color: #506157;
  font-size: 13px;
  font-weight: 760;
}

.timer-custom-row input {
  width: 100%;
}

.timer-setting-check {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #46584f;
  font-weight: 740;
}

.timer-settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.purchase-confirming {
  border-color: rgba(198, 139, 48, 0.82) !important;
  background: #fff0c8 !important;
  color: #795018 !important;
  box-shadow: 0 8px 18px rgba(166, 113, 32, 0.18) !important;
}

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

#wrongReviewView .safety-header .wrong-review-header-actions .secondary {
  border-color: rgba(204, 166, 83, 0.72);
  background: linear-gradient(180deg, #fffaf0, #f5ecd6);
  color: #775b1f;
}

.wrong-capture-source-dialog {
  position: fixed;
  inset: 0;
  z-index: 175;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(29, 45, 39, 0.26);
  opacity: 0;
  transition: opacity 160ms ease;
}

.wrong-capture-source-dialog[hidden] {
  display: none;
}

.wrong-capture-source-dialog.open {
  opacity: 1;
}

.wrong-capture-source-sheet {
  display: grid;
  width: min(380px, 100%);
  gap: 12px;
  padding: 18px;
  border: 1px solid #cad9c8;
  border-radius: 16px;
  background: #fbfdf8;
  box-shadow: 0 22px 54px rgba(22, 38, 34, 0.24);
  transform: translateY(10px);
  transition: transform 160ms ease;
}

.wrong-capture-source-dialog.open .wrong-capture-source-sheet {
  transform: translateY(0);
}

.wrong-capture-source-head h3 {
  margin: 0;
  color: #203b34;
  font-size: 20px;
}

.wrong-capture-source-head p {
  margin: 5px 0 0;
  color: #65766e;
  font-size: 14px;
}

.wrong-capture-source-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.wrong-capture-source-options button {
  display: grid;
  min-height: 72px;
  align-content: center;
  gap: 5px;
  padding: 14px 16px;
  border-color: #bdd4c4;
  border-radius: 12px;
  background: #f5faf3;
  color: #294c40;
  text-align: left;
}

.wrong-capture-source-options button:first-child {
  border-color: #9fc9ad;
  background: #eaf5ec;
}

.wrong-capture-source-options strong {
  font-size: 17px;
}

.wrong-capture-source-options span {
  color: #63756d;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
}

.wrong-capture-source-cancel {
  min-height: 46px;
  border-radius: 11px;
}

body.wrong-capture-source-open {
  overflow: hidden;
}

.wrong-capture-workbench {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: none;
  grid-template-rows: auto minmax(0, 1fr);
  background: #e4ece3;
}

.wrong-capture-workbench.open {
  display: grid;
}

.wrong-capture-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(188, 207, 189, 0.86);
  background: rgba(251, 253, 248, 0.96);
  box-shadow: 0 8px 20px rgba(35, 51, 45, 0.08);
}

.wrong-capture-title {
  min-width: 0;
}

.wrong-capture-title strong {
  display: block;
  overflow: hidden;
  color: #203b34;
  font-size: 16px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wrong-capture-title span {
  color: #607064;
  font-size: 12px;
}

.wrong-capture-actions,
.wrong-capture-save-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.wrong-capture-actions button,
.wrong-capture-save-actions button {
  min-height: 36px;
  border-radius: 11px;
}

.wrong-capture-body {
  position: relative;
  overflow: auto;
  padding: 14px 12px 120px;
}

.wrong-capture-pages {
  display: grid;
  gap: 12px;
  width: min(1120px, 100%);
  margin: 0 auto;
}

.wrong-capture-page-wrap {
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 8px rgba(20, 35, 30, 0.16);
}

.wrong-capture-page-tools {
  min-height: 44px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #dbe5de;
  background: #f9fbf8;
  color: #65776f;
  font-size: 12px;
}

.wrong-capture-page-tools > div {
  display: flex;
  gap: 6px;
}

.wrong-capture-page-tools button {
  width: 36px;
  min-width: 36px;
  min-height: 32px;
  padding: 0;
  border: 1px solid #cadad0;
  border-radius: 999px;
  background: #fff;
  color: #45685b;
  box-shadow: none;
  font-size: 21px;
  line-height: 1;
}

.wrong-capture-page {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  box-shadow: none;
  -webkit-user-drag: none;
  user-select: none;
}

.wrong-capture-layer {
  position: fixed;
  inset: 0;
  z-index: 163;
  display: none;
  cursor: crosshair;
  background: rgba(26, 39, 35, 0.08);
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
}

.wrong-capture-layer.open {
  display: block;
}

.wrong-capture-box {
  position: fixed;
  z-index: 164;
  border: 2px solid #d79535;
  background: rgba(255, 208, 103, 0.16);
  box-shadow: 0 0 0 9999px rgba(15, 26, 24, 0.18);
  pointer-events: none;
}

.wrong-capture-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 165;
  display: grid;
  width: min(380px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  border: 1px solid #cad9c8;
  border-radius: 16px;
  background: #fbfdf8;
  box-shadow: 0 18px 44px rgba(22, 38, 34, 0.22);
}

.wrong-capture-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #e0eadc;
}

.wrong-capture-panel-head strong {
  color: #263b36;
  font-size: 16px;
}

.wrong-capture-panel-toggle {
  min-height: 34px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
}

.wrong-capture-panel.minimized {
  width: auto;
  max-width: calc(100vw - 24px);
  overflow: hidden;
}

.wrong-capture-panel.minimized .wrong-capture-panel-head {
  min-width: 176px;
  padding: 9px 10px 9px 14px;
  border-bottom: 0;
}

.wrong-capture-panel-body {
  display: grid;
  gap: 11px;
  padding: 12px 14px;
}

.wrong-capture-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.wrong-capture-counts span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #eef6ea;
  color: #456356;
  font-size: 12px;
  font-weight: 800;
}

.wrong-capture-counts span.ready {
  background: #e0f0e4;
  color: #356447;
}

.wrong-capture-step-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.wrong-capture-step-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  border-radius: 10px;
  font-weight: 800;
}

.wrong-capture-step-actions button > span {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.wrong-capture-step-actions button small {
  color: inherit;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.72;
}

.wrong-capture-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.wrong-capture-thumbs img {
  width: 100%;
  height: 74px;
  object-fit: cover;
  border: 1px solid #d2ddcf;
  border-radius: 8px;
  background: #fff;
}

.wrong-capture-field-grid {
  display: grid;
  gap: 7px;
}

.wrong-capture-auto-subject {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 9px 10px 9px 12px;
  border: 1px solid #d5e1d1;
  border-radius: 11px;
  background: #f6faf3;
}

.wrong-capture-auto-subject > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.wrong-capture-auto-subject span {
  color: #708078;
  font-size: 11px;
}

.wrong-capture-auto-subject strong {
  overflow: hidden;
  color: #2d5547;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wrong-capture-auto-subject button {
  min-width: 64px;
  min-height: 36px;
  border-radius: 9px;
  padding: 0 12px;
}

.wrong-capture-clean-options {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.wrong-capture-clean-options label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid #d7e2da;
  border-radius: 8px;
  background: #fbfdfb;
}

.wrong-capture-clean-options label > span,
.wrong-capture-clean-options label strong,
.wrong-capture-clean-options label small {
  display: block;
}

.wrong-capture-thumbs figure {
  position: relative;
  margin: 0;
}

.wrong-capture-thumbs figure > span {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(126, 67, 55, 0.86);
  color: #fff;
  font-size: 11px;
}

.wrong-capture-clean-note {
  margin: 0;
  color: #65766f;
  font-size: 13px;
  line-height: 1.5;
}

.wrong-capture-thumbs figure > button {
  position: absolute;
  left: 5px;
  bottom: 5px;
  display: grid;
  place-items: center;
  width: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid rgba(73, 105, 94, 0.38);
  border-radius: 50%;
  background: rgba(251, 253, 250, 0.9);
  color: #365e52;
  font-size: 17px;
}

.wrong-capture-eraser-glyph {
  display: block;
  width: 15px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 2px 4px 4px 2px;
  transform: rotate(-38deg);
}

.wrong-capture-mask-editor {
  position: fixed;
  inset: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  z-index: 5200;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #b9ccc2;
  border-radius: 12px;
  background: #f8faf7;
  box-shadow: 0 24px 70px rgba(26, 48, 41, 0.28);
}

.wrong-capture-mask-editor[hidden] { display: none; }

.wrong-capture-mask-editor > header,
.wrong-capture-mask-editor > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: rgba(249, 252, 248, 0.97);
}

.wrong-capture-mask-editor > header { border-bottom: 1px solid #d4dfd8; }
.wrong-capture-mask-editor > footer { border-top: 1px solid #d4dfd8; }
.wrong-capture-mask-editor > header > div { display: grid; gap: 2px; }
.wrong-capture-mask-editor > header span { color: #6c7e77; font-size: 13px; }

.wrong-capture-mask-stage {
  min-height: 0;
  overflow: auto;
  padding: 18px;
  background: #dfe7e1;
  text-align: center;
  overscroll-behavior: contain;
}

#wrongCaptureMaskCanvas {
  display: block;
  max-width: none;
  height: auto;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 4px 16px rgba(34, 57, 49, 0.16);
  touch-action: none;
  cursor: crosshair;
}

.wrong-capture-mask-tools,
.wrong-capture-mask-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wrong-capture-mask-tools > button {
  display: grid;
  place-items: center;
  width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
}

.wrong-capture-mask-tools > button.active {
  border-color: #b65d4d;
  background: #f8e8e4;
}

.mask-size-dot { display: block; border-radius: 50%; background: #4b675e; }
.mask-size-dot.small { width: 8px; height: 8px; }
.mask-size-dot.medium { width: 15px; height: 15px; }
.mask-size-dot.large { width: 23px; height: 23px; }

.wrong-capture-mask-slider {
  display: grid;
  grid-template-columns: auto minmax(90px, 180px) 28px;
  align-items: center;
  gap: 7px;
  color: #5b7068;
  font-size: 13px;
}

body.wrong-capture-mask-open { overflow: hidden; }

@media (max-width: 760px) {
  .wrong-capture-mask-editor { inset: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); }
  .wrong-capture-mask-editor > footer { align-items: stretch; flex-direction: column; }
  .wrong-capture-mask-tools { flex-wrap: wrap; }
  .wrong-capture-mask-slider { flex: 1; grid-template-columns: auto minmax(100px, 1fr) 28px; }
  .wrong-capture-mask-actions { justify-content: flex-end; }
}

.wrong-capture-clean-options label small {
  margin-top: 2px;
  color: #76857e;
  font-size: 11px;
}

.wrong-capture-save-actions {
  justify-content: stretch;
}

.wrong-capture-save-actions button {
  flex: 1 1 0;
}

.wrong-capture-success-body {
  justify-items: center;
  padding: 22px 18px 18px;
  text-align: center;
}

.wrong-capture-success-body > strong {
  color: #29483d;
  font-size: 17px;
}

.wrong-capture-success-body > p {
  margin: 0;
  color: #64756d;
  font-size: 13px;
  line-height: 1.65;
}

.wrong-capture-success-mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: #e3f2e5;
  color: #3f7653;
  font-size: 24px;
  font-weight: 800;
}

.wrong-capture-next-actions {
  display: grid;
  width: 100%;
  gap: 8px;
  margin-top: 4px;
}

.wrong-capture-next-actions button {
  min-height: 44px;
  border-radius: 11px;
}

.wrong-capture-field-grid label {
  display: grid;
  gap: 5px;
  color: #53675d;
  font-size: 12px;
  font-weight: 760;
}

.wrong-capture-field-grid select,
.wrong-capture-field-grid input,
.wrong-capture-field-grid textarea {
  width: 100%;
  border: 1px solid #c9d8c5;
  border-radius: 10px;
  padding: 8px 10px;
  background: #fffef9;
  color: #2b3d38;
  font: inherit;
}

.wrong-capture-status {
  min-height: 18px;
  color: #6d7b70;
  font-size: 12px;
}

.wrong-capture-ocr-text {
  margin: 0 0 12px;
  color: #263d54;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 1em;
  line-height: 1.85;
}

.wrong-capture-ocr-text p {
  margin: 0 0 6px;
}

.wrong-capture-source-figure {
  width: min(100%, 860px);
  margin: 12px auto;
}

.wrong-capture-source-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 520px;
  margin: 0 auto;
  object-fit: contain;
}

#wrongReviewView .wrong-review-rich-preview {
  display: block;
  width: 100%;
  max-height: none;
  margin: 0;
  padding: 14px 16px;
  overflow: visible;
  color: #3d4844;
  font-size: 15px;
  line-height: 1.75;
  text-align: left;
}

#wrongReviewView .wrong-review-rich-preview p {
  margin: 0 0 5px;
}

#wrongReviewView .wrong-review-rich-preview img {
  max-width: 100%;
  max-height: none;
  height: auto;
  object-fit: contain;
}

.practice2-focus-question .wrong-capture-source-image {
  max-height: min(54vh, 560px);
}

body.wrong-capture-selecting {
  overflow: hidden;
  touch-action: none;
  user-select: none;
}

body.wrong-capture-selecting .wrong-capture-body {
  overflow: hidden;
}

@media (max-width: 760px) {
  #wrongReviewView .safety-header {
    grid-template-columns: 1fr;
  }

  .wrong-review-header-actions {
    justify-content: stretch;
  }

  .wrong-review-header-actions button {
    flex: 1 1 140px;
  }

  .wrong-capture-toolbar {
    grid-template-columns: 1fr;
  }

  .wrong-capture-actions {
    justify-content: stretch;
  }

  .wrong-capture-actions button {
    flex: 1 1 auto;
  }

  .wrong-capture-source-dialog {
    place-items: center;
    padding: 12px;
  }

  .wrong-capture-source-sheet {
    width: min(380px, 100%);
    padding: 16px;
    border-radius: 16px;
  }

  .wrong-capture-source-options {
    grid-template-columns: 1fr;
  }

  .wrong-capture-source-options button {
    min-height: 72px;
  }
}

.source-config {
  align-items: end;
  margin: 16px 0 12px;
  padding: 14px 16px;
  background: #fbfdf8;
  border: 1px solid #d1ddcd;
  border-radius: 8px;
}

.source-config label {
  flex: 1 1 420px;
}

#materialsDirInput {
  width: 100%;
}

#importView .import-source-config {
  display: flex;
  gap: 10px;
}

#importView .import-source-config label span {
  display: block;
  margin-bottom: 6px;
  color: #647a70;
  font-size: 12px;
}

#importView .import-source-config button {
  min-width: 96px;
}

@media (max-width: 760px) {
  #importView .import-source-config {
    align-items: stretch;
    flex-direction: column;
  }
}

.import-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin: 16px 0 12px;
}

.build-state {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(240px, 1.6fr) minmax(120px, 0.7fr);
  gap: 10px;
  margin: 0 0 12px;
}

.growth-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.35fr) minmax(220px, 0.75fr) minmax(320px, 1.1fr);
  gap: 16px;
  margin-top: 16px;
}

.growth-grid.lower {
  grid-template-columns: 1fr 1fr;
}

.home-section > .growth-grid,
.home-section > .growth-chart-row,
.home-section > .weekly-planner {
  margin-top: 0;
}

.home-focus-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.72fr);
  gap: 16px;
  margin: 0 0 14px;
}

.home-focus-card,
.home-partner-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(185, 211, 194, 0.72);
  border-radius: var(--ui-radius-card);
  background: rgba(255, 255, 252, 0.9);
  box-shadow: var(--ui-shadow-soft);
  backdrop-filter: blur(10px);
}

.home-focus-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-height: 214px;
  padding: 24px 26px 22px;
  background:
    linear-gradient(135deg, rgba(250, 255, 248, 0.98), rgba(255, 255, 252, 0.94) 58%, rgba(242, 250, 246, 0.92));
}

.home-focus-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #5f9f76, #78aeb0 48%, rgba(216, 174, 82, 0.78));
}

.home-focus-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.home-focus-kicker span {
  color: #456b5d;
  font-size: 14px;
  font-weight: 900;
}

.home-focus-kicker strong {
  flex: 0 0 auto;
  max-width: 220px;
  padding: 6px 11px;
  border: 1px solid rgba(97, 145, 118, 0.24);
  border-radius: 999px;
  overflow: hidden;
  color: #38664f;
  background: rgba(236, 248, 239, 0.86);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-focus-kicker strong[data-profile="测试用"] {
  color: #795b23;
  border-color: rgba(212, 165, 91, 0.42);
  background: rgba(255, 248, 232, 0.92);
}

.home-focus-card h1 {
  max-width: 720px;
  margin: 0;
  color: #223f36;
  font-size: 32px;
  font-weight: 950;
  line-height: 1.12;
  letter-spacing: 0;
}

.home-focus-card p {
  max-width: 720px;
  margin: 0;
  color: #596d62;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.6;
}

.home-focus-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.home-focus-actions button {
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
}

.home-snapshot-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 2px;
}

.home-snapshot-stats section {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(207, 222, 211, 0.66);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
}

.home-snapshot-stats span {
  display: block;
  margin-bottom: 2px;
  color: #718178;
  font-size: 12px;
  font-weight: 800;
}

.home-snapshot-stats strong {
  display: block;
  overflow: hidden;
  color: #2d4d43;
  font-size: 18px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-partner-panel {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 214px;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(255, 252, 245, 0.96), rgba(247, 253, 249, 0.92));
}

.home-partner-avatar {
  display: grid;
  width: 90px;
  height: 90px;
  place-items: center;
  border: 1px solid rgba(129, 171, 139, 0.34);
  border-radius: 50%;
  color: #2f6a57;
  background:
    linear-gradient(180deg, rgba(238, 249, 239, 0.92), rgba(255, 255, 252, 0.78));
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.62), 0 14px 24px rgba(54, 88, 66, 0.1);
  font-size: 22px;
  font-weight: 950;
}

.home-partner-avatar.has-image {
  background-size: 82%;
}

.home-partner-panel span {
  display: block;
  color: #7a8a81;
  font-size: 12px;
  font-weight: 850;
}

.home-partner-panel strong {
  display: block;
  margin-top: 4px;
  color: #2d4d43;
  font-size: 20px;
  font-weight: 950;
}

.home-partner-panel p {
  margin: 8px 0 0;
  color: #617268;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.55;
}

.home-section-action .growth-grid {
  grid-template-columns: minmax(300px, 0.98fr) minmax(210px, 0.58fr) minmax(340px, 0.92fr);
  align-items: start;
}

.student-home-grid {
  grid-template-columns: minmax(300px, 0.98fr) minmax(210px, 0.58fr) minmax(340px, 0.92fr);
  gap: 12px;
  align-items: start;
}

.today-task-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.today-task-head span {
  color: var(--card-strong);
  font-size: 18px;
  font-weight: 950;
}

.today-task-head strong {
  min-width: 0;
  overflow: hidden;
  color: #5d7468;
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-path-card {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 0;
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid rgba(204, 219, 207, 0.42);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,251,.86), rgba(247,252,246,.72)),
    radial-gradient(circle at 8% 10%, rgba(111, 167, 127, 0.12), transparent 36%);
  box-shadow: 0 10px 24px rgba(45, 70, 61, 0.05);
}

.today-overview-card {
  grid-template-columns: minmax(230px, 0.56fr) minmax(0, 1.44fr);
  align-items: center;
  margin-bottom: 16px;
}

.today-path-title {
  display: grid;
  gap: 5px;
  min-width: 0;
  position: relative;
  padding-left: 30px;
  overflow: hidden;
}

.today-path-title::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 3px;
  width: 18px;
  height: 24px;
  border-radius: 999px 999px 999px 0;
  background:
    radial-gradient(circle at 50% 14%, #9ccda5 0 18%, transparent 19%),
    linear-gradient(140deg, transparent 0 42%, #9ccda5 43% 51%, transparent 52%),
    radial-gradient(ellipse at 22% 58%, #b8ddb8 0 26%, transparent 27%),
    radial-gradient(ellipse at 78% 48%, #79b986 0 28%, transparent 29%);
  opacity: 0.9;
}

.today-path-title span {
  color: #2d4d43;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
}

.today-path-title small {
  min-width: 0;
  overflow: hidden;
  color: #7a8a81;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
}

.today-learning-path {
  display: grid;
  grid-template-columns: repeat(6, minmax(108px, 1fr));
  gap: 7px;
  min-width: 0;
  justify-content: end;
}

.today-path-step {
  display: grid;
  grid-template-columns: 28px minmax(56px, auto) minmax(0, 1fr);
  grid-template-areas: "icon label values";
  column-gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 40px;
  padding: 7px 8px;
  border: 1px solid rgba(204, 219, 207, 0.44);
  border-radius: 18px;
  color: #52635b;
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), 0 4px 12px rgba(45, 70, 61, 0.025);
  position: relative;
  overflow: visible;
}

.today-path-step:hover {
  border-color: rgba(126, 166, 136, 0.72);
  color: #2f5b54;
  background: rgba(241, 248, 239, 0.9);
}

.today-path-icon {
  grid-area: icon;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  background: rgba(228, 238, 224, 0.8);
  color: #4f735f;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  justify-self: center;
}

.today-path-icon img {
  display: block;
  width: 21px;
  height: 21px;
  object-fit: contain;
  object-position: center;
}

.today-path-label {
  grid-area: label;
  display: block;
  min-width: 0;
  flex: 0 0 auto;
  padding-right: 0;
  overflow: visible;
  color: #617268;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  text-align: left;
  white-space: nowrap;
}

.today-path-help {
  position: absolute;
  top: -7px;
  right: -6px;
  display: inline-grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 1px solid rgba(183, 204, 190, 0.42);
  border-radius: 999px;
  color: rgba(111, 129, 120, 0.58);
  background: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  cursor: help;
  box-shadow: 0 2px 6px rgba(45, 70, 61, 0.04);
}

.today-path-step:has(.today-path-help) {
  padding-right: 8px;
}

.today-path-help > span {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 70;
  display: none;
  width: min(310px, 68vw);
  padding: 9px 11px;
  border: 1px solid rgba(204, 219, 207, 0.82);
  border-radius: 12px;
  color: #52635b;
  background: rgba(255, 255, 251, 0.98);
  box-shadow: 0 12px 26px rgba(37, 51, 45, 0.13);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
  white-space: normal;
}

.today-path-help:hover > span,
.today-path-help:focus > span {
  display: block;
}

.today-path-values {
  grid-area: values;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
  min-width: 0;
  justify-self: end;
  max-width: 100%;
  overflow: visible;
  white-space: nowrap;
}

.today-path-value {
  min-height: 0;
  max-width: none;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  color: #40544b;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
  text-align: right;
  white-space: nowrap;
}

.today-path-value:hover {
  color: #2f6a57;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.today-path-value.static,
.today-path-value.static:hover {
  color: #40544b;
  background: transparent;
  text-decoration: none;
  cursor: default;
}

.today-path-separator {
  flex: 0 0 auto;
  color: #91a198;
  font-size: 12px;
  font-weight: 800;
}

.today-path-step.success {
  border-color: rgba(127, 174, 139, 0.48);
  background: rgba(239, 248, 239, 0.78);
}

.today-path-step.active {
  border-color: rgba(116, 166, 183, 0.48);
  background: rgba(241, 248, 251, 0.8);
}

.today-path-step.warning {
  border-color: rgba(212, 165, 91, 0.5);
  background: rgba(255, 248, 232, 0.78);
}

.today-path-step.empty,
.today-path-step.pending {
  border-color: rgba(204, 214, 208, 0.48);
  background: rgba(248, 250, 247, 0.66);
}

.today-path-step.success .today-path-icon {
  color: #3f7351;
  background: rgba(207, 233, 211, 0.9);
}

.today-path-step.active .today-path-icon {
  color: #3d7183;
  background: rgba(211, 232, 239, 0.9);
}

.today-path-step.warning .today-path-icon {
  color: #795b23;
  background: rgba(247, 226, 181, 0.95);
}

.today-path-step.path-plan {
  border-color: rgba(104, 155, 205, 0.34);
  background: linear-gradient(180deg, rgba(243, 249, 255, 0.9), rgba(250, 253, 255, 0.72));
}

.today-path-step.path-plan .today-path-icon {
  background: rgba(218, 236, 250, 0.92);
}

.today-path-step.path-study {
  border-color: rgba(102, 174, 178, 0.34);
  background: linear-gradient(180deg, rgba(239, 250, 249, 0.92), rgba(250, 254, 253, 0.72));
}

.today-path-step.path-study .today-path-icon {
  background: rgba(211, 238, 237, 0.94);
}

.today-path-step.path-consolidation {
  border-color: rgba(218, 174, 91, 0.38);
  background: linear-gradient(180deg, rgba(255, 248, 232, 0.94), rgba(255, 252, 244, 0.74));
}

.today-path-step.path-consolidation .today-path-icon {
  background: rgba(248, 226, 181, 0.95);
}

.today-path-step.path-review {
  border-color: rgba(132, 153, 205, 0.34);
  background: linear-gradient(180deg, rgba(244, 247, 255, 0.92), rgba(252, 253, 255, 0.74));
}

.today-path-step.path-review .today-path-icon {
  background: rgba(225, 231, 249, 0.95);
}

.today-path-step.path-growth {
  border-color: rgba(116, 178, 128, 0.34);
  background: linear-gradient(180deg, rgba(240, 250, 240, 0.94), rgba(250, 254, 249, 0.74));
}

.today-path-step.path-growth .today-path-icon {
  background: rgba(214, 239, 216, 0.95);
}

.today-path-step.path-weekly {
  border-color: rgba(104, 155, 205, 0.34);
  background: linear-gradient(180deg, rgba(244, 249, 255, 0.92), rgba(252, 254, 255, 0.74));
}

.today-path-step.path-weekly .today-path-icon {
  background: rgba(218, 236, 250, 0.92);
}

@media (max-width: 1280px) {
  .student-status-card {
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr);
  }

  .student-home-grid {
    grid-template-columns: minmax(290px, 1.08fr) minmax(210px, 0.78fr) minmax(210px, 0.62fr);
  }

  .today-path-card {
    grid-template-columns: 1fr;
  }

  .today-learning-path {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    justify-content: stretch;
  }

  .today-path-step {
    grid-template-columns: 24px minmax(28px, auto) minmax(0, 1fr);
    column-gap: 6px;
  }

  .today-path-label,
  .today-path-value {
    font-size: 13px;
  }
}

.learning-partner-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(190, 210, 196, 0.88);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 251, 244, 0.96) 62%, rgba(238, 247, 239, 0.96) 100%);
  box-shadow: 0 14px 34px rgba(37, 51, 45, 0.12);
}

.partner-avatar-pair {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 116px;
  height: 72px;
}

.partner-student-avatar,
.partner-pet-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  font-weight: 900;
}

.partner-student-avatar {
  width: 64px;
  height: 64px;
  border: 2px solid rgba(151, 184, 168, 0.76);
  color: #254b45;
  background-color: #edf6ee;
  font-size: 22px;
  box-shadow: 0 8px 18px rgba(54, 79, 69, 0.13);
}

.partner-student-avatar.image-avatar {
  color: transparent;
}

.partner-pet-avatar {
  width: 52px;
  height: 52px;
  margin-left: -10px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  color: #2f5b54;
  background: #f6fbf3;
  font-size: 18px;
  box-shadow: 0 10px 22px rgba(54, 79, 69, 0.14);
}

.partner-pet-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.partner-pet-avatar.placeholder {
  border-color: rgba(178, 201, 186, 0.78);
}

.partner-main {
  min-width: 0;
}

.partner-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.partner-title-row span,
.pet-select-header span,
.pet-option-head span {
  color: #607064;
  font-size: 13px;
  font-weight: 700;
}

.partner-title-row strong {
  color: #263b36;
  font-size: 18px;
  line-height: 1.15;
}

.partner-title-row em {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid #d5e2d4;
  border-radius: 999px;
  padding: 0 9px;
  color: #49655b;
  background: #f7fbf3;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.partner-main p,
.pet-select-header p,
.pet-option p {
  margin-top: 5px;
  color: #607064;
  font-size: 13px;
}

.partner-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(118px, 1fr));
  gap: 8px;
  margin-top: 11px;
}

.partner-metric {
  min-width: 0;
  border: 1px solid #dce7d8;
  border-radius: var(--ui-radius-control);
  padding: 8px 9px;
  background: rgba(255, 255, 255, 0.72);
}

.partner-metric-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  color: #607064;
  font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.partner-metric-head strong {
  color: #2d4740;
  font-family: inherit;
  font-size: 12px;
  white-space: nowrap;
}

.partner-metric-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #81b386;
}

.soft-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(204, 219, 207, 0.54);
  border-radius: 11px;
  background-color: rgba(255, 255, 255, 0.78);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px 30px;
  box-shadow: inset 0 -4px 0 rgba(79, 143, 114, 0.06), 0 5px 14px rgba(53, 87, 70, 0.07);
}

.icon-paw {
  background-image: url("/static/assets/icons/pet-helper.png");
}

.icon-bowl {
  background-image: url("/static/assets/icons/pet-feeding.png");
}

.icon-bath {
  background-image: url("/static/assets/icons/pet-bath.png");
}

.icon-heart {
  background-image: url("/static/assets/icons/pet-heart.png");
}

.toolbar-pet-identity .icon-bowl,
.metric-fullness .soft-icon {
  background-color: #f2f9ec;
}

.metric-cleanliness .soft-icon {
  background-color: #eef8fb;
}

.metric-intimacy .soft-icon {
  background-color: #fff5ef;
}

.metric-cleanliness .partner-metric-icon {
  background: #75aeca;
}

.metric-intimacy .partner-metric-icon {
  background: #d7a85e;
}

.partner-metric-track {
  height: 5px;
  margin-top: 7px;
  border-radius: 999px;
  background: #edf3ec;
  overflow: hidden;
}

.partner-metric-track div {
  height: 100%;
  border-radius: inherit;
  background: #81b386;
}

.metric-cleanliness .partner-metric-track div {
  background: #75aeca;
}

.metric-intimacy .partner-metric-track div {
  background: #d7a85e;
}

.partner-actions,
.pet-option-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.pet-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid #b8cabe;
  border-radius: 50%;
  color: #2f5b54;
  background: #eef7ee;
  font-size: 20px;
  font-weight: 800;
}

.pet-cool {
  border-color: #a7b7c8;
  color: #2f4d68;
  background: #eef4f8;
}

.pet-spark {
  border-color: #d8b985;
  color: #6a4b1c;
  background: #fff4dc;
}

.pet-character {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: end center;
  width: var(--pet-size, 88px);
  height: var(--pet-size, 88px);
  margin: 0;
  overflow: visible;
  isolation: isolate;
  background: transparent;
}

.pet-character::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3%;
  z-index: -1;
  width: 58%;
  height: 11%;
  border-radius: 50%;
  background: rgba(42, 64, 54, 0.11);
  filter: blur(6px);
  transform: translateX(-50%);
}

.pet-character img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 88%;
  filter: drop-shadow(0 10px 12px rgba(38, 59, 54, 0.14));
}

.pet-character[data-pet-state="idle"] img {
  animation: petIdleBreath 4.2s ease-in-out infinite, petIdleDrift 9s ease-in-out infinite;
}

.pet-character[data-pet-state="rest"] img,
.pet-character[data-pet-posture="rest"] img {
  animation: petRestBreath 4.8s ease-in-out infinite;
  opacity: 0.96;
}

.pet-character[data-pet-state="upset"] img,
.pet-character[data-pet-posture="upset"] img {
  animation: petUpsetSink 2.6s ease-in-out infinite;
  filter: drop-shadow(0 8px 10px rgba(38, 59, 54, 0.11)) saturate(0.88);
}

.pet-character[data-pet-posture="upset"]::before {
  content: "鈥?;
  position: absolute;
  right: 9%;
  top: 10%;
  color: #7f9189;
  font-size: 14px;
  font-weight: 800;
  animation: petMoodMark 2.2s ease-in-out;
}

.pet-character[data-pet-state="talk"] img {
  animation: petTalkBounce 0.72s ease-in-out infinite;
}

.pet-character[data-pet-state="talk"]::after {
  animation: petShadowPulse 0.72s ease-in-out infinite;
}

.pet-character[data-pet-state="click_jump"] img,
.pet-character[data-pet-state="happy"] img {
  animation: petClickJump 1.05s cubic-bezier(.22, .72, .18, 1) both;
}

.pet-character[data-pet-state="click_jump"]::after,
.pet-character[data-pet-state="happy"]::after {
  animation: petJumpShadow 1.05s ease-in-out both;
}

.pet-character[data-pet-state="click_turn"] img {
  animation: petClickTurn 0.95s ease-in-out;
}

.pet-character[data-pet-state="click_stretch"] img {
  animation: petClickStretch 1.05s ease-in-out;
}

.pet-character[data-pet-state="click_blink"] img {
  animation: petClickBlink 0.7s ease-in-out;
}

.pet-character[data-pet-state="pet_shake"] img {
  animation: petShake 0.82s ease-in-out;
}

.pet-character[data-pet-state="curious"] img {
  animation: petCurious 1.15s ease-in-out;
}

.pet-character[data-pet-posture="curious"] img {
  filter: drop-shadow(0 11px 13px rgba(38, 59, 54, 0.16)) brightness(1.02);
}

.pet-character[data-pet-state="sit"] img,
.pet-character[data-pet-state="bored"] img {
  animation: petSit 1.6s ease-in-out;
}

.pet-character[data-pet-state="walk_left"] img {
  animation: petWalkLeft 1.75s ease-in-out;
}

.pet-character[data-pet-state="walk_right"] img {
  animation: petWalkRight 1.75s ease-in-out;
}

.pet-character[data-pet-state="run_left"] img,
.pet-character[data-pet-state="run_right"] img {
  animation: petRunStride 0.68s ease-in-out infinite;
}

.pet-character[data-pet-state="pet_hop"] img {
  animation: petHop 1.05s cubic-bezier(.22, .72, .18, 1) both;
}

.pet-character[data-pet-state="pet_hop"]::after {
  animation: petJumpShadow 1.05s ease-in-out both;
}

.pet-character[data-pet-state="pet_roll"] img {
  animation: petRoll 1.22s cubic-bezier(.24, .78, .18, 1) both;
}

.pet-character[data-pet-state="pet_roll"]::after {
  animation: petRollShadow 1.22s ease-in-out both;
}

.pet-character[data-pet-state="pet_soft_roll"] img {
  animation: petSoftRoll 1.28s cubic-bezier(.26, .76, .18, 1) both;
}

.pet-character[data-pet-state="pet_soft_roll"]::after {
  animation: petRollShadow 1.28s ease-in-out both;
}

.pet-character[data-pet-state="pet_fire"] img {
  animation: petFireProud 1.18s ease-in-out both;
  filter: drop-shadow(0 13px 14px rgba(153, 78, 28, 0.2)) saturate(1.08);
}

.pet-character[data-pet-state="pet_fire"]::before {
  content: "";
  position: absolute;
  right: 1%;
  top: 18%;
  width: 28px;
  height: 22px;
  border-radius: 60% 50% 65% 45%;
  background:
    radial-gradient(circle at 68% 42%, rgba(255, 247, 177, 0.94) 0 18%, transparent 19%),
    radial-gradient(circle at 52% 58%, rgba(255, 140, 52, 0.9) 0 34%, transparent 35%),
    radial-gradient(circle at 22% 48%, rgba(255, 74, 54, 0.64) 0 30%, transparent 31%);
  filter: drop-shadow(0 4px 8px rgba(185, 88, 24, 0.25));
  transform-origin: 0 80%;
  animation: petFireFlicker 1.08s ease-out both;
}

.pet-character[data-pet-state="pet_dash"] img {
  animation: petDashLean 0.54s ease-in-out infinite;
  filter: drop-shadow(0 13px 14px rgba(153, 78, 28, 0.16)) saturate(1.06);
}

.pet-character[data-pet-state="pet_star_spin"] img {
  animation: petStarSpin 1.18s cubic-bezier(.23, .78, .2, 1) both;
  filter: drop-shadow(0 12px 14px rgba(63, 84, 128, 0.18)) brightness(1.03);
}

.pet-character[data-pet-state="pet_star_spin"]::before {
  content: "*";
  position: absolute;
  right: 6%;
  top: 8%;
  color: #5d74ad;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  text-shadow:
    -24px 22px 0 rgba(107, 128, 187, 0.56),
    -42px 4px 0 rgba(191, 172, 88, 0.48);
  animation: petStarTrail 1.12s ease-out both;
}

.pet-character[data-pet-state="pet_cloud_bounce"] img {
  animation: petCloudBounce 1.18s cubic-bezier(.24, .78, .2, 1) both;
  filter: drop-shadow(0 12px 14px rgba(93, 125, 116, 0.16)) brightness(1.02);
}

.pet-character[data-pet-state="pet_cloud_bounce"]::before {
  content: "";
  position: absolute;
  left: 13%;
  bottom: 15%;
  width: 40px;
  height: 18px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 48%, rgba(255, 255, 255, 0.92) 0 36%, transparent 37%),
    radial-gradient(circle at 48% 28%, rgba(255, 255, 255, 0.96) 0 38%, transparent 39%),
    radial-gradient(circle at 74% 52%, rgba(255, 255, 255, 0.9) 0 34%, transparent 35%),
    rgba(215, 233, 226, 0.72);
  box-shadow: 0 7px 12px rgba(96, 126, 118, 0.12);
  animation: petCloudPuff 1.18s ease-out both;
}

.pet-character[data-pet-state="celebrate"] img {
  animation: petCelebrate 1.2s ease-in-out;
}

.pet-character[data-pet-state="sleep_idle"] img {
  animation: petSleepFloat 4.8s ease-in-out infinite;
  opacity: 0.82;
}

.pet-character[data-pet-state="sick"] img,
.pet-character[data-pet-posture="sick"] img {
  animation: petSickWeak 4.2s ease-in-out infinite;
  opacity: 0.76;
  filter: drop-shadow(0 7px 9px rgba(38, 59, 54, 0.1)) saturate(0.72);
}

.pet-character[data-pet-posture="sick"]::before {
  content: "+";
  position: absolute;
  right: 10%;
  top: 8%;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #7a5c58;
  background: #fff2ed;
  font-size: 14px;
  font-weight: 900;
}

.pet-character[data-pet-state="sleep"] img {
  animation: petSleepFloat 5.2s ease-in-out infinite;
  opacity: 0.72;
  filter: drop-shadow(0 8px 10px rgba(38, 59, 54, 0.1)) saturate(0.82);
}

.pet-character[data-pet-state="sleep"]::before {
  content: "Zz";
  position: absolute;
  right: 4%;
  top: 4%;
  color: #7f9189;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  animation: petSleepZ 2.8s ease-in-out infinite;
}

.pet-character[data-pet-posture="sleep"]::before {
  content: "Zz";
  position: absolute;
  right: 4%;
  top: 4%;
  color: #7f9189;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  animation: petSleepZ 2.8s ease-in-out infinite;
}

.pet-character.pet-cool[data-pet-posture="rest"] img {
  transform-origin: 50% 92%;
}

.pet-character.pet-spark[data-pet-posture="happy"] img,
.pet-character.pet-spark[data-pet-state="celebrate"] img {
  filter: drop-shadow(0 12px 14px rgba(116, 82, 30, 0.2)) saturate(1.08);
}

.pet-character.pet-soft[data-pet-posture="rest"] img,
.pet-character.pet-soft[data-pet-posture="sleep"] img {
  filter: drop-shadow(0 9px 12px rgba(76, 97, 84, 0.13)) saturate(0.96);
}

.pet-character-home {
  --pet-size: 96px;
}

.pet-character-select {
  --pet-size: 150px;
  margin: -8px 0 -4px;
}

.pet-character-feedback {
  --pet-size: 66px;
}

.pet-character-floating {
  --pet-size: 124px;
}

.floating-pet.compact .pet-character-floating {
  --pet-size: 96px;
}

@keyframes petIdleBreath {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.018);
  }
}

@keyframes petIdleDrift {
  0%, 100% {
    filter: drop-shadow(0 10px 12px rgba(38, 59, 54, 0.14));
  }
  45% {
    filter: drop-shadow(0 11px 13px rgba(38, 59, 54, 0.16));
  }
}

@keyframes petRestBreath {
  0%, 100% {
    transform: translateY(3px) scale(1);
  }
  50% {
    transform: translateY(0) scale(1.015);
  }
}

@keyframes petUpsetSink {
  0%, 100% {
    transform: translateY(4px) rotate(-1.5deg) scale(0.985);
  }
  45% {
    transform: translateY(7px) rotate(-2deg) scale(0.975);
  }
  72% {
    transform: translateY(5px) rotate(-1deg) scale(0.98);
  }
}

@keyframes petMoodMark {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  35%, 78% {
    opacity: 0.9;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-3px);
  }
}

@keyframes petTalkBounce {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-4px) rotate(-1.2deg) scale(1.025);
  }
  55% {
    transform: translateY(0) rotate(1deg) scale(0.992);
  }
  78% {
    transform: translateY(-2px) rotate(-0.6deg) scale(1.012);
  }
}

@keyframes petShadowPulse {
  0%, 100% {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
  }
  45% {
    transform: translateX(-50%) scaleX(0.78);
    opacity: 0.72;
  }
}

@keyframes petClickJump {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  12% {
    transform: translateY(2px) scale(1.045, 0.955);
  }
  42% {
    transform: translateY(-14px) scale(0.985, 1.035);
  }
  68% {
    transform: translateY(0) scale(1.018, 0.982);
  }
  84% {
    transform: translateY(-3px) scale(0.996, 1.008);
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}

@keyframes petJumpShadow {
  0%, 100% {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
  }
  12% {
    transform: translateX(-50%) scaleX(1.06);
    opacity: 1;
  }
  42% {
    transform: translateX(-50%) scaleX(0.68);
    opacity: 0.58;
  }
  68% {
    transform: translateX(-50%) scaleX(1.04);
    opacity: 0.95;
  }
  84% {
    transform: translateX(-50%) scaleX(0.92);
    opacity: 0.82;
  }
}

@keyframes petClickTurn {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  28% {
    transform: translateY(-3px) rotate(-7deg) scale(1.02);
  }
  62% {
    transform: translateY(0) rotate(6deg) scale(0.995);
  }
}

@keyframes petClickStretch {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  35% {
    transform: translateY(2px) scale(1.06, 0.94);
  }
  68% {
    transform: translateY(-4px) scale(0.98, 1.04);
  }
}

@keyframes petClickBlink {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 10px 12px rgba(38, 59, 54, 0.14));
  }
  50% {
    transform: translateY(-1px) scale(1.012);
    filter: drop-shadow(0 12px 14px rgba(38, 59, 54, 0.18)) brightness(1.035);
  }
}

@keyframes petShake {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  24% {
    transform: translateY(-1px) rotate(-2deg) scale(1.01);
  }
  48% {
    transform: translateY(0) rotate(2deg) scale(1);
  }
  72% {
    transform: translateY(-1px) rotate(-1deg) scale(1.006);
  }
}

@keyframes petCurious {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  36% {
    transform: translateY(-2px) rotate(-5deg) scale(1.015);
  }
  68% {
    transform: translateY(0) rotate(3deg) scale(1);
  }
}

@keyframes petSit {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  45% {
    transform: translateY(5px) scale(1.04, 0.94);
  }
}

@keyframes petWalkLeft {
  0%, 100% {
    transform: translateX(0) translateY(0) scale(1);
  }
  30% {
    transform: translateX(-22px) translateY(-2px) rotate(-2deg) scale(1.01);
  }
  65% {
    transform: translateX(-34px) translateY(0) rotate(1deg) scale(1);
  }
}

@keyframes petWalkRight {
  0%, 100% {
    transform: translateX(0) translateY(0) scale(1);
  }
  30% {
    transform: translateX(22px) translateY(-2px) rotate(2deg) scale(1.01);
  }
  65% {
    transform: translateX(34px) translateY(0) rotate(-1deg) scale(1);
  }
}

.floating-pet.pet-wander-left .floating-pet-stage {
  animation: petStageWanderLeft 2.1s ease-in-out both;
}

.floating-pet.pet-wander-right .floating-pet-stage {
  animation: petStageWanderRight 2.1s ease-in-out both;
}

.floating-pet.pet-run-left .floating-pet-stage {
  animation: petStageRunLeft 1.65s cubic-bezier(.32, .72, .22, 1) both;
}

.floating-pet.pet-run-right .floating-pet-stage {
  animation: petStageRunRight 1.65s cubic-bezier(.32, .72, .22, 1) both;
}

.floating-pet.pet-roll .floating-pet-stage,
.floating-pet.pet-hop .floating-pet-stage,
.floating-pet.pet-cloud-bounce .floating-pet-stage,
.floating-pet.pet-soft-roll .floating-pet-stage {
  animation: petStageTinySettle 1.2s ease-in-out both;
}

.floating-pet.pet-dash .floating-pet-stage {
  animation: petStageDash 1.45s cubic-bezier(.3, .76, .22, 1) both;
}

@keyframes petStageWanderLeft {
  0%, 100% {
    transform: translateX(0);
  }
  44% {
    transform: translateX(-52px);
  }
  72% {
    transform: translateX(-38px);
  }
}

@keyframes petStageWanderRight {
  0%, 100% {
    transform: translateX(0);
  }
  44% {
    transform: translateX(52px);
  }
  72% {
    transform: translateX(38px);
  }
}

@keyframes petStageRunLeft {
  0%, 100% {
    transform: translateX(0);
  }
  42% {
    transform: translateX(-88px);
  }
  68% {
    transform: translateX(-48px);
  }
}

@keyframes petStageRunRight {
  0%, 100% {
    transform: translateX(0);
  }
  42% {
    transform: translateX(88px);
  }
  68% {
    transform: translateX(48px);
  }
}

@keyframes petStageTinySettle {
  0%, 100% {
    transform: translateX(0);
  }
  52% {
    transform: translateX(-8px);
  }
}

@keyframes petStageDash {
  0%, 100% {
    transform: translateX(0);
  }
  34% {
    transform: translateX(-72px);
  }
  58% {
    transform: translateX(46px);
  }
  76% {
    transform: translateX(18px);
  }
}

@keyframes petRunStride {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-5px) rotate(-3deg) scale(1.018);
  }
  55% {
    transform: translateY(0) rotate(3deg) scale(0.992);
  }
  76% {
    transform: translateY(-3px) rotate(-1deg) scale(1.01);
  }
}

@keyframes petHop {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  18% {
    transform: translateY(2px) scale(1.04, 0.95);
  }
  46% {
    transform: translateY(-20px) scale(0.98, 1.04);
  }
  72% {
    transform: translateY(0) scale(1.025, 0.975);
  }
}

@keyframes petRoll {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
  }
  24% {
    transform: translateX(-10px) translateY(3px) rotate(-28deg) scale(1.02, 0.96);
  }
  58% {
    transform: translateX(10px) translateY(-2px) rotate(22deg) scale(0.98, 1.03);
  }
  82% {
    transform: translateX(0) translateY(0) rotate(-6deg) scale(1.01);
  }
  100% {
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes petSoftRoll {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
  }
  26% {
    transform: translateX(-8px) translateY(4px) rotate(-18deg) scale(1.05, 0.94);
  }
  56% {
    transform: translateX(7px) translateY(-3px) rotate(15deg) scale(0.96, 1.04);
  }
  82% {
    transform: translateX(0) translateY(1px) rotate(-4deg) scale(1.02, 0.98);
  }
  100% {
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes petRollShadow {
  0%, 100% {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
  }
  42% {
    transform: translateX(-50%) scaleX(0.78);
    opacity: 0.62;
  }
  74% {
    transform: translateX(-50%) scaleX(1.08);
    opacity: 0.86;
  }
}

@keyframes petCelebrate {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-10px) rotate(-7deg) scale(1.035);
  }
  55% {
    transform: translateY(-2px) rotate(8deg) scale(1.01);
  }
  78% {
    transform: translateY(-6px) rotate(-3deg) scale(1.02);
  }
}

@keyframes petFireProud {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  28% {
    transform: translateY(-7px) rotate(-4deg) scale(1.03);
  }
  52% {
    transform: translateY(-2px) rotate(5deg) scale(1.012);
  }
  76% {
    transform: translateY(-4px) rotate(-2deg) scale(1.02);
  }
}

@keyframes petFireFlicker {
  0% {
    opacity: 0;
    transform: translate(-2px, 8px) scale(0.36) rotate(-10deg);
  }
  28%, 72% {
    opacity: 0.96;
    transform: translate(10px, -2px) scale(1) rotate(7deg);
  }
  100% {
    opacity: 0;
    transform: translate(22px, -8px) scale(0.78) rotate(14deg);
  }
}

@keyframes petDashLean {
  0%, 100% {
    transform: translateY(0) rotate(-3deg) scale(1.02, 0.99);
  }
  50% {
    transform: translateY(-5px) rotate(4deg) scale(0.99, 1.025);
  }
}

@keyframes petStarSpin {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  36% {
    transform: translateY(-5px) rotate(-12deg) scale(1.025);
  }
  66% {
    transform: translateY(0) rotate(10deg) scale(0.992);
  }
}

@keyframes petStarTrail {
  0% {
    opacity: 0;
    transform: translateY(8px) rotate(-20deg) scale(0.78);
  }
  35%, 76% {
    opacity: 0.92;
    transform: translateY(0) rotate(8deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px) rotate(20deg) scale(0.84);
  }
}

@keyframes petCloudBounce {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  18% {
    transform: translateY(2px) scale(1.04, 0.95);
  }
  48% {
    transform: translateY(-16px) rotate(-2deg) scale(0.985, 1.035);
  }
  74% {
    transform: translateY(0) rotate(1deg) scale(1.022, 0.98);
  }
}

@keyframes petCloudPuff {
  0% {
    opacity: 0;
    transform: translateY(5px) scale(0.74);
  }
  36%, 70% {
    opacity: 0.84;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-5px) scale(1.12);
  }
}

@keyframes petSickWeak {
  0%, 100% {
    transform: translateY(7px) rotate(-2deg) scale(1.04, 0.92);
  }
  50% {
    transform: translateY(5px) rotate(-1deg) scale(1.055, 0.93);
  }
}

@keyframes petSleepFloat {
  0%, 100% {
    transform: translateY(3px) rotate(-1deg) scale(0.985);
  }
  50% {
    transform: translateY(0) rotate(-1deg) scale(1);
  }
}

@keyframes petSleepZ {
  0% {
    opacity: 0;
    transform: translate(0, 4px) scale(0.85);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(8px, -12px) scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pet-character[data-pet-state] img,
  .pet-character[data-pet-state]::before,
  .pet-character[data-pet-state]::after,
  .floating-pet-stage,
  .card-pack-dialog.pack-opening::backdrop,
  .card-pack-dialog.pack-opening .card-pack-dialog-shell,
  .card-pack-dialog.pack-opening .pack-result-card,
  .pack-result-card.revealed,
  .pack-result-card.revealed::after,
  .pack-result-card.claimed {
    animation: none;
  }
}

.pet-select-panel {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #d1ddcd;
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: 0 8px 20px rgba(37, 51, 45, 0.08);
}

.pet-select-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.pet-select-header h2 {
  margin: 3px 0 0;
  color: #263b36;
  font-size: 22px;
}

.pet-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.pet-care-panel {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.pet-care-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #d4dfd1;
  border-radius: 8px;
  background: #fffffb;
}

.pet-care-card-focus {
  border-color: rgba(79, 143, 114, 0.72);
  box-shadow: 0 0 0 3px rgba(111, 167, 127, 0.16), 0 10px 24px rgba(37, 51, 45, 0.12);
}

.pet-section-summary {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(196, 216, 201, 0.82);
  border-radius: 12px;
  background: rgba(255, 255, 251, 0.86);
  color: #40544b;
}

.pet-section-summary strong {
  color: #2f5f50;
  font-size: 18px;
}

.pet-section-summary span,
.pet-section-summary em {
  color: #65766c;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.pet-wide-empty {
  grid-column: 1 / -1;
}

.pet-care-panel.pet-care-focus-inventory,
.pet-care-panel.pet-care-focus-shop {
  grid-template-columns: minmax(320px, 1fr);
}

.pet-care-panel.pet-care-focus-inventory [data-pet-care-card="status"],
.pet-care-panel.pet-care-focus-inventory [data-pet-care-card="shop"],
.pet-care-panel.pet-care-focus-shop [data-pet-care-card="status"],
.pet-care-panel.pet-care-focus-shop [data-pet-care-card="inventory"] {
  display: none;
}

.partner-shop-page {
  display: grid;
  gap: 10px;
  width: min(1180px, 100%);
  margin: 0 auto;
}

body.shop-view-active .toolbar {
  display: none;
}

body.shop-view-active .app {
  padding-top: 10px;
  padding-bottom: 4px;
}

.partner-shop-hero {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 12px 16px;
  overflow: hidden;
  border: 1px solid rgba(196, 216, 201, 0.82);
  border-radius: 16px;
  background:
    radial-gradient(circle at 56% 72%, rgba(221, 241, 228, 0.86), transparent 25%),
    radial-gradient(circle at 82% 24%, rgba(255, 245, 217, 0.64), transparent 20%),
    linear-gradient(135deg, rgba(255, 255, 253, 0.98), rgba(242, 250, 244, 0.96));
  box-shadow: 0 14px 34px rgba(42, 70, 57, 0.09);
}

.partner-shop-copy span {
  color: #6c7c72;
  font-size: 12px;
  font-weight: 900;
}

.partner-shop-copy h2 {
  margin: 4px 0 5px;
  color: #24483f;
  font-size: 22px;
  line-height: 1.1;
}

.partner-shop-copy p {
  color: #66776e;
  font-size: 13px;
  font-weight: 700;
}

.partner-shop-pet {
  display: grid;
  place-items: end center;
  align-self: end;
  width: 104px;
  height: 86px;
}

.partner-shop-pet img {
  max-width: 92px;
  max-height: 84px;
  object-fit: contain;
  filter: drop-shadow(0 7px 12px rgba(50, 80, 64, 0.16));
}

.partner-shop-balance {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 5px 9px;
  border: 1px solid rgba(226, 180, 82, 0.42);
  border-radius: 999px;
  background: rgba(255, 251, 239, 0.86);
  box-shadow: 0 6px 14px rgba(126, 88, 25, 0.07);
}

.partner-shop-balance > span:not(.coin-medal) {
  margin-top: 0;
  color: #7a6028;
  font-size: 11px;
  font-weight: 900;
}

.partner-shop-balance strong {
  color: #5f4714;
  font-size: 16px;
  line-height: 1.1;
}

.partner-shop-balance button {
  min-height: 24px;
  margin-top: 0;
  padding: 0 7px;
  font-size: 11px;
  border-color: rgba(224, 184, 88, 0.48);
  color: #7a5a1f;
  background: rgba(255, 247, 226, 0.92);
}

.partner-shop-tabs {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.partner-shop-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  border: 1px solid rgba(201, 218, 207, 0.82);
  border-radius: 999px;
  padding: 0 9px;
  color: #405f54;
  background: rgba(255, 255, 251, 0.84);
  box-shadow: 0 6px 16px rgba(42, 70, 57, 0.055);
  font-size: 12px;
  font-weight: 900;
}

.partner-shop-tabs button.active {
  border-color: #2f745f;
  color: #ffffff;
  background: linear-gradient(180deg, #3f8b69, #286955);
  box-shadow: 0 9px 20px rgba(45, 112, 83, 0.22);
}

.shop-tab-icon,
.shop-card-badge {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #edf7ef;
}

.partner-shop-tabs button.active .shop-tab-icon {
  background: rgba(255, 255, 255, 0.18);
}

.shop-tab-grid::before { content: "▦"; }
.shop-tab-apple::before { content: "●"; color: #d66354; }
.shop-tab-drop::before { content: "●"; color: #579ec4; }
.shop-tab-toy::before { content: "✦"; color: #c88735; }
.shop-tab-heart::before { content: "●"; color: #e28582; }
.shop-tab-book::before { content: "▣"; color: #6688bd; }
.shop-tab-card::before { content: "▤"; color: #9a7a35; }

.partner-shop-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(126px, 1fr));
  gap: 12px;
  width: min(960px, 100%);
  justify-self: center;
}

.partner-shop-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(140px, 1fr) auto auto auto;
  justify-items: center;
  align-items: center;
  min-height: 236px;
  padding: 10px 10px 12px;
  border: 1px solid rgba(208, 222, 207, 0.82);
  border-radius: 14px;
  background: rgba(255, 255, 251, 0.92);
  box-shadow: 0 10px 24px rgba(42, 70, 57, 0.075);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.partner-shop-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(42, 70, 57, 0.11);
}

.shop-card-badge {
  position: absolute;
  top: 9px;
  left: 9px;
  border: 1px solid rgba(207, 222, 210, 0.74);
}

.shop-item-art {
  width: 104px;
  height: 104px;
  align-self: center;
  margin-top: 0;
  background-image: url("/static/assets/shop/partner-shop-card-icons.png");
  background-repeat: no-repeat;
  background-size: 312px 312px;
  filter: drop-shadow(0 7px 12px rgba(70, 88, 72, 0.12));
}

.shop-icon-apple-cookie { background-position: 0 0; }
.shop-icon-partner-water { background-position: -104px 0; }
.shop-icon-bubble-shampoo { background-position: -208px 0; }
.shop-icon-cleaning-brush { background-position: 0 -104px; }
.shop-icon-star-bell { background-position: -104px -104px; }
.shop-icon-quiet-pillow { background-position: -208px -104px; }
.shop-icon-pet-radio { background-position: 0 -208px; }
.shop-icon-study-hint-card { background-position: -104px -208px; }
.shop-icon-lucky-badge-box { background-position: -208px -208px; }
.shop-icon-card-pack {
  border-radius: 14px;
  background-image: url("/external-card-assets/pack_covers/pack_chengyu_poetry.png");
  background-position: center;
  background-size: contain;
  background-color: transparent;
}

.shop-item-art.image-art {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 104px;
  height: 148px;
  background: transparent;
}

.shop-item-art.image-art img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: contain;
  filter: drop-shadow(0 7px 12px rgba(70, 88, 72, 0.12));
}

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

.shop-card-copy h3 {
  margin: 0;
  color: #263b36;
  font-size: 16px;
  line-height: 1.2;
}

.shop-card-copy p {
  color: #718178;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.shop-effect-value {
  justify-self: center;
  margin-top: 4px;
  border: 1px solid rgba(210, 169, 75, 0.38);
  border-radius: 999px;
  padding: 4px 9px;
  color: #75571c;
  background: rgba(255, 248, 226, 0.82);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.shop-card-price {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 7px 0 8px;
  color: #5f4714;
}

.shop-card-price strong {
  font-size: 17px;
}

.shop-coin-dot {
  width: 16px;
  height: 16px;
  border: 2px solid #f0b63d;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff3bb 0 18%, #ffd46a 19% 55%, #efaa31 56% 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 245, 196, 0.72);
}

.partner-shop-card button {
  align-self: end;
  min-width: 98px;
  min-height: 30px;
  border-color: rgba(224, 174, 77, 0.56);
  border-radius: 8px;
  color: #8a5c1d;
  background: linear-gradient(180deg, #fff7e3, #fff1ce);
  font-size: 13px;
  font-weight: 900;
}

.partner-shop-card button:hover {
  border-color: rgba(205, 145, 43, 0.66);
  color: #734914;
  background: linear-gradient(180deg, #fff1cf, #ffe8b8);
}

.partner-shop-footnote {
  justify-self: center;
  margin: 0;
  padding: 4px 16px;
  border-radius: 999px;
  color: #7a8a81;
  background: rgba(238, 247, 236, 0.72);
  font-size: 11px;
  font-weight: 800;
}

.partner-backpack-page {
  display: grid;
  gap: 14px;
  width: min(1280px, 100%);
  margin: 0 auto;
}

.backpack-hero {
  min-height: 96px;
}

.backpack-hero .partner-shop-pet {
  width: 96px;
  height: 82px;
}

.backpack-hero .partner-shop-pet img {
  max-width: 86px;
  max-height: 80px;
}

.backpack-hero .partner-shop-balance {
  gap: 4px;
  padding: 5px 8px;
}

.backpack-hero .partner-shop-balance .coin-medal {
  width: 30px;
  height: 30px;
  box-shadow: inset 0 0 0 4px rgba(255, 245, 196, 0.72), 0 5px 10px rgba(160, 107, 28, 0.12);
}

.backpack-hero .partner-shop-balance > span:not(.coin-medal) {
  font-size: 11px;
}

.backpack-hero .partner-shop-balance strong {
  font-size: 15px;
}

.backpack-hero .partner-shop-balance button {
  min-height: 24px;
  padding: 0 7px;
  font-size: 11px;
}

.backpack-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: start;
}

.backpack-board,
.backpack-side-card {
  border: 1px solid rgba(202, 220, 204, 0.82);
  border-radius: 16px;
  background: rgba(255, 255, 251, 0.88);
  box-shadow: 0 14px 34px rgba(42, 70, 57, 0.08);
}

.backpack-board {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.backpack-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
  gap: 10px;
}

.backpack-slot {
  position: relative;
  display: grid;
  grid-template-rows: 76px minmax(42px, auto) auto auto;
  justify-items: center;
  min-height: 172px;
  padding: 10px;
  border: 1px solid rgba(208, 222, 207, 0.84);
  border-radius: 12px;
  color: #40544b;
  background: linear-gradient(180deg, rgba(255, 255, 252, 0.96), rgba(247, 252, 246, 0.92));
  box-shadow: 0 8px 18px rgba(42, 70, 57, 0.055);
}

.backpack-slot.empty {
  min-height: 172px;
  border-style: dashed;
  border-color: rgba(204, 219, 207, 0.74);
  background: rgba(250, 253, 248, 0.62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.66);
}

.backpack-empty-mark {
  align-self: center;
  width: 34px;
  height: 34px;
  border: 1px dashed rgba(178, 202, 185, 0.78);
  border-radius: 10px;
  background:
    linear-gradient(rgba(178, 202, 185, 0.58), rgba(178, 202, 185, 0.58)) center / 14px 1px no-repeat,
    linear-gradient(90deg, rgba(178, 202, 185, 0.58), rgba(178, 202, 185, 0.58)) center / 1px 14px no-repeat,
    rgba(255, 255, 255, 0.44);
}

.backpack-slot .shop-item-art {
  width: 74px;
  height: 74px;
  margin-top: 0;
  background-size: 222px 222px;
}

.backpack-slot .shop-icon-apple-cookie { background-position: 0 0; }
.backpack-slot .shop-icon-partner-water { background-position: -74px 0; }
.backpack-slot .shop-icon-bubble-shampoo { background-position: -148px 0; }
.backpack-slot .shop-icon-cleaning-brush { background-position: 0 -74px; }
.backpack-slot .shop-icon-star-bell { background-position: -74px -74px; }
.backpack-slot .shop-icon-quiet-pillow { background-position: -148px -74px; }
.backpack-slot .shop-icon-pet-radio { background-position: 0 -148px; }
.backpack-slot .shop-icon-study-hint-card { background-position: -74px -148px; }
.backpack-slot .shop-icon-lucky-badge-box { background-position: -148px -148px; }
.backpack-slot .shop-icon-card-pack {
  border-radius: 12px;
  background-image: url("/external-card-assets/pack_covers/pack_chengyu_poetry.png");
  background-position: center;
  background-size: contain;
  background-color: transparent;
}

.backpack-item-copy {
  display: grid;
  gap: 3px;
  min-height: 42px;
  text-align: center;
}

.backpack-item-copy h3 {
  margin: 0;
  color: #263b36;
  font-size: 14px;
  line-height: 1.2;
}

.backpack-item-copy p {
  margin: 0;
  color: #718178;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.backpack-count {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  margin: 5px 0;
  border: 1px solid rgba(198, 218, 202, 0.9);
  border-radius: 999px;
  padding: 0 8px;
  color: #426755;
  background: rgba(240, 249, 239, 0.9);
  font-size: 11px;
  font-weight: 900;
}

.backpack-slot button {
  align-self: end;
  min-width: 96px;
  min-height: 28px;
  border-color: rgba(117, 171, 136, 0.58);
  border-radius: 8px;
  color: #2f6b55;
  background: linear-gradient(180deg, #f2fbef, #e8f5e4);
  font-size: 12px;
  font-weight: 900;
}

.backpack-slot button[disabled] {
  color: #8a948e;
  border-color: #d8ded7;
  background: #f2f4f0;
  cursor: default;
}

.backpack-side {
  display: grid;
  gap: 12px;
}

.backpack-side-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.backpack-side-head,
.backpack-metric-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.backpack-side-head strong {
  flex: 1;
  color: #24483f;
  font-size: 15px;
}

.backpack-side-head button {
  min-height: 28px;
  padding: 0 9px;
  font-size: 12px;
}

.backpack-current-pet {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.backpack-current-pet img,
.backpack-current-pet > span {
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  border: 1px solid rgba(196, 216, 201, 0.82);
  border-radius: 50%;
  background: #eef7ef;
  object-fit: contain;
}

.backpack-current-pet strong {
  color: #24483f;
  font-size: 18px;
}

.backpack-current-pet p {
  margin: 5px 0 0;
  color: #66776e;
  font-size: 13px;
  font-weight: 800;
}

.backpack-metric {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(214, 226, 211, 0.9);
  border-radius: 12px;
  padding: 10px;
  background: rgba(250, 253, 248, 0.88);
}

.backpack-metric-head span:nth-child(2) {
  flex: 1;
  color: #64766d;
  font-size: 13px;
  font-weight: 800;
}

.backpack-metric-head strong {
  color: #26473f;
  font-size: 18px;
}

.backpack-metric-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4ede2;
}

.backpack-metric-track div {
  height: 100%;
  border-radius: inherit;
  background: #6fa77f;
}

.backpack-metric-cleanliness .backpack-metric-track div {
  background: #69a9cf;
}

.backpack-metric-intimacy .backpack-metric-track div {
  background: #efad52;
}

.backpack-tip {
  border: 1px solid rgba(231, 214, 159, 0.78);
  border-radius: 12px;
  padding: 10px;
  background: #fffaf0;
}

.backpack-tip strong {
  color: #80622a;
}

.backpack-tip p {
  margin: 5px 0 0;
  color: #756b53;
  font-size: 12px;
  line-height: 1.5;
}

.backpack-usage-list {
  display: grid;
  gap: 8px;
}

.backpack-usage-list article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(218, 229, 215, 0.82);
  border-radius: 10px;
  padding: 8px;
  background: rgba(250, 253, 248, 0.78);
}

.backpack-usage-list .shop-item-art {
  width: 42px;
  height: 42px;
  background-size: 126px 126px;
}

.backpack-usage-list .shop-icon-apple-cookie { background-position: 0 0; }
.backpack-usage-list .shop-icon-partner-water { background-position: -42px 0; }
.backpack-usage-list .shop-icon-bubble-shampoo { background-position: -84px 0; }
.backpack-usage-list .shop-icon-cleaning-brush { background-position: 0 -42px; }
.backpack-usage-list .shop-icon-star-bell { background-position: -42px -42px; }
.backpack-usage-list .shop-icon-quiet-pillow { background-position: -84px -42px; }
.backpack-usage-list .shop-icon-pet-radio { background-position: 0 -84px; }
.backpack-usage-list .shop-icon-study-hint-card { background-position: -42px -84px; }
.backpack-usage-list .shop-icon-lucky-badge-box { background-position: -84px -84px; }
.backpack-usage-list .shop-icon-card-pack {
  border-radius: 8px;
  background-image: url("/external-card-assets/CY001.png");
  background-position: center;
  background-size: cover;
}

.backpack-evolution-list {
  display: grid;
  gap: 8px;
}

.backpack-evolution-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
  padding: 7px 9px;
  border: 1px solid rgba(67, 92, 84, .14);
  border-radius: 8px;
  background: rgba(255, 255, 251, .72);
  color: #53645f;
  font-size: 13px;
}

.backpack-evolution-item strong {
  color: #263b36;
  font-size: 12px;
  white-space: nowrap;
}

.backpack-evolution-item.done {
  border-color: rgba(72, 137, 98, .28);
  background: rgba(232, 244, 234, .8);
}

.backpack-usage-list strong {
  color: #314b43;
  font-size: 13px;
}

.backpack-usage-list p {
  margin: 2px 0 0;
  color: #718178;
  font-size: 12px;
}

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

.pet-care-head span {
  color: #607064;
  font-size: 12px;
  font-weight: 800;
}

.pet-care-head h3 {
  margin: 2px 0 0;
  color: #263b36;
  font-size: 17px;
}

.pet-care-head > strong {
  white-space: nowrap;
  color: #8a6d2f;
  font-size: 14px;
}

.pet-care-bars {
  display: grid;
  gap: 10px;
}

.pet-care-bar {
  display: grid;
  gap: 5px;
}

.pet-care-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #52635b;
  font-size: 13px;
  font-weight: 800;
}

.pet-care-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7eee4;
}

.pet-care-track div {
  height: 100%;
  border-radius: inherit;
  background: #6fa77f;
}

.pet-care-bar p,
.pet-care-note {
  margin: 0;
  color: #607064;
  font-size: 12px;
  line-height: 1.45;
}

.pet-inventory-list,
.pet-shop-list {
  display: grid;
  gap: 8px;
}

.pet-inventory-item,
.pet-shop-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #dce6d8;
  border-radius: 8px;
  background: #f8fbf4;
}

.pet-item-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: #254b45;
  background: #e7f2ea;
  font-weight: 900;
}

.pet-inventory-item strong,
.pet-shop-item strong {
  display: block;
  color: #263b36;
  font-size: 14px;
}

.pet-inventory-item p,
.pet-shop-item p,
.pet-empty {
  margin: 2px 0 0;
  color: #607064;
  font-size: 12px;
  line-height: 1.42;
}

.pet-inventory-item button,
.pet-shop-item button {
  min-height: 44px;
  padding-inline: 12px;
}

.pet-option {
  display: grid;
  gap: 12px;
  min-height: 250px;
  padding: 14px;
  border: 1px solid #d4dfd1;
  border-radius: 8px;
  background: #fffffb;
}

.pet-option.selected {
  border-color: #9fc4b6;
  background: #f7fcf8;
  box-shadow: 0 0 0 2px rgba(111, 167, 127, 0.12);
}

.pet-option-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pet-option h3 {
  margin: 2px 0 0;
  color: #263b36;
  font-size: 20px;
}

.pet-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pet-tags span {
  padding: 3px 8px;
  border: 1px solid #d6e2d2;
  border-radius: 999px;
  color: #52635b;
  background: #f5faf1;
  font-size: 12px;
  font-weight: 700;
}

.pet-greeting {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #dce6d8;
  border-radius: 8px;
  color: #40544b;
  background: #f8fbf4;
  font-size: 13px;
  line-height: 1.5;
}

.floating-pet {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 62;
  width: 220px;
  height: 180px;
  pointer-events: none;
  touch-action: none;
  user-select: none;
  overflow: visible;
}

.floating-pet.hidden {
  display: none;
}

.floating-pet-stage {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 220px;
  height: 180px;
  pointer-events: none;
  background: transparent;
}

.floating-pet-character-button {
  position: absolute;
  right: 18px;
  bottom: 0;
  min-width: 96px;
  min-height: 96px;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

.floating-pet-character-button:hover,
.floating-pet-character-button:focus-visible {
  background: transparent;
  box-shadow: none;
}

.floating-pet.dragging {
  z-index: 64;
}

.floating-pet.dragging .floating-pet-character-button {
  cursor: grabbing;
}

.floating-pet.compact {
  width: 176px;
  height: 146px;
}

.floating-pet-bubble {
  position: absolute;
  right: 94px;
  bottom: 112px;
  z-index: 63;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: max-content;
  max-width: min(286px, calc(100vw - 28px));
  padding: 9px 13px 10px;
  border: 1px solid rgba(193, 211, 194, 0.72);
  border-radius: 18px 18px 6px 18px;
  color: #40544b;
  background: #fffdf4;
  box-shadow: 0 8px 20px rgba(37, 51, 45, 0.12);
  pointer-events: none;
  animation: petBubbleIn 220ms ease-out;
}

.floating-pet-bubble.pet-bubble-closable {
  padding-right: 34px;
  pointer-events: auto;
}

.floating-pet-bubble.hidden {
  display: none;
}

.pet-bubble-close {
  position: absolute;
  top: 5px;
  right: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  color: #62746a;
  background: rgba(232, 240, 230, 0.88);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.pet-bubble-close:hover,
.pet-bubble-close:focus-visible {
  color: #28453c;
  background: #dceadd;
  outline: none;
}

.floating-pet-bubble::after {
  content: "";
  position: absolute;
  right: 15px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  border-right: 1px solid rgba(193, 211, 194, 0.72);
  border-bottom: 1px solid rgba(193, 211, 194, 0.72);
  border-bottom-right-radius: 4px;
  background: #fffdf4;
  transform: rotate(45deg);
}

.floating-pet-bubble.place-right {
  right: auto;
  left: 86px;
  border-radius: 18px 18px 18px 6px;
}

.floating-pet-bubble.place-right::after {
  right: auto;
  left: 15px;
  border-right: 0;
  border-bottom: 1px solid rgba(193, 211, 194, 0.72);
  border-left: 1px solid rgba(193, 211, 194, 0.72);
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 4px;
  transform: rotate(-45deg);
}

.floating-pet-bubble:not(.place-above) {
  bottom: 76px;
}

.floating-pet-bubble span {
  color: #6a7a70;
  font-size: 11px;
  font-weight: 800;
}

.floating-pet-bubble p {
  max-width: 100%;
  margin-top: 2px;
  color: #263b36;
  font-size: 13px;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.pet-bubble-lines {
  display: grid;
  gap: 7px;
  max-width: min(320px, calc(100vw - 40px));
}

.pet-bubble-lines p {
  margin: 0;
  padding-top: 6px;
  border-top: 1px solid rgba(190, 207, 195, 0.6);
}

.pet-bubble-lines p:first-child {
  padding-top: 0;
  border-top: 0;
  font-weight: 800;
}

.pet-bubble-image {
  display: block;
  max-width: min(520px, calc(100vw - 40px));
  max-height: min(420px, calc(100vh - 160px));
  margin-top: 6px;
  border: 1px solid #d8e3d5;
  border-radius: 6px;
  object-fit: contain;
  background: #fff;
}

.floating-pet-status {
  position: absolute;
  right: 90px;
  bottom: 112px;
  z-index: 63;
  display: grid;
  gap: 7px;
  width: 190px;
  padding: 10px 12px;
  border: 1px solid rgba(193, 211, 194, 0.82);
  border-radius: 12px;
  color: #40544b;
  background: rgba(255, 253, 244, 0.98);
  box-shadow: 0 8px 20px rgba(37, 51, 45, 0.13);
  pointer-events: none;
  animation: petBubbleIn 180ms ease-out;
}

.floating-pet-status.hidden {
  display: none;
}

.floating-pet-status.place-right {
  right: auto;
  left: 88px;
}

.floating-pet-status:not(.place-above) {
  bottom: 78px;
}

.floating-pet-status > span {
  color: #6a7a70;
  font-size: 11px;
  font-weight: 900;
}

.floating-pet-status > strong {
  color: #263b36;
  font-size: 13px;
}

@keyframes petBubbleIn {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.title-manager span {
  color: #607064;
  font-size: 13px;
  font-weight: 700;
}

.student-avatar {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid #9fbdb0;
  border-radius: 50%;
  color: #254b45;
  background: #e7f2ea;
  font-size: 25px;
  font-weight: 800;
}

.student-avatar.mini {
  width: 60px;
  height: 60px;
  border-width: 2px;
  font-size: 22px;
}

.student-avatar[data-avatar="blue"] {
  color: #315b7d;
  background: #eef5fb;
}

.student-avatar[data-avatar="green"] {
  color: #48692f;
  background: #f0f6e7;
}

.student-avatar.image-avatar {
  background-position: center;
  background-size: cover;
  color: transparent;
}

.title-manager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.student-status-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, 0.86fr) minmax(300px, 1.08fr) minmax(88px, auto) minmax(230px, 0.74fr);
  gap: 18px;
  align-items: center;
  width: 100%;
  max-width: 1180px;
  min-height: 146px;
  padding: 20px 22px;
  border: 1px solid var(--ui-border-soft);
  border-radius: var(--ui-radius-card);
  background:
    linear-gradient(135deg, rgba(255, 255, 253, 0.98) 0%, rgba(251, 253, 248, 0.98) 58%, rgba(242, 249, 241, 0.98) 100%);
  box-shadow: var(--ui-shadow-card);
}

.learning-mode-strip {
  grid-column: 1 / -1;
  justify-self: end;
  display: flex;
  gap: 5px;
  align-items: center;
  margin-top: -2px;
}

.learning-mode-strip button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border: 1px solid rgba(126, 155, 142, 0.42);
  border-radius: 8px;
  color: #486052;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 5px 12px rgba(61, 91, 72, 0.08);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.learning-mode-strip button:hover {
  border-color: rgba(72, 132, 101, 0.62);
  color: #285943;
  background: #f3fbf5;
  transform: translateY(-1px);
}

.learning-mode-strip button.active {
  border-color: rgba(52, 123, 98, 0.62);
  color: #ffffff;
  background: linear-gradient(180deg, #5da878 0%, #347b62 100%);
  box-shadow: 0 7px 14px rgba(52, 123, 98, 0.2);
}

.student-profile-zone {
  order: 1;
}

.student-effort-panel {
  order: 2;
}

.coin-panel {
  order: 3;
}

.parent-praise-card {
  order: 4;
}

.parent-praise-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid rgba(214, 181, 116, 0.62);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 250, 239, 0.9), rgba(255, 255, 251, 0.86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 8px 18px rgba(124, 86, 31, 0.08);
}

.parent-praise-card::after {
  display: none;
}

.parent-praise-count {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  min-height: 78px;
  border: 1px solid rgba(206, 143, 94, 0.48);
  border-radius: 50%;
  padding: 4px;
  color: #864b35;
  background: radial-gradient(circle at 35% 26%, #fff6e8, #f5d8c7);
  box-shadow: 0 8px 18px rgba(122, 77, 45, 0.13);
}

.parent-praise-count span {
  color: #c76d61;
  font-size: 22px;
  line-height: 1;
}

.parent-praise-count strong {
  color: #633d2f;
  font-size: 28px;
  font-weight: 950;
  line-height: 1;
}

.parent-praise-count small {
  color: #7a675a;
  font-size: 11px;
  font-weight: 800;
}

.parent-praise-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.parent-praise-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.parent-praise-main p,
.parent-praise-note,
.parent-praise-dialog-status {
  color: #6b5d52;
  font-size: 12.5px;
  line-height: 1.45;
}

.parent-praise-actions button {
  min-height: 30px;
  border-radius: 10px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
}

.parent-praise-actions button:first-child {
  border-color: #d7ad53;
  background: #fff3d6;
  color: #6d4f1f;
}

.parent-praise-actions button:first-child:hover {
  border-color: #c99835;
  background: #ffe8b6;
  color: #5e4318;
}

.parent-praise-popover {
  position: absolute;
  left: 8px;
  top: calc(100% + 8px);
  z-index: 80;
  display: grid;
  gap: 7px;
  min-width: 220px;
  padding: 10px 12px;
  border: 1px solid rgba(214, 181, 116, 0.78);
  border-radius: 14px;
  background: rgba(255, 252, 244, 0.98);
  box-shadow: 0 14px 30px rgba(76, 55, 33, 0.16);
}

.parent-praise-popover div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #6b5d52;
  font-size: 12px;
}

.parent-praise-popover strong {
  color: #5f3d30;
}

.toolbar-card-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  gap: 7px;
  z-index: 2;
}

.icon-tool-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  border: 1px solid rgba(183, 204, 190, 0.72);
  border-radius: 11px;
  padding: 0;
  color: #557166;
  background: rgba(250, 253, 247, 0.88);
  box-shadow: 0 4px 10px rgba(45, 70, 61, 0.08);
}

.icon-tool-btn:hover {
  color: #2f6658;
  background: #f4fbf2;
  box-shadow: 0 6px 14px rgba(45, 70, 61, 0.12);
}

.icon-tool-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.student-profile-zone {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.student-profile-zone::after,
.student-effort-panel::after {
  content: "";
  position: absolute;
  top: 10px;
  right: -10px;
  width: 1px;
  height: calc(100% - 20px);
  border-right: 1px dashed rgba(174, 195, 181, 0.62);
}

.student-effort-panel {
  position: relative;
}

.pet-analysis-entry {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #bfd0c4;
  border-radius: 8px;
  color: #2f5f57;
  background: #f6faf3;
  font-size: 13px;
  white-space: nowrap;
}

.pet-analysis-entry:hover {
  background: #eaf3e6;
}

.student-avatar-button {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  min-height: 102px;
  border: 0;
  padding: 0;
  color: #2f4f48;
  background: transparent;
}

.student-avatar-button:hover {
  color: #2f6f73;
  background: transparent;
}

.student-identity-text {
  display: grid;
  gap: 5px;
  min-width: 0;
  text-align: left;
}

.student-identity-text strong {
  overflow: hidden;
  color: #213d36;
  font-size: 27px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-identity-text small {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  overflow: hidden;
  color: #5f7169;
  font-size: 12.5px;
  line-height: 1.28;
}

.student-avatar-stack {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  place-items: center;
}

.student-avatar-stack .student-avatar.mini {
  width: 104px;
  height: 104px;
  border: 3px solid rgba(181, 211, 188, 0.86);
  background-color: #eef7ef;
  box-shadow: 0 14px 30px rgba(45, 70, 61, 0.12);
}

.student-pet-avatar {
  position: absolute;
  right: 5px;
  bottom: 2px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 3px solid rgba(246, 252, 247, 0.98);
  border-radius: 50%;
  color: #2f5b54;
  background-color: #f6fbf3;
  background-position: center;
  background-size: cover;
  box-shadow: 0 10px 24px rgba(45, 70, 61, 0.14);
  font-size: 15px;
  font-weight: 900;
}

.toolbar-pet-info {
  display: grid !important;
  align-items: start;
  gap: 7px;
  color: #6b7a72;
  font-size: 12px;
  font-weight: 700;
}

.toolbar-pet-line {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.toolbar-pet-line.status-line {
  grid-template-columns: auto minmax(0, 1fr);
}

.toolbar-pet-line strong {
  color: #304d43;
  font-size: 13px;
  font-weight: 800;
}

.toolbar-pet-info em,
.toolbar-pet-line.status-line span:last-child {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border: 1px solid rgba(215, 227, 213, 0.72);
  border-radius: 999px;
  padding: 0 10px;
  color: #4d7561;
  background: rgba(235, 247, 236, 0.84);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.toolbar-pet-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(124px, 1fr));
  align-items: stretch;
  gap: 8px;
  margin-top: 12px;
  min-width: 0;
  max-width: 420px;
}

.toolbar-pet-metrics .partner-metric {
  min-width: 0;
  max-width: none;
  min-height: 54px;
  padding: 8px 10px;
  border-color: rgba(177, 207, 187, 0.58);
  border-radius: var(--ui-radius-control);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 6px 15px rgba(45, 70, 61, 0.045);
}

.toolbar-pet-metrics .partner-metric-head {
  grid-template-columns: 32px max-content max-content;
  justify-content: start;
  gap: 6px;
  font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: 11.5px;
}

.toolbar-pet-metrics .partner-metric-head > span:not(.soft-icon) {
  min-width: 0;
  overflow: hidden;
  color: #65766c;
  text-overflow: clip;
  white-space: nowrap;
}

.toolbar-pet-metrics .partner-metric-head strong {
  justify-self: end;
  min-width: 0;
  color: #273f39;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.toolbar-pet-metrics .soft-icon {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background-size: 28px 28px;
}

.toolbar-pet-metrics .partner-metric-track {
  height: 3px;
  margin-top: 6px;
}

.level-inline {
  color: #536960;
  font-weight: 700;
}

.title-chip-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.title-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 118px;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid #b9cbbf;
  border-radius: 999px;
  color: #36584f;
  background: #edf5ee;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.title-chip {
  min-height: 22px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: none;
}

button.title-chip:hover {
  border-color: #89aa99;
  color: #254d43;
  background: #e3f0e7;
}

.student-motto-line {
  display: block !important;
  max-width: 360px;
  color: #718178;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.35;
}

.title-bronze {
  border-color: #c49a72;
  color: #6c4125;
  background: #f7eadf;
}

.title-silver {
  border-color: #b6bec5;
  color: #4d5961;
  background: #f1f4f5;
}

.title-gold {
  border-color: #d6b65f;
  color: #73551d;
  background: #fff4d4;
}

.title-platinum,
.title-glory {
  border-color: #abc7d7;
  color: #365d70;
  background: #eff8fb;
  box-shadow: 0 0 0 2px rgba(168, 207, 220, 0.14);
}

.title-diamond,
.title-king {
  border-color: #a8b8de;
  color: #3d4f82;
  background: #f0f4ff;
  box-shadow: 0 0 0 2px rgba(158, 178, 220, 0.16);
}

.title-subject {
  border-color: #9fc4b6;
  color: #2f6258;
  background: #edf8f2;
}

.student-identity-text .title-chip {
  position: relative;
  isolation: isolate;
  min-height: 26px;
  max-width: 142px;
  padding: 3px 11px;
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, rgba(255, 255, 251, 0.92), rgba(239, 248, 236, 0.86)) padding-box,
    linear-gradient(135deg, rgba(143, 180, 154, 0.78), rgba(246, 218, 143, 0.56), rgba(128, 166, 148, 0.72)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 5px 13px rgba(45, 70, 61, 0.10),
    0 0 0 2px rgba(236, 246, 234, 0.72);
  font-weight: 850;
}

.student-identity-text .title-chip::after {
  content: "";
  position: absolute;
  inset: 2px 7px auto 7px;
  z-index: -1;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  opacity: 0.72;
}

.student-identity-text .title-chip:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 18px rgba(45, 70, 61, 0.14),
    0 0 0 2px rgba(236, 246, 234, 0.86);
}

.student-identity-text .title-gold {
  color: #6d4b12;
  background:
    linear-gradient(135deg, #fff8dc, #fffdf7 42%, #ffe9a7) padding-box,
    linear-gradient(135deg, #b98a23, #ffe08a, #d1a03a, #fff0b8) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 6px 15px rgba(176, 132, 34, 0.16), 0 0 0 2px rgba(255, 239, 184, 0.55);
}

.student-identity-text .title-silver {
  color: #435361;
  background:
    linear-gradient(135deg, #f8fbff, #ffffff 45%, #e6edf3) padding-box,
    linear-gradient(135deg, #91a4b4, #f8fbff, #b8c5cf, #e7eef4) border-box;
}

.student-identity-text .title-platinum,
.student-identity-text .title-glory {
  color: #285f68;
  background:
    linear-gradient(135deg, #f4ffff, #ffffff 45%, #e0f5f6) padding-box,
    linear-gradient(135deg, #75b7bd, #f9ffff, #9fcfd1, #d6f3f2) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 6px 15px rgba(83, 151, 158, 0.15), 0 0 0 2px rgba(220, 247, 246, 0.62);
}

.student-identity-text .title-diamond,
.student-identity-text .title-king {
  color: #314483;
  background:
    linear-gradient(135deg, #f4f8ff, #ffffff 42%, #e7f0ff) padding-box,
    linear-gradient(135deg, #7186da, #dce6ff, #8bc9ef, #b08df2) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 7px 17px rgba(91, 113, 190, 0.18), 0 0 0 2px rgba(225, 234, 255, 0.72);
}

/* Learning workspace refresh: papers + practice */
#papersView,
#practiceView {
  padding: 8px 18px 24px;
  background:
    radial-gradient(circle at 8% 0%, rgba(234, 247, 231, 0.72), transparent 32%),
    linear-gradient(180deg, #f5fbf2 0%, #fffdf4 58%, #f0f7ee 100%);
}

#papersView > .paper-filters,
#papersView > .subject-overview-strip,
#papersView > .paper-coverage-panel,
#practiceView > .subject-overview-strip,
#practiceView > .coach-route-panel,
#practiceView > .filters,
#practiceView > .chips,
#practiceView > .practice-locator-card,
#practiceView > .practice-return,
#practiceView > .practice-timer,
#practiceView > .practice-summary,
#papersView > .paper-list,
#practiceView > #practice {
  width: min(1180px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.paper-coverage-panel {
  margin-top: -2px;
  margin-bottom: 10px;
}

.coach-route-panel {
  margin-top: 10px;
  margin-bottom: 12px;
}

.coach-route-loading,
.coach-route-empty,
.coach-route-head,
.coach-route-run,
.coach-family-card,
.coach-question-context,
.coach-feedback-row {
  border: 1px solid rgba(192, 212, 204, 0.82);
  background: rgba(255, 255, 251, 0.94);
  box-shadow: 0 10px 22px rgba(42, 62, 52, 0.06);
}

.coach-route-loading,
.coach-route-empty {
  border-radius: 16px;
  padding: 14px 16px;
  color: #587063;
  font-size: 14px;
  font-weight: 780;
}

.coach-route-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  border-radius: 18px;
  padding: 16px;
}

.coach-route-head span {
  display: block;
  color: #57705f;
  font-size: 12px;
  font-weight: 900;
}

.coach-route-head h3 {
  margin: 3px 0;
  color: #234739;
  font-size: 21px;
  letter-spacing: 0;
}

.coach-route-head p {
  margin: 0;
  color: #637a6b;
  font-size: 13px;
  font-weight: 720;
}

.coach-route-actions,
.coach-family-actions,
.coach-feedback-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.coach-route-switcher {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.coach-route-selector {
  display: grid;
  grid-template-columns: minmax(260px, 1.25fr) minmax(220px, 0.85fr) auto;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(190, 215, 199, 0.9);
  border-radius: 18px;
  background: #fffffb;
  box-shadow: 0 12px 28px rgba(46, 70, 55, 0.07);
}

.coach-route-selector label {
  display: grid;
  min-width: 0;
}

.coach-route-selector select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(142, 176, 157, 0.92);
  border-radius: 12px;
  background: #f7fcf6;
  color: #24483a;
  font-size: 15px;
  font-weight: 880;
  letter-spacing: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

.coach-route-selector-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  background: #f3f8f2;
}

.coach-route-selector-summary strong {
  overflow: hidden;
  color: #24483a;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-route-selector button {
  min-height: 42px;
  align-self: stretch;
  border-color: #2f7463;
  border-radius: 12px;
  background: #2f7463;
  color: #fff;
  font-weight: 950;
  white-space: nowrap;
  box-shadow: 0 10px 20px rgba(34, 101, 81, 0.2);
}

.coach-route-run {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-radius: 14px;
  padding: 10px 12px;
  margin-top: 10px;
}

.coach-route-run strong {
  color: #234739;
  font-size: 14px;
}

.coach-route-run span {
  color: #5e7568;
  font-size: 13px;
  font-weight: 760;
  margin-right: auto;
}

.coach-mainline-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  min-height: 104px;
  padding: 16px 20px;
  border: 1px solid rgba(185, 209, 199, 0.86);
  border-radius: 18px;
  background: linear-gradient(135deg, #fbfff8 0%, #f4fbf7 100%);
  box-shadow: 0 16px 34px rgba(43, 70, 53, 0.08);
}

.coach-mainline-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.coach-mainline-copy span,
.coach-mainline-copy small {
  color: #55705f;
  font-size: 12px;
  font-weight: 850;
}

.coach-mainline-copy h3 {
  margin: 0;
  color: #234739;
  font-size: 23px;
  line-height: 1.16;
  font-weight: 950;
}

.coach-mainline-copy strong,
.coach-mainline-subtitle {
  color: #24483a;
  font-size: 15px;
  font-weight: 900;
}

.coach-mainline-copy p {
  margin: 0 0 2px;
  color: #65786c;
  font-size: 13px;
  font-weight: 820;
}

.coach-mainline-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: #47685a;
  font-size: 13px;
  font-weight: 820;
}

.coach-mainline-progress-track {
  display: block;
  width: min(220px, 38vw);
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2eee5;
}

.coach-mainline-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #64aa81, #2f7463);
}

.coach-mainline-progress em {
  color: #47685a;
  font-style: normal;
  white-space: nowrap;
}

.coach-mainline-action {
  display: flex;
  justify-content: flex-end;
}

.coach-mainline-action button {
  min-width: 148px;
  min-height: 48px;
  border-color: #2f7463;
  border-radius: 12px;
  background: #2f7463;
  color: #fff;
  font-size: 15px;
  font-weight: 950;
  box-shadow: 0 10px 20px rgba(34, 101, 81, 0.2);
}

.coach-route-details {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.coach-route-details-toggle {
  justify-self: start;
  min-height: 34px;
  border-color: #abcbbb;
  border-radius: 10px;
  background: #f8fcf6;
  color: #2f6b59;
  font-weight: 850;
}

.coach-route-details-body.hidden {
  display: none;
}

.coach-route-switcher button.selected {
  background: #1f5e4c;
  color: #fff;
  border-color: #1f5e4c;
}

.coach-metro-map {
  display: grid;
  gap: 14px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(185, 209, 199, 0.86);
  border-radius: 18px;
  background: rgba(252, 254, 249, 0.96);
  box-shadow: 0 12px 24px rgba(42, 62, 52, 0.06);
}

.coach-metro-summary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.coach-metro-summary span {
  display: block;
  color: #55705f;
  font-size: 12px;
  font-weight: 900;
}

.coach-metro-summary strong {
  display: block;
  margin-top: 2px;
  color: #234739;
  font-size: 18px;
  font-weight: 950;
}

.coach-metro-summary p {
  max-width: 50%;
  margin: 0;
  color: #65786c;
  font-size: 12px;
  font-weight: 760;
  text-align: right;
}

.coach-metro-line {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: stretch;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 2px 8px;
  scrollbar-color: rgba(104, 145, 119, 0.46) transparent;
}

.coach-metro-line::before {
  content: "";
  position: absolute;
  left: 42px;
  right: 42px;
  top: 24px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4f8b65, #6aa7aa 62%, #d2a23d);
  opacity: 0.68;
}

.coach-metro-terminal,
.coach-metro-station {
  position: relative;
  z-index: 1;
}

.coach-metro-terminal {
  display: grid;
  gap: 7px;
  align-content: start;
  flex: 0 0 92px;
  min-height: 142px;
  padding-top: 4px;
}

.coach-metro-terminal > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 4px solid #4f8b65;
  border-radius: 999px;
  color: #24513c;
  background: #f9fff6;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 0 0 4px rgba(255, 255, 251, 0.96);
}

.coach-metro-terminal.challenge > span {
  border-color: #d2a23d;
  color: #735512;
}

.coach-metro-terminal strong {
  color: #355a48;
  font-size: 13px;
  font-weight: 900;
}

.coach-metro-terminal button {
  width: max-content;
  min-height: 32px;
  padding: 4px 10px;
  font-size: 12px;
}

.coach-metro-station {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 8px;
  flex: 0 0 216px;
  min-width: 0;
}

.coach-metro-marker {
  display: grid;
  justify-items: center;
  padding-top: 3px;
}

.coach-metro-marker span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 4px solid #b8cbc0;
  border-radius: 999px;
  color: #557064;
  background: #fffefa;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 0 0 4px rgba(255, 255, 251, 0.96);
}

.coach-metro-station-body {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(199, 217, 207, 0.86);
  border-radius: 8px;
  background: rgba(255, 255, 252, 0.94);
}

.coach-metro-station-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.coach-metro-station-head strong {
  display: block;
  min-width: 0;
  color: #234739;
  font-size: 14px;
  font-weight: 940;
  line-height: 1.22;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.coach-metro-station-head strong span {
  display: block;
}

.coach-metro-station-head em {
  padding: 3px 7px;
  border-radius: 999px;
  color: #62776b;
  background: #edf4ec;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.coach-metro-counts,
.coach-station-count-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.coach-metro-counts span,
.coach-station-count-badges span {
  min-height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  color: #4f675a;
  background: rgba(236, 246, 235, 0.92);
  font-size: 12px;
  font-weight: 850;
  line-height: 22px;
  white-space: nowrap;
}

.coach-metro-branches {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.coach-metro-branches button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  min-height: 28px;
  padding: 4px 7px;
  border: 1px solid rgba(187, 207, 197, 0.88);
  border-radius: 7px;
  color: #385c4b;
  background: #f8fcf5;
  font-size: 11px;
  font-weight: 860;
  text-align: left;
}

.coach-metro-branches button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-metro-branches button em {
  color: #6a7d70;
  font-size: 10px;
  font-style: normal;
  font-weight: 820;
  white-space: nowrap;
}

.coach-metro-branches button:hover {
  border-color: rgba(79, 139, 101, 0.62);
  background: #eff8ed;
}

.coach-metro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.coach-metro-actions button {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 12px;
}

.coach-metro-station.active .coach-metro-marker span {
  border-color: #3f8a8e;
  color: #1d555c;
}

.coach-metro-station.active .coach-metro-station-body {
  border-color: rgba(80, 148, 153, 0.72);
  background: #f0fbfb;
}

.coach-metro-station.active .coach-station-count-badges span {
  color: #2d6771;
  background: #e4f3f7;
}

.coach-metro-station.passed .coach-metro-marker span {
  border-color: #4f8b65;
  color: #24513c;
}

.coach-metro-station.passed .coach-metro-station-body {
  border-color: rgba(89, 143, 99, 0.62);
  background: #f1faf0;
}

.coach-metro-station.passed .coach-station-count-badges span {
  color: #315f43;
  background: #e3f2e1;
}

.coach-metro-station.needs .coach-metro-marker span {
  border-color: #d2a23d;
  color: #735512;
}

.coach-metro-station.needs .coach-metro-station-body {
  border-color: rgba(210, 162, 61, 0.62);
  background: #fff8e7;
}

.coach-metro-station.needs .coach-station-count-badges span {
  color: #795b1e;
  background: #fff0cf;
}

.coach-metro-station.started .coach-metro-marker span {
  border-color: #7ea7b2;
  color: #315f67;
}

.coach-family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.coach-family-card {
  display: grid;
  gap: 10px;
  border-radius: 16px;
  padding: 13px;
}

.coach-family-card strong {
  display: block;
  color: #24483a;
  font-size: 15px;
  font-weight: 920;
}

.coach-family-card span,
.coach-family-progress span {
  color: #667b70;
  font-size: 12px;
  font-weight: 760;
}

.coach-family-progress {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.coach-family-progress span {
  border-radius: 999px;
  background: #eef7ec;
  padding: 4px 8px;
}

.coach-question-context {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  border-radius: 14px;
  padding: 10px 12px;
  margin: 8px 0 10px;
}

.coach-question-context strong {
  display: block;
  color: #24483a;
  font-size: 15px;
}

.coach-question-context span,
.coach-question-context small {
  color: #65786c;
  font-size: 12px;
  font-weight: 740;
}

.coach-question-context small {
  max-width: 52%;
  text-align: right;
}

.coach-feedback-row {
  border-radius: 999px;
  padding: 8px 10px;
  margin: 0 0 10px;
  box-shadow: none;
}

.coach-feedback-row span {
  color: #50685c;
  font-size: 13px;
  font-weight: 850;
}

.coach-feedback-row button.selected {
  border-color: #3f7c5a;
  background: #dff1df;
  color: #214a35;
}

.coach-image-list {
  gap: 14px;
}

.coach-annotatable-image {
  border: 1px solid rgba(184, 207, 197, 0.86);
  border-radius: 14px;
  background: rgba(255, 255, 251, 0.96);
  padding: 10px;
  box-shadow: 0 8px 18px rgba(42, 62, 52, 0.055);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.coach-annotatable-image {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.coach-writing-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.coach-writing-toolbar {
  margin-bottom: 8px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.coach-writing-toolbar span {
  color: #5d7467;
  font-size: 12px;
  font-weight: 780;
}

.coach-writing-toolbar .coach-writing-tip {
  color: #6c8075;
  font-weight: 720;
}

.coach-writing-toolbar button {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 12px;
}

.coach-writing-toolbar button.selected {
  border-color: #3f7c5a;
  background: #dff1df;
  color: #214a35;
}

.coach-answer-pad {
  display: grid;
  gap: 10px;
  margin: 12px 0 4px;
  padding: 10px 12px;
  border: 1px solid rgba(164, 190, 205, 0.74);
  border-radius: 12px;
  background: rgba(248, 252, 255, 0.86);
}

.coach-answer-pad.collapsed {
  display: block;
  margin: 8px 0 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.coach-answer-pad-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
}

.coach-answer-pad.collapsed .coach-answer-pad-head {
  position: relative;
  min-height: 14px;
  justify-content: flex-end;
  gap: 0;
}

.coach-answer-pad.collapsed .coach-answer-pad-head::before {
  content: "";
  position: absolute;
  left: 0;
  right: 58px;
  top: 50%;
  height: 1px;
  background: rgba(170, 188, 205, 0.62);
}

.coach-answer-pad-head button {
  min-height: 34px;
  border-color: rgba(79, 119, 183, 0.58);
  color: #1d4f91;
  background: #eaf2ff;
  white-space: nowrap;
}

.coach-answer-pad.collapsed .coach-answer-pad-head button {
  min-width: 50px;
  min-height: 18px;
  padding: 1px 6px;
  border-color: rgba(170, 188, 205, 0.62);
  color: #6c7d8c;
  background: #fbfdff;
  font-size: 10px;
  line-height: 1.2;
}

.coach-answer-pad-head span {
  min-width: 0;
  color: #5b7284;
  font-size: 12px;
  font-weight: 720;
}

.coach-answer-pad.collapsed .coach-answer-pad-head span {
  display: none;
}

.coach-answer-pad-body {
  display: grid;
  gap: 8px;
}

.coach-answer-pad-body[hidden] {
  display: none;
}

.coach-answer-canvas-wrap {
  position: relative;
  width: 100%;
  height: clamp(220px, 28vh, 340px);
  border: 1px dashed rgba(80, 125, 192, 0.48);
  border-radius: 12px;
  background:
    linear-gradient(rgba(74, 119, 190, 0.08) 1px, transparent 1px) 0 0 / 100% 32px,
    #ffffff;
  overflow: hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.coach-answer-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.coach-image-canvas-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.coach-image-canvas-wrap .question-image {
  display: block;
  max-width: 100%;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.coach-annotation-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

html.coach-pen-active,
body.coach-pen-active {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

.coach-after-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 4px;
  padding: 10px 12px;
  border: 1px solid rgba(93, 142, 112, 0.35);
  border-radius: 8px;
  background: #f3faf2;
}

.coach-after-submit.completed {
  display: grid;
  align-items: stretch;
  background: #fff8e4;
  border-color: rgba(214, 169, 72, 0.45);
}

.coach-after-submit-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.coach-after-submit strong {
  display: block;
  color: #234838;
  font-size: 14px;
  font-weight: 920;
}

.coach-after-submit span {
  display: block;
  color: #5d7467;
  font-size: 12px;
  font-weight: 760;
}

.coach-route-summary-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(212, 169, 72, 0.36);
  border-radius: 8px;
  background: rgba(255, 253, 242, 0.92);
}

.coach-route-summary-stats,
.coach-route-summary-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.coach-route-summary-stats span {
  padding: 4px 8px;
  border-radius: 999px;
  color: #345d48;
  background: #eef7ec;
  font-size: 12px;
  font-weight: 850;
}

.coach-route-summary-grid > div {
  flex: 1 1 170px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(207, 222, 211, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 252, 0.82);
}

.coach-route-summary-grid > div.needs {
  border-color: rgba(210, 162, 61, 0.5);
  background: #fff8e7;
}

.coach-route-summary-grid strong,
.coach-route-summary-next strong {
  display: block;
  color: #24483a;
  font-size: 13px;
  font-weight: 920;
}

.coach-route-summary-grid p {
  margin: 4px 0 0;
  color: #5d7467;
  font-size: 12px;
  font-weight: 740;
  line-height: 1.5;
}

.coach-route-summary-next {
  display: grid;
  gap: 3px;
  padding: 8px;
  border-radius: 8px;
  background: #f3faf2;
}

.coach-method-dialog {
  max-width: min(620px, calc(100vw - 26px));
}

.coach-method-card {
  display: grid;
  gap: 14px;
}

.coach-method-card .dialog-header span {
  color: #557263;
  font-size: 12px;
  font-weight: 900;
}

.coach-method-card .dialog-header h3 {
  margin: 4px 0 0;
  color: #234739;
  font-size: 22px;
}

.coach-method-card section {
  border-top: 1px solid rgba(198, 216, 207, 0.75);
  padding-top: 10px;
}

.coach-method-card h4 {
  margin: 0 0 7px;
  color: #294f3f;
  font-size: 14px;
}

.coach-method-card p,
.coach-method-card li {
  color: #43584e;
  font-size: 14px;
  line-height: 1.62;
}

.coach-method-card ul {
  margin: 0;
  padding-left: 20px;
}

@media (max-width: 720px) {
  #practiceView,
  #practiceView > #practice,
  #practiceView .question,
  #practiceView .question-header,
  #practiceView .question-meta,
  #practiceView .coach-question-context,
  #practiceView .coach-feedback-row,
  #practiceView .image-list,
  #practiceView .coach-annotatable-image,
  #practiceView .coach-image-canvas-wrap,
  #practiceView .analysis-panel,
  #practiceView .coach-after-submit {
    min-width: 0;
    max-width: 100%;
  }

  #practiceView .question {
    width: 100%;
    overflow-x: hidden;
  }

  #practiceView .question-header,
  #practiceView .question-actions,
  #practiceView .coach-question-context,
  #practiceView .coach-feedback-row,
  #practiceView .coach-after-submit {
    display: grid;
    justify-content: stretch;
  }

  #practiceView .question-actions,
  #practiceView .coach-writing-toolbar {
    justify-content: start;
  }

  #practiceView .coach-image-canvas-wrap {
    display: block;
    width: 100%;
  }

  #practiceView .coach-annotation-canvas {
    max-width: 100%;
  }

  .coach-route-head,
  .coach-question-context,
  .coach-metro-summary {
    display: grid;
  }

  .coach-route-selector {
    grid-template-columns: 1fr;
  }

  .coach-route-selector button {
    width: 100%;
  }

  #papersView > .subject-overview-strip-total-first,
  #practiceView > .subject-overview-strip-total-first {
    grid-template-columns: 1fr;
  }

  #papersView > .subject-overview-strip-total-first .subject-overview-head,
  #practiceView > .subject-overview-strip-total-first .subject-overview-head {
    border-right: 0;
    border-bottom: 1px solid rgba(199, 216, 203, 0.7);
    padding-right: 0;
    padding-bottom: 10px;
  }

  #papersView > .subject-overview-strip-total-first .subject-overview-items,
  #practiceView > .subject-overview-strip-total-first .subject-overview-items {
    grid-template-columns: 1fr;
  }

  #papersView > .subject-overview-strip-total-first .subject-overview-item,
  #practiceView > .subject-overview-strip-total-first .subject-overview-item {
    width: 100%;
  }

  .coach-mainline-card {
    grid-template-columns: 1fr;
  }

  .coach-mainline-action {
    justify-content: stretch;
  }

  .coach-mainline-action button {
    width: 100%;
  }

  .coach-question-context small {
    max-width: none;
    text-align: left;
  }

  .coach-metro-summary p {
    max-width: none;
    text-align: left;
  }

  .coach-metro-line {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .coach-metro-line::before {
    left: 24px;
    right: auto;
    top: 26px;
    bottom: 52px;
    width: 5px;
    height: auto;
  }

  .coach-metro-terminal {
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    align-content: center;
    flex: none;
    min-height: 54px;
    padding-top: 0;
  }

  .coach-metro-station {
    flex: none;
    width: 100%;
  }

  .coach-metro-terminal strong {
    align-self: center;
  }

  .coach-metro-terminal button {
    grid-column: 2;
  }
}

.paper-coverage-details {
  border: 1px solid rgba(198, 217, 202, 0.72);
  border-radius: 18px;
  background: rgba(255, 255, 251, 0.9);
  box-shadow: 0 10px 22px rgba(37, 51, 45, 0.055);
}

.paper-coverage-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 46px;
  padding: 0 16px;
  cursor: pointer;
  color: #3d5f4a;
  list-style: none;
}

.paper-coverage-details > summary::-webkit-details-marker,
.paper-coverage-group > summary::-webkit-details-marker {
  display: none;
}

.paper-coverage-details > summary span {
  font-size: 15px;
  font-weight: 920;
}

.paper-coverage-details > summary strong {
  color: #6a7d70;
  font-size: 13px;
  font-weight: 760;
}

.paper-coverage-details > summary::after {
  content: "展开";
  border: 1px solid rgba(153, 186, 160, 0.7);
  border-radius: 999px;
  padding: 3px 10px;
  background: #f2f8ee;
  color: #456a50;
  font-size: 12px;
  font-weight: 850;
}

.paper-coverage-details[open] > summary::after {
  content: "收起";
}

.paper-coverage-body {
  display: grid;
  gap: 10px;
  padding: 0 14px 14px;
}

.paper-coverage-subject {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr;
  gap: 12px;
  align-items: start;
  border-top: 1px solid rgba(210, 224, 212, 0.72);
  padding-top: 12px;
}

.paper-coverage-subject-head {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f4faf0;
}

.paper-coverage-subject-head strong {
  color: #2f5540;
  font-size: 17px;
  font-weight: 930;
}

.paper-coverage-subject-head span {
  color: #6d806f;
  font-size: 13px;
  font-weight: 800;
}

.paper-coverage-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.paper-coverage-group {
  border: 1px solid rgba(204, 219, 207, 0.72);
  border-radius: 14px;
  background: linear-gradient(135deg, #fbfff8, #fffaf0);
  overflow: hidden;
}

.paper-coverage-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  cursor: pointer;
  color: #375842;
  list-style: none;
}

.paper-coverage-group > summary span,
.paper-coverage-group > summary strong {
  font-size: 14px;
  font-weight: 900;
}

.paper-coverage-details-grid {
  display: grid;
  gap: 8px;
  padding: 0 10px 10px;
}

.paper-coverage-details-grid button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  border-color: rgba(189, 210, 193, 0.75);
  border-radius: 10px;
  background: rgba(255, 255, 251, 0.82);
  color: #415d4d;
  font-size: 13px;
  font-weight: 760;
  text-align: left;
}

body.view-has-local-summary .student-status-card {
  display: none;
}

.subject-overview-strip {
  display: grid;
  grid-template-columns: minmax(180px, 250px) 1fr;
  gap: 14px;
  align-items: stretch;
  margin-bottom: 10px;
  border: 1px solid rgba(198, 217, 202, 0.78);
  border-radius: 20px;
  padding: 15px 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 251, 0.96), rgba(239, 249, 236, 0.9));
  box-shadow: 0 12px 26px rgba(37, 51, 45, 0.07);
}

.subject-overview-head {
  display: flex;
  align-items: center;
  min-width: 0;
  border-right: 1px solid rgba(199, 216, 203, 0.7);
  padding-right: 12px;
}

.subject-overview-head div {
  display: grid;
  gap: 3px;
}

.subject-overview-head span {
  color: #53695b;
  font-size: 15px;
  font-weight: 900;
}

.subject-overview-head strong {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: #294d3c;
  font-size: 34px;
  line-height: 1.05;
  font-weight: 950;
}

.subject-overview-head strong em {
  color: #5f7666;
  font-size: 15px;
  font-style: normal;
  font-weight: 850;
}

.subject-overview-head small {
  color: #7b8a80;
  font-size: 12px;
  font-weight: 720;
}

.subject-overview-strip-total-first {
  grid-template-columns: minmax(260px, 330px) 1fr;
}

.subject-overview-total-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}

.subject-overview-total-line span {
  color: #405b4c;
  font-size: 18px;
  font-weight: 950;
  white-space: nowrap;
}

.subject-overview-total-line strong {
  font-size: 36px;
}

.subject-overview-strip-total-first .subject-overview-items {
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
}

.subject-overview-strip-total-first .subject-overview-item {
  min-height: 62px;
}

.subject-overview-strip-total-first .subject-overview-item span {
  font-size: 16px;
}

.subject-overview-strip-total-first .subject-overview-item strong {
  font-size: 21px;
}

#papersView > .subject-overview-strip-total-first,
#practiceView > .subject-overview-strip-total-first {
  grid-template-columns: minmax(230px, 320px) 1fr;
}

#papersView > .subject-overview-strip-total-first .subject-overview-head,
#practiceView > .subject-overview-strip-total-first .subject-overview-head {
  display: block;
  border-right: 1px solid rgba(199, 216, 203, 0.7);
}

#papersView > .subject-overview-strip-total-first .subject-overview-total-line,
#practiceView > .subject-overview-strip-total-first .subject-overview-total-line {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 4px;
  height: 100%;
  min-width: 0;
}

#papersView > .subject-overview-strip-total-first .subject-overview-total-line span,
#practiceView > .subject-overview-strip-total-first .subject-overview-total-line span {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #405b4c;
  font-size: 18px;
  font-weight: 950;
  white-space: normal;
}

#papersView > .subject-overview-strip-total-first .subject-overview-total-line strong,
#practiceView > .subject-overview-strip-total-first .subject-overview-total-line strong {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: #294d3c;
  font-size: 34px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0;
}

#papersView > .subject-overview-strip-total-first .subject-overview-total-line strong em,
#practiceView > .subject-overview-strip-total-first .subject-overview-total-line strong em {
  color: #5f7666;
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
}

#papersView > .subject-overview-strip-total-first .subject-overview-items,
#practiceView > .subject-overview-strip-total-first .subject-overview-items {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

#papersView > .subject-overview-strip-total-first .subject-overview-item,
#practiceView > .subject-overview-strip-total-first .subject-overview-item {
  min-height: 58px;
  padding: 10px 12px 12px;
}

#papersView > .subject-overview-strip-total-first .subject-overview-item span,
#practiceView > .subject-overview-strip-total-first .subject-overview-item span {
  padding: 0;
  background: transparent;
  color: #354e42;
  font-size: 16px;
}

.subject-overview-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.subject-overview-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
  overflow: hidden;
  min-height: 58px;
  border: 1px solid rgba(205, 221, 207, 0.75);
  border-radius: 16px;
  padding: 11px 12px 13px;
  background: rgba(255, 255, 255, 0.82);
  color: #354e42;
  text-align: left;
  box-shadow: none;
}

.subject-overview-item span,
.subject-overview-item strong {
  position: relative;
  z-index: 1;
}

.subject-overview-item span {
  font-size: 15px;
  font-weight: 900;
}

.subject-overview-item strong {
  font-size: 20px;
  font-weight: 950;
}

.subject-overview-item i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  border-radius: 0 999px 999px 0;
  opacity: 0.78;
}

.subject-overview-item.tone-0 { background: #f2f8ef; border-color: rgba(150, 190, 143, 0.55); }
.subject-overview-item.tone-0 i { background: #7fb878; }
.subject-overview-item.tone-1 { background: #fff7e8; border-color: rgba(219, 183, 105, 0.48); }
.subject-overview-item.tone-1 i { background: #d9a449; }
.subject-overview-item.tone-2 { background: #eef7fb; border-color: rgba(129, 179, 198, 0.48); }
.subject-overview-item.tone-2 i { background: #69a9c2; }
.subject-overview-item.tone-3 { background: #f7f1fb; border-color: rgba(181, 151, 205, 0.42); }
.subject-overview-item.tone-3 i { background: #a987c7; }
.subject-overview-item.tone-4 { background: #fff1ee; border-color: rgba(214, 151, 132, 0.42); }
.subject-overview-item.tone-4 i { background: #d68569; }
.subject-overview-item.tone-5 { background: #f2f4ef; border-color: rgba(160, 177, 139, 0.45); }
.subject-overview-item.tone-5 i { background: #8ba36f; }

.subject-overview-empty {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: #748277;
  font-size: 13px;
  font-weight: 760;
}

.practice-chapter-stats {
  margin: -2px 0 12px;
}

.practice-chapter-details {
  border: 1px solid rgba(198, 217, 202, 0.78);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 251, 0.95), rgba(242, 249, 239, 0.88));
  box-shadow: 0 10px 22px rgba(37, 51, 45, 0.06);
  overflow: hidden;
}

.practice-chapter-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  padding: 12px 16px;
  cursor: pointer;
  color: #365346;
  font-weight: 900;
  list-style: none;
}

.practice-chapter-details summary::-webkit-details-marker {
  display: none;
}

.practice-chapter-details summary::after {
  content: "展开";
  flex: 0 0 auto;
  border: 1px solid rgba(109, 151, 124, 0.42);
  border-radius: 999px;
  padding: 4px 10px;
  color: #456653;
  background: rgba(244, 250, 243, 0.88);
  font-size: 12px;
  font-weight: 850;
}

.practice-chapter-details[open] summary::after {
  content: "收起";
}

.practice-chapter-details summary span {
  font-size: 15px;
}

.practice-chapter-details summary strong {
  color: #597064;
  font-size: 13px;
  font-weight: 820;
}

.practice-chapter-body {
  display: grid;
  gap: 14px;
  border-top: 1px solid rgba(199, 216, 203, 0.62);
  padding: 14px;
}

.practice-chapter-chart {
  display: grid;
  gap: 7px;
}

.practice-chapter-bar {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(130px, 1fr) minmax(42px, auto) minmax(54px, auto);
  gap: 10px;
  align-items: center;
  min-height: 38px;
  overflow: hidden;
  border: 1px solid rgba(198, 217, 202, 0.76);
  border-radius: 10px;
  padding: 7px 11px;
  color: #2d493d;
  background: rgba(255, 255, 255, 0.82);
  text-align: left;
}

.practice-chapter-bar > * {
  position: relative;
  z-index: 1;
}

.practice-chapter-bar span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #ffffff;
  background: #5d9472;
  font-size: 12px;
  font-weight: 900;
}

.practice-chapter-bar strong {
  min-width: 0;
  font-size: 14px;
  font-weight: 930;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.practice-chapter-bar small {
  color: #607268;
  font-size: 12px;
  font-weight: 820;
}

.practice-chapter-bar em {
  justify-self: end;
  color: #294d3c;
  font-size: 14px;
  font-style: normal;
  font-weight: 950;
}

.practice-chapter-bar i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, rgba(120, 180, 139, 0.24), rgba(120, 180, 139, 0.06));
}

.practice-chapter-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 14px;
  align-items: center;
}

.practice-chapter-subjects {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.practice-chapter-subjects button {
  min-height: 32px;
  border-radius: 999px;
  padding: 0 13px;
  color: #4e6659;
  background: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 850;
}

.practice-chapter-subjects button.active {
  border-color: rgba(72, 130, 94, 0.58);
  color: #ffffff;
  background: #4f936f;
}

.practice-chapter-search {
  display: grid;
  grid-template-columns: auto minmax(150px, 260px);
  gap: 10px;
  align-items: center;
  color: #52685c;
  font-size: 13px;
  font-weight: 850;
}

.practice-chapter-search input {
  min-height: 36px;
  border-radius: 12px;
}

#papersView > .paper-filters,
#practiceView > .filters,
#practiceView > .chips div,
#practiceView > .practice-locator-card,
#practiceView > .practice-timer {
  border: 1px solid rgba(204, 219, 207, 0.72);
  border-radius: 18px;
  background: rgba(255, 255, 251, 0.86);
  box-shadow: 0 10px 24px rgba(37, 51, 45, 0.06);
}

#papersView > .paper-filters {
  display: grid;
  grid-template-columns: minmax(180px, 1.35fr) repeat(4, minmax(126px, 0.82fr)) auto;
  gap: 10px;
  align-items: end;
  margin-top: 0;
  padding: 12px 14px;
}

#practiceView > .filters {
  grid-template-columns: minmax(116px, 0.78fr) minmax(148px, 1fr) minmax(104px, 0.7fr) minmax(108px, 0.72fr) minmax(112px, 0.72fr) minmax(136px, 0.82fr) minmax(190px, 0.96fr);
  gap: 10px;
  margin-top: 10px;
  padding: 12px 14px;
}

#practiceView .practice-count-label {
  grid-column: auto;
  min-width: 0;
}

#practiceView .practice-start-control {
  grid-template-columns: minmax(70px, 0.8fr) minmax(104px, max-content);
}

#practiceView .practice-locator-label {
  min-width: 0;
}

#practiceView .practice-locator-control {
  display: grid;
  grid-template-columns: minmax(78px, 1fr) minmax(72px, max-content);
  gap: 8px;
  align-items: center;
}

#practiceView #codeInput {
  width: 100%;
  min-width: 0;
}

#papersView label,
#practiceView .filters label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #607064;
  font-size: 13px;
  font-weight: 760;
}

#papersView input,
#papersView select,
#practiceView select,
#practiceView input[type="number"],
#practiceView #codeInput {
  min-height: 40px;
  border: 1px solid rgba(177, 202, 184, 0.88);
  border-radius: 12px;
  background-color: #fffffb;
  color: #334d43;
}

#papersView .paper-filters button,
#practiceView .practice-start-control button,
#practiceView #locateBtn {
  min-height: 40px;
  border-color: rgba(111, 167, 127, 0.68);
  border-radius: 12px;
  background: #edf8ed;
  color: #315f43;
  font-weight: 850;
  box-shadow: 0 6px 14px rgba(73, 112, 86, 0.08);
}

#papersView .paper-filters button:hover,
#practiceView .practice-start-control button:hover,
#practiceView #locateBtn:hover {
  border-color: rgba(86, 139, 105, 0.82);
  background: #e2f2e2;
  color: #274f39;
}

#practiceView > .chips {
  gap: 10px;
  margin-top: 10px;
}

#practiceView > .chips div {
  padding: 12px 14px;
}

#practiceView > .chips strong {
  color: #40544b;
  font-weight: 850;
}

#practiceView > .chips label {
  min-height: 30px;
  border: 1px solid rgba(204, 219, 207, 0.74);
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(248, 252, 246, 0.86);
  color: #526b5c;
  font-size: 13px;
  font-weight: 720;
}

#papersView > .paper-list,
#practiceView > #practice {
  margin-top: 14px;
}

#papersView .paper-card,
#practiceView .question {
  border: 1px solid rgba(204, 219, 207, 0.74);
  border-radius: 18px;
  background: rgba(255, 255, 251, 0.92);
  box-shadow: 0 10px 24px rgba(37, 51, 45, 0.06);
}

#papersView .paper-card {
  padding: 15px 16px;
}

#papersView .paper-card.favorite {
  border-color: rgba(214, 168, 79, 0.5);
  background: linear-gradient(135deg, #fff8e7, #fffdf8);
}

#papersView .paper-card.completed {
  border-left: 1px solid rgba(204, 219, 207, 0.74);
  box-shadow: inset 4px 0 0 rgba(95, 155, 118, 0.72), 0 10px 24px rgba(37, 51, 45, 0.06);
}

#papersView .paper-card.last-opened {
  border-color: rgba(184, 127, 38, 0.78);
  background:
    linear-gradient(90deg, rgba(207, 151, 59, 0.2), transparent 20px),
    linear-gradient(135deg, #fffaf0, #fffffb 62%, #f7efe0);
  box-shadow: inset 5px 0 0 rgba(184, 127, 38, 0.86), 0 14px 30px rgba(113, 78, 31, 0.13);
}

#papersView .paper-card h2 {
  color: #203b34;
  font-size: 18px;
  line-height: 1.35;
}

#papersView .badge,
#practiceView .badge {
  border-color: rgba(186, 211, 192, 0.82);
  border-radius: 999px;
  background: #f8fcf4;
  color: #486456;
  font-weight: 720;
}

#papersView .paper-opened-badge {
  border-color: rgba(184, 127, 38, 0.72);
  background: #fff2d2;
  color: #76501c;
}

#papersView .paper-actions {
  min-width: 300px;
}

#papersView .paper-primary-actions button,
#papersView .paper-secondary-actions button,
#papersView .paper-pdf-menu summary,
#practiceView .question-actions button,
#practiceView .timer-actions button {
  min-height: 34px;
  border-color: rgba(186, 202, 191, 0.9);
  border-radius: 11px;
  background: #fffffb;
  color: #52635b;
  font-weight: 780;
}

#practiceView .timer-actions button {
  min-width: 64px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background: #f9fdf8;
  color: #355e4e;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

#practiceView .timer-actions .timer-primary {
  min-height: 44px;
  min-width: 112px;
  border-color: #45a66f;
  background: #45a66f;
  color: #fffffb;
  font-size: 15px;
  box-shadow: 0 10px 20px rgba(55, 151, 96, 0.2);
}

#practiceView .timer-actions .timer-finish {
  border-color: rgba(186, 202, 191, 0.72);
  color: #59675f;
  background: #f7faf5;
}

#practiceView .timer-actions button.active {
  border-color: rgba(92, 153, 105, 0.78);
  background: #e9f5e9;
  color: #315f43;
}

#papersView .paper-primary-actions button:first-child,
#papersView .paper-primary-actions button:hover,
#practiceView .question-actions button:hover,
#practiceView .timer-actions button:hover {
  border-color: rgba(111, 167, 127, 0.62);
  background: #edf8ed;
  color: #315f43;
}

#papersView .paper-primary-actions button.last-opened-action {
  border-color: rgba(168, 113, 32, 0.86);
  background: #a87120;
  color: #fffffb;
  box-shadow: 0 8px 18px rgba(139, 93, 29, 0.22);
}

#practiceView .timer-actions .timer-primary:hover {
  border-color: rgba(75, 134, 86, 0.82);
  background: #4f965f;
  color: #fffffb;
}

#practiceView .question {
  padding: 16px;
}

#practiceView .question.active-question {
  border-color: rgba(111, 167, 127, 0.78);
  background: #fffffb;
  box-shadow: 0 0 0 3px rgba(111, 167, 127, 0.16), 0 13px 28px rgba(37, 51, 45, 0.09);
}

#practiceView .question-stem,
#practiceView .analysis-panel,
#practiceView .question-analysis {
  border-color: rgba(211, 224, 211, 0.72);
  border-radius: 15px;
  background: rgba(250, 253, 247, 0.78);
}

#practiceView .question-analysis {
  border-left: 4px solid rgba(111, 167, 127, 0.78);
}

.practice-card-stage {
  --practice-card-page: #f3f5f1;
  --practice-card-panel: #fffefa;
  --practice-card-soft: #f6f8f2;
  --practice-card-line: #dce7dc;
  --practice-card-ink: #23384b;
  --practice-card-muted: #66766f;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-height: min(76vh, 780px);
  padding: 12px;
  border: 1px solid rgba(210, 223, 211, 0.9);
  border-radius: 8px;
  background: var(--practice-card-page);
  color: var(--practice-card-ink);
}

.practice-card-topbar {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 6px 8px;
}

.practice-card-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.practice-card-title span {
  color: var(--practice-card-muted);
  font-size: 13px;
  line-height: 1.35;
}

.practice-card-title strong {
  color: #243a35;
  font-size: 18px;
  line-height: 1.3;
}

.practice-card-tools,
.practice-card-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
}

.practice-card-icon-button,
.practice-card-pen-popover button,
.practice-card-bottom button,
.practice-card-bottom select {
  min-height: 38px;
  border: 1px solid rgba(180, 200, 190, 0.86);
  border-radius: 8px;
  background: rgba(255, 255, 251, 0.84);
  color: #2c463f;
  box-shadow: none;
  font-size: 14px;
  font-weight: 720;
}

.practice-card-icon-button {
  min-width: 38px;
  padding: 0 9px;
}

.practice-card-icon-button.active,
.practice-card-pen-popover button.selected {
  border-color: rgba(179, 80, 71, 0.54);
  background: #fff2ef;
  color: #9a332b;
}

.practice-card-icon-button:disabled,
.practice-card-bottom button:disabled {
  opacity: 0.45;
}

.practice-card-progress {
  min-width: 58px;
  color: var(--practice-card-muted);
  font-size: 13px;
  text-align: center;
}

.practice-card-pen-popover {
  position: absolute;
  top: 52px;
  right: 8px;
  z-index: 12;
  display: none;
  gap: 6px;
  padding: 7px;
  border: 1px solid rgba(207, 219, 209, 0.95);
  border-radius: 8px;
  background: rgba(255, 255, 251, 0.96);
  box-shadow: 0 12px 24px rgba(44, 62, 55, 0.12);
}

.practice-card-stage.pen-active .practice-card-pen-popover {
  display: flex;
}

.practice-card-deck {
  position: relative;
  min-height: 0;
}

.practice-card-shell {
  position: absolute;
  inset: 0;
  display: none;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(204, 219, 207, 0.9);
  border-radius: 8px;
  background: var(--practice-card-panel);
  box-shadow: none;
  overflow: hidden;
}

.practice-card-shell.active-question {
  display: grid;
  border-color: rgba(122, 165, 139, 0.86);
  box-shadow: 0 0 0 3px rgba(122, 165, 139, 0.12);
}

.practice-card-flipper {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.practice-card-face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  padding: 24px 28px 18px;
  background: var(--practice-card-panel);
  transition: opacity 0.16s ease, transform 0.18s ease;
}

.practice-card-back {
  opacity: 0;
  pointer-events: none;
  transform: translateX(18px);
}

.practice-card-stage.flipped .practice-card-front {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-18px);
}

.practice-card-stage.flipped .practice-card-back {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.practice-card-question-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.practice-card-question-head > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.practice-card-question-head span {
  color: var(--practice-card-muted);
  font-size: 13px;
}

.practice-card-question-head h2 {
  margin: 0;
  color: #203548;
  font-size: 24px;
  line-height: 1.45;
}

.practice-card-content,
.practice-card-back-scroll {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.practice-card-stem-text,
.practice-card-stage .question-analysis {
  border: 0;
  background: transparent;
  padding: 0;
  color: #23384b;
  font-size: 21px;
  line-height: 1.9;
}

#practiceView .practice-card-stage .question-stem,
#practiceView .practice-card-stage .question-analysis {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: #23384b;
  font-size: 22px;
  line-height: 1.92;
}

.practice-card-stage .question-meta {
  margin: 0;
}

.practice-card-stage .image-list {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.practice-card-stage .question-image {
  max-width: min(100%, 720px);
  max-height: 46vh;
  object-fit: contain;
}

.practice-card-answer-block,
.practice-card-analysis-block {
  display: grid;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--practice-card-line);
}

.practice-card-answer-block {
  border-top: 0;
  color: #315f45;
}

.practice-card-answer-block h3,
.practice-card-analysis-block h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
}

.practice-card-answer-block h3 {
  color: #4f725a;
}

.practice-card-analysis-block h3 {
  color: #60718a;
}

.practice-card-answer-text {
  color: #244d38;
  font-size: 20px;
  font-weight: 760;
  line-height: 1.6;
}

.practice-card-answer-text.muted {
  color: #718078;
  font-weight: 600;
}

.practice-card-ink-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.practice-card-ink-canvas {
  width: 100%;
  height: 100%;
  pointer-events: none;
  touch-action: none;
  cursor: crosshair;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.practice-card-ink-canvas.active {
  pointer-events: auto;
}

.practice-card-bottom {
  position: relative;
  z-index: 9;
  min-height: 58px;
  padding: 9px 12px;
  border-top: 1px solid var(--practice-card-line);
  background: rgba(251, 253, 248, 0.96);
  overflow-x: auto;
  scrollbar-width: none;
}

.practice-card-bottom::-webkit-scrollbar {
  display: none;
}

.practice-card-bottom-spacer {
  flex: 1 1 auto;
  min-width: 12px;
}

.practice-card-bottom select {
  min-width: 86px;
  padding: 0 8px;
}

body.practice-card-mode .floating-pet {
  display: none;
}

body.practice-card-mode #practiceView > .practice-timer {
  display: none;
}

body.practice-card-mode .practice-card-stage {
  min-height: calc(100svh - 112px);
}

#practiceView > .practice-timer {
  top: 8px;
  margin-top: 12px;
  padding: 10px 12px;
}

#practiceView > .practice-timer .timer-display-block strong {
  color: #203b34;
  font-size: 27px;
}

#practiceView > .practice-timer[data-timer-state="running"] .timer-icon {
  background: #e5f5e3;
  box-shadow: inset 0 0 0 12px rgba(111, 167, 127, 0.16), 0 0 0 6px rgba(111, 167, 127, 0.08);
}

#practiceView > .practice-timer[data-timer-state="paused"] .timer-icon {
  background: #fff7dc;
  box-shadow: inset 0 0 0 12px rgba(204, 168, 77, 0.14);
}

#practiceView > .practice-timer[data-timer-state="done"] .timer-icon {
  background: #edf2f0;
  box-shadow: inset 0 0 0 12px rgba(118, 133, 125, 0.12);
}

#practiceView > .practice-summary {
  border: 1px solid rgba(204, 219, 207, 0.74);
  border-radius: 18px;
  background: rgba(237, 248, 237, 0.9);
  box-shadow: 0 10px 24px rgba(37, 51, 45, 0.06);
}

@media (max-width: 1180px) {
  #practiceView > .filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .practice-card-stage {
    min-height: calc(100svh - 168px);
    padding: 8px;
  }

  .practice-card-face {
    padding: 20px 20px 14px;
  }

  .practice-card-stem-text,
  .practice-card-stage .question-analysis {
    font-size: 22px;
    line-height: 1.86;
  }

  .practice-card-bottom {
    min-height: 56px;
    gap: 7px;
  }
}

@media (max-width: 980px) {
  .subject-overview-strip {
    grid-template-columns: 1fr;
  }

  .subject-overview-head {
    border-right: 0;
    border-bottom: 1px solid rgba(199, 216, 203, 0.7);
    padding-right: 0;
    padding-bottom: 10px;
  }

  .paper-coverage-subject {
    grid-template-columns: 1fr;
  }

  #papersView > .paper-filters,
  #practiceView > .filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #practiceView .practice-count-label {
    grid-column: auto;
  }

  #papersView .paper-card-header {
    display: grid;
  }

  #papersView .paper-actions {
    min-width: 0;
    justify-items: start;
  }

  #papersView .paper-primary-actions,
  #papersView .paper-secondary-actions,
  #papersView .paper-practice-meta {
    justify-content: flex-start;
  }
}

.student-effort-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  margin-top: 0;
  color: #66776e;
  font-size: 12.5px;
}

.effort-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #253f39;
  font-weight: 800;
}

.effort-track {
  width: 100%;
  height: 8px;
  border: 0;
  background: #e6eee4;
}

.effort-track .progress-fill {
  background: linear-gradient(90deg, #4f936f, #6eb08a);
}

.coin-panel {
  display: grid;
  place-items: center;
  min-width: 98px;
  min-height: 104px;
  padding: 10px 12px 9px;
  border: 1px solid rgba(219, 169, 70, 0.72);
  border-radius: var(--ui-radius-card);
  color: #6b531d;
  background: linear-gradient(180deg, rgba(255, 252, 243, 0.98) 0%, rgba(255, 246, 224, 0.92) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 12px 24px rgba(111, 81, 26, 0.09);
}

.coin-panel > span:not(.coin-medal) {
  color: #745d25;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 900;
}

.coin-panel strong {
  color: #5f4714;
  font-size: 29px;
  line-height: 1.15;
}

.coin-medal {
  position: relative;
  width: 38px;
  height: 38px;
  border: 2px solid #f0b63d;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff3bb 0 18%, #ffd46a 19% 55%, #efaa31 56% 100%);
  box-shadow: inset 0 0 0 5px rgba(255, 245, 196, 0.72), 0 6px 12px rgba(160, 107, 28, 0.15);
}

.coin-medal::before {
  content: "*";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff6cf;
  font-size: 19px;
  text-shadow: 0 1px 0 rgba(143, 89, 16, 0.2);
}

.coin-laurel {
  width: 50px;
  height: 12px;
  margin-top: 2px;
  border-bottom: 2px solid rgba(216, 174, 82, 0.55);
  border-radius: 50%;
}

.home-section {
  width: min(1180px, 100%);
  margin: 16px auto 0;
}

.home-section-head {
  display: none;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 10px;
  color: #6a7b72;
}

.home-section:not(.home-section-action) > .home-section-head {
  display: flex;
}

.home-section-head span {
  color: #2f4e46;
  font-size: 16px;
  font-weight: 850;
  letter-spacing: 0;
}

.home-section-head small {
  color: #7a8a81;
  font-size: 12px;
  font-weight: 600;
}

.home-section-toggle {
  min-width: 62px;
  height: 30px;
  padding: 0 14px;
  border: 1px solid rgba(93, 132, 113, 0.28);
  border-radius: 999px;
  color: #3f6f5b;
  font-size: 13px;
  font-weight: 850;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(240,248,243,.92));
  box-shadow: 0 5px 12px rgba(64, 96, 78, 0.08);
}

.home-section-toggle:hover {
  color: #2d5f4b;
  border-color: rgba(74, 137, 103, 0.46);
  background: linear-gradient(180deg, #ffffff, #eaf6ee);
  transform: translateY(-1px);
}

.home-section-toggle:active {
  transform: translateY(0);
}

.home-section.collapsed > :not(.home-section-head) {
  display: none !important;
}


.growth-grid.lower {
  grid-template-columns: 1fr 1fr;
}

.home-section-record .growth-grid.lower {
  grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
}

.growth-card {
  --home-heading: #40544b;
  --home-text: #52635b;
  --home-muted: #607064;
  --home-soft-border: rgba(75, 98, 88, 0.16);
  --card-strong: #40544b;
  position: relative;
  overflow: hidden;
  padding: 14px 18px 17px;
  color: var(--home-text);
  font-size: 13px;
  line-height: 1.5;
  background: var(--ui-surface);
  border: 1px solid rgba(204, 219, 207, 0.62);
  border-radius: var(--ui-radius-card);
  box-shadow: var(--ui-shadow-soft);
  backdrop-filter: blur(10px);
}

.growth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--card-accent, #9eb5a5), transparent 74%);
  opacity: 0.5;
}

.today-task-card {
  --card-accent: #6fa77f;
  --card-strong: #2f6a57;
  display: flex;
  flex-direction: column;
  min-height: 176px;
  max-height: 430px;
  background: linear-gradient(180deg, rgba(251,255,248,.94) 0%, rgba(255,255,255,.88) 72%);
}

.today-task-card .task-list {
  overflow-y: auto;
  padding-right: 2px;
}

.tomorrow-card {
  --card-accent: #6f8fc7;
  --card-strong: #405d8a;
  height: var(--home-action-height, auto);
  max-height: 430px;
  background: linear-gradient(145deg, rgba(248,251,255,.94) 0%, rgba(255,255,255,.88) 72%);
}

.home-recent-books-card {
  --card-accent: #7db8a4;
  --card-strong: #2f6a57;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  height: var(--home-recent-height, auto);
  min-height: 176px;
  max-height: 430px;
  overflow: hidden;
  padding: 4px 6px;
  background: linear-gradient(145deg, rgba(248,253,249,.95) 0%, rgba(255,255,255,.88) 76%);
}

.achievement-preview-card {
  --card-accent: #d6a84f;
  --card-strong: #7a6230;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  background: linear-gradient(180deg, rgba(255,250,240,.95) 0%, rgba(255,255,255,.88) 72%);
}

.calendar-card {
  --card-accent: #6aa7a0;
  --card-strong: #335f5d;
  background: linear-gradient(180deg, #f7fcfb 0%, #fffdf8 74%);
}

.analysis-card,
.growth-chart-card {
  --card-accent: #7f8fb3;
  --card-strong: #405d8a;
}

.analysis-card {
  min-width: 0;
}

.growth-chart-card {
  padding-bottom: 44px;
}

.weekly-card {
  --card-accent: #d6a84f;
  --card-strong: #7a6230;
  background: linear-gradient(180deg, #fffaf0 0%, #fffdf8 72%);
}

.today-card {
  --card-accent: #6fa77f;
  --card-strong: #2f6a57;
  background: linear-gradient(180deg, #f7fcf4 0%, #fffdf8 72%);
}

.weekly-planner {
  --card-accent: #6aa7a0;
}

.parent-dashboard-panel {
  display: grid;
  width: min(1180px, 100%);
  gap: 16px;
  margin: 16px auto 0;
}

.parent-dashboard-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  border: 1px solid rgba(188, 207, 194, 0.72);
  border-radius: var(--ui-radius-card);
  background:
    linear-gradient(135deg, rgba(255,255,252,.98), rgba(244,251,247,.92));
  box-shadow: var(--ui-shadow-soft);
}

.parent-dashboard-head span,
.parent-card-head span {
  color: #4d725f;
  font-size: 13px;
  font-weight: 900;
}

.parent-dashboard-head h2 {
  margin: 5px 0 6px;
  color: #243f37;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: 0;
}

.parent-dashboard-head p {
  margin: 0;
  color: #65786d;
  font-size: 14px;
  font-weight: 650;
}

.parent-range-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(197, 214, 202, 0.76);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
}

.parent-range-tabs button {
  min-height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  border: 0;
  color: #526b5e;
  background: transparent;
  font-weight: 850;
}

.parent-range-tabs button.active {
  color: #fff;
  background: linear-gradient(180deg, #5ca878, #2f7655);
  box-shadow: 0 8px 16px rgba(47, 118, 85, 0.18);
}

.parent-overview-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.parent-overview-card,
.parent-card {
  border: 1px solid rgba(204, 219, 207, 0.66);
  border-radius: var(--ui-radius-card);
  background: rgba(255,255,252,.9);
  box-shadow: var(--ui-shadow-soft);
}

.parent-overview-card {
  display: grid;
  gap: 7px;
  min-height: 124px;
  padding: 15px;
}

.parent-overview-card.primary {
  border-color: rgba(93, 156, 113, 0.42);
  background: linear-gradient(180deg, rgba(239,250,240,.96), rgba(255,255,252,.9));
}

.parent-overview-card span,
.parent-overview-card small {
  color: #718178;
  font-size: 12px;
  font-weight: 800;
}

.parent-overview-card strong {
  color: #233f37;
  font-size: 25px;
  font-weight: 950;
  line-height: 1.05;
}

.parent-overview-card button,
.parent-archive button {
  justify-self: start;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
}

.parent-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
  gap: 16px;
}

.parent-dashboard-grid.detail {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.parent-card {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.parent-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.parent-card-head strong {
  color: #7a8a81;
  font-size: 12px;
  font-weight: 850;
}

.parent-subject-list {
  display: grid;
  gap: 9px;
}

.parent-subject-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto auto auto auto;
  gap: 9px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(207, 222, 211, 0.62);
  border-radius: 10px;
  background: rgba(250,253,249,.76);
}

.parent-subject-row.attention {
  border-color: rgba(214, 168, 79, 0.5);
  background: rgba(255, 249, 235, 0.78);
}

.parent-subject-row strong {
  display: block;
  color: #2f4e46;
  font-size: 16px;
}

.parent-subject-row span {
  color: #66776e;
  font-size: 12px;
  font-weight: 750;
}

.parent-subject-row button {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
}

.parent-diagnosis-main {
  padding: 14px;
  border: 1px solid rgba(207, 222, 211, 0.66);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(243,250,246,.86), rgba(255,255,252,.72));
}

.parent-diagnosis-main strong {
  display: block;
  margin: 4px 0;
  color: #24463c;
  font-size: 24px;
  font-weight: 950;
}

.parent-diagnosis-main p,
.parent-archive p {
  margin: 0;
  color: #53675d;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.6;
}

.parent-diagnosis ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
  color: #40544b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.parent-trace-list,
.parent-activity-list {
  display: grid;
  gap: 8px;
}

.parent-trace-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid rgba(188, 207, 194, 0.76);
  border-radius: 10px;
  color: #40544b;
  background: rgba(250, 253, 249, 0.82);
  box-shadow: none;
  text-align: left;
}

.parent-trace-list button:hover {
  border-color: rgba(90, 145, 111, 0.56);
  color: #24483e;
  background: rgba(240, 249, 241, 0.94);
  transform: translateY(-1px);
}

.parent-trace-list button span {
  color: #2f4e46;
  font-weight: 900;
}

.parent-trace-list button strong {
  color: #2f7655;
  font-size: 17px;
}

.parent-trace-list button small {
  grid-column: 1 / -1;
  color: #718178;
  font-weight: 700;
}

.parent-activity-list span {
  display: block;
  padding: 9px 10px;
  border: 1px solid rgba(207, 222, 211, 0.54);
  border-radius: 9px;
  color: #53675d;
  background: rgba(250, 253, 249, 0.72);
  font-size: 13px;
}

.parent-empty {
  margin: 0;
  color: #718178;
  font-size: 13px;
  font-weight: 700;
}

.weekly-plan-quick-root {
  display: grid;
  gap: 10px;
  margin: 12px 0 14px;
}

.learning-contract-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 12px 0 18px;
  padding: 18px 20px;
  border: 2px solid rgba(79, 154, 112, 0.48);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(248, 234, 192, 0.7), rgba(243, 250, 245, 0.96) 38%, rgba(255, 253, 247, 0.98));
  box-shadow: 0 16px 34px rgba(45, 72, 55, 0.16);
}

.learning-contract-progress {
  display: grid;
  gap: 7px;
  margin-top: 0;
  padding: 10px 12px;
  border: 1px solid rgba(96, 145, 117, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
}

.reminder-contract-progress {
  min-height: 166px;
  background: transparent;
  border: 0;
  padding: 0;
}

.learning-contract-progress.hidden {
  display: none;
}

.contract-progress-head,
.contract-progress-detail {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.contract-progress-head span {
  color: #607064;
  font-size: 12px;
  font-weight: 850;
}

.contract-progress-head strong {
  color: #2f5f4d;
  font-size: 13px;
}

.contract-progress-head button {
  justify-self: end;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border-color: rgba(190, 143, 92, 0.44);
  color: #7a5631;
  background: #fff7eb;
  font-size: 12px;
  font-weight: 800;
}

.contract-progress-head button.contract-progress-primary {
  border-color: rgba(79, 154, 112, 0.48);
  color: #ffffff;
  background: linear-gradient(180deg, #5d9b76 0%, #2f7655 100%);
  box-shadow: 0 6px 12px rgba(47, 118, 85, 0.18);
}

.contract-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4eee6;
}

.contract-progress-track div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #69aa7c, #d8ad4a);
}

.contract-progress-days {
  display: flex;
  gap: 8px;
  align-items: center;
}

.contract-progress-days button {
  width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  border: 1px solid rgba(145, 172, 154, 0.7);
  border-radius: 50%;
  background: #ffffff;
}

.contract-progress-days button span {
  display: block;
  width: 8px;
  height: 8px;
  margin: auto;
  border-radius: 50%;
  background: #b7c7bb;
}

.contract-progress-days button.done span {
  background: #5da878;
}

.contract-progress-days button.today span {
  background: #d8ad4a;
}

.contract-progress-days button.active {
  border-color: #3d846b;
  box-shadow: 0 0 0 3px rgba(93, 168, 120, 0.18);
}

.contract-progress-detail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  color: #536960;
  font-size: 12px;
  align-items: start;
}

.contract-progress-detail-wide {
  grid-template-columns: minmax(150px, 0.85fr) minmax(220px, 1.5fr) minmax(150px, 0.9fr);
}

.contract-book-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.contract-book-head span {
  color: #7a6340;
  font-size: 12px;
  font-weight: 900;
}

.contract-book-head strong {
  color: #244d42;
  font-size: 18px;
  font-weight: 950;
}

.contract-book-head button {
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
}

.contract-book-body {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(188, 166, 112, 0.35);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 252, 243, 0.84), rgba(248, 253, 247, 0.82));
}

.contract-book-clause {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
}

.contract-book-clause strong,
.contract-book-days > strong,
.contract-book-reward {
  color: #2f4e46;
  font-size: 13px;
  font-weight: 900;
}

.contract-book-clause span {
  min-width: 0;
  padding: 5px 8px;
  border-radius: 999px;
  color: #536960;
  background: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.contract-book-days {
  display: grid;
  gap: 6px;
}

.contract-book-day-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.contract-book-day-list article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(107, 151, 124, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.contract-book-day-list b {
  color: #315f4d;
  font-size: 13px;
}

.contract-book-day-list span,
.contract-book-day-list em {
  overflow: hidden;
  color: #5a6d64;
  font-size: 12px;
  line-height: 1.42;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-book-day-list em {
  color: #8a6a2e;
  font-style: normal;
  font-weight: 850;
}

.contract-book-reward {
  display: grid;
  gap: 5px;
}

.contract-book-reward textarea,
.contract-book-sign input {
  width: 100%;
  border: 1px solid rgba(168, 190, 174, 0.72);
  border-radius: 8px;
  padding: 8px 10px;
  color: #2d443b;
  background: rgba(255, 255, 255, 0.86);
  font: inherit;
}

.contract-book-sign {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 8px;
  align-items: end;
}

.contract-book-sign label {
  display: grid;
  gap: 4px;
  color: #607064;
  font-size: 12px;
  font-weight: 850;
}

.contract-book-sign button {
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(180deg, #5da878 0%, #347b62 100%);
  font-weight: 900;
}

.contract-book-dialog {
  width: min(1420px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
}

.profile-dialog.contract-book-dialog form {
  padding: 0;
}

.contract-book-page {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: 18px;
  min-height: min(860px, calc(100vh - 16px));
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 34px 38px 26px;
  border: 1px solid rgba(188, 166, 112, 0.48);
  border-radius: 18px;
  background:
    radial-gradient(circle at 86% 9%, rgba(111, 167, 127, 0.08), transparent 15%),
    linear-gradient(90deg, rgba(188, 166, 112, 0.22), transparent 10%, transparent 90%, rgba(188, 166, 112, 0.16)),
    linear-gradient(180deg, #fffdf6 0%, #f8fcf6 100%);
  box-shadow: 0 24px 58px rgba(34, 51, 44, 0.24);
}

.contract-book-page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 22px 24px;
  border: 1px solid rgba(188, 166, 112, 0.32);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(243, 249, 241, 0.62));
}

.contract-book-page-head span {
  color: #8a6a2e;
  font-size: 13px;
  font-weight: 900;
}

.contract-book-page-head h2 {
  margin: 4px 0 0;
  color: #244d42;
  font-size: 52px;
  font-weight: 950;
  letter-spacing: 0;
}

.contract-book-page-head p {
  margin: 7px 0 0;
  color: #617268;
  font-size: 16px;
  font-weight: 800;
}

.contract-book-agreement {
  display: grid;
  grid-template-columns: minmax(190px, 0.9fr) repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(107, 151, 124, 0.26);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
}

.contract-book-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  min-height: 0;
}

.contract-book-agreement article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 88px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(244, 249, 242, 0.82);
}

.contract-book-agreement article i {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  color: #3d846b;
  background: rgba(255, 255, 255, 0.74);
  font-style: normal;
  font-size: 20px;
  font-weight: 950;
}

.contract-book-agreement article strong {
  color: #244d42;
  font-size: 18px;
  line-height: 1.22;
}

.contract-book-agreement article span {
  display: block;
  margin-top: 4px;
  color: #6b7a72;
  font-size: 14px;
  font-weight: 800;
}

.contract-book-agreement .contract-agreement-lead {
  border-right: 1px dashed rgba(188, 166, 112, 0.42);
  background: transparent;
}

.contract-book-page-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 14px;
  align-content: start;
}

.contract-book-day-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(107, 151, 124, 0.28);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 24px rgba(42, 70, 57, 0.07);
}

.contract-book-day-card-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.contract-book-day-card-head strong {
  color: #244d42;
  font-size: 28px;
}

.contract-book-day-card-head span {
  color: #7a8a81;
  font-size: 13px;
  font-weight: 800;
}

.contract-book-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.contract-book-metrics span {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 110px;
  padding: 10px 7px;
  border-radius: 16px;
  color: #6b5422;
  background: #fff6dc;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.contract-book-metrics i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #d6921e;
  background: rgba(255, 255, 255, 0.78);
  font-style: normal;
  font-weight: 950;
}

.contract-book-metrics b {
  color: #2f4e46;
  font-size: 13px;
}

.contract-book-metrics strong {
  color: #233b34;
  font-size: 20px;
}

.contract-book-task-list {
  display: grid;
  gap: 5px;
}

.contract-book-task-list span,
.contract-book-task-list em {
  color: #50665b;
  font-size: 15px;
  line-height: 1.5;
}

.contract-book-task-list em {
  color: #7a6336;
  font-style: normal;
  font-weight: 850;
}

.contract-book-page-reward {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(188, 166, 112, 0.3);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(244, 249, 242, 0.92), rgba(255, 255, 255, 0.74));
}

.contract-book-page-reward strong {
  color: #2f4e46;
  font-size: 22px;
}

.contract-book-page-reward p {
  margin: 0;
  color: #536960;
  font-size: 14px;
}

.contract-book-page-reward textarea {
  width: 100%;
  border: 1px solid rgba(168, 190, 174, 0.72);
  border-radius: 10px;
  padding: 12px 14px;
  color: #2d443b;
  background: rgba(255, 255, 255, 0.86);
  font: inherit;
  min-height: 190px;
}

.contract-book-sign-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) repeat(2, minmax(120px, 0.7fr)) auto;
  gap: 10px;
  align-items: end;
  position: relative;
  z-index: 2;
  padding: 16px;
  border: 1px solid rgba(107, 151, 124, 0.24);
  border-radius: 14px;
  background: rgba(250, 253, 247, 0.96);
  box-shadow: 0 10px 24px rgba(42, 70, 57, 0.08);
}

.contract-book-sign-panel label {
  display: grid;
  gap: 5px;
  color: #607064;
  font-size: 12px;
  font-weight: 850;
}

.contract-agree-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.contract-book-sign-panel input[type="password"] {
  min-height: 54px;
  border: 1px solid rgba(168, 190, 174, 0.72);
  border-radius: 9px;
  padding: 0 10px;
  font: inherit;
}

.contract-agree-line {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid rgba(107, 151, 124, 0.22);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.72);
}

.contract-agree-line input {
  margin: 0 4px 0 0;
}

.contract-book-sign-panel button,
.contract-book-page-actions button {
  min-height: 66px;
  padding: 0 34px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(180deg, #5da878 0%, #347b62 100%);
  font-weight: 900;
  font-size: 18px;
  box-shadow: 0 12px 24px rgba(42, 111, 78, 0.22);
}

.contract-book-footer {
  margin: 0;
  color: #617268;
  text-align: center;
  font-size: 14px;
  font-weight: 850;
}

.contract-book-page-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.contract-book-dialog {
  width: min(1120px, calc(100vw - 28px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
}

.profile-dialog.contract-book-dialog form.contract-shell {
  padding: 26px;
}

.contract-shell {
  display: grid;
  gap: 14px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 100%;
  border: 1px solid rgba(215, 230, 216, 0.95);
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 8%, rgba(93, 155, 118, 0.11), transparent 18%),
    linear-gradient(180deg, #fffdf7 0%, #f5fbf6 100%);
  box-shadow: 0 22px 54px rgba(36, 70, 58, 0.16);
}

.contract-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.contract-kicker {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #6d7f73;
  font-size: 15px;
  font-weight: 900;
}

.contract-kicker i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  color: #24463a;
  background: #eef7ef;
  font-style: normal;
}

.contract-header h2 {
  margin: 10px 0 0;
  color: #24463a;
  font-size: 42px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.05;
}

.contract-header p {
  margin: 8px 0 0;
  color: #6d7f73;
  font-size: 17px;
  font-weight: 800;
}

.contract-close-button {
  display: grid;
  width: 48px;
  height: 48px;
  min-height: 48px;
  place-items: center;
  border: 1px solid #d7e6d8;
  border-radius: 14px;
  color: #527062;
  background: rgba(255, 255, 255, 0.74);
  font-size: 28px;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(36, 70, 58, 0.08);
}

.contract-summary-card {
  display: grid;
  grid-template-columns: minmax(145px, 0.85fr) repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
  min-width: 0;
  padding: 12px;
  border: 1px solid #d7e6d8;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 24px rgba(36, 70, 58, 0.06);
}

.contract-summary-lead,
.contract-rule-pill {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  min-height: 66px;
  padding: 11px 12px;
  border-radius: 18px;
}

.contract-summary-lead {
  border-right: 1px dashed rgba(215, 230, 216, 0.95);
  border-bottom: 0;
}

.contract-rule-pill {
  background: #f3faf5;
}

.contract-summary-lead i,
.contract-rule-pill i,
.reward-card-copy i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 14px;
  color: #4f9a70;
  background: #ffffff;
  font-style: normal;
  font-size: 20px;
  font-weight: 950;
}

.contract-summary-lead strong,
.contract-rule-pill strong {
  color: #24463a;
  font-size: 15px;
  line-height: 1.25;
}

.contract-summary-lead span {
  display: block;
  margin-top: 5px;
  color: #6d7f73;
  font-size: 13px;
  font-weight: 850;
}

.contract-days-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.contract-day-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 18px;
  border: 1px solid #dde9de;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 28px rgba(36, 70, 58, 0.08);
}

.contract-day-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.contract-day-card-head strong {
  color: #24463a;
  font-size: 27px;
  font-weight: 950;
}

.contract-day-card-head span {
  color: #6d7f73;
  font-size: 16px;
  font-weight: 900;
}

.contract-day-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.day-progress-badge {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 76px;
  padding: 8px 4px;
  border-radius: 14px;
  color: #24463a;
  background: #fff4d7;
  text-align: center;
}

.day-progress-badge i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 10px;
  color: #d6921e;
  background: rgba(255, 255, 255, 0.78);
  font-style: normal;
  font-weight: 950;
}

.day-progress-badge b {
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.day-progress-badge strong {
  font-size: 17px;
  line-height: 1;
  white-space: nowrap;
}

.contract-day-checklist {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed rgba(215, 230, 216, 0.95);
}

.contract-day-checklist span,
.contract-day-checklist em {
  position: relative;
  padding-left: 24px;
  color: #40564c;
  font-size: 14px;
  line-height: 1.45;
  font-style: normal;
  font-weight: 760;
}

.contract-day-checklist span::before,
.contract-day-checklist em::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 14px;
  height: 14px;
  border: 2px solid #5d9b76;
  border-radius: 50%;
  background: #ffffff;
}

.contract-day-checklist span.done::before,
.contract-day-checklist em.done::before {
  content: "✓";
  display: grid;
  place-items: center;
  border-color: #4f9a70;
  color: #ffffff;
  background: #5d9b76;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}

.reward-card {
  display: grid;
  grid-template-columns: minmax(190px, 0.45fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  min-width: 0;
  padding: 18px;
  border: 1px solid #d7e6d8;
  border-radius: 22px;
  background: #f3faf5;
}

.reward-card-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.reward-card-copy strong {
  display: block;
  color: #24463a;
  font-size: 24px;
}

.reward-card-copy span {
  display: block;
  margin-top: 6px;
  color: #6d7f73;
  font-size: 14px;
  font-weight: 800;
}

.reward-card-input {
  display: grid;
  gap: 8px;
}

.reward-card-input textarea {
  width: 100%;
  min-height: 76px;
  border: 1px solid #cfe0d1;
  border-radius: 14px;
  padding: 14px 16px;
  color: #24463a;
  background: rgba(255, 255, 255, 0.9);
  font: inherit;
  font-size: 16px;
}

.reward-card-input p {
  margin: 0;
  color: #40564c;
  font-size: 16px;
  line-height: 1.5;
}

.reward-card-input small {
  color: #8a978f;
  font-size: 13px;
  font-weight: 800;
}

.signature-panel {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto;
  gap: 12px;
  align-items: end;
  min-width: 0;
  padding: 16px;
  border: 1px solid #cfe0d1;
  border-radius: 22px;
  background: rgba(243, 250, 245, 0.94);
  box-shadow: 0 12px 28px rgba(36, 70, 58, 0.08);
}

.contract-agree-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.contract-agree-line {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #d7e6d8;
  border-radius: 12px;
  color: #40564c;
  background: #ffffff;
  font-size: 15px;
  font-weight: 850;
}

.pin-input {
  display: grid;
  gap: 7px;
  color: #40564c;
  font-size: 14px;
  font-weight: 900;
}

.pin-input input {
  width: 100%;
  min-height: 46px;
  border: 1px solid #cfe0d1;
  border-radius: 14px;
  padding: 0 14px;
  color: #24463a;
  background: #ffffff;
  font: inherit;
  font-size: 18px;
}

.primary-contract-button {
  min-height: 54px;
  padding: 0 24px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(180deg, #5d9b76 0%, #2f7655 100%);
  font-size: 18px;
  font-weight: 950;
  box-shadow: 0 14px 26px rgba(47, 118, 85, 0.24);
}

.primary-contract-button:disabled {
  opacity: 0.46;
  cursor: not-allowed;
  box-shadow: none;
}

.contract-book-footer {
  margin: -4px 0 0;
  color: #6d7f73;
  text-align: center;
  font-size: 14px;
  font-weight: 850;
}

@media (max-width: 980px) {
  .contract-book-dialog {
    width: min(980px, calc(100vw - 24px));
  }

  .profile-dialog.contract-book-dialog form.contract-shell {
    padding: 20px;
  }

  .contract-header h2 {
    font-size: 34px;
  }

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

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

  .contract-summary-lead {
    border-right: 0;
    border-bottom: 1px dashed rgba(215, 230, 216, 0.95);
  }

  .reward-card,
  .signature-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .contract-summary-card,
  .contract-days-grid,
  .contract-day-progress {
    grid-template-columns: 1fr;
  }

  .day-progress-badge {
    min-height: 48px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-items: start;
    align-items: center;
    padding: 8px 10px;
  }
}

@media (max-width: 980px) {
  .contract-book-page {
    padding: 18px;
  }

  .contract-book-page-days,
  .contract-book-agreement,
  .contract-book-main,
  .contract-book-sign-panel {
    grid-template-columns: 1fr;
  }

  .contract-agree-row {
    flex-wrap: wrap;
  }
}

.contract-progress-detail strong {
  display: block;
  margin-bottom: 4px;
  color: #2f4e46;
  font-size: 13px;
}

/* Contract dialog must override the generic .profile-dialog rules declared later. */
.profile-dialog.contract-book-dialog {
  width: min(1160px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  max-height: calc(100vh - 28px);
  border: 0;
  border-radius: 24px;
  background: transparent;
  overflow: visible;
}

.profile-dialog.contract-book-dialog form.contract-shell {
  width: 100%;
  box-sizing: border-box;
}

.profile-dialog.contract-book-dialog .contract-summary-card {
  grid-template-columns: minmax(150px, 0.72fr) repeat(3, minmax(0, 1fr));
}

.profile-dialog.contract-book-dialog .contract-days-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-dialog.contract-book-dialog .contract-day-progress {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-dialog.contract-book-dialog .contract-summary-lead strong,
.profile-dialog.contract-book-dialog .contract-rule-pill strong,
.profile-dialog.contract-book-dialog .day-progress-badge b,
.profile-dialog.contract-book-dialog .contract-day-checklist span,
.profile-dialog.contract-book-dialog .contract-day-checklist em {
  word-break: normal;
  overflow-wrap: normal;
}

.profile-dialog.contract-book-dialog .contract-rule-pill strong,
.profile-dialog.contract-book-dialog .day-progress-badge b {
  white-space: nowrap;
}

.profile-dialog.contract-book-dialog .signature-panel {
  grid-template-columns: minmax(250px, 1fr) minmax(130px, 0.42fr) minmax(130px, 0.42fr) auto;
}

@media (max-width: 1080px) {
  .profile-dialog.contract-book-dialog {
    width: min(1020px, calc(100vw - 24px));
  }

  .profile-dialog.contract-book-dialog .contract-header h2 {
    font-size: 36px;
  }

  .profile-dialog.contract-book-dialog .contract-summary-card {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .profile-dialog.contract-book-dialog .contract-summary-lead,
  .profile-dialog.contract-book-dialog .contract-rule-pill {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 7px;
  }

  .profile-dialog.contract-book-dialog .contract-summary-lead {
    border-right: 1px dashed rgba(215, 230, 216, 0.95);
    border-bottom: 0;
  }

  .profile-dialog.contract-book-dialog .contract-day-card {
    padding: 14px;
  }

  .profile-dialog.contract-book-dialog .contract-day-card-head strong {
    font-size: 24px;
  }

  .profile-dialog.contract-book-dialog .contract-day-progress {
    gap: 5px;
  }

  .profile-dialog.contract-book-dialog .day-progress-badge {
    min-height: 68px;
    padding: 7px 3px;
  }

  .profile-dialog.contract-book-dialog .day-progress-badge i {
    width: 24px;
    height: 24px;
  }

  .profile-dialog.contract-book-dialog .contract-day-checklist span,
  .profile-dialog.contract-book-dialog .contract-day-checklist em {
    font-size: 13px;
  }
}

@media (max-width: 820px) {
  .profile-dialog.contract-book-dialog .contract-summary-card,
  .profile-dialog.contract-book-dialog .contract-days-grid,
  .profile-dialog.contract-book-dialog .signature-panel {
    grid-template-columns: 1fr;
  }

  .profile-dialog.contract-book-dialog .contract-summary-lead {
    border-right: 0;
    border-bottom: 1px dashed rgba(215, 230, 216, 0.95);
  }
}

.contract-progress-detail section {
  min-width: 0;
}

.contract-progress-detail section > span,
.contract-step-list span {
  display: block;
  overflow: hidden;
  color: #536960;
  line-height: 1.55;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-step-list {
  display: grid;
  gap: 1px;
}

.contract-progress-detail em {
  grid-column: 1 / -1;
  overflow: hidden;
  color: #607064;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-contract-panel > div:first-child {
  display: grid;
  gap: 4px;
}

.learning-contract-panel span {
  color: #6b5422;
  font-size: 13px;
  font-weight: 950;
}

.learning-contract-panel strong {
  color: #24463a;
  font-size: 22px;
  line-height: 1.25;
}

.learning-contract-panel p {
  margin: 0;
  color: #40564c;
  font-size: 14px;
  font-weight: 760;
}

.contract-primary-btn {
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid rgba(83, 143, 109, 0.42);
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(180deg, #5da878 0%, #347b62 100%);
  box-shadow: 0 12px 22px rgba(42, 111, 78, 0.28);
  font-size: 16px;
  font-weight: 950;
}

.contract-draft-confirm-btn {
  min-width: 154px;
}

.contract-draft-cancel-btn {
  min-height: 44px;
  padding: 0 18px;
  border-color: rgba(189, 138, 85, 0.5);
  color: #7a5631;
  background: #fff7eb;
  font-size: 14px;
  font-weight: 900;
}

.learning-mode-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.learning-mode-actions button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(151, 178, 162, 0.62);
  border-radius: 999px;
  color: #40544b;
  background: rgba(255, 255, 255, 0.82);
  font-weight: 800;
}

.learning-mode-actions button.active {
  border-color: rgba(83, 143, 109, 0.58);
  color: #ffffff;
  background: linear-gradient(180deg, #6fa77f, #3d846b);
}

.learning-mode-strip button.active {
  border-color: rgba(36, 70, 58, 0.55);
  color: #ffffff;
  background: linear-gradient(180deg, #5d9b76 0%, #24463a 100%);
  box-shadow: 0 8px 16px rgba(36, 70, 58, 0.2);
}

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

  .learning-mode-actions {
    justify-content: stretch;
  }

  .learning-mode-actions button {
    flex: 1 1 160px;
  }
}

.contract-plan-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.contract-plan-summary-day {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(107, 151, 124, 0.24);
  border-radius: 8px;
  background: rgba(248, 252, 248, 0.88);
}

.contract-plan-summary-day strong {
  color: #2f5f4d;
  font-size: 13px;
}

.contract-plan-summary-day span {
  overflow: hidden;
  color: #596d62;
  font-size: 12px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-nav-item.focus-disabled,
.side-nav-item:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.contract-day-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contract-day-strip span {
  display: grid;
  min-width: 70px;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid rgba(176, 194, 180, 0.72);
  border-radius: 8px;
  background: rgba(255,255,255,.72);
  color: #3f5c50;
}

.contract-day-strip span.done {
  border-color: rgba(93, 168, 120, 0.58);
  background: #eef8ed;
}

.contract-day-strip span.today {
  border-color: rgba(213, 168, 79, 0.7);
  background: #fff8e6;
}

.contract-day-strip span.missed {
  border-color: rgba(213, 147, 92, 0.58);
  background: #fff3e8;
}

.contract-day-strip small {
  color: #6b7a72;
  font-size: 11px;
  font-weight: 700;
}

.contract-reward-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.contract-reward-row strong {
  font-size: 14px;
  color: #5f4714;
}

.contract-dialog-copy {
  margin: 0;
  color: #536960;
  line-height: 1.65;
}

.contract-action-dialog {
  width: min(620px, calc(100vw - 28px));
  border-radius: 20px;
}

.contract-action-dialog form.profile-dialog-card {
  display: grid;
  gap: 16px;
  padding: 24px;
}

.contract-cancel-card {
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.98) 0%, rgba(244, 250, 245, 0.98) 100%);
}

.contract-cancel-card .profile-dialog-head {
  align-items: center;
}

.contract-cancel-reason textarea {
  min-height: 82px;
  resize: vertical;
}

.contract-cancel-pins {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.contract-cancel-card .profile-dialog-actions {
  justify-content: flex-end;
}

.growth-card > span,
.growth-card .growth-meta {
  color: var(--home-muted);
  font-size: 13px;
}

.growth-card > span:first-child,
.calendar-header > span,
.chart-header > div > span,
.learning-reminder-head span,
.tomorrow-card-head > span,
.planner-header > div > span,
.summary-card-head > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  color: #2d4d43;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.1;
}

.growth-card > span:first-child {
  margin-bottom: 9px;
}

.tomorrow-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.tomorrow-card-head > strong {
  flex: 0 0 auto;
  color: var(--card-strong, #405d8a);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.home-recent-books {
  display: grid;
  align-items: center;
  min-height: 0;
  overflow: visible;
  position: relative;
  z-index: 1;
}

.home-recent-books-featured {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 2.2vw, 12px);
  width: 100%;
  height: 100%;
  min-height: 0;
  justify-items: center;
}

.home-recent-books-featured.count-1 {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.home-recent-books-featured.count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-recent-books-extra {
  display: none;
}

.home-recent-books-card[data-density="compact"] .home-recent-books {
  align-items: center;
}

.home-recent-books-card[data-density="compact"] .home-recent-books-extra {
  display: none;
}

.home-recent-book {
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  width: min(100%, clamp(76px, calc(var(--home-recent-height, 240px) * 0.54), 118px));
  aspect-ratio: 0.72;
  border: 1px solid rgba(194, 215, 201, 0.72);
  border-radius: 8px;
  padding: 5px;
  color: #2d4d43;
  background: rgba(255, 255, 251, 0.7);
  box-shadow: 0 8px 16px rgba(45, 70, 61, 0.06);
  transform-origin: center;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.home-recent-book:hover,
.home-recent-book:focus-visible {
  border-color: rgba(79, 143, 114, 0.52);
  background: rgba(244, 251, 243, 0.96);
  box-shadow: 0 18px 34px rgba(37, 63, 54, 0.18);
  transform: translateY(-8px) scale(1.12);
  z-index: 8;
}

.home-recent-book-cover {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 0.72;
  overflow: hidden;
  border-radius: 6px;
  background:
    radial-gradient(circle at 76% 16%, rgba(255, 241, 176, 0.78), transparent 20%),
    linear-gradient(150deg, #f8d779 0%, #78c5b2 38%, #216f76 70%, #123e5c 100%);
  box-shadow: 0 8px 14px rgba(59, 44, 26, 0.14);
}

.home-recent-book.primary .home-recent-book-cover {
  width: 100%;
}

.home-recent-book.primary {
  width: min(100%, clamp(82px, calc(var(--home-recent-height, 240px) * 0.6), 126px));
  box-shadow: 0 12px 24px rgba(45, 70, 61, 0.1);
  z-index: 2;
}

.home-recent-book.primary:hover,
.home-recent-book.primary:focus-visible {
  transform: translateY(-8px) scale(1.08);
}

.home-recent-book-cover img,
.home-recent-book-cover .cover-original-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-recent-book.english .home-recent-book-cover {
  background: rgba(255, 255, 251, 0.88);
}

.home-recent-book.english .home-recent-book-cover img {
  object-fit: cover;
}

.home-recent-book.english .home-recent-book-cover img.logo {
  object-fit: contain;
  padding: 8px;
  background: rgba(255, 255, 251, 0.92);
}

.home-recent-book-cover.home-recent-shelf-cover {
  background: #f7f2e8;
}

.home-recent-english-cover {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: min-content 1fr min-content min-content;
  align-content: space-between;
  overflow: hidden;
  padding: 14px 11px 10px 17px;
  border-radius: 6px;
  color: #fffaf0;
  background:
    radial-gradient(circle at 76% 16%, rgba(255, 241, 176, 0.72), transparent 20%),
    linear-gradient(150deg, #f8d779 0%, #78c5b2 38%, #216f76 70%, #123e5c 100%);
  transform: none;
}

.home-recent-english-cover::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: rgba(20, 20, 20, 0.13);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.16);
}

.home-recent-english-cover.ted {
  background: linear-gradient(160deg, #151515 0%, #272727 58%, #d92d24 100%);
}

.home-recent-english-cover.ssp {
  background: linear-gradient(160deg, #e84132 0%, #b4372b 58%, #7f2a24 100%);
}

.home-recent-english-cover.china-daily {
  color: #2d3133;
  background: linear-gradient(160deg, #f7f2e8 0%, #dce9ef 58%, #b7282e 100%);
}

.home-recent-english-cover-image {
  position: relative;
  z-index: 1;
  display: block;
  user-select: none;
  pointer-events: none;
}

.home-recent-english-cover-image.logo {
  align-self: center;
  justify-self: center;
  width: 88%;
  height: auto;
  max-height: 54px;
  object-fit: contain;
}

.home-recent-english-cover-image.full {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-recent-english-cover strong {
  position: relative;
  z-index: 1;
  margin-top: auto;
  font-size: clamp(18px, calc(var(--home-recent-height, 240px) * 0.13), 27px);
  line-height: 1.05;
}

.home-recent-english-cover span,
.home-recent-english-cover small {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,0.84);
  font-size: 11px;
  line-height: 1.25;
}

.home-recent-english-cover small {
  justify-self: start;
  max-width: calc(100% - 28px);
  margin-top: 6px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
  white-space: normal;
}

.home-recent-english-cover.china-daily span,
.home-recent-english-cover.china-daily small {
  color: rgba(45, 49, 51, 0.78);
}

.home-recent-book-cover .cover-design,
.home-recent-book-cover .notebook-cover {
  transform: scale(0.62);
  transform-origin: top left;
  width: 160%;
  height: 160%;
}

.home-recent-books-extra .home-recent-book {
  width: min(100%, calc(var(--home-recent-height, 240px) * 0.2));
  padding: 4px;
}

.home-recent-books-extra .home-recent-book-cover {
  width: 100%;
}

.home-recent-books-empty {
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 96px;
  padding: 12px;
  border: 1px dashed rgba(126, 169, 139, 0.45);
  border-radius: 8px;
  background: rgba(249, 253, 247, 0.78);
}

.home-recent-books-empty strong {
  color: #2f6a57;
  font-size: 15px;
}

.home-recent-books-empty p {
  margin: 0;
  color: #607064;
  font-size: 13px;
  line-height: 1.35;
}

.home-recent-books-empty button {
  justify-self: start;
  min-height: 28px;
  border-color: rgba(97, 145, 119, 0.36);
  color: #2f6a57;
  background: #f7fcf5;
}

.calendar-header,
.chart-header,
.learning-reminder-head,
.planner-header,
.summary-card-head {
  align-items: center;
}

.summary-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.summary-duration {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 7px;
  color: var(--home-muted, #607064);
  white-space: nowrap;
}

.summary-duration span {
  font-size: 11px;
  font-weight: 700;
  color: #7f8c85;
}

.summary-duration strong {
  color: var(--card-strong);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.growth-card > strong {
  display: block;
  margin: 6px 0 8px;
  color: var(--card-strong);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.18;
}

.growth-card p {
  margin-top: 8px;
  color: var(--home-muted);
  font-size: 13px;
  line-height: 1.5;
}

#wrongSummary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.growth-meta,
.achievement-list,
.activity-list {
  display: grid;
  gap: 8px;
}

.weekly-card .growth-meta,
.today-card .growth-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.summary-metric-card {
  display: grid;
  align-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 116px;
  padding: 12px;
  border: 1px solid rgba(204, 219, 207, 0.48);
  border-radius: var(--ui-radius-control);
  background: rgba(255, 255, 255, 0.54);
  box-shadow: 0 3px 10px rgba(45, 70, 61, 0.028);
}

.summary-metric-card > span {
  color: #7b8b83;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.summary-metric-card > strong {
  min-width: 0;
  color: var(--card-strong, #40544b);
  font-size: 25px;
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
}

.summary-metric-card > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.summary-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid rgba(201, 214, 197, 0.62);
  border-radius: 999px;
  color: #6d7f75;
  background: rgba(248, 251, 244, 0.84);
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

button.summary-chip {
  cursor: pointer;
}

button.summary-chip:hover {
  border-color: rgba(126, 166, 136, 0.72);
  color: var(--home-heading, #40544b);
  background: rgba(241, 248, 239, 0.96);
}

.achievement-list.scrolling {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding-right: 2px;
}

.achievement-scroll-track {
  display: flex;
  flex-direction: column;
}

.achievement-list.scrolling .achievement-scroll-track {
  position: absolute;
  inset: 0 2px auto 0;
  animation: achievementScroll 22s linear infinite;
}

.achievement-list.scrolling:hover .achievement-scroll-track {
  animation-play-state: paused;
}

.achievement-scroll-set {
  display: grid;
  gap: 8px;
  padding-bottom: 8px;
}

@keyframes achievementScroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

.achievement-item,
.activity-item,
.task-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 11px;
  border: 1px solid rgba(211, 224, 211, 0.58);
  border-radius: var(--ui-radius-control);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 4px 12px rgba(45, 70, 61, 0.035);
}

.achievement-item.unlocked {
  border-color: rgba(141, 191, 157, 0.58);
  background: rgba(237, 248, 239, 0.78);
}

.achievement-item {
  cursor: help;
}

.achievement-item > div:last-child {
  position: relative;
}

.achievement-help {
  display: inline-flex;
  width: 17px;
  height: 17px;
  margin-left: 5px;
  align-items: center;
  justify-content: center;
  border: 1px solid #c9d6c5;
  border-radius: 999px;
  color: #607064;
  background: #f4f7ef;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

.activity-item {
  grid-template-columns: 1fr auto;
  align-items: start;
  color: var(--home-muted, #607064);
  font-size: 13px;
  line-height: 1.45;
}

.calendar-header,
.calendar-selected-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.calendar-header > div {
  display: flex;
  gap: 8px;
  align-items: center;
}

.calendar-header select {
  min-width: 118px;
  min-height: 28px;
  padding: 0 28px 0 10px;
  border: 1px solid #dbe5d8;
  border-radius: 7px;
  color: #607064;
  background: rgba(255, 255, 251, 0.74);
  font-size: 13px;
  font-weight: 400;
}

.calendar-today-btn {
  min-height: 28px;
  padding: 0 10px;
  border-color: #cbdcc9;
  border-radius: 999px;
  color: #3f6a59;
  background: rgba(247, 251, 244, 0.9);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.calendar-today-btn:hover {
  border-color: #a9c2ae;
  color: #285d4c;
  background: #eef7ed;
}

.calendar-arrow {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  border-color: #dbe5d8;
  border-radius: 999px;
  color: #607064;
  background: rgba(255, 255, 251, 0.74);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.calendar-arrow:hover {
  border-color: #b8cabe;
  color: #35695f;
  background: #f3f8f2;
}

.calendar-arrow:focus-visible {
  outline: 2px solid rgba(111, 167, 127, 0.35);
  outline-offset: 2px;
}

.tomorrow-card button,
.planner-header button,
.planner-subject-card button,
.planner-day-card button {
  border-color: #6fa77f;
  color: #ffffff;
  background: #4f8a6c;
}

.tomorrow-card button:hover,
.planner-header button:hover,
.planner-subject-card button:hover,
.planner-day-card button:hover {
  border-color: #477f63;
  color: #ffffff;
  background: #3f765d;
}

.achievement-claim-notice button {
  border-color: #d7ad53;
  color: #6d4f1f;
  background: #fff3d6;
}

.achievement-claim-notice button:hover {
  border-color: #c99835;
  color: #5e4318;
  background: #ffe8b6;
}

.profile-dialog {
  width: min(520px, calc(100vw - 28px));
  border: 1px solid #c9d6c5;
  border-radius: 8px;
  padding: 0;
  color: #24312f;
  background: #fbfdf8;
}

.profile-dialog::backdrop {
  background: rgba(22, 34, 30, .36);
}

.profile-dialog form {
  display: grid;
  gap: 14px;
  padding: 20px;
}

.profile-dialog-head h2 {
  margin: 4px 0 0;
}

.profile-dialog label {
  display: grid;
  gap: 6px;
  color: #40544b;
  font-size: 14px;
  font-weight: 700;
}

.profile-dialog input,
.profile-dialog select,
.profile-dialog textarea {
  min-height: 36px;
  border: 1px solid #c9d6c5;
  border-radius: 6px;
  padding: 8px 10px;
  color: #24312f;
  background: #fff;
  font: inherit;
  font-weight: 400;
}

.profile-dialog textarea {
  resize: vertical;
}

.parent-praise-dialog .profile-dialog-card {
  max-width: 520px;
}

.question-feedback-dialog {
  width: min(560px, calc(100vw - 28px));
}

.question-feedback-dialog .profile-dialog-head p {
  margin: 6px 0 0;
  color: #5f6f67;
  font-size: 13px;
  line-height: 1.6;
}

.question-feedback-card {
  max-width: 560px;
}

.question-feedback-current {
  padding: 9px 11px;
  border: 1px solid #d7dfcf;
  border-radius: 8px;
  color: #52635b;
  background: #f5f8ef;
  font-size: 13px;
  font-weight: 700;
}

.quality-feedback-panel {
  display: grid;
  gap: 12px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid #d8dfd2;
  border-radius: 8px;
  background: #fbfdf8;
}

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

.quality-feedback-head h3 {
  margin: 0;
  color: #31443f;
  font-size: 17px;
}

.quality-feedback-head p {
  margin: 5px 0 0;
  color: #627168;
  font-size: 13px;
}

.quality-feedback-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.quality-feedback-filters button {
  border-color: #c9d6c5;
  color: #40544b;
  background: #f8fbf4;
}

.quality-feedback-filters button.active {
  border-color: #8cae8e;
  color: #2f5b42;
  background: #eaf4e8;
}

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

.quality-feedback-insights {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d7dfcf;
  border-radius: 8px;
  background: #fffffb;
}

.quality-feedback-candidates {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d7dfcf;
  border-radius: 8px;
  background: #fffdf7;
}

.difficulty-calibration-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d7dfcf;
  border-radius: 8px;
  background: #f9fbff;
}

.tag-rule-preview-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d7dfcf;
  border-radius: 8px;
  background: #fffdfa;
}

.calibration-event-log {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d7dfcf;
  border-radius: 8px;
  background: #fbfdf8;
}

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

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

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

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

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

.feedback-insight-head h4,
.feedback-insight-grid h5,
.feedback-candidate-head h4,
.difficulty-calibration-head h4,
.tag-rule-head h4,
.calibration-log-head h4 {
  margin: 0;
  color: #31443f;
}

.feedback-insight-head p,
.feedback-candidate-head p,
.difficulty-calibration-head p,
.tag-rule-head p,
.calibration-log-head p {
  margin: 4px 0 0;
  color: #64746b;
  font-size: 13px;
}

.feedback-candidate-head > strong {
  min-width: 48px;
  padding: 7px 10px;
  border: 1px solid #d5c397;
  border-radius: 8px;
  color: #665126;
  background: #fff8e6;
  font-size: 20px;
  text-align: center;
}

.difficulty-calibration-head > strong {
  min-width: 48px;
  padding: 7px 10px;
  border: 1px solid #b9c7e2;
  border-radius: 8px;
  color: #345179;
  background: #eef4ff;
  font-size: 20px;
  text-align: center;
}

.tag-rule-head > strong {
  min-width: 48px;
  padding: 7px 10px;
  border: 1px solid #b8cfa1;
  border-radius: 8px;
  color: #3f6535;
  background: #f4faec;
  font-size: 20px;
  text-align: center;
}

.tag-rule-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-rule-summary span {
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid #d7dfcf;
  border-radius: 999px;
  color: #52635b;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

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

.tag-rule-grid section {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid #dce4d7;
  border-radius: 8px;
  background: #f8fbf4;
}

.tag-rule-grid h5 {
  margin: 0;
  color: #31443f;
  font-size: 13px;
}

.tag-rule-item-list {
  display: grid;
  gap: 10px;
}

.tag-rule-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 10px;
  border: 1px solid #dce4d7;
  border-left: 4px solid #8bb277;
  border-radius: 8px;
  background: #fff;
}

.tag-rule-item h5 {
  margin: 6px 0 4px;
  color: #31443f;
  font-size: 14px;
}

.tag-rule-compare {
  display: grid;
  gap: 4px;
  color: #5f6f67;
  font-size: 12px;
}

.calibration-log-head > strong {
  min-width: 48px;
  padding: 7px 10px;
  border: 1px solid #c9d6c5;
  border-radius: 8px;
  color: #40544b;
  background: #f8fbf4;
  font-size: 20px;
  text-align: center;
}

.feedback-insight-total {
  display: grid;
  min-width: 76px;
  justify-items: center;
  padding: 8px 10px;
  border: 1px solid #d5c397;
  border-radius: 8px;
  color: #665126;
  background: #fff8e6;
}

.feedback-insight-total span {
  font-size: 12px;
  font-weight: 700;
}

.feedback-insight-total strong {
  font-size: 22px;
}

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

.feedback-action-card,
.feedback-insight-grid section {
  padding: 10px;
  border: 1px solid #dce4d7;
  border-radius: 8px;
  background: #f8fbf4;
}

.feedback-action-card strong {
  display: block;
  color: #31443f;
  font-size: 14px;
}

.feedback-action-card p {
  margin: 5px 0 0;
  color: #5f6f67;
  font-size: 13px;
  line-height: 1.55;
}

.feedback-action-card.kind-split {
  border-color: #e0b0a0;
  background: #fff7f2;
}

.feedback-action-card.kind-tag {
  border-color: #b8cfa1;
  background: #f7fbef;
}

.feedback-action-card.kind-difficulty {
  border-color: #b9c7e2;
  background: #f4f7ff;
}

.feedback-insight-grid section {
  display: grid;
  align-content: start;
  gap: 8px;
}

.feedback-insight-grid h5 {
  font-size: 13px;
}

.feedback-insight-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  padding: 6px 8px;
  border: 1px solid #e1e8dc;
  border-radius: 6px;
  color: #4d5d55;
  background: #fff;
  font-size: 12px;
  text-align: left;
}

.feedback-insight-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-insight-row strong {
  color: #2f5b42;
}

.feedback-insight-row.as-button {
  cursor: pointer;
}

.feedback-insight-row.as-button:hover {
  border-color: #9db79e;
  background: #f2f8ef;
}

.feedback-insight-empty {
  padding: 8px;
  border: 1px dashed #d4ddcf;
  border-radius: 6px;
  color: #708078;
  background: #fbfdf8;
  font-size: 12px;
}

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

.difficulty-band-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.difficulty-band-card {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 9px 8px;
  border: 1px solid #d5deee;
  border-radius: 8px;
  background: #fff;
}

.difficulty-band-card span,
.difficulty-band-card em {
  color: #617080;
  font-size: 12px;
  font-style: normal;
}

.difficulty-band-card strong {
  color: #2f5b42;
  font-size: 20px;
}

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

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

.feedback-candidate-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 10px;
  border: 1px solid #e1d8b8;
  border-radius: 8px;
  background: #fffefb;
}

.difficulty-candidate-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 10px;
  border: 1px solid #d5deee;
  border-left: 4px solid #9fb4dc;
  border-radius: 8px;
  background: #fff;
}

.calibration-log-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 10px;
  border: 1px solid #dce4d7;
  border-radius: 8px;
  background: #fff;
}

.difficulty-candidate-item.priority-high {
  border-left-color: #bf8b4b;
  background: #fffaf2;
}

.difficulty-candidate-item.priority-medium {
  border-left-color: #849fc9;
}

.feedback-candidate-item h5,
.difficulty-candidate-item h5,
.calibration-log-item h5 {
  margin: 6px 0 4px;
  color: #31443f;
  font-size: 14px;
}

.feedback-candidate-item p,
.difficulty-candidate-item p,
.calibration-log-item p {
  margin: 0 0 8px;
  color: #5f6f67;
  font-size: 13px;
}

.calibration-log-item em {
  color: #718078;
  font-size: 12px;
  font-style: normal;
}

.feedback-candidate-changes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.feedback-candidate-changes span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid #d7dfcf;
  border-radius: 999px;
  color: #4d5d55;
  background: #f8fbf4;
  font-size: 12px;
}

.feedback-candidate-changes b {
  color: #2f5b42;
}

.quality-feedback-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d7dfcf;
  border-left: 4px solid #c7b36a;
  border-radius: 8px;
  background: #fffef8;
}

.quality-feedback-item.status-processed {
  border-left-color: #7aa879;
  background: #f7fbf4;
}

.quality-feedback-item.status-ignored {
  border-left-color: #aaa;
  background: #f8f8f6;
}

.quality-feedback-item h2 {
  margin: 6px 0 4px;
  color: #31443f;
  font-size: 15px;
}

.quality-feedback-item p {
  margin: 0 0 8px;
  color: #4f5f58;
  line-height: 1.55;
}

.quality-feedback-meta {
  display: grid;
  gap: 4px;
  color: #66746c;
  font-size: 12px;
}

@media (max-width: 760px) {
  .quality-feedback-head,
  .quality-feedback-item,
  .feedback-insight-head,
  .feedback-candidate-head,
  .feedback-candidate-item,
  .difficulty-calibration-head,
  .tag-rule-head,
  .tag-rule-item,
  .difficulty-candidate-item,
  .calibration-log-head,
  .calibration-log-item {
    grid-template-columns: 1fr;
  }

  .quality-feedback-head,
  .feedback-insight-head,
  .feedback-candidate-head,
  .difficulty-calibration-head,
  .tag-rule-head,
  .calibration-log-head {
    display: grid;
  }

  .quality-feedback-filters {
    justify-content: flex-start;
  }

  .feedback-action-grid,
  .feedback-insight-grid,
  .tag-rule-grid {
    grid-template-columns: 1fr;
  }

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

.pin-help-mark {
  display: inline-grid;
  width: 17px;
  height: 17px;
  margin-left: 5px;
  place-items: center;
  border: 1px solid rgba(96, 112, 100, 0.35);
  border-radius: 999px;
  color: #52635b;
  background: #f4f7ef;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.pin-settings-help {
  padding: 10px 12px;
  border: 1px solid rgba(122, 156, 123, 0.3);
  border-radius: 12px;
  color: #52635b;
  background: rgba(243, 250, 245, 0.86);
  font-size: 13px;
  line-height: 1.55;
}

.parent-praise-form {
  display: grid;
  gap: 11px;
  margin-top: 12px;
}

.parent-praise-dialog-status {
  min-height: 20px;
  margin-top: 10px;
  color: #8a4a3c;
  font-weight: 700;
}

.profile-avatar-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d7e1d2;
  border-radius: 8px;
  background: #fffffb;
}

.profile-avatar-head,
.profile-avatar-upload {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-avatar-head span {
  color: #40544b;
  font-size: 14px;
  font-weight: 700;
}

.profile-avatar-section p {
  color: #607064;
  font-size: 12px;
}

.profile-avatar-row,
.achievement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.avatar-choice {
  width: 58px;
  height: 58px;
  border-color: #b9cbbf;
  border-radius: 50%;
  padding: 0;
  color: #2f5b54;
  background: #edf5ee;
  font-weight: 800;
  overflow: hidden;
}

.avatar-choice img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-choice.selected {
  border-color: #4f8f72;
  box-shadow: 0 0 0 3px rgba(79, 143, 114, 0.16);
}

.student-avatar.preview {
  width: 58px;
  height: 58px;
  font-size: 20px;
}

.profile-dialog .avatar-upload-control {
  display: inline-flex;
  gap: 0;
  align-items: center;
  min-height: 32px;
  border: 1px solid #c9d6c5;
  border-radius: 6px;
  padding: 0 10px;
  color: #40544b;
  background: #f8fbf4;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.profile-dialog .avatar-upload-control input {
  display: none;
}

.profile-pet-settings {
  display: grid;
  gap: 10px;
}

.profile-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid #d7e1d2;
  border-radius: 8px;
  background: #f8fbf4;
}

.profile-toggle-row span {
  display: grid;
  gap: 3px;
}

.profile-toggle-row strong,
.profile-pet-locked strong {
  color: #344940;
  font-size: 13px;
}

.profile-toggle-row small,
.profile-pet-locked p {
  color: #65766e;
  font-size: 12px;
  line-height: 1.45;
}

.profile-toggle-row input {
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  accent-color: #4f8f72;
}

.profile-choice-row {
  align-items: flex-start;
}

.profile-segmented-control {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(82px, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid #cfdccd;
  border-radius: 8px;
  background: #edf5ea;
}

.profile-segmented-control label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  color: #40564f;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.profile-segmented-control label:has(input:checked) {
  color: #24483f;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(38, 58, 50, 0.12);
}

.profile-segmented-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.profile-choice-row select {
  min-width: 138px;
  min-height: 38px;
  border: 1px solid #c7d6ca;
  border-radius: 8px;
  padding: 0 10px;
  color: #314b43;
  background: #ffffff;
  font-weight: 800;
}

.profile-pet-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.profile-pet-actions button,
.profile-pet-locked button {
  min-height: 44px;
}

.profile-pet-locked {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  padding: 11px 12px;
  border: 1px solid #eadfbe;
  border-radius: 8px;
  background: #fffaf0;
}

.profile-pet-locked span {
  align-self: start;
  border: 1px solid #e0cf9f;
  border-radius: 999px;
  padding: 3px 8px;
  color: #7a6030;
  background: #fff4cf;
  font-size: 12px;
  font-weight: 800;
}

.profile-pet-locked p,
.profile-pet-locked button {
  grid-column: 1 / -1;
}

.profile-pet-switch-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.profile-pet-switch-card,
.profile-pet-switch-grid > button {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-height: 260px;
  padding: 12px 9px;
  border: 1px solid rgba(211, 224, 211, 0.68);
  border-radius: 12px;
  color: #40544b;
  background: rgba(255, 255, 251, 0.72);
  grid-template-rows: 108px auto auto auto 68px auto;
}

.profile-pet-switch-card.selected,
.profile-pet-switch-grid > button.selected {
  border-color: rgba(79, 143, 114, 0.72);
  background: rgba(238, 247, 236, 0.92);
  box-shadow: inset 0 0 0 2px rgba(79, 143, 114, 0.12);
}

.profile-pet-switch-card.talking {
  border-color: rgba(92, 151, 123, 0.82);
  background: #f5fbf2;
}

.profile-pet-switch-avatar {
  display: grid;
  place-items: center;
  width: 112px;
  height: 108px;
  margin: 0 auto 4px;
}

.profile-pet-switch-avatar img {
  max-width: 112px;
  max-height: 108px;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(42, 70, 57, 0.14));
}

.profile-pet-switch-avatar span {
  display: grid;
  width: 84px;
  height: 84px;
  place-items: center;
  border-radius: 50%;
  color: #2f5b54;
  background: #eef7ef;
  font-size: 22px;
  font-weight: 900;
}

.profile-pet-switch-grid strong {
  color: #2f4e46;
  font-size: 13px;
}

.profile-pet-switch-grid small {
  color: #74847a;
  font-size: 11px;
}

.profile-pet-switch-card .pet-tags {
  justify-content: center;
  gap: 4px;
  min-height: 24px;
}

.profile-pet-switch-card .pet-tags span {
  padding: 3px 6px;
  font-size: 10px;
}

.profile-pet-greeting {
  display: grid;
  width: 100%;
  min-height: 68px;
  align-items: center;
  margin: 2px 0 0;
  border: 1px solid rgba(209, 224, 207, 0.82);
  border-radius: 8px;
  padding: 7px 8px;
  color: #405b52;
  background: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  align-self: stretch;
}

.profile-pet-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
}

.profile-pet-card-actions button {
  min-height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
}

.profile-pet-locked button[disabled],
.profile-pet-locked button.disabled {
  color: #8d948e;
  border-color: #d8ded7;
  background: #f3f5f1;
  cursor: default;
}

.profile-dialog-actions {
  display: flex;
  justify-content: flex-end;
}

.reset-learning-panel {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid #d9c6c6;
  border-radius: 8px;
  background: #fffafa;
}

.reset-learning-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.reset-learning-panel p {
  margin-top: 6px;
  color: #607064;
}

.title-manager {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(150px, 0.55fr) minmax(260px, 1.4fr) minmax(180px, 0.75fr);
  gap: 16px;
  align-items: center;
  min-height: 84px;
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 1px solid #cdded5;
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfffb 0%, #f4faf5 100%);
}

.title-manager-head {
  display: grid;
  gap: 5px;
  white-space: nowrap;
}

.title-manager-head span,
.title-manager-label {
  color: #607064;
  font-size: 12px;
  font-weight: 700;
}

.title-manager-head strong {
  color: #263b36;
  font-size: 16px;
}

.title-manager-current {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 0 16px;
  border-left: 1px solid #d8e5dc;
  border-right: 1px solid #d8e5dc;
}

.title-empty {
  color: #607064;
  font-size: 13px;
}

.title-manager-meta {
  display: grid;
  gap: 4px;
  color: #607064;
  font-size: 13px;
  white-space: nowrap;
}

.title-manager-meta small {
  color: #78867f;
  font-size: 12px;
}

.achievement-actions {
  margin-top: 10px;
}

.study-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.calendar-weekday {
  color: #6b8178;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
}

.calendar-day {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 38px;
  padding: 0;
  border: 1px solid rgba(211, 224, 211, 0.24);
  border-radius: 12px;
  background: rgba(255, 255, 251, 0.34);
  color: #52635b;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

.calendar-day.active-day::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 5px;
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: #d6a84f;
  transform: translateX(50%);
  pointer-events: none;
}

.calendar-day.today-date {
  border-color: rgba(79, 143, 114, 0.46);
  color: #2f6658;
  background: rgba(238, 247, 236, 0.88);
  box-shadow: inset 0 0 0 1px rgba(79, 143, 114, 0.12);
}

.calendar-day.selected {
  color: #254f50;
  background: #eaf6f2;
  border-color: #7fb1a8;
  font-weight: 850;
  box-shadow: 0 6px 14px rgba(76, 124, 113, 0.10);
}

.calendar-day.selected.active-day::after {
  background: #6f8fc7;
}

.calendar-praise-mark {
  position: absolute;
  top: 4px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 14px;
  min-width: 14px;
  height: 14px;
  border-radius: 999px;
  padding: 0;
  color: #8a4a3c;
  background: #ffe8dc;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.calendar-contract-mark {
  position: absolute;
  top: 3px;
  left: 4px;
  display: grid;
  place-items: center;
  width: 17px;
  min-width: 17px;
  height: 17px;
  border: 1px solid rgba(109, 133, 84, 0.28);
  border-radius: 6px;
  color: #315b48;
  background: #f8eac0;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(83, 92, 56, 0.12);
}

.calendar-day.contract-day-marked {
  border-color: rgba(187, 157, 78, 0.45);
  background: rgba(255, 251, 235, 0.62);
}

.calendar-day.praise-day {
  border-color: rgba(211, 151, 112, 0.52);
}

.calendar-day-summary {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(211, 224, 211, 0.28);
  border-radius: 14px;
  background: rgba(250, 253, 247, 0.48);
}

.calendar-praise-detail {
  display: grid;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid rgba(214, 181, 116, 0.38);
  border-radius: 12px;
  background: rgba(255, 250, 239, 0.78);
}

.calendar-contract-detail {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(122, 156, 123, 0.36);
  border-radius: 12px;
  background: rgba(243, 250, 245, 0.86);
}

.calendar-contract-detail strong {
  color: #315b48;
  font-size: 13px;
}

.calendar-contract-detail > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.calendar-contract-detail button {
  display: grid;
  gap: 2px;
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid #d7e6d8;
  border-radius: 11px;
  color: #24463a;
  background: #fffdf7;
  text-align: left;
}

.calendar-contract-detail button span {
  font-size: 13px;
  font-weight: 900;
}

.calendar-contract-detail button small {
  color: #6d7f73;
  font-size: 11px;
  font-weight: 700;
}

.calendar-praise-detail strong {
  color: #684535;
  font-size: 13px;
}

.calendar-praise-detail ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
}

.calendar-praise-detail li {
  color: #5d5149;
  font-size: 13px;
}

.calendar-praise-detail li > span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.calendar-praise-detail p {
  display: block;
  margin-top: 2px;
  color: #7a6b61;
  font-size: 12px;
}

.calendar-praise-detail small {
  flex: 0 0 auto;
  color: #8a7668;
  font-size: 12px;
  font-weight: 500;
}

.calendar-selected-title strong {
  color: #335f5d;
  font-size: 13px;
  font-weight: 600;
}

.calendar-selected-title span {
  color: #607064;
  font-size: 13px;
}

.subject-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.subject-tabs-legacy {
  display: none;
}

.analysis-title-text {
  flex: 0 0 auto;
}

.analysis-title-tabs {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.analysis-title-tabs.subject-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 0 11px;
  font-weight: 750;
}

.analysis-title-tabs.subject-tabs button img {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  object-fit: contain;
}

.analysis-title-tabs.subject-tabs button span {
  line-height: 1;
}

.subject-tabs button {
  min-height: 28px;
  padding: 0 10px;
  border-color: #dbe5d8;
  color: #607064;
  background: rgba(255, 255, 251, 0.74);
  font-size: 13px;
  font-weight: 400;
}

.subject-tabs button.active {
  border-color: #9fb7ac;
  color: #2f5b54;
  background: #edf5ee;
  font-weight: 600;
}

.subject-analysis {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.analysis-overview-hero {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border-left: 3px solid #6aa7a0;
  border-radius: 8px;
  color: var(--home-heading, #40544b);
  background: #eef8f5;
}

.analysis-overview-hero strong {
  font-size: 15px;
  font-weight: 900;
}

.analysis-overview-hero span {
  color: #52635b;
  font-size: 13px;
  font-weight: 800;
}

.analysis-overview-hero p {
  margin: 0;
  color: #75857d;
  font-size: 12px;
}

.subject-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.subject-overview-card {
  display: grid;
  gap: 10px;
  min-height: 178px;
  padding: 12px;
  border: 1px solid rgba(204, 219, 207, 0.46);
  border-radius: 10px;
  color: #52635b;
  background: rgba(255, 255, 251, 0.62);
  text-align: left;
  box-shadow: 0 4px 12px rgba(45, 70, 61, 0.028);
}

.subject-overview-card:hover {
  border-color: rgba(126, 166, 136, 0.72);
  background: rgba(248, 252, 246, 0.92);
}

.subject-overview-card.priority {
  border-color: rgba(212, 165, 91, 0.5);
  background: rgba(255, 248, 232, 0.72);
}

.subject-overview-card.watch {
  border-color: rgba(116, 166, 183, 0.46);
  background: rgba(241, 248, 251, 0.72);
}

.subject-overview-card.stable {
  border-color: rgba(127, 174, 139, 0.42);
  background: rgba(240, 250, 240, 0.72);
}

.subject-overview-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.subject-overview-head strong {
  color: #2d4d43;
  font-size: 16px;
  font-weight: 900;
}

.subject-overview-head span {
  padding: 3px 8px;
  border-radius: 999px;
  color: #617268;
  background: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 800;
}

.subject-overview-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.subject-overview-metrics div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.subject-overview-metrics span {
  color: #7a8a81;
  font-size: 11px;
  font-weight: 750;
}

.subject-overview-metrics strong {
  color: #263b36;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.subject-overview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.subject-overview-tags span {
  max-width: 100%;
  padding: 3px 7px;
  overflow: hidden;
  border: 1px solid rgba(201, 214, 197, 0.52);
  border-radius: 999px;
  color: #6d7f75;
  background: rgba(255, 255, 255, 0.52);
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subject-overview-card p {
  margin: 0;
  color: #607064;
  font-size: 12px;
  line-height: 1.45;
}

.analysis-diagnosis-empty {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px solid rgba(204, 219, 207, 0.52);
  border-radius: 12px;
  color: #617268;
  background: rgba(255, 255, 251, 0.7);
}

.analysis-diagnosis-empty strong {
  color: #2d4d43;
  font-size: 17px;
  font-weight: 900;
}

.analysis-diagnosis-hero {
  display: grid;
  gap: 2px;
  padding: 7px 14px 8px;
  position: relative;
  padding-right: clamp(250px, 36%, 330px);
  border: 1px solid rgba(198, 211, 219, 0.5);
  border-left: 4px solid rgba(126, 145, 170, 0.76);
  border-radius: 14px;
  color: #40544b;
  background: linear-gradient(180deg, rgba(247,250,253,.92), rgba(239,245,249,.76));
}

.analysis-diagnosis-hero.critical {
  border-left-color: rgba(126, 145, 170, 0.76);
  background: linear-gradient(180deg, rgba(247,250,253,.92), rgba(239,245,249,.76));
}

.analysis-diagnosis-hero.priority {
  border-left-color: rgba(126, 145, 170, 0.76);
  background: linear-gradient(180deg, rgba(247,250,253,.92), rgba(239,245,249,.76));
}

.analysis-diagnosis-hero.sample {
  border-left-color: rgba(116, 166, 183, 0.78);
  background: linear-gradient(180deg, rgba(244,250,252,.92), rgba(237,247,250,.72));
}

.analysis-diagnosis-hero.stable {
  border-left-color: rgba(120, 178, 132, 0.78);
}

.analysis-diagnosis-hero > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.analysis-diagnosis-hero span,
.analysis-diagnosis-hero .analysis-diagnosis-data {
  color: #708077;
  font-size: 12px;
  font-weight: 750;
}

.analysis-diagnosis-hero strong {
  color: #263b36;
  font-size: 18px;
  font-weight: 900;
}

.analysis-hero-focus {
  display: inline-flex;
  align-items: flex-start;
  position: absolute;
  top: 6px;
  right: 14px;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  max-width: clamp(230px, 34vw, 310px);
  line-height: 1.2;
}

.analysis-hero-focus img {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  box-shadow: none;
}

.analysis-hero-focus span {
  min-width: 8.5em;
  padding-top: 5px;
  color: #263b36;
  font-size: 18px;
  font-weight: 900;
  overflow-wrap: anywhere;
  white-space: normal;
}

.analysis-diagnosis-hero p,
.analysis-diagnosis-hero em {
  margin: 0;
  color: #52635b;
  font-size: 12.5px;
  font-style: normal;
  font-weight: 650;
  line-height: 1.36;
}

@media (max-width: 760px) {
  .analysis-diagnosis-hero {
    padding-right: 14px;
  }

  .analysis-hero-focus {
    position: static;
    margin-top: 4px;
    max-width: 100%;
  }
}

.analysis-key-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.analysis-key-metrics div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(204, 219, 207, 0.42);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(249,253,248,.9), rgba(242,249,241,.72));
}

.analysis-key-metrics div:nth-child(2) {
  background: linear-gradient(180deg, rgba(247,252,255,.9), rgba(238,248,251,.72));
}

.analysis-key-metrics div:nth-child(3) {
  background: linear-gradient(180deg, rgba(255,252,246,.9), rgba(250,245,235,.72));
}

.analysis-key-metrics div:nth-child(4) {
  background: linear-gradient(180deg, rgba(250,248,253,.9), rgba(244,241,249,.72));
}

.analysis-key-metrics span {
  color: #7a8a81;
  font-size: 12px;
  font-weight: 750;
}

.analysis-key-metrics strong {
  color: #263b36;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

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

.analysis-overview-dots {
  margin-top: -2px;
}

.analysis-diagnosis-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(204, 219, 207, 0.46);
  border-radius: 12px;
  color: #52635b;
  background: linear-gradient(180deg, rgba(255,255,251,.78), rgba(248,252,247,.64));
  box-shadow: 0 6px 16px rgba(45, 70, 61, 0.035);
}

.analysis-diagnosis-card.critical {
  border-color: rgba(209, 151, 82, 0.48);
  background: linear-gradient(180deg, rgba(255,249,238,.86), rgba(252,242,222,.68));
}

.analysis-diagnosis-card.priority {
  border-color: rgba(105, 166, 159, 0.44);
  background: linear-gradient(180deg, rgba(242,251,249,.88), rgba(232,246,243,.68));
}

.analysis-diagnosis-card.sample {
  border-color: rgba(116, 166, 183, 0.46);
  background: linear-gradient(180deg, rgba(244,250,252,.88), rgba(236,246,250,.68));
}

.analysis-diagnosis-card.stable {
  border-color: rgba(127, 174, 139, 0.42);
  background: linear-gradient(180deg, rgba(242,251,242,.88), rgba(234,247,235,.68));
}

.analysis-diagnosis-card.empty {
  border-color: rgba(204, 214, 208, 0.44);
  background: rgba(248, 250, 247, 0.68);
}

.analysis-diagnosis-card.subject-tone-math {
  border-color: rgba(209, 151, 82, 0.48);
  background: linear-gradient(180deg, rgba(255,249,238,.88), rgba(252,242,222,.7));
}

.analysis-diagnosis-card.subject-tone-physics {
  border-color: rgba(99, 139, 181, 0.44);
  background: linear-gradient(180deg, rgba(242,248,254,.9), rgba(232,242,250,.7));
}

.analysis-diagnosis-card.subject-tone-chemistry {
  border-color: rgba(92, 164, 145, 0.44);
  background: linear-gradient(180deg, rgba(241,251,248,.9), rgba(231,246,241,.7));
}

.analysis-diagnosis-card.subject-tone-english {
  border-color: rgba(151, 133, 188, 0.42);
  background: linear-gradient(180deg, rgba(248,246,253,.9), rgba(240,236,248,.7));
}

.analysis-diagnosis-card.subject-tone-chinese {
  border-color: rgba(190, 134, 145, 0.4);
  background: linear-gradient(180deg, rgba(253,247,247,.9), rgba(249,237,239,.68));
}

.analysis-diagnosis-card.subject-tone-default {
  border-color: rgba(171, 181, 166, 0.42);
  background: linear-gradient(180deg, rgba(250,251,247,.9), rgba(243,247,240,.68));
}

.analysis-diagnosis-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.analysis-diagnosis-card-head strong {
  color: #2d4d43;
  font-size: 17px;
  font-weight: 900;
}

.analysis-diagnosis-card-head .analysis-subject-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.analysis-diagnosis-card-head .analysis-subject-title img {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  object-fit: contain;
}

.analysis-diagnosis-card-head .analysis-subject-title span {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.analysis-diagnosis-card-head span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #617268;
  background: rgba(255,255,255,.58);
  font-size: 12px;
  font-weight: 850;
}

.analysis-diagnosis-card-head span img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.analysis-diagnosis-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.analysis-diagnosis-metrics div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.analysis-diagnosis-metrics span,
.analysis-diagnosis-tags label {
  color: #7a8a81;
  font-size: 12px;
  font-weight: 800;
}

.analysis-diagnosis-metrics strong {
  color: #263b36;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.analysis-diagnosis-tags {
  display: grid;
  gap: 5px;
}

.analysis-diagnosis-tags div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.analysis-diagnosis-tags span {
  padding: 3px 7px;
  border: 1px solid rgba(201, 214, 197, 0.52);
  border-radius: 999px;
  color: #6d7f75;
  background: rgba(255,255,255,.55);
  font-size: 12px;
  font-weight: 750;
}

.analysis-diagnosis-card p {
  margin: 0;
  color: #607064;
  font-size: 13px;
  line-height: 1.46;
}

.analysis-diagnosis-card p b {
  color: #40544b;
}

.analysis-diagnosis-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.analysis-diagnosis-actions button,
.analysis-next-steps button {
  padding: 6px 11px;
  border: 1px solid rgba(128, 166, 142, 0.26);
  border-radius: 999px;
  color: #4f7a5d;
  background: rgba(248, 252, 247, 0.62);
  font-size: 12px;
  font-weight: 800;
  box-shadow: none;
}

.analysis-diagnosis-actions button.detail {
  color: #5d746c;
  border-color: rgba(142, 164, 154, 0.28);
  background: rgba(249, 251, 249, 0.62);
}

.analysis-diagnosis-actions button.wrong {
  color: #4a7658;
  border-color: rgba(110, 159, 126, 0.3);
  background: rgba(241, 249, 242, 0.66);
}

.analysis-diagnosis-actions button:hover,
.analysis-next-steps button:hover {
  border-color: rgba(105, 151, 122, 0.4);
  background: rgba(239, 248, 239, 0.78);
}

.analysis-diagnosis-actions button.detail:hover {
  border-color: rgba(128, 154, 143, 0.42);
  background: rgba(244, 248, 245, 0.78);
}

.analysis-diagnosis-actions button.wrong:hover {
  border-color: rgba(99, 148, 116, 0.45);
  background: rgba(233, 245, 235, 0.82);
}

.analysis-diagnosis-actions button.ghost {
  color: #8a7248;
  border-color: rgba(214, 184, 124, 0.28);
  background: rgba(255, 252, 243, 0.58);
}

.analysis-diagnosis-actions button.ghost:hover {
  border-color: rgba(204, 169, 98, 0.42);
  background: rgba(255, 248, 232, 0.74);
}

.analysis-next-steps {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(204, 219, 207, 0.44);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,251,.7), rgba(247,252,246,.58));
}

.analysis-next-steps.compact {
  gap: 6px;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(250, 253, 248, 0.62);
}

.analysis-next-steps article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(247, 252, 246, 0.76);
}

.analysis-next-steps.compact article {
  padding: 7px 8px;
  border: 1px solid rgba(206, 222, 210, 0.34);
  background: rgba(250, 253, 248, 0.72);
}

.analysis-next-steps article strong {
  color: #2d4d43;
  font-size: 13px;
  font-weight: 900;
}

.analysis-next-steps article span {
  color: #66766e;
  font-size: 12px;
  line-height: 1.45;
}

.analysis-next-steps article button {
  grid-row: 1 / span 2;
  grid-column: 2;
}

.analysis-next-steps-more {
  display: grid;
  gap: 6px;
}

.analysis-next-steps-more summary {
  width: fit-content;
  cursor: pointer;
  color: #5c7669;
  font-size: 12px;
  font-weight: 850;
}

.analysis-next-steps-more article {
  margin-top: 6px;
}

.mastery-title {
  display: flex;
  align-items: center;
  gap: 7px;
}

.mastery-help-popover {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.mastery-help-popover > button {
  display: grid;
  place-items: center;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  border: 1px solid rgba(183, 204, 190, 0.82);
  border-radius: 999px;
  padding: 0;
  color: #6f8178;
  background: rgba(248, 252, 246, 0.9);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.mastery-help-popover > span {
  position: absolute;
  left: 0;
  top: calc(100% + 7px);
  z-index: 50;
  display: none;
  width: min(300px, 70vw);
  padding: 9px 11px;
  border: 1px solid rgba(204, 219, 207, 0.82);
  border-radius: 12px;
  color: #52635b;
  background: rgba(255, 255, 251, 0.98);
  box-shadow: 0 12px 26px rgba(37, 51, 45, 0.13);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

.mastery-help-popover:hover > span,
.mastery-help-popover:focus-within > span {
  display: block;
}

.analysis-range-tabs {
  display: flex;
  gap: 3px;
  margin-left: auto;
  min-height: 22px;
  align-items: center;
  padding: 2px;
  border: 1px solid rgba(204, 219, 207, 0.7);
  border-radius: 999px;
  background: rgba(248, 252, 246, 0.72);
}

.analysis-range-tabs button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #6a7a71;
  background: transparent;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  box-shadow: none;
}

.analysis-range-tabs button.active {
  color: #fffffb;
  background: #5f9b81;
}

.analysis-card > span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.analysis-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.analysis-conclusion {
  padding: 11px 13px;
  border-left: 3px solid #6aa7a0;
  border-radius: 8px;
  color: var(--home-heading, #40544b);
  background: #eef8f5;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.48;
}

.analysis-advice-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 9px 11px;
  border: 1px solid rgba(204, 219, 207, 0.44);
  border-radius: 8px;
  background: rgba(255, 250, 236, 0.72);
}

.analysis-advice-row span {
  padding: 2px 7px;
  border-radius: 999px;
  color: #8a7041;
  background: rgba(255, 243, 210, 0.92);
  font-size: 12px;
  font-weight: 900;
}

.analysis-advice-row p {
  margin: 0;
  color: #5f6f65;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.42;
}

.analysis-overview > div,
.analysis-side > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--home-soft-border, rgba(75, 98, 88, 0.16));
  border-radius: 8px;
  background: rgba(255, 255, 251, 0.72);
}

.analysis-overview span,
.analysis-section-title,
.analysis-card > span {
  color: var(--home-muted, #607064);
  font-size: 14px;
}

.analysis-overview strong {
  display: block;
  min-height: 0;
  margin: 4px 0;
  color: #263b36;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
}

.analysis-overview p {
  margin: 0;
  color: #66766e;
  font-size: 13.5px;
  line-height: 1.38;
}

.analysis-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(170px, 0.75fr);
  gap: 12px;
  align-items: stretch;
  min-width: 0;
}

.analysis-section-title {
  margin-bottom: 8px;
  font-weight: 760;
}

.chapter-bars,
.mastery-matrix {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  min-height: 230px;
  padding: 12px;
  border: 1px solid var(--home-soft-border, rgba(75, 98, 88, 0.16));
  border-radius: 8px;
  background: rgba(255, 255, 251, 0.58);
}

.mastery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  min-width: 0;
}

.mastery-card {
  display: grid;
  gap: 8px;
  min-height: 118px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--mastery-border, #dbe5d8) 68%, transparent);
  border-radius: 8px;
  background: var(--mastery-bg, #fbfdf8);
}

.mastery-card.mastery-tone-1 {
  --mastery-bg: #f3faf4;
  --mastery-border: #c9ddcc;
  --mastery-fill: #7fae8b;
}

.mastery-card.mastery-tone-2 {
  --mastery-bg: #f3f8fb;
  --mastery-border: #c7dce4;
  --mastery-fill: #74a6b7;
}

.mastery-card.mastery-tone-3 {
  --mastery-bg: #fff8ed;
  --mastery-border: #ead5ad;
  --mastery-fill: #d4a55b;
}

.mastery-card.mastery-tone-4 {
  --mastery-bg: #f8f4fb;
  --mastery-border: #d8cde3;
  --mastery-fill: #9b84b5;
}

.mastery-card.good {
  border-color: var(--mastery-border, #c8ddca);
  background: var(--mastery-bg, #f2faf2);
}

.mastery-card.watch {
  box-shadow: inset 0 0 0 1px rgba(214, 168, 79, 0.22);
}

.mastery-card.risk {
  box-shadow: inset 0 0 0 1px rgba(210, 138, 116, 0.28);
}

.mastery-card-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.mastery-card-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--home-heading, #40544b);
  font-size: 14px;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mastery-card-head span {
  color: #718178;
  font-size: 15px;
  font-weight: 850;
}

.mastery-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  color: var(--home-muted, #607064);
  font-size: 13px;
}

.mastery-meter {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(96, 112, 100, 0.14);
}

.mastery-meter div {
  height: 100%;
  border-radius: inherit;
  background: var(--mastery-fill, #8fb49b);
}

.mastery-card.watch .mastery-meter div {
  background: linear-gradient(90deg, var(--mastery-fill, #d6a84f), #d6a84f);
}

.mastery-card.risk .mastery-meter div {
  background: linear-gradient(90deg, var(--mastery-fill, #d28a74), #d28a74);
}

.chapter-bar-row {
  display: grid;
  grid-template-columns: minmax(70px, 0.8fr) minmax(100px, 1.4fr) auto;
  gap: 8px;
  align-items: center;
  color: #607064;
  font-size: 13px;
}

.chapter-bar-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chapter-bar-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe9da;
}

.chapter-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: #8fb49b;
}

.mini-trend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26px, 1fr));
  gap: 6px;
  align-items: end;
  min-height: 82px;
  padding: 8px;
  border: 1px solid rgba(75, 98, 88, 0.18);
  border-radius: 7px;
  background: rgba(255, 255, 251, 0.72);
}

.analysis-side {
  display: grid;
  gap: 10px;
  grid-template-rows: minmax(120px, auto);
  min-width: 0;
}

.mini-trend-day {
  display: grid;
  gap: 4px;
  align-items: end;
  justify-items: center;
}

.mini-trend-day div {
  width: 12px;
  border-radius: 999px 999px 2px 2px;
  background: #dcc17f;
}

.mini-trend-day span {
  color: #607064;
  font-size: 11px;
}

.stability-panel {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(75, 98, 88, 0.12);
}

.stability-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  color: var(--home-muted, #607064);
  font-size: 13px;
}

.stability-head strong {
  color: var(--home-heading, #40544b);
  font-size: 13px;
  font-weight: 600;
}

.stability-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(96, 112, 100, 0.14);
}

.stability-track div {
  height: 100%;
  border-radius: inherit;
  background: #d6a84f;
}

.stability-panel.low .stability-track div {
  background: #d28a74;
}

.stability-panel.medium .stability-track div {
  background: #d6a84f;
}

.stability-panel.stable .stability-track div {
  background: #8fb49b;
}

.stability-panel p {
  margin: 0;
  color: var(--home-muted, #607064);
  font-size: 12px;
  line-height: 1.45;
}

.wrong-reason-chart {
  display: grid;
  gap: 8px;
  min-height: 120px;
}

.wrong-reason-row {
  display: grid;
  grid-template-columns: minmax(58px, 0.84fr) minmax(72px, 1fr) minmax(26px, auto);
  gap: 7px;
  align-items: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 26px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 2px 4px;
  color: #687a70;
  background: transparent;
  font-size: 13px;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
}

.wrong-reason-row:hover {
  border-color: rgba(145, 180, 160, 0.28);
  color: var(--home-heading, #40544b);
  background: rgba(245, 250, 243, 0.78);
}

.wrong-reason-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wrong-reason-row div {
  min-width: 0;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--wrong-track, rgba(96, 112, 100, 0.14));
}

.wrong-reason-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--wrong-fill, #c9b56e);
}

.wrong-reason-row.primary i {
  background: var(--wrong-fill, #d6a187);
}

.wrong-reason-row.wrong-tone-1 {
  --wrong-track: rgba(127, 174, 139, 0.18);
  --wrong-fill: #7fae8b;
}

.wrong-reason-row.wrong-tone-2 {
  --wrong-track: rgba(116, 166, 183, 0.18);
  --wrong-fill: #74a6b7;
}

.wrong-reason-row.wrong-tone-3 {
  --wrong-track: rgba(212, 165, 91, 0.2);
  --wrong-fill: #d4a55b;
}

.wrong-reason-row.wrong-tone-4 {
  --wrong-track: rgba(155, 132, 181, 0.18);
  --wrong-fill: #9b84b5;
}

.wrong-reason-row.wrong-tone-5 {
  --wrong-track: rgba(199, 122, 107, 0.18);
  --wrong-fill: #c77a6b;
}

.wrong-reason-row.wrong-tone-6 {
  --wrong-track: rgba(116, 151, 109, 0.18);
  --wrong-fill: #74976d;
}

.wrong-reason-row strong {
  min-width: 22px;
  max-width: 34px;
  color: var(--home-heading, #40544b);
  font-size: 13px;
  font-weight: 780;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.wrong-reason-summary {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(75, 98, 88, 0.12);
}

.wrong-reason-summary div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--home-muted, #607064);
  font-size: 13.5px;
}

.wrong-reason-summary strong {
  color: var(--home-heading, #40544b);
  font-size: 13.5px;
  font-weight: 780;
}

.wrong-reason-summary p {
  margin: 0;
  color: #75857d;
  font-size: 13px;
  line-height: 1.45;
}

.subject-analysis p {
  margin-top: 0;
  color: var(--home-muted, #607064);
  font-size: 13.5px;
  line-height: 1.46;
}

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

.planner-task-today {
  grid-template-columns: auto 1fr;
  cursor: pointer;
}

.task-list .planner-task-today {
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
}

.task-list .planner-task-today input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
}

.today-plan-task-body {
  min-width: 0;
}

.today-plan-task-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.today-plan-task-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-plan-task-amount {
  flex: 0 0 auto;
  padding: 2px 8px;
  border: 1px solid rgba(151, 185, 137, 0.58);
  border-radius: 999px;
  background: #f7fbf0;
  color: #55755f;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.planner-task-today.important {
  grid-template-columns: 1fr auto;
  border-color: #d9b76d;
  background: #fff8e8;
  cursor: default;
}

.planner-task-today.completed {
  color: #728178;
  background: #eef5ea;
}

.planner-task-today.completed strong {
  text-decoration: line-through;
}

.weekly-planner {
  margin-top: 12px;
}

.home-section-plan > .weekly-planner {
  margin-top: 16px;
}

.planner-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.planner-header h2 {
  margin: 4px 0 0;
  color: #263b36;
  font-size: 20px;
  line-height: 1.25;
}

.planner-profile-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.planner-profile-chip {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(111, 167, 127, 0.42);
  border-radius: 999px;
  background: #f5fbf5;
  color: #315f43;
  font-size: 13px;
  font-weight: 760;
  white-space: nowrap;
}

.planner-profile-actions button {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 13px;
}

.planner-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
}

.planner-subject-list,
.planner-day-grid,
.planner-task-pool,
.planner-day-tasks {
  display: grid;
  gap: 10px;
}

.planner-quick-add {
  display: grid;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(211, 224, 211, 0.48);
  border-radius: 15px;
  background: rgba(247, 251, 244, 0.76);
}

.planner-general-grid {
  display: grid;
  grid-template-columns: minmax(92px, 0.75fr) minmax(180px, 1.7fr) minmax(72px, 0.55fr) minmax(94px, 0.7fr) minmax(102px, 0.75fr) auto;
  gap: 8px;
  align-items: center;
}

.planner-precise-grid {
  display: grid;
  grid-template-columns: minmax(154px, 0.95fr) minmax(118px, 0.8fr) minmax(142px, 1fr) minmax(160px, 1.2fr) minmax(104px, 0.72fr) minmax(76px, 0.48fr) minmax(104px, 0.72fr) auto;
  gap: 9px;
  align-items: center;
}

.planner-mode-switch,
.planner-type-switch {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.planner-mode-switch button,
.planner-type-switch button {
  min-height: 32px;
  border-color: rgba(211, 224, 211, 0.7);
  background: rgba(255, 255, 251, 0.74);
  color: #52645b;
}

.planner-mode-switch button.active,
.planner-type-switch button.active {
  border-color: rgba(91, 143, 116, 0.78);
  background: #e8f4e8;
  color: #2e5b47;
}

.planner-quick-add input,
.planner-quick-add select {
  min-width: 0;
  width: 100%;
}

.planner-quick-add select,
.planner-quick-add input {
  border-color: rgba(202, 218, 204, 0.78);
  background: rgba(255, 255, 251, 0.82);
}

.planner-primary-action {
  min-width: 74px;
  border-color: rgba(91, 143, 116, 0.72);
  color: #2e5b47;
  background: #e8f4e8;
  box-shadow: 0 6px 14px rgba(59, 103, 78, 0.08);
}

.planner-primary-action:hover {
  border-color: rgba(77, 127, 101, 0.88);
  color: #234d3a;
  background: #dff0df;
}

.planner-quick-add .planner-amount-input {
  text-align: right;
}

.planner-quick-add .planner-placeholder-select:invalid {
  color: #8d9a91;
}

.planner-quick-add .planner-placeholder-select option {
  color: #3c4c44;
}

.planner-subject-summary {
  display: grid;
  gap: 8px;
}

.planner-subject-card,
.planner-day-card {
  padding: 11px;
  border: 1px solid rgba(211, 224, 211, 0.46);
  border-radius: 15px;
  background: rgba(255, 255, 251, 0.68);
  box-shadow: none;
}

.planner-subject-card {
  display: grid;
  gap: 10px;
}

.planner-subject-card.compact {
  gap: 8px;
  padding: 9px 10px;
}

.planner-subject-head,
.planner-task-row,
.planner-day-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.planner-subject-head strong {
  color: var(--home-heading, #40544b);
  font-size: 13px;
  font-weight: 600;
}

.planner-subject-head span {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--home-muted, #607064);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planner-subject-head input,
.planner-task-row input,
.planner-task-row select {
  min-width: 0;
}

.planner-subject-name {
  flex: 1 1 130px;
  font-weight: 700;
}

.planner-minutes {
  width: 76px;
}

.planner-topic {
  width: 100%;
}

.planner-task-row {
  flex-wrap: wrap;
  padding: 8px;
  border-radius: 7px;
  background: #f5f8f1;
}

.planner-task-card {
  position: relative;
  cursor: grab;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, opacity .16s ease;
}

.planner-task-card:active {
  cursor: grabbing;
}

.planner-task-card.dragging-task {
  opacity: 0.62;
  box-shadow: 0 8px 18px rgba(45, 70, 61, 0.10);
}

.planner-task-card.clickable-task {
  cursor: pointer;
}

.planner-task-card.clickable-task:hover {
  border-color: rgba(91, 143, 116, 0.56);
  background: rgba(240, 249, 238, 0.9);
}

.task-list .planner-task-card {
  border-color: rgba(211, 224, 211, 0.48);
  background: rgba(255, 255, 251, 0.78);
}

.planner-task-row.compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
}

.planner-task-row.compact span {
  min-width: 0;
  overflow: hidden;
  color: var(--home-heading, #40544b);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planner-task-row.compact small {
  color: var(--home-muted, #607064);
  font-size: 12px;
}

.planner-task-name {
  flex: 1 1 180px;
}

.planner-days {
  min-width: 0;
  order: 1;
}

.planner-subjects {
  order: 2;
}

.planner-day-grid {
  grid-template-columns: repeat(7, minmax(118px, 1fr));
  align-items: stretch;
}

.planner-day-card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: 174px;
  background:
    linear-gradient(180deg, rgba(255, 255, 251, 0.90), rgba(250, 253, 247, 0.72)),
    radial-gradient(circle at 20% 0%, rgba(123, 166, 141, 0.10), transparent 54%);
}

.planner-day-card.today {
  border-color: rgba(126, 170, 142, 0.72);
  background:
    linear-gradient(180deg, rgba(247, 253, 244, 0.96), rgba(255, 253, 248, 0.84)),
    radial-gradient(circle at 18% 0%, rgba(111, 167, 127, 0.18), transparent 58%);
  box-shadow: 0 8px 18px rgba(54, 92, 70, 0.09);
}

.planner-day-card.empty-day {
  color: #7a887f;
  background:
    linear-gradient(180deg, rgba(255, 255, 251, 0.62), rgba(247, 250, 244, 0.48)),
    radial-gradient(circle at 18% 0%, rgba(150, 169, 155, 0.08), transparent 58%);
}

.planner-day-card.has-tasks:not(.today) {
  background:
    linear-gradient(180deg, rgba(255, 255, 251, 0.92), rgba(248, 252, 246, 0.76)),
    radial-gradient(circle at 18% 0%, rgba(214, 168, 79, 0.10), transparent 58%);
}

.planner-day-card.drag-over,
.tomorrow-card:has(.tomorrow-preview.drag-over),
.task-list.drag-over,
.tomorrow-preview.drag-over {
  border-color: rgba(79, 143, 114, 0.72);
  background: rgba(238, 247, 236, 0.94);
  box-shadow: inset 0 0 0 2px rgba(79, 143, 114, 0.12), 0 8px 18px rgba(54, 92, 70, 0.08);
}

.task-list {
  min-height: 46px;
  border-radius: 12px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.tomorrow-preview {
  min-height: 46px;
  border-radius: 12px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.planner-day-head > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.planner-day-head strong {
  color: #263b36;
  line-height: 1.2;
}

.planner-day-head small {
  color: #7a887f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.planner-day-meta {
  display: grid;
  flex: 0 0 auto;
  gap: 1px;
  justify-items: end;
  text-align: right;
}

.planner-day-meta span {
  color: #49675b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.planner-day-meta small {
  color: #607064;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.planner-day-tasks label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
  align-items: start;
  position: relative;
  padding: 7px 8px;
  border: 1px solid rgba(211, 224, 211, 0.32);
  border-radius: 10px;
  background: rgba(245, 248, 241, 0.72);
  color: #40544b;
  font-size: 13px;
}

.planner-task-type {
  display: inline-flex;
  margin-right: 5px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(228, 238, 224, 0.9);
  color: #52645b;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.planner-defer-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid rgba(177, 142, 68, 0.42);
  border-radius: 50%;
  background: #fff5d8;
  color: #7a5a22;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(90, 70, 28, 0.12);
}

.planner-task-actions,
.today-task-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.today-task-actions button,
.planner-task-actions button {
  min-height: 26px;
  padding: 3px 7px;
  font-size: 12px;
}

.planner-day-tasks label.completed {
  color: #728178;
  background: #eaf3e6;
}

.planner-day-tasks label.completed span {
  text-decoration: line-through;
}

.planner-subject-card button[data-plan-action="remove-subject"],
.planner-subject-card button[data-plan-action="remove-task"],
.planner-day-card button[data-remove-day-task] {
  border-color: transparent;
  color: #8b6c64;
  background: rgba(255, 248, 245, 0.58);
}

.planner-subject-card button[data-plan-action="remove-subject"]:hover,
.planner-subject-card button[data-plan-action="remove-task"]:hover,
.planner-day-card button[data-remove-day-task]:hover {
  border-color: #d4a796;
  color: #7a4236;
  background: #fff0eb;
}

.planner-task-actions {
  align-self: start;
}

.planner-task-remove {
  display: inline-grid;
  width: 22px;
  height: 22px;
  min-height: 22px;
  place-items: center;
  border-radius: 50%;
  padding: 0;
  font-size: 15px;
  line-height: 1;
}

.planner-subject-card button[data-plan-action="add-task"],
.planner-task-today.important button,
button[data-open-wrong-review],
button[data-task-open-wrong] {
  border-color: rgba(214, 188, 115, 0.48);
  color: #6e5424;
  background: rgba(255, 248, 232, 0.62);
}

.planner-subject-card button[data-plan-action="add-task"]:hover,
.planner-task-today.important button:hover,
button[data-open-wrong-review]:hover,
button[data-task-open-wrong]:hover {
  border-color: #c7a44f;
  color: #5f4a23;
  background: #fff1d1;
}

.planner-day-tasks small {
  display: block;
  margin-top: 2px;
  color: #607064;
}

.planner-wrong-task {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid #d9b76d;
  border-radius: 7px;
  background: #fff8e8;
  color: #5f4a23;
  font-size: 13px;
}

.tomorrow-preview {
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
}

.tomorrow-item {
  padding: 8px;
  border: 1px solid rgba(211, 224, 211, 0.42);
  border-radius: 10px;
  background: rgba(255, 255, 251, 0.72);
}

.tomorrow-item strong {
  color: #263b36;
}

.tomorrow-item p {
  margin: 4px 0 0;
  color: #607064;
  font-size: 13px;
}

.planner-empty {
  color: #607064;
  font-size: 13px;
}

.quality-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.pet-hint-quality {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.pet-hint-review-list {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.pet-hint-review-item {
  padding: 12px;
  border: 1px solid #d4ded8;
  border-radius: 8px;
  background: #fbfcfa;
}

.pet-hint-review-item p {
  margin: 8px 0;
  color: #40544d;
  font-size: 13px;
  line-height: 1.6;
}

.pet-hint-preview-lines {
  display: grid;
  gap: 6px;
  color: #4c635a;
  font-size: 13px;
}

.pet-hint-preview-lines strong {
  color: #243a34;
  font-weight: 700;
}

.quality-list {
  display: grid;
  gap: 12px;
}

.quality-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid #d1ddcd;
  border-left-width: 4px;
  border-radius: 8px;
  background: #fbfdf8;
}

.quality-item h2 {
  margin: 8px 0 6px;
  color: #263b36;
  font-size: 16px;
}

.quality-item p {
  margin: 0;
  color: #4b6258;
}

.quality-evidence,
.quality-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.quality-refs {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.quality-refs span {
  min-width: 0;
  color: #607064;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.severity-high {
  border-left-color: #b64c4c;
}

.severity-medium {
  border-left-color: #c48a35;
}

.severity-low {
  border-left-color: #6c8bba;
}

.task-item {
  grid-template-columns: 1fr;
}

.task-item strong,
.achievement-item strong {
  color: #263b36;
}

.achievement-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255, 255, 255, 0.76);
  border-radius: 999px;
  color: #ffffff;
  background: radial-gradient(circle at 35% 25%, #f7fbf8 0%, #6f62a8 64%, #4f467a 100%);
  box-shadow: 0 6px 14px rgba(37, 51, 45, 0.12), inset 0 0 0 1px rgba(75, 98, 88, 0.18);
  font-weight: 700;
}

.home-achievement-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(196, 213, 198, 0.8);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.32) 58%, transparent 59%),
    linear-gradient(135deg, rgba(238, 247, 236, 0.86), rgba(255, 253, 246, 0.78));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 6px 14px rgba(45, 70, 61, 0.08);
}

.home-achievement-icon img {
  display: block;
  width: 90%;
  height: 90%;
  object-fit: contain;
  object-position: center;
}

.home-achievement-icon.near-lit img {
  opacity: 0.74;
  filter: saturate(0.82) brightness(1.04);
}

.home-achievement-icon.lit {
  border-color: rgba(222, 188, 91, 0.58);
  background: radial-gradient(circle, #fffdf7 0 48%, rgba(255, 235, 174, 0.74) 49%, rgba(241, 250, 239, 0.62) 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.82), 0 8px 18px rgba(170, 139, 54, 0.14);
}

.achievement-item.near-lit {
  border-color: rgba(186, 208, 184, 0.72);
  background: rgba(250, 253, 247, 0.82);
}

.achievement-wall-panel {
  margin-top: 0;
  padding: 16px;
  border: 2px solid #d7e1d2;
  border-radius: 8px;
  background: #fffefa;
  box-shadow: 0 10px 24px rgba(37, 51, 45, 0.09);
}

.achievement-card-head,
.achievement-card-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.achievement-wall-header {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(150px, 0.42fr) minmax(320px, 1fr);
  gap: 14px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid #d4e1d2;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fcf6 100%);
}

.achievement-overview-copy {
  display: grid;
  align-content: center;
}

.achievement-overview-copy > span {
  color: #31483f;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
}

.achievement-wall-header h2 {
  margin: 4px 0 0;
  color: #1f3f3b;
  font-size: 32px;
}

.achievement-wall-header p {
  margin-top: 6px;
  color: #607064;
  font-size: 13px;
}

.achievement-completion {
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid #d7e1d2;
  border-radius: 8px;
  background: #fbfdf8;
}

.achievement-completion span,
.achievement-stat-card span {
  color: #607064;
  font-size: 12px;
  font-weight: 700;
}

.achievement-completion strong {
  color: #263b36;
  font-size: 24px;
}

#achievementWallStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(64px, 1fr));
  gap: 8px;
}

.achievement-stat-card {
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 64px;
  padding: 8px;
  border: 1px solid #d7e1d2;
  border-radius: 8px;
  background: #fbfdf8;
}

.achievement-stat-card strong {
  color: #263b36;
  font-size: 20px;
}

.achievement-stat-card.attention {
  border-color: #d6b65f;
  background: #fff7df;
}

#achievementFilters {
  margin-top: 14px;
  padding: 10px;
  border: 1px solid #dbe5d8;
  border-radius: 8px;
  background: #fbfdf8;
}

#achievementFilters button {
  min-height: 32px;
  border-radius: 999px;
  padding: 0 12px;
}

#achievementFilters button.active {
  border-color: #6f9f85;
  color: #ffffff;
  background: #4f8f72;
}

.achievement-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.achievement-section {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
}

.achievement-section + .achievement-section {
  margin-top: 8px;
}

.achievement-section-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding-top: 6px;
  border-top: 1px solid rgba(75, 98, 88, 0.16);
}

.achievement-section-head h3 {
  margin: 0;
  color: #263b36;
  font-size: 17px;
}

.achievement-section-head span {
  color: #607064;
  font-size: 13px;
}

.achievement-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.achievement-wall-card {
  position: relative;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 12px;
  align-items: start;
  min-height: 250px;
  padding: 14px;
  border: 1px solid rgba(75, 98, 88, 0.18);
  border-radius: 8px;
  background: #fffffb;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.achievement-wall-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(37, 51, 45, 0.09);
}

.achievement-wall-card.unlocked {
  border-color: rgba(111, 167, 127, 0.55);
  background: linear-gradient(180deg, #f5fbf2 0%, #fffffb 100%);
}

.achievement-wall-card.equipped-title {
  border-width: 2px;
  background: linear-gradient(180deg, #fffdf5 0%, #fffffb 100%);
  box-shadow: 0 10px 22px rgba(95, 74, 35, 0.12);
}

.achievement-wall-card.equipped-title.achievement-title-bronze {
  border-color: #c49a72;
}

.achievement-wall-card.equipped-title.achievement-title-silver {
  border-color: #b6bec5;
}

.achievement-wall-card.equipped-title.achievement-title-gold {
  border-color: #d6b65f;
}

.achievement-wall-card.equipped-title.achievement-title-platinum,
.achievement-wall-card.equipped-title.achievement-title-glory {
  border-color: #abc7d7;
  box-shadow: 0 10px 22px rgba(80, 120, 140, 0.13), 0 0 0 3px rgba(168, 207, 220, 0.12);
}

.achievement-wall-card.equipped-title.achievement-title-diamond,
.achievement-wall-card.equipped-title.achievement-title-king {
  border-color: #a8b8de;
  box-shadow: 0 10px 22px rgba(68, 83, 132, 0.13), 0 0 0 3px rgba(158, 178, 220, 0.13);
}

.equipped-ribbon {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.achievement-wall-card.pending_unlock {
  border-color: rgba(214, 168, 79, 0.7);
  background: linear-gradient(180deg, #fff7df 0%, #fffffb 100%);
}

.achievement-wall-card.in_progress {
  background: #fffffb;
}

.achievement-wall-card.not_started {
  background: #fbfbf7;
  opacity: 0.82;
}

.achievement-wall-card.hidden-achievement {
  border-style: dashed;
}

.achievement-wall-card.hidden-locked {
  background: linear-gradient(180deg, #fbfbf7 0%, #f4f7f2 100%);
}

.achievement-wall-card.hidden-locked .achievement-icon {
  color: #7c8b84;
  background: #eef2eb;
  filter: blur(0.2px);
}

.achievement-wall-card.hidden-locked[data-hidden-state="hidden"] .achievement-icon {
  opacity: 0.72;
}

.hidden-title-chip {
  border-color: #c4d0c8;
  color: #52635b;
  background: #f1f5ee;
}

.hidden-achievement-clue {
  display: inline-flex;
  width: fit-content;
  margin-top: 8px;
  padding: 5px 9px;
  border: 1px dashed #c2d0c6;
  border-radius: 999px;
  color: #607064;
  background: #f7faf4;
  font-size: 12px;
  font-weight: 800;
}

.hidden-achievement-guide {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid #c9d9d0;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f5faf3 100%);
}

.hidden-achievement-guide strong {
  color: #263b36;
}

.hidden-achievement-guide p {
  margin-top: 4px;
  color: #607064;
  font-size: 13px;
}

.hidden-guide-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.hidden-guide-steps span {
  padding: 5px 9px;
  border: 1px solid #d6e2d2;
  border-radius: 999px;
  color: #52635b;
  background: #fffffb;
  font-size: 12px;
  font-weight: 800;
}

.achievement-wall-card.equipped-title .achievement-icon {
  box-shadow: 0 6px 14px rgba(37, 51, 45, 0.14), 0 0 0 3px rgba(214, 182, 95, 0.16);
}

.achievement-wall-card p {
  margin: 6px 0 8px;
  color: #607064;
  font-size: 13px;
  line-height: 1.45;
}

.achievement-card-head span,
.achievement-card-foot {
  color: #607064;
  font-size: 12px;
}

.achievement-card-head strong {
  color: #263b36;
  font-size: 16px;
}

.achievement-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.achievement-progress-row span {
  color: #607064;
  font-size: 12px;
  font-weight: 700;
}

.achievement-state-pill {
  display: inline-flex;
  width: fit-content;
  margin-top: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef3ea;
  color: #4f6759;
  font-size: 12px;
  font-weight: 700;
}

.achievement-wall-card.equipped-title .achievement-state-pill {
  border: 1px solid #d6b65f;
  background: #fff4d4;
  color: #73551d;
}

.wearable-title-line {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-top: 7px;
  color: #607064;
  font-size: 12px;
}

.achievement-wall-card.unlocked .achievement-state-pill {
  background: #e1f0e4;
  color: #3f7652;
}

.achievement-wall-card.pending_unlock .achievement-state-pill {
  background: #fff0c2;
  color: #775a1f;
}

.achievement-card-foot {
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 7px;
}

.badge-attention {
  border-color: #d6a84f;
  background: #fff4d8;
  color: #6e5424;
}

.achievement-claim-notice {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #d6b65f;
  border-radius: 8px;
  background: #fff7df;
  color: #5f4a23;
}

.achievement-claim-notice p {
  margin-top: 4px;
  color: #806a32;
  font-size: 13px;
}

.claim-medal {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #d6b65f;
  border-radius: 999px;
  color: #73551d;
  background: #fff0c2;
  font-weight: 800;
}

.achievement-claim-notice button,
.claim-button {
  border-color: #d6a84f;
  color: #6e5424;
  background: #fff4d8;
}

.achievement-dialog {
  width: min(560px, calc(100vw - 28px));
  padding: 0;
  border: 1px solid #d7e1d2;
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: 0 20px 60px rgba(37, 51, 45, 0.24);
}

.achievement-dialog::backdrop {
  background: rgba(37, 51, 45, 0.32);
}

#achievementDetailContent {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.achievement-dialog-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}

.achievement-dialog-head h2 {
  margin: 2px 0 0;
  color: #263b36;
  font-size: 22px;
}

.achievement-dialog-head span,
.achievement-detail-grid span,
.achievement-detail-time {
  color: #607064;
  font-size: 13px;
}

.achievement-detail-progress {
  display: grid;
  gap: 8px;
}

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

.achievement-detail-grid > div,
.achievement-detail-note {
  padding: 10px;
  border: 1px solid rgba(75, 98, 88, 0.16);
  border-radius: 7px;
  background: #fffffb;
}

.achievement-detail-grid strong {
  display: block;
  margin-top: 3px;
  color: #263b36;
}

.achievement-detail-note {
  border-color: #d6a84f;
  background: #fff8e8;
  color: #5f4a23;
}

.achievement-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.achievement-toast {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(340px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid #c9d9d0;
  border-radius: 8px;
  background: rgba(255, 255, 251, 0.98);
  box-shadow: 0 14px 30px rgba(37, 51, 45, 0.14);
}

.achievement-toast.hidden {
  display: none;
}

.achievement-toast-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #d6b65f;
  border-radius: 999px;
  color: #73551d;
  background: #fff4d4;
  font-weight: 900;
}

.achievement-toast span {
  color: #607064;
  font-size: 12px;
  font-weight: 800;
}

.achievement-toast strong {
  display: block;
  margin-top: 2px;
  color: #263b36;
  font-size: 14px;
}

.achievement-toast p {
  margin-top: 2px;
  color: #6b531d;
  font-size: 12px;
}

.achievement-unlock-dialog {
  width: min(620px, 78vw);
  max-height: 70vh;
  padding: 0;
  border: 1px solid #d7e1d2;
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: 0 24px 70px rgba(25, 38, 34, 0.3);
  overflow: hidden;
}

.achievement-unlock-dialog::backdrop {
  background: rgba(37, 51, 45, 0.38);
}

.achievement-unlock-content {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  max-height: 70vh;
  padding: 24px 24px 20px;
  overflow: auto;
  text-align: center;
  background: radial-gradient(circle at 50% 28%, rgba(255, 244, 212, 0.82), rgba(255, 253, 248, 0.96) 44%, #fffdf8 100%);
}

.achievement-unlock-close {
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: 34px;
  min-height: 34px;
  border-color: #d9e4d5;
  color: #52635b;
  background: #fffffb;
}

.achievement-unlock-kicker {
  color: #6b531d;
  font-size: 13px;
  font-weight: 900;
}

.achievement-unlock-medal {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin-top: 4px;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: #73551d;
  background: #fff4d4;
  font-size: 34px;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(95, 74, 35, 0.16), 0 0 0 10px rgba(214, 182, 95, 0.12);
  animation: achievementMedalPop 0.72s cubic-bezier(.2, .9, .2, 1) both;
}

.achievement-unlock-content h2 {
  margin: 4px 0 0;
  color: #263b36;
  font-size: 28px;
}

.achievement-unlock-level {
  padding: 4px 10px;
  border: 1px solid #d6b65f;
  border-radius: 999px;
  color: #73551d;
  background: #fff4d4;
  font-size: 13px;
  font-weight: 900;
}

.achievement-unlock-content p {
  max-width: 460px;
  color: #52635b;
  font-size: 14px;
  line-height: 1.6;
}

.achievement-unlock-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
}

.achievement-unlock-rewards span {
  padding: 5px 9px;
  border: 1px solid #d6e2d2;
  border-radius: 999px;
  color: #40544b;
  background: #f8fbf4;
  font-size: 13px;
  font-weight: 800;
}

.achievement-unlock-content > button[data-close-achievement-unlock] {
  min-height: 44px;
  margin-top: 4px;
  padding: 0 18px;
}

@keyframes achievementMedalPop {
  0% {
    opacity: 0;
    transform: scale(0.72) translateY(10px);
  }
  70% {
    opacity: 1;
    transform: scale(1.06) translateY(0);
  }
  100% {
    transform: scale(1);
  }
}

.achievement-icon.bronze {
  background: radial-gradient(circle at 35% 25%, #fff7ec 0%, #d8a66e 58%, #8f5b2d 100%);
  color: #7a4e2b;
}

.achievement-icon.silver {
  background: radial-gradient(circle at 35% 25%, #ffffff 0%, #cbd5dc 58%, #71808b 100%);
  color: #465663;
}

.achievement-icon.gold {
  background: radial-gradient(circle at 35% 25%, #fff9dd 0%, #e1bb56 58%, #927122 100%);
  color: #8a6d2f;
}

.achievement-icon.diamond {
  background: radial-gradient(circle at 35% 25%, #ffffff 0%, #b8ddd4 58%, #5f8e8b 100%);
  color: #2f6f73;
}

.achievement-icon.glory,
.achievement-icon.platinum {
  background: radial-gradient(circle at 35% 25%, #ffffff 0%, #b6c8f5 58%, #536da9 100%);
  color: #365aa8;
}

.achievement-icon.king {
  background: radial-gradient(circle at 35% 25%, #fff8dd 0%, #d6a84f 42%, #8352a8 100%);
  color: #46245f;
}

.wrong-review-panel {
  margin-top: 16px;
  padding: 14px;
  border: 2px solid #d7e1d2;
  border-radius: 8px;
  background: #fffdf6;
  box-shadow: 0 10px 24px rgba(37, 51, 45, 0.09);
}

.wrong-review-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.wrong-review-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
  padding: 10px;
  border: 1px solid rgba(75, 98, 88, 0.18);
  border-radius: 8px;
  background: #fbfdf8;
}

.wrong-review-filters .subject-tabs {
  margin: 0;
}

.wrong-review-filters label {
  display: grid;
  gap: 4px;
  min-width: 150px;
  color: #607064;
  font-size: 13px;
}

.activity-list .activity-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid transparent;
  padding: 8px 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.activity-list .activity-link.has-thumbnail {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  padding-left: 8px;
}

.activity-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 34px;
  overflow: hidden;
  border: 1px solid rgba(185, 204, 193, 0.66);
  border-radius: 5px;
  background: rgba(248, 251, 245, 0.88);
  box-shadow: 0 3px 7px rgba(52, 69, 58, 0.08);
}

.activity-thumb.english {
  width: 34px;
  height: 26px;
}

.activity-thumb.activity-thumb-english-cover {
  width: 38px;
  height: 48px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: 0 7px 16px rgba(42, 56, 49, 0.13);
}

.activity-english-shelf-cover {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 5px 4px 5px 6px;
  border-radius: 8px;
  color: #fffaf0;
  background:
    radial-gradient(circle at 76% 16%, rgba(255, 241, 176, 0.72), transparent 20%),
    linear-gradient(150deg, #f8d779 0%, #78c5b2 38%, #216f76 70%, #123e5c 100%);
}

.activity-english-shelf-cover::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: rgba(20, 20, 20, 0.16);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.16);
}

.activity-english-shelf-cover.ted {
  background: linear-gradient(160deg, #151515 0%, #272727 58%, #d92d24 100%);
}

.activity-english-shelf-cover.ssp {
  background: linear-gradient(160deg, #e84132 0%, #b4372b 58%, #7f2a24 100%);
}

.activity-english-shelf-cover.china-daily {
  background: linear-gradient(160deg, #f7f2e8 0%, #dce9ef 58%, #b7282e 100%);
}

.activity-english-shelf-cover.full-cover {
  padding: 0;
  background: #efe6d3;
}

.activity-english-shelf-cover-image {
  position: relative;
  z-index: 1;
  display: block;
  user-select: none;
  pointer-events: none;
}

.activity-english-shelf-cover-image.logo {
  width: 86%;
  max-height: 20px;
  object-fit: contain;
}

.activity-english-shelf-cover-image.full {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.activity-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.activity-thumb.english img {
  object-fit: contain;
  padding: 2px;
  background: rgba(255, 255, 252, 0.72);
}

.activity-thumb-english-cover img {
  padding: 0;
  background: transparent;
}

.activity-thumb em {
  color: #60756b;
  font-style: normal;
  font-size: 14px;
  font-weight: 800;
}

.activity-list .activity-link:hover {
  border-color: rgba(125, 166, 145, 0.38);
  background: rgba(241, 248, 239, 0.82);
}

.calendar-page-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding-top: 8px;
}

.calendar-page-dots button {
  width: 8px;
  height: 8px;
  min-height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(177, 197, 184, 0.62);
  box-shadow: none;
}

.calendar-page-dots button.active {
  width: 18px;
  background: rgba(103, 154, 132, 0.82);
}

.mastery-page-dots {
  padding-top: 2px;
}

.mastery-card-meta .mastery-link {
  min-height: 24px;
  padding: 0;
  border: 0;
  color: #4f735f;
  background: transparent;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mastery-card-meta .mastery-link:disabled {
  color: inherit;
  text-decoration: none;
  cursor: default;
  opacity: 0.72;
}

.analysis-overview .analysis-number-link {
  display: block;
  min-height: 0;
  margin: 4px 0;
  padding: 0;
  border: 0;
  color: #263b36;
  background: transparent;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
  text-align: left;
  text-decoration: none;
}

.analysis-inline-link {
  min-height: 0;
  padding: 0;
  border: 0;
  color: #4f735f;
  background: transparent;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.task-result-link {
  min-height: 0;
  padding: 0;
  border: 0;
  color: #4f735f;
  background: transparent;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.task-result-link:disabled {
  color: inherit;
  text-decoration: none;
  cursor: default;
  opacity: 0.72;
}

.activity-inline-link {
  display: inline;
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  color: #4f735f;
  background: transparent;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.activity-item > span {
  display: block;
  min-width: 0;
  line-height: 1.65;
}

.calendar-plan-activity-title,
.calendar-plan-activity-stats {
  display: block;
}

.calendar-plan-activity-title {
  color: #40564c;
  font-size: 14px;
  font-weight: 900;
}

.calendar-plan-activity-stats {
  margin-top: 3px;
  color: #6d7f73;
  font-size: 12px;
  font-weight: 760;
}

.activity-inline-link:disabled {
  color: inherit;
  text-decoration: none;
  cursor: default;
  opacity: 0.72;
}

.wrong-review-panel > .safety-header button,
.wrong-review-filters .subject-tabs button,
.wrong-review-actions button,
.similar-header button,
.similar-card button {
  min-height: 32px;
  border-radius: 6px;
  padding: 0 11px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

.wrong-review-panel > .safety-header button,
.wrong-review-actions button:first-child,
.similar-header button {
  border-color: #9fb7ac;
  background: #edf5ee;
  color: #2f5b54;
}

.wrong-review-panel > .safety-header button:hover,
.wrong-review-actions button:first-child:hover,
.similar-header button:hover {
  border-color: #7fa294;
  background: #d9eadf;
  color: #244a44;
}

.wrong-review-actions button.secondary,
.similar-card button.secondary {
  border-color: #879b91;
  background: #f8fbf4;
  color: #40544b;
}

.wrong-review-actions button.secondary:hover,
.similar-card button.secondary:hover {
  border-color: #9fb7ac;
  background: #edf5ee;
  color: #2f5b54;
}

.wrong-review-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(75, 98, 88, 0.18);
  border-radius: 8px;
  background: #fffffb;
}

.wrong-review-item h2 {
  margin: 6px 0;
  color: #263b36;
  font-size: 18px;
}

.wrong-review-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  justify-content: flex-end;
  min-width: 96px;
}

.wrong-review-actions button {
  width: 100%;
}

.similar-disabled {
  color: #607064;
  font-size: 13px;
}

.similar-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(75, 98, 88, 0.22);
}

.similar-list[hidden] {
  display: none;
}

.similar-header,
.similar-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.similar-header {
  color: #2f4a42;
}

.similar-card {
  padding: 12px;
  border: 1px solid #ead09a;
  border-radius: 8px;
  background: #fff9eb;
}

.similar-card-actions {
  display: grid;
  gap: 8px;
  min-width: 104px;
}

.similar-footer {
  display: flex;
  justify-content: center;
  padding: 4px 0 2px;
}

.similar-collapse-button {
  min-width: 132px;
}

.similar-card-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  min-width: 0;
}

.similar-card-title > strong {
  color: #25443e;
  font-family: Consolas, "Microsoft YaHei", monospace;
  font-size: 14px;
  white-space: nowrap;
}

.similar-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.similar-card-tags .badge {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.similar-card-tags .similarity-level-badge.high {
  border-color: #e2b85d;
  background: #fff0c6;
  color: #76510d;
}

.similar-card-tags .similarity-level-badge.variant {
  border-color: #d5a96b;
  background: #fff5dd;
  color: #73501e;
}

.similar-card-tags .similarity-level-badge.related {
  border-color: #c9d0cb;
  background: #f2f4f2;
  color: #626b66;
}

.question-actions select {
  min-height: 32px;
  border: 1px solid #c9d6c5;
  border-radius: 6px;
  padding: 0 8px;
  color: #40544b;
  background: #fffffb;
}

.question-save-state {
  min-width: 46px;
  color: #668075;
  font-size: 12px;
  font-weight: 700;
}

.progress-track {
  height: 8px;
  overflow: hidden;
  margin-top: 6px;
  border-radius: 999px;
  background: #e2eadf;
}

.progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #6fa77f, #d6a84f);
}

.trend-chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  min-height: 158px;
  gap: 10px;
  padding: 8px 10px 0;
}

.growth-chart-row {
  display: grid;
  grid-template-columns: minmax(360px, 1.35fr) minmax(220px, 0.75fr) minmax(320px, 1.1fr);
  gap: 12px;
  margin-top: 12px;
  align-items: stretch;
}

.growth-chart-row .growth-chart-card {
  grid-column: 1 / span 2;
}

.growth-chart-row .learning-reminder-card {
  grid-column: 3;
}

.growth-chart-card,
.learning-reminder-card {
  margin-top: 0;
}

.learning-reminder-card {
  align-self: stretch;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.84);
}

.learning-reminder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.learning-reminder-head span {
  color: #2d4d43;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.1;
}

.learning-reminder-head strong {
  color: var(--home-muted, #607064);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  transform: translateY(-1px);
}

.learning-reminders {
  position: relative;
  min-height: 0;
  height: auto;
  overflow: hidden;
  padding-bottom: 2px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 12px), transparent 100%);
}

.learning-reminder-track {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  gap: 6px;
  animation: reminderScroll 42s linear infinite;
}

.learning-reminders:hover .learning-reminder-track {
  animation-play-state: paused;
}

.learning-reminder-item {
  display: grid;
  gap: 3px;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid rgba(209, 221, 205, 0.82);
  border-left-width: 4px;
  border-radius: var(--ui-radius-control);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 4px 12px rgba(45, 70, 61, 0.035);
}

.learning-reminder-item span {
  color: var(--home-muted, #607064);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.learning-reminder-item strong {
  color: var(--home-heading, #40544b);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

.learning-reminder-item p {
  color: var(--home-text, #52635b);
  font-size: 13px;
  line-height: 1.35;
}

.learning-reminder-item.good {
  border-left-color: #6fa77f;
}

.learning-reminder-item.info {
  border-left-color: #6f8fc7;
}

.learning-reminder-item.warn {
  border-left-color: #d6a84f;
}

@keyframes reminderScroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

.chart-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  justify-content: space-between;
  gap: 14px;
  align-items: start;
}

.chart-header h2 {
  display: none;
}

.chart-controls {
  display: grid;
  gap: 7px;
  justify-items: end;
}

.chart-range-tabs,
.chart-metric-toggles,
.chart-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.chart-range-tabs,
.chart-tabs {
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(211, 224, 211, 0.52);
  border-radius: var(--ui-radius-control);
  background: rgba(247, 251, 244, 0.68);
}

.chart-metric-toggles {
  gap: 12px;
  color: var(--home-muted, #607064);
  font-size: 12px;
  line-height: 1.5;
}

.growth-chart-card .chart-metric-toggles {
  position: absolute;
  right: 18px;
  bottom: 16px;
  left: auto;
  z-index: 2;
  max-width: none;
  min-height: 18px;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
}

.chart-metric-toggles label {
  display: inline-flex;
  min-height: 18px;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  font: inherit;
  line-height: inherit;
  white-space: nowrap;
}

.chart-metric-toggles label::before {
  content: "";
  flex: 0 0 auto;
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1px solid #b8c9bf;
  border-radius: 50%;
  background: #f7faf4;
  transform: translateY(0);
}

.chart-metric-toggles label:has(input:checked)::before {
  border-color: #6f8fc7;
  background: #6f8fc7;
  box-shadow: 0 0 0 3px rgba(111, 143, 199, 0.14);
}

.chart-metric-toggles label:has(input[data-chart-metric="papers"]:checked)::before {
  border-color: #d6a84f;
  background: #d6a84f;
  box-shadow: 0 0 0 3px rgba(214, 168, 79, 0.16);
}

.chart-metric-toggles label.disabled {
  opacity: 0.48;
}

.chart-metric-toggles input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chart-range-tabs button,
.chart-tabs button {
  min-height: 24px;
  border: 0;
  border-radius: 9px;
  padding: 0 8px;
  color: #4f685d;
  background: transparent;
  font-size: 12px;
  font-weight: 650;
  box-shadow: none;
}

.chart-range-tabs button.active,
.chart-tabs button.active {
  color: #2d5f52;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 10px rgba(45, 70, 61, 0.08);
  font-weight: 800;
}

.chart-tabs button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.chart-range-tabs button {
  min-width: 54px;
}

.trend-day {
  display: grid;
  align-items: end;
  gap: 7px;
  text-align: center;
  color: var(--home-muted, #607064);
  font-size: 12px;
}

.trend-day.split {
  align-self: end;
}

.trend-bars {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 7px;
  min-height: 126px;
}

.split-bar-item {
  display: grid;
  align-items: end;
  gap: 4px;
  min-width: 22px;
}

.split-bar-item span {
  color: var(--home-heading, #40544b);
  font-size: 11px;
  font-weight: 600;
}

.trend-value {
  color: var(--home-heading, #40544b);
  font-size: 11.5px;
  font-weight: 750;
}

.trend-bar {
  width: 100%;
  min-height: 8px;
  border-radius: 999px 999px 5px 5px;
  background: linear-gradient(180deg, #82a7d4, #78b4a7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.42);
}

.trend-bar.metric-questions,
.comparison-fill.metric-questions {
  background: linear-gradient(180deg, #82a7d4, #78b4a7);
}

.trend-bar.metric-papers,
.comparison-fill.metric-papers {
  background: linear-gradient(180deg, #e0bc68, #b99b55);
}

.subject-chart {
  display: grid;
  gap: 10px;
  padding: 12px 0 4px;
}

.subject-chart-row {
  display: grid;
  grid-template-columns: minmax(74px, 0.8fr) minmax(140px, 1.8fr) auto;
  gap: 10px;
  align-items: center;
  color: #40544b;
  font-size: 13px;
}

.subject-chart-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparison-chart {
  display: grid;
  gap: 10px;
  min-height: 150px;
  padding: 8px 4px 2px;
}

.comparison-row {
  display: grid;
  grid-template-columns: minmax(76px, 0.8fr) minmax(130px, 1.7fr) minmax(110px, 1fr);
  gap: 10px;
  align-items: center;
}

.comparison-row.split {
  grid-template-columns: minmax(76px, 0.75fr) minmax(180px, 2.2fr);
}

.metric-comparison-bars {
  display: grid;
  gap: 6px;
}

.metric-comparison-row {
  display: grid;
  grid-template-columns: 36px minmax(90px, 1fr) 48px;
  gap: 8px;
  align-items: center;
  color: #607064;
  font-size: 12px;
}

.metric-comparison-row strong {
  color: #40544b;
  font-size: 12px;
  text-align: right;
}

.comparison-label,
.comparison-value {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.comparison-label strong,
.comparison-value strong {
  color: #263b36;
  font-size: 13px;
}

.comparison-label span,
.comparison-value span {
  color: #607064;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comparison-track {
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6eee4;
}

.comparison-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6f8fc7, #d6a84f);
}

@media (max-width: 720px) {
  .growth-chart-row {
    grid-template-columns: 1fr;
  }

  .chart-header {
    align-items: stretch;
    flex-direction: column;
  }

  .chart-controls {
    justify-items: start;
  }

  .chart-range-tabs,
  .chart-metric-toggles,
  .chart-tabs {
    justify-content: flex-start;
  }

  .growth-chart-card {
    padding-bottom: 14px;
  }

  .growth-chart-card .chart-metric-toggles {
    position: static;
    max-width: none;
    justify-content: flex-start;
  }

  .chart-insight {
    position: static;
    right: auto;
    bottom: auto;
    padding-right: 0;
  }

  .comparison-row {
    grid-template-columns: minmax(68px, 0.9fr) minmax(90px, 1.2fr);
  }

  .comparison-value {
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr;
    align-items: baseline;
  }
}

.chart-insight {
  position: absolute;
  left: 14px;
  right: 290px;
  bottom: 16px;
  margin: 0;
  color: #607064;
  font-size: 13px;
  line-height: 1.5;
}

.weekly-card > span,
.today-card > span {
  color: var(--home-muted, #607064);
  font-size: 13px;
}

.weekly-card .summary-duration strong {
  color: var(--card-strong, #7a6230);
}

.today-card .summary-duration strong {
  color: var(--card-strong, #2f6a57);
}

.weekly-card .growth-meta .badge {
  border-color: #eadcb5;
  color: #6f5b2c;
  background: #fff8e8;
}

.today-card .growth-meta .badge {
  border-color: #c8ddca;
  color: #356454;
  background: #eff8ef;
}

.weekly-card p,
.today-card p {
  color: var(--home-muted, #607064);
  font-size: 13px;
  line-height: 1.5;
}

.weekly-card p:empty,
.today-card p:empty {
  display: none;
}

#weeklySummary,
#todayMessage {
  margin-top: 12px;
}

#weeklyTip {
  margin-top: 6px;
  color: #7a8a81;
  font-size: 12px;
}

.safety-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.summary-item {
  padding: 12px;
  background: #fbfdf8;
  border: 1px solid #d1ddcd;
  border-radius: 8px;
}

button.summary-item {
  min-height: 0;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

button.summary-item:hover,
button.summary-item.active {
  border-color: rgba(91, 143, 116, 0.72);
  background: #eef7eb;
}

.summary-item span {
  display: block;
  color: #607064;
  font-size: 13px;
}

.summary-item strong {
  display: block;
  margin-top: 4px;
  font-size: 24px;
  color: #263b36;
}

.summary-item code,
.safety-item code {
  display: block;
  margin-top: 8px;
  color: #52635b;
  font-family: Consolas, "Microsoft YaHei", monospace;
  font-size: 12px;
  word-break: break-all;
}

.batch-card code {
  display: block;
  margin-top: 8px;
  color: #52635b;
  font-family: Consolas, "Microsoft YaHei", monospace;
  font-size: 12px;
  word-break: break-all;
}

#importView,
#qualityView,
#bankPackView,
#safetyView {
  --admin-heading: #263b36;
  --admin-muted: #607064;
  --admin-border: rgba(204, 219, 207, 0.68);
  --admin-surface: rgba(255, 255, 251, 0.84);
  padding: 16px 18px 24px;
  background:
    radial-gradient(circle at 8% 0%, rgba(234, 247, 231, 0.72), transparent 32%),
    linear-gradient(180deg, #f5fbf2 0%, #fffdf4 58%, #f0f7ee 100%);
}

.management-panel,
#safetyView .management-panel {
  display: grid;
  gap: 14px;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 16px;
  border: 1px solid var(--admin-border);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(251, 255, 248, 0.95), rgba(255, 253, 248, 0.88)),
    radial-gradient(circle at 12% 0%, rgba(111, 167, 127, 0.12), transparent 44%);
  box-shadow: var(--ui-shadow-soft);
}

.management-panel > .safety-header {
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(204, 219, 207, 0.58);
}

.management-panel > .safety-header h2 {
  margin: 0;
  color: var(--admin-heading);
  font-size: 19px;
  line-height: 1.2;
}

.management-panel > .safety-header p {
  max-width: 720px;
  margin: 6px 0 0;
  color: var(--admin-muted);
  font-size: 13px;
  line-height: 1.55;
}

#importView .source-config,
#bankPackView .source-config,
#qualityView .quality-actions,
#importView .import-actions,
#bankPackView .import-actions {
  align-items: end;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(211, 224, 211, 0.66);
  border-radius: 18px;
  background: rgba(255, 255, 251, 0.86);
  box-shadow: 0 10px 24px rgba(37, 51, 45, 0.06);
}

#qualityView .quality-actions,
#importView .import-actions,
#bankPackView .import-actions {
  justify-content: flex-start;
}

#importView .source-config label,
#bankPackView .source-config label {
  flex: 1 1 360px;
  color: #40544b;
  font-weight: 700;
}

#importView .source-config input,
#bankPackView .source-config input {
  width: 100%;
  min-height: 40px;
  border-color: rgba(186, 202, 191, 0.9);
  border-radius: 12px;
  background: #fffffb;
}

#importView button,
#qualityView button,
#bankPackView button,
#safetyView button {
  min-height: 40px;
  border-color: rgba(186, 202, 191, 0.9);
  border-radius: 12px;
  background: #fffffb;
  color: #52635b;
  font-weight: 780;
  box-shadow: none;
}

#importView button:hover,
#qualityView button:hover,
#bankPackView button:hover,
#safetyView button:hover {
  border-color: rgba(111, 167, 127, 0.62);
  background: #edf8ed;
  color: #315f43;
}

#importView .import-summary,
#qualityView .import-summary,
#qualityView .pet-hint-quality,
#bankPackView .import-summary,
#safetyView .import-summary {
  margin: 0;
}

#importView .summary-item,
#qualityView .summary-item,
#qualityView .pet-hint-quality > *,
#bankPackView .summary-item,
#safetyView .summary-item {
  border: 1px solid rgba(204, 219, 207, 0.68);
  border-radius: 14px;
  background: rgba(255, 255, 251, 0.78);
  box-shadow: 0 8px 18px rgba(37, 51, 45, 0.04);
}

#importView .summary-item span,
#qualityView .summary-item span,
#qualityView .pet-hint-quality span,
#bankPackView .summary-item span,
#safetyView .summary-item span {
  font-size: 12px;
}

#importView .summary-item strong,
#qualityView .summary-item strong,
#qualityView .pet-hint-quality strong,
#bankPackView .summary-item strong,
#safetyView .summary-item strong {
  font-size: 22px;
}

#importView .build-state {
  margin: 0;
}

#importView .docx-mtef-progress {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(132, 178, 150, 0.42);
  border-radius: 14px;
  background: rgba(250, 255, 248, 0.78);
}

#importView .docx-mtef-progress-head {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#importView .docx-mtef-progress-head > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid rgba(204, 219, 207, 0.78);
  border-radius: 12px;
  background: rgba(255, 255, 251, 0.82);
}

#importView .docx-mtef-progress-head span,
#importView .docx-mtef-progress-item span,
#importView .docx-mtef-progress-item small {
  color: #6c8176;
}

#importView .docx-mtef-progress-head strong {
  color: #183f35;
  font-size: 16px;
}

#importView .docx-mtef-current {
  margin: 0;
  color: #315f56;
  font-size: 13px;
}

#importView .docx-mtef-progress-list {
  display: grid;
  gap: 8px;
  max-height: 300px;
  overflow: auto;
}

#importView .docx-mtef-progress-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(204, 219, 207, 0.74);
  border-radius: 12px;
  background: rgba(255, 255, 251, 0.9);
}

#importView .docx-mtef-progress-item strong,
#importView .docx-mtef-progress-item span,
#importView .docx-mtef-progress-item small {
  display: block;
}

#importView .docx-mtef-progress-item em {
  display: inline-flex;
  justify-content: center;
  min-width: 56px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #315f56;
  background: rgba(223, 238, 228, 0.72);
  font-style: normal;
  font-weight: 700;
}

#importView .docx-mtef-progress-item.success em {
  color: #2f6b46;
  background: rgba(218, 240, 222, 0.82);
}

#importView .docx-mtef-progress-item.failed em {
  color: #8b4637;
  background: rgba(250, 226, 216, 0.82);
}

#importView .docx-mtef-progress-item.needs_review em {
  color: #806230;
  background: rgba(250, 239, 205, 0.86);
}

#importView .docx-mtef-monitor {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(132, 178, 150, 0.42);
  border-radius: 16px;
  background: rgba(250, 255, 248, 0.84);
}

#importView .docx-mtef-monitor-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

#importView .docx-mtef-monitor-head > div:first-child {
  min-width: 0;
}

#importView .docx-mtef-monitor-head span,
#importView .docx-mtef-monitor-head small {
  display: block;
  color: #708278;
  font-size: 12px;
}

#importView .docx-mtef-monitor-head > div:first-child > strong {
  display: block;
  margin: 3px 0;
  color: #173f35;
  font-size: 24px;
}

#importView .docx-mtef-monitor-head small {
  max-width: 680px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#importView .docx-mtef-progress-value {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  white-space: nowrap;
}

#importView .docx-mtef-progress-value strong {
  color: #1b5a48;
  font-size: 22px;
}

#importView .docx-mtef-progress-value .docx-mtef-operation-progress {
  flex-basis: 100%;
  color: #58766a;
  font-size: 12px;
  text-align: right;
}

#importView .docx-mtef-progress-value .docx-mtef-operation-progress strong {
  display: inline;
  margin-left: 4px;
  font-size: 13px;
}

#importView .docx-mtef-progress-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4ece5;
}

#importView .docx-mtef-progress-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4b9272, #76b291);
  transition: width .25s ease;
}

#importView .docx-mtef-monitor-stats {
  display: grid;
  grid-template-columns: minmax(170px, 1.8fr) repeat(5, minmax(82px, .7fr));
  gap: 9px;
}

#importView .docx-mtef-monitor-stats > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #dce6de;
  border-radius: 12px;
  background: #fffefb;
}

#importView .docx-mtef-monitor-stats span,
#importView .docx-mtef-monitor-stats strong {
  display: block;
}

#importView .docx-mtef-monitor-stats span {
  color: #788980;
  font-size: 11px;
}

#importView .docx-mtef-monitor-stats strong {
  margin-top: 3px;
  overflow: hidden;
  color: #24483e;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#importView .docx-mtef-monitor-stats .success strong { color: #33704e; }
#importView .docx-mtef-monitor-stats .duplicate strong { color: #8a6b2d; }
#importView .docx-mtef-monitor-stats .deferred strong { color: #75642d; }
#importView .docx-mtef-monitor-stats .failed strong { color: #9b4f3e; }

#importView .docx-mtef-current {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 12px;
  align-items: center;
  padding: 12px 14px;
  border-left: 4px solid #4b9272;
  border-radius: 10px;
  background: #eef7f0;
}

#importView .docx-mtef-current > span {
  grid-row: 1 / span 2;
  color: #4a7967;
  font-size: 12px;
}

#importView .docx-mtef-current strong,
#importView .docx-mtef-current small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#importView .docx-mtef-current small { color: #71827a; }

#importView .docx-mtef-progress-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

#importView .docx-mtef-progress-toolbar > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#importView .docx-mtef-progress-toolbar button {
  min-height: 32px;
  padding: 5px 10px;
  border-color: #d7e4da;
  color: #526b60;
  background: #fffefb;
  font-size: 12px;
}

#importView .docx-mtef-progress-toolbar button.active {
  border-color: #4b9272;
  color: #fff;
  background: #4b9272;
}

#importView .docx-mtef-monitor .docx-mtef-progress-list {
  max-height: 420px;
}

#importView .docx-mtef-monitor .docx-mtef-progress-item {
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

#importView .docx-mtef-item-index {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  color: #647c71;
  background: #eef3ee;
  font-size: 11px;
  font-weight: 700;
}

#importView .docx-mtef-item-copy small {
  margin-top: 4px;
  color: #78877f;
}

#importView .docx-mtef-item-copy .docx-mtef-technical-message {
  color: #9a756b;
  font-size: 10px;
}

#importView .docx-mtef-item-result {
  min-width: 106px;
  text-align: right;
}

#importView .docx-mtef-item-result small {
  margin-top: 5px;
  white-space: nowrap;
}

#importView .docx-mtef-progress-item.duplicate em {
  color: #806230;
  background: #fbf0d6;
}

#importView .docx-mtef-progress-item.skipped em {
  color: #6f6550;
  background: #f1eee5;
}

#importView .docx-mtef-progress-item.deferred em {
  color: #75642d;
  background: #f7edc9;
}

#importView .docx-mtef-progress-item.running {
  border-color: rgba(75, 146, 114, .5);
  background: #f6fbf7;
}

#importView .docx-mtef-progress-empty {
  margin: 0;
  padding: 22px;
  color: #74867c;
  text-align: center;
}

@media (max-width: 760px) {
  #importView .docx-mtef-monitor-head,
  #importView .docx-mtef-progress-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  #importView .docx-mtef-monitor-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #importView .docx-mtef-monitor-stats > div:first-child {
    grid-column: 1 / -1;
  }

  #importView .docx-mtef-monitor .docx-mtef-progress-item {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  #importView .docx-mtef-item-result {
    grid-column: 2;
    min-width: 0;
    text-align: left;
  }
}

/* 2026-07-25 import snapshot: one toolbar, one progress card, one natural list. */
#importView .management-panel {
  gap: 12px;
  padding: 18px;
}

#importView .import-source-bar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid rgba(204, 219, 207, .78);
  border-radius: 16px;
  background: rgba(255, 255, 251, .9);
}

#importView .import-source-bar label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #40544b;
  font-size: 12px;
  font-weight: 760;
}

#importView .import-source-bar input {
  width: 100%;
  min-height: 42px;
  border-color: #cbd9ce;
  border-radius: 11px;
  background: #fff;
}

#importView .import-source-snapshot {
  display: grid;
  gap: 2px;
  min-width: 112px;
  padding: 3px 0;
  color: #74857c;
  font-size: 11px;
}

#importView .import-source-snapshot strong {
  color: #24483e;
  font-size: 16px;
}

#importView #startDocxMtefBuildBtn {
  min-height: 42px;
  padding-inline: 18px;
  border-color: #3f8064;
  color: #fff;
  background: #3f8064;
}

#importView .import-task-controls {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  min-height: 0;
}

#importView .import-task-controls button {
  min-height: 30px;
  padding: 4px 9px;
  border-radius: 9px;
  font-size: 11px;
}

#importView .build-state {
  display: block;
}

#importView .docx-mtef-empty-state {
  padding: 32px 20px;
  border: 1px dashed #cbd9ce;
  border-radius: 14px;
  color: #718178;
  text-align: center;
}

#importView .docx-mtef-monitor {
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 251, .78);
  box-shadow: none;
}

#importView .docx-mtef-monitor-stats {
  grid-template-columns: minmax(160px, 1.5fr) repeat(5, minmax(74px, .65fr));
  gap: 7px;
}

#importView .docx-mtef-monitor-stats > div {
  padding: 8px 10px;
  border-radius: 10px;
}

#importView .docx-mtef-monitor-stats .updated strong { color: #31705a; }
#importView .docx-mtef-monitor-stats .needs-handling strong { color: #86672f; }

#importView .docx-mtef-stage-line {
  margin: 0;
  padding: 9px 11px;
  border-left: 3px solid #4b9272;
  border-radius: 8px;
  color: #61746a;
  background: #eff7f0;
  font-size: 12px;
}

#importView .docx-mtef-stage-line strong {
  color: #315f4e;
}

#importView .docx-mtef-monitor .docx-mtef-progress-list {
  max-height: none;
  overflow: visible;
}

#importView .docx-mtef-monitor .docx-mtef-progress-item {
  grid-template-columns: 32px minmax(220px, 1fr) minmax(190px, .75fr) auto;
  gap: 10px;
  padding: 11px 12px;
  box-shadow: none;
}

#importView .docx-mtef-item-copy {
  min-width: 0;
}

#importView .docx-mtef-item-copy > strong {
  display: -webkit-box;
  overflow: hidden;
  color: #28473e;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#importView .docx-mtef-item-copy > span {
  margin-top: 3px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#importView .docx-mtef-item-result {
  min-width: 0;
  text-align: left;
}

#importView .docx-mtef-item-result > span {
  margin-top: 5px;
  color: #6e7f76;
  font-size: 11px;
  line-height: 1.35;
}

#importView .docx-mtef-item-result small {
  white-space: normal;
}

#importView .docx-mtef-progress-item.complete em {
  color: #2f6b46;
  background: #daf0de;
}

#importView .docx-mtef-progress-item.needs_handling em {
  color: #7b5d25;
  background: #f8ecc9;
}

#importView .docx-mtef-item-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

#importView .docx-mtef-item-actions button,
#importView .docx-mtef-enter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 5px 11px;
  border: 1px solid #b9d2c1;
  border-radius: 9px;
  color: #315f4e;
  background: #f7fcf7;
  font-size: 12px;
  font-weight: 760;
  text-decoration: none;
}

#importView .docx-mtef-item-details {
  margin-top: 5px;
  color: #795f55;
  font-size: 11px;
}

#importView .docx-mtef-item-details summary {
  cursor: pointer;
}

#importView .docx-mtef-item-details p {
  margin: 5px 0 0;
  white-space: pre-wrap;
}

#importView .docx-mtef-history {
  border-top: 1px solid #e0e8e1;
  padding-top: 10px;
  color: #66786e;
  font-size: 12px;
}

#importView .docx-mtef-history summary {
  cursor: pointer;
  font-weight: 760;
}

#importView .docx-mtef-history p {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 0;
}

@media (max-width: 820px) {
  #importView .import-source-bar {
    grid-template-columns: 1fr;
  }

  #importView .import-source-snapshot {
    grid-template-columns: 1fr auto;
  }

  #importView .docx-mtef-monitor-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #importView .docx-mtef-monitor-stats > div:first-child {
    grid-column: 1 / -1;
  }

  #importView .docx-mtef-monitor .docx-mtef-progress-item {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  #importView .docx-mtef-item-result,
  #importView .docx-mtef-item-actions {
    grid-column: 2;
  }

  #importView .docx-mtef-history p {
    display: grid;
    gap: 3px;
  }
}

#importView .batch-list,
#qualityView .quality-list,
#qualityView .pet-hint-review-list,
#bankPackView .batch-list,
#safetyView .safety-list {
  gap: 10px;
}

#importView .batch-card,
#bankPackView .batch-card,
#qualityView .quality-item,
#qualityView .pet-hint-review-item,
#safetyView .safety-item,
#safetyView .reset-learning-panel {
  border-color: rgba(204, 219, 207, 0.68);
  border-radius: 14px;
  background: var(--admin-surface);
  box-shadow: 0 8px 18px rgba(37, 51, 45, 0.04);
}

#qualityView .quality-item {
  border-left-width: 4px;
}

#importView .batch-card h2,
#bankPackView .batch-card h2,
#qualityView .quality-item h2 {
  font-size: 15px;
  line-height: 1.35;
}

#importView .batch-card,
#bankPackView .batch-card,
#qualityView .quality-item,
#qualityView .pet-hint-review-item,
#safetyView .safety-item,
#safetyView .reset-learning-panel {
  font-size: 13px;
}

#safetyView .safety-panel h3 {
  margin: 2px 0 -4px;
  color: #315f43;
  font-size: 14px;
}

#safetyView .database-profile-panel {
  border-color: rgba(111, 167, 127, 0.56);
  background: linear-gradient(180deg, rgba(245, 253, 245, 0.96), rgba(255, 255, 251, 0.9));
}

#safetyView .database-profile-panel strong {
  color: #244f35;
  font-size: 16px;
}

#safetyView .safety-panel.management-panel {
  margin: 0 auto;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(251, 255, 248, 0.95), rgba(255, 253, 248, 0.88)),
    radial-gradient(circle at 12% 0%, rgba(111, 167, 127, 0.12), transparent 44%);
}

/* Achievement wall refresh */
#achievementsView {
  padding: 8px 18px 24px;
  background:
    radial-gradient(circle at 92% 8%, rgba(247, 223, 157, 0.22), transparent 30%),
    linear-gradient(135deg, rgba(244, 250, 240, 0.92), rgba(255, 253, 246, 0.94));
}

.achievement-wall-panel {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0 0 28px;
}

.achievement-wall-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid rgba(204, 219, 207, 0.64);
  border-radius: 18px;
  background: rgba(255, 255, 251, 0.82);
  box-shadow: 0 12px 28px rgba(37, 51, 45, 0.065);
}

.achievement-overview-copy span {
  color: #31483f;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.15;
}

.achievement-wall-header h2 {
  margin: 4px 0 2px;
  color: #263b36;
  font-size: 28px;
  letter-spacing: 0;
}

.achievement-wall-header p {
  max-width: 620px;
  margin: 0;
  color: #607064;
  font-size: 14px;
  line-height: 1.55;
}

#achievementCompletion {
  align-self: start;
}

#achievementWallStats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(210px, 1.35fr) minmax(130px, 0.8fr) repeat(4, minmax(112px, 1fr));
  gap: 10px;
  margin: 0;
}

.achievement-overview-card {
  position: relative;
  overflow: hidden;
  min-height: 96px;
  padding: 14px;
  border: 1px solid rgba(204, 219, 207, 0.68);
  border-radius: 15px;
  background: rgba(255, 255, 251, 0.84);
  box-shadow: 0 8px 18px rgba(37, 51, 45, 0.052);
}

.achievement-overview-card.primary {
  background: linear-gradient(135deg, #fffdf5, #edf7eb);
}

.achievement-overview-card.primary i {
  position: absolute;
  right: 12px;
  bottom: -8px;
  opacity: 0.16;
  font-size: 68px;
  font-style: normal;
}

.achievement-overview-card.attention {
  border-color: rgba(214, 168, 79, 0.5);
  background: #fff8e7;
}

.achievement-overview-card span {
  display: block;
  color: #607064;
  font-size: 12px;
  font-weight: 700;
}

.achievement-overview-card strong {
  display: block;
  margin-top: 6px;
  color: #263b36;
  font-size: 26px;
  line-height: 1;
}

.ring-card {
  display: grid;
  place-items: center;
  gap: 6px;
  text-align: center;
}

.achievement-ring {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fffdf8 57%, transparent 58%),
    conic-gradient(#6fa77f calc(var(--progress) * 1%), #e4ecdf 0);
}

.achievement-ring strong {
  margin: 0;
  font-size: 15px;
}

#achievementFilters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0;
}

.achievement-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#achievementFilters button {
  position: relative;
  min-height: 32px;
  border: 1px solid rgba(204, 219, 207, 0.78);
  border-radius: 999px;
  color: #496257;
  background: rgba(255, 255, 251, 0.88);
  box-shadow: none;
}

#achievementFilters button.active {
  border-color: #5d9478;
  color: #fff;
  background: #5d9478;
}

#achievementFilters button.has-dot::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d6a84f;
  box-shadow: 0 0 0 3px rgba(214, 168, 79, 0.18);
}

.achievement-sort-control {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  color: #607064;
  font-size: 13px;
  font-weight: 700;
}

.achievement-sort-control select {
  min-height: 32px;
  border: 1px solid rgba(204, 219, 207, 0.78);
  border-radius: 10px;
  padding: 0 10px;
  color: #40544b;
  background: #fffdf8;
}

.achievement-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.title-manager,
.achievement-claim-notice,
.hidden-achievement-guide,
.achievement-section {
  grid-column: 1 / -1;
}

.title-manager {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.7fr) minmax(190px, 0.9fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(204, 219, 207, 0.68);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 251, 0.9), rgba(239, 248, 236, 0.86));
  box-shadow: 0 12px 26px rgba(37, 51, 45, 0.06);
}

.title-manager-head span,
.title-manager-label {
  display: block;
  color: #607064;
  font-size: 13px;
  font-weight: 750;
}

.title-manager-head strong {
  display: block;
  margin-top: 5px;
  color: #263b36;
  font-size: 20px;
}

.title-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.title-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  border-radius: 999px;
  padding: 3px 10px;
  border: 1px solid rgba(204, 219, 207, 0.78);
  color: #40544b;
  background: rgba(255, 255, 251, 0.82);
  font-size: 12px;
  font-weight: 750;
}

.title-chip-icon {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
  font-size: 11px;
}

.title-silver,
.achievement-title-silver .title-chip {
  border-color: #aab9c6;
  background: #f4f7fa;
}

.title-gold,
.achievement-title-gold .title-chip {
  border-color: #d6a84f;
  background: #fff5d6;
}

.title-platinum,
.achievement-title-platinum .title-chip,
.title-glory {
  border-color: #9bbfc1;
  background: #edf9f8;
}

.title-diamond,
.title-king,
.achievement-title-diamond .title-chip,
.achievement-title-king .title-chip {
  border-color: #9daee9;
  background: #eef4ff;
}

.title-manager-meta {
  display: grid;
  gap: 4px;
  justify-items: end;
  color: #607064;
  font-size: 13px;
}

.title-manager-meta span {
  color: #6e5424;
  font-weight: 800;
}

.achievement-claim-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(214, 168, 79, 0.46);
  border-radius: 16px;
  background: linear-gradient(135deg, #fff8e7, #fffdf8);
  box-shadow: 0 10px 22px rgba(92, 70, 26, 0.07);
}

.claim-medal {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 14px;
  color: #7a5b1e;
  background: #ffe4a3;
  font-weight: 900;
}

.achievement-claim-notice strong {
  color: #5f4a23;
}

.achievement-claim-notice p {
  margin: 3px 0 0;
  color: #7a6a46;
  font-size: 13px;
}

.achievement-section {
  display: grid;
  gap: 12px;
}

.achievement-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #607064;
}

.achievement-section-head h3 {
  margin: 0;
  color: #263b36;
  font-size: 18px;
}

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

.achievement-wall-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
  min-height: 340px;
  padding: 13px;
  border: 1px solid rgba(204, 219, 207, 0.68);
  border-radius: 17px;
  background: rgba(255, 255, 251, 0.9);
  box-shadow: 0 9px 22px rgba(37, 51, 45, 0.055);
  cursor: pointer;
}

.achievement-wall-card:hover {
  transform: translateY(-1px);
  border-color: rgba(111, 167, 127, 0.54);
  box-shadow: 0 13px 28px rgba(37, 51, 45, 0.08);
}

.achievement-wall-card.level-silver {
  background: linear-gradient(180deg, #fbfdff, #fffefa);
}

.achievement-wall-card.level-gold {
  border-color: rgba(214, 168, 79, 0.36);
  background: linear-gradient(180deg, #fff8dd, #fffefa);
}

.achievement-wall-card.level-platinum {
  border-color: rgba(140, 189, 191, 0.42);
  background: linear-gradient(180deg, #effafa, #fffefa);
}

.achievement-wall-card.level-diamond {
  border-color: rgba(137, 158, 226, 0.44);
  background: linear-gradient(180deg, #eef5ff, #fffefa);
}

.achievement-wall-card.level-hidden {
  border-color: rgba(148, 135, 170, 0.38);
  background: linear-gradient(180deg, #f5f2fa, #fffefa);
}

.achievement-badge-frame {
  display: grid;
  width: 100%;
  aspect-ratio: 1 / 0.78;
  place-items: center;
  overflow: hidden;
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.36) 58%, transparent 59%),
    linear-gradient(135deg, rgba(238, 247, 236, 0.78), rgba(255, 253, 246, 0.72));
}

.achievement-badge-frame img {
  display: block;
  width: 92%;
  height: 92%;
  object-fit: contain;
  object-position: center;
}

.achievement-badge-frame.level-gold {
  background: radial-gradient(circle, #fffdf7 0 48%, rgba(255, 232, 171, 0.8) 49%, transparent 68%);
}

.achievement-badge-frame.level-diamond {
  background: radial-gradient(circle, #fbfdff 0 45%, rgba(196, 220, 255, 0.78) 46%, transparent 70%);
}

.achievement-lock-mark {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 1px solid rgba(148, 135, 170, 0.45);
  border-radius: 50%;
  color: #716883;
  background: #f4f0f8;
  font-size: 30px;
  font-weight: 900;
}

.achievement-card-body {
  display: grid;
  grid-template-rows: auto auto minmax(42px, auto) auto auto 1fr;
  gap: 7px;
}

.achievement-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}

.achievement-card-head strong {
  color: #263b36;
  font-size: 16px;
  line-height: 1.25;
}

.achievement-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.achievement-state-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 2px 8px;
  color: #52635b;
  background: #eef5ee;
  font-size: 12px;
  font-weight: 750;
}

.achievement-state-pill.status-unclaimed {
  color: #7a5a22;
  background: #fff0bf;
}

.achievement-state-pill.status-claimed {
  color: #456f56;
  background: #e7f3e6;
}

.achievement-state-pill.status-hidden {
  color: #716883;
  background: #f1ecf7;
}

.wearable-title-line {
  color: #607064;
  font-size: 12px;
}

.achievement-wall-card p {
  margin: 0;
  color: #52635b;
  font-size: 13px;
  line-height: 1.45;
}

.achievement-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  color: #607064;
  font-size: 12px;
  font-weight: 700;
}

.achievement-card-foot {
  display: grid;
  gap: 3px;
  color: #7a887f;
  font-size: 11.5px;
  line-height: 1.35;
}

.achievement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-self: end;
}

.achievement-actions button {
  flex: 1 1 auto;
  min-height: 30px;
  border-radius: 10px;
  font-size: 12px;
}

.achievement-actions .claim-button {
  border-color: #c79b3d;
  color: #5f4a23;
  background: #fff0bf;
}

.equipped-ribbon {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  border-radius: 999px;
  padding: 3px 8px;
  color: #5f4a23;
  background: #fff0bf;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(92, 70, 26, 0.12);
}

.safety-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.safety-panel {
  margin-top: 16px;
  padding: 14px 16px;
  background: #fbfdf8;
  border: 1px solid #d1ddcd;
  border-radius: 8px;
}

.safety-header,
.backup-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.safety-panel h2,
.safety-item h3 {
  margin: 0 0 8px;
  color: #263b36;
}

.safety-panel h2 {
  font-size: 18px;
}

.safety-item h3 {
  font-size: 15px;
}

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

.safety-item {
  padding: 12px;
  background: #fffffb;
  border: 1px solid #d1ddcd;
  border-radius: 7px;
}

.safety-item p {
  color: #607064;
}

.backup-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.backup-preview span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid #d9e5d4;
  border-radius: 999px;
  background: #f5faf1;
  color: #607064;
  font-size: 12px;
  line-height: 1.2;
}

.backup-preview strong {
  color: #2d5a42;
  font-size: 13px;
}

.import-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.batch-list {
  display: grid;
  gap: 12px;
}

.batch-card {
  padding: 14px;
  background: #fbfdf8;
  border: 1px solid #d1ddcd;
  border-radius: 8px;
}

.batch-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.batch-card h2 {
  margin: 0 0 8px;
  font-size: 16px;
  color: #263b36;
}

.batch-report {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 10px;
  color: #607064;
  font-size: 13px;
}

.batch-report span {
  padding: 7px 8px;
  background: #fffffb;
  border: 1px solid #d1ddcd;
  border-radius: 6px;
}

.batch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.import-batch-actions {
  display: grid;
  justify-items: end;
  gap: 7px;
}

.batch-primary-actions,
.batch-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.batch-secondary-actions {
  opacity: 0.78;
}

.batch-secondary-actions button {
  min-height: 28px !important;
  padding: 0 9px;
  border-radius: 9px !important;
  font-size: 12px;
  font-weight: 700;
}

label {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: #3c4c44;
}

.chart-metric-toggles label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-height: 18px;
  font-size: 12px;
  line-height: 1;
}

select,
input[type="number"],
input[type="text"] {
  height: 34px;
  min-width: 120px;
  border: 1px solid #bacab6;
  border-radius: 6px;
  padding: 0 9px;
  background: #fffffb;
}

#codeInput {
  width: 96px;
  min-width: 96px;
}

.chips {
  display: grid;
  gap: 12px;
  margin: 0 0 10px;
}

.chips div {
  align-items: center;
  padding: 14px 16px;
  background: #fbfdf8;
  border: 1px solid #d1ddcd;
  border-radius: 8px;
}

.chips strong {
  margin-right: 4px;
}

.chip-empty {
  color: #78867f;
  font-size: 13px;
}

.chips label {
  flex-direction: row;
  align-items: center;
  min-height: 28px;
}

.practice {
  display: grid;
  gap: 14px;
}

.paper-list {
  display: grid;
  gap: 12px;
}

.paper-card {
  padding: 14px;
  background: #fbfdf8;
  border: 1px solid #d1ddcd;
  border-radius: 8px;
}

.paper-card.favorite {
  border-color: #d8ad4a;
  background: #fffaf0;
}

.paper-card.completed {
  border-left: 5px solid #4f8f77;
}

.paper-card-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.paper-card h2 {
  margin: 0 0 8px;
  font-size: 17px;
  color: #263b36;
}

.paper-meta,
.paper-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #607064;
  font-size: 13px;
}

.paper-status {
  margin-top: 8px;
}

.paper-actions {
  display: grid;
  gap: 7px;
  justify-items: end;
  min-width: 320px;
}

.paper-practice-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  width: 100%;
  color: #607064;
  font-size: 13px;
}

.paper-primary-actions,
.paper-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.paper-filters button,
.paper-primary-actions button,
.paper-secondary-actions button,
.paper-pdf-menu summary {
  min-height: 32px;
  border-radius: 6px;
  padding: 0 11px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

.paper-filters button,
.paper-primary-actions button {
  border-color: #9fb7ac;
  background: #edf5ee;
  color: #2f5b54;
}

.paper-primary-actions button:first-child {
  border-color: #86aa9a;
  background: #e0efe6;
  color: #284f49;
}

.paper-filters button:hover,
.paper-primary-actions button:hover {
  border-color: #7fa294;
  background: #d9eadf;
  color: #244a44;
}

.paper-primary-actions button:disabled,
.paper-secondary-actions button:disabled,
.paper-pdf-menu div button:disabled {
  border-color: #d5ddd2;
  background: #f4f6f0;
  color: #a0aaa2;
  cursor: not-allowed;
}

.paper-timer-meta {
  width: 100%;
  color: #40544b;
  font-family: Consolas, "Microsoft YaHei", monospace;
  font-size: 13px;
  text-align: right;
}

.paper-secondary-actions button,
.paper-pdf-menu summary {
  border-color: #879b91;
  color: #40544b;
  background: #f8fbf4;
}

.paper-secondary-actions button:hover,
.paper-pdf-menu summary:hover {
  border-color: #9fb7ac;
  background: #edf5ee;
  color: #2f5b54;
}

.paper-pdf-menu {
  position: relative;
}

.paper-pdf-menu summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 1px solid #879b91;
  border-radius: 6px;
  padding: 0 10px;
  cursor: pointer;
  list-style: none;
}

.paper-pdf-menu summary::-webkit-details-marker {
  display: none;
}

.paper-pdf-menu[open] summary {
  border-color: #86aa9a;
  color: #284f49;
  background: #e0efe6;
}

.paper-pdf-menu div {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: grid;
  gap: 6px;
  min-width: 110px;
  padding: 8px;
  border: 1px solid #c9d6c5;
  border-radius: 8px;
  background: #fbfdf8;
  box-shadow: 0 10px 24px rgba(42, 64, 54, 0.16);
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid #c9d6c5;
  border-radius: 999px;
  color: #536960;
  background: #fffffb;
  font: inherit;
  font-size: 12px;
  line-height: 1.25;
}

.badge-link {
  cursor: pointer;
  color: #6f5520;
  border-color: rgba(214, 188, 115, 0.62);
  background: rgba(255, 248, 232, 0.78);
}

.badge-link:hover {
  color: #5f4714;
  background: #fff2cf;
}

.review-badge {
  display: inline-block;
  margin-top: 4px;
  border-color: #e4b35f;
  color: #59411a;
  background: #fff6dd;
}

.question {
  padding: 14px;
  background: #fbfdf8;
  border: 1px solid #d1ddcd;
  border-radius: 8px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.question.active-question {
  border-color: #80a995;
  background: #fffffb;
  box-shadow: 0 0 0 3px rgba(128, 169, 149, 0.18), 0 8px 18px rgba(36, 49, 47, 0.08);
}

.question.active-question .question-code {
  color: #265f55;
}

.question-stem,
.question-analysis {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.75;
  color: #263b36;
  font-size: 15px;
}

.question-stem {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid #d7e1d2;
  border-radius: 7px;
  background: #fffffb;
}

.question-analysis {
  margin-top: 8px;
  padding: 12px 14px;
  border-left: 4px solid #7b9d82;
  border-radius: 6px;
  background: #f3f7ef;
}

.question-stem .math,
.question-stem .math-text,
.question-stem .inline-symbol,
.question-stem .math-op,
.question-stem .geo-symbol,
.question-analysis .math,
.question-analysis .math-text,
.question-analysis .inline-symbol,
.question-analysis .math-op,
.question-analysis .geo-symbol,
.practice-card-answer-text .math,
.practice-card-answer-text .math-text,
.practice-card-answer-text .inline-symbol,
.practice-card-answer-text .math-op,
.practice-card-answer-text .geo-symbol {
  color: currentColor;
  font-family: "Cambria Math", "STIX Two Math", "Times New Roman", "Segoe UI Symbol", "Microsoft YaHei", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
}

.question-stem .math,
.question-stem .math-text,
.question-analysis .math,
.question-analysis .math-text,
.practice-card-answer-text .math,
.practice-card-answer-text .math-text {
  white-space: nowrap;
}

.question-stem .math-text,
.question-analysis .math-text,
.practice-card-answer-text .math-text {
  display: inline-block;
  font-size: 1.03em;
  line-height: 1;
  vertical-align: -0.02em;
}

.question-stem .geo-symbol,
.question-analysis .geo-symbol,
.practice-card-answer-text .geo-symbol,
.question-stem .math-op,
.question-analysis .math-op,
.practice-card-answer-text .math-op {
  display: inline-block;
  font-family: var(--practice2-math-font, "Cambria Math", "STIX Two Math", "Times New Roman", "Segoe UI Symbol", serif);
  font-weight: 500;
  line-height: 1;
}

.question-stem .geo-symbol,
.question-analysis .geo-symbol,
.practice-card-answer-text .geo-symbol {
  font-family: var(--practice2-math-font, "Cambria Math", "STIX Two Math", "Times New Roman", "Segoe UI Symbol", serif);
  font-weight: 500;
  line-height: 1;
}

.question-stem .geo-triangle,
.question-analysis .geo-triangle,
.practice-card-answer-text .geo-triangle {
  display: inline-block;
  font-size: 1.14em;
  margin: 0 0.02em;
  transform: translateY(0.035em);
}

.question-stem .math-geometry,
.question-analysis .math-geometry,
.practice-card-answer-text .math-geometry {
  position: relative;
  display: inline-block;
  min-width: 1em;
  vertical-align: -0.02em;
}

.question-stem .math-geometry mjx-container,
.question-analysis .math-geometry mjx-container,
.practice-card-answer-text .math-geometry mjx-container {
  position: relative !important;
  display: inline-block !important;
  max-width: none !important;
  overflow: visible !important;
  margin: 0 0.03em !important;
  font-size: 1.06em !important;
}

.question-stem .geo-angle,
.question-analysis .geo-angle,
.practice-card-answer-text .geo-angle {
  font-size: 1.08em;
  margin: 0 0.02em;
  transform: translateY(0.02em);
}

.question-stem .geo-congruent,
.question-analysis .geo-congruent,
.practice-card-answer-text .geo-congruent {
  font-size: 1.18em;
  margin: 0 0.08em;
  transform: translateY(0.03em);
}

.question-stem .geo-perp,
.question-analysis .geo-perp,
.practice-card-answer-text .geo-perp {
  font-size: 1.1em;
  margin: 0 0.06em;
  transform: translateY(0.02em);
}

.question-stem .geo-parallel,
.question-analysis .geo-parallel,
.practice-card-answer-text .geo-parallel {
  position: relative;
  width: 0.72em;
  height: 1.05em;
  margin: 0 0.1em;
  color: inherit;
  line-height: 1;
  overflow: hidden;
  text-indent: -999px;
  vertical-align: -0.13em;
}

.question-stem .geo-parallel::before,
.question-stem .geo-parallel::after,
.question-analysis .geo-parallel::before,
.question-analysis .geo-parallel::after,
.practice-card-answer-text .geo-parallel::before,
.practice-card-answer-text .geo-parallel::after {
  content: "";
  position: absolute;
  top: 0.1em;
  bottom: 0.05em;
  width: 0.12em;
  border-radius: 999px;
  background: currentColor;
}

.question-stem .geo-parallel::before,
.question-analysis .geo-parallel::before,
.practice-card-answer-text .geo-parallel::before {
  left: 0.2em;
}

.question-stem .geo-parallel::after,
.question-analysis .geo-parallel::after,
.practice-card-answer-text .geo-parallel::after {
  right: 0.2em;
}

.question-stem .math-minus,
.question-analysis .math-minus,
.practice-card-answer-text .math-minus {
  min-width: 0.4em;
  margin: 0 0.02em;
  text-align: center;
  font-family: var(--practice2-math-font, "Cambria Math", "STIX Two Math", "Times New Roman", "Segoe UI Symbol", serif);
  font-weight: 500;
  font-size: 1em;
  transform: none;
}

.question-stem .question-rich-section,
.question-analysis .question-rich-section,
.practice-card-answer-text .question-rich-section,
.question-stem .text-choice-grid,
.question-analysis .text-choice-grid,
.practice-card-answer-text .text-choice-grid,
.question-stem .image-row,
.question-analysis .image-row,
.practice-card-answer-text .image-row,
.question-stem .table-wrap,
.question-analysis .table-wrap,
.practice-card-answer-text .table-wrap {
  white-space: normal;
}

.question-stem p,
.question-analysis p,
.practice-card-answer-text p {
  margin: 0 0 10px;
}

.question-stem .fill-blank,
.question-analysis .fill-blank,
.practice-card-answer-text .fill-blank {
  display: inline-block;
  min-width: 5.2em;
  height: 1.05em;
  margin: 0 0.18em;
  border-bottom: 2px solid rgba(38, 78, 68, 0.58);
  vertical-align: -0.08em;
}

.question-stem .text-choice-grid,
.question-analysis .text-choice-grid,
.practice-card-answer-text .text-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  max-width: min(760px, 100%);
  margin: 10px 0 12px;
}

.question-stem .text-choice-option,
.question-analysis .text-choice-option,
.practice-card-answer-text .text-choice-option {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: baseline;
  min-width: 0;
  color: #26384c;
  line-height: 1.72;
}

.question-stem .choice-label,
.question-analysis .choice-label,
.practice-card-answer-text .choice-label {
  align-self: start;
  color: #31506a;
  font-size: 0.95em;
  font-weight: 700;
  line-height: 1.45;
}

.question-stem .image-row,
.question-analysis .image-row,
.practice-card-answer-text .image-row {
  display: grid;
  gap: 10px 16px;
  width: 100%;
  margin: 10px 0 14px;
}

.question-stem .image-row.choice-count-2,
.question-analysis .image-row.choice-count-2,
.practice-card-answer-text .image-row.choice-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: min(920px, 100%);
}

.question-stem .image-row.choice-count-3,
.question-analysis .image-row.choice-count-3,
.practice-card-answer-text .image-row.choice-count-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.question-stem .image-row.choice-count-4,
.question-analysis .image-row.choice-count-4,
.practice-card-answer-text .image-row.choice-count-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: min(980px, 100%);
}

.question-stem .figure-choice,
.question-analysis .figure-choice,
.practice-card-answer-text .figure-choice {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  min-height: 132px;
  padding: 8px 10px;
  border: 1px solid rgba(203, 216, 210, 0.78);
  border-radius: 7px;
  background: #ffffff;
}

.question-stem .image-row .figure-choice,
.question-analysis .image-row .figure-choice,
.practice-card-answer-text .image-row .figure-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 132px;
}

.question-stem img.figure-img,
.question-analysis img.figure-img,
.practice-card-answer-text img.figure-img {
  display: block;
  width: auto;
  min-width: min(340px, 76vw);
  max-width: min(620px, 100%);
  max-height: 360px;
  height: auto;
  margin: 8px auto 12px;
  object-fit: contain;
}

.question-stem .figure-choice img.figure-img,
.question-analysis .figure-choice img.figure-img,
.practice-card-answer-text .figure-choice img.figure-img {
  max-width: 100%;
  max-height: 132px;
  min-width: 0;
  margin: 0 auto;
}

.practice2-focus-question .figure-choice img.figure-img {
  max-height: 160px;
}

.question-stem img.formula-img-inline,
.question-analysis img.formula-img-inline,
.practice-card-answer-text img.formula-img-inline {
  display: inline-block;
  width: auto;
  max-width: min(16em, 100%);
  max-height: 1.35em;
  height: 1.12em;
  margin: 0 0.06em;
  border: 0;
  object-fit: contain;
  vertical-align: -0.24em;
  filter: contrast(1.12);
}

.question-stem .table-wrap,
.question-analysis .table-wrap,
.practice-card-answer-text .table-wrap {
  max-width: 100%;
  margin: 12px 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.question-stem .docx-table,
.question-analysis .docx-table,
.practice-card-answer-text .docx-table {
  width: auto;
  max-width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.96em;
  line-height: 1.65;
}

.question-stem .docx-table th,
.question-stem .docx-table td,
.question-analysis .docx-table th,
.question-analysis .docx-table td,
.practice-card-answer-text .docx-table th,
.practice-card-answer-text .docx-table td {
  min-width: 72px;
  padding: 7px 10px;
  border: 1px solid #b9c8c1;
  vertical-align: middle;
  text-align: center;
}

@media (max-width: 980px) {
  .question-stem .image-row.choice-count-3,
  .question-analysis .image-row.choice-count-3,
  .practice-card-answer-text .image-row.choice-count-3,
  .question-stem .image-row.choice-count-4,
  .question-analysis .image-row.choice-count-4,
  .practice-card-answer-text .image-row.choice-count-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .question-stem .text-choice-grid,
  .question-analysis .text-choice-grid,
  .practice-card-answer-text .text-choice-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .question-stem .image-row.choice-count-2,
  .question-analysis .image-row.choice-count-2,
  .practice-card-answer-text .image-row.choice-count-2,
  .question-stem .image-row.choice-count-3,
  .question-analysis .image-row.choice-count-3,
  .practice-card-answer-text .image-row.choice-count-3,
  .question-stem .image-row.choice-count-4,
  .question-analysis .image-row.choice-count-4,
  .practice-card-answer-text .image-row.choice-count-4 {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}

.split-preview-dialog {
  width: min(1180px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 1px solid #c8d6cc;
  border-radius: 8px;
  background: #f8fbf6;
  box-shadow: 0 20px 60px rgba(36, 49, 47, 0.22);
  color: #263b36;
}

.split-preview-dialog::backdrop {
  background: rgba(18, 28, 25, 0.38);
}

.split-preview-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  border-bottom: 1px solid #d8e2d6;
  background: #fffffb;
}

.split-preview-head h2 {
  margin: 0;
  font-size: 20px;
}

.split-preview-head p {
  margin: 6px 0 0;
  color: #64746d;
  font-size: 13px;
}

.split-preview-body {
  max-height: calc(100vh - 140px);
  overflow: auto;
  padding: 18px 20px 22px;
}

.split-preview-paper {
  margin-bottom: 18px;
}

.split-preview-paper-head {
  margin-bottom: 12px;
}

.split-preview-paper-head h3 {
  margin: 0 0 8px;
  font-size: 17px;
}

.split-question-card {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid #d3dfd0;
  border-radius: 8px;
  background: #fffffb;
}

.split-question-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.split-question-ids {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  color: #64746d;
  font-size: 12px;
}

.split-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.split-tag-row span {
  padding: 4px 7px;
  border: 1px solid #c7d8cc;
  border-radius: 6px;
  background: #eef7ef;
  color: #31594c;
  font-size: 12px;
  line-height: 1.2;
}

.split-tag-muted,
.split-tag-policy {
  color: #7b6b49;
}

.split-difficulty-control {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: #40544b;
  font-size: 13px;
}

.split-difficulty-control select {
  min-width: 118px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid #bfd0c4;
  border-radius: 6px;
  background: #fffffb;
  color: #263b36;
}

.split-question-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.split-question-grid h4 {
  margin: 0 0 8px;
  color: #40544b;
  font-size: 14px;
}

.split-question-grid .question-stem,
.split-question-grid .question-analysis {
  margin-top: 0;
}

.split-preview-empty {
  padding: 18px;
  border: 1px dashed #c8d6cc;
  border-radius: 8px;
  background: #fffffb;
  color: #64746d;
}

.muted {
  color: #718078;
}

@media (max-width: 820px) {
  .split-preview-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }

  .split-preview-head {
    padding: 14px;
  }

  .split-preview-body {
    max-height: calc(100vh - 112px);
    padding: 14px;
  }

  .split-question-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .split-question-grid {
    grid-template-columns: 1fr;
  }
}

.practice-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(180px, 0.8fr) auto;
  gap: 12px;
  align-items: center;
  margin: 0 0 12px;
  padding: 14px;
  border: 2px solid #8dbf9d;
  border-radius: 8px;
  background: #edf8ef;
}

.practice-summary > div:first-child span {
  color: #607064;
  font-size: 13px;
}

.practice-summary strong {
  display: block;
  margin-top: 4px;
  color: #1f3f3b;
  font-size: 30px;
}

.practice-summary p {
  margin-top: 6px;
  color: #40544b;
}

.summary-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.question-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.question-actions button,
.timer-actions button {
  border-color: #c9d6c5;
  color: #40544b;
  background: #f8fbf4;
}

.question-actions button.secondary {
  border-color: #d5c397;
  color: #65522a;
  background: #fff8e6;
}

.question-actions button.similar-practice-button,
.similar-header button.similar-practice-button,
.similar-card button.similar-practice-button {
  border-color: #8aa7d6;
  color: #1f4f8f;
  background: #eaf2ff;
}

.question-actions button.chatgpt-hint-button {
  border-color: #b89be7;
  color: #5b397f;
  background: #f4ecff;
}

.question-actions button:hover,
.timer-actions button:hover {
  border-color: #aebfaf;
  color: #2f4f45;
  background: #edf5ee;
}

.question-actions button.chatgpt-hint-button:hover {
  border-color: #9d78d7;
  color: #43276a;
  background: #eadcff;
}

.question-actions button.similar-practice-button:hover,
.similar-header button.similar-practice-button:hover,
.similar-card button.similar-practice-button:hover {
  border-color: #5d86c9;
  color: #173f78;
  background: #d8e8ff;
}

.question-actions button.selected {
  border-color: #8cae8e;
  color: #2f5b42;
  background: #eaf4e8;
}

.similar-card-preview {
  display: grid;
  gap: 6px;
  margin: 7px 0 0;
  max-height: none;
  padding: 10px 12px;
  overflow: visible;
  border: 1px solid #d8e1d2;
  border-radius: 7px;
  background: #fff;
}

.similar-card-stem {
  min-width: 0;
  color: #344b44;
  font-size: 14px;
  line-height: 1.7;
  text-align: left;
}

.similar-card-stem p {
  margin: 0 0 6px;
}

.similar-card-stem img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: none;
  margin: 6px auto;
  object-fit: contain;
}

.similar-card-preview img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: none;
  margin: 0 auto;
  object-fit: contain;
  border: 1px solid #d4dfcf;
  background: #fff;
}

.question h2 {
  margin: 0;
  font-size: 16px;
  color: #607064;
  font-weight: 600;
}

.question-header > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.question-code,
.analysis-code {
  font-family: Consolas, "Microsoft YaHei", monospace;
  color: #2d5d55;
  font-weight: 700;
}

.question-inline-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  max-width: 100%;
}

.question-inline-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid #d7dfcf;
  border-radius: 999px;
  color: #53655d;
  background: #f6f9f1;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.2;
}

.question-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 10px;
}

.question-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid #d7dfcf;
  border-radius: 999px;
  color: #53655d;
  background: #f5f8ef;
  font-size: 12px;
  font-weight: 700;
}

.analysis-code {
  margin: 0 0 8px;
  font-size: 15px;
}

.tags {
  color: #607064;
  font-size: 13px;
}

.stem,
.answer {
  line-height: 1.75;
}

.section {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid #d7e1d2;
  border-radius: 7px;
  background: #fffffb;
}

.section p {
  margin: 0 0 8px;
}

.section p:last-child {
  margin-bottom: 0;
}

.substep {
  font-weight: 600;
  color: #2e4a43;
}

.logic {
  padding-left: 10px;
  border-left: 2px solid #c4d3bf;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 0;
  padding: 8px;
  background: #fffffb;
  border: 1px solid #d1ddcd;
  border-radius: 6px;
}

.question-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid #c7d4c2;
  background: #fffffb;
}

.answer {
  margin-top: 8px;
  padding: 14px;
  border-left: 4px solid #7b9d82;
  background: #f3f7ef;
  border-radius: 6px;
}

.answer.hidden {
  display: none;
}

.hidden {
  display: none;
}

.analysis-panel {
  margin-top: 10px;
  border-top: 1px solid #d1ddcd;
  padding-top: 10px;
}

.chatgpt-hint-panel {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid #d8c5f1;
  border-radius: 8px;
  background: #fbf8ff;
  box-shadow: 0 8px 20px rgba(85, 55, 120, 0.08);
}

.chatgpt-hint-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: #5b397f;
}

.chatgpt-hint-head strong {
  font-size: 14px;
}

.chatgpt-hint-head span {
  color: #7a6b89;
  font-size: 12px;
}

.chatgpt-hint-title {
  margin-bottom: 7px;
  color: #342944;
  font-weight: 800;
}

.chatgpt-hint-body {
  display: grid;
  gap: 7px;
  color: #3d3448;
  line-height: 1.65;
}

.chatgpt-hint-body p {
  margin: 0;
}

.chatgpt-hint-avoid {
  color: #7b5330;
  background: #fff8eb;
  border: 1px solid #ead5ad;
  border-radius: 7px;
  padding: 7px 9px;
}

.chatgpt-hint-more {
  margin-top: 10px;
  color: #4f4260;
}

.chatgpt-hint-more summary {
  cursor: pointer;
  font-weight: 700;
}

.chatgpt-hint-alt {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 3px solid #c6a8ee;
  background: #ffffff;
}

.chatgpt-hint-alt p {
  margin: 4px 0 0;
  line-height: 1.55;
}

.chatgpt-hint-error {
  margin: 0;
  color: #8b3f3f;
}

.question-chat-dialog {
  width: min(620px, calc(100vw - 28px));
  max-height: min(760px, calc(100dvh - 28px));
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
}

.question-chat-dialog::backdrop {
  background: rgba(26, 36, 33, .46);
  backdrop-filter: blur(1.5px);
}

.question-chat-card {
  width: 100%;
  max-height: min(760px, calc(100dvh - 28px));
  overflow: auto;
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid #dbe6dc;
  border-radius: 16px;
  background: #fbfdf9;
  box-shadow: 0 22px 60px rgba(30, 47, 42, .22);
}

.question-chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.question-chat-card .question-chat-head strong {
  display: block;
  margin-top: 2px;
  color: #24312f;
  font-size: 24px;
  line-height: 1.2;
}

.question-chat-kicker {
  display: inline-flex;
  color: #477f63;
  font-size: 13px;
  font-weight: 800;
}

.question-chat-card .profile-dialog-head p {
  margin: 4px 0 0;
  color: #66736b;
  font-size: 14px;
}

.question-chat-close {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  padding: 0;
  color: #40544b;
  background: #f3f8f1;
  font-size: 22px;
  line-height: 1;
}

.question-chat-presets,
.question-chat-actions,
.question-chat-key-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.question-chat-presets button {
  min-width: 0;
}

.question-chat-presets button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.question-chat-primary-action {
  width: 100%;
  display: grid;
  gap: 4px;
  justify-items: start;
  border: 1px solid #a9d0c2;
  border-radius: 12px;
  padding: 16px 18px;
  color: #ffffff;
  background: linear-gradient(135deg, #2f756d 0%, #3d8a68 100%);
  box-shadow: 0 10px 24px rgba(49, 117, 105, .22);
  text-align: left;
}

.question-chat-primary-action strong {
  font-size: 17px;
  line-height: 1.25;
}

.question-chat-primary-action span {
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  font-weight: 600;
}

.question-chat-custom {
  display: grid;
  gap: 9px;
  border: 1px solid #dbe6dc;
  border-radius: 12px;
  padding: 13px;
  color: #4d5f55;
  background: #ffffff;
  font-weight: 700;
}

.question-chat-custom span {
  color: #40544b;
  font-size: 14px;
}

.question-chat-custom textarea,
.question-chat-key-card textarea {
  width: 100%;
  min-height: 86px;
  resize: vertical;
  border: 1px solid #d4e0d6;
  border-radius: 10px;
  padding: 12px;
  color: #263b36;
  background: #f8fbf6;
  font: inherit;
  line-height: 1.55;
}

.question-chat-custom textarea:focus {
  outline: 3px solid rgba(71, 127, 99, .18);
  border-color: #77aa8d;
  background: #ffffff;
}

.question-chat-actions {
  justify-content: flex-end;
  margin-top: -6px;
}

.question-chat-actions button {
  min-width: 86px;
}

.question-chat-status {
  min-height: 22px;
  margin: 0;
  color: #66736b;
  font-size: 13px;
}

.question-chat-output {
  display: grid;
  gap: 12px;
}

.question-chat-panel {
  display: grid;
  gap: 10px;
  margin: 18px 0 4px;
  border: 1px solid #d8e6dc;
  border-radius: 12px;
  padding: 10px;
  background: #fbfdf9;
}

.question-chat-panel.collapsed {
  display: block;
  margin: 8px 0 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.question-chat-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #315f56;
}

.question-chat-panel.collapsed .question-chat-panel-head {
  position: relative;
  min-height: 14px;
  justify-content: flex-end;
  gap: 0;
}

.question-chat-panel.collapsed .question-chat-panel-head::before {
  content: "";
  position: absolute;
  left: 0;
  right: 58px;
  top: 50%;
  height: 1px;
  background: #dfe8df;
}

.question-chat-panel-head strong {
  font-size: 15px;
}

.question-chat-panel.collapsed .question-chat-panel-head strong {
  display: none;
}

.question-chat-panel-toggle {
  min-width: 64px;
  padding: 5px 10px;
  font-size: 12px;
}

.question-chat-panel.collapsed .question-chat-panel-toggle {
  min-width: 50px;
  min-height: 18px;
  padding: 1px 6px;
  border-color: #dfe8df;
  color: #718179;
  background: #fbfdf9;
  font-size: 10px;
  line-height: 1.2;
}

body.coach-pen-active .question-chat-panel {
  pointer-events: none;
  opacity: 0.42;
}

.question-chat-panel-body {
  display: grid;
  gap: 10px;
}

.question-chat-panel-body[hidden] {
  display: none;
}

.question-chat-result-panel {
  margin: 0;
  max-height: none;
  overflow: visible;
}

.question-chat-inline {
  display: grid;
  gap: 8px;
  margin: 0;
  border: 1px solid #d8e6dc;
  border-radius: 10px;
  padding: 10px;
  background: #fbfdf9;
}

.question-chat-inline label {
  display: grid;
  gap: 7px;
  color: #40544b;
  font-size: 13px;
  font-weight: 800;
}

.question-chat-inline textarea {
  width: 100%;
  min-height: 58px;
  resize: vertical;
  border: 1px solid #d4e0d6;
  border-radius: 8px;
  padding: 10px 11px;
  color: #263b36;
  background: #ffffff;
  font: inherit;
  line-height: 1.5;
}

.question-chat-inline textarea:focus {
  outline: 3px solid rgba(71, 127, 99, .16);
  border-color: #77aa8d;
}

.question-chat-inline-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.question-chat-inline-actions .question-chat-status {
  flex: 1 1 260px;
}

.question-chat-inline-actions button {
  min-width: 76px;
}

.question-chat-voice {
  color: #315f56;
  background: #f1f8f4;
}

.question-chat-voice[data-recording="1"] {
  color: #8b2e2e;
  border-color: #e1aaa2;
  background: #fff1ee;
}

.book-pet-chat {
  margin: 10px 0 12px;
  border-color: rgba(47, 111, 115, 0.18);
  background: rgba(251, 248, 239, 0.94);
}

.book-pet-chat.collapsed {
  margin: 6px 0 10px;
}

.book-pet-chat .question-chat-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #2f6f73;
}

.book-pet-chat-head-actions {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  pointer-events: auto;
}

.book-pet-chat-head-actions button {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.book-pet-chat-inline {
  background: rgba(255, 253, 247, 0.96);
}

.book-pet-chat-result .question-chat-answer-head strong {
  color: #2f6f73;
}

.book-pet-chat-empty {
  padding: 8px 2px 2px;
}

.book-pet-ask-dialog {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 66;
  display: grid;
  gap: 9px;
  width: min(312px, calc(100vw - 32px));
  max-height: min(72vh, 560px);
  overflow: auto;
  border: 1px solid rgba(47, 111, 115, 0.22);
  border-radius: 14px;
  padding: 12px;
  color: #263b36;
  background: rgba(255, 253, 247, 0.98);
  box-shadow: 0 16px 34px rgba(38, 55, 48, 0.18);
  pointer-events: auto;
  animation: petBubbleIn 180ms ease-out;
}

.book-pet-ask-dialog.hidden {
  display: none;
}

.book-pet-ask-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.book-pet-ask-head strong {
  color: #2f6f73;
  font-size: 15px;
}

.book-pet-ask-close {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
}

.book-pet-ask-tip {
  margin: 0;
  color: #60736c;
  font-size: 13px;
  line-height: 1.45;
}

.book-pet-ask-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.book-pet-ask-choice.hidden,
.book-pet-ask-form.hidden {
  display: none;
}

.book-pet-ask-form {
  display: grid;
  gap: 8px;
}

.book-pet-ask-form textarea {
  width: 100%;
  min-height: 78px;
  max-height: 28vh;
  resize: vertical;
  border: 1px solid #d4e0d6;
  border-radius: 9px;
  padding: 9px 10px;
  color: #263b36;
  background: #fff;
  font: inherit;
  line-height: 1.5;
}

.book-pet-ask-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.book-pet-ask-actions .question-chat-status {
  flex: 1 1 100%;
}

@media (max-width: 720px) {
  .book-pet-ask-dialog {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    width: min(288px, calc(100vw - 24px));
  }
}

@supports (height: -webkit-fill-available) {
  .book-pet-ask-dialog {
    max-height: -webkit-fill-available;
  }
}

.question-chat-result-list {
  display: grid;
  gap: 12px;
}

.question-chat-result-item {
  max-height: none;
  overflow: visible;
}

.question-chat-result,
.question-chat-key-card {
  display: grid;
  gap: 10px;
  max-height: none;
  overflow: visible;
  border: 1px solid #b9ddd8;
  border-left: 5px solid #7c5fb8;
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(135deg, #f3fbf8 0%, #fbf7ff 100%);
}

.question-chat-answer-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  color: #5a3f86;
}

.question-chat-answer-head span {
  margin-left: auto;
}

.question-chat-delete,
.question-chat-speak {
  padding: 5px 10px;
  font-size: 12px;
}

.question-chat-speak {
  color: #315f56;
  background: #f1f8f4;
}

.question-chat-result p,
.question-chat-key-card p {
  margin: 0;
  color: #2f293d;
  line-height: 1.65;
}

.question-chat-result p strong {
  color: #5a3f86;
}

.question-chat-result .question-chat-key-point {
  color: #9f1d1d;
  font-weight: 700;
}

.question-chat-result .question-chat-key-point strong {
  color: #b91c1c;
}

.question-chat-teacher-note {
  border: 1px solid #d9e6db;
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(46, 72, 62, .06);
}

.question-chat-result .question-chat-teacher-note strong {
  color: #477f63;
}

.question-chat-mind-map {
  display: grid;
  gap: 10px;
}

.question-chat-mind-branch {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr) auto minmax(120px, 1fr) auto minmax(120px, 1fr);
  align-items: stretch;
  gap: 8px;
}

.question-chat-mind-node {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  border: 1px solid #c9d8ce;
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 6px 16px rgba(46, 72, 62, 0.07);
}

.question-chat-mind-node span {
  color: #5a3f86;
  font-size: 12px;
  font-weight: 800;
}

.question-chat-mind-node strong {
  color: #263b36;
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.question-chat-mind-arrow {
  display: grid;
  place-items: center;
  color: #7c5fb8;
  font-weight: 900;
}

.question-chat-cache {
  border: 1px solid #c9d8ce;
  border-radius: 999px;
  padding: 3px 8px;
  color: #4d6a5a;
  background: #f2f8ef;
  font-size: 12px;
}

.question-chat-key-card {
  border-color: #f2d29a;
  border-left-color: #d8922a;
  background: #fff8ea;
}

.question-chat-key-card code {
  font-family: Consolas, "Microsoft YaHei", monospace;
}

@media (max-width: 640px) {
  .home-section-action .student-home-grid {
    grid-template-columns: 1fr;
  }

  .home-section-action .home-recent-books-card {
    grid-column: auto;
  }

  .question-chat-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .question-chat-card {
    max-height: calc(100dvh - 16px);
  }

  .question-chat-presets button {
    flex: 1 1 30%;
    min-width: 0;
  }

  .question-chat-mind-branch {
    grid-template-columns: 1fr;
  }

  .question-chat-mind-arrow {
    min-height: 10px;
    transform: rotate(90deg);
  }
}

@media print {
  body {
    background: #ffffff;
  }

  .toolbar,
  .tabs,
  .admin-menu,
  .paper-filters,
  .filters,
  .practice-timer,
  .chips,
  .paper-actions,
  .question button,
  #status {
    display: none;
  }

  .app {
    max-width: none;
    padding: 0;
  }

  .question {
    border: 0;
    page-break-inside: avoid;
  }

  .analysis-panel {
    display: none;
  }
}

@media (max-width: 760px) {
  #papersView > .subject-overview-strip-total-first,
  #practiceView > .subject-overview-strip-total-first {
    grid-template-columns: 1fr;
    overflow: hidden;
  }

  #papersView > .subject-overview-strip-total-first .subject-overview-head,
  #practiceView > .subject-overview-strip-total-first .subject-overview-head {
    border-right: 0;
    border-bottom: 1px solid rgba(199, 216, 203, 0.7);
    padding-right: 0;
    padding-bottom: 10px;
  }

  #papersView > .subject-overview-strip-total-first .subject-overview-items,
  #practiceView > .subject-overview-strip-total-first .subject-overview-items,
  #practiceView > .filters {
    grid-template-columns: 1fr;
  }

  #papersView > .subject-overview-strip-total-first .subject-overview-item,
  #practiceView > .subject-overview-strip-total-first .subject-overview-item,
  #practiceView .practice-start-control,
  #practiceView .practice-start-control button {
    width: 100%;
    min-width: 0;
  }

  #practiceView .practice-start-control {
    grid-template-columns: minmax(0, 1fr);
  }

  .floating-pet-bubble.place-right,
  .floating-pet-status.place-right {
    left: auto;
    right: 76px;
  }

  .floating-pet-bubble {
    max-width: min(236px, calc(100vw - 108px));
  }
}

@media (max-width: 900px) {
  .home-focus-layout,
  .home-section-action .growth-grid {
    grid-template-columns: 1fr;
  }

  .home-section-action .student-home-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  }

  .home-section-action .home-recent-books-card {
    grid-column: 1 / -1;
  }

  .parent-dashboard-head,
  .parent-overview-grid,
  .parent-dashboard-grid,
  .parent-dashboard-grid.detail,
  .parent-subject-row {
    grid-template-columns: 1fr;
  }

  .home-snapshot-stats {
    grid-template-columns: 1fr;
  }

  .home-focus-card h1 {
    font-size: 26px;
  }

  .home-partner-panel {
    min-height: 0;
  }

  .today-path-card {
    grid-template-columns: 1fr;
  }

  .today-learning-path {
    grid-template-columns: 1fr;
  }

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

  .analysis-diagnosis-grid {
    grid-template-columns: 1fr;
  }

  .analysis-next-steps article {
    grid-template-columns: 1fr;
  }

  .analysis-next-steps article button {
    grid-row: auto;
    grid-column: auto;
    justify-self: start;
  }

  .weekly-card .growth-meta,
  .today-card .growth-meta {
    grid-template-columns: 1fr;
  }

  .profile-pet-actions {
    grid-template-columns: 1fr;
  }

  .profile-pet-switch-grid {
    grid-template-columns: 1fr;
  }

  .safety-grid,
  .build-state,
  .home-focus-layout,
  .growth-grid,
  .growth-chart-row,
  .growth-grid.lower,
  .planner-layout,
  .practice-summary,
  .practice-timer,
  .quality-item,
  .safety-header,
  .backup-row,
  .achievement-wall-header,
  .learning-partner-card,
  .pet-select-header,
  .toolbar {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .pet-options {
    grid-template-columns: 1fr;
  }

  .pet-care-panel {
    grid-template-columns: 1fr;
  }

  .practice-timer {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

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

  .timer-segment-block {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(199, 214, 194, 0.9);
    padding-top: 10px;
  }

  .partner-shop-page {
    margin-top: 10px;
  }

  .partner-backpack-page {
    margin-top: 10px;
  }

  .partner-shop-hero {
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: 0;
    padding: 10px;
  }

  .partner-shop-pet {
    display: none;
  }

  .partner-shop-balance {
    justify-items: start;
    width: 100%;
    padding: 10px 12px;
  }

  .partner-shop-tabs {
    gap: 8px;
  }

  .partner-shop-tabs button {
    min-height: 28px;
    padding: 0 9px;
  }

  .partner-shop-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
  }

  .backpack-main {
    grid-template-columns: 1fr;
  }

  .backpack-slot-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
  }

  .pet-inventory-item,
  .pet-shop-item {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .pet-inventory-item button,
  .pet-shop-item button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .learning-partner-card,
  .pet-select-header {
    align-items: stretch;
  }

  .partner-avatar-pair {
    min-width: 0;
  }

  .partner-metrics {
    grid-template-columns: 1fr;
  }

  .toolbar-pet-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 100%;
  }

  .toolbar-pet-metrics .partner-metric {
    padding: 7px 8px;
  }

  .toolbar-pet-metrics .partner-metric-head {
    grid-template-columns: 30px max-content max-content;
    gap: 5px;
    font-size: 11px;
  }

  .toolbar-pet-metrics .partner-metric-head strong {
    min-width: 0;
    font-size: 13.5px;
  }

  .toolbar-pet-metrics .soft-icon {
    width: 30px;
    height: 30px;
    background-size: 26px 26px;
  }

  .student-mini-card {
    min-width: 0;
  }

  .partner-actions {
    justify-content: flex-start;
  }

  .floating-pet {
    right: 10px;
    bottom: 10px;
    width: 176px;
    height: 146px;
  }

  .floating-pet-stage {
    width: 176px;
    height: 146px;
  }

  .pet-character-floating {
    --pet-size: 104px;
  }

  .floating-pet.compact .pet-character-floating {
    --pet-size: 84px;
  }

  .floating-pet-bubble {
    right: 76px;
    bottom: 96px;
    max-width: min(236px, calc(100vw - 108px));
  }

  .floating-pet-bubble.place-right {
    left: 72px;
  }

  .floating-pet-bubble:not(.place-above) {
    bottom: 68px;
  }

  .floating-pet-status {
    right: 72px;
    bottom: 96px;
    width: 176px;
  }

  .floating-pet-status.place-right {
    left: 72px;
  }

  .floating-pet-status:not(.place-above) {
    bottom: 68px;
  }

  .growth-chart-row .growth-chart-card,
  .growth-chart-row .learning-reminder-card {
    grid-column: auto;
  }

  .toolbar {
    align-items: stretch;
  }

  .actions {
    justify-content: space-between;
  }

  .planner-day-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .analysis-overview,
  .analysis-layout,
  .home-section-record .growth-grid.lower,
  .planner-quick-add {
    grid-template-columns: 1fr;
  }

  .summary-card-head {
    align-items: flex-start;
  }

  .summary-duration {
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
  }

  .reset-learning-panel,
  .title-manager {
    grid-template-columns: 1fr;
    align-items: stretch;
    flex-direction: column;
  }

  .title-manager-meta {
    white-space: normal;
  }

  .title-manager-current {
    padding: 10px 0;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid #d8e5dc;
    border-bottom: 1px solid #d8e5dc;
  }

  .student-status-card {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .student-mini-card {
    width: 100%;
  }

  .coin-panel {
    justify-items: start;
    place-items: initial;
    grid-template-columns: auto auto;
    justify-content: space-between;
    min-height: 0;
    width: 100%;
  }

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

  .achievement-claim-notice {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .achievement-claim-notice button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .hidden-achievement-guide,
  .hidden-guide-steps {
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
  }

  .achievement-unlock-dialog {
    width: min(88vw, 620px);
  }
}

/* Compact achievement cards: final override */
#achievementWall.achievement-wall {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 14px;
}

#achievementWall .achievement-wall-card {
  display: grid;
  grid-template-rows: 112px minmax(0, 1fr);
  gap: 9px;
  min-height: 246px;
  padding: 12px;
  border-radius: 15px;
  overflow: visible;
}

#achievementWall .achievement-badge-frame {
  width: 100%;
  height: 112px;
  aspect-ratio: auto;
  overflow: visible;
  border-radius: 13px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.5) 64%, transparent 65%),
    linear-gradient(180deg, rgba(248, 253, 245, 0.78), rgba(255, 251, 240, 0.48));
}

#achievementWall .achievement-badge-frame img {
  width: 104px;
  height: 104px;
  object-fit: contain;
  object-position: center;
}

#achievementWall .achievement-card-body {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 7px;
  min-width: 0;
}

#achievementWall .achievement-card-head strong {
  display: -webkit-box;
  min-height: 40px;
  overflow: hidden;
  color: #203b34;
  font-size: 18px;
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#achievementWall .achievement-card-tags {
  margin-top: 6px;
  gap: 6px;
}

#achievementWall .achievement-state-pill,
#achievementWall .title-chip {
  padding: 4px 8px;
  font-size: 12px;
}

#achievementWall .achievement-progress-row {
  grid-template-columns: 1fr auto;
  gap: 7px;
  margin-top: 2px;
}

#achievementWall .achievement-card-foot {
  min-height: 20px;
  margin: 0;
  color: #718078;
  font-size: 12px;
}

#achievementWall .achievement-actions {
  margin-top: 0;
}

#achievementWall .achievement-actions button {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 12px;
}

#achievementWall .achievement-hover-detail {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 20;
  display: grid;
  width: min(280px, 78vw);
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(204, 219, 207, 0.95);
  border-radius: 13px;
  background: rgba(255, 255, 250, 0.98);
  box-shadow: 0 16px 34px rgba(45, 62, 54, 0.16);
  color: #30463e;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

#achievementWall .achievement-hover-detail::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 12px;
  height: 12px;
  border-right: 1px solid rgba(204, 219, 207, 0.95);
  border-bottom: 1px solid rgba(204, 219, 207, 0.95);
  background: rgba(255, 255, 250, 0.98);
  transform: translate(-50%, -6px) rotate(45deg);
}

#achievementWall .achievement-hover-detail p {
  margin: 0;
  color: #52635b;
  font-size: 13px;
}

#achievementWall .achievement-hover-detail span {
  color: #66766e;
  font-size: 12px;
}

#achievementWall .achievement-wall-card:hover .achievement-hover-detail {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 1180px) {
  #achievementWall.achievement-wall {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }
}

@media (max-width: 820px) {
  #achievementWall.achievement-wall {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
}



/* Contract parchment final end override. */
.profile-dialog.contract-book-dialog {
  width: min(1120px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  max-height: calc(100vh - 24px);
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.profile-dialog.contract-book-dialog form.contract-shell {
  position: relative;
  display: grid;
  width: 100%;
  max-height: calc(100vh - 24px);
  gap: 18px;
  padding: 34px 38px 30px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 3px solid #2b1a0f;
  border-radius: 18px;
  color: #1e2f25;
  font-family: "STKaiti", "KaiTi", "FZKai-Z03", "Songti SC", serif;
  background:
    radial-gradient(circle at 8% 9%, rgba(255, 234, 167, 0.4), transparent 15%),
    radial-gradient(circle at 90% 13%, rgba(54, 30, 14, 0.36), transparent 18%),
    radial-gradient(circle at 8% 88%, rgba(43, 26, 15, 0.4), transparent 18%),
    radial-gradient(circle at 91% 87%, rgba(43, 26, 15, 0.42), transparent 17%),
    repeating-linear-gradient(16deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 8px),
    linear-gradient(135deg, #e2c28a 0%, #cdae78 45%, #b98f52 100%);
  box-shadow:
    inset 0 0 0 2px rgba(224, 183, 92, 0.66),
    inset 0 0 46px rgba(43, 26, 15, 0.6),
    0 28px 70px rgba(23, 15, 8, 0.42);
}

.profile-dialog.contract-book-dialog form.contract-shell::before {
  content: "";
  position: absolute;
  inset: 16px;
  z-index: 0;
  border: 1px solid rgba(107, 67, 31, 0.72);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(224, 183, 92, 0.48), inset 0 0 34px rgba(43, 26, 15, 0.2);
  pointer-events: none;
}

.profile-dialog.contract-book-dialog form.contract-shell::after {
  content: "✦";
  position: absolute;
  right: 24px;
  bottom: 16px;
  z-index: 0;
  color: rgba(122, 46, 27, 0.4);
  font-size: 72px;
  transform: rotate(-12deg);
  pointer-events: none;
}

.profile-dialog.contract-book-dialog .contract-header,
.profile-dialog.contract-book-dialog .contract-summary-card,
.profile-dialog.contract-book-dialog .contract-days-grid,
.profile-dialog.contract-book-dialog .reward-card,
.profile-dialog.contract-book-dialog .signature-panel,
.profile-dialog.contract-book-dialog .contract-book-footer,
.profile-dialog.contract-book-dialog .contract-book-page-actions,
.profile-dialog.contract-book-dialog .parent-praise-dialog-status {
  position: relative;
  z-index: 1;
}

.profile-dialog.contract-book-dialog .contract-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(107, 67, 31, 0.56);
}

.profile-dialog.contract-book-dialog .contract-header::after {
  content: "❦  ◆  ❦";
  position: absolute;
  left: 50%;
  bottom: -14px;
  padding: 0 16px;
  color: #6b431f;
  background: #cdae78;
  font-size: 20px;
  letter-spacing: 8px;
  transform: translateX(-50%);
}

.profile-dialog.contract-book-dialog .contract-kicker {
  color: #5c4a32;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1px;
}

.profile-dialog.contract-book-dialog .contract-kicker i {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(107, 67, 31, 0.55);
  border-radius: 999px;
  color: #e0b75c;
  background: #173d2f;
  box-shadow: inset 0 0 0 2px rgba(224, 183, 92, 0.22);
}

.profile-dialog.contract-book-dialog .contract-header h2 {
  margin: 12px 0 0;
  color: #173d2f;
  font-size: clamp(42px, 5vw, 62px);
  font-weight: 800;
  letter-spacing: 4px;
  text-shadow: 0 1px 0 rgba(255, 232, 169, 0.62), 0 3px 12px rgba(58, 36, 20, 0.18);
}

.profile-dialog.contract-book-dialog .contract-header p {
  color: #5c4a32;
  font-size: 20px;
  font-weight: 800;
}

.profile-dialog.contract-book-dialog .contract-close-button {
  width: 58px;
  height: 58px;
  min-height: 58px;
  border: 2px solid #5c2617;
  border-radius: 999px;
  color: #f5d992;
  background: radial-gradient(circle at 34% 28%, #b8502c, #7a2e1b 62%, #3a2414 100%);
  box-shadow: inset 0 0 0 3px rgba(224, 183, 92, 0.28), 0 10px 20px rgba(43, 26, 15, 0.26);
  font-size: 30px;
}

.profile-dialog.contract-book-dialog .contract-summary-card {
  display: grid;
  grid-template-columns: minmax(150px, 0.82fr) repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 14px;
  border: 2px solid rgba(107, 67, 31, 0.76);
  border-radius: 16px;
  background: rgba(226, 194, 138, 0.42);
  box-shadow: inset 0 0 20px rgba(58, 36, 20, 0.16);
}

.profile-dialog.contract-book-dialog .contract-summary-lead,
.profile-dialog.contract-book-dialog .contract-rule-pill {
  min-height: 78px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.profile-dialog.contract-book-dialog .contract-summary-lead {
  border-right: 1px solid rgba(107, 67, 31, 0.45);
}

.profile-dialog.contract-book-dialog .contract-rule-pill {
  border-left: 1px solid rgba(107, 67, 31, 0.25);
}

.profile-dialog.contract-book-dialog .contract-summary-lead i,
.profile-dialog.contract-book-dialog .contract-rule-pill i,
.profile-dialog.contract-book-dialog .reward-card-copy i {
  width: 42px;
  height: 42px;
  border: 2px solid rgba(107, 67, 31, 0.62);
  border-radius: 999px;
  color: #173d2f;
  background: radial-gradient(circle at 35% 25%, #e0b75c, #a4752c);
  box-shadow: inset 0 0 0 2px rgba(255, 235, 170, 0.18);
}

.profile-dialog.contract-book-dialog .contract-summary-lead strong,
.profile-dialog.contract-book-dialog .contract-rule-pill strong {
  color: #1e2f25;
  font-size: 18px;
  font-weight: 900;
  white-space: nowrap;
}

.profile-dialog.contract-book-dialog .contract-summary-lead span {
  color: #5c4a32;
  font-size: 14px;
}

.profile-dialog.contract-book-dialog .contract-days-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.profile-dialog.contract-book-dialog .contract-day-card {
  position: relative;
  gap: 14px;
  padding: 18px 18px 26px;
  border: 2px solid rgba(107, 67, 31, 0.7);
  border-radius: 12px;
  background:
    radial-gradient(circle at 85% 92%, rgba(122, 46, 27, 0.34), transparent 12%),
    linear-gradient(135deg, rgba(238, 207, 146, 0.94), rgba(191, 146, 80, 0.9));
  box-shadow: inset 0 0 18px rgba(58, 36, 20, 0.16), 0 12px 26px rgba(43, 26, 15, 0.18);
}

.profile-dialog.contract-book-dialog .contract-day-card::before {
  content: "⌘";
  position: absolute;
  top: 8px;
  right: 10px;
  color: rgba(107, 67, 31, 0.36);
  font-size: 20px;
}

.profile-dialog.contract-book-dialog .contract-day-card::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: -12px;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(90, 37, 20, 0.55);
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #b8502c, #7a2e1b 70%);
  box-shadow: inset 0 0 0 3px rgba(224, 183, 92, 0.18), 0 6px 14px rgba(43, 26, 15, 0.24);
}

.profile-dialog.contract-book-dialog .contract-day-card-head strong {
  color: #173d2f;
  font-size: 30px;
}

.profile-dialog.contract-book-dialog .contract-day-card-head span {
  color: #5c4a32;
  font-size: 18px;
}

.profile-dialog.contract-book-dialog .contract-day-progress {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.profile-dialog.contract-book-dialog .day-progress-badge {
  min-height: 82px;
  border: 1px solid rgba(107, 67, 31, 0.45);
  border-radius: 999px;
  color: #173d2f;
  background: rgba(224, 183, 92, 0.34);
  box-shadow: inset 0 0 10px rgba(58, 36, 20, 0.12);
}

.profile-dialog.contract-book-dialog .day-progress-badge i {
  color: #e0b75c;
  background: #204c39;
}

.profile-dialog.contract-book-dialog .day-progress-badge b,
.profile-dialog.contract-book-dialog .day-progress-badge strong {
  color: #173d2f;
  white-space: nowrap;
}

.profile-dialog.contract-book-dialog .contract-day-checklist {
  border-top: 1px dashed rgba(107, 67, 31, 0.55);
}

.profile-dialog.contract-book-dialog .contract-day-checklist span,
.profile-dialog.contract-book-dialog .contract-day-checklist em {
  color: #243a2e;
  font-size: 16px;
  font-weight: 800;
}

.profile-dialog.contract-book-dialog .contract-day-checklist span::before,
.profile-dialog.contract-book-dialog .contract-day-checklist em::before {
  border-color: #6b431f;
  background: rgba(226, 194, 138, 0.82);
}

.profile-dialog.contract-book-dialog .contract-day-checklist span.done::before,
.profile-dialog.contract-book-dialog .contract-day-checklist em.done::before {
  border-color: #173d2f;
  background: #173d2f;
}

.profile-dialog.contract-book-dialog .reward-card {
  display: grid;
  grid-template-columns: minmax(190px, 0.38fr) minmax(0, 1fr);
  border: 2px solid rgba(107, 67, 31, 0.74);
  border-radius: 16px;
  background: radial-gradient(circle at 94% 65%, rgba(32, 76, 57, 0.12), transparent 16%), rgba(226, 194, 138, 0.42);
  box-shadow: inset 0 0 18px rgba(58, 36, 20, 0.14);
}

.profile-dialog.contract-book-dialog .reward-card-copy strong {
  color: #173d2f;
  font-size: 26px;
}

.profile-dialog.contract-book-dialog .reward-card-copy span,
.profile-dialog.contract-book-dialog .reward-card-input small {
  color: #5c4a32;
}

.profile-dialog.contract-book-dialog .reward-card-input textarea,
.profile-dialog.contract-book-dialog .reward-card-input p {
  min-height: 62px;
  border: 0;
  border-bottom: 2px solid rgba(107, 67, 31, 0.72);
  border-radius: 0;
  color: #173d2f;
  background: transparent;
  font-family: "STKaiti", "KaiTi", "FZKai-Z03", "Songti SC", serif;
  font-size: 22px;
  font-weight: 800;
  box-shadow: none;
}

.profile-dialog.contract-book-dialog .signature-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(140px, 0.58fr) minmax(140px, 0.58fr) 128px;
  gap: 14px;
  align-items: center;
  border: 2px solid rgba(107, 67, 31, 0.76);
  border-radius: 18px;
  background: rgba(43, 26, 15, 0.18);
  box-shadow: inset 0 0 22px rgba(43, 26, 15, 0.18);
}

.profile-dialog.contract-book-dialog .contract-agree-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.profile-dialog.contract-book-dialog .contract-agree-line {
  min-height: 48px;
  border: 1px solid rgba(107, 67, 31, 0.68);
  border-radius: 8px;
  color: #1e2f25;
  background: rgba(226, 194, 138, 0.58);
  font-size: 16px;
}

.profile-dialog.contract-book-dialog .contract-agree-line input {
  width: 18px;
  height: 18px;
  accent-color: #173d2f;
}

.profile-dialog.contract-book-dialog .pin-input {
  color: #3a2414;
  font-size: 16px;
}

.profile-dialog.contract-book-dialog .pin-input input {
  border: 1px solid rgba(107, 67, 31, 0.68);
  border-radius: 8px;
  color: #173d2f;
  background: rgba(226, 194, 138, 0.58);
  font-family: Georgia, "Times New Roman", serif;
}

.profile-dialog.contract-book-dialog .primary-contract-button {
  display: grid;
  width: 118px;
  min-width: 118px;
  height: 118px;
  min-height: 118px;
  place-items: center;
  padding: 0 18px;
  border: 3px solid rgba(224, 183, 92, 0.62);
  border-radius: 999px;
  color: #f8eac0;
  background: radial-gradient(circle at 32% 28%, #b8502c, #9b3d24 46%, #7a2e1b 74%, #3a2414 100%);
  box-shadow: inset 0 0 0 5px rgba(43, 26, 15, 0.2), 0 13px 22px rgba(43, 26, 15, 0.34);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.18;
  white-space: normal;
}

.profile-dialog.contract-book-dialog .primary-contract-button:disabled {
  opacity: 0.52;
  filter: grayscale(0.25);
}

.profile-dialog.contract-book-dialog .contract-book-footer {
  color: #3a2414;
  font-size: 18px;
  font-weight: 900;
}

@media (max-width: 1080px) {
  .profile-dialog.contract-book-dialog .signature-panel {
    grid-template-columns: 1fr 1fr 128px;
  }

  .profile-dialog.contract-book-dialog .contract-agree-row {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .profile-dialog.contract-book-dialog form.contract-shell {
    padding: 26px 22px;
  }

  .profile-dialog.contract-book-dialog .contract-summary-card,
  .profile-dialog.contract-book-dialog .contract-days-grid,
  .profile-dialog.contract-book-dialog .reward-card,
  .profile-dialog.contract-book-dialog .signature-panel,
  .profile-dialog.contract-book-dialog .contract-agree-row {
    grid-template-columns: 1fr;
  }

  .profile-dialog.contract-book-dialog .primary-contract-button {
    justify-self: center;
  }
}

/* Restore light contract skin after parchment experiment. */
.profile-dialog.contract-book-dialog {
  width: min(1120px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.profile-dialog.contract-book-dialog form.contract-shell {
  position: relative;
  display: grid;
  width: 100%;
  max-height: calc(100vh - 32px);
  gap: 14px;
  padding: 26px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid rgba(215, 230, 216, 0.95);
  border-radius: 24px;
  color: #24463a;
  font-family: inherit;
  background:
    radial-gradient(circle at 88% 8%, rgba(93, 155, 118, 0.11), transparent 18%),
    linear-gradient(180deg, #fffdf7 0%, #f5fbf6 100%);
  box-shadow: 0 22px 54px rgba(36, 70, 58, 0.16);
}

.profile-dialog.contract-book-dialog form.contract-shell::before,
.profile-dialog.contract-book-dialog form.contract-shell::after,
.profile-dialog.contract-book-dialog .contract-header::after,
.profile-dialog.contract-book-dialog .contract-day-card::before,
.profile-dialog.contract-book-dialog .contract-day-card::after {
  content: none;
}

.profile-dialog.contract-book-dialog .contract-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 0;
  padding-bottom: 0;
  border: 0;
}

.profile-dialog.contract-book-dialog .contract-kicker {
  color: #6d7f73;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
}

.profile-dialog.contract-book-dialog .contract-kicker i {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 12px;
  color: #4f9a70;
  background: rgba(243, 250, 245, 0.96);
  box-shadow: none;
}

.profile-dialog.contract-book-dialog .contract-header h2 {
  margin: 6px 0 0;
  color: #24463a;
  font-family: inherit;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 950;
  letter-spacing: 0;
  text-shadow: none;
}

.profile-dialog.contract-book-dialog .contract-header p {
  margin: 6px 0 0;
  color: #6d7f73;
  font-size: 16px;
  font-weight: 800;
}

.profile-dialog.contract-book-dialog .contract-close-button {
  width: 42px;
  height: 42px;
  min-height: 42px;
  border: 1px solid #d7e6d8;
  border-radius: 14px;
  color: #24463a;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: none;
  font-size: 24px;
}

.profile-dialog.contract-book-dialog .contract-summary-card {
  display: grid;
  grid-template-columns: minmax(150px, 0.72fr) repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border: 1px solid #d7e6d8;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
}

.profile-dialog.contract-book-dialog .contract-summary-lead,
.profile-dialog.contract-book-dialog .contract-rule-pill {
  min-height: 70px;
  border: 0;
  border-radius: 16px;
  background: #f3faf5;
}

.profile-dialog.contract-book-dialog .contract-summary-lead i,
.profile-dialog.contract-book-dialog .contract-rule-pill i,
.profile-dialog.contract-book-dialog .reward-card-copy i {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 13px;
  color: #4f9a70;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: none;
}

.profile-dialog.contract-book-dialog .contract-summary-lead strong,
.profile-dialog.contract-book-dialog .contract-rule-pill strong {
  color: #24463a;
  font-size: 16px;
  font-weight: 900;
  white-space: normal;
}

.profile-dialog.contract-book-dialog .contract-summary-lead span {
  color: #6d7f73;
  font-size: 13px;
}

.profile-dialog.contract-book-dialog .contract-days-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.profile-dialog.contract-book-dialog .contract-day-card {
  gap: 12px;
  padding: 18px;
  border: 1px solid #dde9de;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 28px rgba(36, 70, 58, 0.08);
}

.profile-dialog.contract-book-dialog .contract-day-card-head strong {
  color: #24463a;
  font-size: 27px;
}

.profile-dialog.contract-book-dialog .contract-day-card-head span {
  color: #6d7f73;
  font-size: 16px;
}

.profile-dialog.contract-book-dialog .contract-day-progress {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.profile-dialog.contract-book-dialog .day-progress-badge {
  min-height: 76px;
  border: 0;
  border-radius: 14px;
  color: #24463a;
  background: #fff4d7;
  box-shadow: none;
}

.profile-dialog.contract-book-dialog .day-progress-badge i {
  color: #d6921e;
  background: rgba(255, 255, 255, 0.78);
}

.profile-dialog.contract-book-dialog .day-progress-badge b {
  color: #24463a;
  font-size: 11px;
}

.profile-dialog.contract-book-dialog .day-progress-badge strong {
  color: #24463a;
  font-size: 17px;
}

.profile-dialog.contract-book-dialog .contract-day-checklist {
  border-top: 1px dashed rgba(215, 230, 216, 0.95);
}

.profile-dialog.contract-book-dialog .contract-day-checklist span,
.profile-dialog.contract-book-dialog .contract-day-checklist em {
  color: #40564c;
  font-size: 14px;
  font-weight: 760;
}

.profile-dialog.contract-book-dialog .contract-day-checklist span::before,
.profile-dialog.contract-book-dialog .contract-day-checklist em::before {
  border-color: #5d9b76;
  background: #ffffff;
}

.profile-dialog.contract-book-dialog .contract-day-checklist span.done::before,
.profile-dialog.contract-book-dialog .contract-day-checklist em.done::before {
  border-color: #4f9a70;
  background: #5d9b76;
}

.profile-dialog.contract-book-dialog .reward-card {
  display: grid;
  grid-template-columns: minmax(190px, 0.45fr) minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  border: 1px solid #d7e6d8;
  border-radius: 22px;
  background: #f3faf5;
  box-shadow: none;
}

.profile-dialog.contract-book-dialog .reward-card-copy strong {
  color: #24463a;
  font-size: 24px;
}

.profile-dialog.contract-book-dialog .reward-card-copy span,
.profile-dialog.contract-book-dialog .reward-card-input small {
  color: #6d7f73;
}

.profile-dialog.contract-book-dialog .reward-card-input textarea,
.profile-dialog.contract-book-dialog .reward-card-input p {
  min-height: 76px;
  border: 1px solid #cfe0d1;
  border-radius: 14px;
  padding: 14px 16px;
  color: #24463a;
  background: rgba(255, 255, 255, 0.9);
  font-family: inherit;
  font-size: 16px;
  font-weight: inherit;
  box-shadow: none;
}

.profile-dialog.contract-book-dialog .signature-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.7fr) minmax(150px, 0.7fr) auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  border: 1px solid #cfe0d1;
  border-radius: 22px;
  background: rgba(243, 250, 245, 0.94);
  box-shadow: 0 12px 28px rgba(36, 70, 58, 0.08);
}

.profile-dialog.contract-book-dialog .contract-agree-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-dialog.contract-book-dialog .contract-agree-line {
  min-height: 44px;
  border: 1px solid #d7e6d8;
  border-radius: 12px;
  color: #40564c;
  background: #ffffff;
  font-size: 15px;
  font-weight: 850;
}

.profile-dialog.contract-book-dialog .contract-agree-line input {
  width: 16px;
  height: 16px;
  accent-color: #5d9b76;
}

.profile-dialog.contract-book-dialog .pin-input {
  color: #40564c;
  font-size: 14px;
  font-weight: 900;
}

.profile-dialog.contract-book-dialog .pin-input input {
  min-height: 46px;
  border: 1px solid #cfe0d1;
  border-radius: 14px;
  color: #24463a;
  background: #ffffff;
  font-family: inherit;
  font-size: 18px;
}

.profile-dialog.contract-book-dialog .primary-contract-button {
  width: auto;
  min-width: max-content;
  height: auto;
  min-height: 54px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(180deg, #5d9b76 0%, #2f7655 100%);
  box-shadow: 0 14px 26px rgba(47, 118, 85, 0.24);
  font-family: inherit;
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.profile-dialog.contract-book-dialog .primary-contract-button:disabled {
  opacity: 0.46;
  filter: none;
  cursor: not-allowed;
  box-shadow: none;
}

.profile-dialog.contract-book-dialog .contract-book-footer {
  margin: -4px 0 0;
  color: #6d7f73;
  text-align: center;
  font-size: 14px;
  font-weight: 850;
}

@media (max-width: 980px) {
  .profile-dialog.contract-book-dialog .contract-summary-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-dialog.contract-book-dialog .contract-days-grid,
  .profile-dialog.contract-book-dialog .signature-panel {
    grid-template-columns: 1fr;
  }
}

.planner-task-card.auto-complete-task input[type="checkbox"],
.planner-task-today input[type="checkbox"]:disabled {
  cursor: default;
  opacity: 0.68;
}

.planner-task-card.auto-complete-task input[type="checkbox"]:not(:checked),
.planner-task-today input[type="checkbox"]:disabled:not(:checked) {
  filter: grayscale(0.25);
}

.planner-quick-add.plan-locked {
  opacity: 0.72;
}

.planner-quick-add.plan-locked input,
.planner-quick-add.plan-locked select,
.planner-quick-add.plan-locked button,
.planner-task-card.plan-locked-task .planner-task-remove {
  cursor: not-allowed;
}

.planner-task-card.plan-locked-task {
  cursor: default;
}

.topic-family-panel {
  margin: 0 0 16px;
}

#practiceView.topic-card-mode {
  padding-top: 8px;
}

#practiceView.topic-card-mode > .subject-overview-strip {
  margin-top: 0;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 251, 0.72);
  box-shadow: none;
}

#practiceView.topic-card-mode > .subject-overview-strip-total-first {
  grid-template-columns: minmax(160px, 0.55fr) minmax(0, 1.45fr);
  gap: 12px;
}

#practiceView.topic-card-mode > .subject-overview-strip-total-first .subject-overview-head {
  border-right-color: rgba(207, 220, 211, 0.58);
}

#practiceView.topic-card-mode > .subject-overview-strip-total-first .subject-overview-total-line {
  column-gap: 8px;
}

#practiceView.topic-card-mode > .subject-overview-strip-total-first .subject-overview-total-line span {
  color: #65766d;
  font-size: 13px;
  font-weight: 800;
}

#practiceView.topic-card-mode > .subject-overview-strip-total-first .subject-overview-total-line strong {
  color: #27483c;
  font-size: 24px;
}

#practiceView.topic-card-mode > .subject-overview-strip-total-first .subject-overview-total-line strong em {
  font-size: 13px;
}

#practiceView.topic-card-mode > .subject-overview-strip-total-first .subject-overview-items {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#practiceView.topic-card-mode > .subject-overview-strip-total-first .subject-overview-item {
  min-height: 42px;
  padding: 8px 10px 9px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.64);
}

#practiceView.topic-card-mode > .subject-overview-strip-total-first .subject-overview-item span {
  font-size: 13px;
}

#practiceView.topic-card-mode > .subject-overview-strip-total-first .subject-overview-item strong {
  font-size: 16px;
}

#practiceView.topic-card-mode > .filters {
  margin-top: 0;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 251, 0.76);
  box-shadow: none;
}

#practiceView.topic-card-mode > .filters label {
  color: #6b796f;
  font-size: 12px;
}

#practiceView.topic-card-mode > .filters select {
  min-height: 38px;
  border-radius: 10px;
}

.filters.topic-card-mode {
  grid-template-columns: repeat(3, minmax(160px, 220px));
  align-items: end;
  justify-content: start;
}

.filters.topic-card-mode .practice-legacy-filter {
  display: none;
}

#practiceView .filters.topic-card-mode .practice-legacy-filter {
  display: none;
}

.topic-family-panel.hidden {
  display: none;
}

.topic-family-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 2px 0 12px;
}

.topic-family-head span {
  display: block;
  color: #6a7a72;
  font-size: 12px;
  font-weight: 800;
}

.topic-family-head strong {
  display: block;
  color: #20352e;
  font-size: 22px;
  line-height: 1.2;
}

.topic-family-head p {
  margin: 0;
  color: #74827b;
  font-size: 12px;
  font-weight: 700;
}

.topic-family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 12px;
}

.topic-family-card {
  min-width: 0;
  min-height: 142px;
  padding: 14px;
  border: 1px solid rgba(94, 120, 108, 0.18);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(37, 75, 59, 0.045);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.topic-family-card:focus-visible,
.topic-family-card:hover {
  border-color: rgba(47, 118, 85, 0.38);
  box-shadow: 0 8px 18px rgba(37, 75, 59, 0.08);
  outline-offset: 2px;
}

.topic-family-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.topic-family-card-main {
  min-width: 0;
}

.topic-family-card-main h3 {
  margin: 0;
  color: #20352e;
  font-size: 17px;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.topic-family-card-metrics {
  display: grid;
  justify-items: end;
  gap: 3px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.topic-family-card-metrics strong {
  color: #2f7655;
  font-size: 14px;
  font-weight: 900;
}

.topic-family-card-metrics span {
  color: #75837c;
  font-size: 12px;
  font-weight: 800;
}

.topic-family-progress {
  display: grid;
  gap: 6px;
  margin: 10px 0 9px;
}

.topic-family-progress-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #75837c;
  font-size: 12px;
  font-weight: 800;
}

.topic-family-progress-label strong {
  color: #315f43;
  font-weight: 900;
  white-space: nowrap;
}

.topic-family-progress-track {
  height: 8px;
  overflow: hidden;
  border: 1px solid rgba(75, 124, 95, 0.12);
  border-radius: 999px;
  background: #eef4ef;
}

.topic-family-progress-track span {
  display: block;
  width: var(--topic-family-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #78b07b, #2f7655);
  transition: width 0.2s ease;
}

.topic-subfamily-empty {
  display: block;
  margin-top: 12px;
  color: #7a867f;
  font-size: 12px;
  font-weight: 700;
}

.topic-subfamily-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.topic-subfamily-list button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid rgba(86, 126, 104, 0.2);
  border-radius: 8px;
  background: #f7faf8;
  color: #263f36;
  box-shadow: none;
  text-align: left;
}

.topic-subfamily-list button span {
  max-width: 100%;
  font-size: 12px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.topic-subfamily-list button em {
  color: #7d8b84;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}

#practiceView.topic-card-mode > .practice-timer {
  position: static;
  grid-template-columns: minmax(130px, 0.75fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 10px;
  min-height: 56px;
  margin-top: 16px;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 251, 0.72);
  box-shadow: none;
}

#practiceView.topic-card-mode > .practice-timer .timer-icon {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  border-radius: 10px;
}

#practiceView.topic-card-mode > .practice-timer .timer-icon::before {
  left: 14px;
  top: 7px;
}

#practiceView.topic-card-mode > .practice-timer .timer-icon::after {
  left: 15px;
  top: 17px;
}

#practiceView.topic-card-mode > .practice-timer .timer-display-block,
#practiceView.topic-card-mode > .practice-timer .timer-segment-block {
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(247, 251, 247, 0.72);
}

#practiceView.topic-card-mode > .practice-timer .timer-display-block strong,
#practiceView.topic-card-mode > .practice-timer .timer-segment-block strong {
  font-size: 22px;
}

#practiceView.topic-card-mode > .practice-timer .timer-actions button {
  min-height: 38px;
}

body.practice-topic-card-mode .floating-pet {
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  width: 156px;
  height: 126px;
}

body.practice-topic-card-mode .floating-pet-stage {
  width: 156px;
  height: 126px;
}

body.practice-topic-card-mode .pet-character-floating {
  --pet-size: 82px;
}

body.practice-topic-card-mode .floating-pet-bubble {
  display: none;
}

@media (max-width: 720px) {
  #practiceView.topic-card-mode > .subject-overview-strip-total-first {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #practiceView.topic-card-mode > .subject-overview-strip-total-first .subject-overview-head {
    border-right: 0;
    border-bottom: 0;
    padding-bottom: 0;
  }

  #practiceView.topic-card-mode > .subject-overview-strip-total-first .subject-overview-total-line {
    align-items: baseline;
    justify-content: space-between;
  }

  #practiceView.topic-card-mode > .subject-overview-strip-total-first .subject-overview-total-line span {
    font-size: 12px;
  }

  #practiceView.topic-card-mode > .subject-overview-strip-total-first .subject-overview-total-line strong {
    font-size: 20px;
  }

  #practiceView.topic-card-mode > .subject-overview-strip-total-first .subject-overview-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  #practiceView.topic-card-mode > .subject-overview-strip-total-first .subject-overview-item {
    grid-template-columns: 1fr;
    gap: 2px;
    min-height: 38px;
    padding: 6px 7px 8px;
  }

  #practiceView.topic-card-mode > .subject-overview-strip-total-first .subject-overview-item span {
    font-size: 12px;
  }

  #practiceView.topic-card-mode > .subject-overview-strip-total-first .subject-overview-item strong {
    font-size: 14px;
  }

  #practiceView.topic-card-mode > .subject-overview-strip-total-first .subject-overview-item i {
    height: 3px;
  }

  .topic-family-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .topic-family-grid {
    grid-template-columns: 1fr;
  }

  .filters.topic-card-mode {
    grid-template-columns: 1fr;
  }

  #practiceView.topic-card-mode > .practice-timer {
    grid-template-columns: 1fr;
  }

  body.practice-topic-card-mode .floating-pet {
    display: none;
  }

  .topic-family-card {
    min-height: 0;
  }

}

/* Practice training compact entry override */
#practiceView:not(.topic-card-mode) {
  padding-top: 4px;
}

body[data-current-view="practice"] .home-return-bar button {
  min-height: 36px;
  border-color: rgba(203, 218, 208, 0.86);
  border-radius: 10px;
  background: rgba(255, 255, 252, 0.86);
  color: #385c4d;
  box-shadow: none;
  font-size: 13px;
}

#practiceView:not(.topic-card-mode) > .subject-overview-strip,
#practiceView:not(.topic-card-mode) > .practice-chapter-stats .practice-chapter-details,
#practiceView:not(.topic-card-mode) > .filters,
#practiceView:not(.topic-card-mode) > .chips div,
#practiceView:not(.topic-card-mode) > .practice-timer {
  border-color: rgba(203, 218, 208, 0.86);
  border-radius: 14px;
  background: rgba(255, 255, 252, 0.9);
  box-shadow: none;
}

#practiceView:not(.topic-card-mode) > .subject-overview-strip,
#practiceView:not(.topic-card-mode) > .subject-overview-strip-total-first {
  grid-template-columns: minmax(170px, 0.45fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  padding: 10px 12px;
}

#practiceView:not(.topic-card-mode) .subject-overview-head {
  padding-right: 10px;
}

#practiceView:not(.topic-card-mode) > .subject-overview-strip-total-first .subject-overview-total-line {
  column-gap: 8px;
  row-gap: 2px;
}

#practiceView:not(.topic-card-mode) > .subject-overview-strip-total-first .subject-overview-total-line span {
  color: #5f7068;
  font-size: 13px;
  font-weight: 760;
}

#practiceView:not(.topic-card-mode) > .subject-overview-strip-total-first .subject-overview-total-line strong {
  color: #27483c;
  font-size: 26px;
  font-weight: 780;
  letter-spacing: 0;
}

#practiceView:not(.topic-card-mode) > .subject-overview-strip-total-first .subject-overview-total-line strong em {
  font-size: 13px;
  font-weight: 720;
}

#practiceView:not(.topic-card-mode) .subject-overview-items {
  gap: 8px;
}

#practiceView:not(.topic-card-mode) > .subject-overview-strip-total-first .subject-overview-item,
#practiceView:not(.topic-card-mode) .subject-overview-item {
  min-height: 44px;
  padding: 8px 10px 10px;
  border-color: rgba(213, 225, 216, 0.86);
  border-radius: 10px;
  background: #fffffc;
}

#practiceView:not(.topic-card-mode) > .subject-overview-strip-total-first .subject-overview-item span,
#practiceView:not(.topic-card-mode) .subject-overview-item span {
  font-size: 13px;
  font-weight: 720;
}

#practiceView:not(.topic-card-mode) > .subject-overview-strip-total-first .subject-overview-item strong,
#practiceView:not(.topic-card-mode) .subject-overview-item strong {
  font-size: 17px;
  font-weight: 780;
  letter-spacing: 0;
}

#practiceView:not(.topic-card-mode) .subject-overview-item i {
  height: 4px;
  opacity: 0.7;
}

#practiceView:not(.topic-card-mode) > .practice-chapter-stats {
  margin: 0 0 8px;
}

#practiceView:not(.topic-card-mode) .practice-chapter-details summary {
  min-height: 40px;
  padding: 9px 13px;
  font-weight: 760;
}

#practiceView:not(.topic-card-mode) .practice-chapter-details summary span {
  font-size: 14px;
}

#practiceView:not(.topic-card-mode) .practice-chapter-details summary strong {
  color: #7a857f;
  font-size: 12px;
  font-weight: 700;
}

#practiceView:not(.topic-card-mode) .practice-chapter-details summary::after {
  padding: 3px 9px;
  font-weight: 700;
}

#practiceView:not(.topic-card-mode) .practice-chapter-body {
  gap: 10px;
  padding: 10px 12px 12px;
}

#practiceView:not(.topic-card-mode) .practice-chapter-bar {
  min-height: 34px;
  padding: 5px 9px;
  border-radius: 8px;
  background: #fffffc;
}

#practiceView:not(.topic-card-mode) .practice-chapter-bar span {
  width: 21px;
  height: 21px;
  color: #355e4e;
  background: #eaf4ee;
  font-weight: 760;
}

#practiceView:not(.topic-card-mode) .practice-chapter-bar strong,
#practiceView:not(.topic-card-mode) .practice-chapter-bar em {
  font-size: 13px;
}

#practiceView:not(.topic-card-mode) .practice-chapter-bar strong {
  font-weight: 720;
}

#practiceView:not(.topic-card-mode) .practice-chapter-bar em {
  font-weight: 760;
}

#practiceView:not(.topic-card-mode) .practice-chapter-bar i {
  background: linear-gradient(90deg, rgba(140, 191, 154, 0.2), rgba(140, 191, 154, 0.04));
}

#practiceView:not(.topic-card-mode) > .filters {
  grid-template-columns: minmax(120px, 0.65fr) minmax(160px, 0.95fr) minmax(110px, 0.65fr) minmax(128px, 0.72fr) minmax(190px, 0.95fr) minmax(150px, auto);
  gap: 8px;
  margin-top: 8px;
  padding: 10px 12px;
}

#practiceView:not(.topic-card-mode) .filters label,
#practiceView:not(.topic-card-mode) > .filters label {
  gap: 5px;
  color: #66766e;
  font-size: 12px;
  font-weight: 700;
}

#practiceView:not(.topic-card-mode) select,
#practiceView:not(.topic-card-mode) #codeInput {
  min-height: 36px;
  border-color: rgba(190, 207, 196, 0.92);
  border-radius: 10px;
  background-color: #fffffc;
  color: #31443f;
  font-size: 14px;
  font-weight: 650;
}

#practiceView:not(.topic-card-mode) .practice-locator-control {
  grid-template-columns: minmax(88px, 1fr) minmax(62px, max-content);
  gap: 7px;
}

#practiceView:not(.topic-card-mode) .practice-start-control {
  grid-template-columns: minmax(94px, max-content);
}

#practiceView:not(.topic-card-mode) #locateBtn,
#practiceView:not(.topic-card-mode) .practice-start-control button {
  min-height: 36px;
  border-color: rgba(87, 137, 112, 0.55);
  border-radius: 10px;
  background: #eaf4ee;
  color: #285d53;
  box-shadow: none;
  font-size: 14px;
  font-weight: 760;
}

#practiceView:not(.topic-card-mode) > .chips {
  margin-top: 8px;
}

#practiceView:not(.topic-card-mode) > .chips div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 9px 12px;
}

#practiceView:not(.topic-card-mode) > .chips strong {
  margin-right: 4px;
  color: #40544b;
  font-size: 15px;
  font-weight: 760;
}

#practiceView:not(.topic-card-mode) > .chips label {
  min-height: 28px;
  padding: 0 9px;
  border-color: rgba(213, 225, 216, 0.86);
  border-radius: 8px;
  background: #fffffc;
  font-size: 12px;
}

#practiceView:not(.topic-card-mode) > .practice-timer {
  position: static;
  grid-template-columns: minmax(150px, 0.6fr) minmax(160px, 0.8fr) minmax(160px, 0.8fr) auto;
  gap: 8px;
  min-height: 54px;
  margin-top: 10px;
  padding: 8px 10px;
}

#practiceView:not(.topic-card-mode) .timer-icon {
  flex-basis: 32px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

#practiceView:not(.topic-card-mode) .timer-icon::before {
  top: 7px;
  left: 14px;
}

#practiceView:not(.topic-card-mode) .timer-icon::after {
  top: 17px;
  left: 15px;
}

#practiceView:not(.topic-card-mode) .practice-timer span {
  font-size: 12px;
}

#practiceView:not(.topic-card-mode) .practice-timer small {
  font-size: 11px;
}

#practiceView:not(.topic-card-mode) .timer-display-block,
#practiceView:not(.topic-card-mode) .timer-segment-block {
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid rgba(213, 225, 216, 0.72);
  border-radius: 10px;
  background: #fffffc;
}

#practiceView:not(.topic-card-mode) .practice-timer strong,
#practiceView:not(.topic-card-mode) > .practice-timer .timer-display-block strong {
  font-size: 22px;
  letter-spacing: 0;
}

#practiceView:not(.topic-card-mode) .timer-actions .timer-primary {
  min-width: 94px;
  min-height: 38px;
  border-color: rgba(87, 137, 112, 0.62);
  background: #eaf4ee;
  color: #285d53;
  box-shadow: none;
  font-size: 14px;
}

#practiceView:not(.topic-card-mode) .timer-actions .timer-primary:hover {
  background: #dfeee5;
}

#practiceView:not(.topic-card-mode) .timer-more-menu summary {
  min-height: 38px;
  border-radius: 10px;
}

@media (max-width: 980px) {
  #practiceView:not(.topic-card-mode) > .subject-overview-strip,
  #practiceView:not(.topic-card-mode) > .subject-overview-strip-total-first,
  #practiceView:not(.topic-card-mode) > .filters,
  #practiceView:not(.topic-card-mode) > .practice-timer {
    grid-template-columns: 1fr;
  }

  #practiceView:not(.topic-card-mode) .subject-overview-head {
    padding-right: 0;
    border-right: 0;
  }

  #practiceView:not(.topic-card-mode) .subject-overview-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #practiceView:not(.topic-card-mode) .timer-actions {
    justify-content: flex-start;
  }
}

/* Topic training light workspace override */
#practiceView.topic-card-mode {
  padding-top: 4px;
}

#practiceView.topic-card-mode > .subject-overview-strip,
#practiceView.topic-card-mode > .filters,
#practiceView.topic-card-mode > .practice-timer {
  border-color: rgba(203, 218, 208, 0.86);
  border-radius: 14px;
  background: rgba(255, 255, 252, 0.9);
  box-shadow: none;
}

#practiceView.topic-card-mode > .subject-overview-strip {
  padding: 11px 12px;
}

#practiceView.topic-card-mode > .subject-overview-strip-total-first .subject-overview-item {
  border-color: rgba(213, 225, 216, 0.86);
  border-radius: 10px;
  background: #fffffc;
}

#practiceView.topic-card-mode > .filters {
  padding: 10px 12px;
}

#practiceView.topic-card-mode > .filters label {
  color: #6d7a72;
  font-size: 12px;
  font-weight: 720;
}

#practiceView.topic-card-mode > .filters select {
  border-color: rgba(190, 207, 196, 0.92);
  background-color: #fffffc;
  color: #31443f;
  font-weight: 650;
}

.topic-family-head {
  align-items: center;
  margin: 4px 0 10px;
  padding: 0 2px;
}

.topic-family-head span {
  color: #76837c;
  font-size: 12px;
  font-weight: 720;
}

.topic-family-head strong {
  color: #243b35;
  font-size: 20px;
  font-weight: 760;
  letter-spacing: 0;
}

.topic-family-head p {
  color: #7c8781;
  font-size: 12px;
  font-weight: 650;
}

.topic-family-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 10px;
}

.topic-family-card {
  position: relative;
  display: grid;
  gap: 10px;
  min-height: 150px;
  padding: 14px 15px;
  border-color: rgba(206, 221, 210, 0.92);
  border-radius: 8px;
  background: #fffffc;
  box-shadow: none;
}

.topic-family-card::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 7px;
  pointer-events: none;
}

.topic-family-card:focus-visible,
.topic-family-card:hover {
  border-color: rgba(112, 155, 128, 0.56);
  background: #fcfffb;
  box-shadow: 0 8px 18px rgba(43, 65, 55, 0.06);
  transform: translateY(-1px);
}

.topic-family-card-main h3 {
  color: #243b35;
  font-size: 16px;
  font-weight: 760;
  letter-spacing: 0;
}

.topic-family-card-metrics {
  padding: 2px 0 0;
}

.topic-family-card-metrics strong {
  color: #355e4e;
  font-size: 13px;
  font-weight: 760;
}

.topic-family-card-metrics span {
  color: #7b8781;
  font-size: 12px;
  font-weight: 650;
}

.topic-family-progress {
  margin: 0;
}

.topic-family-progress-label {
  color: #7b8781;
  font-weight: 650;
}

.topic-family-progress-label strong {
  color: #4d665b;
  font-weight: 760;
}

.topic-family-progress-track {
  height: 6px;
  border-color: rgba(213, 225, 216, 0.9);
  background: #f0f5f1;
}

.topic-family-progress-track span {
  background: #8cbf9a;
}

.topic-subfamily-empty {
  margin-top: 0;
  color: #7d8782;
  font-weight: 650;
}

.topic-subfamily-list {
  gap: 6px;
  margin-top: 0;
}

.topic-subfamily-list button {
  min-height: 32px;
  border-color: rgba(199, 216, 203, 0.9);
  border-radius: 8px;
  background: #fffffc;
  color: #415a50;
  box-shadow: none;
}

.topic-subfamily-list button:hover {
  border-color: rgba(112, 155, 128, 0.56);
  background: #f4faf5;
  color: #2f5b4c;
}

.topic-subfamily-list button span {
  font-weight: 720;
}

.topic-subfamily-list button em {
  color: #7d8781;
  font-weight: 650;
}

.topic-family-card-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid rgba(87, 137, 112, 0.5);
  border-radius: 8px;
  padding: 0 10px;
  background: #eaf4ee;
  color: #285d53;
  font-size: 12px;
  font-weight: 760;
}

#practiceView > .master-coach-entry,
#practiceView > .master-coach-panel {
  display: none;
}

.topic-family-card:hover .topic-family-card-cta,
.topic-family-card:focus-visible .topic-family-card-cta {
  border-color: rgba(87, 137, 112, 0.66);
  background: #dfeee5;
}

#practiceView.topic-card-mode > .practice-timer {
  grid-template-columns: minmax(130px, 0.7fr) minmax(160px, 0.82fr) minmax(160px, 0.82fr) auto;
  gap: 8px;
  min-height: 54px;
  margin-top: 14px;
  padding: 8px 10px;
}

#practiceView.topic-card-mode > .practice-timer .timer-display-block,
#practiceView.topic-card-mode > .practice-timer .timer-segment-block {
  min-height: 40px;
  border: 1px solid rgba(213, 225, 216, 0.72);
  background: #fffffc;
}

#practiceView.topic-card-mode > .practice-timer .timer-display-block strong,
#practiceView.topic-card-mode > .practice-timer .timer-segment-block strong {
  font-size: 20px;
}

#practiceView.topic-card-mode > .practice-timer .timer-actions .timer-primary {
  min-height: 38px;
  min-width: 94px;
  border-color: rgba(87, 137, 112, 0.62);
  background: #eaf4ee;
  color: #285d53;
  box-shadow: none;
  font-size: 14px;
}

#practiceView.topic-card-mode > .practice-timer .timer-actions .timer-primary:hover {
  background: #dfeee5;
}

@media (max-width: 720px) {
  .topic-family-grid {
    grid-template-columns: 1fr;
  }

  .topic-family-card {
    min-height: 0;
    padding: 12px;
  }

  .topic-family-card-cta {
    justify-self: stretch;
    justify-content: center;
  }

  #practiceView.topic-card-mode > .practice-timer {
    grid-template-columns: 1fr;
  }
}

/* Achievement collection album last override */
#achievementsView {
  padding: 8px 18px 28px;
  background:
    radial-gradient(circle at 16% 0%, rgba(238, 248, 232, 0.92), transparent 34%),
    linear-gradient(180deg, #f5fbf1 0%, #fffdf5 56%, #eef8ef 100%);
}

#achievementsView .achievement-wall-panel {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 18px;
  border: 1px solid rgba(203, 220, 207, 0.72);
  border-radius: 18px;
  background: rgba(255, 255, 250, 0.92);
  box-shadow: 0 18px 42px rgba(52, 78, 62, 0.11);
}

#achievementsView .achievement-wall-header {
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) repeat(5, minmax(116px, 1fr));
  gap: 10px;
  align-items: stretch;
  padding: 16px;
  border: 1px solid rgba(204, 219, 207, 0.7);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(247, 253, 244, 0.98), rgba(255, 252, 240, 0.94));
}

#achievementsView .achievement-overview-copy {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 88% 52%, rgba(214, 168, 79, 0.18), transparent 34%),
    rgba(255, 255, 252, 0.62);
}

#achievementsView .achievement-overview-copy > span,
#achievementFilters .achievement-sort-control,
#achievementWall .achievement-section-head span {
  color: #718178;
  font-size: 12px;
  font-weight: 850;
}

#achievementsView .achievement-overview-copy > span {
  color: #4d725f;
  font-size: 13px;
  font-weight: 900;
}

#achievementWallTitle {
  margin: 4px 0 2px;
  color: #203b34;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: 0;
}

#achievementsView .achievement-overview-copy p {
  max-width: 420px;
  margin: 0;
  color: #607064;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

#achievementsView .achievement-completion,
#achievementWallStats.growth-meta {
  display: contents;
}

#achievementsView .achievement-wall-header article {
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 86px;
  padding: 12px;
  border: 1px solid rgba(207, 222, 211, 0.66);
  border-radius: 12px;
  background: rgba(255, 255, 252, 0.76);
  box-shadow: none;
}

#achievementsView .achievement-wall-header article:nth-of-type(3) {
  border-color: rgba(214, 168, 79, 0.46);
  background: linear-gradient(180deg, rgba(255, 249, 232, 0.92), rgba(255, 255, 250, 0.78));
}

#achievementsView .achievement-wall-header article span,
#achievementsView .achievement-wall-header article small {
  color: #718178;
  font-size: 12px;
  font-weight: 850;
}

#achievementsView .achievement-wall-header article strong {
  color: #203b34;
  font-size: 25px;
  font-weight: 950;
  line-height: 1.05;
}

#achievementFilters.subject-tabs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgba(206, 222, 211, 0.68);
  border-radius: 14px;
  background: rgba(250, 253, 248, 0.9);
}

#achievementFilters .achievement-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

#achievementFilters button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(197, 216, 202, 0.9);
  border-radius: 999px;
  color: #52675c;
  background: rgba(255, 255, 252, 0.86);
  box-shadow: none;
  font-size: 13px;
  font-weight: 850;
}

#achievementFilters button.active {
  border-color: rgba(71, 145, 102, 0.86);
  color: #ffffff;
  background: linear-gradient(180deg, #5ca878, #2f7655);
  box-shadow: 0 8px 16px rgba(47, 118, 85, 0.18);
}

#achievementFilters .achievement-sort-control {
  display: grid;
  gap: 5px;
  min-width: 132px;
}

#achievementFilters select {
  min-height: 36px;
  padding: 0 34px 0 12px;
  border: 1px solid rgba(197, 216, 202, 0.9);
  border-radius: 10px;
  color: #40544b;
  background: rgba(255, 255, 252, 0.92);
  font: inherit;
}

#achievementWall.achievement-wall {
  display: grid;
  gap: 14px;
}

#achievementWall .achievement-unclaimed-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgba(214, 168, 79, 0.42);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(255, 247, 225, 0.94), rgba(255, 253, 247, 0.96));
  box-shadow: 0 10px 24px rgba(111, 80, 28, 0.08);
}

#achievementWall .achievement-unclaimed-notice > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(214, 168, 79, 0.58);
  border-radius: 12px;
  color: #7a5a1f;
  background: #fff2c8;
  font-size: 20px;
  font-weight: 950;
}

#achievementWall .achievement-unclaimed-notice strong {
  color: #31483f;
  font-size: 17px;
  font-weight: 950;
}

#achievementWall .achievement-unclaimed-notice p {
  margin: 2px 0 0;
  color: #6b735f;
  font-size: 13px;
}

#achievementWall .achievement-unclaimed-notice button {
  min-height: 36px;
  border-radius: 10px;
  color: #745316;
  background: #fff8e2;
  box-shadow: none;
}

#achievementWall .achievement-section {
  display: grid;
  gap: 12px;
  overflow: visible !important;
}

#achievementWall .achievement-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

#achievementWall .achievement-section-head h3 {
  margin: 0;
  color: #263f36;
  font-size: 20px;
  font-weight: 950;
}

#achievementWall .achievement-section-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(154px, 1fr)) !important;
  gap: 13px !important;
  align-items: stretch !important;
  overflow: visible !important;
}

#achievementWall .achievement-wall-card {
  position: relative !important;
  display: grid !important;
  grid-template-rows: 92px minmax(74px, 1fr) !important;
  gap: 9px !important;
  min-width: 0 !important;
  min-height: 184px !important;
  height: auto !important;
  padding: 10px !important;
  overflow: visible !important;
  border: 1px solid rgba(203, 220, 207, 0.78) !important;
  border-radius: 14px !important;
  color: #40544b !important;
  background: linear-gradient(180deg, #fbfdf8, #f5faf1) !important;
  box-shadow: 0 10px 24px rgba(49, 76, 58, 0.08) !important;
  cursor: pointer !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease !important;
}

#achievementWall .achievement-wall-card.unlocked,
#achievementWall .achievement-wall-card.pending_unlock {
  border-color: rgba(214, 168, 79, 0.46) !important;
  background:
    radial-gradient(circle at 86% 10%, rgba(214, 168, 79, 0.18), transparent 30%),
    linear-gradient(180deg, #fffdf4, #f7fff2) !important;
}

#achievementWall .achievement-wall-card.in_progress,
#achievementWall .achievement-wall-card.not_started {
  background: linear-gradient(180deg, #f8faf6, #f2f5ef) !important;
}

#achievementWall .achievement-wall-card.hidden-locked {
  border-style: dashed !important;
  background: linear-gradient(180deg, #f3f6f0, #eef2eb) !important;
}

#achievementWall .achievement-wall-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(95, 155, 118, 0.7) !important;
  box-shadow: 0 16px 30px rgba(37, 51, 45, 0.14) !important;
}

#achievementWall .achievement-badge-frame {
  display: grid !important;
  width: 100% !important;
  height: 92px !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(214, 225, 216, 0.72) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.5) 58%, transparent 59%),
    linear-gradient(180deg, rgba(249, 253, 246, 0.96), rgba(255, 250, 236, 0.74)) !important;
}

#achievementWall .achievement-badge-frame img {
  display: block !important;
  width: 74px !important;
  height: 74px !important;
  object-fit: contain !important;
  object-position: center !important;
  mix-blend-mode: normal !important;
}

#achievementWall .achievement-wall-card.in_progress .achievement-badge-frame img,
#achievementWall .achievement-wall-card.not_started .achievement-badge-frame img,
#achievementWall .achievement-wall-card.hidden-locked .achievement-badge-frame img {
  opacity: 0.68 !important;
  filter: grayscale(0.82) saturate(0.58) !important;
}

#achievementWall .achievement-card-body {
  position: static !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

#achievementWall .achievement-card-head {
  display: block !important;
}

#achievementWall .achievement-card-title {
  display: -webkit-box !important;
  min-height: 35px !important;
  overflow: hidden !important;
  color: #263f36 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.18 !important;
  text-align: center !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

#achievementWall .achievement-card-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 5px !important;
  margin: 1px 0 0 !important;
}

#achievementWall .achievement-state-pill,
#achievementWall .title-chip {
  min-width: 0 !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

#achievementWall .achievement-card-status-line {
  overflow: hidden;
  color: #718178;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#achievementWall .achievement-tile-progress {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(218, 228, 219, 0.86);
}

#achievementWall .achievement-tile-progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--achievement-progress, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, #63a978, #d6a84f);
}

#achievementWall .achievement-progress-row,
#achievementWall .achievement-card-foot,
#achievementWall .achievement-actions,
#achievementWall .hidden-achievement-clue {
  display: none !important;
}

#achievementWall .equipped-ribbon {
  display: grid !important;
  position: absolute !important;
  left: 8px !important;
  top: 8px !important;
  z-index: 2 !important;
  min-height: 20px !important;
  padding: 0 7px !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: #4f9a70 !important;
  box-shadow: 0 4px 10px rgba(47, 118, 85, 0.18) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

#achievementWall .achievement-hover-detail {
  left: 50% !important;
  bottom: calc(100% + 12px) !important;
  z-index: 90 !important;
  display: grid !important;
  width: min(280px, 82vw) !important;
  gap: 6px !important;
  padding: 12px !important;
  border: 1px solid rgba(204, 219, 207, 0.95) !important;
  border-radius: 12px !important;
  color: #30463e !important;
  background: rgba(255, 255, 250, 0.98) !important;
  box-shadow: 0 18px 38px rgba(45, 62, 54, 0.18) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  text-align: left !important;
  transform: translate(-50%, 6px) !important;
}

#achievementWall .achievement-wall-card:hover .achievement-hover-detail {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

@media (max-width: 1120px) {
  #achievementsView .achievement-wall-header {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #achievementsView .achievement-overview-copy {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  #achievementsView {
    padding: 6px 10px 22px;
  }

  #achievementsView .achievement-wall-panel {
    padding: 12px;
    border-radius: 14px;
  }

  #achievementsView .achievement-wall-header {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
  }

  #achievementsView .achievement-wall-header article {
    min-height: 74px;
    padding: 10px;
  }

  #achievementsView .achievement-wall-header article strong {
    font-size: 21px;
  }

  #achievementFilters.subject-tabs {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  #achievementFilters .achievement-sort-control {
    min-width: 0;
  }

  #achievementWall .achievement-unclaimed-notice {
    grid-template-columns: auto minmax(0, 1fr);
  }

  #achievementWall .achievement-unclaimed-notice button {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  #achievementWall .achievement-section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #achievementWall .achievement-wall-card {
    grid-template-rows: 82px minmax(82px, 1fr) !important;
    min-height: 178px !important;
    padding: 8px !important;
  }

  #achievementWall .achievement-badge-frame {
    height: 82px !important;
  }

  #achievementWall .achievement-badge-frame img {
    width: 66px !important;
    height: 66px !important;
  }

  #achievementWall .achievement-card-title {
    font-size: 14px !important;
  }

  #achievementWall .achievement-hover-detail {
    display: none !important;
  }
}

@media (max-width: 380px) {
  #achievementWall .achievement-section-grid {
    grid-template-columns: 1fr !important;
  }
}
/* Master Coach MVP entry */
.master-coach-entry,
.master-coach-panel,
.master-coach-card,
.master-coach-question-card {
  border: 1px solid rgba(104, 129, 116, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px rgba(49, 74, 64, 0.08);
}

.master-coach-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 14px 0;
  padding: 18px 20px;
}

.master-coach-entry h3,
.master-coach-head h2,
.master-coach-question-head h2 {
  margin: 0;
  color: #203b34;
  line-height: 1.2;
}

.master-coach-entry p,
.master-coach-suggestion p {
  margin: 6px 0 0;
  color: #66766f;
  line-height: 1.55;
}

.master-coach-entry button,
.master-coach-actions button,
.master-coach-reason-picker button {
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  padding: 10px 16px;
  color: #ffffff;
  background: #2f7d66;
  font-weight: 700;
  cursor: pointer;
}

.master-coach-entry button:disabled,
.master-coach-actions button:disabled {
  cursor: not-allowed;
  color: #7f8b86;
  background: #e5ece8;
}

.master-coach-entry button.secondary,
.master-coach-actions button.secondary {
  color: #315146;
  background: #edf5f1;
}

.master-coach-panel {
  margin: 14px 0 18px;
  padding: 0;
  background: rgba(248, 252, 249, 0.82);
}

.master-coach-card,
.master-coach-question-card {
  padding: 20px;
}

.master-coach-head,
.master-coach-question-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.master-coach-eyebrow {
  display: inline-block;
  margin-bottom: 6px;
  color: #5f7f72;
  font-size: 13px;
  font-weight: 700;
}

.master-coach-status {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 7px 11px;
  color: #2f6557;
  background: #e8f4ee;
  font-size: 13px;
  font-weight: 700;
}

.master-coach-pool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.master-coach-pool-grid section {
  border-radius: 14px;
  padding: 14px;
  background: #f5faf7;
}

.master-coach-pool-grid span {
  display: block;
  color: #6b7b74;
  font-size: 13px;
}

.master-coach-pool-grid strong {
  display: block;
  margin-top: 4px;
  color: #1f3d34;
  font-size: 22px;
}

.master-coach-suggestion {
  border-radius: 14px;
  padding: 14px;
  background: #fffaf0;
  color: #385147;
}

.master-coach-actions,
.master-coach-reason-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.master-coach-question-body,
.master-coach-analysis {
  border-radius: 14px;
  padding: 14px;
  background: #ffffff;
}

.master-coach-question-body img,
.master-coach-analysis img {
  max-width: 100%;
  height: auto;
}

.master-coach-analysis {
  margin-top: 12px;
  border: 1px dashed rgba(84, 120, 105, 0.28);
}

.master-coach-reason-picker {
  border-radius: 14px;
  padding: 12px;
  background: #f7faf8;
}

.master-coach-reason-picker button {
  color: #315146;
  background: #eaf4ef;
}

.master-coach-error {
  border-color: rgba(190, 78, 78, 0.25);
  background: #fff8f6;
}

@media (max-width: 760px) {
  .master-coach-entry,
  .master-coach-head,
  .master-coach-question-head {
    align-items: stretch;
    flex-direction: column;
  }

  .master-coach-pool-grid {
    grid-template-columns: 1fr;
  }

  .master-coach-actions button,
  .master-coach-entry button {
    width: 100%;
  }
}
/* Book library and EPUB reader */
#booksView {
  display: grid;
  gap: 18px;
  max-width: 100%;
  overflow-x: hidden;
}

#booksView.hidden {
  display: none;
}

.book-library-tools {
  display: flex;
  justify-content: flex-end;
  min-height: 0;
}

.book-library-tools button {
  padding: 8px 14px;
  border-radius: 8px;
}

.book-library-filter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 0;
  color: #60736c;
  font-size: 13px;
}

.book-library-filter select {
  min-width: 104px;
  border: 1px solid rgba(47, 111, 115, 0.22);
  border-radius: 8px;
  padding: 7px 30px 7px 10px;
  color: #23433f;
  background: rgba(255, 253, 247, 0.92);
  font: inherit;
}

.book-library-filter select:focus {
  outline: 3px solid rgba(47, 111, 115, 0.14);
  border-color: rgba(47, 111, 115, 0.46);
}

.book-list {
  display: grid;
  gap: 28px;
}

.book-import-status {
  display: grid;
  gap: 10px;
  max-width: 100%;
  border: 1px solid rgba(47, 111, 115, 0.22);
  border-radius: 10px;
  padding: 12px 14px;
  color: #23433f;
  background: rgba(248, 253, 246, 0.86);
  box-shadow: 0 10px 22px rgba(48, 84, 74, 0.08);
}

.book-import-status.done {
  border-color: rgba(67, 135, 101, 0.34);
  background: rgba(245, 253, 242, 0.92);
}

.book-import-status.error {
  border-color: rgba(190, 82, 82, 0.38);
  background: rgba(255, 248, 244, 0.92);
  color: #7c2f34;
}

.book-import-status-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.book-import-status-main strong {
  font-size: 15px;
}

.book-import-status-main span {
  color: #60736c;
  font-size: 13px;
}

.book-import-status.error .book-import-status-main span {
  color: #9b4c4f;
}

.book-import-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(47, 111, 115, 0.12);
}

.book-import-progress-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2f7c73, #7abf8f);
  transition: width 180ms ease;
}

.book-import-status.error .book-import-progress-bar {
  background: linear-gradient(90deg, #b85757, #e19177);
}

#booksView.book-reading-active .book-library-tools,
#booksView.book-reading-active .book-list {
  display: none;
}

.book-card {
  position: relative;
  display: grid;
  gap: 9px;
  width: 210px;
  border: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
}

.book-card:focus-visible .book-cover-art,
.book-card:hover .book-cover-art {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow: 0 22px 34px rgba(59, 44, 26, 0.20);
}

.book-card-unloaded {
  cursor: default;
}

.book-card-unloaded .book-cover-art {
  filter: none;
  opacity: 1;
}

.book-card-unloaded:focus-visible .book-cover-art,
.book-card-unloaded:hover .book-cover-art {
  transform: none;
  box-shadow: 0 14px 24px rgba(59, 44, 26, 0.16);
}

.book-shelf-row {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  padding: 18px 18px 28px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.52), rgba(255,255,255,0.18)),
    linear-gradient(90deg, rgba(218, 198, 158, 0.24), rgba(161, 115, 64, 0.10), rgba(218, 198, 158, 0.22));
}

.book-shelf-row::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 8px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #c9a472, #8f6538);
  box-shadow: 0 8px 18px rgba(82, 55, 30, 0.20);
}

.book-shelf-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
  color: #213949;
}

.book-shelf-title-text {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.book-shelf-title strong {
  font-size: 20px;
}

.book-shelf-title span {
  color: #66778b;
  font-size: 13px;
}

.book-import-subject-btn {
  flex: 0 0 auto;
  border: 1px solid rgba(47, 111, 115, 0.22);
  border-radius: 999px;
  padding: 6px 12px;
  color: #2c6e67;
  background: rgba(247, 252, 245, 0.78);
  box-shadow: none;
  font-size: 13px;
}

.book-import-subject-btn:hover {
  border-color: rgba(47, 111, 115, 0.45);
  background: #f7fcf5;
}

.book-shelf-track {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 18px;
  max-width: 100%;
  overflow-x: auto;
  padding: 2px 6px 10px;
}

.book-shelf-load-more {
  align-self: stretch;
  display: grid;
  place-content: center;
  gap: 6px;
  flex: 0 0 132px;
  min-height: 292px;
  border: 1px dashed rgba(47, 111, 115, 0.34);
  border-radius: 7px;
  background: rgba(255, 252, 243, 0.82);
  color: #1f6061;
  cursor: pointer;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.book-shelf-load-more strong,
.book-shelf-load-more span {
  display: block;
}

.book-shelf-load-more strong {
  font-size: 16px;
}

.book-shelf-load-more span {
  color: #66778b;
  font-size: 12px;
}

.book-shelf-load-more:hover,
.book-shelf-load-more:focus-visible {
  border-color: rgba(47, 111, 115, 0.62);
  background: #f7fcf5;
  outline: none;
}

.book-cover-art {
  position: relative;
  width: 210px;
  aspect-ratio: 0.72;
  overflow: hidden;
  border-radius: 7px;
  background:
    radial-gradient(circle at 76% 16%, rgba(255, 241, 176, 0.78), transparent 20%),
    linear-gradient(150deg, #f8d779 0%, #78c5b2 38%, #216f76 70%, #123e5c 100%);
  box-shadow: 0 14px 24px rgba(59, 44, 26, 0.16);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.book-card.has-original-cover .book-cover-art {
  background: #f4efe3;
}

.notebook-card .notebook-cover-art {
  background:
    radial-gradient(circle at 80% 16%, rgba(255, 250, 210, 0.92), transparent 22%),
    linear-gradient(145deg, #235f66 0%, #2f8f83 42%, #f0c66d 100%);
}

.notebook-card.subject-physics .notebook-cover-art {
  background:
    radial-gradient(circle at 78% 15%, rgba(255, 238, 175, 0.86), transparent 22%),
    linear-gradient(145deg, #173f5f 0%, #247c84 46%, #f0c66d 100%);
}

.notebook-card.subject-math .notebook-cover-art {
  background:
    radial-gradient(circle at 78% 16%, rgba(223, 236, 255, 0.86), transparent 22%),
    linear-gradient(145deg, #24315f 0%, #5667b9 46%, #8fd0d2 100%);
}

.notebook-card.subject-english .notebook-cover-art {
  background:
    radial-gradient(circle at 78% 16%, rgba(255, 238, 185, 0.88), transparent 22%),
    linear-gradient(145deg, #5b2a62 0%, #b94f6f 46%, #f3bd75 100%);
}

.notebook-card.subject-chemistry .notebook-cover-art {
  background:
    radial-gradient(circle at 78% 16%, rgba(239, 255, 216, 0.86), transparent 22%),
    linear-gradient(145deg, #31445f 0%, #397e74 42%, #d98fb5 100%);
}

.notebook-card.subject-other .notebook-cover-art {
  background:
    radial-gradient(circle at 78% 16%, rgba(255, 245, 205, 0.88), transparent 22%),
    linear-gradient(145deg, #3e4b57 0%, #7b6d9e 45%, #d7a85f 100%);
}

.notebook-card .book-cover-art::after {
  border-left-color: rgba(255, 250, 240, 0.72);
  box-shadow:
    inset 10px 0 0 rgba(23, 49, 79, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}

.notebook-cover {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 24px 20px 24px 30px;
  color: #fffaf0;
}

.notebook-cover::before {
  content: "";
  position: absolute;
  left: 30px;
  right: 18px;
  top: 78px;
  height: 1px;
  background: rgba(255, 250, 240, 0.58);
}

.notebook-kicker {
  width: fit-content;
  border-radius: 999px;
  padding: 4px 9px;
  background: rgba(255, 250, 240, 0.22);
  font-size: 12px;
  font-weight: 800;
}

.notebook-cover strong {
  font-size: 26px;
  line-height: 1.1;
}

.notebook-cover span:not(.notebook-kicker) {
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255, 250, 240, 0.86);
}

.notebook-cover small {
  align-self: end;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(16, 48, 61, 0.22);
  color: rgba(255, 250, 240, 0.78);
  font-size: 10px;
  letter-spacing: 0;
}

.original-book-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.book-card.cover-variant-2 .book-cover-art {
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 220, 236, 0.78), transparent 20%),
    linear-gradient(150deg, #f2b6d2 0%, #8aa4f3 40%, #4b5aa8 72%, #29315f 100%);
}

.book-card.cover-variant-3 .book-cover-art {
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 246, 194, 0.78), transparent 20%),
    linear-gradient(150deg, #f0c36d 0%, #ee8b61 38%, #b94752 70%, #5c2441 100%);
}

.book-card.cover-variant-4 .book-cover-art {
  background:
    radial-gradient(circle at 76% 16%, rgba(195, 237, 255, 0.72), transparent 20%),
    linear-gradient(150deg, #9dd9ee 0%, #5f8fd6 38%, #31589b 70%, #172b58 100%);
}

.book-card.cover-variant-5 .book-cover-art {
  background:
    radial-gradient(circle at 76% 16%, rgba(224, 255, 201, 0.76), transparent 20%),
    linear-gradient(150deg, #c9df82 0%, #88b866 36%, #3d7f70 70%, #194d52 100%);
}

.book-cover-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(16, 48, 61, 0.48), transparent 15%, transparent 78%, rgba(255,255,255,0.24)),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 18px);
  mix-blend-mode: normal;
  pointer-events: none;
}

.book-card.has-original-cover .book-cover-art::before {
  background:
    linear-gradient(90deg, rgba(16, 48, 61, 0.38), transparent 13%, transparent 82%, rgba(255,255,255,0.18));
}

.book-cover-art::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-left: 8px solid rgba(28, 71, 83, 0.56);
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(40, 55, 61, 0.16);
  pointer-events: none;
}

.book-cover-placeholder {
  font-size: 34px;
  font-weight: 800;
  color: #38536f;
}

.designed-book-cover {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 8px;
  height: 100%;
  padding: 24px 18px 22px 24px;
  color: #fffaf0;
}

.designed-book-cover::before {
  content: "";
  position: absolute;
  left: 23px;
  right: 18px;
  top: 86px;
  height: 1px;
  background: rgba(255, 250, 240, 0.55);
}

.cover-kicker {
  align-self: start;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.20);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.cover-main {
  align-self: center;
  max-height: 130px;
  overflow: hidden;
  font-size: 23px;
  line-height: 1.16;
  font-weight: 900;
  text-shadow: 0 2px 9px rgba(11, 39, 51, 0.22);
}

.cover-sub {
  color: #fff2be;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

.cover-author {
  justify-self: end;
  padding-left: 54px;
  color: rgba(255, 250, 240, 0.94);
  font-size: 12px;
}

.book-cover-progress {
  position: absolute;
  z-index: 2;
  border-radius: 999px;
  color: #fffaf0;
  background: rgba(28, 82, 78, 0.88);
  box-shadow: 0 5px 14px rgba(22, 48, 46, 0.18);
}

.book-cover-progress {
  left: 10px;
  bottom: 10px;
  min-width: 44px;
  padding: 5px 8px;
  font-weight: 800;
  text-align: center;
}

.book-cover-unloaded {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  border: 2px solid rgba(185, 77, 77, 0.72);
  border-radius: 8px;
  padding: 6px 12px;
  color: #a94343;
  background: rgba(255, 250, 239, 0.84);
  box-shadow: 0 8px 18px rgba(94, 49, 35, 0.12);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0;
}

.book-library-status-btn {
  position: absolute;
  z-index: 5;
  right: 10px;
  bottom: 10px;
  min-height: 30px;
  border-radius: 999px;
  padding: 5px 11px;
  border: 1px solid rgba(47, 111, 115, 0.24);
  color: #2b6d66;
  background: rgba(247, 252, 245, 0.9);
  box-shadow: 0 6px 14px rgba(36, 61, 54, 0.12);
  font-size: 12px;
  line-height: 1;
}

.book-library-status-btn.unload {
  color: #8f4c3f;
  border-color: rgba(183, 91, 76, 0.28);
  background: rgba(255, 248, 242, 0.92);
}

.book-library-status-btn.restore {
  color: #ffffff;
  border-color: rgba(40, 114, 105, 0.42);
  background: linear-gradient(180deg, #3a8b81, #286d65);
}

.book-card[draggable="true"] {
  cursor: grab;
}

.book-card-dragging {
  opacity: 0.55;
}

.book-subject-drop-active {
  outline: 2px dashed #2f6f73;
  outline-offset: -6px;
  background: rgba(47, 111, 115, 0.08);
}

.book-subject-move {
  display: none;
  position: absolute;
  z-index: 5;
  right: 10px;
  top: 10px;
  max-width: 92px;
  min-height: 30px;
  border: 1px solid rgba(47, 111, 115, 0.35);
  border-radius: 6px;
  padding: 3px 5px;
  color: #24413d;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 14px rgba(36, 61, 54, 0.12);
  font-size: 12px;
}

.book-spine-shadow {
  position: absolute;
  left: 8px;
  top: 14px;
  bottom: 48px;
  width: 9px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(0,0,0,0.25), transparent);
  pointer-events: none;
  z-index: 3;
}

.book-card-caption {
  display: none;
  gap: 2px;
  min-height: 42px;
  color: #233142;
}

.book-card-caption strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.book-card-caption span {
  color: #66778b;
  font-size: 12px;
}

.book-empty-slot {
  width: 210px;
  min-height: 286px;
  flex: 0 0 210px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(102, 119, 139, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 250, 240, 0.66), rgba(246, 235, 210, 0.44));
  color: #66778b;
  font-size: 13px;
}

.book-empty-shelf {
  padding: 22px;
  border-radius: 10px;
  background: rgba(255, 250, 240, 0.78);
  color: #66778b;
}

.book-reader {
  border-top: 1px solid #dfd4bf;
  padding-top: 18px;
}

.book-reader-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.book-reader-shell.toc-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.book-reader-shell.toc-collapsed .book-toc {
  display: none;
}

.book-toc {
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 110px);
  overflow: auto;
  border: 1px solid #dacdb7;
  border-radius: 8px;
  background: #fbf3e3;
}

.book-toc-title {
  padding: 14px;
  border-bottom: 1px solid #e4eaf1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.book-toc-title strong,
.book-toc-title span {
  display: block;
}

.book-toc-title span {
  margin-top: 4px;
  color: #66778b;
  font-size: 13px;
}

.book-toc-collapse,
.book-toc-side-toggle {
  white-space: nowrap;
}

.book-toc-collapse {
  width: auto;
  border: 1px solid #c9b897;
  border-radius: 6px;
  background: rgba(255, 250, 240, 0.82);
  color: #526172;
  padding: 5px 8px;
  font-size: 12px;
  cursor: pointer;
}

.book-toc-collapse:hover {
  background: #e9f5f2;
  color: #2f7067;
}

.book-toc-side-toggle {
  position: absolute;
  left: -12px;
  top: 94px;
  z-index: 12;
  min-width: 38px;
  min-height: 64px;
  border: 1px solid #c9b897;
  border-radius: 0 8px 8px 0;
  background: rgba(47, 112, 103, 0.96);
  color: #fff;
  box-shadow: 0 8px 20px rgba(35, 49, 66, 0.16);
  writing-mode: vertical-rl;
  letter-spacing: 0;
  cursor: pointer;
  touch-action: manipulation;
}

.book-reader-shell.toc-collapsed .book-toc-side-toggle {
  left: -6px;
}

.book-toc nav {
  display: grid;
  padding: 8px;
  gap: 4px;
}

.book-toc nav button {
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #233142;
  padding: 9px 10px;
  text-align: left;
  display: grid;
  gap: 3px;
  line-height: 1.35;
  cursor: pointer;
}

.book-toc nav button.depth-2 {
  padding-left: 22px;
  font-size: 14px;
}

.book-toc nav button.depth-3,
.book-toc nav button.depth-4 {
  padding-left: 34px;
  font-size: 13px;
  color: #4b5b6e;
}

.book-toc nav button.kind-answers {
  color: #2f7067;
  background: rgba(47, 143, 131, 0.08);
}

.book-toc nav button.active,
.book-toc nav button:hover {
  background: #e9f5f2;
}

.book-toc small {
  color: #2f8f83;
}

.book-reading-area {
  min-width: 0;
}

.book-answer-toolbar {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #dacdb7;
  border-radius: 8px;
  background: rgba(250, 240, 219, 0.96);
  box-shadow: 0 10px 26px rgba(65, 49, 26, 0.10);
  backdrop-filter: blur(8px);
}

.book-answer-toolbar button {
  min-height: 40px;
  border-radius: 8px;
  padding: 0 13px;
  font-size: 14px;
  font-weight: 700;
  touch-action: manipulation;
}

.book-answer-toolbar button:focus-visible {
  outline: 3px solid rgba(47, 143, 131, 0.28);
  outline-offset: 2px;
}

.book-answer-toolbar span {
  display: block;
  font-weight: 700;
  color: #233142;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-answer-toolbar span[hidden] {
  display: none;
}

.book-answer-toolbar small {
  display: block;
  margin-top: 2px;
  color: #66778b;
  font-size: 12px;
}

.book-toolbar-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.book-study-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  margin-top: 0;
}

.book-study-timer span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f7fbf4;
  color: #27665f;
  font-size: 13px;
  font-weight: 800;
}

.book-study-timer button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 13px;
  background: #2d756c;
  color: #fff;
}

.book-study-timer button[hidden] {
  display: none;
}

.book-study-timer #bookStudyFinishBtn {
  background: #fff8ef;
  color: #8a4e1f;
  border-color: #e6cda9;
}

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

.book-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.book-toolbar-reading {
  margin-left: 2px;
}

.book-toolbar-divider {
  display: inline-block;
  align-self: stretch;
  width: 1px;
  min-height: 34px;
  margin: 0 4px;
  border-radius: 999px;
  background: rgba(133, 113, 82, 0.28);
}

.book-toolbar-ink {
  padding-left: 2px;
}

@media (max-width: 1180px), (hover: none) and (pointer: coarse) {
  .book-answer-toolbar {
    gap: 8px;
    padding: 5px 8px;
    border-radius: 7px;
  }

  .book-answer-toolbar button {
    min-height: 32px;
    padding: 0 9px;
    border-radius: 7px;
    font-size: 13px;
    line-height: 1;
  }

  .book-answer-toolbar span {
    font-size: 15px;
    line-height: 1.15;
  }

  .book-answer-toolbar small {
    margin-top: 0;
    font-size: 11px;
  }

  .book-toolbar-status {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 40vw;
    gap: 6px;
  }

  .book-study-timer {
    gap: 5px;
    margin-top: 0;
  }

  .book-study-timer span,
  .book-study-timer button {
    min-height: 28px;
    padding: 0 8px;
    font-size: 12px;
  }

  .book-toolbar-actions {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 66vw;
    gap: 5px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .book-toolbar-actions::-webkit-scrollbar {
    display: none;
  }

  .book-toolbar-group {
    gap: 5px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }

  .book-toolbar-divider {
    min-height: 26px;
    margin: 0 2px;
  }

  .book-toolbar-ink {
    padding-left: 0;
  }
}

.book-toolbar-actions #bookSelectToggleBtn.active,
.book-toolbar-actions .book-pen-toggle.active,
.book-toolbar-actions .book-pen-action.active {
  border-color: rgba(204, 46, 46, 0.58);
  background: #fff1ef;
  color: #a52828;
}

.book-label-button {
  border-color: #b38a34;
  background: #fff7df;
  color: #725313;
}

.book-label-button:hover {
  border-color: #9a7325;
  background: #ffefbd;
  color: #5f430d;
}

.book-label-button.saved {
  border-color: #d11d48;
  background: #fff1f3;
  color: #9f1239;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.14);
}

.book-manual-label-flash {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0;
  border-top: 4px solid #e11d48;
  color: #9f1239;
  font-size: 13px;
  font-weight: 850;
  pointer-events: none;
  text-shadow: 0 1px 0 #fff;
  animation: book-manual-label-flash 0.5s ease-in-out 3 alternate;
}

@keyframes book-manual-label-flash {
  from { opacity: 0.45; }
  to { opacity: 1; }
}

.book-answer-toolbar .book-note-zoom {
  min-width: 48px;
  padding: 0 10px;
  background: #fffaf0;
  color: #526172;
}

.book-answer-toolbar .book-note-zoom[hidden] {
  display: none;
}

.book-content-panel,
.book-answer-panel {
  display: grid;
  gap: 0;
  margin-top: 14px;
}

.book-content-panel.hidden,
.book-answer-panel.hidden {
  display: none;
}

.book-original-page {
  position: relative;
  border: 1px solid #d9c9ad;
  border-radius: 8px;
  overflow: hidden;
  background: #f4efe3;
  box-shadow: 0 18px 45px rgba(65, 49, 26, 0.12);
}

.book-original-page iframe {
  display: block;
  width: 100%;
  height: min(78vh, 880px);
  min-height: 640px;
  border: 0;
  background: #f4efe3;
}

.book-annotation-viewport-canvas {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  pointer-events: none;
  touch-action: none;
  cursor: crosshair;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.book-annotation-viewport-canvas.active {
  pointer-events: auto;
}

.book-selection-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  touch-action: none;
}

.book-selection-layer.active {
  pointer-events: auto;
  cursor: crosshair;
}

.book-selection-box,
.book-note-jump-highlight {
  position: absolute;
  border: 2px solid #2f8f83;
  border-radius: 6px;
  background: rgba(47, 143, 131, 0.12);
  box-shadow: 0 0 0 9999px rgba(23, 49, 79, 0.05);
  pointer-events: none;
}

.book-note-jump-highlight {
  z-index: 9;
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.10);
  animation: book-note-pulse 0.42s ease-in-out 2 alternate;
}

@keyframes book-note-pulse {
  from { opacity: 0.45; }
  to { opacity: 1; }
}

.book-note-dialog {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(23, 49, 79, 0.22);
}

.book-note-form {
  width: min(420px, 92vw);
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid #dacdb7;
  border-radius: 10px;
  background: #fffaf0;
  box-shadow: 0 24px 70px rgba(35, 49, 66, 0.24);
}

.book-note-form-head,
.book-note-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.book-note-form label {
  display: grid;
  gap: 5px;
  color: #233142;
  font-weight: 700;
}

.book-note-form input,
.book-note-form select,
.book-note-form textarea {
  width: 100%;
  border: 1px solid #c9d6df;
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff;
  color: #17314f;
  font: inherit;
}

.book-notes-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #dacdb7;
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.92);
}

.subject-notebook-view {
  display: grid;
  gap: 10px;
  width: 100%;
  padding-top: 58px;
}

.subject-notebook-toolbar {
  position: fixed;
  top: 10px;
  left: calc(var(--side-nav-width) + 42px);
  right: 32px;
  z-index: 32;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  box-sizing: border-box;
  width: auto;
  max-width: 1680px;
  margin: 0 auto;
  padding: 8px 10px;
  border: 1px solid #dacdb7;
  border-radius: 8px;
  background: rgba(250, 240, 219, 0.96);
  box-shadow: 0 10px 26px rgba(65, 49, 26, 0.10);
  backdrop-filter: blur(8px);
}

body.sidebar-collapsed .subject-notebook-toolbar {
  left: calc(var(--side-nav-collapsed) + 42px);
}

.subject-notebook-toolbar-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.subject-notebook-toolbar-main,
.subject-notebook-toolbar-ink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.subject-notebook-toolbar-divider {
  display: inline-block;
  align-self: stretch;
  width: 1px;
  min-height: 34px;
  margin: 0 3px;
  border-radius: 999px;
  background: rgba(133, 113, 82, 0.28);
}

.subject-notebook-toolbar button,
.book-return-notebook {
  border: 1px solid #a9cdbc;
  border-radius: 8px;
  min-height: 40px;
  padding: 0 13px;
  background: #f4fbf7;
  color: #2f7067;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}

.subject-notebook-toolbar button.active,
.book-return-notebook {
  background: #2f7067;
  color: #fffaf0;
}

.subject-notebook-toolbar button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.subject-notebook-board {
  position: relative;
  justify-self: center;
  width: min(100%, 1680px);
  min-height: 220px;
}

.subject-notebook-notes {
  display: grid;
  gap: 12px;
}

.subject-notebook-ink-canvas {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  touch-action: none;
}

.subject-notebook-ink-canvas.active {
  pointer-events: auto;
}

.book-notes-panel.hidden {
  display: none;
}

.book-notes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.book-notes-subject h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.book-notes-list {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 14px;
}

.book-note-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  text-align: left;
  border: 1px solid #d8c8aa;
  border-radius: 8px;
  padding: 14px;
  background: #fffdf6;
  color: #17314f;
  cursor: pointer;
  width: min(100%, 1680px);
  max-width: 100%;
  box-shadow: 0 10px 24px rgba(59, 44, 26, 0.08);
}

.book-note-preview {
  position: relative;
  display: block;
  width: min(100%, 1640px);
  min-height: 220px;
  justify-self: start;
  overflow: hidden;
  border-radius: 7px;
  border: 1px solid #d8c8aa;
  background: #fffaf0;
}

.book-note-preview-snapshot {
  height: auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  overflow: visible;
}

.book-note-snapshot {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 6px;
  background: #fffaf0;
  object-fit: contain;
}

.book-note-preview iframe {
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
  pointer-events: none;
}

.book-note-html-preview {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fffaf0;
}

.book-note-live-preview {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fffaf0;
}

.book-note-live-frame {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  border: 0;
  max-width: none;
  pointer-events: none;
  background: #fffaf0;
}

.book-note-crop-content {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 1100px;
  max-width: none;
  padding: 22px 28px;
  background: #fffaf0;
  color: #17314f;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 19px;
  line-height: 1.72;
  pointer-events: none;
}

.book-note-crop-content img {
  max-width: 100%;
  height: auto;
}

.book-note-click-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
}

.book-note-card:hover {
  border-color: #2f8f83;
  background: #f2fbf7;
}

.book-note-card:focus-visible {
  outline: 3px solid rgba(47, 112, 103, 0.34);
  outline-offset: 3px;
}

.book-note-info {
  display: grid;
  align-content: start;
  gap: 6px;
  width: min(100%, 1640px);
  min-width: 0;
}

.book-note-meta-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.book-note-meta-line strong {
  flex: 0 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-note-book-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #2f7067;
  font-weight: 800;
}

.book-note-type {
  width: fit-content;
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 2px 8px;
  background: #e9f5f2;
  color: #2f7067;
  font-size: 12px;
  font-weight: 700;
}

.book-note-card small,
.book-note-card em,
.book-notes-empty {
  color: #66778b;
  font-style: normal;
}

.book-note-card p {
  margin: 0;
  color: #526172;
}

.book-note-delete {
  flex: 0 0 auto;
  margin-left: auto;
  border: 1px solid #e3a3a3;
  border-radius: 8px;
  padding: 5px 10px;
  background: #fff7f4;
  color: #b33939;
  font-weight: 800;
  cursor: pointer;
}

.book-chapter-section,
.book-answer-section,
.book-empty-answer {
  border: 1px solid #dacdb7;
  border-radius: 8px;
  background: #fffaf0;
  padding: 18px;
}

.book-chapter-section h2,
.book-answer-section h2 {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.35;
}

.book-html-content {
  line-height: 1.72;
  color: #243447;
}

.book-html-content img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.paper-book-shelf {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #d8e0ea;
  border-radius: 8px;
  background: #f7fbfa;
}

.paper-book-shelf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.paper-book-shelf-head strong,
.paper-book-shelf-head span {
  display: block;
}

.paper-book-shelf-head span {
  margin-top: 2px;
  color: #66778b;
  font-size: 13px;
}

.paper-book-shelf-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.paper-book-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: start;
  padding: 10px;
  border: 1px solid #e1e8ef;
  border-radius: 8px;
  background: #ffffff;
}

.paper-book-cover {
  width: 64px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 5px;
  background: #eef2f7;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #38536f;
}

.paper-book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.paper-book-card h3,
.paper-book-card p {
  margin: 0;
}

.paper-book-card h3 {
  font-size: 15px;
  line-height: 1.35;
}

.paper-book-card p {
  margin: 5px 0 8px;
  color: #66778b;
  font-size: 12px;
}

#englishReadingView {
  min-height: 60vh;
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
}

:root {
  --english-reading-font-scale: 1;
  --english-reading-en-font: Cambria, "Times New Roman", Georgia, "Noto Serif", serif;
  --english-reading-cn-font: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  --english-reading-ink: #34433f;
  --english-reading-soft-ink: #65746f;
  --english-reading-page-bg: #f3f5f1;
  --english-reading-panel-bg: #faf9f3;
  --english-reading-soft-panel-bg: #f6f7f0;
  --english-reading-line: #dfe7df;
}

body[data-current-view="englishReading"] .floating-pet {
  display: none;
}

.english-reading-page {
  display: grid;
  gap: 16px;
  padding: 12px;
  border-radius: 10px;
  background: var(--english-reading-page-bg);
}

.english-reading-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--english-reading-line);
  border-radius: 8px;
  background: var(--english-reading-soft-panel-bg);
}

.english-reading-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.english-reading-head span,
.english-reading-card span,
.english-reading-detail-head span,
.english-reading-section-head span,
.english-reading-wrong-words-head span,
.english-reading-wordbook-card span {
  color: #64748b;
  font-size: 13px;
}

.english-reading-head > div:first-child {
  display: grid;
  gap: 4px;
}

.english-reading-head h2 {
  color: #203532;
  font-size: 26px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.16;
}

.english-reading-head p {
  color: #50635e;
  font-size: 15px;
  line-height: 1.4;
}

#englishReadingView.wordbank-practice-active .english-reading-head {
  display: none;
}

#englishReadingView.wordbank-practice-active {
  padding-top: 4px;
}

.english-reading-head h2,
.english-reading-card h3,
.english-reading-detail-head h3,
.english-reading-section-head strong,
.english-reading-exercises h3,
.english-reading-wrong-words-head h3 {
  margin: 0;
}

.english-reading-head p,
.english-reading-card p,
.english-reading-detail-head p,
.english-reading-section-head p,
.english-reading-en,
.english-reading-cn,
.english-reading-exercises p,
.english-reading-wordbook-card p {
  margin: 0;
}

.english-reading-list {
  display: grid;
  gap: 16px;
}

#englishReadingList.hidden,
#englishReadingView.english-reading-learning-active #englishReadingList {
  display: none !important;
}

.english-reading-book-shelf {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  padding: 18px 18px 28px;
  border-radius: 12px;
  background: rgba(250, 250, 246, 0.46);
}

.english-reading-book-shelf::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 8px;
  height: 6px;
  border-radius: 999px;
  background: rgba(131, 143, 132, 0.18);
  box-shadow: 0 10px 18px rgba(82, 92, 78, 0.08);
}

.english-reading-shelf-track {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 18px;
  max-width: 100%;
  overflow-x: auto;
  padding: 2px 6px 14px;
  scrollbar-color: rgba(96, 110, 104, 0.28) transparent;
  scrollbar-width: thin;
}

.english-reading-shelf-track::-webkit-scrollbar {
  height: 6px;
}

.english-reading-shelf-track::-webkit-scrollbar-track {
  background: transparent;
}

.english-reading-shelf-track::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(96, 110, 104, 0.22);
}

.english-reading-shelf-book {
  position: relative;
  display: grid;
  gap: 9px;
  flex: 0 0 178px;
  width: 178px;
  border: 0;
  background: transparent;
  color: #263a37;
  cursor: pointer;
  outline: none;
  text-align: left;
}

.english-reading-shelf-cover {
  position: relative;
  display: grid;
  align-content: space-between;
  width: 178px;
  aspect-ratio: 0.72;
  overflow: hidden;
  padding: 24px 18px 18px 26px;
  border: 0;
  border-radius: 7px;
  color: #fffaf0;
  background:
    radial-gradient(circle at 76% 16%, rgba(255, 241, 176, 0.72), transparent 20%),
    linear-gradient(150deg, #f8d779 0%, #78c5b2 38%, #216f76 70%, #123e5c 100%);
  box-shadow: 0 12px 22px rgba(48, 50, 46, 0.11);
  cursor: pointer;
  text-align: left;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.english-reading-shelf-book.has-real-cover .english-reading-shelf-cover {
  background: #f7f2e8;
}

.english-reading-shelf-cover::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 12px;
  background: rgba(20, 20, 20, 0.13);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.16);
}

.english-reading-shelf-cover::after {
  display: none;
}

.english-reading-shelf-image {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  user-select: none;
  pointer-events: none;
}

.english-reading-shelf-image.full {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.english-reading-shelf-image.logo {
  align-self: center;
  justify-self: center;
  width: 88%;
  max-height: 96px;
  object-fit: contain;
}

.english-reading-shelf-book.has-full-cover .english-reading-shelf-cover {
  padding: 0;
  background: #efe6d3;
}

.english-reading-shelf-book.has-full-cover .english-reading-shelf-cover::before,
.english-reading-shelf-book.has-full-cover .english-reading-shelf-cover::after {
  z-index: 1;
}

.english-reading-shelf-book.has-full-cover .english-reading-shelf-cover::after {
  display: none;
}

.english-reading-shelf-book.has-full-cover .english-reading-shelf-cover small {
  position: absolute;
  z-index: 2;
  left: 16px;
  bottom: 14px;
  margin: 0;
  color: rgba(255,255,255,0.92);
  background: rgba(25, 36, 33, 0.54);
  box-shadow: 0 6px 16px rgba(0,0,0,0.16);
}

.english-reading-shelf-book.has-logo-cover .english-reading-shelf-cover {
  grid-template-rows: min-content 1fr min-content min-content min-content;
}

.english-reading-shelf-book:hover .english-reading-shelf-cover,
.english-reading-shelf-cover:focus-visible,
.english-reading-shelf-book.active .english-reading-shelf-cover {
  transform: translateY(-3px);
  box-shadow: 0 16px 26px rgba(48, 50, 46, 0.12);
}

.english-reading-shelf-book.active .english-reading-shelf-cover,
.english-reading-shelf-cover:focus-visible {
  outline: none;
}

.english-reading-shelf-cover-status {
  position: absolute;
  z-index: 4;
  right: 10px;
  bottom: 10px;
  min-height: 28px;
  padding: 3px 9px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  background: rgba(31, 42, 38, 0.48);
  color: rgba(255,255,255,0.94);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(0,0,0,0.12);
}

.english-reading-shelf-cover-status.restore {
  background: rgba(249, 250, 246, 0.9);
  color: #31534c;
  border-color: rgba(113, 137, 128, 0.24);
}

.english-reading-shelf-kind {
  display: none;
}

.english-reading-shelf-cover strong {
  position: relative;
  z-index: 1;
  margin-top: auto;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: 0;
}

.english-reading-shelf-cover span:not(.english-reading-shelf-kind),
.english-reading-shelf-cover small {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,0.84);
  font-size: 13px;
  line-height: 1.25;
}

.english-reading-shelf-cover small {
  justify-self: start;
  max-width: calc(100% - 18px);
  margin-top: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
  font-size: 12px;
  white-space: normal;
}

.english-reading-shelf-book.ted .english-reading-shelf-cover {
  background: linear-gradient(160deg, #151515 0%, #272727 58%, #d92d24 100%);
}

.english-reading-shelf-book.ssp .english-reading-shelf-cover {
  background: linear-gradient(160deg, #e84132 0%, #b4372b 58%, #7f2a24 100%);
}

.english-reading-shelf-book.china-daily .english-reading-shelf-cover {
  background: linear-gradient(160deg, #f7f2e8 0%, #dce9ef 58%, #b7282e 100%);
  color: #2d3133;
}

.english-reading-shelf-book.china-daily .english-reading-shelf-image.logo {
  width: 94%;
  max-height: 74px;
  padding: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.72);
}

.english-reading-shelf-book.china-daily .english-reading-shelf-cover span,
.english-reading-shelf-book.china-daily .english-reading-shelf-cover small {
  color: rgba(45, 49, 51, 0.78);
}

.english-reading-shelf-book.nce-1 .english-reading-shelf-cover {
  background: linear-gradient(150deg, #215b67 0%, #63a994 48%, #f0c66d 100%);
}

.english-reading-shelf-book.nce-2 .english-reading-shelf-cover {
  background: linear-gradient(150deg, #293a6b 0%, #6d79bd 48%, #8fd0d2 100%);
}

.english-reading-shelf-book.nce-3 .english-reading-shelf-cover {
  background: linear-gradient(150deg, #5a315f 0%, #b75878 48%, #e8b86f 100%);
}

.english-reading-shelf-book.nce-4 .english-reading-shelf-cover {
  background: linear-gradient(150deg, #1f6b50 0%, #6fb06d 48%, #e7a75f 100%);
}

.english-reading-shelf-book.wordbank .english-reading-shelf-cover {
  background:
    radial-gradient(circle at 72% 18%, rgba(255,255,255,0.46), transparent 24%),
    linear-gradient(154deg, #365c55 0%, #81a89d 54%, #e5c46f 100%);
}

.english-reading-wordbank-glyph {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255,255,255,0.54);
  border-radius: 8px;
  background: rgba(255,255,255,0.16);
  color: #fffaf0 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px !important;
  font-weight: 800;
}

.english-reading-shelf-articles {
  display: grid;
  gap: 10px;
}

.english-reading-shelf-articles-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
}

.english-reading-shelf-articles-head > div:first-child {
  display: grid;
  gap: 2px;
}

.english-reading-shelf-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.english-reading-completion-filter {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  min-height: 34px;
  padding: 0;
  border: 1px solid #dbe6e2;
  border-radius: 8px;
  background: var(--english-reading-panel-bg);
  color: #4e665f;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.english-reading-completion-filter select {
  height: 32px;
  min-height: 32px;
  min-width: 104px;
  padding: 2px 28px 2px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #36524c;
  font-size: 12px;
  font-weight: 600;
  outline: none;
}

.english-reading-completion-filter select:focus-visible {
  box-shadow: 0 0 0 2px rgba(47, 107, 99, 0.16);
}

.english-reading-shelf-articles-head strong {
  color: var(--english-reading-ink);
  font-size: 18px;
}

.english-reading-shelf-articles-head span {
  color: #64748b;
  font-size: 13px;
}

.english-reading-shelf-library-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid #dbe6e2;
  border-radius: 7px;
  background: var(--english-reading-panel-bg);
  color: #36524c;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.english-reading-import-progress {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #dbe6e2;
  border-radius: 8px;
  background: #f8fbf9;
}

.english-reading-import-progress[hidden] {
  display: none;
}

.english-reading-import-progress-head,
.english-reading-import-progress-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.english-reading-import-progress-head strong {
  color: #315d55;
  font-size: 13px;
}

.english-reading-import-progress-head span,
.english-reading-import-progress-row em,
.english-reading-import-progress-row small {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.english-reading-import-progress-list {
  display: grid;
  gap: 5px;
}

.english-reading-import-progress-row {
  grid-template-columns: 22px minmax(0, 1fr) 54px;
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.74);
}

.english-reading-import-progress-row span {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #eef6f2;
  color: #42665f;
  font-size: 11px;
  font-weight: 700;
}

.english-reading-import-progress-row strong {
  overflow: hidden;
  color: #263f3a;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.english-reading-import-progress-row small {
  grid-column: 2 / 4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.english-reading-import-progress-row.active {
  background: #edf7f3;
}

.english-reading-import-progress-row.active em {
  color: #287263;
  font-weight: 700;
}

.english-reading-import-progress-row.done em {
  color: #4d7c5a;
}

.english-reading-import-progress-row.failed {
  background: #fff4f1;
}

.english-reading-import-progress-row.failed em {
  color: #b24a38;
  font-weight: 700;
}

.english-reading-card,
.english-reading-empty,
.english-reading-detail,
.english-reading-focus-reader,
.english-reading-section,
.english-reading-exercises,
.english-reading-wrong-words {
  border: 1px solid #e1e8ef;
  border-radius: 8px;
  background: var(--english-reading-panel-bg);
}

.english-reading-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.english-reading-card h3 {
  margin-top: 4px;
  font-size: 17px;
  line-height: 1.35;
}

.english-reading-card p {
  color: #53657a;
  line-height: 1.45;
}

.english-reading-card-stats,
.english-reading-detail-stats,
.english-reading-terms,
.english-reading-practice-hints,
.english-reading-practice-actions,
.english-reading-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.english-reading-card-stats span,
.english-reading-detail-stats span,
.english-reading-terms span,
.english-reading-practice-hints span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef6f4;
  color: #315f5a;
  font-size: 12px;
}

.english-reading-blank-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  vertical-align: middle;
}

.english-reading-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.english-reading-card-foot > span {
  color: #7a8797;
}

.english-reading-empty {
  padding: 18px;
  color: #64748b;
}

  .english-reading-detail {
    display: grid;
    gap: 16px;
    padding: 16px;
  }

  .english-reading-learning-page {
    display: block;
  }

  .english-reading-learning-page.hidden {
    display: none !important;
  }

  .english-reading-detail.hidden,
  .english-reading-wrong-words.hidden {
    display: none !important;
  }

  .english-reading-learning-page .english-reading-detail {
    min-height: calc(100vh - 138px);
    padding: clamp(14px, 2.2vw, 24px);
    background: var(--english-reading-panel-bg);
  }

  .english-reading-learning-active .english-reading-head {
    margin-bottom: 10px;
  }

  .english-reading-table {
    display: grid;
    gap: 6px;
    border: 1px solid var(--english-reading-line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--english-reading-panel-bg);
  }

  .english-reading-recent-practice {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid #cfddd7;
    border-radius: 8px;
    background: #edf5f1;
  }

  .english-reading-recent-practice.last-opened {
    background: #e0eee8;
  }

  .english-reading-row.last-opened {
    background: #f1f6f4;
    box-shadow: inset 3px 0 0 #86aaa2;
  }

  .english-reading-recent-label {
    color: #2f6b63;
    font-size: 13px;
    font-weight: 700;
  }

  .english-reading-recent-title {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 4px 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #203a34;
    text-align: left;
  }

  .english-reading-recent-title strong,
  .english-reading-recent-title small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .english-reading-recent-title small,
  .english-reading-recent-meta {
    color: #64748b;
    font-size: 12px;
  }

  .english-reading-recent-title:hover,
  .english-reading-recent-title:focus-visible {
    outline: 1px solid rgba(159, 183, 172, 0.38);
    outline-offset: 1px;
    background: rgba(232, 241, 236, 0.5);
    color: #203a34;
  }

  .english-reading-recent-meta {
    display: grid;
    gap: 2px;
    text-align: right;
  }

  .english-reading-recent-continue {
    min-height: 34px;
    padding: 5px 12px;
    border: 1px solid #b7cec7;
    border-radius: 7px;
    background: #2f6b63;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
  }

  .english-reading-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 86px auto;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: 9px 12px;
    border-bottom: 1px solid #e8ede5;
  }

  .english-reading-row:last-child {
    border-bottom: 0;
  }

  .english-reading-row.unloaded {
    color: #6d7873;
    background: rgba(247, 248, 243, 0.72);
  }

  .english-reading-row-index {
    color: #64748b;
    font-weight: 700;
    text-align: center;
  }

  .english-reading-row-title {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 4px 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #1f2d3d;
    text-align: left;
  }

  .english-reading-row-title:hover:not(:disabled),
  .english-reading-row-title:focus-visible {
    outline: 1px solid rgba(159, 183, 172, 0.42);
    outline-offset: 1px;
    background: rgba(232, 241, 236, 0.55);
    color: #203a34;
  }

  .english-reading-row-title:disabled {
    cursor: default;
    opacity: 0.72;
  }

  .english-reading-row-title strong,
  .english-reading-row-title small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .english-reading-row-title strong {
    font-size: 16px;
  }

  .english-reading-row-title small,
  .english-reading-row-progress {
    color: #64748b;
    font-size: 12px;
  }

  .english-reading-row-progress {
    text-align: center;
  }

  .english-reading-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .english-reading-row-actions span {
    color: #7a8797;
    font-size: 12px;
  }

  .english-reading-row-actions button {
    min-height: 34px;
    padding: 5px 10px;
    border: 1px solid #dbe6e2;
    border-radius: 7px;
    background: var(--english-reading-panel-bg);
    box-shadow: none;
    color: #36524c;
    font-size: 13px;
    font-weight: 500;
  }

  .english-reading-row-actions button:hover,
  .english-reading-row-actions button:focus-visible {
    border-color: #c5d7d1;
    background: #f1f5ef;
    color: #254943;
  }

  .english-reading-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 2px 4px 0;
    color: #5e726c;
    font-size: 13px;
  }

  .english-reading-pagination button {
    min-height: 32px;
    padding: 5px 12px;
    border: 1px solid #dbe6e2;
    border-radius: 7px;
    background: var(--english-reading-panel-bg);
    color: #36524c;
    font-size: 13px;
    font-weight: 500;
  }

  .english-reading-pagination button:hover:not(:disabled),
  .english-reading-pagination button:focus-visible {
    border-color: #c5d7d1;
    background: #f1f5ef;
    color: #254943;
  }

  .english-reading-pagination button:disabled {
    cursor: default;
    opacity: 0.45;
  }

  .english-reading-mode-page {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    min-height: calc(100dvh - 132px);
    padding: 14px;
    border: 1px solid var(--english-reading-line);
    border-radius: 8px;
    background: var(--english-reading-panel-bg);
  }

  .english-reading-mode-top {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }

  .english-reading-mode-title {
    display: grid;
    gap: 2px;
    min-width: 0;
    text-align: center;
  }

  .english-reading-mode-title span {
    color: #64748b;
    font-size: 12px;
  }

  .english-reading-mode-title strong {
    overflow: hidden;
    color: #1f2d3d;
    font-size: 17px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .english-reading-mode-icons {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .english-reading-icon-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border: 1px solid #d9e4ea;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(22, 38, 52, 0.06);
    color: #315b57;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
  }

  .english-reading-icon-button.active {
    border-color: #b9d1cd;
    background: #f6faf9;
    color: #24574f;
  }

  .english-reading-eye-button {
    display: inline-grid;
    place-items: center;
  }

  .english-reading-eye-icon {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 999px / 720px;
    transform: rotate(-8deg);
  }

  .english-reading-eye-icon::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    content: "";
    transform: translate(-50%, -50%);
  }

  .english-reading-full-page {
    grid-template-rows: auto auto minmax(0, 1fr);
    padding: 10px;
    border: 1px solid var(--english-reading-line);
    background: var(--english-reading-panel-bg);
    overflow: hidden;
  }

  .english-reading-full-audio {
    padding: 10px 12px;
  }

  .english-reading-full-scroll {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    overflow: auto;
    padding: clamp(12px, 2dvh, 20px) clamp(14px, 3vw, 30px) 28px;
    border-radius: 8px;
    background: #f8f7ef;
    scroll-behavior: smooth;
  }

  .english-reading-full-section {
    display: grid;
    gap: clamp(10px, 1.5dvh, 16px);
  }

  .english-reading-full-section + .english-reading-full-section {
    margin-top: clamp(14px, 2dvh, 22px);
  }

  .english-reading-full-section h3 {
    margin: 0 0 8px;
    color: #4c5f58;
    font-family: var(--english-reading-en-font);
    font-size: 21px;
    font-weight: 600;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
    line-height: 1.35;
  }

  .english-reading-full-text {
    margin: 0;
    max-width: 78ch;
    color: #4f5f59;
    line-height: 1.45;
  }

  .english-reading-full-pair {
    display: grid;
    gap: 3px;
    padding-block: 1px 3px;
  }

.english-reading-full-paragraph,
.english-reading-full-translation {
  margin: 0;
}

.english-reading-mode-page .hidden {
  display: none !important;
}

.english-reading-full-paragraph {
  display: block;
  max-width: none;
}

  .english-reading-full-translation {
    display: block;
    max-width: none;
    color: #829089;
    font-size: 0.78em;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
  }

  .english-reading-sentence-page,
  .english-reading-practice-page {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .english-reading-one-sentence,
  .english-reading-line-practice {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: clamp(18px, 2.6dvh, 30px);
    min-height: 0;
    padding-block: clamp(22px, 4dvh, 42px);
    padding-inline: clamp(18px, 5vw, 64px);
    text-align: center;
  }

  .english-reading-one-en,
  .english-reading-line-prompt {
    max-width: 720px;
    margin: 0;
    color: var(--english-reading-ink);
    font-family: var(--english-reading-en-font);
    font-size: 34px;
    font-weight: 500;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
    line-height: 1.85;
  }

  .english-reading-one-cn,
  .english-reading-line-cn {
    max-width: 860px;
    margin: 0;
    color: var(--english-reading-soft-ink);
    font-family: var(--english-reading-cn-font);
    font-size: 27px;
    font-weight: 400;
    line-height: 1.75;
  }

  .english-reading-line-body {
    display: grid;
    justify-items: stretch;
    gap: clamp(16px, 2.4dvh, 26px);
    width: min(820px, 100%);
    text-align: left;
  }

  .english-reading-line-body .english-reading-line-cn,
  .english-reading-line-body .english-reading-line-prompt {
    width: 100%;
    max-width: none;
    text-align: left;
  }

  .english-reading-sentence-audio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .english-reading-line-group {
    display: inline;
    line-height: 1;
    vertical-align: baseline;
  }

  .english-reading-line-group .english-reading-line-input + .english-reading-line-input {
    margin-left: 10px;
  }

  .english-reading-line-blank {
    position: relative;
    display: inline-block;
    height: 1.42em;
    margin: 0 2px;
    line-height: 1;
    vertical-align: -0.16em;
  }

  .english-reading-line-blank + .english-reading-line-blank {
    margin-left: 10px;
  }

  .english-reading-line-blank::after {
    position: absolute;
    right: 0;
    bottom: -0.02em;
    left: 0;
    height: 1px;
    background: #c7d2cc;
    content: "";
  }

  .english-reading-line-blank:focus-within:has(.english-reading-line-input:placeholder-shown)::before {
    position: absolute;
    top: 0.24em;
    left: 50%;
    z-index: 2;
    display: none;
    width: 1px;
    height: 1.18em;
    background: var(--english-reading-ink);
    content: "";
    pointer-events: none;
    transform: translateX(-50%);
  }

  .english-reading-line-input {
    position: absolute;
    top: 0.24em;
    right: 0;
    bottom: auto;
    left: 0;
    display: block;
    width: 100%;
    height: 1.18em;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 0;
    border-radius: 0;
    outline: none;
    appearance: none;
    background: transparent;
    caret-color: transparent;
    color: transparent;
    font: inherit;
    line-height: 1.18;
    overflow: visible;
    text-align: center;
  }

  .english-reading-line-input::placeholder {
    color: transparent;
  }

  .english-reading-line-input:placeholder-shown {
    caret-color: transparent;
  }

  .english-reading-line-answer-preview {
    position: absolute;
    top: 0.24em;
    right: 0;
    left: 0;
    height: 1.18em;
    color: #5d6f69;
    font: inherit;
    line-height: 1.18;
    opacity: 0;
    overflow: visible;
    pointer-events: none;
    text-align: center;
  }

  .english-reading-line-value {
    position: absolute;
    top: 0.24em;
    right: 0;
    left: 0;
    z-index: 1;
    height: 1.18em;
    color: var(--english-reading-ink);
    font: inherit;
    line-height: 1.18;
    opacity: 1;
    overflow: hidden;
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
  }

  .english-reading-line-blank:focus-within .english-reading-line-value::after {
    display: inline-block;
    width: 1px;
    height: 1.05em;
    margin-left: 2px;
    background: var(--english-reading-ink);
    content: "";
    transform: translateY(0.12em);
  }

  .english-reading-line-blank.show-answer .english-reading-line-answer-preview {
    opacity: 1;
  }

  .english-reading-line-blank.show-answer.hint-overrides-value .english-reading-line-answer-preview {
    color: #8b6f4c;
  }

  .english-reading-line-blank.show-answer .english-reading-line-value,
  .english-reading-line-blank.show-answer .english-reading-line-value::after {
    opacity: 0;
  }

  .english-reading-line-blank.show-answer:focus-within .english-reading-line-value,
  .english-reading-line-blank.show-answer:focus-within .english-reading-line-value::after,
  .english-reading-line-blank.show-answer.hint-overrides-value .english-reading-line-value,
  .english-reading-line-blank.show-answer.hint-overrides-value .english-reading-line-value::after {
    opacity: 1;
  }

  .english-reading-line-blank.show-answer.hint-overrides-value .english-reading-line-answer-preview {
    opacity: 0;
  }

  .english-reading-line-blank:focus-within::after {
    background: #8ab4a3;
  }

  .english-reading-line-blank:has(.english-reading-line-input.correct)::after {
    background: #6fa889;
  }

  .english-reading-line-input.correct {
    color: transparent;
  }

  .english-reading-line-blank:has(.english-reading-line-input.close)::after {
    background: #d9b46b;
  }

  .english-reading-line-blank:has(.english-reading-line-input.wrong)::after {
    background: #d99388;
  }

  .english-reading-line-input.wrong {
    color: transparent;
  }

  .english-reading-line-hints {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    min-height: 24px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .english-reading-line-hints.visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  .english-reading-line-hints span {
    color: #6b4b13;
    font-size: 15px;
  }

  .english-reading-line-feedback {
    min-height: 22px;
    color: #b54d43;
    font-size: 14px;
  }

  .english-reading-entry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .english-reading-entry-actions button {
    min-height: 44px;
  }

.english-reading-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e6edf3;
}

.english-reading-detail-head h3 {
  margin-top: 4px;
  font-size: 22px;
}

.english-reading-detail-head p {
  margin-top: 4px;
  color: #53657a;
}

.english-reading-sections {
  display: grid;
  gap: 12px;
}

.english-reading-tools {
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #dde8e5;
  border-radius: 8px;
  background: #fbfdfc;
}

.english-reading-tools label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  color: #40566a;
  font-size: 14px;
}

.english-reading-font-tools {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}

.english-reading-font-tools button {
  min-width: 44px;
  min-height: 38px;
  padding: 0 10px;
}

.english-reading-audio {
  display: grid;
  grid-template-columns: minmax(160px, 0.7fr) minmax(220px, 1.3fr);
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--english-reading-line);
  border-radius: 8px;
  background: var(--english-reading-soft-panel-bg);
}

.english-reading-audio div {
  display: grid;
  gap: 3px;
}

.english-reading-audio strong {
  color: #22323d;
}

.english-reading-audio span,
.english-reading-muted,
.english-reading-practice-actions span {
  color: #64748b;
  font-size: 13px;
}

.english-reading-audio audio {
  width: 100%;
  min-width: 0;
}

.english-reading-explanation-page {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.english-reading-explanation-reference {
  min-height: 0;
  overflow: auto;
  padding: clamp(16px, 2vw, 28px);
  border-radius: 8px;
  background: var(--english-reading-soft-panel-bg);
}

.english-reading-explanation-source-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: clamp(12px, 1.6vw, 20px);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(92, 118, 111, 0.16);
  color: #536a65;
}

.english-reading-explanation-source-head span {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}

.english-reading-explanation-source-head strong {
  min-width: 0;
  color: #243833;
  font-size: clamp(18px, 1.45vw, 23px);
  font-weight: 650;
  line-height: 1.35;
}

.english-reading-explanation-source-pair {
  padding-block: 4px 8px;
}

.english-reading-explanation-original {
  color: #243833;
  font-weight: 500;
}

.english-reading-explanation-translation {
  color: #6f817d;
  font-size: clamp(17px, 1.25vw, 21px);
  line-height: 1.7;
}

.english-reading-mini-player {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #dbe8ef;
  border-radius: 8px;
  background: #f8fbff;
}

.english-reading-mini-main,
.english-reading-mini-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.english-reading-mini-main {
  justify-content: space-between;
}

.english-reading-mini-main div {
  display: grid;
  gap: 3px;
  min-width: 0;
  flex: 1 1 260px;
}

.english-reading-mini-main span {
  color: #64748b;
  font-size: 13px;
}

.english-reading-mini-main strong {
  overflow: hidden;
  color: #24374a;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.english-reading-mini-actions button {
  min-height: 42px;
}

.english-reading-mini-actions button.active {
  border-color: #4f8fca;
  background: #eaf5ff;
  color: #265f91;
}

.english-reading-mini-player.collapsed .english-reading-mini-actions,
.english-reading-mini-player.collapsed .english-reading-mini-main span {
  display: none;
}

.english-reading-timeline-review {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #dde8e5;
  border-radius: 8px;
  background: #fbfdfc;
}

.english-reading-timeline-head,
.english-reading-timeline-actions,
.english-reading-timeline-inputs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.english-reading-timeline-head {
  justify-content: space-between;
}

.english-reading-timeline-head div {
  display: grid;
  gap: 2px;
}

.english-reading-timeline-head span,
.english-reading-timeline-review label {
  color: #64748b;
  font-size: 13px;
}

.english-reading-timeline-head strong {
  color: #24374a;
  font-size: 16px;
}

.english-reading-timeline-review label {
  display: grid;
  gap: 5px;
}

.english-reading-timeline-review select,
.english-reading-timeline-review input {
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid #cbd9e2;
  border-radius: 8px;
  background: #ffffff;
  color: #142033;
  font: inherit;
}

.english-reading-timeline-review select {
  width: 100%;
}

.english-reading-timeline-inputs label {
  flex: 1 1 120px;
}

.english-reading-timeline-actions button {
  min-height: 44px;
}

  .english-reading-focus-reader {
    display: grid;
    gap: 12px;
    padding: 14px;
    background: #ffffff;
  }

  .english-reading-study-player {
    gap: 18px;
    padding: 20px;
    border-color: #dbe4ea;
    background: #fbfcfe;
  }

  .english-reading-study-top,
  .english-reading-study-actions,
  .english-reading-study-feedback,
  .english-reading-study-hints,
  .english-reading-study-parts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }

  .english-reading-study-top {
    justify-content: space-between;
  }

  .english-reading-study-top div:first-child {
    display: grid;
    gap: 4px;
  }

  .english-reading-study-top span,
  .english-reading-study-audio-note {
    color: #64748b;
    font-size: 13px;
  }

  .english-reading-study-top strong {
    color: #1f2d3d;
    font-size: 18px;
  }

  .english-reading-study-mode {
    padding: 6px 10px;
    border: 1px solid #d9e6ea;
    border-radius: 999px;
    background: #eef7f5;
    color: #315f5a;
    font-size: 13px;
    font-weight: 650;
  }

  .english-reading-study-card {
    display: grid;
    min-height: 360px;
    align-content: center;
    gap: 22px;
    padding: 32px 22px;
    border: 1px solid #e3ebf0;
    border-radius: 8px;
    background: #ffffff;
    text-align: center;
  }

  .english-reading-study-cn {
    color: #253447;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.7;
  }

  .english-reading-study-full,
  .english-reading-study-prompt {
    color: #101827;
    font-size: 32px;
    font-weight: 750;
    line-height: 1.8;
  }

  .english-reading-study-prompt .english-reading-blank-group {
    gap: 10px;
    justify-content: center;
  }

  .english-reading-study-prompt .english-reading-blank-input {
    min-width: 96px;
    min-height: 1.35em;
    padding: 0 6px 2px;
    border-bottom-width: 1px;
    font-size: 30px;
    font-weight: 750;
    text-align: center;
  }

  .english-reading-study-hints {
    justify-content: center;
  }

  .english-reading-study-hints span {
    padding: 5px 10px;
    border-radius: 999px;
    background: #fff6d7;
    color: #7a5516;
    font-size: 14px;
  }

  .english-reading-study-actions {
    justify-content: center;
  }

  .english-reading-study-actions button {
    min-height: 46px;
    min-width: 86px;
  }

  .english-reading-study-feedback {
    justify-content: center;
    min-height: 28px;
    color: #53657a;
  }

  .english-reading-study-feedback .correct {
    color: #2f7b59;
  }

  .english-reading-study-feedback .wrong {
    color: #b54d43;
  }

  .english-reading-study-analysis {
    display: grid;
    gap: 12px;
    padding-top: 4px;
    text-align: left;
  }

  .english-reading-study-analysis strong {
    color: #1d2a3a;
    font-size: 22px;
    line-height: 1.6;
  }

  .english-reading-study-analysis p {
    color: #53657a;
    font-size: 16px;
  }

  .english-reading-study-parts {
    align-items: stretch;
  }

  .english-reading-study-part {
    display: grid;
    gap: 3px;
    min-width: 132px;
    max-width: 220px;
    padding: 10px 12px;
    border: 1px solid #d7e5df;
    border-radius: 8px;
    background: #f7fbf8;
    color: #24374a;
    text-align: left;
  }

  .english-reading-study-part span {
    font-weight: 750;
  }

  .english-reading-study-part em {
    color: #315f5a;
    font-style: normal;
  }

  .english-reading-study-part small {
    color: #64748b;
  }

  .english-reading-preview {
    display: grid;
    gap: 12px;
    border: 1px solid #e1e8ef;
    border-radius: 8px;
    background: #ffffff;
  }

  .english-reading-preview summary {
    cursor: pointer;
    padding: 14px;
    color: #24374a;
    font-weight: 700;
  }

  .english-reading-preview .english-reading-sections {
    padding: 0 14px 14px;
  }

.english-reading-focus-top,
.english-reading-focus-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.english-reading-focus-top {
  justify-content: space-between;
}

.english-reading-focus-top div {
  display: grid;
  gap: 3px;
}

.english-reading-focus-top span,
.english-reading-focus-actions span {
  color: #64748b;
  font-size: 13px;
}

.english-reading-focus-top strong {
  color: #24374a;
  font-size: 16px;
}

.english-reading-focus-body {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  background: #f8fafc;
}

.english-reading-focus-actions button {
  min-height: 42px;
}

.english-reading-review-panel {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #e1e8ef;
  border-radius: 8px;
  background: #ffffff;
}

.english-reading-review-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.english-reading-review-head div {
  display: grid;
  gap: 2px;
}

.english-reading-review-head span,
.english-reading-review-item span {
  color: #64748b;
  font-size: 13px;
}

.english-reading-review-head strong {
  color: #24374a;
  font-size: 16px;
}

.english-reading-review-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.english-reading-review-item {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid #e1e8ef;
  border-left-width: 4px;
  border-radius: 8px;
  background: #fbfdfc;
}

.english-reading-review-item.pass {
  border-left-color: #4f9b82;
}

.english-reading-review-item.warn,
.english-reading-review-item.manual {
  border-left-color: #d8962f;
}

.english-reading-review-item.fail {
  border-left-color: #d06b5d;
}

.english-reading-review-item div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.english-reading-review-item strong {
  color: #24374a;
  font-size: 14px;
}

.english-reading-review-item p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

.english-reading-section {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.english-reading-section-head {
  display: grid;
  gap: 4px;
}

.english-reading-section-head button {
  justify-self: start;
  min-height: 40px;
  margin-top: 4px;
}

.english-reading-sentence {
  display: grid;
  gap: 7px;
  padding: 12px;
  border-radius: 8px;
  background: #f8fafc;
}

.english-reading-sentence.source-highlight,
.english-reading-full-pair.source-highlight {
  outline: 2px solid #6aa388;
  background: #eef8f2;
}

.english-reading-sentence.playing,
.english-reading-full-pair.playing {
  outline: 1px solid rgba(79, 143, 202, 0.38);
  background: rgba(238, 246, 255, 0.52);
}

.english-reading-sentence-play {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-height: 30px;
  margin-right: 8px;
  padding: 0;
  border-radius: 50%;
  font-size: 12px;
  vertical-align: middle;
}

.english-reading-en {
  color: var(--english-reading-ink);
  font-family: var(--english-reading-en-font);
  font-size: calc(22px * var(--english-reading-font-scale));
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  line-height: 1.78;
}

.english-reading-cn {
  color: var(--english-reading-soft-ink);
  font-family: var(--english-reading-cn-font);
  font-size: calc(18px * var(--english-reading-font-scale));
  line-height: 1.68;
}

.english-reading-dict-term {
  display: inline;
  min-height: 0;
  padding: 0 1px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #4f9b82;
  text-underline-offset: 4px;
  box-shadow: none;
  cursor: pointer;
}

.english-reading-dict-term:hover,
.english-reading-dict-term:focus {
  color: #226b58;
  outline: none;
  background: rgba(224, 242, 235, 0.74);
}

.english-reading-exercises {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.english-reading-practice-head,
.english-reading-practice-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.english-reading-practice-top small {
  color: #64748b;
  font-size: 13px;
}

.english-reading-exercises article {
  display: grid;
  gap: 5px;
  padding: 10px;
  border-radius: 8px;
  background: #f8fafc;
}

.english-reading-practice-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #f8fafc;
}

.english-reading-practice-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--english-reading-ink);
  font-family: var(--english-reading-en-font);
  font-size: calc(26px * var(--english-reading-font-scale));
  font-weight: 500;
  line-height: 1.8;
}

.english-reading-blank-input {
  width: min(220px, 100%);
  min-height: 1.35em;
  padding: 0 4px 2px;
  border: 0;
  border-bottom: 1px solid #c7d2cc;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  box-shadow: none;
  caret-color: var(--english-reading-ink);
  color: var(--english-reading-ink);
  font: inherit;
  line-height: 1;
  text-align: center;
  vertical-align: baseline;
}

.english-reading-blank-input.correct {
  border-bottom-color: #6fa889;
  color: #2f6d50;
}

.english-reading-blank-input.close {
  border-bottom-color: #d9b46b;
}

.english-reading-blank-input.wrong {
  border-bottom-color: #d99388;
  color: #b35c52;
}

.english-reading-line-prompt .english-reading-line-input,
.english-reading-line-input {
  position: absolute;
  top: 0.24em;
  right: 0;
  bottom: auto;
  left: 0;
  display: block;
  width: 100%;
  height: 1.18em;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 0;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  box-shadow: none;
  caret-color: transparent;
  color: transparent;
  font: inherit;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  line-height: 1.18;
  overflow: visible;
  text-align: center;
}

.english-reading-line-prompt .english-reading-line-blank:focus-within::after,
.english-reading-line-blank:focus-within::after {
  background: #8ab4a3;
}

.english-reading-line-prompt .english-reading-line-blank:has(.english-reading-line-input.correct)::after,
.english-reading-line-blank:has(.english-reading-line-input.correct)::after {
  background: #6fa889;
}

.english-reading-line-prompt .english-reading-line-input.correct,
.english-reading-line-input.correct {
  color: transparent;
}

.english-reading-line-prompt .english-reading-line-blank:has(.english-reading-line-input.close)::after,
.english-reading-line-blank:has(.english-reading-line-input.close)::after {
  background: #d9b46b;
}

.english-reading-line-prompt .english-reading-line-blank:has(.english-reading-line-input.wrong)::after,
.english-reading-line-blank:has(.english-reading-line-input.wrong)::after {
  background: #d99388;
}

.english-reading-line-prompt .english-reading-line-input.wrong,
.english-reading-line-input.wrong {
  color: transparent;
}

.english-reading-line-prompt .english-reading-line-blank:has(.english-reading-line-input.correct) .english-reading-line-value,
.english-reading-line-blank:has(.english-reading-line-input.correct) .english-reading-line-value {
  color: #2f6d50;
}

.english-reading-line-prompt .english-reading-line-blank:has(.english-reading-line-input.close) .english-reading-line-value,
.english-reading-line-blank:has(.english-reading-line-input.close) .english-reading-line-value {
  color: #7a6634;
}

.english-reading-line-prompt .english-reading-line-blank:has(.english-reading-line-input.wrong) .english-reading-line-value,
.english-reading-line-blank:has(.english-reading-line-input.wrong) .english-reading-line-value {
  color: #b35c52;
}

.english-reading-mode-page .english-reading-icon-button {
  border: 1px solid #d9e4ea;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(22, 38, 52, 0.06);
  color: #315b57;
}

.english-reading-mode-page .english-reading-icon-button:hover:not(:disabled),
.english-reading-mode-page .english-reading-icon-button:focus-visible {
  border-color: #b9d1cd;
  background: #f7fbfa;
  color: #24574f;
}

.english-reading-mode-page .english-reading-icon-button.active {
  border-color: #b9d1cd;
  background: #f6faf9;
  color: #24574f;
}

.english-reading-mode-page .english-reading-icon-button:disabled {
  background: #ffffff;
  color: #a9b7c3;
  opacity: 0.72;
}

.english-reading-practice-cn {
  color: #53657a;
}

.english-reading-practice-result {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-height: 24px;
  color: #53657a;
}

.english-reading-layered-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 24px;
}

.english-reading-layered-hints span {
  padding: 6px 9px;
  border-radius: 8px;
  background: #fff7df;
  color: #825b18;
  font-size: 14px;
}

.english-reading-practice-result .correct {
  color: #2f745f;
}

.english-reading-practice-result .wrong {
  color: #b45345;
}

.english-reading-practice-result .close {
  color: #b7791f;
}

.english-reading-dictionary-card {
  position: sticky;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 25;
  display: grid;
  gap: 8px;
  width: min(520px, 100%);
  max-height: min(68dvh, 520px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  margin-left: auto;
  padding: 14px;
  border: 1px solid #c9dad3;
  border-radius: 8px;
  background: #fffffb;
  box-shadow: 0 12px 30px rgba(40, 67, 58, 0.16);
}

.english-reading-dictionary-card.hidden {
  display: none;
}

.english-reading-dictionary-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.english-reading-dictionary-card-head strong {
  color: #19352f;
  font-size: 18px;
}

.english-reading-dictionary-card-head span {
  color: #64748b;
  font-size: 12px;
}

.english-reading-dictionary-card-head button {
  margin-left: auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
}

.english-reading-dictionary-card p,
.english-reading-dictionary-card blockquote,
.english-reading-dictionary-card small {
  margin: 0;
}

.english-reading-dictionary-card blockquote {
  padding-left: 10px;
  border-left: 3px solid #d7e8df;
  color: #24374a;
}

.english-reading-dictionary-card small {
  color: #64748b;
}

.english-reading-dictionary-actions {
  display: flex;
  justify-content: flex-end;
}

.english-reading-dictionary-actions button {
  min-height: 44px;
}

.english-reading-dictionary-definition {
  color: #526862;
  font-size: 14px;
  line-height: 1.45;
}

.english-reading-wrong-words {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.english-reading-wrong-words-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.english-reading-wrong-word-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.english-reading-wordbank-page {
  display: grid;
  gap: 14px;
}

.english-reading-wordbank-page.practice-open {
  padding: 0 8px 18px;
}

.english-reading-word-practice {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid #dce8e1;
  border-radius: 8px;
  background: #fbfaf4;
}

.english-reading-wordbank-practice {
  border-color: #e0ebe5;
  overflow: hidden;
  padding: 0;
  background: #fffef9;
  box-shadow: 0 10px 30px rgba(44, 73, 66, 0.06);
}

.english-reading-wordbank-practice-panel {
  display: grid;
  gap: 0;
}

.english-reading-wordbank-practice-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.english-reading-wordbank-practice-panel-head div {
  display: grid;
  gap: 2px;
}

.english-reading-wordbank-practice-panel-head span {
  color: #64748b;
  font-size: 13px;
}

.english-reading-wordbank-practice-panel-head strong {
  color: #18302b;
  font-size: 20px;
}

.english-reading-wordbank-practice-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.english-reading-wordbank-mode-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid #dbe7e2;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 2px 8px rgba(32, 65, 58, 0.04);
}

.english-reading-wordbank-mode-switch button {
  min-width: 76px;
  min-height: 34px;
  padding: 5px 15px;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: #60716e;
  font-size: 15px;
  font-weight: 600;
}

.english-reading-wordbank-mode-switch button.active {
  background: #ffffff;
  color: #1d5752;
  box-shadow: 0 4px 12px rgba(28, 74, 67, 0.09);
}

.english-reading-wordbank-definition-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid #d9e4ea;
  border-radius: 50%;
  background: #ffffff;
  color: #315b57;
  box-shadow: 0 1px 2px rgba(22, 38, 52, 0.06);
  font-size: 16px;
  font-weight: 700;
}

.english-reading-wordbank-definition-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.english-reading-wordbank-definition-toggle:has(input:checked) {
  border-color: #b9d1cd;
  background: #f6faf9;
  color: #1d5752;
}

.english-reading-wordbank-flashcard {
  display: grid;
  grid-template-rows: auto auto auto minmax(160px, 1fr);
  min-height: min(700px, calc(100dvh - 150px));
  background: #fffef9;
}

.english-reading-wordbank-flashcard.empty {
  place-items: center;
  min-height: 320px;
  color: #687b76;
  font-size: 18px;
}

.english-reading-wordbank-card-head {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 28px 0;
  color: rgba(13, 43, 45, 0.7);
}

.english-reading-wordbank-progress {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.english-reading-wordbank-progress span {
  color: #738493;
  font-size: 13px;
}

.english-reading-wordbank-progress strong {
  color: #53657a;
  font-size: 18px;
  font-weight: 600;
}

.english-reading-wordbank-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.english-reading-wordbank-round-action {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #d9e4ea;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(22, 38, 52, 0.06);
  color: #315b57;
  font-size: 20px;
  font-weight: 700;
}

.english-reading-wordbank-round-action:hover,
.english-reading-wordbank-round-action:focus-visible,
.english-reading-wordbank-definition-toggle:hover,
.english-reading-wordbank-definition-toggle:focus-within {
  border-color: #b9d1cd;
  background: #f7fbfa;
  color: #24574f;
}

.english-reading-wordbank-round-action.paused {
  background: #f6faf9;
  color: #7a8c88;
}

.english-reading-wordbank-card-head + .english-reading-wordbank-mode-switch {
  justify-self: center;
  margin-top: 4px;
}

.english-reading-wordbank-word {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 190px;
  padding: 34px 20px 12px;
  border-bottom: 0;
  background: transparent;
  color: #223936;
  text-align: center;
}

.english-reading-wordbank-word strong {
  font-family: var(--english-reading-en-font);
  font-size: clamp(48px, 7vw, 76px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0;
}

.english-reading-wordbank-word span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #526862;
  font-family: var(--english-reading-en-font);
  font-size: 20px;
}

.english-reading-wordbank-word i {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  min-height: 28px;
  border-radius: 6px;
  border: 1px solid #dce8e1;
  background: rgba(255, 255, 255, 0.74);
  color: #18302b;
  font-family: system-ui, sans-serif;
  font-size: 16px;
  font-style: normal;
}

.english-reading-wordbank-word.prompt-cn {
  min-height: 96px;
  padding-top: 14px;
  padding-bottom: 6px;
}

.english-reading-wordbank-word.prompt-cn strong {
  max-width: 980px;
  font-family: system-ui, sans-serif;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 500;
  line-height: 1.35;
}

.english-reading-wordbank-word.prompt-cn span {
  font-family: system-ui, sans-serif;
  font-size: 18px;
  color: rgba(18, 43, 45, 0.7);
}

.english-reading-wordbank-recall {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-height: 240px;
  border: 0;
  background: transparent;
  color: #8a9295;
  text-align: center;
}

.english-reading-wordbank-practice .english-reading-wordbank-recall,
.english-reading-wordbank-practice .english-reading-wordbank-recall:hover,
.english-reading-wordbank-practice .english-reading-wordbank-recall:focus,
.english-reading-wordbank-practice .english-reading-wordbank-recall:active {
  border: 0;
  background: transparent !important;
  color: #8a9295;
  box-shadow: none;
}

.english-reading-wordbank-recall strong {
  color: #757f83;
  font-size: 28px;
}

.english-reading-wordbank-recall span {
  font-size: 18px;
}

.english-reading-wordbank-memory-cue {
  cursor: pointer;
  user-select: none;
}

.english-reading-wordbank-memory-cue strong {
  color: #848e91;
  font-weight: 600;
}

.english-reading-wordbank-memory-cue span {
  color: #9aa4a5;
}

.english-reading-wordbank-recall.with-spell {
  min-height: 128px;
  padding: 0 28px 36px;
  align-content: start;
}

.english-reading-wordbank-answer {
  display: grid;
  gap: 0;
  align-self: end;
  padding-bottom: 112px;
  background: #ffffff;
}

.english-reading-wordbank-meaning,
.english-reading-wordbank-answer-section {
  padding: 22px 28px;
  border-bottom: 1px solid #edf2f0;
}

.english-reading-wordbank-meaning {
  background: #ffffff;
}

.english-reading-wordbank-meaning h4 {
  margin: 0 0 12px;
  color: #93a1a3;
  font-size: 18px;
  font-weight: 500;
}

.english-reading-wordbank-meaning strong {
  display: block;
  margin: 0 0 10px;
  color: #122b2d;
  font-family: var(--english-reading-en-font);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.15;
}

.english-reading-wordbank-meaning p {
  margin: 0;
  color: #122b2d;
  font-size: 30px;
  line-height: 1.5;
}

.english-reading-wordbank-answer-section h4 {
  margin: 0 0 14px;
  color: #9aa3a5;
  font-size: 18px;
  font-weight: 500;
}

.english-reading-wordbank-answer-section p {
  margin: 8px 0;
  color: #56646a;
  font-size: 24px;
  line-height: 1.55;
}

.english-reading-wordbank-answer-section.muted p {
  color: #6c777b;
  font-size: 18px;
}

.english-reading-wordbank-example-en {
  font-family: var(--english-reading-en-font);
}

.english-reading-wordbank-example-en mark {
  background: transparent;
  color: #e35050;
}

.english-reading-wordbank-feedback-bar {
  position: sticky;
  bottom: max(0px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 14px 18px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid #e6eeea;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 -8px 20px rgba(23, 55, 52, 0.05);
}

.english-reading-wordbank-feedback-bar button {
  display: grid;
  gap: 4px;
  min-height: 72px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #244842;
  box-shadow: 0 4px 12px rgba(20, 45, 42, 0.05);
}

.english-reading-wordbank-feedback-bar button strong {
  font-size: 24px;
}

.english-reading-wordbank-feedback-bar button span {
  color: rgba(31, 55, 53, 0.66);
  font-size: 14px;
}

.english-reading-wordbank-feedback-bar button.known {
  border-color: #c4e3d8;
  background: #e4f3ee;
  color: #256257;
}

.english-reading-wordbank-feedback-bar button.unsure {
  border-color: #efd8a8;
  background: #fff2d6;
  color: #7a5516;
}

.english-reading-wordbank-feedback-bar button.unknown {
  border-color: #efc1b4;
  background: #ffe6de;
  color: #914732;
}

.english-reading-wordbank-feedback-bar button:hover,
.english-reading-wordbank-feedback-bar button:focus-visible {
  filter: brightness(0.985);
  box-shadow: 0 5px 14px rgba(20, 45, 42, 0.08);
}

.english-reading-word-practice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.english-reading-wordbank-mode-tabs {
  display: inline-flex;
  width: fit-content;
  gap: 4px;
  padding: 4px;
  border: 1px solid #d8e0ea;
  border-radius: 8px;
  background: #f4f7fa;
}

.english-reading-wordbank-mode-tabs button {
  min-height: 32px;
  padding: 4px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #526070;
}

.english-reading-wordbank-mode-tabs button.active {
  background: #ffffff;
  color: #18302b;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.english-reading-wordbank-spell {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 6px 20px 30px;
  background: transparent;
}

.english-reading-wordbank-spell label {
  color: #8b9899;
  font-size: 16px;
}

.english-reading-wordbank-spell input {
  width: min(560px, 100%);
  min-height: 72px;
  border: 0;
  border-bottom: 2px solid #b8cec7;
  border-radius: 0;
  padding: 8px 16px 10px;
  background: transparent;
  color: #18302b;
  font-family: var(--english-reading-en-font);
  font-size: clamp(30px, 5vw, 46px);
  text-align: center;
  box-shadow: none;
}

.english-reading-wordbank-spell input:focus {
  outline: none;
  border-bottom-color: #7da899;
}

.english-reading-word-practice-head span,
.english-reading-word-practice-result span {
  color: #64748b;
  font-size: 13px;
}

.english-reading-word-practice input {
  width: min(100%, 460px);
  min-height: 48px;
  border: 1px solid #cfded7;
  border-radius: 8px;
  padding: 8px 12px;
  background: #fffef8;
  color: #213935;
  font-family: var(--english-reading-en-font);
  font-size: 28px;
  letter-spacing: 0;
}

.english-reading-word-practice input.correct {
  border-color: #69a976;
  background: #f2fbf3;
}

.english-reading-word-practice input.close {
  border-color: #d6ad55;
  background: #fff8e7;
}

.english-reading-word-practice input.wrong {
  border-color: #d4817a;
  background: #fff3f0;
}

.english-reading-wordbank-practice .english-reading-wordbank-spell input {
  width: min(560px, 100%);
  min-height: 72px;
  border: 0;
  border-bottom: 2px solid #b8cec7;
  border-radius: 0;
  padding: 8px 16px 10px;
  background: transparent;
  color: #18302b;
  box-shadow: none;
  font-family: var(--english-reading-en-font);
  font-size: clamp(30px, 5vw, 46px);
  text-align: center;
}

.english-reading-wordbank-practice .english-reading-wordbank-spell input:focus {
  outline: none;
  border-bottom-color: #7da899;
}

.english-reading-word-practice-cn {
  margin: 0;
  color: #526862;
  font-size: 20px;
  line-height: 1.5;
}

.english-reading-wordbank-prompt {
  margin: 0;
  color: #526862;
  font-size: 20px;
  line-height: 1.5;
}

.english-reading-wordbank-prompt-en {
  color: #18302b;
  font-family: var(--english-reading-en-font);
  font-size: 32px;
  line-height: 1.2;
}

.english-reading-word-practice blockquote {
  margin: 0;
  padding-left: 12px;
  border-left: 3px solid #d9e4dd;
  color: #687a75;
  font-family: var(--english-reading-en-font);
  font-size: 18px;
  line-height: 1.45;
}

.english-reading-wordbank-example {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid #e0e8f0;
  border-radius: 8px;
  background: #ffffff;
}

.english-reading-wordbank-example p {
  margin: 0;
  color: #526862;
  line-height: 1.45;
}

.english-reading-word-practice-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.english-reading-word-practice-result {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
}

.english-reading-word-practice-result .correct {
  color: #2f7067;
}

.english-reading-word-practice-result .close {
  color: #9b6a12;
}

.english-reading-word-practice-result .wrong {
  color: #a43f36;
}

.english-reading-wordbank-list {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.english-reading-wordbank-list.hidden,
.english-reading-wordbank-page.practice-open .english-reading-wordbank-list {
  display: none;
}

.english-reading-wordbook-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e1e8ef;
  border-radius: 8px;
  background: #fbfdfc;
}

.english-reading-wordbook-card strong {
  display: block;
  color: #18302b;
  font-size: 20px;
  line-height: 1.25;
}

.english-reading-wordbook-card p {
  color: #53657a;
  line-height: 1.45;
}

.english-reading-wordbook-card blockquote {
  margin: 0;
  padding-left: 10px;
  border-left: 3px solid #d7e8df;
  color: #24374a;
  line-height: 1.45;
}

.english-reading-wordbook-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.english-reading-wordbook-actions span {
  color: #64748b;
  font-size: 12px;
}

.english-reading-exercises span {
  color: #64748b;
  font-size: 13px;
}

/* A4 custom paper workbench */
.custom-paper-select-button {
  min-height: 34px;
  padding: 5px 12px;
  border: 1px solid #bfd5ca;
  border-radius: 999px;
  background: #fbfdfb;
  color: #41665b;
  font-size: 14px;
  font-weight: 700;
}

.custom-paper-select-button.selected {
  border-color: #6fa38f;
  background: #e6f2ec;
  color: #24584a;
}

.practice2-question-card.custom-paper-question-selected {
  box-shadow: inset 4px 0 0 #7aa891;
}

.custom-paper-floating-button {
  position: fixed;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 1450;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 17px;
  border: 1px solid #8db6a3;
  border-radius: 999px;
  background: rgba(247, 251, 248, 0.94);
  color: #254f44;
  box-shadow: 0 10px 28px rgba(43, 78, 66, 0.16);
  backdrop-filter: blur(14px);
  font-weight: 700;
}

.custom-paper-floating-button strong {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #397665;
  color: #fff;
}

.custom-paper-workbench {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #e9f0eb;
  color: #203d36;
}

.custom-paper-workbench.hidden {
  display: none;
}

body.custom-paper-workbench-open {
  overflow: hidden;
}

.custom-paper-workbench-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 76px;
  padding: 10px max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left));
  border-bottom: 1px solid #c7d8cf;
  background: rgba(253, 254, 251, 0.97);
  box-shadow: 0 5px 18px rgba(48, 77, 67, 0.07);
}

.custom-paper-title-block {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.custom-paper-workbench-head span {
  color: #6c8079;
  font-size: 13px;
}

.custom-paper-workbench-head strong {
  font-size: 20px;
  letter-spacing: 0;
}

.custom-paper-title-block strong {
  overflow: hidden;
  max-width: min(42vw, 520px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-paper-title-block small {
  color: #6f827a;
  font-size: 12px;
  font-weight: 600;
}

.custom-paper-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.custom-paper-mobile-panel-actions,
.custom-paper-panel-backdrop {
  display: none;
}

.custom-paper-back-button {
  border-color: #a9c7b7 !important;
  background: #f4f9f5 !important;
  color: #285f50 !important;
}

.custom-paper-head-actions button,
.custom-paper-workbench button,
.custom-paper-workbench input,
.custom-paper-workbench select {
  min-height: 40px;
}

.custom-paper-head-actions .icon-button,
.custom-paper-preview-toolbar .icon-button {
  width: 40px;
  padding: 0;
  border-radius: 50%;
  font-size: 22px;
}

.custom-paper-workbench-body {
  display: grid;
  grid-template-columns: minmax(250px, 292px) minmax(520px, 1fr) minmax(280px, 320px);
  min-height: 0;
}

.custom-paper-selected-panel,
.custom-paper-settings-panel {
  min-width: 0;
  overflow: auto;
  padding: 18px;
  background: #f9fbf8;
}

.custom-paper-settings-panel {
  overflow-x: hidden;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 14px;
  background: #f1f6f2;
}

.custom-paper-selected-panel {
  border-right: 1px solid #cfddd5;
}

.custom-paper-settings-panel {
  border-left: 1px solid #cfddd5;
}

.custom-paper-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 2px 2px 10px;
  border-bottom: 1px solid #d8e3dc;
}

.custom-paper-panel-head strong {
  font-size: 17px;
}

.custom-paper-panel-head span {
  color: #6b7e77;
  font-size: 14px;
}

.custom-paper-selected-list,
.custom-paper-saved-list {
  display: grid;
  gap: 8px;
}

.custom-paper-selected-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: start;
  gap: 7px;
  padding: 11px 9px;
  border: 1px solid #dbe5df;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.custom-paper-selected-item.active {
  border-color: #82ad98;
  background: #edf6f1;
  box-shadow: 0 5px 14px rgba(55, 96, 80, 0.08);
}

.custom-paper-selected-item:hover {
  border-color: #b7cec2;
}

.custom-paper-selected-item p {
  margin: 4px 0 0;
  color: #687a74;
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
}

.custom-paper-drag-handle,
.custom-paper-order-buttons button {
  min-width: 28px;
  min-height: 28px !important;
  padding: 0;
  border: 0;
  background: transparent;
  color: #71827c;
}

.custom-paper-drag-handle {
  cursor: grab;
  font-size: 20px;
}

.custom-paper-drag-handle:disabled,
.custom-paper-order-buttons button:disabled {
  cursor: default;
  opacity: .28;
}

.custom-paper-order-buttons {
  display: grid;
  gap: 1px;
}

.custom-paper-text-button {
  width: 100%;
  margin-top: 12px;
  border-color: transparent !important;
  background: transparent !important;
  color: #7a5f55 !important;
}

.custom-paper-preview-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.7), transparent 42%),
    #dce7df;
}

.custom-paper-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  border-bottom: 1px solid #c6d5cd;
  background: rgba(247, 250, 247, 0.94);
  box-shadow: 0 4px 12px rgba(45, 75, 64, 0.05);
}

.custom-paper-preview-hint {
  margin-left: 10px;
  color: #6f8079;
  font-size: 13px;
}

.custom-paper-preview-viewport {
  height: calc(100% - 52px);
  overflow: auto;
  padding: 28px 34px 80px;
}

.custom-paper-preview {
  display: grid;
  justify-content: center;
  gap: 24px;
  zoom: var(--custom-paper-zoom, .8);
}

.custom-paper-a4-page {
  position: relative;
  box-sizing: border-box;
  width: 210mm;
  min-height: 297mm;
  padding: var(--custom-paper-margin, 15mm);
  padding-bottom: calc(var(--custom-paper-margin, 15mm) + 8mm);
  overflow: hidden;
  background: #fff;
  color: #172b35;
  box-shadow: 0 8px 26px rgba(49, 72, 63, 0.16);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  font-size: var(--custom-paper-font-size, 16px);
  line-height: var(--custom-paper-line-height, 1.42);
}

.custom-paper-a4-page footer {
  position: absolute;
  right: var(--custom-paper-margin, 15mm);
  bottom: 7mm;
  left: var(--custom-paper-margin, 15mm);
  color: #87938f;
  text-align: center;
  font-size: 11px;
}

.custom-paper-print-head {
  margin: 0 0 4mm;
  padding-bottom: 3mm;
  border-bottom: 1px solid #aebdb5;
  text-align: center;
}

.custom-paper-print-head h1 {
  margin: 0 0 2mm;
  color: #132f35;
  font-size: 20px;
  letter-spacing: 0;
}

.custom-paper-print-head p {
  margin: 0;
  color: #566b65;
  font-size: 12px;
}

.custom-paper-a4-content {
  display: grid;
  gap: var(--custom-paper-question-gap, 2.2mm);
}

.custom-paper-question {
  position: relative;
  display: block;
  break-inside: avoid;
  padding: 1.2mm 1mm;
  border: 1px solid transparent;
  border-radius: 4px;
}

.custom-paper-question.selected {
  border-color: #91b4a3;
  background: #f7fbf8;
}

.custom-paper-question.allow-split {
  break-inside: auto;
}

.custom-paper-question-number {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4mm;
  margin-bottom: .8mm;
  color: #536b63;
  font-weight: 700;
  font-size: .78em;
  line-height: 1.2;
}

.custom-paper-question-number span:last-child {
  color: #7a8b85;
  font-size: .9em;
  font-weight: 600;
}

.custom-paper-question-content,
.custom-paper-question-content > * {
  max-width: 100%;
}

.custom-paper-question-content p {
  margin: 0 0 var(--custom-paper-paragraph-gap, 1.2mm);
}

.custom-paper-question-content .practice2-doc-section,
.custom-paper-question-content .practice2-doc-section.stem {
  padding: 0;
  border: 0;
}

.custom-paper-question-content .practice2-doc-content,
.custom-paper-question-content .practice2-doc-section.stem .practice2-doc-content {
  width: 100%;
  max-width: 100%;
  font-size: inherit;
  line-height: inherit;
}

.custom-paper-question-content .practice2-doc-content p,
.custom-paper-question-content .practice2-doc-section.stem .practice2-doc-content > p:first-child,
.custom-paper-question-content .practice2-doc-section.stem .practice2-doc-content > p.practice2-subquestion {
  padding-left: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-indent: 0;
}

.custom-paper-question-content img:not(.formula-img-inline) {
  display: block;
  width: var(--custom-paper-image-display-width, var(--custom-paper-item-image-width, 65%)) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  height: auto !important;
  margin: 1.5mm auto;
  object-fit: contain;
}

/* A4 preview is print layout, so image-option shells must collapse with images. */
.custom-paper-question-content .image-row .figure-choice {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  align-items: flex-start;
}

.custom-paper-question-content img.formula-img-inline {
  width: auto !important;
  max-width: min(16em, 100%) !important;
  max-height: 1.35em !important;
  height: 1.12em !important;
  margin: 0 0.06em !important;
  vertical-align: -0.24em;
  filter: contrast(1.12);
}

.custom-paper-question.custom-paper-scan-soft .wrong-capture-source-image {
  filter: grayscale(0.22) brightness(1.14) contrast(1.08);
}

.custom-paper-question.custom-paper-scan-bw .wrong-capture-source-image {
  filter: grayscale(1) brightness(1.13) contrast(1.24);
}

.custom-paper-question.custom-paper-scan-original .wrong-capture-source-image {
  filter: none;
}

.custom-paper-question-content .practice2-text-choice-grid,
.custom-paper-question-content .text-choice-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.2mm 5mm !important;
  margin: 1.5mm 0 1mm !important;
}

.custom-paper-question-content .practice2-text-choice-option,
.custom-paper-question-content .text-choice-option {
  min-height: 0 !important;
  padding: 0 !important;
  line-height: 1.38 !important;
}

.custom-paper-choice-one .practice2-text-choice-grid,
.custom-paper-choice-one .text-choice-grid {
  grid-template-columns: 1fr !important;
}

.custom-paper-choice-four .practice2-text-choice-grid,
.custom-paper-choice-four .text-choice-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1mm 4mm !important;
}

.custom-paper-choice-two .practice2-text-choice-grid,
.custom-paper-choice-two .text-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.custom-paper-question-content table {
  width: auto;
  max-width: 100%;
  border-collapse: collapse;
}

.custom-paper-question-content mjx-container,
.custom-paper-question-content svg {
  max-width: 100%;
}

.custom-paper-score {
  float: right;
  color: #667871;
  font-size: 13px;
}

.custom-paper-answer-space {
  width: 100%;
  min-height: 0;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 8mm, rgba(119, 145, 134, .16) 8.2mm);
}

.custom-paper-solution {
  margin-top: 4mm;
  padding: 3mm 4mm;
  border-left: 2px solid #93b4a4;
  background: #f4f8f5;
}

.custom-paper-solution > strong {
  display: block;
  margin-bottom: 2mm;
  color: #37685a;
}

.custom-paper-a4-empty {
  display: grid;
  place-items: center;
  min-height: 297mm;
  text-align: center;
}

.custom-paper-a4-empty p,
.custom-paper-empty-copy,
.custom-paper-item-settings > p,
.custom-paper-saved-list > p {
  color: #75847f;
}

.custom-paper-settings-section {
  padding: 14px;
  border: 1px solid #d5e1da;
  border-radius: 14px;
  background: #fcfdfb;
  box-shadow: 0 5px 16px rgba(52, 83, 71, 0.045);
}

.custom-paper-settings-title {
  display: flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 12px;
  color: #254c43;
}

.custom-paper-settings-title strong {
  font-size: 15px;
}

.custom-paper-field,
.custom-paper-item-settings label {
  display: grid;
  gap: 6px;
  margin: 0;
  color: #526862;
  font-size: 13px;
}

.custom-paper-sheet-settings > .custom-paper-field + .custom-paper-field {
  margin-top: 10px;
}

.custom-paper-sheet-settings > .custom-paper-setting-row,
.custom-paper-sheet-settings > .custom-paper-slider-field {
  margin-top: 10px;
}

.custom-paper-settings-panel input,
.custom-paper-settings-panel select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border-radius: 9px;
}

.custom-paper-setting-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.custom-paper-check {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 8px !important;
}

.custom-paper-check input {
  width: auto;
}

.custom-paper-toggle-row {
  flex-direction: row !important;
  justify-content: flex-start;
  align-self: end;
  min-height: 40px;
  margin: 0 !important;
  padding: 0 10px;
  border: 1px solid #cedbd4;
  border-radius: 7px;
  background: #f7faf8;
  color: #405e56;
  cursor: pointer;
}

.custom-paper-toggle-row input {
  width: 17px;
  height: 17px;
  accent-color: #4f8d76;
}

.custom-paper-field-head,
.custom-paper-current-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.custom-paper-field-head output {
  color: #2f6c5b;
  font-size: 12px;
  font-weight: 700;
}

.custom-paper-slider-field {
  padding: 9px 10px 8px;
  border: 1px solid #d5e1da;
  border-radius: 7px;
  background: #f7faf8;
}

.custom-paper-slider-field input[type="range"] {
  min-height: 24px;
  margin: 0;
  accent-color: #4f8d76;
}

.custom-paper-item-settings {
  display: grid;
  gap: 12px;
}

.custom-paper-current-head {
  min-height: 28px;
  padding-bottom: 9px;
  border-bottom: 1px solid #dde6e1;
}

.custom-paper-current-head strong {
  color: #173f36;
  font-size: 14px;
}

.custom-paper-current-head span {
  color: #7a8b85;
  font-size: 12px;
}

.custom-paper-settings-empty {
  margin: 0;
  padding: 18px 8px;
  color: #75847f;
  text-align: center;
  font-size: 13px;
}

.custom-paper-blank-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.custom-paper-blank-presets button {
  min-width: 0;
  min-height: 36px;
  padding: 5px 2px;
  border-color: #cfddd5;
  border-radius: 6px;
  background: #fff;
  color: #49675f;
  font-size: 12px;
}

.custom-paper-saved-block {
  padding-bottom: 12px;
}

.custom-paper-saved-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: stretch;
  gap: 6px;
}

.custom-paper-saved-list .custom-paper-saved-open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-color: #d1ded7;
  background: #fff;
  color: #31574c;
  text-align: left;
}

.custom-paper-saved-list .custom-paper-saved-delete {
  width: 36px;
  min-height: 36px;
  padding: 0;
  border-color: #ead1ca;
  background: #fff8f5;
  color: #a34e41;
  font-size: 20px;
}

.custom-paper-saved-list small {
  flex: 0 0 auto;
  color: #75847f;
}

@media (max-width: 1180px) {
  .custom-paper-workbench-body {
    grid-template-columns: 220px minmax(500px, 1fr) 250px;
  }

  .custom-paper-preview-viewport {
    padding-right: 18px;
    padding-left: 18px;
  }

  .custom-paper-settings-panel {
    padding: 10px;
  }

  .custom-paper-settings-section {
    padding: 11px;
  }

  .custom-paper-setting-row {
    grid-template-columns: 1fr;
  }

  .custom-paper-blank-presets {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 920px) {
  .custom-paper-workbench-head {
    align-items: center;
    gap: 10px;
    min-height: 86px;
    padding: 8px 12px;
  }

  .custom-paper-title-block > span {
    display: none;
  }

  .custom-paper-title-block strong {
    max-width: 31vw;
    font-size: 17px;
  }

  .custom-paper-title-block small {
    font-size: 11px;
  }

  .custom-paper-head-actions button:not(.icon-button) {
    min-height: 36px;
    padding: 5px 9px;
    font-size: 13px;
  }

  .custom-paper-head-actions {
    flex: 1 1 auto;
    gap: 6px;
  }

  .custom-paper-mobile-panel-actions {
    display: flex;
    gap: 6px;
  }

  .custom-paper-mobile-panel-actions button[aria-expanded="true"] {
    border-color: #6e9e88;
    background: #e5f1eb;
    color: #245848;
  }

  .custom-paper-mobile-panel-actions span {
    display: inline-grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    margin-left: 3px;
    border-radius: 999px;
    background: #397665;
    color: #fff;
    font-size: 11px;
  }

  .custom-paper-workbench-body {
    position: relative;
    display: block;
    min-height: 0;
    overflow: hidden;
  }

  .custom-paper-preview-panel {
    width: 100%;
    height: 100%;
  }

  .custom-paper-selected-panel,
  .custom-paper-settings-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    width: min(86vw, 360px);
    box-sizing: border-box;
    overflow: auto;
    visibility: hidden;
    transition: transform .2s ease, visibility .2s ease;
    box-shadow: 0 18px 46px rgba(30, 55, 46, 0.22);
  }

  .custom-paper-selected-panel {
    left: 0;
    transform: translateX(-104%);
  }

  .custom-paper-settings-panel {
    right: 0;
    transform: translateX(104%);
  }

  .custom-paper-workbench.mobile-items-open .custom-paper-selected-panel,
  .custom-paper-workbench.mobile-settings-open .custom-paper-settings-panel {
    visibility: visible;
    transform: translateX(0);
  }

  .custom-paper-panel-backdrop {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(28, 48, 41, 0.2);
    backdrop-filter: blur(2px);
  }

  .custom-paper-workbench.mobile-items-open .custom-paper-panel-backdrop,
  .custom-paper-workbench.mobile-settings-open .custom-paper-panel-backdrop {
    display: block;
  }

  .custom-paper-preview {
    --custom-paper-zoom: .68;
  }

  .custom-paper-preview-viewport {
    padding: 22px 18px 72px;
  }
}

@media (max-width: 680px) {
  .custom-paper-workbench-head {
    align-items: stretch;
    flex-direction: column;
  }

  .custom-paper-title-block {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
  }

  .custom-paper-title-block strong {
    max-width: 62vw;
  }

  .custom-paper-title-block small {
    text-align: right;
  }

  .custom-paper-head-actions {
    justify-content: flex-start;
  }

  .custom-paper-back-button {
    order: 2;
  }

  #customPaperSaveBtn {
    order: 3;
  }

  #customPaperPrintBtn {
    order: 4;
  }

  #customPaperCloseBtn {
    order: 5;
    margin-left: auto;
  }

  .custom-paper-preview-hint {
    margin-left: 2px;
  }
}

@media print {
  body.custom-paper-printing > *:not(main),
  body.custom-paper-printing main > *:not(#customPaperWorkbench) {
    display: none !important;
  }

  body.custom-paper-printing,
  body.custom-paper-printing main,
  body.custom-paper-printing #customPaperWorkbench,
  body.custom-paper-printing .custom-paper-workbench-body,
  body.custom-paper-printing .custom-paper-preview-panel,
  body.custom-paper-printing .custom-paper-preview-viewport,
  body.custom-paper-printing .custom-paper-preview {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    zoom: 1 !important;
  }

  body.custom-paper-printing .custom-paper-workbench-head,
  body.custom-paper-printing .custom-paper-selected-panel,
  body.custom-paper-printing .custom-paper-settings-panel,
  body.custom-paper-printing .custom-paper-preview-toolbar,
  body.custom-paper-printing .custom-paper-floating-button {
    display: none !important;
  }

  body.custom-paper-printing .custom-paper-a4-page {
    width: 210mm !important;
    height: 297mm !important;
    min-height: 297mm !important;
    margin: 0 !important;
    box-shadow: none !important;
    break-after: page;
    page-break-after: always;
  }

  body.custom-paper-printing .custom-paper-a4-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  body.custom-paper-printing .custom-paper-question.selected {
    border-color: transparent;
    background: transparent;
  }
}

@media (min-width: 900px) and (max-width: 1180px) {
  .english-reading-detail {
    grid-template-columns: 1fr;
    align-items: start;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }

  .english-reading-detail-head,
  .english-reading-entry-actions,
  .english-reading-tools,
  .english-reading-audio,
  .english-reading-focus-reader,
  .english-reading-review-panel,
  .english-reading-timeline-review,
  .english-reading-preview,
  .english-reading-sections {
    grid-column: 1;
  }

  .english-reading-exercises {
    grid-column: 1;
    position: sticky;
    top: 82px;
  }

  .english-reading-dictionary-card {
    grid-column: 1;
    position: sticky;
    top: auto;
    bottom: max(18px, env(safe-area-inset-bottom));
    width: 100%;
    margin-left: 0;
  }

  .english-reading-full-page {
    padding: 8px;
  }

  .english-reading-full-scroll {
    padding-inline: clamp(14px, 2vw, 22px);
  }

  .english-reading-full-text {
    max-width: none;
  }
}

@media (max-width: 860px) {
  .english-reading-row {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .english-reading-row-progress,
  .english-reading-row-actions {
    grid-column: 2;
  }

  .english-reading-row-progress {
    text-align: left;
  }

  .english-reading-mode-page {
    min-height: calc(100dvh - 108px);
    padding: 12px;
  }

  .english-reading-full-page {
    padding: 8px;
  }

  .english-reading-full-scroll {
    padding-inline: clamp(12px, 2.4vw, 18px);
  }

  .english-reading-full-text {
    max-width: none;
  }

  .english-reading-mode-title strong {
    font-size: 15px;
  }

  .english-reading-one-sentence,
  .english-reading-line-practice {
    gap: clamp(16px, 2.3dvh, 22px);
    padding-block: clamp(18px, 3.2dvh, 30px);
    padding-inline: clamp(16px, 4.8vw, 34px);
  }

  .english-reading-one-en,
  .english-reading-line-prompt {
    font-size: 25px;
    line-height: 1.75;
  }

  .english-reading-one-cn,
  .english-reading-line-cn {
    font-size: 21px;
    line-height: 1.65;
  }

  .english-reading-mode-icons {
    gap: 4px;
  }

  .english-reading-icon-button {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    font-size: 15px;
  }

  .english-reading-study-player {
    padding: 14px;
  }

  .english-reading-study-card {
    min-height: 320px;
    padding: 24px 14px;
  }

  .english-reading-study-cn {
    font-size: 22px;
  }

  .english-reading-study-full,
  .english-reading-study-prompt {
    font-size: 27px;
  }

  .english-reading-study-prompt .english-reading-blank-input {
    min-width: 82px;
    min-height: 1.35em;
    font-size: 26px;
  }

  .english-reading-study-actions button {
    flex: 1 1 120px;
  }

  .book-library-head,
  .book-card-foot {
    align-items: stretch;
    flex-direction: column;
  }

  .book-reader-shell {
    grid-template-columns: 1fr;
  }

  .subject-notebook-toolbar {
    align-items: stretch;
    justify-content: flex-start;
    left: 14px;
    right: 14px;
    max-width: none;
  }

  .subject-notebook-toolbar-actions {
    justify-content: flex-start;
  }

  .subject-notebook-toolbar-main,
  .subject-notebook-toolbar-ink {
    justify-content: flex-start;
  }

  .book-note-card {
    grid-template-columns: 1fr;
  }

  .book-note-preview {
    height: 220px;
  }

  .book-toc {
    position: relative;
    top: auto;
    max-height: 280px;
  }

  .english-reading-head,
  .english-reading-detail-head,
  .english-reading-card-foot,
  .english-reading-practice-head,
  .english-reading-practice-top {
    align-items: stretch;
    flex-direction: column;
  }

  .english-reading-audio {
    grid-template-columns: 1fr;
  }

  .english-reading-head-actions,
  .english-reading-head-actions button,
  .english-reading-tools label,
  .english-reading-practice-actions button,
  .english-reading-timeline-actions button,
  .english-reading-wordbook-actions button {
    width: 100%;
  }

  .english-reading-shelf-actions {
    align-items: stretch;
    width: 100%;
  }

  .english-reading-shelf-actions a,
  .english-reading-shelf-actions button,
  .english-reading-word-practice-actions button,
  .english-reading-wordbank-mode-tabs button {
    min-height: 44px;
  }

  .english-reading-wordbank-mode-tabs {
    width: 100%;
  }

  .english-reading-wordbank-mode-tabs button {
    flex: 1 1 0;
  }

  .english-reading-page {
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }

  .english-reading-en {
    font-size: calc(20px * var(--english-reading-font-scale));
  }

  .english-reading-cn {
    font-size: calc(17px * var(--english-reading-font-scale));
  }
}

@media (min-width: 861px) and (max-width: 1180px) {
  .english-reading-one-sentence,
  .english-reading-line-practice {
    padding-inline: clamp(24px, 4vw, 48px);
  }

  .english-reading-one-en,
  .english-reading-line-prompt {
    max-width: min(880px, 100%);
  }

  .english-reading-one-cn,
  .english-reading-line-cn {
    max-width: min(900px, 100%);
  }

  .english-reading-line-body {
    width: min(880px, 100%);
  }
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #f6f8fb;
  padding: 24px;
}

.login-panel {
  width: min(360px, 100%);
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(23, 37, 84, 0.08);
}

.login-panel label {
  display: grid;
  gap: 6px;
}

.login-panel input {
  min-height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 0 10px;
}

.login-error {
  min-height: 20px;
  color: #b42318;
}

.login-version {
  margin: 2px 0 -4px;
  color: #87928d;
  font-size: 11px;
  text-align: center;
}

.profile-version-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(188, 207, 194, 0.64);
  border-radius: 14px;
  background: rgba(247, 251, 246, 0.88);
}

.profile-version-card div {
  display: grid;
  gap: 3px;
}

.profile-version-card span,
.profile-version-card small,
.publish-version {
  color: #7b8b81;
  font-size: 11px;
}

.software-publish-result {
  display: grid;
  gap: 3px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line, #d9e2d8);
  border-radius: 10px;
  background: #f7faf7;
  color: #5f7169;
}

.software-publish-result strong { color: inherit; }
.software-publish-result span,
.software-publish-result small { display: block; }
.software-publish-result.is-success { border-color: #8cc9a7; background: #edf8f1; color: #17643d; }
.software-publish-result.is-failed { border-color: #dfa49e; background: #fff2f0; color: #9a3028; }
.software-publish-result.is-running { border-color: #d4b66d; background: #fff8e5; color: #765811; }
.software-publish-result.is-pending { border-color: #d4b66d; background: #fff8e5; color: #765811; }

.profile-version-card strong {
  color: #426858;
  font-size: 12px;
}

.profile-version-card small {
  grid-column: 1 / -1;
}

.profile-version-card .release-notes-open {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 13px;
}

.release-notes-dialog {
  width: min(620px, calc(100vw - 28px));
}

.release-notes-sheet {
  display: grid;
  gap: 16px;
}

.release-notes-list {
  display: grid;
  gap: 12px;
  max-height: min(62vh, 620px);
  overflow: auto;
}

.release-note-entry {
  padding: 14px 16px;
  border: 1px solid #dfe8df;
  border-radius: 12px;
  background: #fbfdf9;
}

.release-note-entry header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.release-note-entry header span {
  color: #728078;
  font-size: 12px;
  white-space: nowrap;
}

.release-note-entry ul {
  margin: 10px 0 0;
  padding-left: 20px;
  color: #4e5c54;
  line-height: 1.7;
}

@media (max-width: 700px) {
  .profile-version-card {
    grid-template-columns: 1fr;
  }

  .profile-version-card small {
    grid-column: auto;
  }
}

.login-shell.hidden,
.side-nav.hidden,
.app.hidden {
  display: none;
}

/* Book reader light workspace override */
#booksView.book-reading-active #bookReader {
  border-top: 1px solid #e2e2dc;
  padding-top: 10px;
}

#booksView.book-reading-active .book-reader-shell {
  grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
  gap: 12px;
}

#booksView.book-reading-active .book-reader-shell.toc-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

#booksView.book-reading-active .book-toc {
  top: 72px;
  border-color: #e2e2dc;
  border-radius: 12px;
  background: #fffefb;
  box-shadow: none;
}

#booksView.book-reading-active .book-toc-title {
  gap: 8px;
  padding: 11px 12px;
  border-bottom-color: #ecebe5;
}

#booksView.book-reading-active .book-toc-title strong {
  color: #242622;
  font-size: 14px;
  line-height: 1.3;
}

#booksView.book-reading-active .book-toc-title span {
  margin-top: 2px;
  color: #777a72;
  font-size: 12px;
}

#booksView.book-reading-active .book-toc-collapse,
#booksView.book-reading-active .book-toc-side-toggle {
  min-height: 30px;
  border-color: #deded8;
  border-radius: 8px;
  background: #fffefb;
  color: #565951;
  box-shadow: none;
  font-size: 12px;
  font-weight: 720;
}

#booksView.book-reading-active .book-toc-collapse {
  padding: 0 9px;
}

#booksView.book-reading-active .book-toc-side-toggle {
  left: -7px;
  top: 70px;
  min-width: 42px;
  min-height: 32px;
  padding: 0 8px;
  writing-mode: horizontal-tb;
}

#booksView.book-reading-active .book-reader-shell:not(.toc-collapsed) .book-toc-side-toggle {
  display: none;
}

#booksView.book-reading-active .book-reader-shell.toc-collapsed .book-toc-side-toggle {
  left: 0;
}

#booksView.book-reading-active .book-toc nav {
  gap: 3px;
  padding: 7px;
}

#booksView.book-reading-active .book-toc nav button {
  min-height: 31px;
  padding: 7px 9px;
  border-radius: 8px;
  color: #4f5a53;
  font-size: 13px;
  line-height: 1.25;
}

#booksView.book-reading-active .book-toc nav button.depth-2 {
  padding-left: 19px;
  font-size: 12px;
}

#booksView.book-reading-active .book-toc nav button.depth-3,
#booksView.book-reading-active .book-toc nav button.depth-4 {
  padding-left: 28px;
  font-size: 12px;
}

#booksView.book-reading-active .book-toc nav button.kind-answers {
  color: #38665a;
  background: #f1f7f2;
}

#booksView.book-reading-active .book-toc nav button.active,
#booksView.book-reading-active .book-toc nav button:hover {
  color: #263c34;
  background: #edf7ef;
}

#booksView.book-reading-active .book-answer-toolbar {
  top: 8px;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 9px 10px;
  border-color: #e2e2dc;
  border-radius: 12px;
  background: #fffefb;
  box-shadow: 0 8px 24px rgba(31, 35, 32, 0.055);
  backdrop-filter: blur(8px);
}

#booksView.book-reading-active .book-toolbar-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

#booksView.book-reading-active #bookCurrentChapterLabel {
  display: block;
  min-width: 0;
  color: #242622;
  font-size: 18px;
  font-weight: 780;
  line-height: 1.25;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#booksView.book-reading-active .book-study-timer {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 5px;
  align-items: center;
  min-width: max-content;
  padding: 3px;
  border: 1px solid #ecebe5;
  border-radius: 10px;
  background: #f7f7f2;
}

#booksView.book-reading-active .book-study-timer span {
  min-height: 30px;
  padding: 0 9px;
  border-radius: 8px;
  background: transparent;
  color: #5d6a62;
  font-size: 13px;
  font-weight: 730;
}

#booksView.book-reading-active .book-answer-toolbar button {
  min-height: 34px;
  padding: 0 11px;
  border-color: #deded8;
  border-radius: 8px;
  background: #fffefb;
  color: #4f5a53;
  box-shadow: none;
  font-size: 13px;
  font-weight: 740;
  line-height: 1;
}

#booksView.book-reading-active .book-answer-toolbar button:hover {
  border-color: #cfd9d0;
  background: #f7fbf6;
  color: #2f574b;
}

#booksView.book-reading-active .book-study-timer #bookStudyStartBtn,
#booksView.book-reading-active .book-study-timer #bookStudyPauseBtn,
#booksView.book-reading-active .book-study-timer #bookStudyResumeBtn {
  border-color: rgba(87, 137, 112, 0.55);
  background: #eaf4ee;
  color: #285d53;
}

#booksView.book-reading-active .book-study-timer #bookStudyFinishBtn {
  border-color: #efd4cc;
  background: #fff8f5;
  color: #9b4d3d;
}

#booksView.book-reading-active .book-toolbar-actions {
  justify-self: end;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
  max-width: min(760px, 52vw);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

#booksView.book-reading-active .book-toolbar-actions::-webkit-scrollbar {
  display: none;
}

#booksView.book-reading-active .book-toolbar-group {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 5px;
  align-items: center;
  padding: 3px;
  border: 1px solid #ecebe5;
  border-radius: 10px;
  background: #f7f7f2;
}

#booksView.book-reading-active .book-toolbar-divider {
  min-height: 28px;
  margin: 0 2px;
  background: #e2e2dc;
}

#booksView.book-reading-active .book-toolbar-reading {
  margin-left: 0;
}

#booksView.book-reading-active .book-toolbar-ink {
  padding-left: 0;
}

#booksView.book-reading-active .book-answer-toolbar .book-label-button {
  border-color: #e4c57f;
  background: #fff8e6;
  color: #76551d;
}

#booksView.book-reading-active .book-answer-toolbar .book-label-button.saved {
  border-color: #e7b9ae;
  background: #fff0eb;
  color: #9b4d3d;
  box-shadow: none;
}

#booksView.book-reading-active .book-toolbar-actions #bookSelectToggleBtn.active,
#booksView.book-reading-active .book-toolbar-actions .book-pen-toggle.active,
#booksView.book-reading-active .book-toolbar-actions .book-pen-action.active {
  border-color: #e7b9ae;
  background: #fff0eb;
  color: #9b4d3d;
}

#booksView.book-reading-active .book-content-panel,
#booksView.book-reading-active .book-answer-panel {
  margin-top: 10px;
}

#booksView.book-reading-active .book-original-page {
  border-color: #e2e2dc;
  border-radius: 10px;
  background: #fafaf7;
  box-shadow: none;
}

#booksView.book-reading-active .book-original-page iframe {
  height: min(80vh, 900px);
  min-height: 590px;
  background: #fafaf7;
}

@media (max-width: 1180px) {
  #booksView.book-reading-active .book-reader-shell,
  #booksView.book-reading-active .book-reader-shell.toc-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  #booksView.book-reading-active .book-answer-toolbar,
  #booksView.book-reading-active .book-toolbar-status {
    grid-template-columns: minmax(0, 1fr);
  }

  #booksView.book-reading-active .book-toolbar-actions {
    justify-self: stretch;
    max-width: none;
  }

  #booksView.book-reading-active .book-toc {
    position: relative;
    top: auto;
    max-height: 260px;
  }

  #booksView.book-reading-active .book-toc-side-toggle {
    top: 64px;
  }
}

@media (max-width: 720px) {
  #booksView.book-reading-active .book-answer-toolbar {
    top: 0;
    padding: 8px;
  }

  #booksView.book-reading-active #bookCurrentChapterLabel {
    font-size: 15px;
    white-space: normal;
  }

  #booksView.book-reading-active .book-study-timer,
  #booksView.book-reading-active .book-toolbar-actions {
    width: 100%;
  }

  #booksView.book-reading-active .book-original-page iframe {
    min-height: 520px;
  }
}

/* Geometry model cards: clear, touch-friendly reading mode for scanned books. */
#booksView.book-reading-active .book-model-reader {
  width: min(1320px, 100%);
  margin: 0 auto;
  color: #26342f;
}

#booksView.book-reading-active .book-model-toolbar {
  position: sticky;
  top: 8px;
  z-index: 18;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 66px;
  padding: 10px 12px 10px 16px;
  border: 1px solid #e2e2dc;
  border-radius: 12px;
  background: rgba(255, 254, 251, 0.96);
  box-shadow: 0 8px 24px rgba(31, 35, 32, 0.055);
  backdrop-filter: blur(8px);
}

#booksView.book-reading-active .book-model-toolbar > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#booksView.book-reading-active .book-model-toolbar > div:first-child span {
  color: #788078;
  font-size: 12px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#booksView.book-reading-active .book-model-toolbar > div:first-child strong {
  color: #263c34;
  font-size: 19px;
  line-height: 1.3;
}

#booksView.book-reading-active .book-model-toolbar-actions,
#booksView.book-reading-active .book-model-view-tabs {
  display: flex;
  align-items: center;
  gap: 7px;
}

#booksView.book-reading-active .book-model-view-tabs {
  padding: 3px;
  border: 1px solid #e7e7e0;
  border-radius: 10px;
  background: #f7f7f2;
}

#booksView.book-reading-active .book-model-toolbar button {
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid #deded8;
  border-radius: 8px;
  background: #fffefb;
  color: #4f5a53;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  touch-action: manipulation;
}

#booksView.book-reading-active .book-model-view-tabs button {
  min-height: 34px;
  border-color: transparent;
  background: transparent;
}

#booksView.book-reading-active .book-model-view-tabs button.active {
  border-color: #cdded4;
  background: #eaf4ee;
  color: #285d53;
}

#booksView.book-reading-active .book-model-toolbar button:hover,
#booksView.book-reading-active .book-model-toolbar button:focus-visible {
  border-color: #bfcfc5;
  background: #f2f8f3;
  color: #264f45;
}

#booksView.book-reading-active .book-model-layout {
  display: grid;
  grid-template-columns: minmax(190px, 224px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 14px;
}

#booksView.book-reading-active .book-model-nav {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e2e2dc;
  border-radius: 12px;
  background: #fffefb;
}

#booksView.book-reading-active .book-model-nav-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 2px 7px;
  border-bottom: 1px solid #ecebe5;
}

#booksView.book-reading-active .book-model-nav-head strong {
  color: #2f493f;
  font-size: 16px;
}

#booksView.book-reading-active .book-model-nav-head span {
  color: #8a8f87;
  font-size: 12px;
}

#booksView.book-reading-active .book-model-nav > button {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 82px;
  padding: 11px 12px;
  border: 1px solid #e7e7e0;
  border-radius: 10px;
  background: #fafaf7;
  color: #56615a;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

#booksView.book-reading-active .book-model-nav > button.active {
  border-color: #b8d3c3;
  background: #edf7ef;
  box-shadow: inset 3px 0 0 #4d9275;
}

#booksView.book-reading-active .book-model-nav > button span,
#booksView.book-reading-active .book-model-nav > button small {
  color: #748078;
  font-size: 12px;
}

#booksView.book-reading-active .book-model-nav > button strong {
  color: #294b40;
  font-size: 16px;
}

#booksView.book-reading-active .book-model-nav > p {
  margin: 2px 2px 0;
  color: #868b84;
  font-size: 12px;
  line-height: 1.55;
}

#booksView.book-reading-active .book-model-main,
#booksView.book-reading-active .book-model-question-groups,
#booksView.book-reading-active .book-model-question-list {
  display: grid;
  gap: 16px;
  min-width: 0;
}

#booksView.book-reading-active .book-model-question-groups {
  gap: 24px;
}

#booksView.book-reading-active .book-model-question-group {
  display: grid;
  gap: 12px;
  min-width: 0;
}

#booksView.book-reading-active .book-model-question-group > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e2e3dc;
  border-radius: 11px;
  background: #f8f8f3;
}

#booksView.book-reading-active .book-model-question-group > header h4,
#booksView.book-reading-active .book-model-question-group > header p {
  margin: 0;
}

#booksView.book-reading-active .book-model-question-group > header h4 {
  color: #2d4e42;
  font-size: 18px;
}

#booksView.book-reading-active .book-model-question-group > header p {
  margin-top: 3px;
  color: #7a8079;
  font-size: 12px;
}

#booksView.book-reading-active .book-model-question-group > header > span {
  color: #68736c;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}

#booksView.book-reading-active .book-model-lesson-card,
#booksView.book-reading-active .book-model-question-card {
  border: 1px solid #e1e3dc;
  border-radius: 14px;
  background: #fffefb;
  box-shadow: 0 10px 30px rgba(44, 58, 50, 0.045);
}

#booksView.book-reading-active .book-model-lesson-card {
  padding: clamp(18px, 2.5vw, 30px);
}

#booksView.book-reading-active .book-model-lesson-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #ecebe5;
}

#booksView.book-reading-active .book-model-lesson-title > div:first-child > span,
#booksView.book-reading-active .book-model-question-section > header span {
  color: #56806e;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.03em;
}

#booksView.book-reading-active .book-model-lesson-title h2 {
  margin: 5px 0 6px;
  color: #24463b;
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1.15;
  font-weight: 760;
}

#booksView.book-reading-active .book-model-lesson-title p {
  margin: 0;
  color: #6f7770;
  font-size: 15px;
  line-height: 1.6;
}

#booksView.book-reading-active .book-model-tags {
  display: flex;
  flex: 0 1 360px;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

#booksView.book-reading-active .book-model-tags span,
#booksView.book-reading-active .book-model-question-label,
#booksView.book-reading-active .book-model-difficulty,
#booksView.book-reading-active .book-model-solution-origin {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #d7e5db;
  border-radius: 999px;
  background: #f1f7f2;
  color: #3d6b5b;
  font-size: 12px;
  font-weight: 730;
}

#booksView.book-reading-active .book-model-lesson-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(480px, 620px);
  gap: clamp(20px, 3vw, 42px);
  align-items: center;
  margin-top: 22px;
}

#booksView.book-reading-active .book-model-lesson-copy {
  display: grid;
  gap: 16px;
}

#booksView.book-reading-active .book-model-recognition {
  padding: 15px 17px;
  border-left: 4px solid #6fa186;
  border-radius: 0 10px 10px 0;
  background: #f3f8f3;
}

#booksView.book-reading-active .book-model-recognition > span {
  color: #39705d;
  font-size: 13px;
  font-weight: 800;
}

#booksView.book-reading-active .book-model-recognition p {
  margin: 6px 0 0;
  color: #34443d;
  font-size: 16px;
  line-height: 1.75;
}

#booksView.book-reading-active .book-model-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#booksView.book-reading-active .book-model-facts section,
#booksView.book-reading-active .book-model-variants section {
  padding: 14px 16px;
  border: 1px solid #e5e5de;
  border-radius: 10px;
  background: #fafaf7;
}

#booksView.book-reading-active .book-model-facts h3,
#booksView.book-reading-active .book-model-method h3,
#booksView.book-reading-active .book-model-question-section h3,
#booksView.book-reading-active .book-model-analysis h4 {
  margin: 0;
  color: #2c4b40;
  font-size: 17px;
}

#booksView.book-reading-active .book-model-facts ul,
#booksView.book-reading-active .book-model-method ol,
#booksView.book-reading-active .book-model-analysis ol {
  margin: 10px 0 0;
  padding-left: 22px;
  color: #34443d;
}

#booksView.book-reading-active .book-model-facts li,
#booksView.book-reading-active .book-model-method li,
#booksView.book-reading-active .book-model-analysis li {
  margin: 6px 0;
  padding-left: 3px;
  line-height: 1.7;
}

#booksView.book-reading-active .book-model-figure {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid #e5e3d9;
  border-radius: 12px;
  background: #fff;
}

#booksView.book-reading-active .book-model-figure img {
  position: absolute;
  top: var(--book-model-image-top);
  left: var(--book-model-image-left);
  display: block;
  width: var(--book-model-image-width);
  max-width: none;
  height: auto;
}

#booksView.book-reading-active .book-model-figure.lesson-figure {
  width: min(620px, 100%);
  justify-self: center;
}

#booksView.book-reading-active .book-model-method {
  margin-top: 20px;
  padding: 17px 19px;
  border: 1px solid #eadfc8;
  border-radius: 11px;
  background: #fffbf2;
}

#booksView.book-reading-active .book-model-variants {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

#booksView.book-reading-active .book-model-variants section {
  background: #faf7ef;
}

#booksView.book-reading-active .book-model-variants strong {
  color: #775f30;
  font-size: 15px;
}

#booksView.book-reading-active .book-model-variants p {
  margin: 5px 0 0;
  color: #6e6b61;
  font-size: 14px;
  line-height: 1.6;
}

#booksView.book-reading-active .book-model-question-section > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 0;
}

#booksView.book-reading-active .book-model-question-section > header h3 {
  margin-top: 3px;
  font-size: 24px;
}

#booksView.book-reading-active .book-model-question-section > header > strong {
  color: #6d766f;
  font-size: 14px;
}

#booksView.book-reading-active .book-model-question-card {
  overflow: hidden;
}

#booksView.book-reading-active .book-model-question-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid #ecebe5;
  background: #fbfbf7;
}

#booksView.book-reading-active .book-model-question-head > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

#booksView.book-reading-active .book-model-difficulty {
  border-color: #eadfc8;
  background: #fff9ed;
  color: #84652a;
}

#booksView.book-reading-active .book-model-solution-origin.original {
  border-color: #cedfd4;
  background: #eef7f1;
  color: #396956;
}

#booksView.book-reading-active .book-model-solution-origin.supplemental {
  border-color: #e8c998;
  background: #fff5df;
  color: #8a5b17;
}

#booksView.book-reading-active .book-model-solution-origin.answer-only {
  border-color: #cdd9ea;
  background: #f1f5fb;
  color: #486783;
}

#booksView.book-reading-active .book-model-question-head small {
  color: #898e87;
  font-size: 12px;
}

#booksView.book-reading-active .book-model-question-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
  padding: clamp(18px, 2.7vw, 28px);
}

#booksView.book-reading-active .book-model-question-stem {
  margin: 0;
  color: #263730;
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.8;
  font-weight: 650;
}

#booksView.book-reading-active .book-model-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

#booksView.book-reading-active .book-model-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid #e2e3dc;
  border-radius: 9px;
  background: #fafaf7;
  color: #36463f;
  font-size: 16px;
}

#booksView.book-reading-active .book-model-option strong {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eaf3ed;
  color: #386452;
  font-size: 13px;
}

#booksView.book-reading-active .book-model-figure.question-figure {
  width: min(300px, 100%);
  justify-self: center;
}

#booksView.book-reading-active .book-model-question-body.wide-question-figure {
  grid-template-columns: minmax(0, 1fr);
}

#booksView.book-reading-active .book-model-figure.question-figure.wide-figure {
  width: min(900px, 100%);
}

#booksView.book-reading-active .book-model-question-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 12px 16px;
  border-top: 1px solid #ecebe5;
  background: #fbfbf7;
}

#booksView.book-reading-active .book-model-question-actions button {
  min-width: 108px;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid #bfd5c7;
  border-radius: 9px;
  background: #eff7f1;
  color: #315f50;
  font-size: 14px;
  font-weight: 760;
  cursor: pointer;
  touch-action: manipulation;
}

#booksView.book-reading-active .book-model-question-actions button.analysis-button {
  border-color: #e3cfa6;
  background: #fff8e9;
  color: #795d27;
}

#booksView.book-reading-active .book-model-question-actions button[aria-expanded="true"] {
  box-shadow: inset 0 0 0 1px currentColor;
}

#booksView.book-reading-active .book-model-answer,
#booksView.book-reading-active .book-model-analysis {
  margin: 0 16px 16px;
  padding: 15px 17px;
  border-radius: 10px;
}

#booksView.book-reading-active .book-model-answer[hidden],
#booksView.book-reading-active .book-model-analysis[hidden] {
  display: none;
}

#booksView.book-reading-active .book-model-answer {
  display: grid;
  gap: 14px;
  border: 1px solid #cde0d3;
  background: #f1f8f3;
}

#booksView.book-reading-active .book-model-answer-copy {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

#booksView.book-reading-active .book-model-answer span {
  color: #628071;
  font-size: 13px;
  font-weight: 760;
}

#booksView.book-reading-active .book-model-answer strong {
  color: #245b49;
  font-size: 19px;
}

#booksView.book-reading-active .book-model-figure.answer-figure,
#booksView.book-reading-active .book-model-figure.analysis-figure {
  width: min(720px, 100%);
  justify-self: center;
  background: #fff;
}

#booksView.book-reading-active .book-model-analysis .book-model-figure {
  margin-top: 14px;
}

#booksView.book-reading-active .book-model-analysis {
  border: 1px solid #eadbbc;
  background: #fffbf2;
}

@media (max-width: 980px) {
  #booksView.book-reading-active .book-model-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #booksView.book-reading-active .book-model-nav {
    position: relative;
    top: auto;
    grid-template-columns: auto minmax(180px, 260px) minmax(0, 1fr);
    align-items: center;
  }

  #booksView.book-reading-active .book-model-nav-head {
    display: grid;
    border-bottom: 0;
    padding: 0 5px;
  }

  #booksView.book-reading-active .book-model-nav > button {
    min-height: 68px;
  }

  #booksView.book-reading-active .book-model-nav > p {
    margin: 0;
  }

  #booksView.book-reading-active .book-model-lesson-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #booksView.book-reading-active .book-model-figure.lesson-figure {
    width: 100%;
  }
}

@media (max-width: 760px) {
  #booksView.book-reading-active .book-model-toolbar,
  #booksView.book-reading-active .book-model-lesson-title {
    align-items: stretch;
    flex-direction: column;
  }

  #booksView.book-reading-active .book-model-toolbar {
    top: 0;
  }

  #booksView.book-reading-active .book-model-toolbar-actions,
  #booksView.book-reading-active .book-model-view-tabs {
    width: 100%;
  }

  #booksView.book-reading-active .book-model-view-tabs {
    flex: 1 1 auto;
  }

  #booksView.book-reading-active .book-model-view-tabs button {
    flex: 1 1 0;
  }

  #booksView.book-reading-active .book-model-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  #booksView.book-reading-active .book-model-nav-head {
    display: flex;
  }

  #booksView.book-reading-active .book-model-lesson-title .book-model-tags {
    flex-basis: auto;
    justify-content: flex-start;
  }

  #booksView.book-reading-active .book-model-lesson-grid,
  #booksView.book-reading-active .book-model-question-body {
    grid-template-columns: minmax(0, 1fr);
  }

  #booksView.book-reading-active .book-model-facts,
  #booksView.book-reading-active .book-model-variants {
    grid-template-columns: minmax(0, 1fr);
  }

  #booksView.book-reading-active .book-model-question-body {
    align-items: start;
  }

  #booksView.book-reading-active .book-model-question-actions {
    justify-content: stretch;
  }

  #booksView.book-reading-active .book-model-question-actions button {
    flex: 1 1 0;
  }
}

@media (max-width: 520px) {
  #booksView.book-reading-active .book-model-options {
    grid-template-columns: minmax(0, 1fr);
  }

  #booksView.book-reading-active .book-model-question-head {
    align-items: flex-start;
  }
}

/* Geometry model single-card learning flow */
#booksView.book-reading-active .book-model-single-flow {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 16px;
}

#booksView.book-reading-active .book-model-directory-header,
#booksView.book-reading-active .book-model-study-header,
#booksView.book-reading-active .book-model-page-nav {
  border: 1px solid #dfe6df;
  border-radius: 14px;
  background: #fffefb;
  box-shadow: 0 8px 24px rgba(31, 53, 43, 0.05);
}

#booksView.book-reading-active .book-model-directory-header {
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

#booksView.book-reading-active .book-model-directory-header > div {
  min-width: 0;
}

#booksView.book-reading-active .book-model-directory-header span,
#booksView.book-reading-active .book-model-study-header > div > span {
  color: #6f8277;
  font-size: 13px;
  font-weight: 700;
}

#booksView.book-reading-active .book-model-directory-header h2 {
  margin: 4px 0 3px;
  color: #173c32;
  font-size: clamp(25px, 3vw, 36px);
  line-height: 1.2;
}

#booksView.book-reading-active .book-model-directory-header p {
  margin: 0;
  color: #728077;
  font-size: 15px;
}

#booksView.book-reading-active .book-model-directory-header > strong {
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: 999px;
  color: #2f745b;
  background: #eff8f2;
  font-size: 14px;
}

#booksView.book-reading-active .book-model-directory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#booksView.book-reading-active .book-model-directory-card {
  min-height: 154px;
  padding: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "number next"
    "copy next";
  align-items: center;
  gap: 8px 16px;
  border: 1px solid #dbe7dd;
  border-radius: 14px;
  color: #24473d;
  background: linear-gradient(135deg, #f3faf5 0%, #fffefb 72%);
  text-align: left;
  box-shadow: none;
}

#booksView.book-reading-active .book-model-directory-card:hover,
#booksView.book-reading-active .book-model-directory-card:focus-visible {
  border-color: #a8cdb7;
  color: #24473d;
  background: #f7fbf8;
  box-shadow: 0 8px 22px rgba(47, 116, 91, 0.08);
}

#booksView.book-reading-active .book-model-directory-number {
  grid-area: number;
  color: #4c8a6e;
  font-size: 13px;
  font-weight: 800;
}

#booksView.book-reading-active .book-model-directory-copy {
  grid-area: copy;
  min-width: 0;
  display: grid;
  gap: 5px;
}

#booksView.book-reading-active .book-model-directory-copy strong {
  color: #183f34;
  font-size: 24px;
  line-height: 1.25;
}

#booksView.book-reading-active .book-model-directory-copy small,
#booksView.book-reading-active .book-model-directory-copy em {
  overflow: hidden;
  color: #708078;
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#booksView.book-reading-active .book-model-directory-next {
  grid-area: next;
  padding: 9px 12px;
  border-radius: 999px;
  color: #2f745b;
  background: #e8f4ec;
  font-size: 13px;
  font-weight: 800;
}

#booksView.book-reading-active .book-model-study-header {
  min-height: 78px;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

#booksView.book-reading-active .book-model-study-header > button,
#booksView.book-reading-active .book-model-page-nav > button {
  min-height: 44px;
  border-color: #c8dbce;
  color: #315f4d;
  background: #f7fbf8;
  font-weight: 750;
}

#booksView.book-reading-active .book-model-study-header > button:hover,
#booksView.book-reading-active .book-model-page-nav > button:hover:not(:disabled) {
  border-color: #a9cbb5;
  color: #285441;
  background: #eef7f1;
}

#booksView.book-reading-active .book-model-study-header > div:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

#booksView.book-reading-active .book-model-study-header > div:nth-child(2) strong {
  overflow: hidden;
  color: #173c32;
  font-size: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#booksView.book-reading-active .book-model-page-status {
  min-width: 54px;
  display: grid;
  justify-items: end;
  gap: 2px;
}

#booksView.book-reading-active .book-model-page-status span {
  color: #6a7b72;
  font-size: 13px;
}

#booksView.book-reading-active .book-model-page-status strong {
  color: #2f745b;
  font-size: 17px;
}

#booksView.book-reading-active .book-model-page-stage {
  min-width: 0;
}

#booksView.book-reading-active .book-model-lesson-card.single-card,
#booksView.book-reading-active .book-model-question-card.single-card {
  min-height: min(720px, calc(100dvh - 250px));
  margin: 0;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(31, 53, 43, 0.055);
}

#booksView.book-reading-active .book-model-question-card.single-card .book-model-question-body {
  padding: 28px 30px;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  align-items: start;
  gap: 28px;
}

#booksView.book-reading-active .book-model-question-card.single-card .book-model-question-stem {
  font-size: clamp(21px, 2.25vw, 29px);
  line-height: 1.78;
}

#booksView.book-reading-active .book-model-question-card.single-card .book-model-option {
  min-height: 58px;
  font-size: 18px;
}

#booksView.book-reading-active .book-model-inline-fraction {
  display: inline-grid;
  grid-template-rows: auto auto;
  min-width: 1.1em;
  margin: 0 .18em;
  vertical-align: middle;
  color: inherit;
  font-size: .82em;
  line-height: 1;
  text-align: center;
}

#booksView.book-reading-active .book-model-inline-fraction > span:first-child {
  padding: 0 .1em .08em;
  border-bottom: 1px solid currentColor;
}

#booksView.book-reading-active .book-model-inline-fraction > span:last-child {
  padding: .08em .1em 0;
}

#booksView.book-reading-active .book-model-drawable {
  min-width: 0;
  display: grid;
  gap: 8px;
}

#booksView.book-reading-active .book-model-ink-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

#booksView.book-reading-active .book-model-ink-toolbar > span {
  margin-right: auto;
  color: #718078;
  font-size: 12px;
}

#booksView.book-reading-active .book-model-ink-toolbar button {
  min-height: 34px;
  padding: 0 10px;
  border-color: #d3dfd6;
  color: #456257;
  background: #fffefb;
  font-size: 12px;
}

#booksView.book-reading-active .book-model-ink-toolbar button:hover,
#booksView.book-reading-active .book-model-ink-toolbar button.selected {
  border-color: #9fc8ae;
  color: #245e47;
  background: #eaf5ee;
}

#booksView.book-reading-active .book-model-ink-toolbar .book-model-ink-done {
  border-color: #bc7b72;
  color: #85443b;
  background: #fff4f1;
}

#booksView.book-reading-active .book-model-ink-toolbar .book-model-ink-done.is-idle {
  visibility: hidden;
  pointer-events: none;
}

#booksView.book-reading-active .book-model-draw-surface {
  position: relative;
  min-width: 0;
}

#booksView.book-reading-active .book-model-draw-surface .book-model-figure {
  width: 100%;
  min-height: 260px;
  margin: 0;
}

#booksView.book-reading-active .book-model-draw-surface .book-model-figure img {
  user-select: none;
  -webkit-user-drag: none;
}

#booksView.book-reading-active .book-model-ink-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  pointer-events: none;
}

#booksView.book-reading-active .book-model-drawable.ink-active .book-model-ink-canvas {
  pointer-events: auto;
  touch-action: none;
  cursor: crosshair;
}

#booksView.book-reading-active .book-model-question-card.single-card .book-model-question-actions {
  padding: 16px 24px;
}

#booksView.book-reading-active .book-model-question-card.single-card .book-model-answer,
#booksView.book-reading-active .book-model-question-card.single-card .book-model-analysis {
  margin: 0 24px 22px;
  border-radius: 12px;
}

#booksView.book-reading-active .book-model-page-nav {
  padding: 10px 14px;
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr) minmax(120px, auto);
  align-items: center;
  gap: 12px;
}

#booksView.book-reading-active .book-model-page-nav > span {
  color: #738179;
  font-size: 13px;
  text-align: center;
}

#booksView.book-reading-active .book-model-page-nav > button.primary {
  border-color: #3f8d6b;
  color: #ffffff;
  background: #3f8d6b;
}

#booksView.book-reading-active .book-model-page-nav > button.primary:hover {
  border-color: #35785b;
  color: #ffffff;
  background: #35785b;
}

#booksView.book-reading-active .book-model-page-nav > button:disabled {
  opacity: .42;
  cursor: default;
}

@media (max-width: 900px) {
  #booksView.book-reading-active .book-model-directory-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #booksView.book-reading-active .book-model-question-card.single-card .book-model-question-body {
    grid-template-columns: minmax(0, 1fr);
  }

  #booksView.book-reading-active .book-model-drawable {
    width: min(620px, 100%);
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  #booksView.book-reading-active .book-model-directory-header {
    padding: 18px;
    align-items: flex-start;
    flex-direction: column;
  }

  #booksView.book-reading-active .book-model-study-header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  #booksView.book-reading-active .book-model-page-status {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    justify-items: start;
  }

  #booksView.book-reading-active .book-model-page-status strong {
    justify-self: end;
  }

  #booksView.book-reading-active .book-model-question-card.single-card .book-model-question-body {
    padding: 22px 18px;
  }

  #booksView.book-reading-active .book-model-page-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #booksView.book-reading-active .book-model-page-nav > span {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}

/* Geometry model directory refresh: chapter-led, iPad-first */
#booksView.book-reading-active .book-model-directory-header {
  padding: 28px 30px;
  background: radial-gradient(circle at 88% 18%, rgba(224,243,231,.72) 0 72px, transparent 73px), linear-gradient(135deg,#fffefb 0%,#f8fbf8 100%);
}

#booksView.book-reading-active .book-model-directory-summary {
  flex: 0 0 auto;
  min-width: 150px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 8px;
  padding: 14px 18px;
  border: 1px solid rgba(169,203,181,.72);
  border-radius: 16px;
  color: #527064;
  background: rgba(255,255,252,.8);
}

#booksView.book-reading-active .book-model-directory-summary strong { color:#2f745b; font-size:30px; line-height:1; }
#booksView.book-reading-active .book-model-directory-summary span { font-size:13px; font-weight:750; }
#booksView.book-reading-active .book-model-directory-summary small { grid-column:1/-1; margin-top:5px; color:#7b8a82; font-size:12px; }

#booksView.book-reading-active .book-model-chapter-nav {
  display:flex; gap:9px; padding:2px 2px 4px; overflow-x:auto; scrollbar-width:thin;
}

#booksView.book-reading-active .book-model-chapter-nav a {
  flex:0 0 auto; min-height:42px; display:inline-flex; align-items:center; gap:8px; padding:0 13px;
  border:1px solid #dce7df; border-radius:999px; color:#46675a; background:#fffefb;
  font-size:13px; font-weight:750; text-decoration:none;
}

#booksView.book-reading-active .book-model-chapter-nav a:hover,
#booksView.book-reading-active .book-model-chapter-nav a:focus-visible { border-color:#b4d3bf; color:#2d654f; background:#f1f8f3; }
#booksView.book-reading-active .book-model-chapter-nav strong { min-width:23px; height:23px; display:inline-grid; place-items:center; border-radius:50%; color:#3e785f; background:#edf6ef; font-size:11px; }

#booksView.book-reading-active .book-model-directory-sections { display:grid; gap:20px; }
#booksView.book-reading-active .book-model-chapter { padding:20px; border:1px solid #e0e7e1; border-radius:18px; background:rgba(255,254,251,.88); box-shadow:0 8px 24px rgba(31,53,43,.035); scroll-margin-top:110px; }
#booksView.book-reading-active .book-model-chapter-head { margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
#booksView.book-reading-active .book-model-chapter-head > div { display:flex; align-items:center; gap:11px; }
#booksView.book-reading-active .book-model-chapter-head span { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; color:#3d7b60; background:#eaf5ed; font-size:12px; font-weight:850; }
#booksView.book-reading-active .book-model-chapter-head h3 { margin:0; color:#1d4438; font-size:19px; }
#booksView.book-reading-active .book-model-chapter-head small { color:#7c8982; font-size:12px; }

#booksView.book-reading-active .book-model-chapter .book-model-directory-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
#booksView.book-reading-active .book-model-directory-card {
  min-height:88px; padding:16px 18px; grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"copy trailing"; gap:16px; border-color:#e1e7e2; border-radius:15px; background:#fffefb;
}
#booksView.book-reading-active .book-model-directory-card:hover,
#booksView.book-reading-active .book-model-directory-card:focus-visible { background:#f8fcf9; transform:translateY(-1px); box-shadow:0 9px 22px rgba(47,116,91,.07); }
#booksView.book-reading-active .book-model-directory-copy { grid-area:copy; min-width:0; display:flex; align-items:center; }
#booksView.book-reading-active .book-model-directory-copy strong { color:#173f33; font-size:17px; font-weight:720; line-height:1.4; letter-spacing:.01em; overflow-wrap:anywhere; }
#booksView.book-reading-active .book-model-directory-trailing { grid-area:trailing; display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
#booksView.book-reading-active .book-model-directory-count { color:#708279; font-size:12px; font-weight:650; letter-spacing:.02em; }
#booksView.book-reading-active .book-model-directory-next { grid-area:auto; padding:0; color:#78a08d; background:transparent; font-family:Georgia,serif; font-size:24px; line-height:1; }

#booksView.geometry-model-opening #bookList,
#booksView.geometry-model-opening .book-library-toolbar,
#booksView.geometry-model-opening .book-library-head { display:none !important; }

#booksView.geometry-model-opening #bookReader { min-height:56vh; display:grid; place-items:center; }
.geometry-model-opening-card { min-width:230px; display:flex; align-items:center; justify-content:center; gap:12px; padding:22px 26px; border:1px solid #dce7df; border-radius:18px; color:#315f4d; background:#fffefb; box-shadow:0 10px 30px rgba(31,53,43,.06); }
.geometry-model-opening-card span { width:19px; height:19px; border:3px solid #d7e9dc; border-top-color:#4b9272; border-radius:50%; animation:geometryModelOpeningSpin .75s linear infinite; }
@keyframes geometryModelOpeningSpin { to { transform:rotate(360deg); } }

#booksView.book-reading-active .book-model-chapter { --chapter-accent:#4f8e70; --chapter-soft:#eaf5ed; --chapter-wash:#fbfdfb; background:linear-gradient(145deg,var(--chapter-wash),#fffefb 52%); }
#booksView.book-reading-active .book-model-chapter.tone-2 { --chapter-accent:#9a7444; --chapter-soft:#fbf0dc; --chapter-wash:#fffaf1; }
#booksView.book-reading-active .book-model-chapter.tone-3 { --chapter-accent:#597da3; --chapter-soft:#e9f1fa; --chapter-wash:#f8fbff; }
#booksView.book-reading-active .book-model-chapter.tone-4 { --chapter-accent:#936a82; --chapter-soft:#f7eaf1; --chapter-wash:#fff9fc; }
#booksView.book-reading-active .book-model-chapter.tone-5 { --chapter-accent:#78834d; --chapter-soft:#f0f3df; --chapter-wash:#fbfcef; }
#booksView.book-reading-active .book-model-chapter .book-model-chapter-head span { color:var(--chapter-accent); background:var(--chapter-soft); }
#booksView.book-reading-active .book-model-chapter .book-model-chapter-head h3 { color:color-mix(in srgb,var(--chapter-accent) 52%,#173c32); }
#booksView.book-reading-active .book-model-chapter .book-model-directory-card { border-color:color-mix(in srgb,var(--chapter-accent) 17%,#e4e8e4); }
#booksView.book-reading-active .book-model-chapter .book-model-directory-card:nth-child(even) { background:color-mix(in srgb,var(--chapter-soft) 24%,#fffefb); }
#booksView.book-reading-active .book-model-chapter .book-model-directory-count { color:color-mix(in srgb,var(--chapter-accent) 78%,#788a81); }
#booksView.book-reading-active .book-model-chapter .book-model-directory-next { color:color-mix(in srgb,var(--chapter-accent) 72%,#aebcb4); }

@media (max-width:900px) {
  #booksView.book-reading-active .book-model-chapter .book-model-directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:640px) {
  #booksView.book-reading-active .book-model-directory-summary { width:100%; }
  #booksView.book-reading-active .book-model-chapter { padding:15px; }
  #booksView.book-reading-active .book-model-chapter .book-model-directory-grid { grid-template-columns:minmax(0,1fr); }
}

/* Book notebook compact preview override */
#booksView.book-reading-active .subject-notebook-toolbar {
  min-height: 48px;
  max-width: 1180px;
  padding: 6px 8px;
  border-color: #e2e2dc;
  border-radius: 12px;
  background: #fffefb;
  box-shadow: 0 8px 24px rgba(31, 35, 32, 0.055);
  justify-content: space-between;
  gap: 12px;
}

#booksView.book-reading-active .subject-notebook-toolbar-context {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: #5f6861;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

#booksView.book-reading-active .subject-notebook-toolbar-context strong {
  overflow: hidden;
  max-width: 11em;
  color: #22352d;
  font-size: 14px;
  font-weight: 760;
  text-overflow: ellipsis;
}

#booksView.book-reading-active .subject-notebook-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  background: #eef6f1;
  color: #386f62;
  font-weight: 760;
}

#booksView.book-reading-active .subject-notebook-toolbar-actions {
  gap: 7px;
  flex: 0 0 auto;
}

#booksView.book-reading-active .subject-notebook-toolbar-main,
#booksView.book-reading-active .subject-notebook-toolbar-ink {
  gap: 6px;
}

#booksView.book-reading-active .subject-notebook-toolbar-divider {
  min-height: 28px;
  background: #e2e2dc;
}

#booksView.book-reading-active .subject-notebook-toolbar button {
  min-height: 34px;
  padding: 0 11px;
  border-color: #deded8;
  border-radius: 8px;
  background: #fffefb;
  color: #4f5a53;
  box-shadow: none;
  font-size: 13px;
  font-weight: 740;
}

#booksView.book-reading-active .subject-notebook-toolbar button.active {
  border-color: rgba(87, 137, 112, 0.55);
  background: #eaf4ee;
  color: #285d53;
}

#booksView.book-reading-active .subject-notebook-notes {
  width: min(1180px, 100%);
  margin: 0 auto;
}

#booksView.book-reading-active .book-notes-subject {
  width: 100%;
}

#booksView.book-reading-active .book-notes-list {
  grid-template-columns: repeat(auto-fit, minmax(300px, 360px));
  align-items: start;
  justify-items: stretch;
  justify-content: start;
  gap: 12px;
  width: 100%;
}

#booksView.book-reading-active .book-note-card {
  gap: 9px;
  width: 100%;
  max-width: none;
  padding: 10px;
  border-color: #e2e2dc;
  border-radius: 10px;
  background: #fffefb;
  box-shadow: none;
  color: #242622;
}

#booksView.book-reading-active .book-note-card:hover {
  border-color: #cfd9d0;
  background: #fcfffb;
}

#booksView.book-reading-active .book-note-info {
  width: 100%;
  gap: 6px;
}

#booksView.book-reading-active .book-note-meta-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}

#booksView.book-reading-active .book-note-meta-line strong {
  min-width: 0;
  color: #242622;
  font-size: 14px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#booksView.book-reading-active .book-note-book-title {
  grid-column: 1 / -1;
  color: #71756d;
  font-size: 12px;
  font-weight: 650;
}

#booksView.book-reading-active .book-note-type {
  min-height: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eaf4ee;
  color: #38665a;
  font-size: 12px;
  font-weight: 720;
}

#booksView.book-reading-active .book-note-delete {
  min-height: 28px;
  padding: 0 8px;
  border-color: #efd4cc;
  border-radius: 8px;
  background: #fff8f5;
  color: #9b4d3d;
  font-size: 12px;
  font-weight: 720;
}

#booksView.book-reading-active .book-note-card em,
#booksView.book-reading-active .book-note-card p {
  color: #62645d;
  font-size: 13px;
  line-height: 1.4;
}

#booksView.book-reading-active .book-note-preview {
  width: 100%;
  min-height: 0;
  height: 220px;
  aspect-ratio: 16 / 9;
  border-color: #e2e2dc;
  border-radius: 8px;
  background: #fafaf7;
}

#booksView.book-reading-active .book-note-preview-snapshot {
  display: block;
  height: 220px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

#booksView.book-reading-active .book-note-snapshot {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: #fafaf7;
  object-fit: contain;
  object-position: center top;
}

#booksView.book-reading-active .book-note-html-preview,
#booksView.book-reading-active .book-note-live-preview,
#booksView.book-reading-active .book-note-live-frame,
#booksView.book-reading-active .book-note-crop-content {
  background: #fafaf7;
}

#booksView.book-reading-active .book-note-crop-content {
  padding: 18px 22px;
  color: #1f344b;
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 760px) {
  #booksView.book-reading-active .subject-notebook-toolbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #booksView.book-reading-active .subject-notebook-toolbar-context {
    flex: 1 1 100%;
  }

  #booksView.book-reading-active .subject-notebook-toolbar-actions {
    width: 100%;
    justify-content: flex-end;
  }

  #booksView.book-reading-active .book-notes-list {
    grid-template-columns: 1fr;
  }

  #booksView.book-reading-active .book-note-preview,
  #booksView.book-reading-active .book-note-preview-snapshot {
    height: 200px;
  }
}

/* Wrong review queue: quiet workspace layout */
#wrongReviewView {
  padding: 10px 18px 28px;
  background: #f7f7f3;
}

body[data-current-view="wrongReview"] .floating-pet {
  display: none;
}

#wrongReviewView .wrong-review-panel {
  width: min(1320px, 100%);
  padding: 16px;
  border: 1px solid #e2e2dc;
  border-radius: 12px;
  background: #fffefb;
  box-shadow: 0 10px 30px rgba(31, 35, 32, 0.06);
}

#wrongReviewView .wrong-review-workbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #e6e5df;
  border-radius: 10px;
  background: #fffefb;
  box-shadow: none;
}

#wrongReviewView .wrong-review-workbar-copy {
  min-width: 0;
}

#wrongReviewView .wrong-review-workbar h2 {
  margin: 0;
  color: #242622;
  font-size: 24px;
  line-height: 1.2;
}

#wrongReviewView .wrong-review-workbar p {
  max-width: 740px;
  margin: 5px 0 0;
  color: #62645d;
  font-size: 14px;
  line-height: 1.5;
}

#wrongReviewView .wrong-review-stats-line {
  margin-top: 8px;
  color: #787a72;
  font-size: 12px;
  font-weight: 700;
}

#wrongReviewView .wrong-review-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-right: 34px;
}

#wrongReviewView .wrong-review-primary-action,
#wrongReviewView .wrong-review-secondary-action {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 760;
}

#wrongReviewView #wrongReviewPaperModeBtn.active {
  border-color: #8ebaa0;
  background: #e8f4eb;
  color: #23543a;
}

#wrongReviewView .wrong-review-primary-action {
  border-color: #99c7aa;
  background: #edf7ef;
  color: #27543a;
}

#wrongReviewView .wrong-review-secondary-action {
  border-color: #deded8;
  background: #fffefb;
  color: #565951;
}

#wrongReviewView .wrong-review-rule-card {
  top: 14px;
  right: 14px;
}

#wrongReviewView .wrong-review-help {
  width: 28px;
  height: 28px;
  min-height: 28px;
  border-color: #dfdfd8;
  background: #fffefb;
  color: #7b7d75;
}

#wrongReviewView #wrongReviewSummary.import-summary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

#wrongReviewView .summary-item {
  min-height: 56px;
  padding: 9px 11px;
  border-color: #e5e4dd;
  border-radius: 9px;
  background: #fffefb;
  box-shadow: none;
}

#wrongReviewView button.summary-item:hover,
#wrongReviewView button.summary-item.active {
  border-color: #acd2ba;
  background: #f2f8f3;
}

#wrongReviewView .summary-item span {
  color: #6c6e66;
  font-size: 12px;
  font-weight: 720;
}

#wrongReviewView .summary-item strong {
  margin-top: 3px;
  color: #272923;
  font-size: 22px;
}

#wrongReviewView .wrong-review-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px 210px;
  gap: 10px;
  align-items: end;
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid #e5e4dd;
  border-radius: 10px;
  background: #fbfbf7;
}

#wrongReviewView .wrong-review-filters .subject-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  border: 1px solid #ecebe5;
  border-radius: 9px;
  background: #f4f4ef;
}

#wrongReviewView .wrong-review-filters .subject-tabs button {
  min-height: 30px;
  padding: 0 10px;
  border-color: transparent;
  border-radius: 7px;
  background: transparent;
  color: #5c5e57;
  box-shadow: none;
  font-size: 13px;
  font-weight: 740;
}

#wrongReviewView .wrong-review-filters .subject-tabs button.active {
  border-color: #deded8;
  background: #fffefb;
  color: #242622;
  box-shadow: 0 1px 3px rgba(31, 35, 32, 0.08);
}

#wrongReviewView .wrong-review-filters label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #6c6e66;
  font-size: 12px;
  font-weight: 740;
}

#wrongReviewView .wrong-review-filters select {
  height: 38px;
  border-color: #deded8;
  border-radius: 8px;
  background-color: #fffefb;
}

#wrongReviewView .wrong-review-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

#wrongReviewView .wrong-review-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, 0.22fr) minmax(520px, 1fr) minmax(116px, 0.14fr);
  gap: 14px;
  align-items: stretch;
  min-height: 248px;
  padding: 14px;
  border: 1px solid #e5e4dd;
  border-radius: 10px;
  background: #fffefb;
  box-shadow: none;
}

#wrongReviewView .wrong-review-item.paper-select-mode {
  padding-left: 46px;
}

#wrongReviewView .wrong-review-paper-selector {
  position: absolute;
  top: 18px;
  left: 14px;
  z-index: 1;
}

#wrongReviewView .wrong-review-item:hover {
  border-color: #d4d9d1;
  background: #fffffd;
}

#wrongReviewView .wrong-review-info {
  display: block;
  min-width: 0;
}

#wrongReviewView .wrong-review-meta-summary {
  display: grid;
  align-content: start;
  gap: 8px;
  height: 100%;
  min-width: 0;
}

#wrongReviewView .wrong-review-question-id {
  margin: 0;
  color: #242622;
  font-size: 24px;
  line-height: 1.12;
  letter-spacing: 0;
}

#wrongReviewView .wrong-review-meta-line {
  min-width: 0;
  color: #565951;
  font-size: 14px;
  font-weight: 760;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#wrongReviewView .wrong-review-mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

#wrongReviewView .wrong-review-mini-stats span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid #e3e3dc;
  border-radius: 999px;
  background: #f7f7f2;
  color: #62645d;
  font-size: 12px;
  font-weight: 700;
}

#wrongReviewView .wrong-review-next-date {
  margin: 8px 0 0;
  color: #30322c;
  font-size: 14px;
  font-weight: 780;
}

#wrongReviewView .wrong-review-reason-link {
  align-self: end;
  min-width: 0;
  margin-top: auto;
  color: #797b74;
  font-size: 12px;
  font-weight: 680;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#wrongReviewView .wrong-review-preview {
  display: grid;
  min-height: 0;
  max-height: none;
  padding: 8px;
  place-items: stretch;
  border: 1px solid #e0e2dc;
  border-radius: 10px;
  background: #fafaf7;
}

#wrongReviewView .wrong-review-preview-inner {
  display: grid;
  width: 100%;
  min-height: 0;
  max-height: none;
  place-items: center;
  overflow: visible;
  border: 1px solid #ebebe6;
  border-radius: 8px;
  background: #fff;
}

#wrongReviewView .wrong-review-preview > .practice2-reveal-controls {
  justify-content: flex-end;
  margin-top: 12px;
}

#wrongReviewView .wrong-review-reveal-panel.open {
  margin-top: 10px;
  padding: 14px 16px;
  border: 1px solid #e8e3d8;
  border-radius: 12px;
  background: #fffefb;
}

#wrongReviewView .wrong-review-thumb {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  border: 0;
  border-radius: 0;
  background: #fff;
  object-fit: contain;
}

#wrongReviewView .wrong-review-preview span {
  color: #9a9b94;
  font-size: 13px;
  font-weight: 720;
}

#wrongReviewView .wrong-review-actions {
  display: grid;
  gap: 8px;
  align-content: center;
  min-width: 0;
}

#wrongReviewView .wrong-review-actions button {
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 760;
}

#wrongReviewView .wrong-review-action-primary {
  border-color: #99c7aa;
  background: #edf7ef;
  color: #27543a;
}

#wrongReviewView .wrong-review-action-secondary {
  border-color: #deded8;
  background: #fffefb;
  color: #565951;
}

#wrongReviewView .wrong-review-action-danger {
  border-color: #efd4cc;
  background: #fff8f5;
  color: #9b4d3d;
}

#wrongReviewView .wrong-review-action-danger:hover {
  border-color: #e7b9ae;
  background: #fff0eb;
}

@media (max-width: 980px) {
  #wrongReviewView .wrong-review-workbar,
  #wrongReviewView .wrong-review-filters,
  #wrongReviewView .wrong-review-item {
    grid-template-columns: 1fr;
  }

  #wrongReviewView .wrong-review-header-actions {
    justify-content: flex-start;
    padding-right: 34px;
  }

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

  #wrongReviewView .wrong-review-meta-line,
  #wrongReviewView .wrong-review-reason-link {
    white-space: normal;
  }
}

/* Paper library: compact workspace layout */
#papersView.paper-library-page {
  padding: 10px 18px 28px;
  background: #f7f7f3;
}

body[data-current-view="papers"] .floating-pet {
  display: none;
}

body[data-current-view="practice2"] .floating-pet {
  display: none;
}

/* Wrong book: calm, voluntary review with the question preview as the focus. */
#wrongReviewView {
  padding: 20px 24px 42px;
  background: #faf8f2;
}

#wrongReviewView .wrong-review-panel {
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: 26px 28px 32px;
  border: 1px solid #e9e4d9;
  border-radius: 22px;
  background: #fffefb;
  box-shadow: 0 12px 34px rgba(73, 66, 49, 0.06);
}

#wrongReviewView .wrong-review-workbar {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  margin: 0 0 22px;
  padding: 4px 2px 22px;
  border: 0;
  border-bottom: 1px solid #ece7dd;
  border-radius: 0;
  background: transparent;
}

#wrongReviewView .wrong-review-workbar h2 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.15;
}

#wrongReviewView .wrong-review-workbar p {
  margin-top: 8px;
  color: #6d6b63;
  font-size: 16px;
}

#wrongReviewView .wrong-review-stats-line {
  margin-top: 12px;
  color: #397154;
  font-size: 13px;
  font-weight: 720;
}

#wrongReviewView #wrongReviewSummary,
#wrongReviewView .wrong-review-rule-card {
  display: none;
}

#wrongReviewView .wrong-review-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 14px;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  background: transparent;
}

#wrongReviewView .wrong-review-filters .subject-tabs {
  gap: 0;
  padding: 0;
  border: 1px solid #e7e1d6;
  border-radius: 999px;
  background: #faf8f2;
  overflow: hidden;
}

#wrongReviewView .wrong-review-filters .subject-tabs button {
  flex: 1 1 130px;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-right: 1px solid #e7e1d6;
  border-radius: 999px;
  font-size: 14px;
}

#wrongReviewView .wrong-review-filters .subject-tabs button:last-child { border-right: 0; }

#wrongReviewView .wrong-review-filters .subject-tabs button.active {
  background: #edf6ef;
  color: #286443;
  box-shadow: inset 0 0 0 1px #8fc3a2;
}

#wrongReviewView .wrong-review-list {
  gap: 0;
  overflow: hidden;
  border: 1px solid #ebe5da;
  border-radius: 16px;
  background: #fff;
}

#wrongReviewView .wrong-review-item {
  grid-template-columns: minmax(128px, .18fr) minmax(0, 1fr) 150px;
  gap: 18px;
  min-height: 230px;
  padding: 22px 20px;
  border: 0;
  border-bottom: 1px solid #eee9df;
  border-radius: 0;
  background: #fff;
}

#wrongReviewView .wrong-review-item:last-child { border-bottom: 0; }
#wrongReviewView .wrong-review-item:hover { background: #fffefa; }

#wrongReviewView .wrong-review-question-id {
  color: #373a35;
  font-size: 19px;
}

#wrongReviewView .wrong-review-meta-line {
  color: #6c6d66;
  font-size: 13px;
  white-space: normal;
}

#wrongReviewView .wrong-review-mini-stats span {
  border-color: #e6e1d7;
  background: #faf8f2;
  color: #77746c;
}

#wrongReviewView .wrong-review-preview {
  padding: 0;
  border: 0;
  background: transparent;
}

#wrongReviewView .wrong-review-preview-inner {
  min-height: 180px;
  padding: 16px 18px;
  place-items: start stretch;
  border-color: #eee9df;
  border-radius: 12px;
  background: #fffefb;
}

#wrongReviewView .wrong-review-rich-preview {
  color: #30322f;
  font-size: 15px;
  line-height: 1.75;
}

#wrongReviewView .wrong-review-actions {
  gap: 9px;
  align-self: start;
  align-content: start;
}

#wrongReviewView .wrong-review-actions button {
  min-height: 44px;
  font-size: 14px;
}

#wrongReviewView .wrong-review-action-primary {
  border-color: #378b60;
  background: #378b60;
  color: #fff;
}

#wrongReviewView .wrong-review-action-primary:hover { background: #2d7851; }

#wrongReviewView .wrong-review-mastery {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff3e7;
  color: #a7672c;
  font-size: 12px;
  font-weight: 760;
}

#wrongReviewView .wrong-review-mastery-reviewing { background: #f6f1df; color: #7b6a2a; }
#wrongReviewView .wrong-review-mastery-mastered { background: #eaf5ed; color: #34714d; }

#wrongReviewView .wrong-review-more { text-align: center; }
#wrongReviewView .wrong-review-more summary { color: #77746c; cursor: pointer; font-size: 13px; }
#wrongReviewView .wrong-review-more > div { display: grid; gap: 8px; margin-top: 8px; }

@media (max-width: 980px) {
  #wrongReviewView { padding: 14px 16px 34px; }
  #wrongReviewView .wrong-review-panel { padding: 22px 18px 26px; border-radius: 18px; }
  #wrongReviewView .wrong-review-workbar { grid-template-columns: 1fr; }
  #wrongReviewView .wrong-review-header-actions { padding-right: 0; }
  #wrongReviewView .wrong-review-filters { grid-template-columns: 1fr; }
  #wrongReviewView .wrong-review-item { grid-template-columns: 118px minmax(0, 1fr); }
  #wrongReviewView .wrong-review-info { grid-column: 1; grid-row: 1; }
  #wrongReviewView .wrong-review-actions { grid-column: 2; grid-row: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
  #wrongReviewView .wrong-review-preview { grid-column: 1 / -1; grid-row: 2; }
  #wrongReviewView .wrong-review-mastery { min-height: 44px; }
}

@media (max-width: 680px) {
  #wrongReviewView .wrong-review-panel { padding: 18px 12px 22px; }
  #wrongReviewView .wrong-review-filters .subject-tabs { border-radius: 14px; }
  #wrongReviewView .wrong-review-filters .subject-tabs button { flex-basis: 50%; border-radius: 12px; }
  #wrongReviewView .wrong-review-item { grid-template-columns: 1fr; padding: 18px 14px; }
  #wrongReviewView .wrong-review-info,
  #wrongReviewView .wrong-review-actions,
  #wrongReviewView .wrong-review-preview { grid-column: 1; grid-row: auto; }
  #wrongReviewView .wrong-review-actions { grid-template-columns: 1fr; }
}

#papersView.paper-library-page > .subject-overview-strip-total-first,
#papersView.paper-library-page > .paper-coverage-panel,
#papersView.paper-library-page > .paper-library-toolbar,
#papersView.paper-library-page > .paper-list {
  width: min(1320px, 100%);
  margin-left: auto;
  margin-right: auto;
}

#papersView.paper-library-page > .subject-overview-strip-total-first {
  grid-template-columns: minmax(210px, 300px) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 84px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 1px solid #e2e2dc;
  border-radius: 12px;
  background: #fffefb;
  box-shadow: 0 8px 24px rgba(31, 35, 32, 0.05);
}

#papersView.paper-library-page > .subject-overview-strip-total-first .subject-overview-head {
  border-right-color: #e7e6df;
}

#papersView.paper-library-page > .subject-overview-strip-total-first .subject-overview-total-line span {
  color: #3d453d;
  font-size: 16px;
}

#papersView.paper-library-page > .subject-overview-strip-total-first .subject-overview-total-line strong {
  color: #252922;
  font-size: 32px;
}

#papersView.paper-library-page > .subject-overview-strip-total-first .subject-overview-items {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

#papersView.paper-library-page > .subject-overview-strip-total-first .subject-overview-item {
  min-height: 52px;
  padding: 9px 12px 11px;
  border-color: #e7e6df;
  border-radius: 10px;
  background: #fbfbf7;
}

#papersView.paper-library-page > .subject-overview-strip-total-first .subject-overview-item span {
  color: #4b5149;
  font-size: 14px;
  font-weight: 780;
}

#papersView.paper-library-page > .subject-overview-strip-total-first .subject-overview-item strong {
  color: #252922;
  font-size: 20px;
}

#papersView.paper-library-page .paper-coverage-details {
  margin-bottom: 10px;
  border: 1px solid #e2e2dc;
  border-radius: 10px;
  background: #fffefb;
  box-shadow: none;
}

#papersView.paper-library-page .paper-coverage-details > summary {
  min-height: 42px;
  padding: 0 12px;
  color: #50564e;
  font-size: 13px;
}

#papersView.paper-library-page .paper-coverage-details > summary strong {
  color: #777a72;
  font-size: 12px;
  font-weight: 700;
}

#papersView.paper-library-page .paper-library-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) repeat(4, minmax(126px, 0.62fr)) auto;
  gap: 8px;
  align-items: end;
  margin: 0 auto 10px;
  padding: 10px;
  border: 1px solid #e2e2dc;
  border-radius: 12px;
  background: #fffefb;
  box-shadow: 0 8px 24px rgba(31, 35, 32, 0.045);
}

#papersView.paper-library-page .paper-library-toolbar label {
  gap: 5px;
  color: #696b64;
  font-size: 12px;
  font-weight: 740;
}

#papersView.paper-library-page .paper-library-toolbar input,
#papersView.paper-library-page .paper-library-toolbar select {
  min-height: 38px;
  border-color: #deded8;
  border-radius: 8px;
  background: #fffefb;
  color: #30332c;
}

#papersView.paper-library-page .paper-library-toolbar button {
  min-height: 38px;
  padding: 0 14px;
  border-color: #9fc6ad;
  border-radius: 8px;
  background: #edf7ef;
  color: #27543a;
  box-shadow: none;
  font-size: 13px;
  font-weight: 780;
}

#papersView.paper-library-page > .paper-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

#papersView .paper-book-shelf:empty {
  display: none;
}

#papersView.paper-library-page .paper-library-row {
  padding: 12px 14px;
  border: 1px solid #e2e2dc;
  border-radius: 10px;
  background: #fffefb;
  box-shadow: none;
}

#papersView.paper-library-page .paper-library-row.favorite {
  border-color: #e7d8aa;
  background: #fffdf6;
}

#papersView.paper-library-page .paper-library-row.completed {
  border-left: 1px solid #e2e2dc;
  box-shadow: inset 3px 0 0 #9fc6ad;
}

#papersView.paper-library-page .paper-library-row.last-opened {
  border-color: #d8c28e;
  background: #fffaf0;
  box-shadow: inset 3px 0 0 #c7963b;
}

#papersView.paper-library-page .paper-card-header {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(230px, 0.48fr) minmax(230px, auto);
  gap: 14px;
  align-items: center;
}

#papersView.paper-library-page .paper-card-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

#papersView.paper-library-page .paper-card-main h2 {
  margin: 0;
  color: #242622;
  font-size: 17px;
  line-height: 1.32;
  font-weight: 850;
}

#papersView.paper-library-page .paper-compact-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

#papersView.paper-library-page .badge {
  min-height: 24px;
  padding: 2px 8px;
  border-color: #e3e3dc;
  border-radius: 999px;
  background: #f7f7f2;
  color: #5f635a;
  font-size: 12px;
  font-weight: 700;
}

#papersView.paper-library-page .paper-more-tags {
  color: #7a7d74;
}

#papersView.paper-library-page .paper-subline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #80827a;
  font-size: 12px;
  font-weight: 650;
}

#papersView.paper-library-page .paper-subline:empty {
  display: none;
}

#papersView.paper-library-page .paper-card-progress {
  display: grid;
  gap: 5px;
  min-width: 0;
}

#papersView.paper-library-page .paper-stat-line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  color: #74776f;
  font-size: 12px;
}

#papersView.paper-library-page .paper-stat-line strong {
  min-width: 0;
  color: #30332c;
  font-size: 13px;
  font-weight: 780;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#papersView.paper-library-page .paper-progress-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

#papersView.paper-library-page .paper-opened-badge {
  border-color: #e4c57f;
  background: #fff4d8;
  color: #795820;
}

#papersView.paper-library-page .paper-actions {
  display: grid;
  gap: 8px;
  justify-items: stretch;
  min-width: 0;
}

#papersView.paper-library-page .paper-card-primary-actions,
#papersView.paper-library-page .paper-card-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

#papersView.paper-library-page .paper-card-primary-actions button,
#papersView.paper-library-page .paper-card-secondary-actions button,
#papersView.paper-library-page .paper-pdf-menu summary {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 8px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 760;
}

#papersView.paper-library-page .paper-card-primary-actions button {
  border-color: #9fc6ad;
  background: #edf7ef;
  color: #27543a;
}

#papersView.paper-library-page .paper-card-primary-actions button.secondary,
#papersView.paper-library-page .paper-card-primary-actions button:not(:first-child) {
  border-color: #deded8;
  background: #fffefb;
  color: #565951;
}

#papersView.paper-library-page .paper-card-secondary-actions button,
#papersView.paper-library-page .paper-pdf-menu summary {
  border-color: #deded8;
  background: #fffefb;
  color: #565951;
}

#papersView.paper-library-page .paper-card-secondary-actions .danger {
  border-color: #efd4cc;
  background: #fff8f5;
  color: #9b4d3d;
}

#papersView.paper-library-page .paper-pdf-menu {
  position: relative;
}

#papersView.paper-library-page .paper-pdf-menu div {
  right: 0;
  left: auto;
  min-width: 128px;
  border-color: #e2e2dc;
  border-radius: 8px;
  background: #fffefb;
  box-shadow: 0 12px 26px rgba(31, 35, 32, 0.12);
}

@media (max-width: 1100px) {
  #papersView.paper-library-page .paper-library-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #papersView.paper-library-page .paper-card-header {
    grid-template-columns: minmax(0, 1fr);
  }

  #papersView.paper-library-page .paper-card-primary-actions,
  #papersView.paper-library-page .paper-card-secondary-actions {
    justify-content: flex-start;
  }
}

.practice-library-page,
.question-search-page {
  display: grid;
  gap: 18px;
  color: #17334d;
}

.practice2-hub-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.practice2-hub-actions button {
  border: 1px solid rgba(138, 176, 156, 0.62);
  border-radius: 999px;
  background: rgba(255, 255, 250, 0.76);
  color: #315f56;
  padding: 8px 14px;
}

.practice2-hub-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px auto;
  max-width: 1120px;
}

#practice2View.practice2-direct-challenge .practice2-hub-switch {
  display: none;
}

.practice2-hub-switch button {
  display: grid;
  gap: 8px;
  min-height: 118px;
  border: 1px solid rgba(159, 188, 174, 0.48);
  border-radius: 8px;
  background: rgba(255, 255, 250, 0.82);
  color: #173d3b;
  padding: 18px;
  text-align: left;
  box-shadow: 0 16px 34px rgba(42, 83, 70, 0.06);
}

.practice2-hub-switch button.active {
  border-color: rgba(93, 148, 122, 0.72);
  background: rgba(232, 244, 237, 0.94);
}

.practice2-hub-switch span {
  color: #6b8078;
  font-size: 0.9rem;
}

.practice2-hub-switch strong {
  color: #173d3b;
  font-size: 1.35rem;
}

.practice2-hub-switch em {
  color: #60746d;
  font-style: normal;
  line-height: 1.55;
}

.practice2-hub-content {
  display: grid;
  gap: 18px;
}

.practice2-review-legacy {
  max-width: 1120px;
  margin: 0 auto;
  border: 1px solid rgba(159, 188, 174, 0.42);
  border-radius: 8px;
  background: rgba(255, 255, 250, 0.72);
  padding: 10px 14px;
}

.practice2-review-legacy > summary {
  cursor: pointer;
  color: #60756c;
  font-weight: 700;
}

.practice2-review-legacy[open] > summary {
  margin-bottom: 14px;
}

.practice-library-page {
  grid-template-columns: minmax(180px, 230px) minmax(230px, 290px) minmax(520px, 1fr);
  align-items: start;
}

.practice-library-page.hidden,
.practice-library-full-reader.hidden {
  display: none !important;
}

.question-search-page {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.practice-library-rail,
.practice-library-folder-panel,
.practice-library-main,
.question-search-panel {
  border: 1px solid rgba(159, 188, 174, 0.44);
  background: rgba(255, 255, 250, 0.86);
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 18px 42px rgba(42, 83, 70, 0.07);
}

.practice-library-head,
.question-search-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.practice-library-head span,
.question-search-head span {
  display: block;
  color: #6d8378;
  font-size: 0.9rem;
}

.practice-library-head strong,
.question-search-head strong {
  color: #173d3b;
  font-size: 1.2rem;
}

.practice-library-subjects,
.practice-library-grades,
.practice-library-folders,
.practice-library-paper-list,
.question-search-results {
  display: grid;
  gap: 10px;
}

.practice-library-folders {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(159, 188, 174, 0.32);
}

.practice-library-subjects button,
.practice-library-grade-list button,
.practice-library-folders button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(159, 188, 174, 0.56);
  border-radius: 8px;
  background: rgba(255, 255, 250, 0.74);
  color: #244f4c;
  padding: 10px 12px;
  text-align: left;
}

.practice-library-subjects button.active,
.practice-library-grade-list button.active,
.practice-library-folders button.active {
  background: rgba(228, 243, 235, 0.9);
  border-color: rgba(96, 151, 124, 0.72);
}

.practice-library-subjects em,
.practice-library-folders em,
.practice-library-paper-row em {
  color: #6c8077;
  font-style: normal;
  font-size: 0.88rem;
}

.practice-library-toolbar,
.question-search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}

.question-search-filters {
  display: grid;
  gap: 10px;
}

.question-search-primary {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 220px) auto;
  gap: 12px;
  align-items: end;
}

.question-search-keyword input {
  width: 100%;
  font-size: 1.02rem;
}

.question-search-code input {
  width: 100%;
}

.question-search-submit {
  min-height: 38px;
  font-weight: 700;
}

.question-search-more {
  border: 0;
}

.question-search-more summary {
  width: fit-content;
  cursor: pointer;
  color: #527067;
  font-size: 0.9rem;
  list-style: none;
  padding: 4px 2px;
}

.question-search-more summary::-webkit-details-marker {
  display: none;
}

.question-search-more summary::after {
  content: "⌄";
  margin-left: 6px;
  color: #7f968c;
}

.question-search-more[open] summary::after {
  content: "⌃";
}

.question-search-more-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid rgba(159, 188, 174, 0.28);
  border-radius: 8px;
  background: rgba(247, 252, 248, 0.52);
}

.practice-library-toolbar label,
.question-search-filters label {
  display: grid;
  gap: 6px;
  color: #5f756c;
  font-size: 0.9rem;
}

.practice-library-toolbar input,
.question-search-filters input,
.question-search-filters select {
  min-height: 38px;
  border: 1px solid rgba(159, 188, 174, 0.64);
  border-radius: 8px;
  background: rgba(255, 255, 250, 0.92);
  color: #17334d;
  padding: 6px 10px;
}

.practice-library-toolbar button,
.question-search-filters button,
.practice-library-paper-row button {
  border: 1px solid rgba(138, 176, 156, 0.66);
  border-radius: 8px;
  background: rgba(247, 252, 248, 0.92);
  color: #315f56;
  padding: 8px 12px;
}

@media (max-width: 820px) {
  .question-search-primary,
  .question-search-more-grid {
    grid-template-columns: 1fr;
  }

  .question-search-submit {
    width: 100%;
  }
}

.practice-library-paper-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(159, 188, 174, 0.38);
  border-radius: 8px;
  background: rgba(255, 255, 250, 0.78);
  padding: 12px;
}

.practice-library-paper-row.active {
  border-color: rgba(96, 151, 124, 0.74);
  background: rgba(239, 249, 243, 0.88);
}

.practice-library-paper-row strong {
  display: block;
  color: #173d3b;
  margin-bottom: 4px;
}

.practice-library-paper-row span {
  display: block;
  color: #536a62;
  font-style: normal;
  line-height: 1.55;
}

.practice-library-grade-title {
  color: #6d8378;
  font-size: 0.88rem;
  margin-bottom: 8px;
}

.practice-library-grade-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.practice-library-grade-list button {
  justify-content: center;
  min-height: 38px;
  font-weight: 700;
}

.practice-library-full-reader {
  color: #17334d;
}

.practice-library-reader-toolbar {
  position: sticky;
  top: 10px;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  max-width: 1180px;
  margin: 0 auto 14px;
  padding: 8px 10px;
  border: 1px solid rgba(159, 188, 174, 0.34);
  border-radius: 8px;
  background: rgba(255, 255, 250, 0.9);
  backdrop-filter: blur(10px);
}

.practice-library-reader-toolbar button {
  border: 1px solid rgba(138, 176, 156, 0.66);
  border-radius: 999px;
  background: rgba(247, 252, 248, 0.92);
  color: #315f56;
  padding: 7px 12px;
}

.practice-library-reader-toolbar span {
  color: #6a7f76;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.practice2-reading-mode .practice2-hero,
.practice2-reading-mode .practice2-hub-switch,
.practice2-reading-mode .practice2-review-legacy {
  display: none;
}

.practice2-reading-mode .practice2-hub-content {
  margin-top: 0;
}

.practice2-reading-mode .practice-library-detail {
  max-width: 1180px;
  margin: 0 auto;
}

.question-search-panel .practice2-question-flow {
  max-width: 1180px;
  margin: 0 auto;
}

.question-search-flow-head {
  max-width: 1180px;
  margin: 0 auto 14px;
}

.question-search-match-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 16px 8px;
}

.question-search-match-reasons span {
  padding: 4px 9px;
  border: 1px solid rgba(91, 151, 124, 0.24);
  border-radius: 999px;
  color: #55746a;
  background: rgba(231, 244, 236, 0.66);
  font-size: 12px;
}

.question-search-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 1180px;
  margin: 18px auto 2px;
}

.question-search-pager button {
  min-width: 92px;
  padding: 9px 16px;
  border: 1px solid rgba(88, 139, 115, 0.36);
  border-radius: 999px;
  color: #315f50;
  background: rgba(255, 255, 250, 0.9);
  font: inherit;
  cursor: pointer;
}

.question-search-pager button:disabled {
  opacity: 0.38;
  cursor: default;
}

.question-search-pager span {
  color: #657b73;
  font-size: 14px;
}

.practice-library-empty {
  color: #6b7c74;
  border: 1px dashed rgba(159, 188, 174, 0.58);
  border-radius: 8px;
  padding: 16px;
  background: rgba(255, 255, 250, 0.62);
}

@media (max-width: 1180px) {
  .practice2-hub-switch,
  .practice-library-page,
  .question-search-page {
    grid-template-columns: 1fr;
  }
}

/* 2026-07-13: middle-exam final challenge module. */
.practice2-hub-switch {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.final-challenge-page {
  display: grid;
  gap: 16px;
  width: min(1180px, 100%);
  margin: 0 auto;
  color: #17334d;
}

.final-challenge-head,
.final-challenge-filters {
  border: 1px solid rgba(203, 184, 139, 0.5);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 252, 242, 0.94), rgba(255, 255, 250, 0.9));
  box-shadow: 0 16px 34px rgba(91, 72, 37, 0.06);
}

.final-challenge-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
}

.final-challenge-head span {
  color: #8a7040;
  font-size: 0.86rem;
  font-weight: 750;
}

.final-challenge-head h3 {
  margin: 4px 0 3px;
  color: #4e3d20;
  font-size: 1.5rem;
}

.final-challenge-head p {
  margin: 0;
  color: #786b54;
  line-height: 1.55;
}

.final-challenge-head > strong {
  flex: 0 0 auto;
  min-width: 82px;
  padding: 9px 14px;
  border: 1px solid rgba(207, 170, 91, 0.52);
  border-radius: 999px;
  color: #76571d;
  background: rgba(255, 244, 211, 0.88);
  text-align: center;
}

.final-challenge-filters {
  display: grid;
  gap: 13px;
  padding: 16px 18px;
}

.final-challenge-filter-group {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.final-challenge-filter-group > strong {
  padding-top: 7px;
  color: #6f6047;
  font-size: 0.9rem;
}

.final-challenge-filter-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.final-challenge-filter-group button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid rgba(196, 180, 145, 0.52);
  border-radius: 999px;
  color: #675a44;
  background: rgba(255, 255, 250, 0.86);
  box-shadow: none;
}

.final-challenge-filter-group button span {
  color: #9a8968;
  font-size: 0.8rem;
}

.final-challenge-filter-group button.active {
  border-color: rgba(192, 144, 58, 0.68);
  color: #67490e;
  background: rgba(255, 239, 198, 0.92);
}

.final-challenge-results {
  display: grid;
  gap: 14px;
}

.final-challenge-flow-head {
  border-color: rgba(203, 184, 139, 0.45);
  background: rgba(255, 252, 243, 0.82);
}

.final-challenge-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-right: auto;
}

.final-challenge-card-meta span,
.final-challenge-card-meta strong {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.82rem;
}

.final-challenge-card-meta span {
  color: #725a2a;
  background: #fff2cd;
}

.final-challenge-card-meta strong {
  color: #81502f;
  background: #fde9db;
}

.final-challenge-card-meta em {
  min-width: 0;
  overflow: hidden;
  color: #7a7469;
  font-size: 0.82rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .practice2-hub-switch {
    grid-template-columns: 1fr;
  }

  .final-challenge-head {
    align-items: flex-start;
  }

  .final-challenge-filter-group {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .final-challenge-filter-group > strong {
    padding-top: 0;
  }

  .final-challenge-card-meta {
    width: 100%;
    flex-wrap: wrap;
  }

  .final-challenge-card-meta em {
    flex-basis: 100%;
  }
}
.vocabulary-center-tabs {
  margin: 18px 0 0;
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #dce5e0;
}

.vocabulary-center-tabs button {
  min-height: 42px;
  padding: 8px 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #687872;
  font-weight: 700;
}

.vocabulary-center-tabs button.active {
  border-bottom-color: #3d8667;
  color: #245a45;
}

.vocabulary-center-panel {
  margin-top: 18px;
  padding: 24px;
  border: 1px solid #dce6e0;
  border-radius: 8px;
  background: #fffefb;
}

.vocabulary-center-today {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  background: linear-gradient(105deg, #f1f8f3 0 60%, #f8fbf9 60%);
}

.vocabulary-today-copy span,
.vocabulary-center-settings > div:first-child span,
.vocabulary-pack-card > span {
  color: #648076;
  font-size: 13px;
  font-weight: 700;
}

.vocabulary-today-copy h4,
.vocabulary-center-settings h4 {
  margin: 6px 0;
  color: #173d31;
  font-size: 24px;
  letter-spacing: 0;
}

.vocabulary-today-copy p,
.vocabulary-center-settings p,
.vocabulary-pack-card p,
.vocabulary-import-row p {
  margin: 0;
  color: #71817a;
}

.vocabulary-today-stats {
  display: flex;
  gap: 8px;
}

.vocabulary-today-stats span {
  min-width: 76px;
  display: grid;
  gap: 2px;
  color: #6b7d75;
  text-align: center;
  font-size: 12px;
}

.vocabulary-today-stats strong {
  color: #214f3d;
  font-size: 22px;
}

.vocabulary-primary-action {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 44px;
  padding: 9px 22px;
  border: 0;
  border-radius: 7px;
  background: #3c8565;
  color: #fff;
  font-weight: 800;
}

.vocabulary-pack-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.vocabulary-pack-card {
  min-height: 112px;
  padding: 16px;
  display: grid;
  align-content: start;
  gap: 7px;
  border: 1px solid #dce5e0;
  border-radius: 7px;
  background: #fbfcfa;
}

.vocabulary-pack-card strong { color: #213f35; font-size: 16px; }
.vocabulary-pack-card.official { background: #f0f5fb; border-color: #d7e1ee; }
.vocabulary-pack-card.reading { background: #f2f8f3; }

.vocabulary-import-row {
  margin: 16px 0;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px dashed #b9cbc1;
  border-radius: 7px;
}

.vocabulary-import-row button,
.vocabulary-daily-options button {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid #b9cbc1;
  border-radius: 6px;
  background: #fff;
  color: #315f4b;
  font-weight: 700;
}

.vocabulary-library-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vocabulary-library-actions a { padding: 9px 12px; border: 1px solid #c8d6cf; border-radius: 6px; color: #426756; text-decoration: none; font-size: 13px; }

.vocabulary-daily-options {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(5, minmax(90px, 1fr));
  gap: 10px;
}

.vocabulary-daily-options button {
  min-height: 68px;
  display: grid;
  place-items: center;
  font-size: 20px;
}

.vocabulary-daily-options button.active {
  border-color: #4c9272;
  background: #edf7f0;
}

.vocabulary-daily-options small { font-size: 11px; font-weight: 500; }
.vocabulary-daily-options label { padding: 8px; display: grid; gap: 4px; color: #63756d; }
.vocabulary-daily-options input { width: 100%; min-height: 36px; border: 1px solid #c9d6cf; border-radius: 5px; padding: 6px 8px; }

@media (max-width: 900px) {
  .vocabulary-center-today { grid-template-columns: 1fr; }
  .vocabulary-today-stats { justify-content: flex-start; }
  .vocabulary-pack-grid { grid-template-columns: 1fr 1fr; }
  .vocabulary-daily-options { grid-template-columns: repeat(3, minmax(80px, 1fr)); }
}

@media (max-width: 620px) {
  .vocabulary-center-panel { padding: 16px; }
  .vocabulary-pack-grid { grid-template-columns: 1fr; }
  .vocabulary-import-row { align-items: stretch; flex-direction: column; }
}
/* 古诗文背诵 */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.recitation-page {
  --recitation-ink: #143f39;
  --recitation-green: #278467;
  --recitation-green-dark: #17654f;
  --recitation-line: #dce6de;
  --recitation-soft: #f1f7f2;
  --recitation-paper: #fffef9;
  min-height: calc(100vh - 120px);
  padding: 10px 6px 30px;
  color: var(--recitation-ink);
}

.recitation-page button,
.recitation-page input,
.recitation-page select {
  font: inherit;
}

.custom-paper-floating-button.recitation-view-hidden {
  display: none;
}

.custom-paper-floating-button.hidden {
  display: none;
}

.recitation-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
  padding: 0 4px;
}

.recitation-page-head h2 {
  margin: 4px 0 2px;
  color: #0e493f;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.recitation-page-head > div > p:last-child {
  margin: 4px 0 0;
  color: #71827b;
  font-size: 14px;
}

.recitation-breadcrumb {
  margin: 0;
  color: #668078;
  font-size: 14px;
}

.recitation-term-select select {
  min-width: 190px;
  min-height: 48px;
  padding: 0 42px 0 16px;
  border: 1px solid #ccd9cf;
  border-radius: 10px;
  background: #fffefb;
  color: #3a504a;
  cursor: pointer;
}

.recitation-library-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(420px, 1.55fr) minmax(270px, 0.9fr);
  gap: 18px;
  min-height: 640px;
}

.recitation-work-panel,
.recitation-preview,
.recitation-mode-panel {
  min-width: 0;
  border: 1px solid var(--recitation-line);
  border-radius: 14px;
  background: var(--recitation-paper);
}

.recitation-work-panel,
.recitation-mode-panel {
  padding: 22px;
}

.recitation-panel-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 18px;
}

.recitation-panel-heading i {
  display: block;
  width: 4px;
  height: 24px;
  border-radius: 4px;
  background: var(--recitation-green);
}

.recitation-search {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  min-height: 48px;
  margin-bottom: 16px;
  padding: 0 12px;
  border: 1px solid #d5dfd7;
  border-radius: 9px;
  background: #ffffff;
}

.recitation-search:focus-within {
  border-color: #75ad94;
  box-shadow: 0 0 0 3px rgba(39, 132, 103, 0.12);
}

.recitation-search > span {
  width: 18px;
  height: 18px;
  background: url("/static/assets/student-home-v3/nav-reading.png") center / contain no-repeat;
  opacity: 0.62;
}

.recitation-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #213f38;
}

.recitation-work-list {
  display: grid;
  gap: 4px;
  max-height: 520px;
  overflow: auto;
  padding-right: 3px;
}

.recitation-work-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 55px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #4b5f58;
  text-align: left;
  cursor: pointer;
}

.recitation-work-item::before {
  content: "";
  width: 28px;
  height: 34px;
  border-radius: 6px;
  background: #f2f5ef url("/static/assets/icons/subject-book.png") center / 22px no-repeat;
  opacity: 0.78;
}

.recitation-work-item span {
  min-width: 0;
}

.recitation-work-item strong,
.recitation-work-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recitation-work-item strong {
  font-size: 16px;
  font-weight: 650;
}

.recitation-work-item small {
  margin-top: 3px;
  color: #87948f;
  font-size: 12px;
}

.recitation-work-item:hover,
.recitation-work-item.active {
  background: #e9f4ed;
  color: #17654f;
}

.recitation-work-item.active::before {
  background-color: #dceee2;
  opacity: 1;
}

.recitation-empty {
  margin: 36px 8px;
  color: #82908b;
  text-align: center;
}

.recitation-preview {
  display: flex;
  min-height: 640px;
  padding: 44px 48px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: auto;
}

.recitation-preview-header {
  width: 100%;
  margin-bottom: 28px;
  text-align: center;
}

.recitation-preview-header h3 {
  margin: 0;
  color: #173f37;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.recitation-preview-header p {
  margin: 12px 0 0;
  color: #75837d;
  font-size: 16px;
}

.recitation-preview-body {
  display: grid;
  width: min(100%, 680px);
  gap: 26px;
}

.recitation-preview-section h4 {
  margin: 0 0 12px;
  color: #8a958f;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.recitation-preview-lines {
  display: grid;
  gap: 8px;
}

.recitation-preview-line {
  margin: 0;
  color: #23463e;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: clamp(21px, 2.15vw, 31px);
  line-height: 1.75;
  text-align: center;
}

.recitation-preview.prose .recitation-preview-line {
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.9;
  text-align: left;
}

.recitation-preview.prose .recitation-preview-body {
  width: min(86%, 560px);
}

.recitation-preview-note {
  width: min(100%, 520px);
  margin-top: auto;
  padding-top: 26px;
  border-top: 1px solid #e3e8e3;
  color: #89938e;
  font-size: 13px;
  text-align: center;
}

.recitation-mode-panel {
  display: flex;
  flex-direction: column;
}

.recitation-mode-list {
  display: grid;
  gap: 14px;
}

.recitation-mode-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 14px;
  min-height: 105px;
  padding: 14px;
  border: 1px solid #dce4de;
  border-radius: 11px;
  background: #fff;
  color: #24443d;
  text-align: left;
  cursor: pointer;
}

.recitation-mode-card:hover,
.recitation-mode-card:focus-visible {
  border-color: #77aa93;
  box-shadow: 0 5px 18px rgba(31, 91, 72, 0.1);
  outline: 0;
}

.recitation-mode-icon {
  width: 58px;
  height: 66px;
  border-radius: 9px;
  background: #edf6ef url("/static/assets/icons/home-today-reading.png") center / 42px no-repeat;
}

.recitation-mode-card.next .recitation-mode-icon {
  background: #edf4fa url("/static/assets/icons/desktop5-chapter-book.png") center / 42px no-repeat;
}

.recitation-mode-card.previous .recitation-mode-icon {
  background: #fff5df url("/static/assets/icons/home-week-plan-book-loop.png") center / 42px no-repeat;
}

.recitation-mode-card strong,
.recitation-mode-card small {
  display: block;
}

.recitation-mode-card strong {
  margin-bottom: 7px;
  font-size: 18px;
}

.recitation-mode-card small {
  color: #7a8983;
  font-size: 13px;
  line-height: 1.45;
}

.recitation-mode-arrow {
  color: #81928b;
  font-size: 28px;
}

.recitation-last-mode {
  margin-top: auto;
  padding-top: 22px;
  color: #7a8983;
  font-size: 13px;
}

.recitation-practice-screen {
  min-height: calc(100vh - 112px);
  border: 1px solid var(--recitation-line);
  border-radius: 16px;
  background: #fffefb;
}

.recitation-practice-head {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 84px;
  padding: 0 28px;
  border-bottom: 1px solid #e2e9e3;
}

.recitation-back-button,
.recitation-section-select {
  min-height: 44px;
  border: 1px solid #d3dfd6;
  border-radius: 9px;
  background: #fff;
  color: #31534a;
}

.recitation-back-button {
  justify-self: start;
  padding: 0 16px;
  cursor: pointer;
}

.recitation-practice-title {
  text-align: center;
}

.recitation-practice-title h2 {
  margin: 0;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 30px;
  letter-spacing: 0.08em;
}

.recitation-practice-title p {
  margin: 5px 0 0;
  color: #7a8983;
  font-size: 13px;
}

.recitation-section-select {
  justify-self: end;
  min-width: 140px;
  padding: 0 12px;
}

.recitation-practice-controls {
  justify-self: end;
  display: grid;
  justify-items: end;
  gap: 7px;
  min-width: 0;
}

.recitation-difficulty-switch {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(44px, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid #d3dfd6;
  border-radius: 10px;
  background: #f6faf7;
}

.recitation-difficulty-switch button {
  min-width: 48px;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  color: #64776f;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.recitation-difficulty-switch button.active {
  color: #fff;
  background: var(--recitation-green);
}

.recitation-difficulty-switch button:focus-visible {
  outline: 3px solid rgba(39, 132, 103, 0.18);
  outline-offset: 2px;
}

.recitation-practice-body {
  width: min(100% - 48px, 980px);
  margin: 0 auto;
  padding: 52px 0 32px;
}

.recitation-writing-sheet {
  display: grid;
  gap: 22px;
  width: min(100%, 900px);
  margin: 0 auto;
}

.recitation-writing-line {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  min-height: 62px;
  color: #254940;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 31px;
  line-height: 1.4;
}

.recitation-writing-line.prompt {
  min-height: 45px;
  color: #34574e;
}

.recitation-fixed-prefix {
  flex: 0 0 auto;
  color: #73827c;
  font-size: 18px;
}

.recitation-slot-field {
  --slot-size: 42px;
  display: grid;
  grid-template-columns: repeat(var(--slot-count), var(--slot-size));
  gap: 7px;
  min-height: 58px;
  position: relative;
}

.recitation-slot-visual {
  display: grid;
  grid-template-columns: repeat(var(--slot-count), var(--slot-size));
  gap: 7px;
  grid-column: 1 / -1;
  width: max-content;
  pointer-events: none;
}

.recitation-slot-visual > span {
  height: 56px;
  border-bottom: 2px solid #9db5a8;
  border-radius: 6px 6px 0 0;
  color: #183f36;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 31px;
  line-height: 56px;
  text-align: center;
}

.recitation-slot-visual > span.wrong {
  border-bottom-color: #dc7a2d;
  background: #fff4e8;
  color: #b85c18;
}

.recitation-slot-visual > span.correct {
  border-bottom-color: #4f9b78;
  background: #edf8f1;
}

.recitation-page .recitation-line-native-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100% !important;
  height: 56px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent;
  caret-color: #1f7f61;
  -webkit-text-fill-color: transparent;
  touch-action: manipulation;
}

.recitation-page .recitation-line-native-input:focus {
  border: 1px solid rgba(39, 132, 103, 0.28) !important;
  border-radius: 8px;
  background: rgba(39, 132, 103, 0.035) !important;
}

.recitation-page .recitation-native-input.recitation-char-slot {
  position: static;
  width: var(--slot-size) !important;
  height: 56px !important;
  min-width: 0;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 2px solid #9db5a8 !important;
  border-radius: 6px 6px 0 0;
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: #183f36;
  caret-color: #1f7f61;
  -webkit-text-fill-color: currentColor;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 31px;
  line-height: 1;
  text-align: center;
  touch-action: manipulation;
}

.recitation-page .recitation-native-input.recitation-char-slot:focus {
  border-bottom-color: #278467 !important;
  background: rgba(39, 132, 103, 0.07) !important;
  box-shadow: inset 0 -1px 0 #278467 !important;
}

.recitation-page .recitation-native-input.recitation-char-slot.wrong {
  border-bottom-color: #dc7a2d !important;
  background: #fff4e8 !important;
  color: #b85c18;
}

.recitation-page .recitation-native-input.recitation-char-slot.correct {
  border-bottom-color: #4f9b78 !important;
  background: #edf8f1 !important;
}

.recitation-punctuation {
  flex: 0 0 auto;
  padding-bottom: 5px;
  color: #48655c;
  font-size: 31px;
}

.recitation-hint-panel {
  width: min(100%, 720px);
  margin: 30px auto 0;
  padding: 16px 20px;
  border: 1px solid #e4d4ad;
  border-radius: 10px;
  background: #fff9e9;
  color: #765b22;
  text-align: center;
}

.recitation-feedback-bar {
  position: sticky;
  z-index: 5;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: fit-content;
  max-width: calc(100% - 32px);
  min-height: 0;
  margin: 12px auto 14px;
  padding: 7px;
  border: 1px solid #d7e2da;
  border-radius: 12px;
  background: rgba(248, 251, 248, 0.96);
  box-shadow: 0 5px 18px rgba(34, 74, 61, 0.09);
}

.recitation-feedback-bar.active,
.recitation-feedback-bar.completed {
  padding-left: 14px;
}

.recitation-practice-screen.long-practice .recitation-feedback-bar {
  position: static;
}

.recitation-feedback-text strong,
.recitation-feedback-text small {
  display: block;
}

.recitation-feedback-text strong {
  color: #24483f;
  font-size: 14px;
}

.recitation-feedback-text small {
  margin-top: 4px;
  color: #71817a;
  font-size: 12px;
}

.recitation-feedback-text.error strong {
  color: #a9561d;
}

.recitation-feedback-text.success strong {
  color: #1d795a;
}

.recitation-feedback-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.recitation-feedback-actions button {
  min-width: 82px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #cbd9cf;
  border-radius: 8px;
  background: #fff;
  color: #31534a;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

.recitation-feedback-actions button.primary {
  min-width: 88px;
  border-color: var(--recitation-green);
  background: var(--recitation-green);
  color: #fff;
}

.recitation-feedback-actions button:hover,
.recitation-back-button:hover {
  border-color: #6fa88e;
}

@media (max-width: 1180px) {
  .recitation-page {
    padding-inline: 0;
  }

  .recitation-library-grid {
    grid-template-columns: minmax(205px, 0.72fr) minmax(360px, 1.45fr) minmax(250px, 0.9fr);
    gap: 12px;
  }

  .recitation-work-panel,
  .recitation-mode-panel {
    padding: 18px;
  }

  .recitation-preview {
    padding: 38px 28px;
  }

  .recitation-mode-card {
    grid-template-columns: 48px minmax(0, 1fr) 14px;
    gap: 10px;
    min-height: 96px;
    padding: 12px;
  }

  .recitation-mode-icon {
    width: 48px;
    height: 58px;
    background-size: 36px;
  }

  .recitation-slot-field {
    --slot-size: 38px;
    gap: 5px;
  }

  .recitation-page .recitation-native-input.recitation-char-slot {
    height: 54px;
    font-size: 29px;
  }

  .recitation-writing-line,
  .recitation-punctuation {
    font-size: 29px;
  }
}

@media (max-width: 640px) {
  .recitation-preview.prose .recitation-preview-body {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .recitation-library-grid {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .recitation-mode-panel {
    grid-column: 1 / -1;
  }

  .recitation-mode-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .recitation-last-mode {
    margin-top: 16px;
  }

  .recitation-practice-head {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px 16px;
    min-height: 0;
    padding: 14px 18px;
  }

  .recitation-practice-title {
    min-width: 0;
    text-align: left;
  }

  .recitation-practice-title h2 {
    overflow: hidden;
    font-size: 26px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .recitation-practice-controls {
    grid-column: 1 / -1;
    grid-template-columns: minmax(140px, 1fr) auto;
    align-items: center;
    justify-self: stretch;
    justify-items: stretch;
  }

  .recitation-section-select {
    justify-self: stretch;
    width: 100%;
  }

  .recitation-difficulty-switch {
    justify-self: end;
  }

  .recitation-feedback-bar.active,
  .recitation-feedback-bar.completed {
    align-items: stretch;
    flex-direction: column;
    width: calc(100% - 32px);
    padding: 9px;
  }

  .recitation-feedback-bar.active .recitation-feedback-actions,
  .recitation-feedback-bar.completed .recitation-feedback-actions {
    justify-content: stretch;
  }

  .recitation-feedback-bar.active .recitation-feedback-actions button,
  .recitation-feedback-bar.completed .recitation-feedback-actions button {
    flex: 1 1 100px;
  }
}
.english-group-title {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-left: 4px solid #4f9b79;
  border-radius: 8px;
  background: #f1f8f3;
  color: #214c3b;
  font-size: 21px;
}

.practice2-doc-content .english-instruction {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #f7f4eb;
  color: #52665c;
  font-size: 16px;
  line-height: 1.65;
}

.practice2-doc-content .english-passage-paragraph {
  margin: 0 0 14px;
  color: #263e50;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.85;
  text-indent: 2em;
}

.practice2-doc-content .english-passage-paragraph.english-passage-options {
  margin-bottom: 0;
  text-indent: 0;
}

.practice2-doc-content .english-question-block {
  margin: 18px 0;
  padding: 14px 18px;
  border: 1px solid #dce9e1;
  border-radius: 12px;
  background: #fbfdfb;
}

.practice2-doc-content .english-question-block p {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.9;
}

.english-question-number,
.english-option-label {
  display: inline-block;
  min-width: 28px;
  margin-top: 6px;
  color: #276b55;
  font-weight: 700;
}

.practice2-compact-series-card {
  margin-bottom: 8px;
  border-radius: 12px;
}

.practice2-compact-series-card .practice2-doc-section.stem {
  padding-top: 8px;
  padding-bottom: 4px;
}

.practice2-compact-series-card .practice2-question-header {
  min-height: 42px;
}
.practice2-doc-content .english-single-stem,
.practice2-doc-section.stem .practice2-doc-content > p.english-single-stem {
  margin: 0 0 8px;
  padding: 0;
  color: #263e50;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.75;
}

.practice2-doc-content .english-single-stem + .practice2-text-choice-grid {
  margin-top: 14px;
}

article[id^="practice2-english-"] .practice2-doc-section.stem .practice2-doc-content > p.english-dialogue-continuation {
  padding-left: 2.75em;
}

/* 英语单选题干与选项必须使用同一套英文字体，避免一张卡内衬线/无衬线混排。 */
article[id^="practice2-english-"] .practice2-text-choice-option,
article[id^="practice2-english-"] .practice2-choice-label {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

article[id^="practice2-english-"] .practice2-choice-label {
  font-size: 1em;
  line-height: 1.75;
}

/* 英语完形的空号两侧只留适中字宽，避免横线抢过正文。 */
article[id^="practice2-english-"] .english-passage-paragraph .fill-blank {
  min-width: 1.25em;
  margin-inline: 0.12em;
}
.content-publish-modules {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.practice2-publish-panel {
  margin: 0 0 18px;
  position: relative;
  z-index: 2;
  align-items: flex-start;
}

.practice2-publish-panel > .publish-panel-main {
  flex: 1 1 auto;
  min-width: 0;
}

.practice2-publish-panel > .publish-panel-action {
  flex: 0 0 auto;
  align-self: flex-start;
  min-height: 44px;
  white-space: nowrap;
}

.content-publish-module-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(47, 109, 91, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.content-publish-module-row span {
  display: grid;
  gap: 2px;
}

.content-publish-module-row small {
  color: #66766f;
}

.publish-progress {
  display: grid;
  gap: 11px;
  width: 100%;
  margin-top: 12px;
  padding: 13px;
  border: 1px solid rgba(132, 178, 150, 0.42);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(250, 255, 248, 0.92), rgba(245, 251, 245, 0.82)),
    radial-gradient(circle at 8% 0%, rgba(111, 167, 127, 0.12), transparent 42%);
  color: #315f56;
}

.publish-progress.hidden {
  display: none;
}

.publish-progress-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.publish-progress-copy {
  min-width: 0;
}

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

.publish-progress-copy span {
  margin-bottom: 2px;
  color: #708278;
  font-size: 12px;
}

.publish-progress-copy strong {
  color: #173f35;
  font-size: 16px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.publish-progress-value {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 9px;
  white-space: nowrap;
}

.publish-progress-value strong {
  color: #1b5a48;
  font-size: 18px;
}

.publish-progress-value span {
  color: #60786d;
  font-size: 13px;
  font-weight: 700;
}

.publish-progress-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4ece5;
  box-shadow: inset 0 1px 2px rgba(38, 59, 54, 0.08);
}

.publish-progress-track > span {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #4b9272, #76b291);
  transition: width .25s ease;
}

.publish-progress.is-indeterminate .publish-progress-track > span {
  background:
    linear-gradient(105deg, transparent 24%, rgba(255, 255, 255, 0.5) 42%, transparent 60%),
    linear-gradient(90deg, #4b9272, #76b291);
  background-size: 180% 100%, 100% 100%;
  animation: publish-progress-sheen 1.2s linear infinite;
}

.publish-progress-stages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.publish-progress-stage {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-height: 50px;
  padding: 8px 9px;
  border: 1px solid rgba(204, 219, 207, 0.78);
  border-radius: 11px;
  background: rgba(255, 255, 251, 0.82);
  color: #65776e;
}

.publish-progress-stage::before {
  content: "·";
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #e9efe9;
  color: #708278;
  font-weight: 900;
}

.publish-progress-stage strong,
.publish-progress-stage small {
  display: block;
  overflow-wrap: anywhere;
}

.publish-progress-stage strong {
  color: #3f5b50;
  font-size: 13px;
  line-height: 1.4;
}

.publish-progress-stage small {
  margin-top: 2px;
  color: #74857d;
  font-size: 11px;
  line-height: 1.4;
}

.publish-progress-stage.is-running {
  border-color: rgba(212, 182, 109, 0.76);
  background: #fff8e5;
}

.publish-progress-stage.is-running::before {
  content: "…";
  background: #f3dfaa;
  color: #765811;
}

.publish-progress-stage.is-success {
  border-color: rgba(140, 201, 167, 0.76);
  background: #edf8f1;
}

.publish-progress-stage.is-success::before {
  content: "✓";
  background: #cfe9d8;
  color: #17643d;
}

.publish-progress-stage.is-failed {
  border-color: rgba(223, 164, 158, 0.82);
  background: #fff2f0;
}

.publish-progress-stage.is-failed::before {
  content: "×";
  background: #f4d7d3;
  color: #9a3028;
}

.publish-progress-result {
  padding: 9px 11px;
  border: 1px solid rgba(204, 219, 207, 0.78);
  border-radius: 11px;
  background: rgba(255, 255, 251, 0.86);
  color: #536b61;
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.publish-progress-result.hidden {
  display: none;
}

.publish-progress-result.is-success,
.publish-progress.is-success {
  border-color: #8cc9a7;
  background-color: #edf8f1;
  color: #17643d;
}

.publish-progress-result.is-failed,
.publish-progress.is-failed {
  border-color: #dfa49e;
  background-color: #fff2f0;
  color: #9a3028;
}

.publish-progress.is-failed .publish-progress-track > span {
  background: #c75b53;
}

@keyframes publish-progress-sheen {
  from { background-position: 140% 0, 0 0; }
  to { background-position: -80% 0, 0 0; }
}

@media (max-width: 900px) {
  .practice2-publish-panel > .publish-panel-main,
  .practice2-publish-panel > .publish-panel-action {
    width: 100%;
  }

  .practice2-publish-panel > .publish-panel-action {
    align-self: stretch;
  }

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

@media (max-width: 640px) {
  .content-publish-module-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .content-publish-module-row button {
    width: 100%;
    min-height: 44px;
  }

  .publish-progress {
    padding: 11px;
  }

  .publish-progress-head {
    align-items: flex-start;
  }

  .publish-progress-value {
    display: grid;
    justify-items: end;
    gap: 0;
  }

  .publish-progress-stages {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .publish-progress-track > span {
    transition: none;
  }

  .publish-progress.is-indeterminate .publish-progress-track > span {
    animation: none;
  }
}