/* =========================================================
 * 词屿手记 · WebView 基础样式 + 动效增强
 * =======================================================*/
:root {
  --rpx: calc(100vw / 750);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #f1eee4;
}

body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  touch-action: manipulation;
}

input,
textarea {
  -webkit-user-select: text;
  user-select: text;
  width: 100%;
  margin: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  padding: 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

textarea {
  resize: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted, #92988d);
  opacity: 1;
}

img {
  display: block;
  -webkit-user-drag: none;
}

span > div,
span > img,
span > button {
  display: inline-block;
  vertical-align: middle;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}

/* ---------------- 页面容器 ---------------- */
#pages {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.isle-page {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  background: transparent;
  scrollbar-width: none;
}

.isle-page::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.isle-page--hidden {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.isle-page__body {
  min-height: 100%;
}

.isle-page.isle-enter-push {
  animation: isle-push-in 320ms cubic-bezier(0.22, 0.9, 0.24, 1);
}

@keyframes isle-push-in {
  from {
    transform: translate3d(34px, 0, 0) scale(0.985);
    opacity: 0.35;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* 滚动的横排 */
[scroll-x],
[data-scroll-x] {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

[scroll-x]::-webkit-scrollbar,
[data-scroll-x]::-webkit-scrollbar,
[data-no-bar]::-webkit-scrollbar,
[scroll-y]::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* ---------------- 自定义 tabBar ---------------- */
#tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  pointer-events: none;
}

#tabbar > * {
  pointer-events: auto;
}

#tabbar.isle-tabbar--hidden {
  display: none;
}

/* ---------------- switch 组件 ---------------- */
.wx-switch {
  position: relative;
  width: calc(88 * var(--rpx));
  height: calc(52 * var(--rpx));
  border-radius: 999px;
  background: rgba(21, 25, 21, 0.16);
  flex: 0 0 auto;
  transition: background 220ms ease;
  display: inline-block;
  vertical-align: middle;
}

.wx-switch--on {
  background: var(--forest, #163b2a);
}

.wx-switch__knob {
  position: absolute;
  top: calc(4 * var(--rpx));
  left: calc(4 * var(--rpx));
  width: calc(44 * var(--rpx));
  height: calc(44 * var(--rpx));
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  transition: transform 240ms cubic-bezier(0.3, 1.4, 0.5, 1);
}

.wx-switch--on .wx-switch__knob {
  transform: translateX(calc(36 * var(--rpx)));
}

.wx-switch:active .wx-switch__knob {
  width: calc(50 * var(--rpx));
}

/* ---------------- picker ---------------- */
.wx-picker {
  position: relative;
  display: block;
}

/* ---------------- toast / loading / modal ---------------- */
#overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}

#overlay > * {
  pointer-events: auto;
}

.wx-toast {
  position: absolute;
  left: 50%;
  bottom: 22%;
  transform: translate(-50%, 12px);
  min-width: calc(220 * var(--rpx));
  max-width: 76vw;
  padding: calc(22 * var(--rpx)) calc(30 * var(--rpx));
  border-radius: calc(24 * var(--rpx));
  background: rgba(16, 22, 18, 0.92);
  color: #f6f4ea;
  font-size: calc(28 * var(--rpx));
  line-height: 1.45;
  text-align: center;
  opacity: 0;
  transition: opacity 200ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  backdrop-filter: blur(10px);
}

.wx-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.wx-toast--mask {
  box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.12);
}

.wx-toast__icon {
  width: calc(52 * var(--rpx));
  height: calc(52 * var(--rpx));
  line-height: calc(52 * var(--rpx));
  border-radius: 50%;
  margin: 0 auto calc(12 * var(--rpx));
  font-size: calc(30 * var(--rpx));
  font-weight: 700;
}

.wx-toast__icon--success {
  background: rgba(221, 246, 95, 0.22);
  color: #ddf65f;
}

.wx-toast__icon--error {
  background: rgba(243, 107, 75, 0.24);
  color: #ffb4a2;
}

.wx-toast__spinner,
.wx-loading__spinner {
  width: calc(44 * var(--rpx));
  height: calc(44 * var(--rpx));
  margin: 0 auto calc(12 * var(--rpx));
  border-radius: 50%;
  border: calc(4 * var(--rpx)) solid rgba(246, 244, 234, 0.24);
  border-top-color: #ddf65f;
  animation: isle-spin 720ms linear infinite;
}

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

.wx-loading {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  padding: calc(30 * var(--rpx)) calc(36 * var(--rpx));
  border-radius: calc(24 * var(--rpx));
  background: rgba(16, 22, 18, 0.9);
  color: #f6f4ea;
  text-align: center;
  font-size: calc(26 * var(--rpx));
  backdrop-filter: blur(10px);
}

.wx-loading--mask {
  box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.16);
}

.wx-modal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 11, 0);
  transition: background 200ms ease;
  padding: 0 calc(60 * var(--rpx));
}

.wx-modal.is-visible {
  background: rgba(10, 14, 11, 0.42);
}

.wx-modal__card {
  width: 100%;
  max-width: 84vw;
  border-radius: calc(32 * var(--rpx));
  background: #fbf9f2;
  color: #151915;
  padding: calc(40 * var(--rpx)) calc(36 * var(--rpx)) calc(8 * var(--rpx));
  transform: scale(0.92) translateY(10px);
  opacity: 0;
  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 200ms ease;
  box-shadow: 0 30px 80px rgba(9, 16, 12, 0.3);
}

.wx-modal.is-visible .wx-modal__card {
  transform: none;
  opacity: 1;
}

.wx-modal__title {
  font-size: calc(34 * var(--rpx));
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
}

.wx-modal__content {
  margin-top: calc(18 * var(--rpx));
  font-size: calc(27 * var(--rpx));
  line-height: 1.6;
  color: #454b43;
  white-space: pre-wrap;
  text-align: center;
}

.wx-modal__actions {
  display: flex;
  margin-top: calc(32 * var(--rpx));
  border-top: 1px solid rgba(21, 25, 21, 0.1);
}

.wx-modal__btn {
  flex: 1;
  height: calc(96 * var(--rpx));
  font-size: calc(30 * var(--rpx));
  font-weight: 600;
  background: transparent;
}

.wx-modal__btn--cancel {
  color: #72796e;
  border-right: 1px solid rgba(21, 25, 21, 0.1);
}

.wx-modal__btn--confirm {
  color: #163b2a;
}

.theme-dark .wx-modal__card,
.theme-dark ~ .wx-modal .wx-modal__card {
  background: #1b2620;
  color: #f2efe4;
}

/* ---------------- 语音按钮 ---------------- */
.speak-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(62 * var(--rpx));
  height: calc(62 * var(--rpx));
  border-radius: 50%;
  background: rgba(21, 25, 21, 0.06);
  color: var(--forest, #163b2a);
  font-size: calc(28 * var(--rpx));
  line-height: 1;
  flex: 0 0 auto;
  transition: transform 160ms ease, background 200ms ease;
  overflow: visible;
}

.speak-btn:active {
  transform: scale(0.9);
}

.theme-dark .speak-btn {
  background: rgba(242, 239, 228, 0.1);
  color: var(--lime, #ddf65f);
}

.speak-btn--on-dark {
  background: rgba(255, 255, 255, 0.12);
  color: #ddf65f;
}

.speak-btn--lg {
  width: calc(92 * var(--rpx));
  height: calc(92 * var(--rpx));
  font-size: calc(40 * var(--rpx));
  background: var(--lime, #ddf65f);
  color: #163b2a;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

.speak-btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #f2efe4;
}

.speak-btn.is-speaking::after {
  content: '';
  position: absolute;
  inset: calc(-6 * var(--rpx));
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0.6;
  animation: speak-pulse 620ms ease-out;
}

@keyframes speak-pulse {
  from { transform: scale(0.82); opacity: 0.75; }
  to { transform: scale(1.45); opacity: 0; }
}

/* ---------------- 动效增强 ---------------- */
.isle-ripple {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  animation: isle-ripple 540ms ease-out forwards;
  z-index: 2;
}

.theme-dark .isle-ripple {
  background: rgba(221, 246, 95, 0.22);
}

@keyframes isle-ripple {
  from { transform: scale(1); opacity: 0.55; }
  to { transform: scale(24); opacity: 0; }
}

.btn,
.quiz-option,
.choice,
.rating-btn,
.recall-btn,
.settings-goal,
.quiz-bank,
.settings-theme,
.bank-tab,
.filter-chip,
.shell-cell,
.quiz-length,
.settings-target,
.settings-optional,
.onboarding__target,
.onboarding__goal,
.word-row,
.word-neighbour,
.bank-row {
  position: relative;
  overflow: hidden;
}

.isle-rise {
  animation: isle-rise 620ms var(--d, 0ms) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes isle-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.isle-word-flip .session-art__word,
.isle-word-flip .word-art__word {
  animation: isle-word-in 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes isle-word-in {
  0% { opacity: 0; transform: perspective(600px) rotateX(-52deg) translateY(14px); filter: blur(4px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; }
}

.isle-confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 70;
  pointer-events: none;
}

.isle-touching .btn:active,
.isle-touching .quiz-option:active,
.isle-touching .choice:active,
.isle-touching .rating-btn:active,
.isle-touching .recall-btn:active {
  transform: scale(0.985);
}

.btn,
.quiz-option,
.choice,
.rating-btn,
.recall-btn {
  transition: transform 130ms ease, box-shadow 200ms ease, background 200ms ease;
}

/* 词库列表进入 */
.word-row {
  animation: isle-row-in 420ms both;
}

@keyframes isle-row-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.word-row:nth-child(1) { animation-delay: 0ms; }
.word-row:nth-child(2) { animation-delay: 22ms; }
.word-row:nth-child(3) { animation-delay: 44ms; }
.word-row:nth-child(4) { animation-delay: 66ms; }
.word-row:nth-child(5) { animation-delay: 88ms; }
.word-row:nth-child(6) { animation-delay: 110ms; }
.word-row:nth-child(7) { animation-delay: 132ms; }
.word-row:nth-child(8) { animation-delay: 154ms; }

/* tabBar 选中动效 */
.tabbar__item.is-active .tabbar__icon {
  animation: tab-pop 380ms cubic-bezier(0.3, 1.5, 0.5, 1);
}

@keyframes tab-pop {
  0% { transform: translateY(0) scale(0.94); }
  55% { transform: translateY(-3px) scale(1.1); }
  100% { transform: translateY(0) scale(1); }
}

/* 热力图逐格出现 */
.heatmap__col {
  animation: heat-in 420ms both;
}

.heatmap__col:nth-child(3n) { animation-delay: 40ms; }
.heatmap__col:nth-child(3n + 1) { animation-delay: 80ms; }
.heatmap__col:nth-child(3n + 2) { animation-delay: 120ms; }

@keyframes heat-in {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: none; }
}

/* 减少动效 */
.reduced-motion .page-enter,
.reduced-motion .isle-rise,
.reduced-motion .word-row,
.reduced-motion .heatmap__col,
.reduced-motion .isle-word-flip .session-art__word,
.reduced-motion .isle-word-flip .word-art__word,
.reduced-motion .isle-page.isle-enter-push {
  animation: none !important;
}

.reduced-motion .isle-ripple,
.reduced-motion .isle-confetti {
  display: none !important;
}

.reduced-motion .tabbar__item.is-active .tabbar__icon {
  animation: none !important;
}

/* ---------------- 调试 ---------------- */
.wx-error {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 999;
  display: none;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(180, 30, 30, 0.94);
  color: #fff;
  font: 12px/1.5 ui-monospace, monospace;
  white-space: pre-wrap;
  max-height: 40vh;
  overflow: auto;
}

/* ---------------- 语音设置小组件 ---------------- */
.settings-voice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(20 * var(--rpx));
}

.voice-seg {
  display: flex;
  gap: calc(10 * var(--rpx));
}

.voice-seg__item {
  padding: calc(12 * var(--rpx)) calc(22 * var(--rpx));
  border-radius: 999px;
  background: var(--surface-3, #ebe7da);
  color: var(--ink-2, #454b43);
  font-size: calc(25 * var(--rpx));
  transition: background 200ms ease, color 200ms ease, transform 160ms ease;
}

.voice-seg__item.is-active {
  background: var(--forest, #163b2a);
  color: #f7f5ec;
  transform: translateY(-1px);
}

.theme-dark .voice-seg__item {
  background: rgba(242, 239, 228, 0.1);
  color: #d0cec0;
}

.theme-dark .voice-seg__item.is-active {
  background: var(--lime, #ddf65f);
  color: #10231a;
}

.voice-test {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--rpx));
  margin-top: calc(22 * var(--rpx));
  padding: calc(20 * var(--rpx)) calc(24 * var(--rpx));
  border-radius: calc(20 * var(--rpx));
  background: var(--surface-2, #f5f2e8);
}

.voice-test__text {
  flex: 1;
  font-size: calc(25 * var(--rpx));
  color: var(--ink-3, #72796e);
  line-height: 1.5;
}

.voice-note {
  margin-top: calc(18 * var(--rpx));
  font-size: calc(23 * var(--rpx));
  color: var(--ink-3, #72796e);
  line-height: 1.6;
}

/* 首页词卡的发音按钮 */
.word-card__speak,
.phrase-card__speak {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--rpx));
}

/* 学习页大号发音 */
.session-art__listen {
  position: absolute;
  right: calc(26 * var(--rpx));
  bottom: calc(96 * var(--rpx));
  z-index: 3;
}

.word-art__listen {
  position: absolute;
  right: calc(26 * var(--rpx));
  bottom: calc(84 * var(--rpx));
  z-index: 3;
}

/* 列表发音 */
.word-row__speak {
  width: calc(54 * var(--rpx));
  height: calc(54 * var(--rpx));
  font-size: calc(24 * var(--rpx));
}

/* quiz 发音 */
.quiz-word-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(18 * var(--rpx));
}

/* 浏览器没有语音引擎时隐藏朗读按钮（设置里的「试听」保留，用于提示原因） */
.no-voice [data-speak] {
  display: none !important;
}

/* ---------------- 网页 / PWA ---------------- */
/* iOS Safari 聚焦输入框时不放大页面 */
@supports (-webkit-touch-callout: none) {
  input,
  textarea {
    font-size: 16px !important;
  }
}

.isle-install-hint {
  position: fixed;
  left: calc(18 * var(--rpx));
  right: calc(18 * var(--rpx));
  bottom: calc(var(--safe-bottom) + calc(150 * var(--rpx)));
  z-index: 80;
  display: flex;
  align-items: center;
  gap: calc(18 * var(--rpx));
  padding: calc(22 * var(--rpx)) calc(24 * var(--rpx));
  border-radius: calc(26 * var(--rpx));
  background: rgba(16, 22, 18, 0.94);
  color: #f6f4ea;
  box-shadow: 0 18px 40px rgba(9, 16, 12, 0.28);
  transform: translateY(16px);
  opacity: 0;
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1);
  backdrop-filter: blur(12px);
}

.isle-install-hint.is-visible {
  opacity: 1;
  transform: none;
}

.isle-install-hint__body {
  flex: 1;
  min-width: 0;
}

.isle-install-hint__title {
  font-size: calc(28 * var(--rpx));
  font-weight: 600;
  letter-spacing: 0.01em;
}

.isle-install-hint__desc {
  margin-top: calc(6 * var(--rpx));
  font-size: calc(23 * var(--rpx));
  line-height: 1.5;
  color: rgba(246, 244, 234, 0.72);
}

.isle-install-hint__close {
  flex: 0 0 auto;
  padding: calc(12 * var(--rpx)) calc(20 * var(--rpx));
  border-radius: 999px;
  background: var(--lime, #ddf65f);
  color: #163b2a;
  font-size: calc(24 * var(--rpx));
  font-weight: 600;
}

/* PWA 全屏模式下避免顶部被状态栏压住（没有原生桥时由 pwa.js 计算） */
@media (display-mode: standalone) {
  html,
  body {
    background: #f1eee4;
  }
}


/* ===== app.wxss ===== */
body {
  --paper: #f1eee4;
  --surface: #fbf9f2;
  --surface-2: #f5f2e8;
  --surface-3: #ebe7da;
  --ink: #151915;
  --ink-2: #454b43;
  --ink-3: #72796e;
  --muted: #92988d;
  --line: rgba(21, 25, 21, 0.12);
  --line-strong: rgba(21, 25, 21, 0.22);
  --forest: #163b2a;
  --forest-2: #1f5239;
  --lime: #ddf65f;
  --lime-soft: #eff9bc;
  --coral: #f36b4b;
  --coral-soft: #ffe2d8;
  --blue: #3155d9;
  --blue-soft: #e3e8ff;
  --amber: #d99a2b;
  --amber-soft: #ffefc8;
  --danger: #c53f39;
  --danger-soft: #fbe2df;
  --success: #247b52;
  --success-soft: #dbf4e6;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: calc(28 * var(--rpx));
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

div,
span,
img,
button,
input,
textarea,
div,
div {
  box-sizing: border-box;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
}

button::after {
  border: 0;
}

img {
  display: block;
}

.theme-dark {
  --paper: #0e1512;
  --surface: #151e19;
  --surface-2: #1b2620;
  --surface-3: #26332b;
  --ink: #f2efe4;
  --ink-2: #d0cec0;
  --ink-3: #a1a89b;
  --muted: #7c867b;
  --line: rgba(242, 239, 228, 0.12);
  --line-strong: rgba(242, 239, 228, 0.24);
  --forest: #2e6b4c;
  --forest-2: #3a7f5c;
  --lime: #ddf65f;
  --lime-soft: #2a3418;
  --coral: #ff8567;
  --coral-soft: #3a211b;
  --blue: #7a93ff;
  --blue-soft: #1f2745;
  --amber: #f2b85c;
  --amber-soft: #3a2e17;
  --danger: #f0827c;
  --danger-soft: #3b1e1c;
  --success: #6fd3a3;
  --success-soft: #173127;
}

.page {
  min-height: 100vh;
  padding: 0 calc(28 * var(--rpx)) calc(48 * var(--rpx));
  background:
    radial-gradient(circle at 8% 0%, rgba(221, 246, 95, 0.18), transparent 30%),
    var(--paper);
  color: var(--ink);
}

.theme-dark.page {
  background:
    radial-gradient(circle at 8% 0%, rgba(221, 246, 95, 0.05), transparent 30%),
    var(--paper);
}

.page--tab {
  padding-bottom: calc(calc(220 * var(--rpx)) + var(--safe-bottom));
}

.page--plain {
  padding: 0;
}

.page-enter {
  animation: page-in 280ms cubic-bezier(0.22, 0.9, 0.24, 1);
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(calc(10 * var(--rpx)));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card,
.btn,
.nav,
.tag,
.word-row,
.choice,
.quiz-option,
.settings-target,
.review-card,
.streak-card {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.2s ease;
}

.nav {
  padding-top: calc(20 * var(--rpx));
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(88 * var(--rpx));
  padding-right: calc(168 * var(--rpx));
  gap: calc(16 * var(--rpx));
}

.nav__left {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--rpx));
  min-width: 0;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--rpx));
}

.nav__logo {
  width: calc(64 * var(--rpx));
  height: calc(64 * var(--rpx));
  border-radius: calc(18 * var(--rpx));
}

.nav__wordmark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
}

.nav__zh {
  font-size: calc(34 * var(--rpx));
  font-weight: 800;
  letter-spacing: calc(2 * var(--rpx));
}

.nav__en {
  margin-top: calc(4 * var(--rpx));
  font-size: calc(12 * var(--rpx));
  font-weight: 800;
  letter-spacing: calc(3 * var(--rpx));
  color: var(--muted);
}

.nav__title {
  font-size: calc(30 * var(--rpx));
  font-weight: 800;
  letter-spacing: calc(-1 * var(--rpx));
}

.nav__sub {
  margin-left: calc(10 * var(--rpx));
  font-size: calc(18 * var(--rpx));
  color: var(--muted);
}

.nav__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(60 * var(--rpx));
  height: calc(60 * var(--rpx));
  margin-left: calc(-8 * var(--rpx));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.52);
  font-size: calc(36 * var(--rpx));
  color: var(--ink-2);
}

