:root {
  color-scheme: light;
  --page: #f5f6f4;
  --surface: #ffffff;
  --surface-soft: #f8f9f7;
  --surface-strong: #eef1ed;
  --text: #18211f;
  --text-soft: #45504d;
  --muted: #717b77;
  --border: #dde2df;
  --border-strong: #cbd3ce;
  --accent: #14736f;
  --accent-hover: #0e625f;
  --accent-soft: #e4f2f0;
  --blue: #356ba1;
  --blue-soft: #eaf1f8;
  --green: #357c50;
  --green-soft: #e8f3ec;
  --amber: #a66822;
  --amber-soft: #fbf0df;
  --coral: #b44f46;
  --coral-soft: #f9eae8;
  --header-height: 58px;
  --bottom-nav-height: 68px;
  --rating-height: 82px;
  --content-width: 900px;
  --card-width: 760px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-synthesis: none;
  letter-spacing: 0;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: var(--page);
  color: var(--text);
}

body {
  min-height: 100dvh;
  font-size: 15px;
  line-height: 1.55;
}

button,
input {
  color: inherit;
  font: inherit;
  letter-spacing: 0;
}

button,
a,
input,
summary {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

h1,
h2,
p {
  margin-top: 0;
}

h1,
h2,
strong,
p,
span {
  overflow-wrap: anywhere;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgb(20 115 111 / 22%);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

body.vip-locked {
  overflow: hidden;
}

body.vip-locked #reciteApp {
  display: none !important;
}

/* VIP access */
.vip-gate {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 320px;
  overflow-y: auto;
  padding: env(safe-area-inset-top) max(20px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(20px, env(safe-area-inset-left));
  background: var(--page);
}

.vip-gate-header {
  display: flex;
  width: min(100%, 960px);
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 auto;
}

.vip-gate-brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}

.vip-gate-brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
}

.vip-gate-brand-mark svg {
  width: 19px;
  height: 19px;
}

.vip-badge {
  display: inline-flex;
  width: fit-content;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border: 1px solid #e8cfaa;
  border-radius: 4px;
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 11px;
  font-weight: 780;
  line-height: 1;
  white-space: nowrap;
}

.vip-gate-main {
  display: grid;
  width: min(100%, 960px);
  min-height: min(620px, calc(100dvh - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  place-items: center;
  padding: 36px 0 92px;
  margin: 0 auto;
}

.vip-gate-content {
  display: grid;
  width: min(100%, 400px);
  gap: 28px;
}

.vip-gate-heading {
  display: grid;
  gap: 5px;
}

.vip-gate-heading > span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 760;
}

.vip-gate-heading h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.3;
}

.vip-gate-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.vip-checking {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 10px;
  padding: 0 2px;
  color: var(--text-soft);
  font-size: 13px;
}

.vip-checking svg {
  color: var(--accent);
  animation: recite-spin 0.8s linear infinite;
}

.vip-redeem-form {
  display: grid;
  gap: 14px;
}

.vip-code-field {
  display: grid;
  gap: 7px;
}

.vip-code-field > span {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 720;
}

.vip-code-field input {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 16px;
  text-transform: uppercase;
}

.vip-code-field input:hover {
  border-color: #abb8b1;
}

.vip-code-field input:focus {
  border-color: var(--accent);
  outline: 3px solid rgb(20 115 111 / 14%);
}

.vip-code-field input[aria-invalid="true"] {
  border-color: var(--coral);
  outline-color: rgb(180 79 70 / 14%);
}

.vip-redeem-error {
  min-height: 20px;
  margin: -7px 0 0;
  color: var(--coral);
  font-size: 12px;
}

.vip-redeem-button {
  width: 100%;
  min-height: 48px;
}

.vip-redeem-button[aria-busy="true"] {
  cursor: wait;
}

.recite-shell {
  min-height: 100dvh;
}

.recite-header {
  position: fixed;
  z-index: 40;
  top: 0;
  right: 0;
  left: 0;
  height: calc(var(--header-height) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid var(--border);
  background: rgb(255 255 255 / 96%);
}

.recite-header-inner {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(130px, auto) minmax(120px, 1fr);
  align-items: center;
  width: min(100%, var(--content-width));
  height: var(--header-height);
  padding: 0 18px;
  margin: 0 auto;
}

.recite-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  min-width: 0;
  font-size: 16px;
  font-weight: 760;
}