.nav__right {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--rpx));
  padding-right: calc(168 * var(--rpx));
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(64 * var(--rpx));
  height: calc(64 * var(--rpx));
  border-radius: 50%;
  background: rgba(251, 249, 242, 0.8);
  border: calc(1 * var(--rpx)) solid var(--line);
  font-size: calc(30 * var(--rpx));
}

.eyebrow {
  display: block;
  font-size: calc(18 * var(--rpx));
  font-weight: 800;
  letter-spacing: calc(3 * var(--rpx));
  line-height: 1.3;
  color: var(--ink-3);
  text-transform: uppercase;
}

.eyebrow--lime {
  color: var(--lime);
}

.display {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: calc(-2 * var(--rpx));
}

.page-head {
  padding: calc(22 * var(--rpx)) 0 calc(30 * var(--rpx));
}

.page-head__title {
  margin-top: calc(14 * var(--rpx));
  font-size: calc(64 * var(--rpx));
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: calc(-4 * var(--rpx));
}

.page-head__title .accent {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  color: var(--forest);
}

.page-head__desc {
  max-width: calc(640 * var(--rpx));
  margin-top: calc(14 * var(--rpx));
  font-size: calc(24 * var(--rpx));
  line-height: 1.65;
  color: var(--ink-3);
}

.card {
  border-radius: calc(34 * var(--rpx));
  background: var(--surface);
  border: calc(1 * var(--rpx)) solid var(--line);
  box-shadow: 0 calc(12 * var(--rpx)) calc(36 * var(--rpx)) rgba(21, 25, 21, 0.04);
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--rpx));
  height: calc(88 * var(--rpx));
  padding: 0 calc(34 * var(--rpx));
  border-radius: calc(999 * var(--rpx));
  font-size: calc(26 * var(--rpx));
  font-weight: 800;
  letter-spacing: calc(-0.5 * var(--rpx));
}

.btn--primary {
  background: var(--forest);
  color: #f7f5ea;
}

.btn--lime {
  background: var(--lime);
  color: #15220f;
}

.btn--ink {
  background: var(--ink);
  color: var(--paper);
}

.btn--secondary {
  background: var(--surface);
  color: var(--ink);
  border: calc(1 * var(--rpx)) solid var(--line);
}

.btn--ghost {
  background: transparent;
  color: var(--ink-3);
}

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

.btn--danger-ghost {
  background: transparent;
  color: var(--danger);
  border: calc(1 * var(--rpx)) solid rgba(197, 63, 57, 0.35);
}

.btn--sm {
  height: calc(64 * var(--rpx));
  padding: 0 calc(24 * var(--rpx));
  font-size: calc(22 * var(--rpx));
}

.btn--block {
  width: 100%;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--rpx));
  color: var(--ink-2);
  font-size: calc(22 * var(--rpx));
  font-weight: 800;
}

.text-link--light {
  color: rgba(247, 245, 234, 0.68);
}

.tag {
  display: inline-flex;
  align-items: center;
  height: calc(40 * var(--rpx));
  padding: 0 calc(14 * var(--rpx));
  border-radius: calc(10 * var(--rpx));
  background: var(--lime-soft);
  color: #3a4813;
  font-size: calc(18 * var(--rpx));
  font-weight: 800;
  letter-spacing: calc(1 * var(--rpx));
}

.tag--quiet {
  height: calc(38 * var(--rpx));
  padding: 0 calc(12 * var(--rpx));
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: calc(19 * var(--rpx));
  font-weight: 600;
  letter-spacing: 0;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--rpx));
  height: calc(40 * var(--rpx));
  padding: 0 calc(14 * var(--rpx));
  border-radius: calc(999 * var(--rpx));
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: calc(18 * var(--rpx));
  font-weight: 800;
}

.status--learning {
  background: var(--amber-soft);
  color: #8b5e0c;
}

.status--familiar {
  background: var(--blue-soft);
  color: var(--blue);
}

.status--mastered {
  background: var(--success-soft);
  color: var(--success);
}

.dot {
  width: calc(12 * var(--rpx));
  height: calc(12 * var(--rpx));
  border-radius: 50%;
  background: var(--line-strong);
}

.dot--learning { background: var(--amber); }
.dot--familiar { background: var(--blue); }
.dot--mastered { background: var(--success); }

.divider {
  height: calc(1 * var(--rpx));
  background: var(--line);
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--rpx));
}

.row {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--rpx));
}

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

.strong {
  font-weight: 800;
}

.caption {
  font-size: calc(21 * var(--rpx));
  color: var(--muted);
  line-height: 1.5;
}

.progress {
  height: calc(8 * var(--rpx));
  border-radius: calc(99 * var(--rpx));
  background: var(--surface-3);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  border-radius: inherit;
  background: var(--forest);
}

.progress__bar--lime {
  background: var(--lime);
}

.art {
  position: relative;
  overflow: hidden;
  border-radius: calc(30 * var(--rpx));
  color: #f9f7ed;
}

.art__ring {
  position: absolute;
  border-radius: 50%;
  border: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.16);
}

.art__ring--one {
  width: calc(440 * var(--rpx));
  height: calc(440 * var(--rpx));
  right: calc(-170 * var(--rpx));
  top: calc(-160 * var(--rpx));
}

.art__ring--two {
  width: calc(300 * var(--rpx));
  height: calc(300 * var(--rpx));
  left: calc(-150 * var(--rpx));
  bottom: calc(-140 * var(--rpx));
}

.art__top {
  position: absolute;
  top: calc(24 * var(--rpx));
  left: calc(24 * var(--rpx));
  right: calc(24 * var(--rpx));
  display: flex;
  justify-content: space-between;
  font-size: calc(15 * var(--rpx));
  font-weight: 800;
  letter-spacing: calc(2 * var(--rpx));
  color: rgba(255, 255, 255, 0.55);
}

.art__icon-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(210 * var(--rpx));
  height: calc(210 * var(--rpx));
  margin: calc(-105 * var(--rpx)) 0 0 calc(-105 * var(--rpx));
  border: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.art__icon {
  width: calc(104 * var(--rpx));
  height: calc(104 * var(--rpx));
  opacity: 0.95;
}

.art__orbit {
  position: absolute;
  left: calc(-35 * var(--rpx));
  top: calc(-35 * var(--rpx));
  width: calc(280 * var(--rpx));
  height: calc(280 * var(--rpx));
  border: calc(1 * var(--rpx)) dashed rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.art__word {
  position: absolute;
  left: calc(26 * var(--rpx));
  right: calc(26 * var(--rpx));
  bottom: calc(64 * var(--rpx));
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(76 * var(--rpx));
  line-height: 0.95;
  letter-spacing: calc(-3 * var(--rpx));
  word-break: break-all;
}

.art__meta {
  position: absolute;
  left: calc(24 * var(--rpx));
  right: calc(24 * var(--rpx));
  bottom: calc(22 * var(--rpx));
  display: flex;
  justify-content: space-between;
  font-size: calc(15 * var(--rpx));
  font-weight: 800;
  letter-spacing: calc(2 * var(--rpx));
  color: rgba(255, 255, 255, 0.45);
}

.art__caption {
  margin-top: calc(6 * var(--rpx));
  font-size: calc(20 * var(--rpx));
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.56);
}

.chip-row {
  display: flex;
  gap: calc(10 * var(--rpx));
  white-space: nowrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(54 * var(--rpx));
  padding: 0 calc(18 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(999 * var(--rpx));
  background: var(--surface);
  color: var(--ink-3);
  font-size: calc(21 * var(--rpx));
  font-weight: 700;
}

.chip--active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.field {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--rpx));
}

.field__label {
  font-size: calc(21 * var(--rpx));
  font-weight: 800;
  color: var(--ink-2);
}

.field__input {
  width: 100%;
  height: calc(82 * var(--rpx));
  padding: 0 calc(22 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(18 * var(--rpx));
  background: var(--surface);
  font-size: calc(25 * var(--rpx));
  color: var(--ink);
}

.field__hint {
  font-size: calc(19 * var(--rpx));
  color: var(--muted);
}

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(76 * var(--rpx));
  height: calc(76 * var(--rpx));
  border-radius: 50%;
  background: var(--lime);
  color: #1a2911;
  font-size: calc(30 * var(--rpx));
  font-weight: 800;
}

.empty {
  padding: calc(80 * var(--rpx)) calc(24 * var(--rpx));
  text-align: center;
}

.empty__title {
  font-size: calc(32 * var(--rpx));
  font-weight: 800;
}

.empty__desc {
  margin: calc(12 * var(--rpx)) 0 calc(28 * var(--rpx));
  font-size: calc(22 * var(--rpx));
  color: var(--ink-3);
}

.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(32 * var(--rpx));
  height: calc(32 * var(--rpx));
  padding: 0 calc(8 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(7 * var(--rpx));
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: calc(16 * var(--rpx));
  font-weight: 800;
}

.safe-bottom {
  height: calc(calc(24 * var(--rpx)) + var(--safe-bottom));
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}


/* Dark-mode overrides for the few surfaces that use fixed light colors. */
.theme-dark .tag {
  background: rgba(221, 246, 95, 0.13);
  color: var(--lime);
}

.theme-dark .tag--quiet {
  background: var(--surface-2);
  color: var(--ink-3);
}

.theme-dark .settings-note,
.theme-dark .quiz-result__perfect {
  background: rgba(221, 246, 95, 0.12);
  color: #dce9a8;
}

.theme-dark .session__top {
  background: rgba(14, 21, 18, 0.95);
  border-bottom-color: var(--line);
}

.theme-dark .session__progress,
.theme-dark .quiz-play__progress {
  background: rgba(242, 239, 228, 0.16);
}

.theme-dark .heatmap__cell {
  background: #25332b;
}

.theme-dark .heatmap__cell--1,
.theme-dark .heatmap__legend-cell--1 {
  background: #2c4434;
}

.theme-dark .heatmap__cell--2,
.theme-dark .heatmap__legend-cell--2 {
  background: #426a4d;
}

.theme-dark .heatmap__cell--3,
.theme-dark .heatmap__legend-cell--3 {
  background: #689567;
}

.theme-dark .heatmap__cell--4,
.theme-dark .heatmap__legend-cell--4 {
  background: var(--lime);
}

.theme-dark .heatmap__cell.is-today {
  box-shadow: 0 0 0 calc(2 * var(--rpx)) rgba(221, 246, 95, 0.75);
}

.theme-dark .word-progress__mastery {
  border-color: var(--lime);
}

.theme-dark .word-progress__mastery-num {
  color: var(--lime);
}

.theme-dark .word-example,
.theme-dark .detail-example {
  background: var(--surface-2);
}

.theme-dark .word-example__highlight,
.theme-dark .detail-example__highlight {
  color: #15220f;
}

.theme-dark .study-action--review,
.theme-dark .profile-kpi,
.theme-dark .settings-data div {
  background: var(--surface-2);
}

.theme-dark .quiz-result__inner {
  background: var(--paper);
}

.theme-dark .settings-about {
  background: #1b3a2a;
}

.theme-dark .profile-hero__avatar,
.theme-dark .home__avatar {
  color: #15220f;
}

.theme-dark .nav__back,
.theme-dark .icon-btn {
  background: var(--surface-2);
}

.theme-dark .accent {
  color: var(--lime);
}

.theme-dark .home__search,
.theme-dark .nav__right .icon-btn {
  background: var(--surface-2);
}


/* ===== pages/home/home.wxss ===== */
.home__nav-actions {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--rpx));
}

.home__streak {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--rpx));
  height: calc(60 * var(--rpx));
  padding: 0 calc(16 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(999 * var(--rpx));
  background: var(--surface);
  font-size: calc(22 * var(--rpx));
  font-weight: 800;
}

.home__flame {
  color: var(--coral);
  font-size: calc(21 * var(--rpx));
}

.home__head {
  padding: calc(20 * var(--rpx)) 0 calc(28 * var(--rpx));
}

.home__title {
  margin-top: calc(14 * var(--rpx));
  font-size: calc(66 * var(--rpx));
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: calc(-4 * var(--rpx));
}

.home__title .accent {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  color: var(--forest);
}

.home__desc {
  max-width: calc(650 * var(--rpx));
  margin-top: calc(14 * var(--rpx));
  color: var(--ink-3);
  font-size: calc(23 * var(--rpx));
  line-height: 1.65;
}

.home__pills {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--rpx));
  margin-top: calc(20 * var(--rpx));
}

.home__pill {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--rpx));
  height: calc(58 * var(--rpx));
  padding: 0 calc(18 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(999 * var(--rpx));
  background: var(--surface);
  color: var(--ink-3);
  font-size: calc(21 * var(--rpx));
}

.home__pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(30 * var(--rpx));
  height: calc(30 * var(--rpx));
  border-radius: calc(8 * var(--rpx));
  background: var(--lime-soft);
  color: #3a4813;
  font-size: calc(16 * var(--rpx));
  font-weight: 800;
}

.home__pill-num {
  margin: 0 calc(4 * var(--rpx));
  font-family: Georgia, serif;
  font-size: calc(30 * var(--rpx));
  color: var(--ink);
}

.home__pill-arrow {
  color: var(--muted);
}

.home__pill--quiet {
  background: var(--surface-2);
  border-color: transparent;
}

.home__pill-muted {
  color: var(--muted);
}

/* hero */

.hero {
  position: relative;
  overflow: hidden;
  padding: calc(28 * var(--rpx)) calc(28 * var(--rpx)) calc(26 * var(--rpx));
  border-radius: calc(38 * var(--rpx));
  background:
    radial-gradient(circle at 82% 8%, rgba(221, 246, 95, 0.18), transparent 34%),
    linear-gradient(145deg, #173e2c, #0e261b 88%);
  color: #f7f5e9;
  box-shadow: 0 calc(28 * var(--rpx)) calc(60 * var(--rpx)) rgba(14, 38, 27, 0.15);
}

.hero__ring {
  position: absolute;
  border-radius: 50%;
  border: calc(1 * var(--rpx)) solid rgba(221, 246, 95, 0.14);
}

.hero__ring--one {
  width: calc(500 * var(--rpx));
  height: calc(500 * var(--rpx));
  right: calc(-230 * var(--rpx));
  bottom: calc(-250 * var(--rpx));
}

.hero__ring--two {
  width: calc(330 * var(--rpx));
  height: calc(330 * var(--rpx));
  right: calc(-130 * var(--rpx));
  top: calc(90 * var(--rpx));
  opacity: 0.5;
}

.hero__top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: calc(16 * var(--rpx));
}

.hero__top .eyebrow {
  font-size: calc(16 * var(--rpx));
  letter-spacing: calc(2 * var(--rpx));
}

.hero__edition {
  font-size: calc(15 * var(--rpx));
  color: rgba(247, 245, 233, 0.36);
  letter-spacing: calc(1 * var(--rpx));
}

.hero__main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(18 * var(--rpx));
  padding: calc(28 * var(--rpx)) 0 calc(24 * var(--rpx));
}

.hero__copy {
  flex: 1;
  min-width: 0;
}

.hero__title {
  font-size: calc(46 * var(--rpx));
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: calc(-3 * var(--rpx));
}

.hero__number {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  color: var(--lime);
  font-size: calc(64 * var(--rpx));
  letter-spacing: calc(-3 * var(--rpx));
}

.hero__thread {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--rpx));
  margin-top: calc(12 * var(--rpx));
  padding: calc(5 * var(--rpx)) calc(10 * var(--rpx));
  border: calc(1 * var(--rpx)) solid rgba(247, 245, 233, 0.12);
  border-radius: calc(7 * var(--rpx));
  color: rgba(247, 245, 233, 0.5);
  font-size: calc(14 * var(--rpx));
}

.hero__thread span:first-child {
  color: var(--lime);
  font-family: Georgia, serif;
  font-size: calc(11 * var(--rpx));
  letter-spacing: calc(1 * var(--rpx));
}

.hero__desc {
  max-width: calc(380 * var(--rpx));
  margin-top: calc(14 * var(--rpx));
  color: rgba(247, 245, 233, 0.52);
  font-size: calc(21 * var(--rpx));
  line-height: 1.6;
}

.hero__ring-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(176 * var(--rpx));
  height: calc(176 * var(--rpx));
  flex: 0 0 auto;
  border-radius: 50%;
}

.hero__ring-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(152 * var(--rpx));
  height: calc(152 * var(--rpx));
  border-radius: 50%;
  background: #153526;
  color: #f7f5e9;
}

.hero__ring-num {
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(64 * var(--rpx));
  line-height: 0.9;
}

.hero__ring-total {
  margin-top: calc(4 * var(--rpx));
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(24 * var(--rpx));
  color: rgba(247, 245, 233, 0.45);
}

.hero__ring-label {
  margin-top: calc(8 * var(--rpx));
  font-size: calc(12 * var(--rpx));
  font-weight: 800;
  letter-spacing: calc(1 * var(--rpx));
  color: rgba(247, 245, 233, 0.36);
}

.hero__bottom {
  position: relative;
  z-index: 1;
  padding-top: calc(20 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.1);
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--rpx));
  color: rgba(247, 245, 233, 0.48);
  font-size: calc(18 * var(--rpx));
}

.hero__cta {
  width: 100%;
  margin-top: calc(20 * var(--rpx));
  height: calc(84 * var(--rpx));
  font-size: calc(25 * var(--rpx));
}

.hero__cta-arrow {
  font-size: calc(32 * var(--rpx));
  line-height: 1;
}

/* review + streak */

.home__side {
  display: flex;
  gap: calc(16 * var(--rpx));
  margin-top: calc(16 * var(--rpx));
}

.review-card {
  flex: 1.05;
  min-width: 0;
  padding: calc(24 * var(--rpx)) calc(20 * var(--rpx));
}

.review-card__body {
  margin-top: calc(20 * var(--rpx));
}

.review-card__count {
  display: flex;
  align-items: flex-end;
  gap: calc(14 * var(--rpx));
}

.review-card__number {
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(96 * var(--rpx));
  line-height: 0.8;
  color: var(--coral);
  letter-spacing: calc(-3 * var(--rpx));
}

.review-card__count-label {
  display: flex;
  flex-direction: column;
  padding-bottom: calc(6 * var(--rpx));
  font-size: calc(19 * var(--rpx));
  line-height: 1.4;
  color: var(--ink-3);
}

.review-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(70 * var(--rpx));
  margin-top: calc(20 * var(--rpx));
  border-radius: calc(999 * var(--rpx));
  background: var(--ink);
  color: var(--paper);
  font-size: calc(20 * var(--rpx));
  font-weight: 800;
}

.review-card__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(12 * var(--rpx));
  margin-top: calc(24 * var(--rpx));
  color: var(--ink-3);
  font-size: calc(19 * var(--rpx));
  line-height: 1.5;
}

.review-card__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(52 * var(--rpx));
  height: calc(52 * var(--rpx));
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
  font-size: calc(24 * var(--rpx));
  font-weight: 800;
}

.streak-card {
  flex: 0.95;
  min-width: 0;
  padding: calc(24 * var(--rpx)) calc(18 * var(--rpx)) calc(18 * var(--rpx));
  border-radius: calc(34 * var(--rpx));
  background: var(--lime);
  color: #18250d;
}

.streak-card .eyebrow {
  color: rgba(24, 37, 13, 0.56);
  font-size: calc(15 * var(--rpx));
  letter-spacing: calc(1 * var(--rpx));
}

.streak-card__badge {
  padding: calc(6 * var(--rpx)) calc(12 * var(--rpx));
  border-radius: calc(999 * var(--rpx));
  background: rgba(24, 37, 13, 0.1);
  font-size: calc(16 * var(--rpx));
  font-weight: 800;
}

.streak-card__main {
  display: flex;
  align-items: baseline;
  gap: calc(8 * var(--rpx));
  margin-top: calc(14 * var(--rpx));
}

.streak-card__number {
  font-family: Georgia, serif;
  font-size: calc(82 * var(--rpx));
  line-height: 1;
  letter-spacing: calc(-3 * var(--rpx));
}

.streak-card__unit {
  font-size: calc(22 * var(--rpx));
  font-weight: 800;
}

.streak-card__copy {
  margin-left: calc(6 * var(--rpx));
  font-size: calc(18 * var(--rpx));
  line-height: 1.4;
  color: rgba(24, 37, 13, 0.6);
}

.streak-card__days {
  display: flex;
  gap: calc(6 * var(--rpx));
  margin-top: calc(20 * var(--rpx));
}

.streak-card__day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--rpx));
}

.streak-card__day-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(36 * var(--rpx));
  border-radius: calc(8 * var(--rpx));
  background: rgba(24, 37, 13, 0.08);
  font-size: calc(17 * var(--rpx));
  font-weight: 800;
}

.streak-card__day.is-active .streak-card__day-box {
  background: #18250d;
  color: var(--lime);
}

.streak-card__day.is-today .streak-card__day-box {
  box-shadow: 0 0 0 calc(2 * var(--rpx)) #18250d;
}

.streak-card__day span {
  font-size: calc(15 * var(--rpx));
  color: rgba(24, 37, 13, 0.45);
}

/* word of day */

.word-card {
  display: flex;
  overflow: hidden;
  margin-top: calc(16 * var(--rpx));
}

.word-card__visual {
  position: relative;
  width: 42%;
  min-height: calc(390 * var(--rpx));
  overflow: hidden;
  flex: 0 0 auto;
}

.word-card__visual .art__top {
  top: calc(18 * var(--rpx));
  left: calc(18 * var(--rpx));
  right: calc(18 * var(--rpx));
  font-size: calc(13 * var(--rpx));
}

.word-card__visual .art__icon-wrap {
  width: calc(160 * var(--rpx));
  height: calc(160 * var(--rpx));
  margin: calc(-80 * var(--rpx)) 0 0 calc(-80 * var(--rpx));
}

.word-card__visual .art__icon {
  width: calc(78 * var(--rpx));
  height: calc(78 * var(--rpx));
}

.word-card__visual-label {
  position: absolute;
  left: calc(16 * var(--rpx));
  bottom: calc(16 * var(--rpx));
  padding: calc(5 * var(--rpx)) calc(9 * var(--rpx));
  border-radius: calc(6 * var(--rpx));
  background: rgba(12, 20, 13, 0.38);
  color: rgba(255, 255, 255, 0.62);
  font-size: calc(12 * var(--rpx));
  font-weight: 800;
  letter-spacing: calc(1 * var(--rpx));
}

.word-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: calc(24 * var(--rpx)) calc(22 * var(--rpx)) calc(18 * var(--rpx));
}

.word-card__body .eyebrow {
  font-size: calc(15 * var(--rpx));
  letter-spacing: calc(1 * var(--rpx));
}

.word-card__wordline {
  margin-top: calc(10 * var(--rpx));
}

.word-card__word {
  display: block;
  font-size: calc(58 * var(--rpx));
  line-height: 0.96;
  word-break: break-all;
}

.word-card__phonetic {
  display: block;
  margin-top: calc(7 * var(--rpx));
  font-family: Georgia, serif;
  font-size: calc(19 * var(--rpx));
  color: var(--muted);
}

.word-card__meaning {
  margin-top: calc(14 * var(--rpx));
  color: var(--ink-2);
  font-size: calc(22 * var(--rpx));
  line-height: 1.5;
}

.word-card__example {
  margin-top: calc(12 * var(--rpx));
  padding-top: calc(12 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid var(--line);
  color: var(--ink-3);
  font-family: Georgia, serif;
  font-size: calc(20 * var(--rpx));
  line-height: 1.45;
}

.word-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--rpx));
  margin-top: auto;
  padding-top: calc(14 * var(--rpx));
}

/* week */

.week-card {
  margin-top: calc(16 * var(--rpx));
  padding: calc(24 * var(--rpx));
}

.week-card__title {
  margin-top: calc(8 * var(--rpx));
  font-size: calc(34 * var(--rpx));
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: calc(-1 * var(--rpx));
}

.week-card__score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 0 0 auto;
}

.week-card__score-num {
  font-family: Georgia, serif;
  font-size: calc(58 * var(--rpx));
  line-height: 0.9;
  color: var(--forest);
}

.week-chart {
  display: flex;
  align-items: flex-end;
  gap: calc(10 * var(--rpx));
  height: calc(200 * var(--rpx));
  margin-top: calc(26 * var(--rpx));
  padding-top: calc(20 * var(--rpx));
}

.week-chart__col {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: calc(8 * var(--rpx));
}

.week-chart__value {
  position: absolute;
  top: calc(-4 * var(--rpx));
  font-family: Georgia, serif;
  font-size: calc(16 * var(--rpx));
  color: var(--muted);
}

.week-chart__bar {
  position: relative;
  width: 100%;
  max-width: calc(36 * var(--rpx));
  min-height: calc(4 * var(--rpx));
  border-radius: calc(8 * var(--rpx));
  background: var(--lime);
  overflow: hidden;
}

.week-chart__review {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: var(--lime);
}

.week-chart__new {
  position: absolute;
  left: 0;
  top: 0;
  max-height: 100%;
  right: 0;
  background: var(--forest);
  z-index: 1;
}

.week-chart__label {
  font-size: calc(17 * var(--rpx));
  color: var(--muted);
}

.week-chart__label.is-today {
  color: var(--ink);
  font-weight: 800;
}

.week-chart--empty {
  align-items: center;
  justify-content: center;
  border-radius: calc(16 * var(--rpx));
  background: var(--surface-2);
  color: var(--muted);
  font-size: calc(19 * var(--rpx));
  text-align: center;
}

.week-card__legend {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--rpx));
  margin-top: calc(20 * var(--rpx));
  padding-top: calc(16 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid var(--line);
  color: var(--ink-3);
  font-size: calc(18 * var(--rpx));
}

.week-card__legend > span {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--rpx));
}

.week-card__legend .text-link {
  margin-left: auto;
  font-size: calc(18 * var(--rpx));
}

.legend-dot {
  width: calc(10 * var(--rpx));
  height: calc(10 * var(--rpx));
  border-radius: calc(3 * var(--rpx));
}

.legend-dot--new {
  background: var(--forest);
}

.legend-dot--review {
  background: var(--lime);
}

/* banks */

.bank-card {
  margin-top: calc(16 * var(--rpx));
  padding: calc(24 * var(--rpx));
}

.bank-card__rows {
  margin-top: calc(18 * var(--rpx));
}

.bank-row {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--rpx));
  padding: calc(16 * var(--rpx)) 0;
  border-top: calc(1 * var(--rpx)) solid var(--line);
}

.bank-row__code {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(64 * var(--rpx));
  height: calc(64 * var(--rpx));
  flex: 0 0 auto;
  border-radius: calc(14 * var(--rpx));
  color: #fff;
  font-family: Georgia, serif;
  font-size: calc(15 * var(--rpx));
}

.bank-row__body {
  flex: 1;
  min-width: 0;
}

.bank-row__name {
  font-size: calc(22 * var(--rpx));
  font-weight: 800;
}

.bank-row__count {
  font-family: Georgia, serif;
  font-size: calc(18 * var(--rpx));
  color: var(--ink-3);
}

.bank-row__body .progress {
  height: calc(5 * var(--rpx));
  margin-top: calc(8 * var(--rpx));
}

.bank-row__meta {
  margin-top: calc(5 * var(--rpx));
  color: var(--muted);
  font-size: calc(16 * var(--rpx));
}

.bank-row__arrow {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: calc(32 * var(--rpx));
}

.bank-card__foot {
  display: flex;
  justify-content: space-between;
  gap: calc(16 * var(--rpx));
  margin-top: calc(18 * var(--rpx));
  padding-top: calc(14 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid var(--line);
  color: var(--ink-3);
  font-size: calc(18 * var(--rpx));
}

.bank-card__foot .strong {
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: calc(22 * var(--rpx));
}

/* phrase */

.phrase-card {
  margin-top: calc(16 * var(--rpx));
  padding: calc(26 * var(--rpx)) calc(24 * var(--rpx)) calc(22 * var(--rpx));
  border-radius: calc(34 * var(--rpx));
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 214, 173, 0.28), transparent 40%),
    linear-gradient(145deg, #9e5126, #6b2f14);
  color: #fbf3e7;
}

.phrase-card .row-between {
  align-items: flex-start;
}

.phrase-card__eyebrow {
  color: rgba(251, 243, 231, 0.48);
  font-size: calc(15 * var(--rpx));
  letter-spacing: calc(1 * var(--rpx));
}

.phrase-card__quote {
  font-family: Georgia, serif;
  font-size: calc(52 * var(--rpx));
  line-height: 0.8;
  color: rgba(251, 243, 231, 0.22);
}

.phrase-card__word {
  margin-top: calc(18 * var(--rpx));
  font-size: calc(48 * var(--rpx));
  line-height: 1.05;
  word-break: break-all;
}

.phrase-card__meaning {
  margin-top: calc(10 * var(--rpx));
  color: rgba(251, 243, 231, 0.65);
  font-size: calc(21 * var(--rpx));
  line-height: 1.55;
}

.phrase-card__example {
  margin-top: calc(18 * var(--rpx));
  padding-left: calc(16 * var(--rpx));
  border-left: calc(2 * var(--rpx)) solid rgba(251, 243, 231, 0.25);
}

.phrase-card__example span {
  display: block;
  font-family: Georgia, serif;
  font-size: calc(21 * var(--rpx));
  line-height: 1.45;
}

.phrase-card__zh {
  margin-top: calc(4 * var(--rpx));
  color: rgba(251, 243, 231, 0.42);
  font-family: inherit;
  font-size: calc(18 * var(--rpx));
}

.phrase-card__foot {
  display: flex;
  justify-content: space-between;
  gap: calc(14 * var(--rpx));
  margin-top: calc(22 * var(--rpx));
  padding-top: calc(16 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid rgba(251, 243, 231, 0.14);
  color: rgba(251, 243, 231, 0.38);
  font-size: calc(16 * var(--rpx));
}

.phrase-card__foot .text-link {
  font-size: calc(18 * var(--rpx));
}

.home__footer {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--rpx));
  margin-top: calc(32 * var(--rpx));
  padding-top: calc(18 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid var(--line);
  color: var(--muted);
  font-size: calc(16 * var(--rpx));
}

.shell-card {
  position: relative;
  overflow: hidden;
  margin-top: calc(16 * var(--rpx));
  padding: calc(24 * var(--rpx));
  border-radius: calc(34 * var(--rpx));
  background:
    radial-gradient(circle at 88% 10%, rgba(221, 246, 95, 0.15), transparent 34%),
    linear-gradient(140deg, #173d2b, #0b2318 88%);
  color: #f7f5e9;
}

.shell-card::after {
  content: '';
  position: absolute;
  width: calc(220 * var(--rpx));
  height: calc(220 * var(--rpx));
  right: calc(-100 * var(--rpx));
  bottom: calc(-120 * var(--rpx));
  border: calc(1 * var(--rpx)) solid rgba(221, 246, 95, 0.13);
  border-radius: 50%;
}

.shell-card__eyebrow {
  color: rgba(247, 245, 233, 0.45);
  font-size: calc(14 * var(--rpx));
}

.shell-card__count {
  color: var(--lime);
  font-family: Georgia, serif;
  font-size: calc(20 * var(--rpx));
}

.shell-card__title {
  position: relative;
  z-index: 1;
  margin-top: calc(10 * var(--rpx));
  color: #f7f5e9;
  font-size: calc(32 * var(--rpx));
  font-weight: 800;
  line-height: 1.15;
}

.shell-card__title .display {
  color: var(--lime);
  font-size: calc(38 * var(--rpx));
  font-style: italic;
  font-weight: 400;
}

.shell-strip {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--rpx));
  margin-top: calc(18 * var(--rpx));
}

.shell-token {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(62 * var(--rpx));
  height: calc(62 * var(--rpx));
  border: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.16);
  border-radius: 50% 50% 44% 44%;
  opacity: 0.35;
  box-shadow: inset 0 calc(-6 * var(--rpx)) calc(10 * var(--rpx)) rgba(0, 0, 0, 0.14);
}

.shell-token.is-earned {
  opacity: 1;
  border-color: rgba(221, 246, 95, 0.52);
}

.shell-token__glyph {
  font-size: calc(30 * var(--rpx));
  line-height: 1;
}

.shell-strip__more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(62 * var(--rpx));
  height: calc(62 * var(--rpx));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(247, 245, 233, 0.45);
  font-family: Georgia, serif;
  font-size: calc(18 * var(--rpx));
}

.shell-card__foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: calc(16 * var(--rpx));
  padding-top: calc(12 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.1);
  color: rgba(247, 245, 233, 0.42);
  font-size: calc(16 * var(--rpx));
}

.shell-card__foot span:last-child {
  color: rgba(247, 245, 233, 0.7);
  font-weight: 700;
}

.shell-card__line {
  color: #f7f5e9;
}

.shell-card__title .display {
  margin: 0 calc(5 * var(--rpx));
}

.hero__thread {
  color: rgba(247, 245, 233, 0.65);
  font-size: calc(16 * var(--rpx));
}

.hero__thread span:first-child {
  font-size: calc(12 * var(--rpx));
}


/* ===== pages/study/study.wxss ===== */
.study-plan {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(22 * var(--rpx));
  padding: calc(26 * var(--rpx)) calc(24 * var(--rpx));
  border-radius: calc(36 * var(--rpx));
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 8%, rgba(221, 246, 95, 0.17), transparent 35%),
    linear-gradient(145deg, #173e2c, #0e261b 88%);
  color: #f7f5e9;
}

.study-plan::after {
  content: '';
  position: absolute;
  width: calc(340 * var(--rpx));
  height: calc(340 * var(--rpx));
  right: calc(-190 * var(--rpx));
  bottom: calc(-210 * var(--rpx));
  border-radius: 50%;
  border: calc(1 * var(--rpx)) solid rgba(221, 246, 95, 0.15);
}

.study-plan__ring {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(170 * var(--rpx));
  height: calc(170 * var(--rpx));
  flex: 0 0 auto;
  border-radius: 50%;
}

.study-plan__ring-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(146 * var(--rpx));
  height: calc(146 * var(--rpx));
  border-radius: 50%;
  background: #153526;
}

.study-plan__num {
  font-family: Georgia, serif;
  font-size: calc(60 * var(--rpx));
  line-height: 0.9;
}

.study-plan__total {
  margin-top: calc(5 * var(--rpx));
  font-family: Georgia, serif;
  font-size: calc(22 * var(--rpx));
  color: rgba(247, 245, 233, 0.42);
}

.study-plan__label {
  margin-top: calc(7 * var(--rpx));
  font-size: calc(12 * var(--rpx));
  font-weight: 800;
  letter-spacing: calc(2 * var(--rpx));
  color: rgba(247, 245, 233, 0.34);
}

.study-plan__copy {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}

.study-plan__title {
  margin-top: calc(10 * var(--rpx));
  font-size: calc(34 * var(--rpx));
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: calc(-1 * var(--rpx));
}

.study-plan__lime {
  font-family: Georgia, serif;
  font-style: italic;
  color: var(--lime);
  font-size: calc(48 * var(--rpx));
}

.study-plan__desc {
  margin-top: calc(10 * var(--rpx));
  color: rgba(247, 245, 233, 0.5);
  font-size: calc(19 * var(--rpx));
  line-height: 1.5;
}

.study-plan__meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(14 * var(--rpx));
  margin-top: calc(12 * var(--rpx));
  color: rgba(247, 245, 233, 0.4);
  font-size: calc(17 * var(--rpx));
}

.study-actions {
  display: flex;
  gap: calc(14 * var(--rpx));
  margin-top: calc(16 * var(--rpx));
}

.study-action {
  flex: 1;
  min-width: 0;
  padding: calc(22 * var(--rpx)) calc(20 * var(--rpx)) calc(18 * var(--rpx));
  border-radius: calc(30 * var(--rpx));
  background: var(--surface);
  border: calc(1 * var(--rpx)) solid var(--line);
}

.study-action--primary {
  background: var(--lime);
  border-color: var(--lime);
  color: #18250d;
}

.study-action--review {
  background: var(--surface);
}

.study-action__top {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: calc(16 * var(--rpx));
  font-weight: 800;
  letter-spacing: calc(1 * var(--rpx));
}

.study-action--primary .study-action__top {
  color: rgba(24, 37, 13, 0.5);
}

.study-action__arrow {
  font-size: calc(26 * var(--rpx));
}

.study-action__title {
  margin-top: calc(26 * var(--rpx));
  font-size: calc(30 * var(--rpx));
  font-weight: 800;
  line-height: 1.1;
}

.study-action__desc {
  margin-top: calc(8 * var(--rpx));
  color: var(--muted);
  font-size: calc(17 * var(--rpx));
  line-height: 1.4;
}

.study-action--primary .study-action__desc {
  color: rgba(24, 37, 13, 0.56);
}

.study-action__bar {
  height: calc(5 * var(--rpx));
  margin-top: calc(24 * var(--rpx));
  border-radius: calc(99 * var(--rpx));
  background: rgba(24, 37, 13, 0.14);
  overflow: hidden;
}