.recite-brand-mark {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
}

.recite-brand-mark svg {
  width: 19px;
  height: 19px;
}

.recite-heading {
  display: grid;
  min-width: 0;
  justify-items: center;
  line-height: 1.25;
}

.recite-heading span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.recite-heading strong {
  font-size: 16px;
}

.recite-header-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
}

.header-count {
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--surface-strong);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.icon-button {
  display: inline-grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
}

.icon-button:hover {
  border-color: var(--border);
  background: var(--surface-soft);
  color: var(--text);
}

.recite-main {
  width: min(100%, var(--content-width));
  min-height: 100dvh;
  padding: calc(var(--header-height) + env(safe-area-inset-top) + 22px) 18px calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 30px);
  margin: 0 auto;
  outline: 0;
}

.recite-main:focus-visible {
  outline: 0;
}

.recite-main:has(.rating-dock) {
  padding-bottom: calc(var(--bottom-nav-height) + var(--rating-height) + env(safe-area-inset-bottom) + 42px);
}

.has-selection-dock .recite-main {
  padding-bottom: calc(var(--bottom-nav-height) + 74px + env(safe-area-inset-bottom) + 30px);
}

.recite-bottom-nav {
  position: fixed;
  z-index: 50;
  right: 50%;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(440px, 100%);
  min-height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  padding: 4px 8px env(safe-area-inset-bottom);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: rgb(255 255 255 / 98%);
  box-shadow: 0 -6px 22px rgb(31 44 39 / 7%);
  transform: translateX(50%);
}

.recite-bottom-nav a {
  display: grid;
  min-width: 0;
  align-content: center;
  justify-items: center;
  gap: 2px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.recite-bottom-nav a svg {
  width: 21px;
  height: 21px;
}

.recite-bottom-nav a:hover {
  color: var(--text-soft);
}

.recite-bottom-nav a.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}

.recite-loading,
.recite-empty {
  display: grid;
  min-height: 60dvh;
  place-content: center;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.recite-loading {
  color: var(--muted);
}

.recite-loading svg {
  animation: recite-spin 0.8s linear infinite;
}

@keyframes recite-spin {
  to { transform: rotate(360deg); }
}

.recite-empty > div {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--text-soft);
}

.recite-empty > div svg {
  width: 23px;
  height: 23px;
}

.recite-empty h1 {
  margin: 0;
  font-size: 22px;
}

.recite-empty p {
  max-width: 380px;
  margin: -5px 0 5px;
  color: var(--muted);
}

.button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 740;
  cursor: pointer;
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.button-primary {
  background: var(--accent);
  color: #fff;
}

.button-primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

.button-quiet {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-soft);
}

.button-danger {
  background: var(--coral);
  color: #fff;
}

/* Review */
.review-view {
  width: min(100%, var(--card-width));
  margin: 0 auto;
}

.today-plan {
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
}

.today-plan-copy,
.today-plan-copy > div:first-child,
.plan-breakdown {
  display: flex;
  min-width: 0;
  align-items: center;
}

.today-plan-copy {
  justify-content: space-between;
  gap: 12px;
}

.today-plan-copy > div:first-child {
  gap: 8px;
}

.today-plan-copy span {
  color: var(--muted);
  font-size: 12px;
}

.today-plan-copy strong {
  font-size: 17px;
}

.today-plan-copy strong small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.plan-breakdown {
  gap: 10px;
}

.plan-progress {
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--surface-strong);
}

.plan-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.recall-card {
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 12px 30px rgb(32 45 40 / 7%);
}

.recall-card-meta {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
}

.recall-card-meta > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.subject-chip {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 750;
}

.subject-chip svg {
  width: 14px;
  height: 14px;
}

.subject-trade { background: var(--accent-soft); color: var(--accent); }
.subject-investment { background: var(--blue-soft); color: var(--blue); }
.subject-business { background: var(--coral-soft); color: var(--coral); }
.subject-finance { background: var(--green-soft); color: var(--green); }