.study-action__bar div {
  height: 100%;
  border-radius: inherit;
  background: #18250d;
}

.study-action__bar--coral {
  background: var(--coral-soft);
}

.study-action__bar--coral div {
  background: var(--coral);
}

.method {
  margin-top: calc(16 * var(--rpx));
  padding: calc(24 * var(--rpx));
}

.method__title {
  margin-top: calc(8 * var(--rpx));
  font-size: calc(34 * var(--rpx));
  font-weight: 800;
  letter-spacing: calc(-1 * var(--rpx));
}

.method__list {
  margin-top: calc(16 * var(--rpx));
}

.method__item {
  display: flex;
  gap: calc(16 * var(--rpx));
  padding: calc(14 * var(--rpx)) 0;
  border-top: calc(1 * var(--rpx)) solid var(--line);
}

.method__item > div {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--rpx));
}

.method__num {
  width: calc(44 * var(--rpx));
  flex: 0 0 auto;
  font-family: Georgia, serif;
  font-size: calc(18 * var(--rpx));
  color: var(--muted);
}

.method__name {
  font-size: calc(22 * var(--rpx));
  font-weight: 800;
}

.method__desc {
  color: var(--ink-3);
  font-size: calc(19 * var(--rpx));
  line-height: 1.45;
}

.study-phrase {
  margin-top: calc(16 * var(--rpx));
  padding: calc(24 * var(--rpx));
  border-radius: calc(34 * var(--rpx));
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 214, 173, 0.3), transparent 40%),
    linear-gradient(145deg, #9e5126, #6b2f14);
  color: #fbf3e7;
}

.study-phrase__eyebrow {
  color: rgba(251, 243, 231, 0.46);
  font-size: calc(15 * var(--rpx));
  letter-spacing: calc(1 * var(--rpx));
}

.study-phrase__mark {
  font-family: Georgia, serif;
  font-size: calc(52 * var(--rpx));
  line-height: 0.8;
  color: rgba(251, 243, 231, 0.22);
}

.study-phrase__word {
  margin-top: calc(16 * var(--rpx));
  font-size: calc(44 * var(--rpx));
  line-height: 1.05;
  word-break: break-all;
}

.study-phrase__meaning {
  margin-top: calc(8 * var(--rpx));
  color: rgba(251, 243, 231, 0.65);
  font-size: calc(20 * var(--rpx));
}

.study-phrase__example {
  margin-top: calc(14 * var(--rpx));
  padding-left: calc(14 * var(--rpx));
  border-left: calc(2 * var(--rpx)) solid rgba(251, 243, 231, 0.25);
  color: rgba(251, 243, 231, 0.72);
  font-family: Georgia, serif;
  font-size: calc(20 * var(--rpx));
  line-height: 1.5;
}

.study-phrase__foot {
  display: flex;
  justify-content: space-between;
  gap: calc(12 * var(--rpx));
  margin-top: calc(18 * var(--rpx));
  padding-top: calc(14 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid rgba(251, 243, 231, 0.14);
  color: rgba(251, 243, 231, 0.36);
  font-size: calc(16 * var(--rpx));
}

.study-phrase__foot .text-link {
  font-size: calc(17 * var(--rpx));
}

.study-note {
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--rpx));
  margin-top: calc(28 * var(--rpx));
  padding: calc(20 * var(--rpx)) calc(4 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid var(--line);
  color: var(--ink-3);
  font-size: calc(20 * var(--rpx));
}

.study-plan__thread {
  display: inline-flex;
  margin-top: calc(8 * var(--rpx));
  padding: calc(4 * var(--rpx)) calc(9 * var(--rpx));
  border: calc(1 * var(--rpx)) solid rgba(247, 245, 233, 0.14);
  border-radius: calc(6 * var(--rpx));
  color: rgba(247, 245, 233, 0.48);
  font-size: calc(13 * var(--rpx));
  letter-spacing: calc(0.5 * var(--rpx));
}


/* ===== pages/library/library.wxss ===== */
.library__count {
  font-family: Georgia, serif;
  font-size: calc(22 * var(--rpx));
  color: var(--muted);
}

.library-head {
  padding: calc(20 * var(--rpx)) 0 calc(24 * var(--rpx));
}

.library-head__title {
  margin-top: calc(12 * var(--rpx));
  font-size: calc(58 * var(--rpx));
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: calc(-3 * var(--rpx));
}

.library-head__title .accent {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--forest);
}

.library-head__desc {
  margin-top: calc(12 * var(--rpx));
  color: var(--ink-3);
  font-size: calc(21 * var(--rpx));
  line-height: 1.55;
}

.library-stats {
  display: flex;
  border-top: calc(1 * var(--rpx)) solid var(--line);
  border-bottom: calc(1 * var(--rpx)) solid var(--line);
}

.library-stats div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--rpx));
  padding: calc(14 * var(--rpx)) calc(10 * var(--rpx));
  border-right: calc(1 * var(--rpx)) solid var(--line);
}

.library-stats div:first-child {
  padding-left: 0;
}

.library-stats div:last-child {
  border-right: 0;
}

.library-stats span:first-child {
  color: var(--muted);
  font-size: calc(15 * var(--rpx));
}

.library-stats span:nth-child(2) {
  font-family: Georgia, serif;
  font-size: calc(40 * var(--rpx));
  line-height: 1;
}

.library-stats span:last-child {
  color: var(--muted);
  font-size: calc(15 * var(--rpx));
}

.bank-tabs {
  display: flex;
  gap: calc(10 * var(--rpx));
  width: 100%;
  margin-top: calc(18 * var(--rpx));
  white-space: nowrap;
}

.bank-tab {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--rpx));
  flex: 0 0 auto;
  height: calc(76 * var(--rpx));
  padding: 0 calc(18 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(16 * var(--rpx));
  background: var(--surface);
}

.bank-tab.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.bank-tab__dot {
  width: calc(12 * var(--rpx));
  height: calc(12 * var(--rpx));
  border-radius: calc(3 * var(--rpx));
}

.bank-tab__text {
  display: flex;
  flex-direction: column;
  gap: calc(1 * var(--rpx));
}

.bank-tab__text span:first-child {
  font-size: calc(20 * var(--rpx));
  font-weight: 800;
}

.bank-tab__text span:last-child {
  font-family: Georgia, serif;
  font-size: calc(15 * var(--rpx));
  color: var(--muted);
}

.bank-tab.is-active .bank-tab__text span:last-child {
  color: rgba(241, 238, 228, 0.5);
}

.library-toolbar {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--rpx));
  margin-top: calc(16 * var(--rpx));
}

.search-box {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--rpx));
  flex: 1;
  height: calc(76 * var(--rpx));
  padding: 0 calc(16 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(14 * var(--rpx));
  background: var(--surface);
}

.search-box__icon {
  color: var(--muted);
  font-size: calc(30 * var(--rpx));
}

.search-box__input {
  flex: 1;
  height: 100%;
  font-size: calc(21 * var(--rpx));
  color: var(--ink);
}

.search-box__placeholder {
  color: var(--muted);
}

.search-box__clear {
  color: var(--muted);
  font-size: calc(30 * var(--rpx));
  padding: 0 calc(4 * var(--rpx));
}

.sort-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(76 * var(--rpx));
  padding: 0 calc(16 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(14 * var(--rpx));
  background: var(--surface);
  color: var(--ink-3);
  font-size: calc(18 * var(--rpx));
  font-weight: 700;
}

.filter-row {
  display: flex;
  gap: calc(8 * var(--rpx));
  width: 100%;
  margin-top: calc(12 * var(--rpx));
  white-space: nowrap;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--rpx));
  flex: 0 0 auto;
  height: calc(52 * var(--rpx));
  padding: 0 calc(15 * var(--rpx));
  border-radius: calc(10 * var(--rpx));
  color: var(--ink-3);
  font-size: calc(18 * var(--rpx));
}

.filter-chip.is-active {
  background: var(--ink);
  color: var(--paper);
}

.filter-chip__count {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: calc(24 * var(--rpx));
  height: calc(24 * var(--rpx));
  padding: 0 calc(5 * var(--rpx));
  border-radius: calc(5 * var(--rpx));
  background: rgba(21, 25, 21, 0.1);
  font-size: calc(13 * var(--rpx));
}

.filter-chip.is-active .filter-chip__count {
  background: rgba(255, 255, 255, 0.16);
}

.library-result-head {
  display: flex;
  justify-content: space-between;
  gap: calc(16 * var(--rpx));
  margin-top: calc(12 * var(--rpx));
  padding: calc(12 * var(--rpx)) 0;
  border-top: calc(1 * var(--rpx)) solid var(--line);
  color: var(--muted);
  font-size: calc(17 * var(--rpx));
}

.library-result-head .strong {
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: calc(20 * var(--rpx));
}

.word-list {
  border-top: calc(1 * var(--rpx)) solid var(--line);
}

.word-row {
  display: flex;
  align-items: stretch;
  gap: calc(8 * var(--rpx));
  padding: calc(18 * var(--rpx)) 0;
  border-bottom: calc(1 * var(--rpx)) solid var(--line);
}

.word-row__main {
  flex: 1;
  min-width: 0;
}

.word-row__top {
  display: flex;
  align-items: baseline;
  gap: calc(12 * var(--rpx));
}

.word-row__word {
  font-size: calc(34 * var(--rpx));
  line-height: 1.05;
  word-break: break-all;
}

.word-row__phonetic {
  font-family: Georgia, serif;
  font-size: calc(17 * var(--rpx));
  color: var(--muted);
}

.word-row__meaning {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  margin-top: calc(6 * var(--rpx));
  color: var(--ink-2);
  font-size: calc(20 * var(--rpx));
  line-height: 1.4;
}

.word-row__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(18 * var(--rpx));
  margin-top: calc(8 * var(--rpx));
}

.word-row__status {
  display: flex;
  align-items: center;
  gap: calc(7 * var(--rpx));
  color: var(--ink-3);
  font-size: calc(16 * var(--rpx));
}

.word-row__mastery {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--rpx));
  width: calc(142 * var(--rpx));
  flex: 0 0 auto;
}

.word-row__mastery-bar {
  flex: 1;
  height: calc(4 * var(--rpx));
  border-radius: calc(99 * var(--rpx));
  background: var(--surface-3);
  overflow: hidden;
}

.word-row__mastery-bar div {
  height: 100%;
  border-radius: inherit;
  background: var(--forest);
}

.word-row__mastery span {
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: calc(14 * var(--rpx));
}

.word-row__side {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--rpx));
  flex: 0 0 auto;
}

.word-row__fav {
  padding: calc(8 * var(--rpx));
  color: var(--muted);
  font-size: calc(30 * var(--rpx));
}

.word-row__fav.is-fav {
  color: var(--coral);
}

.word-row__arrow {
  color: var(--muted);
  font-size: calc(32 * var(--rpx));
}

.library-more {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(84 * var(--rpx));
  margin-top: calc(14 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(16 * var(--rpx));
  color: var(--ink-2);
  font-size: calc(20 * var(--rpx));
  font-weight: 700;
}

.library-end {
  padding: calc(26 * var(--rpx)) 0;
  color: var(--muted);
  text-align: center;
  font-size: calc(17 * var(--rpx));
}


/* ===== pages/quiz/quiz.wxss ===== */
.quiz__best {
  font-family: Georgia, serif;
  font-size: calc(22 * var(--rpx));
  color: var(--muted);
}

.quiz-intro {
  position: relative;
  overflow: hidden;
  padding: calc(28 * var(--rpx)) calc(26 * var(--rpx));
  border-radius: calc(36 * var(--rpx));
  background:
    radial-gradient(circle at 78% 22%, rgba(221, 246, 95, 0.14), transparent 33%),
    linear-gradient(150deg, #173d2b, #0d261a 88%);
  color: #f6f3e7;
}

.quiz-intro__ring {
  position: absolute;
  width: calc(360 * var(--rpx));
  height: calc(360 * var(--rpx));
  right: calc(-160 * var(--rpx));
  top: calc(50 * var(--rpx));
  border: calc(1 * var(--rpx)) dashed rgba(255, 255, 255, 0.16);
  border-radius: 50%;
}

.quiz-intro__title {
  position: relative;
  z-index: 1;
  margin-top: calc(22 * var(--rpx));
  font-size: calc(48 * var(--rpx));
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: calc(-2 * var(--rpx));
}

.quiz-intro__title .display {
  display: inline;
  font-size: calc(52 * var(--rpx));
  font-style: italic;
  color: var(--lime);
}

.quiz-intro__desc {
  position: relative;
  z-index: 1;
  margin-top: calc(14 * var(--rpx));
  color: rgba(246, 243, 231, 0.5);
  font-size: calc(21 * var(--rpx));
  line-height: 1.55;
}

.quiz-intro__types {
  position: relative;
  z-index: 1;
  display: flex;
  gap: calc(10 * var(--rpx));
  margin-top: calc(22 * var(--rpx));
}

.quiz-intro__types span {
  padding: calc(8 * var(--rpx)) calc(12 * var(--rpx));
  border-radius: calc(8 * var(--rpx));
  background: rgba(255, 255, 255, 0.06);
  color: rgba(246, 243, 231, 0.58);
  font-size: calc(16 * var(--rpx));
}

.quiz-setup {
  margin-top: calc(16 * var(--rpx));
  padding: calc(24 * var(--rpx));
}

.quiz-field {
  margin-top: calc(22 * var(--rpx));
}

.quiz-bank-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--rpx));
  margin-top: calc(10 * var(--rpx));
}

.quiz-bank {
  padding: calc(10 * var(--rpx)) calc(16 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(10 * var(--rpx));
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: calc(19 * var(--rpx));
}

.quiz-bank.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.quiz-lengths {
  display: flex;
  gap: calc(8 * var(--rpx));
  margin-top: calc(10 * var(--rpx));
}

.quiz-length {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(64 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(10 * var(--rpx));
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: calc(20 * var(--rpx));
  font-weight: 700;
}

.quiz-length.is-active {
  background: var(--lime);
  border-color: var(--lime);
  color: #18250d;
}

.quiz-summary {
  display: flex;
  margin-top: calc(20 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(12 * var(--rpx));
  overflow: hidden;
}

.quiz-summary div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--rpx));
  padding: calc(14 * var(--rpx)) calc(16 * var(--rpx));
  background: var(--surface-2);
  border-right: calc(1 * var(--rpx)) solid var(--line);
}

.quiz-summary div:last-child {
  border-right: 0;
}

.quiz-summary span:first-child {
  color: var(--muted);
  font-size: calc(16 * var(--rpx));
}

.quiz-summary span:last-child {
  font-family: Georgia, serif;
  font-size: calc(24 * var(--rpx));
}

.quiz-start {
  margin-top: calc(20 * var(--rpx));
}

.quiz-fine {
  margin-top: calc(12 * var(--rpx));
  color: var(--muted);
  text-align: center;
  font-size: calc(16 * var(--rpx));
}

.quiz-history {
  margin-top: calc(30 * var(--rpx));
}

.quiz-history__list {
  margin-top: calc(12 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid var(--line);
}

.quiz-history__item {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--rpx));
  height: calc(68 * var(--rpx));
  border-bottom: calc(1 * var(--rpx)) solid var(--line);
}

.quiz-history__bar {
  flex: 1;
  height: calc(4 * var(--rpx));
  border-radius: calc(99 * var(--rpx));
  background: var(--surface-3);
  overflow: hidden;
}

.quiz-history__bar div {
  height: 100%;
  background: var(--forest);
}

.quiz-history__percent {
  width: calc(56 * var(--rpx));
  font-family: Georgia, serif;
  font-size: calc(20 * var(--rpx));
}

.quiz-history__date {
  width: calc(66 * var(--rpx));
  color: var(--muted);
  font-size: calc(16 * var(--rpx));
}

.quiz-history__xp {
  width: calc(74 * var(--rpx));
  color: var(--ink-3);
  text-align: right;
  font-family: Georgia, serif;
  font-size: calc(16 * var(--rpx));
}

.quiz-history__empty {
  margin-top: calc(12 * var(--rpx));
  padding: calc(22 * var(--rpx));
  border: calc(1 * var(--rpx)) dashed var(--line);
  border-radius: calc(14 * var(--rpx));
  color: var(--muted);
  font-size: calc(19 * var(--rpx));
  line-height: 1.55;
}

/* play */

.quiz-play {
  padding-top: calc(12 * var(--rpx));
}

.quiz-play__top {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--rpx));
  padding: calc(10 * var(--rpx)) 0 calc(6 * var(--rpx));
}

.quiz-play__exit {
  color: var(--ink-3);
  font-size: calc(20 * var(--rpx));
  font-weight: 700;
}

.quiz-play__progress {
  flex: 1;
  height: calc(5 * var(--rpx));
  border-radius: calc(99 * var(--rpx));
  background: var(--surface-3);
  overflow: hidden;
}

.quiz-play__progress div {
  height: 100%;
  background: var(--forest);
}

.quiz-play__meta {
  display: flex;
  gap: calc(14 * var(--rpx));
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: calc(19 * var(--rpx));
}

.quiz-play__timer {
  margin-top: calc(14 * var(--rpx));
  color: var(--muted);
  text-align: right;
  font-family: Georgia, serif;
  font-size: calc(20 * var(--rpx));
}

.quiz-question {
  margin-top: calc(10 * var(--rpx));
}

.quiz-kind {
  display: inline-flex;
  padding: calc(7 * var(--rpx)) calc(12 * var(--rpx));
  border-radius: calc(7 * var(--rpx));
  background: var(--lime-soft);
  color: #3a4813;
  font-size: calc(16 * var(--rpx));
  font-weight: 800;
}

.quiz-word {
  margin-top: calc(18 * var(--rpx));
  font-size: calc(86 * var(--rpx));
  line-height: 0.95;
  word-break: break-all;
}

.quiz-prompt-sentence {
  margin-top: calc(20 * var(--rpx));
  font-family: Georgia, serif;
  font-size: calc(48 * var(--rpx));
  line-height: 1.2;
}

.quiz-cloze {
  margin-top: calc(20 * var(--rpx));
  font-family: Georgia, serif;
  font-size: calc(36 * var(--rpx));
  line-height: 1.45;
}

.quiz-phonetic {
  margin-top: calc(10 * var(--rpx));
  color: var(--ink-3);
  font-family: Georgia, serif;
  font-size: calc(22 * var(--rpx));
}

.quiz-subprompt {
  margin-top: calc(10 * var(--rpx));
  color: var(--ink-3);
  font-size: calc(20 * var(--rpx));
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--rpx));
  margin-top: calc(24 * var(--rpx));
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--rpx));
  min-height: calc(96 * var(--rpx));
  padding: calc(14 * var(--rpx)) calc(18 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(18 * var(--rpx));
  background: var(--surface);
}

.quiz-option__key {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(42 * var(--rpx));
  height: calc(42 * var(--rpx));
  flex: 0 0 auto;
  border-radius: calc(9 * var(--rpx));
  background: var(--surface-2);
  color: var(--muted);
  font-size: calc(16 * var(--rpx));
  font-weight: 800;
}

.quiz-option__text {
  flex: 1;
  font-size: calc(23 * var(--rpx));
  font-weight: 600;
  line-height: 1.4;
}

.quiz-option__mark {
  font-size: calc(28 * var(--rpx));
  font-weight: 800;
}

.quiz-option.is-correct {
  border-color: var(--success);
  background: var(--success-soft);
  color: var(--success);
}

.quiz-option.is-correct .quiz-option__key {
  background: var(--success);
  color: #fff;
}

.quiz-option.is-wrong {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
}

.quiz-option.is-wrong .quiz-option__key {
  background: var(--danger);
  color: #fff;
}

.quiz-feedback {
  margin-top: calc(16 * var(--rpx));
  padding: calc(16 * var(--rpx));
  border-radius: calc(16 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
}

.quiz-feedback.is-correct {
  background: var(--success-soft);
}

.quiz-feedback.is-wrong {
  background: var(--danger-soft);
}

.quiz-feedback__head {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--rpx));
}

.quiz-feedback__title {
  font-size: calc(22 * var(--rpx));
  font-weight: 800;
}

.quiz-feedback.is-correct .quiz-feedback__title {
  color: var(--success);
}

.quiz-feedback.is-wrong .quiz-feedback__title {
  color: var(--danger);
}

.quiz-feedback__xp {
  flex: 1;
  color: var(--ink-3);
  font-size: calc(17 * var(--rpx));
}

.quiz-feedback__head .btn {
  height: calc(58 * var(--rpx));
  padding: 0 calc(18 * var(--rpx));
  font-size: calc(18 * var(--rpx));
}

.quiz-feedback__example {
  margin-top: calc(12 * var(--rpx));
  padding-top: calc(12 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid var(--line);
}

.quiz-feedback__example span {
  display: block;
  font-family: Georgia, serif;
  font-size: calc(20 * var(--rpx));
  line-height: 1.5;
}

.quiz-feedback__example span:last-child {
  margin-top: calc(4 * var(--rpx));
  color: var(--muted);
  font-family: inherit;
  font-size: calc(17 * var(--rpx));
}

/* result */

.quiz-result {
  padding: calc(26 * var(--rpx)) 0;
}

.quiz-result__eyebrow {
  color: var(--muted);
}

.quiz-result__main {
  display: flex;
  align-items: center;
  gap: calc(24 * var(--rpx));
  margin-top: calc(24 * var(--rpx));
}

.quiz-result__ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(220 * var(--rpx));
  height: calc(220 * var(--rpx));
  flex: 0 0 auto;
  border-radius: 50%;
}

.quiz-result__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(188 * var(--rpx));
  height: calc(188 * var(--rpx));
  border-radius: 50%;
  background: var(--paper);
}

.quiz-result__inner span:first-child {
  font-family: Georgia, serif;
  font-size: calc(64 * var(--rpx));
  line-height: 1;
}

.quiz-result__inner span:last-child {
  margin-top: calc(5 * var(--rpx));
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: calc(20 * var(--rpx));
}

.quiz-result__copy {
  flex: 1;
  min-width: 0;
}

.quiz-result__title {
  font-size: calc(38 * var(--rpx));
  font-weight: 800;
  line-height: 1.12;
}

.quiz-result__desc {
  margin-top: calc(10 * var(--rpx));
  color: var(--ink-3);
  font-size: calc(20 * var(--rpx));
  line-height: 1.55;
}

.quiz-result__meta {
  margin-top: calc(12 * var(--rpx));
  color: var(--forest);
  font-family: Georgia, serif;
  font-size: calc(20 * var(--rpx));
}

.quiz-result__wrong {
  margin-top: calc(24 * var(--rpx));
  padding-top: calc(18 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid var(--line);
}

.quiz-result__wrong-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--rpx));
  margin-top: calc(12 * var(--rpx));
}

.wrong-item {
  display: flex;
  align-items: baseline;
  gap: calc(7 * var(--rpx));
  padding: calc(9 * var(--rpx)) calc(12 * var(--rpx));
  border-radius: calc(8 * var(--rpx));
  background: var(--surface-2);
}

.wrong-item span:first-child {
  font-size: calc(23 * var(--rpx));
}

.wrong-item span:nth-child(2) {
  color: var(--muted);
  font-size: calc(16 * var(--rpx));
}

.wrong-item span:last-child {
  color: var(--muted);
  font-size: calc(22 * var(--rpx));
}

.quiz-result__perfect {
  margin-top: calc(24 * var(--rpx));
  padding: calc(18 * var(--rpx));
  border-radius: calc(14 * var(--rpx));
  background: var(--lime-soft);
  color: #3a4813;
  font-size: calc(20 * var(--rpx));
}

.quiz-result__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(10 * var(--rpx));
  margin-top: calc(24 * var(--rpx));
}

.quiz-result__actions .btn {
  height: calc(80 * var(--rpx));
  font-size: calc(21 * var(--rpx));
}

.quiz-result__ghost {
  background: var(--surface);
  color: var(--ink);
  border: calc(1 * var(--rpx)) solid var(--line);
}

.quiz-result__actions .text-link {
  margin-left: auto;
  font-size: calc(19 * var(--rpx));
}

.quiz-result__link {
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: calc(4 * var(--rpx));
}


/* ===== pages/profile/profile.wxss ===== */
.profile__nav-actions {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--rpx));
}

.profile__copy {
  height: calc(56 * var(--rpx));
  padding: 0 calc(16 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(999 * var(--rpx));
  color: var(--ink-3);
  font-size: calc(18 * var(--rpx));
  line-height: calc(56 * var(--rpx));
}

.profile-hero {
  position: relative;
  overflow: hidden;
  padding: calc(26 * var(--rpx)) calc(24 * var(--rpx)) calc(22 * var(--rpx));
  border-radius: calc(36 * var(--rpx));
  background:
    radial-gradient(circle at 88% 0%, rgba(221, 246, 95, 0.14), transparent 35%),
    linear-gradient(145deg, #173d2b, #0b2317 88%);
  color: #f7f4e8;
}

.profile-hero__ring {
  position: absolute;
  width: calc(360 * var(--rpx));
  height: calc(360 * var(--rpx));
  right: calc(-170 * var(--rpx));
  bottom: calc(-190 * var(--rpx));
  border: calc(1 * var(--rpx)) solid rgba(221, 246, 95, 0.14);
  border-radius: 50%;
}

.profile-hero .eyebrow {
  color: rgba(247, 244, 232, 0.42);
  font-size: calc(15 * var(--rpx));
}

.profile-hero__id {
  color: rgba(247, 244, 232, 0.3);
  font-family: Georgia, serif;
  font-size: calc(14 * var(--rpx));
}

.profile-hero__main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: calc(16 * var(--rpx));
  margin-top: calc(24 * var(--rpx));
}

.profile-hero__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(96 * var(--rpx));
  height: calc(96 * var(--rpx));
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--lime);
  color: #16250e;
  font-size: calc(40 * var(--rpx));
  font-weight: 800;
}

.profile-hero__identity {
  flex: 1;
  min-width: 0;
}

.profile-hero__name {
  font-size: calc(42 * var(--rpx));
  font-weight: 800;
  line-height: 1.1;
}

.profile-hero__target {
  margin-top: calc(4 * var(--rpx));
  color: rgba(247, 244, 232, 0.46);
  font-size: calc(18 * var(--rpx));
}

.profile-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--rpx));
  margin-top: calc(10 * var(--rpx));
}

.profile-hero__tags span {
  padding: calc(5 * var(--rpx)) calc(9 * var(--rpx));
  border-radius: calc(6 * var(--rpx));
  background: rgba(255, 255, 255, 0.06);
  color: rgba(247, 244, 232, 0.5);
  font-size: calc(15 * var(--rpx));
}

.profile-hero__level {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 0 0 auto;
}

.profile-hero__level span:first-child {
  color: var(--lime);
  font-family: Georgia, serif;
  font-size: calc(38 * var(--rpx));
  line-height: 1;
}

.profile-hero__level span:last-child {
  margin-top: calc(3 * var(--rpx));
  color: rgba(247, 244, 232, 0.36);
  font-size: calc(15 * var(--rpx));
}

.profile-hero__bar {
  position: relative;
  z-index: 1;
  height: calc(5 * var(--rpx));
  margin-top: calc(24 * var(--rpx));
  border-radius: calc(99 * var(--rpx));
  background: rgba(255, 255, 255, 0.11);
  overflow: hidden;
}

.profile-hero__bar div {
  height: 100%;
  background: var(--lime);
}

.profile-hero__stats {
  position: relative;
  z-index: 1;
  display: flex;
  gap: calc(12 * var(--rpx));
  margin-top: calc(20 * var(--rpx));
}

.profile-hero__stats div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--rpx));
}

.profile-hero__stats span:first-child {
  color: rgba(247, 244, 232, 0.36);
  font-size: calc(15 * var(--rpx));
}

.profile-hero__stats span:last-child {
  color: rgba(247, 244, 232, 0.8);
  font-family: Georgia, serif;
  font-size: calc(22 * var(--rpx));
}

.profile-kpis {
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(14 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(24 * var(--rpx));
  overflow: hidden;
  background: var(--surface);
}

.profile-kpi {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--rpx));
  width: 50%;
  padding: calc(20 * var(--rpx));
  border-bottom: calc(1 * var(--rpx)) solid var(--line);
  border-right: calc(1 * var(--rpx)) solid var(--line);
}

.profile-kpi:nth-child(2n) {
  border-right: 0;
}

.profile-kpi:nth-child(3),
.profile-kpi:nth-child(4) {
  border-bottom: 0;
}

.profile-kpi .eyebrow {
  font-size: calc(14 * var(--rpx));
  letter-spacing: calc(1 * var(--rpx));
}

.profile-kpi__num {
  margin-top: calc(6 * var(--rpx));
  font-family: Georgia, serif;
  font-size: calc(50 * var(--rpx));
  line-height: 1;
}

.profile-kpi__small {
  font-size: calc(20 * var(--rpx));
  color: var(--ink-3);
}

.profile-kpi__label {
  color: var(--muted);
  font-size: calc(16 * var(--rpx));
}

.profile-card {
  margin-top: calc(14 * var(--rpx));
  padding: calc(24 * var(--rpx));
}

.profile-card__title {
  margin-top: calc(8 * var(--rpx));
  font-size: calc(31 * var(--rpx));
  font-weight: 800;
  line-height: 1.12;
}

.profile-card__active {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 0 0 auto;
}

.profile-card__active span:first-child {
  font-family: Georgia, serif;
  font-size: calc(50 * var(--rpx));
  line-height: 0.9;
}

.profile-card__active span:last-child {
  color: var(--muted);
  font-size: calc(15 * var(--rpx));
}

.heatmap {
  display: flex;
  gap: calc(8 * var(--rpx));
  margin-top: calc(24 * var(--rpx));
  overflow-x: auto;
}

.heatmap__weekdays {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--rpx));
  padding-top: 0;
  flex: 0 0 auto;
}

.heatmap__weekdays span {
  height: calc(24 * var(--rpx));
  color: var(--muted);
  font-size: calc(12 * var(--rpx));
  line-height: calc(24 * var(--rpx));
}

.heatmap__cols {
  display: flex;
  gap: calc(4 * var(--rpx));
  flex: 1;
  min-width: 0;
}

.heatmap__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--rpx));
}

.heatmap__cell {
  width: 100%;
  height: calc(24 * var(--rpx));
  border-radius: calc(5 * var(--rpx));
  background: var(--surface-3);
}

.heatmap__cell--1 { background: #d4ddc7; }
.heatmap__cell--2 { background: #a7bd9a; }
.heatmap__cell--3 { background: #6b9574; }
.heatmap__cell--4 { background: var(--forest); }
.heatmap__cell.is-today { box-shadow: 0 0 0 calc(2 * var(--rpx)) var(--ink); }
.heatmap__cell.is-future { opacity: 0.25; }

.heatmap__legend {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--rpx));
  margin-top: calc(14 * var(--rpx));
  color: var(--muted);
  font-size: calc(14 * var(--rpx));
}

.heatmap__legend-cell {
  width: calc(16 * var(--rpx));
  height: calc(16 * var(--rpx));
  border-radius: calc(4 * var(--rpx));
}

.heatmap__legend-cell--1 { background: #d4ddc7; }
.heatmap__legend-cell--2 { background: #a7bd9a; }
.heatmap__legend-cell--3 { background: #6b9574; }
.heatmap__legend-cell--4 { background: var(--forest); }

.profile-grid {
  display: flex;
  gap: calc(12 * var(--rpx));
  margin-top: calc(14 * var(--rpx));
}

.profile-week {
  flex: 1.25;
  min-width: 0;
  padding: calc(22 * var(--rpx));
}

.profile-week__total {
  display: flex;
  align-items: baseline;
  gap: calc(6 * var(--rpx));
  margin-top: calc(16 * var(--rpx));
}

.profile-week__total span:first-child {
  font-family: Georgia, serif;
  font-size: calc(56 * var(--rpx));
  line-height: 0.9;
}

.profile-week__total span:last-child {
  color: var(--muted);
  font-size: calc(16 * var(--rpx));
}

.profile-week__chart {
  display: flex;
  align-items: flex-end;
  gap: calc(6 * var(--rpx));
  height: calc(132 * var(--rpx));
  margin-top: calc(14 * var(--rpx));
}

.profile-week__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: calc(5 * var(--rpx));
}

.profile-week__col > span:first-child {
  color: var(--muted);
  font-size: calc(13 * var(--rpx));
}

.profile-week__col > div {
  width: 100%;
  max-width: calc(22 * var(--rpx));
  min-height: calc(5 * var(--rpx));
  border-radius: calc(5 * var(--rpx));
  background: var(--forest);
}

.profile-week__col > span:last-child {
  color: var(--muted);
  font-size: calc(13 * var(--rpx));
}

.profile-week__foot {
  display: flex;
  justify-content: space-between;
  gap: calc(10 * var(--rpx));
  margin-top: calc(12 * var(--rpx));
  padding-top: calc(12 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid var(--line);
  color: var(--muted);
  font-size: calc(14 * var(--rpx));
}

.profile-due {
  flex: 0.75;
  min-width: 0;
  padding: calc(22 * var(--rpx));
}

.profile-due .eyebrow {
  font-size: calc(14 * var(--rpx));
}

.profile-due__num {
  margin-top: calc(20 * var(--rpx));
  color: var(--coral);
  font-family: Georgia, serif;
  font-size: calc(74 * var(--rpx));
  line-height: 0.85;
}

.profile-due__label {
  margin-top: calc(8 * var(--rpx));
  color: var(--ink-3);
  font-size: calc(17 * var(--rpx));
  line-height: 1.4;
}

.profile-due__cta {
  margin-top: calc(22 * var(--rpx));
  color: var(--ink-2);
  font-size: calc(17 * var(--rpx));
  font-weight: 700;
}

.profile-achievements {
  margin-top: calc(14 * var(--rpx));
  padding: calc(24 * var(--rpx));
}

.achievement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(8 * var(--rpx));
  margin-top: calc(16 * var(--rpx));
}

.achievement {
  display: flex;
  align-items: flex-start;
  gap: calc(10 * var(--rpx));
  width: auto;
  min-width: 0;
  padding: calc(14 * var(--rpx));
  border: calc(1 * var(--rpx)) dashed var(--line);
  border-radius: calc(14 * var(--rpx));
  opacity: 0.6;
  overflow: hidden;
}

.achievement.is-done {
  opacity: 1;
  border-style: solid;
  background: var(--surface-2);
}

.achievement__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(42 * var(--rpx));
  height: calc(42 * var(--rpx));
  flex: 0 0 auto;
  border-radius: calc(10 * var(--rpx));
  background: var(--surface-3);
  color: var(--muted);
  font-size: calc(20 * var(--rpx));
  font-weight: 800;
}

.achievement.is-done .achievement__mark {
  background: var(--lime);
  color: #1a2911;
}

.achievement__body {
  flex: 1;
  min-width: 0;
}

.achievement__name {
  display: block;
  font-size: calc(19 * var(--rpx));
  font-weight: 800;
}

.achievement__desc {
  display: block;
  margin-top: calc(2 * var(--rpx));
  color: var(--muted);
  font-size: calc(15 * var(--rpx));
  line-height: 1.35;
}

.achievement__bar {
  height: calc(3 * var(--rpx));
  margin-top: calc(8 * var(--rpx));
  border-radius: calc(99 * var(--rpx));
  background: var(--surface-3);
  overflow: hidden;
}

.achievement__bar div {
  height: 100%;
  background: var(--forest);
}

.achievement__hint {
  max-width: calc(92 * var(--rpx));
  color: var(--muted);
  font-size: calc(13 * var(--rpx));
  line-height: 1.25;
  text-align: right;
  word-break: break-all;
}

.achievement.is-done .achievement__hint {
  color: var(--success);
}

.profile-banks {
  margin-top: calc(28 * var(--rpx));
}

.profile-banks__list {
  margin-top: calc(12 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid var(--line);
}

.profile-bank {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--rpx));
  padding: calc(16 * var(--rpx)) 0;
  border-bottom: calc(1 * var(--rpx)) solid var(--line);
}

.profile-bank__code {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(58 * var(--rpx));
  height: calc(58 * var(--rpx));
  flex: 0 0 auto;
  border-radius: calc(12 * var(--rpx));
  color: #fff;
  font-family: Georgia, serif;
  font-size: calc(14 * var(--rpx));
}

.profile-bank__body {
  flex: 1;
  min-width: 0;
}

.profile-bank__body .progress {
  height: calc(4 * var(--rpx));
  margin-top: calc(7 * var(--rpx));
}

.profile-bank__body .row-between span {
  font-size: calc(19 * var(--rpx));
}

.profile-bank__body .row-between span:last-child {
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: calc(16 * var(--rpx));
}

.profile-bank__ratio {
  width: calc(58 * var(--rpx));
  color: var(--ink-3);
  text-align: right;
  font-family: Georgia, serif;
  font-size: calc(18 * var(--rpx));
}

.profile-links {
  margin-top: calc(26 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid var(--line);
}

.profile-links div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(84 * var(--rpx));
  border-bottom: calc(1 * var(--rpx)) solid var(--line);
  color: var(--ink-2);
  font-size: calc(21 * var(--rpx));
}

.profile-links div span:last-child {
  color: var(--muted);
  font-size: calc(28 * var(--rpx));
}

.profile-shells {
  margin-top: calc(14 * var(--rpx));
  padding: calc(24 * var(--rpx));
}

.profile-shells__count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 0 0 auto;
}

.profile-shells__count span:first-child {
  color: var(--coral);
  font-family: Georgia, serif;
  font-size: calc(42 * var(--rpx));
  line-height: 0.9;
}

.profile-shells__count span:last-child {
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: calc(15 * var(--rpx));
}

.shell-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(8 * var(--rpx));
  margin-top: calc(18 * var(--rpx));
}

.shell-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  min-width: 0;
  padding: calc(12 * var(--rpx)) calc(4 * var(--rpx)) calc(10 * var(--rpx));
  border: calc(1 * var(--rpx)) dashed var(--line);
  border-radius: calc(12 * var(--rpx));
  opacity: 0.55;
}