.question-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.recall-chapter {
  padding: 22px 24px 0;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.recall-card h1 {
  max-width: 680px;
  padding: 0 24px;
  margin: 0 0 24px;
  font-size: 25px;
  line-height: 1.42;
  letter-spacing: 0;
}

.recite-answer {
  width: 100%;
  min-height: 320px;
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
}

.answer-gate {
  display: grid;
  place-items: center;
  color: var(--muted);
  cursor: pointer;
}

.answer-gate:hover {
  background: var(--surface-strong);
  color: var(--text-soft);
}

.answer-gate > span {
  display: grid;
  justify-items: center;
  gap: 9px;
}

.answer-gate svg {
  width: 24px;
  height: 24px;
}

.answer-gate strong {
  font-size: 14px;
}

.recite-answer.is-visible {
  padding: 18px;
}

.recite-answer-inner {
  display: grid;
  gap: 14px;
}

.answer-copy {
  padding: 14px;
  border-left: 3px solid var(--accent);
  background: var(--surface);
}

.answer-copy p,
.answer-detail-copy p {
  margin: 0 0 10px;
}

.answer-copy p:last-child,
.answer-detail-copy p:last-child {
  margin-bottom: 0;
}

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

.answer-group {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
}

.answer-group-heading,
.answer-leaf,
.answer-detail > summary {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto 18px;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
}

.answer-group > .answer-group-heading {
  border-bottom: 1px solid var(--border);
  background: var(--surface-strong);
}

.answer-group > div.answer-group-heading {
  grid-template-columns: 46px minmax(0, 1fr) auto;
}

.answer-index {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 750;
}

.answer-group-heading strong,
.answer-leaf strong,
.answer-detail strong {
  min-width: 0;
  font-size: 14px;
}

.answer-group-heading small,
.answer-detail small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.answer-group-items {
  display: grid;
  padding: 5px 10px 8px 18px;
}

.answer-group-items > .answer-detail,
.answer-group-items > .answer-leaf,
.answer-group-items > .answer-group {
  border-bottom: 1px solid var(--border);
}

.answer-group-items > :last-child {
  border-bottom: 0;
}

.answer-group-items .answer-group {
  margin: 6px 0;
}

.answer-detail {
  min-width: 0;
}

.answer-detail > summary {
  list-style: none;
  cursor: pointer;
}

.answer-detail > summary::-webkit-details-marker {
  display: none;
}

.answer-detail > summary:hover {
  background: var(--surface-soft);
}

.answer-detail > summary > svg {
  color: var(--muted);
  transition: transform 160ms ease;
}

.answer-detail[open] > summary > svg {
  transform: rotate(180deg);
}

.answer-detail-copy {
  padding: 2px 14px 15px 67px;
  color: var(--text-soft);
  font-size: 14px;
}

.recite-table-wrap {
  max-width: 100%;
  margin: 10px 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
}

.recite-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 13px;
}

.recite-table th,
.recite-table td {
  min-width: 130px;
  padding: 9px 11px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.recite-table th:last-child,
.recite-table td:last-child {
  border-right: 0;
}

.recite-table tbody tr:last-child td {
  border-bottom: 0;
}

.recite-table th {
  background: var(--surface-strong);
  color: var(--text);
  font-size: 12px;
}

.table-align-center { text-align: center !important; }
.table-align-right { text-align: right !important; }

.rating-dock {
  position: fixed;
  z-index: 45;
  right: 50%;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(var(--card-width), 100%);
  min-height: var(--rating-height);
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: rgb(255 255 255 / 98%);
  box-shadow: 0 -8px 25px rgb(31 44 39 / 9%);
  transform: translateX(50%);
}

.rating-choice {
  display: grid;
  grid-template-columns: 18px auto;
  min-width: 0;
  align-content: center;
  justify-content: center;
  column-gap: 6px;
  padding: 5px 7px;
  border-right: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
}

.rating-choice:last-child {
  border-right: 0;
}

.rating-choice strong {
  font-size: 14px;
}

.rating-choice small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 10px;
}

.rating-forgotten { color: var(--coral); }
.rating-fuzzy { color: var(--amber); }
.rating-familiar { color: var(--green); }
.rating-choice:hover { background: var(--surface-soft); }

.daily-complete {
  display: grid;
  width: min(100%, 620px);
  min-height: 68dvh;
  margin: 0 auto;
  place-content: center;
  justify-items: center;
  text-align: center;
}