.shell-cell.is-earned {
  opacity: 1;
  border-style: solid;
  background: var(--surface-2);
}

.shell-cell__shell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(62 * var(--rpx));
  height: calc(62 * var(--rpx));
  border-radius: 50% 50% 44% 44%;
  font-size: calc(30 * var(--rpx));
  box-shadow: inset 0 calc(-6 * var(--rpx)) calc(10 * var(--rpx)) rgba(0, 0, 0, 0.12);
}

.shell-cell:not(.is-earned) .shell-cell__shell {
  filter: grayscale(1);
}

.shell-cell__name {
  margin-top: calc(7 * var(--rpx));
  font-size: calc(17 * var(--rpx));
  font-weight: 800;
  white-space: nowrap;
}

.shell-cell__hint {
  margin-top: calc(2 * var(--rpx));
  color: var(--muted);
  font-size: calc(12 * var(--rpx));
  white-space: nowrap;
}

.shell-cell.is-earned .shell-cell__hint {
  color: var(--success);
}


/* ===== pages/session/session.wxss ===== */
.session {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
}

.session__top {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 50;
  background: rgba(241, 238, 228, 0.95);
  border-bottom: calc(1 * var(--rpx)) solid var(--line);
}

.session__top-inner {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--rpx));
  height: calc(88 * var(--rpx));
  padding: 0 calc(22 * var(--rpx));
  padding-right: calc(168 * var(--rpx));
}

.session__exit {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--rpx));
  min-width: calc(92 * var(--rpx));
  color: var(--ink-3);
  font-size: calc(21 * var(--rpx));
  font-weight: 700;
}

.session__chev {
  font-size: calc(42 * var(--rpx));
  line-height: 1;
}

.session__exit-label {
  display: none;
}

.session__progress-wrap {
  flex: 1;
  min-width: 0;
}

.session__progress {
  height: calc(6 * var(--rpx));
  border-radius: calc(99 * var(--rpx));
  background: rgba(21, 25, 21, 0.14);
  overflow: hidden;
}

.session__progress div {
  height: 100%;
  border-radius: inherit;
  background: var(--forest);
  transition: width 0.35s ease;
}

.session__progress-meta {
  display: flex;
  justify-content: space-between;
  gap: calc(12 * var(--rpx));
  margin-top: calc(6 * var(--rpx));
  color: var(--muted);
  font-size: calc(15 * var(--rpx));
  white-space: nowrap;
  overflow: hidden;
}

.session__progress-meta span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.session__progress-meta span:first-child {
  font-family: Georgia, serif;
  font-size: calc(18 * var(--rpx));
  color: var(--ink-2);
}

.session__tools {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--rpx));
  min-width: calc(60 * var(--rpx));
  justify-content: flex-end;
}

.session__xp {
  font-family: Georgia, serif;
  font-size: calc(18 * var(--rpx));
  color: var(--ink-3);
}

.session__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(58 * var(--rpx));
  height: calc(58 * var(--rpx));
  border-radius: 50%;
  color: var(--ink-2);
  font-size: calc(40 * var(--rpx));
  line-height: 1;
}

.session__body {
  padding-bottom: calc(30 * var(--rpx));
}

.session-art {
  position: relative;
  height: calc(480 * var(--rpx));
  margin: calc(16 * var(--rpx)) calc(20 * var(--rpx)) 0;
  border-radius: calc(30 * var(--rpx));
  overflow: hidden;
  color: #f9f7ed;
}

.session-art__icon-wrap {
  position: absolute;
  left: 50%;
  top: 46%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(200 * var(--rpx));
  height: calc(200 * var(--rpx));
  margin: calc(-100 * var(--rpx)) 0 0 calc(-100 * var(--rpx));
  border: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.session-art__icon {
  width: calc(96 * var(--rpx));
  height: calc(96 * var(--rpx));
}

.session-art__orbit {
  position: absolute;
  left: calc(-32 * var(--rpx));
  top: calc(-32 * var(--rpx));
  width: calc(264 * var(--rpx));
  height: calc(264 * var(--rpx));
  border: calc(1 * var(--rpx)) dashed rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}

.session-art__word {
  position: absolute;
  left: calc(26 * var(--rpx));
  right: calc(26 * var(--rpx));
  bottom: calc(56 * var(--rpx));
  font-size: calc(88 * var(--rpx));
  line-height: 0.92;
  word-break: break-all;
}

.session-art__meta {
  position: absolute;
  left: calc(24 * var(--rpx));
  right: calc(24 * var(--rpx));
  bottom: calc(20 * var(--rpx));
  display: flex;
  justify-content: space-between;
  gap: calc(16 * var(--rpx));
  color: rgba(255, 255, 255, 0.42);
  font-size: calc(14 * var(--rpx));
  font-weight: 800;
  letter-spacing: calc(1 * var(--rpx));
}

.session-art__meta span:last-child {
  max-width: calc(380 * var(--rpx));
  text-align: right;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
}

.session-panel {
  padding: calc(22 * var(--rpx)) calc(28 * var(--rpx)) 0;
}

.session-steps {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--rpx));
  padding-bottom: calc(18 * var(--rpx));
  border-bottom: calc(1 * var(--rpx)) solid var(--line);
}

.session-step {
  display: flex;
  align-items: center;
  gap: calc(7 * var(--rpx));
  color: var(--muted);
  font-size: calc(17 * var(--rpx));
  font-weight: 700;
}

.session-step__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(32 * var(--rpx));
  height: calc(32 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: calc(13 * var(--rpx));
  color: var(--muted);
}

.session-step.is-done {
  color: var(--ink-3);
}

.session-step.is-done .session-step__dot {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--lime);
}

.session-step.is-active {
  color: var(--ink);
}

.session-step.is-active .session-step__dot {
  border-color: var(--ink);
  color: var(--ink);
}

.phase {
  padding-top: calc(26 * var(--rpx));
  animation: phaseIn 0.25s ease both;
}

.phase-hint {
  margin-top: calc(24 * var(--rpx));
  color: var(--muted);
  font-size: calc(18 * var(--rpx));
}

/* recall */

.recall-phonetic {
  display: flex;
  flex-wrap: wrap;
  gap: calc(22 * var(--rpx));
  margin-top: calc(34 * var(--rpx));
  font-family: Georgia, serif;
  font-size: calc(24 * var(--rpx));
  color: var(--ink-3);
}

.recall-lede {
  margin-top: calc(16 * var(--rpx));
  color: var(--ink-3);
  font-size: calc(22 * var(--rpx));
}

.recall-actions {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--rpx));
  margin-top: calc(32 * var(--rpx));
}

.recall-btn {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--rpx));
  min-height: calc(118 * var(--rpx));
  padding: calc(18 * var(--rpx)) calc(20 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(22 * var(--rpx));
  background: var(--surface);
}

.recall-btn--known {
  background: var(--lime-soft);
  border-color: rgba(193, 220, 67, 0.7);
}

.recall-btn__key {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(42 * var(--rpx));
  height: calc(42 * var(--rpx));
  flex: 0 0 auto;
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(10 * var(--rpx));
  font-size: calc(16 * var(--rpx));
  font-weight: 800;
  color: var(--muted);
}

.recall-btn__copy {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--rpx));
  flex: 1;
}

.recall-btn__title {
  font-size: calc(25 * var(--rpx));
  font-weight: 800;
}

.recall-btn__desc {
  color: var(--ink-3);
  font-size: calc(18 * var(--rpx));
}

.recall-btn__arrow {
  color: var(--muted);
  font-size: calc(32 * var(--rpx));
}

/* check */

.check-prompt {
  margin-top: calc(14 * var(--rpx));
  color: var(--ink-3);
  font-size: calc(22 * var(--rpx));
}

.choice-list {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--rpx));
  margin-top: calc(22 * var(--rpx));
}

.choice {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--rpx));
  min-height: calc(102 * var(--rpx));
  padding: calc(16 * var(--rpx)) calc(20 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(18 * var(--rpx));
  background: var(--surface);
}

.choice__key {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(44 * var(--rpx));
  height: calc(44 * var(--rpx));
  flex: 0 0 auto;
  border-radius: calc(10 * var(--rpx));
  background: var(--surface-2);
  color: var(--muted);
  font-size: calc(16 * var(--rpx));
  font-weight: 800;
}

.choice__text {
  flex: 1;
  font-size: calc(23 * var(--rpx));
  font-weight: 600;
  line-height: 1.45;
}

.choice__mark {
  font-size: calc(28 * var(--rpx));
  font-weight: 800;
}

.choice.is-correct {
  border-color: var(--success);
  background: var(--success-soft);
  color: var(--success);
}

.choice.is-correct .choice__key {
  background: var(--success);
  color: #fff;
}

.choice.is-wrong {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
}

.choice.is-wrong .choice__key {
  background: var(--danger);
  color: #fff;
}

.choice-feedback {
  margin-top: calc(16 * var(--rpx));
  padding: calc(14 * var(--rpx)) calc(16 * var(--rpx));
  border-radius: calc(14 * var(--rpx));
  font-size: calc(19 * var(--rpx));
  line-height: 1.5;
}

.choice-feedback.is-correct {
  background: var(--success-soft);
  color: var(--success);
}

.choice-feedback.is-wrong {
  background: var(--amber-soft);
  color: #7c5a17;
}

/* detail */

.detail-word {
  margin-top: calc(18 * var(--rpx));
}

.detail-word__word {
  display: block;
  font-size: calc(64 * var(--rpx));
  line-height: 0.96;
  word-break: break-all;
}

.detail-word__phonetic {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--rpx));
  margin-top: calc(10 * var(--rpx));
  color: var(--ink-3);
  font-family: Georgia, serif;
  font-size: calc(22 * var(--rpx));
}

.detail-meanings {
  margin-top: calc(20 * var(--rpx));
  padding: calc(16 * var(--rpx)) 0;
  border-top: calc(1 * var(--rpx)) solid var(--line);
  border-bottom: calc(1 * var(--rpx)) solid var(--line);
}

.detail-meaning {
  display: flex;
  align-items: baseline;
  gap: calc(10 * var(--rpx));
  padding: calc(5 * var(--rpx)) 0;
}

.detail-meaning__index {
  width: calc(24 * var(--rpx));
  flex: 0 0 auto;
  font-family: Georgia, serif;
  font-size: calc(15 * var(--rpx));
  color: var(--muted);
}

.detail-meaning__pos {
  font-family: Georgia, serif;
  font-size: calc(17 * var(--rpx));
  color: var(--ink-3);
}

.detail-meaning__text {
  flex: 1;
  font-size: calc(24 * var(--rpx));
  line-height: 1.45;
}

.detail-example {
  position: relative;
  margin-top: calc(18 * var(--rpx));
  padding: calc(16 * var(--rpx)) calc(18 * var(--rpx));
  border-left: calc(3 * var(--rpx)) solid var(--lime);
  border-radius: 0 calc(14 * var(--rpx)) calc(14 * var(--rpx)) 0;
  background: var(--surface-2);
}

.detail-example__quote {
  position: absolute;
  right: calc(14 * var(--rpx));
  top: calc(4 * var(--rpx));
  font-family: Georgia, serif;
  font-size: calc(48 * var(--rpx));
  line-height: 1;
  color: var(--line-strong);
}

.detail-example__text {
  display: block;
  padding-right: calc(26 * var(--rpx));
  font-family: Georgia, serif;
  font-size: calc(22 * var(--rpx));
  line-height: 1.55;
}

.detail-example__highlight {
  background: var(--lime);
  color: #15220f;
  padding: 0 calc(3 * var(--rpx));
  border-radius: calc(4 * var(--rpx));
}

.detail-example__zh {
  display: block;
  margin-top: calc(6 * var(--rpx));
  color: var(--ink-3);
  font-size: calc(18 * var(--rpx));
  line-height: 1.5;
}

.detail-morph {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--rpx));
  margin-top: calc(16 * var(--rpx));
}

.morph {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--rpx));
  padding: calc(10 * var(--rpx)) calc(14 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(12 * var(--rpx));
  background: var(--surface-2);
}

.morph__part {
  font-family: Georgia, serif;
  font-size: calc(22 * var(--rpx));
  color: var(--forest);
}

.morph__meaning {
  color: var(--ink-3);
  font-size: calc(16 * var(--rpx));
}

.detail-cta {
  margin-top: calc(24 * var(--rpx));
}

/* spell */

.spell-title {
  margin-top: calc(10 * var(--rpx));
  font-size: calc(46 * var(--rpx));
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: calc(-2 * var(--rpx));
}

.spell-title .display {
  display: inline;
  font-size: calc(48 * var(--rpx));
  font-style: italic;
  color: var(--forest);
}

.spell-meaning {
  margin-top: calc(14 * var(--rpx));
  color: var(--ink-2);
  font-size: calc(24 * var(--rpx));
}

.spell-cloze {
  margin-top: calc(16 * var(--rpx));
  padding: calc(14 * var(--rpx)) calc(16 * var(--rpx));
  border-radius: calc(12 * var(--rpx));
  background: var(--surface-2);
  color: var(--ink-3);
  font-family: Georgia, serif;
  font-size: calc(21 * var(--rpx));
  line-height: 1.55;
}

.spell-input {
  height: calc(100 * var(--rpx));
  margin-top: calc(28 * var(--rpx));
  padding: 0 calc(4 * var(--rpx));
  border-bottom: calc(3 * var(--rpx)) solid var(--line-strong);
  font-family: Georgia, serif;
  font-size: calc(52 * var(--rpx));
  letter-spacing: calc(5 * var(--rpx));
  color: var(--ink);
}

.spell-input.is-wrong {
  border-color: var(--danger);
}

.spell-input.is-correct {
  border-color: var(--success);
}

.spell-placeholder {
  color: var(--line-strong);
  letter-spacing: calc(2 * var(--rpx));
}

.spell-meta {
  display: flex;
  justify-content: space-between;
  gap: calc(12 * var(--rpx));
  margin-top: calc(12 * var(--rpx));
  color: var(--muted);
  font-size: calc(17 * var(--rpx));
}

.spell-answer {
  color: var(--ink-2);
  font-family: Georgia, serif;
  font-size: calc(22 * var(--rpx));
}

.spell-error {
  margin-top: calc(10 * var(--rpx));
  color: var(--danger);
  font-size: calc(18 * var(--rpx));
}

.spell-actions {
  display: flex;
  align-items: center;
  gap: calc(26 * var(--rpx));
  margin-top: calc(24 * var(--rpx));
}

/* rate */

.rate-head {
  margin-top: calc(12 * var(--rpx));
}

.rate-word {
  display: block;
  font-size: calc(64 * var(--rpx));
  line-height: 1;
  word-break: break-all;
}

.rate-meaning {
  display: block;
  margin-top: calc(8 * var(--rpx));
  color: var(--ink-3);
  font-size: calc(22 * var(--rpx));
}

.rate-summary {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--rpx));
  margin-top: calc(18 * var(--rpx));
}

.rate-chip {
  padding: calc(6 * var(--rpx)) calc(12 * var(--rpx));
  border-radius: calc(8 * var(--rpx));
  font-size: calc(17 * var(--rpx));
  font-weight: 700;
}

.rate-chip.is-ok {
  background: var(--success-soft);
  color: var(--success);
}

.rate-chip.is-warn {
  background: var(--amber-soft);
  color: #7c5a17;
}

.rate-prompt {
  margin-top: calc(22 * var(--rpx));
  padding-top: calc(16 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid var(--line);
  color: var(--ink-3);
  font-size: calc(20 * var(--rpx));
  line-height: 1.5;
}

.rating-list {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--rpx));
  margin-top: calc(16 * var(--rpx));
}

.rating-btn {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--rpx));
  min-height: calc(94 * var(--rpx));
  padding: calc(14 * var(--rpx)) calc(18 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(18 * var(--rpx));
  background: var(--surface);
}

.rating-btn.is-recommended {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 calc(1 * var(--rpx)) var(--ink);
}

.rating-btn__key {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(40 * var(--rpx));
  height: calc(40 * var(--rpx));
  flex: 0 0 auto;
  border-radius: calc(9 * var(--rpx));
  background: var(--surface-2);
  color: var(--muted);
  font-size: calc(16 * var(--rpx));
  font-weight: 800;
}

.rating-btn__copy {
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--rpx));
  flex: 1;
}

.rating-btn__name {
  font-size: calc(23 * var(--rpx));
  font-weight: 800;
}

.rating-btn__name--again { color: var(--danger); }
.rating-btn__name--hard { color: var(--amber); }
.rating-btn__name--good { color: var(--forest); }
.rating-btn__name--easy { color: var(--blue); }

.rating-btn__preview {
  color: var(--muted);
  font-size: calc(17 * var(--rpx));
}

.rating-btn__tag {
  padding: calc(4 * var(--rpx)) calc(9 * var(--rpx));
  border-radius: calc(6 * var(--rpx));
  background: var(--lime);
  color: #24310d;
  font-size: calc(14 * var(--rpx));
  font-weight: 800;
}

.session-panel__foot {
  display: flex;
  justify-content: space-between;
  gap: calc(14 * var(--rpx));
  margin-top: calc(28 * var(--rpx));
  padding: calc(18 * var(--rpx)) 0;
  border-top: calc(1 * var(--rpx)) solid var(--line);
  color: var(--muted);
  font-size: calc(17 * var(--rpx));
}

/* summary */

.session--summary {
  background: #0e291d;
}

.summary {
  min-height: 100vh;
  padding: calc(40 * var(--rpx)) calc(28 * var(--rpx)) calc(36 * var(--rpx));
  background:
    radial-gradient(circle at 15% 0%, rgba(221, 246, 95, 0.17), transparent 35%),
    radial-gradient(circle at 96% 82%, rgba(49, 85, 217, 0.2), transparent 35%),
    #0e291d;
  color: #f7f4e7;
}

.summary__top {
  display: flex;
  justify-content: space-between;
  gap: calc(16 * var(--rpx));
  padding: calc(30 * var(--rpx)) 0 calc(20 * var(--rpx));
  border-bottom: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.1);
}

.summary__eyebrow {
  color: rgba(247, 244, 231, 0.45);
  font-size: calc(16 * var(--rpx));
}

.summary__date {
  color: rgba(247, 244, 231, 0.32);
  font-family: Georgia, serif;
  font-size: calc(16 * var(--rpx));
}

.summary__hero {
  display: flex;
  align-items: center;
  gap: calc(26 * var(--rpx));
  padding: calc(32 * var(--rpx)) 0 calc(26 * var(--rpx));
}

.summary__ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(230 * var(--rpx));
  height: calc(230 * var(--rpx));
  flex: 0 0 auto;
  border-radius: 50%;
}

.summary__ring-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(198 * var(--rpx));
  height: calc(198 * var(--rpx));
  border-radius: 50%;
  background: #133626;
}

.summary__accuracy {
  font-family: Georgia, serif;
  font-size: calc(70 * var(--rpx));
  line-height: 0.9;
}

.summary__percent {
  font-size: calc(28 * var(--rpx));
}