.complete-icon {
  display: grid;
  width: 54px;
  height: 54px;
  margin-bottom: 13px;
  place-items: center;
  border-radius: 8px;
  background: var(--green-soft);
  color: var(--green);
}

.complete-icon svg { width: 28px; height: 28px; }
.daily-complete > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.daily-complete h1 { margin: 2px 0 16px; font-size: 30px; }
.daily-complete > p { margin: 18px 0; color: var(--muted); }

.complete-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(80px, 1fr));
  width: min(100%, 380px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
}

.complete-stats > div {
  display: grid;
  gap: 1px;
  padding: 12px;
  border-right: 1px solid var(--border);
}

.complete-stats > div:last-child { border-right: 0; }
.complete-stats strong { font-size: 20px; }
.complete-stats span { color: var(--muted); font-size: 11px; }

/* Chapters */
.chapters-view {
  width: min(100%, 820px);
  margin: 0 auto;
}

.category-tabs {
  position: sticky;
  z-index: 15;
  top: calc(var(--header-height) + env(safe-area-inset-top) + 8px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgb(255 255 255 / 96%);
}

.category-tabs button {
  display: flex;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.category-tabs button:hover { background: var(--surface-soft); color: var(--text-soft); }
.category-tabs button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }

.chapter-tools {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.chapter-search {
  position: relative;
  display: flex;
  height: 40px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
}

.chapter-search > svg { margin-left: 11px; }
.chapter-search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 40px 0 8px;
  border: 0;
  outline: 0;
  background: transparent;
}

.chapter-search button {
  position: absolute;
  right: 4px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.category-selection {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.category-selection span {
  color: var(--muted);
  font-size: 12px;
}

.category-selection button {
  padding: 5px 7px;
  border-radius: 4px;
  background: var(--surface-strong);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.chapter-list {
  display: grid;
  gap: 8px;
}

.chapter-block {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
}

.chapter-block > summary {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  min-height: 62px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  list-style: none;
  cursor: pointer;
}

.chapter-block > summary::-webkit-details-marker { display: none; }
.chapter-block > summary:hover { background: var(--surface-soft); }
.chapter-block[open] > summary { border-bottom: 1px solid var(--border); }
.chapter-block > summary > svg { color: var(--muted); transition: transform 160ms ease; }
.chapter-block[open] > summary > svg { transform: rotate(180deg); }

.chapter-check-wrap {
  display: grid;
  width: 28px;
  height: 36px;
  place-items: center;
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

.chapter-summary-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.chapter-summary-copy strong {
  font-size: 14px;
}

.chapter-summary-copy small {
  color: var(--muted);
  font-size: 11px;
}

.question-list {
  display: grid;
  padding-left: 52px;
}

.question-option {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  min-width: 0;
  align-items: start;
  gap: 9px;
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.question-option:last-child { border-bottom: 0; }
.question-option:hover { background: var(--surface-soft); }
.question-option input { margin-top: 2px; }

.question-option-copy {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.question-option-copy strong {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

.question-option-copy small {
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.status-new { background: var(--surface-strong); color: var(--muted); }
.status-due, .status-relearning { background: var(--coral-soft); color: var(--coral); }
.status-learning { background: var(--amber-soft); color: var(--amber); }
.status-mastered { background: var(--green-soft); color: var(--green); }

.selection-dock {
  position: fixed;
  z-index: 45;
  right: 50%;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  display: flex;
  width: min(820px, 100%);
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: rgb(255 255 255 / 98%);
  box-shadow: 0 -8px 25px rgb(31 44 39 / 9%);
  transform: translateX(50%);
}

.selection-dock > div {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.selection-dock > div strong { font-size: 22px; }
.selection-dock > div span { color: var(--muted); font-size: 12px; }
.selection-dock .button { min-width: 132px; }

/* Profile */
.me-view {
  display: grid;
  width: min(100%, 760px);
  gap: 12px;
  margin: 0 auto;
}

.profile-hero {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.profile-avatar {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  font-weight: 780;
}

.avatar-teal { background: var(--accent); }
.avatar-blue { background: var(--blue); }
.avatar-green { background: var(--green); }
.avatar-coral { background: var(--coral); }

.profile-copy { min-width: 0; }
.profile-copy h1 { margin: 0 0 3px; font-size: 20px; }
.profile-copy p { margin: 0; color: var(--muted); font-size: 12px; }

.profile-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.profile-metrics > div {
  display: grid;
  gap: 2px;
  padding: 15px 10px;
  border-right: 1px solid var(--border);
  text-align: center;
}

.profile-metrics > div:last-child { border-right: 0; }
.profile-metrics strong { font-size: 20px; }
.profile-metrics span { color: var(--muted); font-size: 11px; }

.me-section {
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.section-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}

.section-heading > div { display: grid; gap: 1px; }
.section-heading span { color: var(--muted); font-size: 10px; font-weight: 700; }
.section-heading h2 { margin: 0; font-size: 16px; }
.section-heading > strong { font-size: 12px; color: var(--text-soft); }

.weekly-chart {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  height: 146px;
  gap: 8px;
}

.weekly-day {
  display: grid;
  grid-template-rows: 19px 1fr 20px;
  justify-items: center;
  gap: 3px;
  min-width: 0;
}

.weekly-value { color: var(--muted); font-size: 10px; }
.weekly-track {
  position: relative;
  width: min(22px, 80%);
  height: 100%;
  overflow: hidden;
  border-radius: 3px 3px 1px 1px;
  background: var(--surface-strong);
}

.weekly-track span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 2px;
  border-radius: inherit;
  background: var(--blue);
}

.weekly-day small { color: var(--muted); font-size: 10px; }
.weekly-day.is-today small { color: var(--accent); font-weight: 750; }
.weekly-day.is-today .weekly-track span { background: var(--accent); }

.memory-distribution {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.memory-distribution > div {
  display: grid;
  grid-template-columns: 8px auto;
  align-items: center;
  justify-content: center;
  gap: 3px 7px;
  padding: 11px 7px;
  border-right: 1px solid var(--border);
}

.memory-distribution > div:last-child { border-right: 0; }
.memory-distribution strong { font-size: 17px; }
.memory-distribution small { grid-column: 1 / -1; color: var(--muted); font-size: 10px; text-align: center; }
.distribution-dot { width: 7px; height: 7px; border-radius: 50%; }
.dot-new { background: var(--muted); }
.dot-learning { background: var(--amber); }
.dot-mastered { background: var(--green); }
.dot-due { background: var(--coral); }

.settings-section,
.data-section { padding-bottom: 4px; }

.setting-row {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--border);
}

.setting-row > div:first-child { display: grid; min-width: 0; gap: 1px; }
.setting-row > div:first-child strong { font-size: 14px; }
.setting-row > div:first-child span { color: var(--muted); font-size: 11px; }

.number-stepper {
  display: grid;
  grid-template-columns: 32px 40px 32px;
  height: 34px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 5px;
}

.number-stepper button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  background: var(--surface-soft);
  color: var(--text-soft);
  cursor: pointer;
}

.number-stepper button:hover { background: var(--surface-strong); }
.number-stepper button svg { width: 15px; height: 15px; }
.number-stepper strong { text-align: center; font-size: 13px; }

.toggle-row {
  position: relative;
  cursor: pointer;
}

.toggle-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--border-strong);
  transition: background 140ms ease;
}

.switch::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(30 40 36 / 25%);
  content: "";
  transition: transform 140ms ease;
}

.toggle-row input:checked + .switch { background: var(--accent); }
.toggle-row input:checked + .switch::after { transform: translateX(18px); }
.toggle-row input:focus-visible + .switch { outline: 3px solid rgb(20 115 111 / 22%); outline-offset: 2px; }

.data-section > button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 18px;
  width: 100%;
  min-height: 53px;
  align-items: center;
  gap: 9px;
  padding: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--text-soft);
  text-align: left;
  cursor: pointer;
}

.data-section > button:hover { color: var(--text); }
.data-section > button > svg:last-child { color: var(--muted); }
.data-section > .danger-row { color: var(--coral); }

/* VIP membership */
.vip-status-panel {
  display: grid;
  gap: 16px;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.vip-membership-header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.vip-membership-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}

.vip-membership-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 6px;
  background: var(--amber-soft);
  color: var(--amber);
}

.vip-membership-icon svg {
  width: 20px;
  height: 20px;
}

.vip-membership-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.vip-membership-copy > span,
.vip-membership-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.vip-membership-title,
.vip-membership-copy h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
}

.vip-membership-copy p,
.vip-membership-note {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.vip-membership-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.vip-membership-item {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 11px 12px;
  border-right: 1px solid var(--border);
}

.vip-membership-item:last-child {
  border-right: 0;
}

.vip-membership-value,
.vip-membership-expiry {
  color: var(--text);
  font-size: 13px;
  font-weight: 720;
}

.vip-membership-expiry.is-near,
.vip-status-panel.is-expiring .vip-membership-expiry {
  color: var(--amber);
}

.vip-status-panel.is-expired .vip-badge,
.vip-status-panel.is-expired .vip-membership-expiry {
  border-color: #edc6c2;
  background: var(--coral-soft);
  color: var(--coral);
}

.vip-membership-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 1px;
}

.vip-membership-actions .vip-membership-note {
  margin-right: auto;
}

.profile-name-row {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.profile-name-row h1 {
  margin: 0;
}

.vip-membership-actions .button {
  min-height: 38px;
}

.vip-membership-logout {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
}

.vip-membership-logout:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--surface-soft);
  color: var(--text);
}

/* Dialogs and notices */
.recite-dialog {
  width: min(430px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 60px rgb(24 34 31 / 20%);
}

.recite-dialog::backdrop { background: rgb(20 29 27 / 46%); }
.recite-dialog form { padding: 18px; }

.dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 17px;
}

.dialog-heading > div { display: grid; gap: 2px; }
.dialog-heading span { color: var(--muted); font-size: 10px; font-weight: 700; }
.dialog-heading h2 { margin: 0; font-size: 18px; }

.recite-field {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}

.recite-field > span,
.avatar-fieldset legend { color: var(--text-soft); font-size: 12px; font-weight: 700; }
.recite-field input {
  width: 100%;
  height: 42px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-soft);
}