.summary__ring-label {
  margin-top: calc(8 * var(--rpx));
  color: rgba(247, 244, 231, 0.42);
  font-size: calc(15 * var(--rpx));
  letter-spacing: calc(1 * var(--rpx));
}

.summary__copy {
  flex: 1;
  min-width: 0;
}

.summary__title {
  font-size: calc(38 * var(--rpx));
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: calc(-1 * var(--rpx));
}

.summary__desc {
  margin-top: calc(10 * var(--rpx));
  color: rgba(247, 244, 231, 0.48);
  font-size: calc(19 * var(--rpx));
  line-height: 1.55;
}

.summary__xp {
  margin-top: calc(12 * var(--rpx));
  color: var(--lime);
  font-family: Georgia, serif;
  font-size: calc(21 * var(--rpx));
}

.summary__stats {
  display: flex;
  border-top: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.1);
  border-bottom: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.1);
}

.summary__stats div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--rpx));
  padding: calc(16 * var(--rpx)) calc(10 * var(--rpx));
  border-right: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.1);
}

.summary__stats div:last-child {
  border-right: 0;
}

.summary__stats span:first-child {
  color: rgba(247, 244, 231, 0.38);
  font-size: calc(16 * var(--rpx));
}

.summary__stats span:nth-child(2) {
  font-family: Georgia, serif;
  font-size: calc(44 * var(--rpx));
  line-height: 1;
}

.summary__stats span:last-child {
  color: rgba(247, 244, 231, 0.38);
  font-size: calc(15 * var(--rpx));
}

.summary__weak {
  padding-top: calc(22 * var(--rpx));
}

.summary__weak-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--rpx));
  margin-top: calc(12 * var(--rpx));
}

.summary__weak-item {
  display: flex;
  align-items: baseline;
  gap: calc(7 * var(--rpx));
  padding: calc(8 * var(--rpx)) calc(12 * var(--rpx));
  border-radius: calc(8 * var(--rpx));
  background: rgba(255, 255, 255, 0.06);
}

.summary__weak-item span:first-child {
  font-family: Georgia, serif;
  font-size: calc(21 * var(--rpx));
}

.summary__weak-item span:last-child {
  color: rgba(247, 244, 231, 0.4);
  font-size: calc(16 * var(--rpx));
}

.summary__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(12 * var(--rpx));
  margin-top: calc(28 * var(--rpx));
}

.summary__actions .btn {
  height: calc(82 * var(--rpx));
  font-size: calc(22 * var(--rpx));
}

.summary__ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #f7f4e7;
  border: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.18);
}

.summary__actions .text-link {
  margin-left: auto;
  font-size: calc(19 * var(--rpx));
}

.summary__fine {
  margin-top: calc(22 * var(--rpx));
  color: rgba(247, 244, 231, 0.3);
  font-size: calc(16 * var(--rpx));
}

/* empty */

.session-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: calc(40 * var(--rpx));
  text-align: center;
}

.session-empty__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(120 * var(--rpx));
  height: calc(120 * var(--rpx));
  margin-bottom: calc(22 * var(--rpx));
  border-radius: 50%;
  background: var(--lime);
  color: #1a2911;
  font-size: calc(46 * var(--rpx));
  font-weight: 800;
}

.session-empty__title {
  margin-top: calc(14 * var(--rpx));
  font-size: calc(44 * var(--rpx));
  font-weight: 800;
  line-height: 1.12;
}

.session-empty__desc {
  max-width: calc(580 * var(--rpx));
  margin: calc(16 * var(--rpx)) 0 calc(28 * var(--rpx));
  color: var(--ink-3);
  font-size: calc(22 * var(--rpx));
  line-height: 1.6;
}

@keyframes phaseIn {
  from { opacity: 0; transform: translateY(calc(10 * var(--rpx))); }
  to { opacity: 1; transform: translateY(0); }
}

.session-thread {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--rpx));
  margin-top: calc(14 * var(--rpx));
  padding: calc(8 * var(--rpx)) calc(12 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(8 * var(--rpx));
  color: var(--ink-3);
  font-size: calc(16 * var(--rpx));
}

.session-thread span:first-child {
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: calc(12 * var(--rpx));
  letter-spacing: calc(1 * var(--rpx));
}

.summary__thread {
  display: inline-flex;
  margin-top: calc(10 * var(--rpx));
  padding: calc(5 * var(--rpx)) calc(10 * var(--rpx));
  border: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.16);
  border-radius: calc(6 * var(--rpx));
  color: rgba(247, 244, 231, 0.6);
  font-size: calc(15 * var(--rpx));
}


/* ===== pages/word/word.wxss ===== */
.word-page {
  padding-bottom: calc(30 * var(--rpx));
}

.word-nav__title {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--rpx));
  flex: 1;
}

.word-nav__title span:first-child {
  font-family: Georgia, serif;
  font-size: calc(19 * var(--rpx));
  color: var(--muted);
  letter-spacing: calc(1 * var(--rpx));
}

.word-nav__title span:last-child {
  font-size: calc(28 * var(--rpx));
  font-weight: 800;
}

.word-nav__actions {
  display: flex;
  align-items: center;
}

.word-nav__fav {
  padding: calc(8 * var(--rpx)) calc(12 * var(--rpx));
  color: var(--muted);
  font-size: calc(38 * var(--rpx));
}

.word-nav__fav.is-fav {
  color: var(--coral);
}

.word-art {
  position: relative;
  height: calc(430 * var(--rpx));
  margin-top: calc(14 * var(--rpx));
  border-radius: calc(30 * var(--rpx));
  overflow: hidden;
  color: #f9f7ed;
}

.word-art__icon-wrap {
  position: absolute;
  left: 50%;
  top: 44%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(190 * var(--rpx));
  height: calc(190 * var(--rpx));
  margin: calc(-95 * var(--rpx)) 0 0 calc(-95 * var(--rpx));
  border: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
}

.word-art__icon {
  width: calc(90 * var(--rpx));
  height: calc(90 * var(--rpx));
}

.word-art__orbit {
  position: absolute;
  left: calc(-30 * var(--rpx));
  top: calc(-30 * var(--rpx));
  width: calc(250 * var(--rpx));
  height: calc(250 * var(--rpx));
  border: calc(1 * var(--rpx)) dashed rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}

.word-art__word {
  position: absolute;
  left: calc(26 * var(--rpx));
  right: calc(26 * var(--rpx));
  bottom: calc(58 * var(--rpx));
  font-size: calc(84 * var(--rpx));
  line-height: 0.92;
  word-break: break-all;
}

.word-art__meta {
  position: absolute;
  left: calc(24 * var(--rpx));
  right: calc(24 * var(--rpx));
  bottom: calc(20 * var(--rpx));
  display: flex;
  justify-content: space-between;
  gap: calc(20 * var(--rpx));
  color: rgba(255, 255, 255, 0.42);
  font-size: calc(14 * var(--rpx));
  font-weight: 800;
  letter-spacing: calc(1 * var(--rpx));
}

.word-art__meta span:last-child {
  max-width: calc(380 * var(--rpx));
  text-align: right;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
}

.word-head {
  padding: calc(24 * var(--rpx)) 0 calc(20 * var(--rpx));
  border-bottom: calc(1 * var(--rpx)) solid var(--line);
}

.word-head__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(10 * var(--rpx));
}

.word-head__word {
  margin-top: calc(16 * var(--rpx));
  font-size: calc(68 * var(--rpx));
  line-height: 1;
  word-break: break-all;
}

.word-head__phonetic {
  display: flex;
  flex-wrap: wrap;
  gap: calc(20 * var(--rpx));
  margin-top: calc(12 * var(--rpx));
  color: var(--ink-3);
  font-family: Georgia, serif;
  font-size: calc(22 * var(--rpx));
}

.word-head__meanings {
  margin-top: calc(20 * var(--rpx));
}

.word-meaning {
  display: flex;
  align-items: baseline;
  gap: calc(10 * var(--rpx));
  padding: calc(5 * var(--rpx)) 0;
}

.word-meaning__index {
  width: calc(24 * var(--rpx));
  flex: 0 0 auto;
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: calc(15 * var(--rpx));
}

.word-meaning__pos {
  color: var(--ink-3);
  font-family: Georgia, serif;
  font-size: calc(17 * var(--rpx));
}

.word-meaning__text {
  flex: 1;
  font-size: calc(25 * var(--rpx));
  line-height: 1.45;
}

.word-head__actions {
  display: flex;
  gap: calc(12 * var(--rpx));
  margin-top: calc(22 * var(--rpx));
}

.word-head__actions .btn {
  flex: 1;
  height: calc(80 * var(--rpx));
  font-size: calc(22 * var(--rpx));
}

.word-head__actions .btn.is-fav {
  color: var(--coral);
  border-color: rgba(243, 107, 75, 0.35);
}

.word-section {
  padding: calc(24 * var(--rpx)) 0;
  border-bottom: calc(1 * var(--rpx)) solid var(--line);
}

.word-example {
  position: relative;
  margin-top: calc(16 * var(--rpx));
  padding: calc(18 * var(--rpx)) calc(20 * var(--rpx));
  border-left: calc(3 * var(--rpx)) solid var(--lime);
  border-radius: 0 calc(16 * var(--rpx)) calc(16 * var(--rpx)) 0;
  background: var(--surface-2);
}

.word-example__quote {
  position: absolute;
  right: calc(16 * var(--rpx));
  top: calc(4 * var(--rpx));
  font-family: Georgia, serif;
  font-size: calc(54 * var(--rpx));
  line-height: 1;
  color: var(--line-strong);
}

.word-example__text {
  display: block;
  padding-right: calc(30 * var(--rpx));
  font-family: Georgia, serif;
  font-size: calc(25 * var(--rpx));
  line-height: 1.5;
}

.word-example__highlight {
  background: var(--lime);
  color: #15220f;
  padding: 0 calc(3 * var(--rpx));
  border-radius: calc(4 * var(--rpx));
}

.word-example__zh {
  display: block;
  margin-top: calc(8 * var(--rpx));
  color: var(--ink-3);
  font-size: calc(19 * var(--rpx));
  line-height: 1.55;
}

.word-morph {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--rpx));
  margin-top: calc(16 * var(--rpx));
  margin-bottom: calc(10 * var(--rpx));
}

.word-morph__item {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--rpx));
  padding: calc(10 * var(--rpx)) calc(14 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(12 * var(--rpx));
  background: var(--surface-2);
}

.word-morph__part {
  color: var(--forest);
  font-family: Georgia, serif;
  font-size: calc(23 * var(--rpx));
}

.word-morph__meaning {
  color: var(--ink-3);
  font-size: calc(16 * var(--rpx));
}

.word-progress {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--rpx));
  margin-top: calc(14 * var(--rpx));
  padding: calc(22 * var(--rpx));
}

.word-progress__mastery {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(104 * var(--rpx));
  height: calc(104 * var(--rpx));
  flex: 0 0 auto;
  border: calc(6 * var(--rpx)) solid var(--forest);
  border-radius: 50%;
}

.word-progress__mastery-num {
  font-family: Georgia, serif;
  font-size: calc(38 * var(--rpx));
  line-height: 1;
}

.word-progress__mastery-label {
  margin-top: calc(3 * var(--rpx));
  color: var(--muted);
  font-size: calc(14 * var(--rpx));
}

.word-progress__stats {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--rpx));
}

.word-progress__stats div {
  display: flex;
  flex-direction: column;
  gap: calc(1 * var(--rpx));
}

.word-progress__stats span:first-child {
  color: var(--muted);
  font-size: calc(15 * var(--rpx));
}

.word-progress__stats span:last-child {
  color: var(--ink-2);
  font-family: Georgia, serif;
  font-size: calc(21 * var(--rpx));
}

.word-progress__btn {
  flex: 0 0 auto;
  height: calc(68 * var(--rpx));
  padding: 0 calc(18 * var(--rpx));
  font-size: calc(17 * var(--rpx));
}

.word-note__dirty {
  color: var(--amber);
  font-size: calc(16 * var(--rpx));
}

.word-note__input {
  width: 100%;
  min-height: calc(150 * var(--rpx));
  margin-top: calc(14 * var(--rpx));
  padding: calc(18 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(16 * var(--rpx));
  background: var(--surface);
  color: var(--ink);
  font-size: calc(21 * var(--rpx));
  line-height: 1.6;
}

.word-note__placeholder {
  color: var(--muted);
}

.word-note__foot {
  display: flex;
  justify-content: space-between;
  gap: calc(16 * var(--rpx));
  margin-top: calc(10 * var(--rpx));
  color: var(--muted);
  font-size: calc(16 * var(--rpx));
}

.word-note__foot span:last-child {
  color: var(--ink-2);
  font-weight: 700;
}

.word-neighbours {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--rpx));
  margin-top: calc(16 * var(--rpx));
}

.word-neighbour {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--rpx));
  width: calc(50% - calc(5 * var(--rpx)));
  padding: calc(10 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(14 * var(--rpx));
  background: var(--surface);
}

.word-neighbour__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(66 * var(--rpx));
  height: calc(66 * var(--rpx));
  flex: 0 0 auto;
  border-radius: calc(10 * var(--rpx));
}

.word-neighbour__icon img {
  width: calc(38 * var(--rpx));
  height: calc(38 * var(--rpx));
}

.word-neighbour__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.word-neighbour__copy span:first-child {
  font-size: calc(26 * var(--rpx));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.word-neighbour__copy span:last-child {
  color: var(--muted);
  font-size: calc(15 * var(--rpx));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.word-neighbour__arrow {
  color: var(--muted);
  font-size: calc(26 * var(--rpx));
}

.word-footnote {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--rpx));
  padding: calc(22 * var(--rpx)) 0;
  color: var(--muted);
  font-size: calc(16 * var(--rpx));
}

.word-missing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  text-align: center;
}

.word-missing__glyph {
  font-size: calc(110 * var(--rpx));
  color: var(--line-strong);
}

.word-missing .empty__title {
  margin-top: calc(12 * var(--rpx));
}


/* ===== pages/settings/settings.wxss ===== */
.settings-page {
  padding-bottom: calc(36 * var(--rpx));
}

.settings__version {
  margin-left: auto;
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: calc(18 * var(--rpx));
}

.settings-card {
  margin-top: calc(14 * var(--rpx));
  padding: calc(24 * var(--rpx));
}

.settings-card__head {
  display: flex;
  align-items: flex-start;
  gap: calc(14 * var(--rpx));
  padding-bottom: calc(16 * var(--rpx));
  border-bottom: calc(1 * var(--rpx)) solid var(--line);
}

.settings-card__num {
  padding-top: calc(3 * var(--rpx));
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: calc(18 * var(--rpx));
}

.settings-card__head > div {
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--rpx));
}

.settings-card__title {
  font-size: calc(30 * var(--rpx));
  font-weight: 800;
}

.settings-card__desc {
  color: var(--ink-3);
  font-size: calc(18 * var(--rpx));
}

.settings-field {
  margin-top: calc(18 * var(--rpx));
}

.field__placeholder {
  color: var(--muted);
}

.settings-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(82 * var(--rpx));
  padding: 0 calc(22 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(18 * var(--rpx));
  background: var(--surface);
  color: var(--ink-2);
  font-size: calc(23 * var(--rpx));
}

.settings-picker span {
  color: var(--muted);
}

.settings-divider {
  height: calc(1 * var(--rpx));
  margin: calc(24 * var(--rpx)) 0 calc(4 * var(--rpx));
  background: var(--line);
}

.settings-subhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(14 * var(--rpx));
  margin-top: calc(20 * var(--rpx));
}

.settings-subhead span:first-child {
  font-size: calc(21 * var(--rpx));
  font-weight: 800;
}

.settings-subhead span:last-child {
  color: var(--muted);
  font-size: calc(16 * var(--rpx));
}

.settings-targets {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--rpx));
  margin-top: calc(10 * var(--rpx));
}

.settings-target {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--rpx));
  padding: calc(12 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(14 * var(--rpx));
  background: var(--surface-2);
}

.settings-target.is-active {
  border-color: var(--ink);
  background: var(--surface);
  box-shadow: inset 0 0 0 calc(1 * var(--rpx)) var(--ink);
}

.settings-target__code {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(52 * var(--rpx));
  height: calc(56 * var(--rpx));
  flex: 0 0 auto;
  border-radius: calc(10 * var(--rpx));
  background: var(--surface-3);
  color: var(--forest);
  font-family: Georgia, serif;
  font-size: calc(18 * var(--rpx));
}

.settings-target.is-active .settings-target__code {
  background: var(--forest);
  color: var(--lime);
}

.settings-target__copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--rpx));
}

.settings-target__copy span:first-child {
  font-size: calc(21 * var(--rpx));
  font-weight: 800;
}

.settings-target__copy span:last-child {
  color: var(--muted);
  font-size: calc(16 * var(--rpx));
}

.settings-target__check {
  color: var(--success);
  font-size: calc(24 * var(--rpx));
  font-weight: 800;
}

.settings-goals {
  display: flex;
  gap: calc(8 * var(--rpx));
  margin-top: calc(10 * var(--rpx));
}

.settings-goal {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--rpx));
  padding: calc(12 * var(--rpx)) calc(4 * var(--rpx)) calc(10 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(12 * var(--rpx));
  background: var(--surface-2);
}

.settings-goal.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.settings-goal span:first-child {
  font-family: Georgia, serif;
  font-size: calc(34 * var(--rpx));
  line-height: 1;
}

.settings-goal span:last-child {
  color: var(--muted);
  font-size: calc(14 * var(--rpx));
}

.settings-goal.is-active span:last-child {
  color: rgba(241, 238, 228, 0.5);
}

.settings-themes {
  display: flex;
  gap: calc(8 * var(--rpx));
  margin-top: calc(10 * var(--rpx));
  margin-bottom: calc(6 * var(--rpx));
}

.settings-theme {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(64 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(12 * var(--rpx));
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: calc(19 * var(--rpx));
  font-weight: 700;
}

.settings-theme.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.settings-toggle {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--rpx));
  padding: calc(18 * var(--rpx)) 0;
  border-bottom: calc(1 * var(--rpx)) solid var(--line);
}

.settings-toggle:last-of-type {
  border-bottom: 0;
}

.settings-toggle__copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--rpx));
}

.settings-toggle__copy span:first-child {
  font-size: calc(21 * var(--rpx));
  font-weight: 800;
}

.settings-toggle__copy span:last-child {
  color: var(--muted);
  font-size: calc(17 * var(--rpx));
  line-height: 1.4;
}

.settings-note {
  margin-top: calc(14 * var(--rpx));
  padding: calc(12 * var(--rpx)) calc(14 * var(--rpx));
  border-radius: calc(10 * var(--rpx));
  background: var(--lime-soft);
  color: #3b4816;
  font-size: calc(16 * var(--rpx));
  line-height: 1.5;
}

.settings-data {
  display: flex;
  margin-top: calc(16 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(12 * var(--rpx));
  overflow: hidden;
}

.settings-data div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--rpx));
  padding: calc(14 * var(--rpx)) calc(10 * var(--rpx));
  border-right: calc(1 * var(--rpx)) solid var(--line);
}

.settings-data div:last-child {
  border-right: 0;
}