.avatar-fieldset { padding: 0; margin: 0 0 20px; border: 0; }
.avatar-fieldset legend { margin-bottom: 8px; }
.avatar-swatches { display: flex; gap: 9px; }
.avatar-swatch { position: relative; display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 750; cursor: pointer; }
.avatar-swatch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.avatar-swatch:has(input:checked) { outline: 3px solid var(--surface); box-shadow: 0 0 0 5px var(--border-strong); }

.dialog-buttons { display: flex; justify-content: flex-end; gap: 8px; }
.recite-confirm-dialog p { color: var(--muted); }

.recite-toast-region {
  position: fixed;
  z-index: 100;
  top: calc(var(--header-height) + env(safe-area-inset-top) + 12px);
  right: 16px;
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.recite-toast {
  max-width: 280px;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--text);
  color: #fff;
  box-shadow: 0 8px 24px rgb(23 31 29 / 18%);
  font-size: 12px;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.recite-toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 600px) {
  :root {
    --header-height: 54px;
    --bottom-nav-height: 64px;
    --rating-height: 76px;
  }

  .recite-header-inner {
    grid-template-columns: minmax(88px, 1fr) auto minmax(74px, 1fr);
    padding: 0 12px;
  }

  .recite-brand { gap: 7px; font-size: 14px; }
  .recite-brand-mark { width: 29px; height: 29px; }
  .recite-brand-mark svg { width: 17px; height: 17px; }
  .recite-heading span { display: none; }
  .recite-heading strong { font-size: 15px; }
  .header-count { font-size: 10px; }

  .vip-gate {
    padding-right: max(16px, env(safe-area-inset-right));
    padding-left: max(16px, env(safe-area-inset-left));
  }

  .vip-gate-header {
    min-height: 62px;
  }

  .vip-gate-main {
    min-height: min(560px, calc(100dvh - 62px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    align-items: center;
    padding: 28px 0 70px;
  }

  .vip-gate-content {
    gap: 24px;
  }

  .vip-gate-heading h1 {
    font-size: 26px;
  }

  .recite-main {
    padding-right: 12px;
    padding-left: 12px;
  }

  .recite-bottom-nav,
  .rating-dock,
  .selection-dock {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .today-plan { padding: 10px 11px; }
  .plan-breakdown { gap: 7px; }
  .today-plan-copy span { font-size: 10px; }
  .today-plan-copy strong { font-size: 15px; }

  .recall-card { min-height: calc(100dvh - var(--header-height) - var(--bottom-nav-height) - 112px); }
  .recall-card-meta { min-height: 52px; padding: 8px 12px; }
  .recall-chapter { padding: 17px 16px 0; }
  .recall-card h1 { padding: 0 16px; margin-bottom: 19px; font-size: 21px; line-height: 1.46; }
  .recite-answer { min-height: 260px; }
  .recite-answer.is-visible { padding: 11px; }
  .answer-copy { padding: 11px; }

  .answer-group-heading,
  .answer-leaf,
  .answer-detail > summary {
    grid-template-columns: 39px minmax(0, 1fr) auto 16px;
    gap: 6px;
    padding: 10px 9px;
  }

  .answer-group > div.answer-group-heading { grid-template-columns: 39px minmax(0, 1fr) auto; }
  .answer-group-items { padding: 4px 5px 7px 10px; }
  .answer-detail-copy { padding: 1px 9px 13px 54px; }
  .answer-index { font-size: 10px; }
  .answer-group-heading strong,
  .answer-leaf strong,
  .answer-detail strong { font-size: 13px; }

  .rating-dock { padding: 7px 5px; }
  .rating-choice { column-gap: 4px; padding: 4px; }
  .rating-choice strong { font-size: 13px; }
  .rating-choice small { font-size: 9px; }

  .category-tabs { top: calc(var(--header-height) + env(safe-area-inset-top) + 6px); }
  .category-tabs button { min-height: 38px; gap: 3px; font-size: 12px; }
  .category-tabs button svg { width: 15px; height: 15px; }

  .chapter-tools { grid-template-columns: 1fr; gap: 8px; }
  .category-selection { justify-content: flex-end; }
  .chapter-block > summary { padding: 9px 10px; }
  .question-list { padding-left: 39px; }
  .question-option { padding-right: 9px; }
  .question-option-copy { grid-template-columns: 1fr; gap: 4px; }
  .question-option-copy small { width: fit-content; }

  .selection-dock { padding: 9px 12px; }
  .selection-dock > div { display: grid; gap: 0; }
  .selection-dock > div strong { font-size: 19px; }
  .selection-dock .button { min-width: 124px; }

  .profile-hero { grid-template-columns: 56px minmax(0, 1fr) 36px; padding: 14px; }
  .profile-avatar { width: 56px; height: 56px; }
  .profile-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-metrics > div:nth-child(2) { border-right: 0; }
  .profile-metrics > div:nth-child(-n + 2) { border-bottom: 1px solid var(--border); }
  .me-section { padding: 14px; }
  .memory-distribution { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .memory-distribution > div:nth-child(2) { border-right: 0; }
  .memory-distribution > div:nth-child(-n + 2) { border-bottom: 1px solid var(--border); }
  .weekly-chart { gap: 5px; }

  .vip-status-panel { padding: 14px; }
  .vip-membership-header { align-items: center; }
  .vip-membership-details { grid-template-columns: 1fr; }
  .vip-membership-item { border-right: 0; border-bottom: 1px solid var(--border); }
  .vip-membership-item:last-child { border-bottom: 0; }
  .vip-membership-actions .button { width: 100%; }
  .vip-membership-actions .vip-membership-note { width: 100%; }
}

@media (max-width: 360px) {
  .recite-brand > span:last-child { display: none; }
  .recite-header-inner { grid-template-columns: 54px 1fr 70px; }
  .category-tabs button svg { display: none; }
  .category-tabs button { font-size: 11px; }
  .subject-chip { font-size: 10px; }
  .question-count { font-size: 10px; }
  .plan-breakdown { display: grid; gap: 0; text-align: right; }
  .selection-dock .button { min-width: 114px; padding: 0 10px; }
  .vip-gate { padding-right: 14px; padding-left: 14px; }
  .vip-gate-brand { font-size: 14px; }
  .vip-gate-brand-mark { width: 31px; height: 31px; }
  .vip-gate-heading h1 { font-size: 24px; }
  .vip-membership-header { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}