.settings-data span:first-child {
  font-family: Georgia, serif;
  font-size: calc(28 * var(--rpx));
}

.settings-data span:last-child {
  color: var(--muted);
  font-size: calc(15 * var(--rpx));
}

.settings-actions {
  display: flex;
  gap: calc(10 * var(--rpx));
  margin-top: calc(16 * var(--rpx));
}

.settings-actions .btn {
  flex: 1;
  height: calc(74 * var(--rpx));
  font-size: calc(20 * var(--rpx));
}

.settings-danger {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(74 * var(--rpx));
  margin-top: calc(10 * var(--rpx));
  border: calc(1 * var(--rpx)) solid rgba(197, 63, 57, 0.3);
  border-radius: calc(999 * var(--rpx));
  color: var(--danger);
  font-size: calc(20 * var(--rpx));
  font-weight: 700;
}

.settings-about {
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--rpx));
  padding: calc(18 * var(--rpx)) calc(20 * var(--rpx));
  margin-top: calc(16 * var(--rpx));
  border-radius: calc(16 * var(--rpx));
  background: var(--forest);
  color: #f7f5e9;
}

.settings-about span:first-child {
  font-size: calc(38 * var(--rpx));
}

.settings-about span:nth-child(2) {
  color: rgba(247, 245, 233, 0.5);
  font-size: calc(17 * var(--rpx));
}

.settings-about span:last-child {
  color: rgba(247, 245, 233, 0.35);
  font-size: calc(15 * var(--rpx));
}

.settings-links {
  margin-top: calc(12 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid var(--line);
}

.settings-links div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(76 * var(--rpx));
  border-bottom: calc(1 * var(--rpx)) solid var(--line);
  color: var(--ink-2);
  font-size: calc(20 * var(--rpx));
}

.settings-links div span:last-child {
  color: var(--muted);
  font-size: calc(26 * var(--rpx));
}

.settings-optionals {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--rpx));
  margin-top: calc(10 * var(--rpx));
}

.settings-optional {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--rpx));
  padding: calc(12 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(14 * var(--rpx));
  background: var(--surface-2);
}

.settings-optional.is-active {
  border-color: var(--ink);
  background: var(--surface);
}

.settings-optional__code {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(62 * var(--rpx));
  height: calc(56 * var(--rpx));
  flex: 0 0 auto;
  border-radius: calc(10 * var(--rpx));
  font-family: Georgia, serif;
  font-size: calc(15 * var(--rpx));
  font-weight: 700;
}

.settings-optional__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--rpx));
  min-width: 0;
}

.settings-optional__body span:first-child {
  font-size: calc(21 * var(--rpx));
  font-weight: 800;
}

.settings-optional__body span:last-child {
  color: var(--muted);
  font-size: calc(16 * var(--rpx));
}

.settings-optional__action {
  color: var(--forest);
  font-size: calc(17 * var(--rpx));
  font-weight: 800;
}

.theme-dark .settings-optional__action {
  color: var(--lime);
}


/* ===== pages/about/about.wxss ===== */
.about-page {
  padding-bottom: calc(36 * var(--rpx));
}

.about__version {
  margin-left: auto;
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: calc(18 * var(--rpx));
}

.about-hero {
  position: relative;
  overflow: hidden;
  padding: calc(30 * var(--rpx)) calc(26 * var(--rpx)) calc(26 * var(--rpx));
  border-radius: calc(36 * var(--rpx));
  background:
    radial-gradient(circle at 82% 0%, rgba(221, 246, 95, 0.16), transparent 35%),
    linear-gradient(145deg, #173d2b, #0d261b 88%);
  color: #f7f5e9;
}

.about-hero__logo {
  width: calc(84 * var(--rpx));
  height: calc(84 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
  border-radius: calc(22 * var(--rpx));
}

.about-hero__title {
  margin-top: calc(14 * var(--rpx));
  font-size: calc(42 * var(--rpx));
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: calc(-1 * var(--rpx));
}

.about-hero__title .display {
  display: inline;
  color: var(--lime);
  font-size: calc(46 * var(--rpx));
  font-style: italic;
}

.about-hero__desc {
  margin-top: calc(14 * var(--rpx));
  color: rgba(247, 245, 233, 0.5);
  font-size: calc(20 * var(--rpx));
  line-height: 1.6;
}

.about-hero__stats {
  display: flex;
  gap: calc(20 * var(--rpx));
  margin-top: calc(20 * var(--rpx));
  padding-top: calc(16 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.1);
  color: rgba(247, 245, 233, 0.45);
  font-size: calc(17 * var(--rpx));
}

.about-card {
  margin-top: calc(14 * var(--rpx));
  padding: calc(24 * var(--rpx));
}

.about-card__title {
  margin-top: calc(8 * var(--rpx));
  font-size: calc(31 * var(--rpx));
  font-weight: 800;
  line-height: 1.2;
}

.about-text {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--rpx));
  margin-top: calc(14 * var(--rpx));
  color: var(--ink-3);
  font-size: calc(20 * var(--rpx));
  line-height: 1.75;
}

.about-meta {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--rpx));
  margin-top: calc(26 * var(--rpx));
  padding-top: calc(18 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid var(--line);
  color: var(--muted);
  font-size: calc(16 * var(--rpx));
}


/* ===== pages/onboarding/onboarding.wxss ===== */
.onboarding {
  position: relative;
  min-height: 100vh;
  padding: 0 calc(28 * var(--rpx)) calc(40 * var(--rpx));
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 0%, rgba(221, 246, 95, 0.12), transparent 32%),
    var(--paper);
  color: var(--ink);
}

.onboarding__glow {
  position: absolute;
  width: calc(520 * var(--rpx));
  height: calc(520 * var(--rpx));
  right: calc(-260 * var(--rpx));
  top: calc(120 * var(--rpx));
  border: calc(1 * var(--rpx)) dashed var(--line-strong);
  border-radius: 50%;
  pointer-events: none;
}

.onboarding__top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: calc(168 * var(--rpx));
  height: calc(96 * var(--rpx));
}

.onboarding__brand {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--rpx));
}

.onboarding__logo {
  width: calc(58 * var(--rpx));
  height: calc(58 * var(--rpx));
  border-radius: calc(16 * var(--rpx));
}

.onboarding__brand div {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.onboarding__brand span:first-child {
  font-size: calc(22 * var(--rpx));
  font-weight: 800;
}

.onboarding__brand span:last-child {
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: calc(12 * var(--rpx));
  letter-spacing: calc(2 * var(--rpx));
}

.onboarding__skip {
  color: var(--muted);
  font-size: calc(19 * var(--rpx));
}

.onboarding__hero {
  position: relative;
  z-index: 1;
  padding: calc(46 * var(--rpx)) 0 calc(16 * var(--rpx));
}

.onboarding__title {
  margin-top: calc(24 * var(--rpx));
  font-size: calc(62 * var(--rpx));
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: calc(-3 * var(--rpx));
}

.onboarding__title--display {
  color: var(--lime);
  font-family: Georgia, serif;
  font-size: calc(66 * var(--rpx));
  font-style: italic;
  font-weight: 400;
  line-height: 1.05;
}

.onboarding__title--small {
  font-size: calc(50 * var(--rpx));
}

.onboarding__title--small.onboarding__title--display {
  font-size: calc(52 * var(--rpx));
}

.onboarding__desc {
  max-width: calc(600 * var(--rpx));
  margin-top: calc(18 * var(--rpx));
  color: var(--ink-3);
  font-size: calc(21 * var(--rpx));
  line-height: 1.65;
}

.onboarding__orbit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(290 * var(--rpx));
  margin-top: calc(22 * var(--rpx));
}

.onboarding__orbit-ring {
  position: absolute;
  width: calc(280 * var(--rpx));
  height: calc(280 * var(--rpx));
  border: calc(1 * var(--rpx)) dashed var(--line-strong);
  border-radius: 50%;
}

.onboarding__orbit-ring::after {
  content: '';
  position: absolute;
  inset: calc(34 * var(--rpx));
  border: calc(1 * var(--rpx)) dashed var(--line);
  border-radius: 50%;
}

.onboarding__shell {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(130 * var(--rpx));
  height: calc(130 * var(--rpx));
  border-radius: 50%;
  background: var(--lime);
  font-size: calc(62 * var(--rpx));
  box-shadow: 0 0 0 calc(16 * var(--rpx)) rgba(221, 246, 95, 0.1);
}

.onboarding__orbit-caption {
  position: absolute;
  bottom: calc(4 * var(--rpx));
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: calc(12 * var(--rpx));
  letter-spacing: calc(1 * var(--rpx));
}

.onboarding__panel {
  position: relative;
  z-index: 1;
  padding: calc(10 * var(--rpx)) 0 0;
}

.onboarding__fact {
  display: flex;
  align-items: flex-start;
  gap: calc(14 * var(--rpx));
  padding: calc(14 * var(--rpx)) 0;
  border-bottom: calc(1 * var(--rpx)) solid var(--line);
}

.onboarding__fact > span {
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: calc(16 * var(--rpx));
}

.onboarding__fact div {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--rpx));
}

.onboarding__fact div span:first-child {
  font-size: calc(22 * var(--rpx));
  font-weight: 800;
}

.onboarding__fact div span:last-child {
  color: var(--muted);
  font-size: calc(17 * var(--rpx));
}

.onboarding__panel .btn {
  margin-top: calc(26 * var(--rpx));
}

.onboarding__fine {
  margin-top: calc(14 * var(--rpx));
  color: var(--muted);
  text-align: center;
  font-size: calc(16 * var(--rpx));
  line-height: 1.5;
}

.onboarding__section {
  position: relative;
  z-index: 1;
  padding: calc(34 * var(--rpx)) 0 0;
}

.onboarding__method {
  margin-top: calc(22 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid var(--line);
}

.onboarding__method-item {
  display: flex;
  align-items: flex-start;
  gap: calc(16 * var(--rpx));
  padding: calc(20 * var(--rpx)) 0;
  border-bottom: calc(1 * var(--rpx)) solid var(--line);
}

.onboarding__method-item > span {
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: calc(17 * var(--rpx));
}

.onboarding__method-item div {
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--rpx));
}

.onboarding__method-item div span:first-child {
  font-size: calc(25 * var(--rpx));
  font-weight: 800;
}

.onboarding__method-item div span:last-child {
  color: var(--ink-3);
  font-size: calc(19 * var(--rpx));
  line-height: 1.5;
}

.onboarding__actions {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--rpx));
  margin-top: calc(28 * var(--rpx));
}

.onboarding__actions .btn {
  flex: 1;
  height: calc(84 * var(--rpx));
}

.onboarding__actions .btn--secondary {
  flex: 0 0 auto;
  padding: 0 calc(26 * var(--rpx));
}

.onboarding__field {
  margin-top: calc(24 * var(--rpx));
}

.onboarding__input {
  height: calc(82 * var(--rpx));
  margin-top: calc(8 * var(--rpx));
  padding: 0 calc(20 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(16 * var(--rpx));
  background: var(--surface);
  color: var(--ink);
  font-size: calc(23 * var(--rpx));
}

.onboarding__placeholder {
  color: var(--muted);
}

.onboarding__targets {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--rpx));
  margin-top: calc(8 * var(--rpx));
}

.onboarding__target {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--rpx));
  padding: calc(12 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(14 * var(--rpx));
  background: var(--surface-2);
}

.onboarding__target.is-active {
  border-color: var(--ink);
  background: var(--surface);
  box-shadow: inset 0 0 0 calc(1 * var(--rpx)) var(--ink);
}

.onboarding__target-code {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(54 * var(--rpx));
  height: calc(54 * var(--rpx));
  flex: 0 0 auto;
  border-radius: calc(10 * var(--rpx));
  background: var(--surface-3);
  color: var(--forest);
  font-family: Georgia, serif;
  font-size: calc(17 * var(--rpx));
}

.onboarding__target.is-active .onboarding__target-code {
  background: var(--forest);
  color: var(--lime);
}

.onboarding__target div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--rpx));
}

.onboarding__target div span:first-child {
  font-size: calc(21 * var(--rpx));
  font-weight: 800;
}

.onboarding__target div span:last-child {
  color: var(--muted);
  font-size: calc(16 * var(--rpx));
}

.onboarding__check {
  color: var(--success);
  font-size: calc(24 * var(--rpx));
  font-weight: 800;
}

.onboarding__goals {
  display: flex;
  gap: calc(8 * var(--rpx));
  margin-top: calc(8 * var(--rpx));
}

.onboarding__goal {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--rpx));
  padding: calc(12 * var(--rpx)) calc(4 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(12 * var(--rpx));
  background: var(--surface-2);
}

.onboarding__goal.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.onboarding__goal span:first-child {
  font-family: Georgia, serif;
  font-size: calc(32 * var(--rpx));
  line-height: 1;
}

.onboarding__goal span:last-child {
  color: var(--muted);
  font-size: calc(14 * var(--rpx));
}

.onboarding__goal.is-active span:last-child {
  color: rgba(241, 238, 228, 0.5);
}

.onboarding__dots {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: calc(8 * var(--rpx));
  margin-top: calc(28 * var(--rpx));
}

.onboarding__dots div {
  width: calc(8 * var(--rpx));
  height: calc(8 * var(--rpx));
  border-radius: calc(99 * var(--rpx));
  background: var(--line-strong);
}

.onboarding__dots div.is-active {
  width: calc(26 * var(--rpx));
  background: var(--ink);
}

.theme-dark .onboarding__goal.is-active span:last-child {
  color: rgba(14, 21, 18, 0.55);
}

.theme-dark .onboarding__shell {
  color: #15220f;
}


/* ===== tabbar.wxss ===== */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  height: calc(calc(104 * var(--rpx)) + var(--safe-bottom));
  padding: calc(7 * var(--rpx)) calc(18 * var(--rpx)) var(--safe-bottom);
  background: rgba(251, 249, 242, 0.96);
  border-top: calc(1 * var(--rpx)) solid rgba(21, 25, 21, 0.1);
  box-sizing: border-box;
  backdrop-filter: blur(calc(18 * var(--rpx)));
}

.tabbar.is-dark {
  background: rgba(15, 22, 18, 0.96);
  border-top-color: rgba(241, 238, 228, 0.12);
}

.tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(3 * var(--rpx));
  flex: 1;
  height: calc(90 * var(--rpx));
  opacity: 0.62;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.tabbar__item.is-active {
  opacity: 1;
  transform: translateY(calc(-2 * var(--rpx)));
}

.tabbar__icon {
  width: calc(42 * var(--rpx));
  height: calc(42 * var(--rpx));
}

.tabbar__item.is-active .tabbar__icon {
  width: calc(46 * var(--rpx));
  height: calc(46 * var(--rpx));
}

.tabbar__label {
  color: #737b71;
  font-size: calc(17 * var(--rpx));
  font-weight: 700;
  line-height: 1.2;
}

.tabbar__item.is-active .tabbar__label {
  color: #163b2a;
}

.tabbar.is-dark .tabbar__label {
  color: #98a096;
}

.tabbar.is-dark .tabbar__item.is-active .tabbar__label {
  color: #ddf65f;
}


/* ===== 字体 ===== */
@font-face{font-family:"Fraunces";src:url("fonts/fraunces.woff2") format("woff2");font-weight:400 700;font-display:swap;}
.display{font-family:"Fraunces",Georgia,"Times New Roman",serif;font-feature-settings:"kern" 1;}


/* =========================================================
 * 词屿手记 · Android 版补充样式（不改动原小程序 WXSS）
 * =======================================================*/

/* ---- 首页今日一词 ---- */
.word-card__wordline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(14 * var(--rpx));
}

.word-card__wordline .word-card__word {
  flex: 0 1 auto;
}

.word-card__example {
  position: relative;
  padding-right: calc(66 * var(--rpx));
}

.word-card__speak-speech {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: calc(52 * var(--rpx));
  height: calc(52 * var(--rpx));
  font-size: calc(24 * var(--rpx));
}

/* ---- 短语卡 ---- */
.phrase-card__wordrow,
.study-phrase__wordrow {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--rpx));
}

.phrase-card__wordrow .phrase-card__word,
.study-phrase__wordrow .study-phrase__word {
  flex: 1;
  min-width: 0;
}

/* ---- 词卡页 ---- */
.word-head__wordrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(20 * var(--rpx));
}

.word-head__wordrow .word-head__word {
  flex: 1;
  min-width: 0;
}

.word-head__speak {
  width: calc(80 * var(--rpx));
  height: calc(80 * var(--rpx));
  font-size: calc(34 * var(--rpx));
}

.word-example {
  position: relative;
}

.word-example__play {
  width: calc(52 * var(--rpx));
  height: calc(52 * var(--rpx));
  font-size: calc(24 * var(--rpx));
}

/* ---- 学习流程 ---- */
.detail-word {
  position: relative;
  padding-right: calc(84 * var(--rpx));
}

.detail-word > .speak-btn {
  position: absolute;
  right: 0;
  top: calc(4 * var(--rpx));
}

.detail-example {
  position: relative;
  padding-right: calc(64 * var(--rpx));
}

.detail-example > .detail-example__play {
  position: absolute;
  right: 0;
  top: calc(2 * var(--rpx));
  width: calc(48 * var(--rpx));
  height: calc(48 * var(--rpx));
  font-size: calc(22 * var(--rpx));
}

.session-art__listen:active {
  transform: scale(0.92);
}

/* ---- 词库列表 ---- */
.word-row__top .word-row__speak {
  width: calc(48 * var(--rpx));
  height: calc(48 * var(--rpx));
  font-size: calc(22 * var(--rpx));
  margin-left: calc(14 * var(--rpx));
}

/* ---- 测验 ---- */
.quiz__speak {
  width: calc(56 * var(--rpx));
  height: calc(56 * var(--rpx));
  font-size: calc(26 * var(--rpx));
}

.quiz-feedback__speak {
  width: calc(52 * var(--rpx));
  height: calc(52 * var(--rpx));
  font-size: calc(24 * var(--rpx));
  margin-left: auto;
  margin-right: calc(14 * var(--rpx));
}

/* ---- 设置：发音 ---- */
.settings-card .voice-seg {
  display: flex;
  gap: calc(12 * var(--rpx));
  flex-wrap: wrap;
  margin-top: calc(10 * var(--rpx));
}

.settings-card .settings-subhead + .voice-seg {
  margin-bottom: calc(8 * var(--rpx));
}

.settings-card .voice-test {
  margin-top: calc(24 * var(--rpx));
}

/* ---- 大屏兜底：桌面查看时保持手机比例 ---- */
@media (min-width: 640px) {
  html,
  body {
    background: #e6e2d6;
  }

  #pages {
    max-width: 480px;
    margin: 0 auto;
    left: 50%;
    right: auto;
    width: 480px;
    transform: translateX(-50%);
    box-shadow: 0 0 60px rgba(21, 25, 21, 0.16);
    background: var(--paper, #f1eee4);
  }

  #tabbar {
    max-width: 480px;
    left: 50%;
    right: auto;
    width: 480px;
    transform: translateX(-50%);
  }

  #overlay {
    max-width: 480px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 480px;
  }
}