:root {
  --or: #F0762B;
  --or-d: #C25612;
  --or-bg: #FFF0E4;
  --or-sd: #FFF7F0;
  --or-bd: #F3DCC6;
  --gr: #2E8B4F;
  --gr-bg: #E8F6EC;
  --ye: #9A6B0A;
  --ye-bg: #FEF3DC;
  --rd: #C4403F;
  --t1: #1F2329;
  --t2: #80858F;
  --t3: #A3A8B0;
  --bd: #EAECEF;
  --pg: #FFFFFF;
  --soft: #F5F6F8;
  --panel: var(--pg);
  --ink: var(--t1);
  --muted: var(--t2);
  --line: var(--bd);
  --primary: var(--or);
  --accent: var(--or);
  --primary-dark: var(--or-d);
  --green: var(--gr);
  --orange: var(--or);
  --red: var(--rd);
  --yellow: var(--ye-bg);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--pg);
  scrollbar-gutter: stable;
}

body {
  min-height: 100dvh;
  margin: 0;
  background: var(--pg);
  color: var(--t1);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.75;
  overflow-x: hidden;
  overflow-y: auto;
}

body,
button,
input,
textarea,
select {
  font: inherit;
  letter-spacing: 0;
}

button,
input,
textarea,
select {
  color: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

a {
  color: inherit;
}

img,
svg {
  display: block;
}

svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#app {
  min-height: 100dvh;
}

.app-shell {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  min-height: 100dvh;
  background: #fff;
}

.app-shell.auth-shell {
  display: block;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  width: 172px;
  height: 100dvh;
  margin: 0;
  padding: 8px;
  border-right: 1px solid #F2F2F2;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: visible;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 4px 14px;
  border-bottom: 1px solid var(--bd);
  flex-shrink: 0;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  object-fit: contain;
}

.brand-title,
.brand h1 {
  margin: 0;
  color: #3A2E24;
  font-size: 17px;
  line-height: 1.15;
  font-weight: 700;
}

.brand-tag,
.brand p {
  margin: 3px 0 0;
  color: var(--t2);
  font-size: 11.5px;
  line-height: 1.2;
}

.sidebar-nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  overflow-x: hidden;
  overflow-y: visible;
  overscroll-behavior: contain;
  scrollbar-gutter: auto;
  -webkit-overflow-scrolling: touch;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 10px 0 16px;
  overflow: visible;
}

.nav-section {
  display: grid;
  gap: 1px;
  padding: 0 0 6px;
  margin: 0 0 6px;
  border-bottom: 1px solid #F2F2F2;
  flex-shrink: 0;
}

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

.nav-section-title {
  margin: 0;
  padding: 12px 6px 4px;
  color: #A3A8B0;
  font-size: 9px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-button {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #242A33;
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
}

.nav-button.active {
  background: #FFF4EC;
  color: #E8650A;
}

.nav-button:hover {
  background: #F5F6F8;
  color: #333;
}

.nav-button.active:hover {
  background: #FFF4EC;
  color: #E8650A;
}

.nav-button.hot {
  background: #E8650A;
  color: #fff;
}

.nav-button.hot:hover,
.nav-button.hot.active:hover {
  background: #E8650A;
  color: #fff;
}

.nav-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #F4F5F7;
  color: inherit;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Microsoft YaHei UI", sans-serif;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.nav-button.active .nav-icon {
  background: #F4F5F7;
}

.nav-button.hot .nav-icon {
  background: rgba(255, 255, 255, 0.2);
}

.nav-button[data-view="today"] .nav-icon {
  background: #F0F1F3;
}

.nav-button[data-view="lifeDiary"] .nav-icon {
  background: #FFF0E8;
}

.nav-button[data-view="sentenceBreakdown"] .nav-icon {
  background: #FFF0E8;
}

.nav-button[data-view="sentenceBreakdown"].active .nav-icon {
  background: rgba(255, 255, 255, 0.22);
}

.nav-button[data-view="myDaily"] .nav-icon {
  background: #FFF0E8;
}

.nav-button[data-view="myDaily"].active .nav-icon {
  background: #FFE0C4;
}

.nav-button[data-view="market"] .nav-icon {
  background: #FFF0E0;
}

.nav-button[data-view="mySelectedCourses"] .nav-icon {
  background: #F0F0FF;
}

.nav-button[data-view="review"] .nav-icon {
  background: #FFF8E0;
}

.nav-button[data-view="membership"] .nav-icon {
  background: #EEF4FF;
}

.nav-button[data-view="partner"] .nav-icon {
  background: #FFF4E8;
}

.nav-copy {
  display: grid;
  min-width: 0;
}

.nav-label {
  display: block;
  color: currentColor;
  font-size: 14.5px;
  line-height: 1.22;
  font-weight: 500;
  letter-spacing: 0;
}

.nav-button.active .nav-label,
.nav-button.hot .nav-label {
  font-weight: 600;
}

.nav-hint {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  color: #8F96A3;
  font-size: 10.5px;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-button.active .nav-hint {
  color: #A3A8B0;
}

.nav-button[data-view="sentenceBreakdown"].active .nav-hint {
  color: rgba(255, 255, 255, 0.72);
}

.nav-button.hot .nav-hint {
  color: rgba(255, 255, 255, 0.65);
}

.sidebar-points {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding: 12px;
  border: 1px solid var(--or-bd);
  border-radius: 14px;
  background: var(--or-sd);
  flex-shrink: 0;
}

.sidebar-points span {
  color: var(--t2);
  font-size: 11.5px;
  line-height: 1.2;
}

.sidebar-points strong {
  color: var(--t1);
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sidebar-points button {
  width: 100%;
  min-height: 34px;
}

.main {
  min-width: 0;
  min-height: 100dvh;
  overflow: visible;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--soft);
}

.app-shell[data-app-view="today"] .main,
.app-shell[data-app-view="lifeDiary"] .main,
.app-shell[data-app-view="market"] .main,
.app-shell[data-app-view="mySelectedCourses"] .main,
.app-shell[data-app-view="review"] .main,
.app-shell[data-app-view="partner"] .main {
  background: #fff;
}

.app-shell[data-app-view="partner"] .va-wrap {
  background: #fff;
}

@media (min-width: 981px) {
  html,
  body,
  #app {
    min-height: 100%;
  }

  .app-shell {
    min-height: 0;
  }

  .main {
    min-height: 0;
  }
}

.main-inner {
  width: 100%;
  min-height: 100%;
  padding: 24px 30px 38px;
}

.main-top-sentinel {
  display: block;
  height: 1px;
}

.is-membership-page .main-top-sentinel,
.is-partner-page .main-top-sentinel {
  height: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--bd);
  border-radius: 20px;
  background: var(--pg);
  color: var(--t2);
  font-size: 13.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.topbar-link:hover {
  color: var(--t1);
  border-color: var(--t3);
  background: var(--or-sd);
}

.tool-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-title {
  margin: 0;
  color: var(--t1);
  font-size: 25px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.page-kicker,
.muted,
.partner-muted,
.sentence-meta,
.life-diary-channel-note,
.sentence-breakdown-empty,
.life-diary-empty {
  color: var(--t2);
  font-size: 12.5px;
}

.page-kicker {
  margin: 5px 0 0;
}

.card,
.panel,
.membership-card,
.membership-status,
.payment-history,
.partner-panel,
.legal-card,
.life-diary-panel,
.life-diary-entry,
.sentence-breakdown-card,
.private-practice-board,
.joined-market-courses,
.private-date-row,
.my-course-tile,
.market-board,
.daily-coach-quota,
.auth-card,
.course-start-panel,
.payment-dialog,
.review-explainer,
.review-stat-card,
.review-item-card,
.home-card,
.home-rail-card,
.landing-dialog,
.landing-card,
.landing-step,
.landing-plan,
.affiliate-guide,
.affiliate-card {
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--pg);
}

.card,
.panel,
.membership-card,
.membership-status,
.payment-history,
.partner-panel,
.legal-card,
.life-diary-panel,
.sentence-breakdown-card,
.private-practice-board,
.joined-market-courses,
.market-board,
.review-explainer,
.review-stat-card,
.review-item-card,
.home-card,
.home-rail-card,
.landing-card,
.landing-step,
.landing-plan,
.affiliate-guide,
.affiliate-card {
  padding: 18px;
}

.home-card,
.home-rail-card,
.life-diary-panel,
.private-practice-board,
.joined-market-courses,
.market-board,
.review-explainer,
.review-item-card,
.membership-status,
.partner-panel {
  display: grid;
  gap: 14px;
}

h2,
h3,
p {
  overflow-wrap: anywhere;
}

h3 {
  margin: 0;
  color: var(--t1);
  font-size: 15.5px;
  line-height: 1.35;
  font-weight: 600;
}

p {
  margin: 0;
}

.button-row,
.tag-row,
.admin-actions,
.life-diary-actions,
.sentence-breakdown-actions,
.course-start-actions,
.membership-tabs,
.tabs,
.chip-row,
.review-filters,
.market-category-tabs,
.market-actions,
.landing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

button.primary,
.primary,
.membership-button,
.cover-primary {
  min-height: 38px;
  padding: 9px 14px;
  border: 1px solid var(--or);
  border-radius: 10px;
  background: var(--or);
  color: var(--pg);
  font-size: 13px;
  font-weight: 600;
}

button.secondary,
.secondary,
.ghost,
.cover-secondary,
.tab,
.chip,
.membership-tabs button,
.market-category-tabs button,
.payment-refresh,
.payment-help,
.mock-pay-button,
.control-button,
.mode-button,
.practice-back {
  min-height: 38px;
  padding: 9px 14px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--pg);
  color: var(--t1);
  font-size: 13px;
  font-weight: 600;
}

.ghost {
  color: var(--t2);
}

.danger-action,
.membership-button.danger {
  border-color: var(--rd);
  background: var(--rd);
  color: var(--pg);
}

.tab.active,
.chip.active,
.membership-tabs button.active,
.market-category-tabs button.active {
  border-color: var(--or-bd);
  background: var(--or-bg);
  color: var(--or-d);
}

.tag,
.section-pill,
.level-pill,
.sentence-badge,
.tool-badge,
.membership-kicker,
.private-practice-tag,
.day-progress {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid var(--bd);
  border-radius: 7px;
  background: var(--soft);
  color: var(--t2);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 600;
}

.tool-badge,
.level-pill,
.membership-kicker {
  border-color: var(--or-bd);
  background: var(--or-bg);
  color: var(--or-d);
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--pg);
  color: var(--t1);
  outline: none;
}

input,
select {
  min-height: 40px;
  padding: 8px 10px;
}

textarea {
  min-height: 190px;
  padding: 12px;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--or);
}

.progress,
progress {
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bd);
}

progress::-webkit-progress-bar {
  background: var(--bd);
}

progress::-webkit-progress-value {
  background: var(--or);
}

progress::-moz-progress-bar {
  background: var(--or);
}

.profile-avatar-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: var(--pg);
  color: var(--t1);
  overflow: hidden;
}

.profile-avatar-button img,
.profile-avatar-preview img,
.profile-panel-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-overlay,
.profile-edit-overlay,
.delete-account-overlay,
.payment-dialog-overlay,
.partner-poster-overlay,
.course-start-modal,
.wechat-phone-bind-overlay,
.wechat-unbind-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(31,35,41, 0.28);
}

.wechat-phone-bind-overlay {
  z-index: 100;
  overflow: auto;
  background: rgba(31,35,41, 0.42);
}

.wechat-phone-bind-overlay .auth-bind-card {
  max-height: calc(100dvh - 40px);
  overflow: auto;
  box-shadow: 0 24px 60px rgba(31,35,41, 0.2);
}

.auth-bind-card {
  display: grid;
  gap: 15px;
  width: min(440px, 100%);
  padding: 24px;
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--pg);
}

.auth-bind-card h2 {
  margin: 0;
  color: var(--t1);
  font-size: 19px;
  line-height: 1.3;
}

.auth-bind-card > p {
  margin: -7px 0 0;
  color: var(--t2);
  font-size: 12.5px;
  line-height: 1.65;
}

.auth-phone-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.auth-phone-row > strong {
  display: grid;
  place-items: center;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--soft);
  color: var(--t1);
  font-size: 14px;
}

.auth-bind-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
}

.auth-bind-actions button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--pg);
  color: var(--t1);
  font-weight: 700;
  cursor: pointer;
}

.auth-bind-actions button[data-wechat-bind-confirm] {
  border-color: var(--or);
  background: var(--or);
  color: #fff;
}

.wechat-unbind-overlay {
  z-index: 95;
}

.review-remove-modal {
  background: rgba(31,35,41, 0.3);
}

.review-remove-panel {
  display: grid;
  justify-items: center;
  width: min(548px, 100%);
  padding: 34px 34px 28px;
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(31,35,41, 0.18);
}

.review-remove-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: var(--or-bg);
  color: var(--or);
}

.review-remove-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.review-remove-panel h2 {
  margin: 0;
  color: var(--t1);
  font-size: 28px;
  line-height: 1.3;
}

.review-remove-panel > p {
  margin: 20px 0 30px;
  color: var(--t3);
  font-size: 19px;
  line-height: 1.7;
}

.review-remove-panel .course-start-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
}

.review-remove-panel .course-start-actions button {
  min-height: 64px;
  border: 0;
  border-radius: 14px;
  font-size: 19px;
  font-weight: 700;
}

.review-remove-panel [data-cancel-review-remove] {
  background: #F4F5F7;
  color: var(--t2);
}

.review-remove-panel [data-confirm-review-remove] {
  background: var(--or);
  color: #fff;
  box-shadow: 0 12px 24px rgba(240, 118, 43, 0.2);
}

@media (max-width: 560px) {
  .review-remove-panel {
    padding: 28px 20px 22px;
  }

  .review-remove-panel h2 {
    font-size: 24px;
  }

  .review-remove-panel > p {
    font-size: 16px;
  }

  .review-remove-panel .course-start-actions {
    gap: 12px;
  }
}

.wechat-unbind-panel {
  width: min(380px, 100%);
  padding: 22px;
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--pg);
  box-shadow: 0 24px 60px rgba(31,35,41, 0.2);
}

.wechat-unbind-panel h2 {
  margin: 0 0 8px;
  color: var(--t1);
  font-size: 17px;
}

.wechat-unbind-panel p {
  margin: 0;
  color: var(--t2);
  font-size: 13px;
  line-height: 1.7;
}

.wechat-unbind-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.wechat-unbind-actions button {
  min-height: 42px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--pg);
  color: var(--t1);
  font-weight: 700;
  cursor: pointer;
}

.wechat-unbind-actions button[data-confirm-wechat-unbind] {
  border-color: var(--or);
  background: var(--or);
  color: #fff;
}

.wechat-unbind-actions button:disabled {
  opacity: 0.62;
  cursor: wait;
}

/* 个人信息面板与编辑弹窗 */
.profile-panel,
.profile-edit-panel {
  width: min(420px, 100%);
  max-height: min(88vh, 720px);
  overflow: auto;
  padding: 20px;
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--pg);
  box-shadow: 0 24px 60px rgba(31,35,41, 0.18);
}

.partner-poster-panel {
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: hidden;
  padding: 12px;
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--pg);
  box-shadow: 0 24px 60px rgba(31,35,41, 0.18);
  display: flex;
  flex-direction: column;
}

.profile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.profile-head h2 {
  margin: 0;
  font-size: 17px;
  color: var(--t1);
}

.profile-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--t2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.profile-close:hover {
  background: var(--or-sd);
  color: var(--t1);
}

.profile-action-notice {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--gr) 30%, transparent);
  border-radius: 10px;
  background: var(--gr-bg);
  color: var(--gr);
  font-size: 12.5px;
  line-height: 1.5;
}

.profile-action-notice.is-warning {
  border-color: var(--or-bd);
  background: var(--or-sd);
  color: var(--or-d);
}

.profile-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid var(--bd);
  object-fit: cover;
  background: var(--or-sd);
  flex: none;
}

.profile-hero-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-hero-text strong {
  font-size: 16px;
  color: var(--t1);
}

.profile-hero-text button {
  align-self: flex-start;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--or);
  font-size: 13px;
  cursor: pointer;
}

.profile-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
}

.profile-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--bd);
}

.profile-list > div span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--t2);
  font-size: 13.5px;
}

.profile-list > div strong {
  color: var(--t1);
  font-size: 13.5px;
  text-align: right;
}

.profile-list .profile-badge {
  color: #1F9D6B;
}

.profile-row-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 4px;
  border: none;
  border-bottom: 1px solid var(--bd);
  background: transparent;
  color: var(--t1);
  font-size: 13.5px;
  cursor: pointer;
}

.profile-row-button span {
  color: var(--t3);
}

.profile-row-button:hover {
  color: var(--or);
}

.profile-logout {
  width: 100%;
  height: 44px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--pg);
  color: var(--t1);
  font-size: 14px;
  cursor: pointer;
}

.profile-logout:hover {
  border-color: var(--or);
  color: var(--or);
}

.profile-edit-body {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.profile-edit-avatar {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: 1px solid var(--bd);
  object-fit: cover;
  background: var(--or-sd);
  flex: none;
}

.profile-file-input {
  display: none;
}

.profile-image-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--pg);
  color: var(--t1);
  font-size: 13.5px;
  cursor: pointer;
}

.profile-image-button:hover {
  border-color: var(--or);
  color: var(--or);
}

.profile-edit-body p {
  margin: 6px 0 0;
  color: var(--t3);
  font-size: 12px;
}

.profile-edit-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 18px;
}

.profile-edit-field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--t2);
  font-size: 13px;
}

.profile-edit-field > span em {
  color: var(--t3);
  font-style: normal;
}

.profile-edit-field input {
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--pg);
  color: var(--t1);
  font-size: 14px;
}

.profile-edit-field input:focus {
  outline: none;
  border-color: var(--or);
}

.profile-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.profile-edit-actions button {
  height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid var(--bd);
  background: var(--pg);
  color: var(--t1);
  font-size: 14px;
  cursor: pointer;
}

.profile-edit-actions button[data-save-profile-edit] {
  border-color: var(--or);
  background: var(--or);
  color: #fff;
}

.profile-panel-card,
.profile-edit-card,
.delete-account-card {
  width: min(480px, 100%);
  padding: 18px;
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--pg);
}

.profile-panel-head,
.profile-edit-head,
.delete-account-head,
.payment-dialog-head,
.life-diary-list-head,
.private-practice-board-head,
.my-course-tile-head,
.sentence-title-row,
.payment-history article,
.partner-hero,
.market-toolbar,
.course-level-header,
.review-item-head,
.review-item-foot,
.home-card-head,
.affiliate-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cover-page,
.landing-page {
  min-height: 100dvh;
  background: var(--pg);
}

.cover-nav,
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  padding: 0 clamp(20px, 5vw, 64px);
  border-bottom: 1px solid var(--bd);
  background: var(--pg);
}

.cover-brand,
.landing-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--t1);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

.cover-brand img,
.landing-brand img {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}

.cover-nav-links,
.cover-nav-actions,
.landing-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cover-nav-links a,
.cover-footer a,
.cover-footer button,
.landing-links a,
.landing-footer a {
  border: 0;
  background: transparent;
  color: var(--t2);
  text-decoration: none;
}

.cover-hero,
.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 34px;
  align-items: center;
  padding: clamp(42px, 7vw, 76px) clamp(20px, 5vw, 64px) 24px;
}

.cover-hero h1,
.landing-hero h1 {
  max-width: 760px;
  margin: 0;
  color: var(--t1);
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.cover-hero h1 span,
.landing-hero h1 span {
  color: var(--or);
}

.cover-hero p,
.landing-hero p {
  max-width: 620px;
  margin: 16px 0 0;
  color: var(--t2);
  font-size: 16px;
}

.landing-dialog {
  display: grid;
  gap: 12px;
  padding: 18px;
  background: var(--or-sd);
}

.dialog-bubble {
  padding: 12px;
  border-radius: 12px;
  background: var(--pg);
}

.dialog-bubble.en {
  color: var(--or-d);
  font-weight: 700;
}

.landing-steps,
.landing-course-grid,
.landing-pricing,
.home-task-grid,
.home-shell,
.courses-shell,
.life-diary,
.sentence-breakdown,
.membership-grid,
.partner-grid,
.legal-grid,
.market-course-grid,
.my-course-standard-grid,
.review-stat-grid,
.review-item-grid,
.course-layout,
.grid {
  display: grid;
  gap: 14px;
}

.landing-steps,
.landing-course-grid,
.landing-pricing,
.market-course-grid,
.my-course-standard-grid,
.course-layout,
.grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-shell {
  grid-template-columns: minmax(0, 1fr) 292px;
  align-items: start;
}

.home-shell-single {
  grid-template-columns: minmax(0, 1fr);
}

.courses-shell {
  grid-template-columns: minmax(0, 1fr) 258px;
  align-items: start;
}

.home-main-stack,
.today-task-list,
.point-rule-list,
.month-check {
  display: grid;
  gap: 14px;
}

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

.home-rail,
.sentence-breakdown-result-stack {
  display: grid;
  gap: 14px;
}

.main:has(.home-dashboard) {
  background: #F5F6F8;
}

.home-dashboard {
  --home-or: #E8650A;
  --home-solid: #EE7A2C;
  --home-green: #2AA96A;
  --home-green-bg: #F4FBF6;
  --home-green-bd: #B8E6C4;
  --home-card: #fff;
  --home-bd: #EAECEF;
  --home-bg: #FFFFFF;
  display: grid;
  gap: 12px;
}

.home-checkin-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 15px 20px;
  border-radius: 13px;
  color: #fff;
  background: var(--home-solid);
}

.home-checkin-progress {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.home-checkin-track {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  appearance: none;
  background: #F29A5E;
}

.home-checkin-track::-webkit-progress-bar { background: #F29A5E; border-radius: 4px; }
.home-checkin-track::-webkit-progress-value { background: #fff; border-radius: 4px; }
.home-checkin-track::-moz-progress-bar { background: #fff; border-radius: 4px; }
.home-checkin-progress-text { flex: none; white-space: nowrap; line-height: 1.5; }
.home-checkin-progress-text strong { color: #fff; font-size: 14px; font-weight: 700; }
.home-checkin-progress-text span { color: #FFE9D9; font-size: 13px; font-weight: 400; }

.home-checkin-left {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px;
}

.home-checkin-stat {
  min-width: 86px;
}

.home-checkin-stat + .home-checkin-stat {
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.home-checkin-stat span {
  display: block;
  color: #FFE9D9;
  font-size: 10px;
  line-height: 1.35;
}

.home-checkin-stat strong {
  display: block;
  margin-top: 2px;
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
}

.home-checkin-stat em {
  margin-left: 3px;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.home-checkin-right {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.home-check-week {
  display: grid;
  grid-template-columns: repeat(7, 28px);
  gap: 6px;
}

.home-check-dot {
  display: grid;
  justify-items: center;
  gap: 3px;
}

.home-check-dot em {
  color: #FFE9D9;
  font-size: 9px;
  font-style: normal;
  line-height: 1;
}

.home-check-dot strong {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  line-height: 1;
}

.home-check-dot.is-done strong {
  background: #fff;
  color: var(--home-or);
  font-weight: 800;
}

.home-check-dot.is-current:not(.is-done) strong {
  border: 1.5px dashed #fff;
  background: transparent;
}

.home-check-dot.is-new:not(.is-current) strong {
  background: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.58);
}

.home-panel,
.home-try-card {
  border: 1px solid var(--home-bd);
  border-radius: 12px;
  background: var(--home-card);
}

.home-panel {
  display: grid;
  gap: 12px;
  padding: 15px;
}

.home-card-title,
.home-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.home-card-title h3,
.home-section-title h3 {
  margin: 0;
  color: #1A1A1A;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 800;
}

.home-card-title span,
.home-section-title span {
  color: #80858F;
  font-size: 11px;
  line-height: 1.35;
  text-align: right;
}

.home-progress-track {
  display: block;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #F1F1F0;
  appearance: none;
}

.home-progress-track::-webkit-progress-bar {
  border-radius: 999px;
  background: #F1F1F0;
}

.home-progress-track::-webkit-progress-value {
  border-radius: 999px;
  background: var(--home-solid);
}

.home-progress-track::-moz-progress-bar {
  border-radius: 999px;
  background: var(--home-solid);
}

.home-progress-track::-ms-fill {
  border: 0;
  border-radius: 999px;
  background: var(--home-solid);
}

.home-progress-track span {
  display: none;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--home-solid);
}

.home-progress-track.is-quota {
  height: 7px;
}

.home-progress-track.is-quota::-webkit-progress-value {
  background: var(--home-solid);
}

.home-progress-track.is-quota::-moz-progress-bar {
  background: var(--home-solid);
}

.home-progress-track.is-quota::-ms-fill {
  background: var(--home-solid);
}

.home-try-section {
  display: grid;
  gap: 9px;
}

.home-try-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.home-try-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 13px 15px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.home-try-card:hover {
  border-color: #E8E6E3;
  box-shadow: 0 5px 18px rgba(31,35,41, 0.07);
  transform: translateY(-1px);
}

.home-try-card.is-done {
  border-color: var(--home-green-bd);
  background: var(--home-green-bg);
}

.home-try-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 10px;
  background: #F3F3F2;
  color: #3D322A;
  font-size: 18px;
}

.home-try-card.is-done .home-try-icon {
  background: #E8F7EE;
}

.home-try-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.home-try-copy strong {
  color: #1A1A1A;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

.home-try-copy em {
  color: #80858F;
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.home-try-card.is-done .home-try-copy strong,
.home-try-card.is-done .home-try-action {
  color: var(--home-green);
}

.home-try-card.is-done .home-try-copy em {
  color: #7FB891;
}

.home-try-action,
.home-inline-action {
  border: 1px solid var(--home-solid);
  border-radius: 999px;
  background: #fff;
  color: var(--home-or);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  white-space: nowrap;
}

.home-try-action {
  background: var(--home-solid);
  color: #fff;
  padding: 7px 13px;
}

.home-try-card.is-done .home-try-action {
  border-color: #D0E8D8;
  background: #fff;
}

.home-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  align-items: stretch;
  gap: 10px;
}

.home-side-stack {
  display: grid;
  gap: 10px;
}

.home-learned-card {
  min-height: 196px;
}

.home-learned-card.is-empty {
  align-content: center;
  justify-items: start;
}

.home-learned-card > p {
  color: #80858F;
  font-size: 13px;
  line-height: 1.7;
}

.home-learned-en {
  color: #1A1A1A !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  font-weight: 700;
}

.home-learned-zh {
  color: #80858F !important;
}

.home-inline-action {
  justify-self: start;
  padding: 8px 15px;
  cursor: pointer;
}

.home-side-card {
  min-height: 92px;
}

.home-side-number {
  color: var(--home-or);
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
}

.home-side-number em {
  margin-left: 3px;
  color: #80858F;
  font-size: 12px;
  font-style: normal;
}

.home-side-card > p {
  color: #80858F;
  font-size: 12px;
  line-height: 1.6;
}

.home-link-action {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--home-or);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 760px) {
  .home-checkin-bar,
  .home-try-grid,
  .home-bottom-grid {
    grid-template-columns: 1fr;
  }

  .home-checkin-right {
    justify-items: stretch;
  }

  .home-check-week {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .home-check-dot strong {
    width: 24px;
    height: 24px;
  }

  .home-card-title,
  .home-section-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-card-title span,
  .home-section-title span {
    text-align: left;
  }

  .home-try-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .home-try-action {
    grid-column: 2;
    justify-self: start;
  }
}

.life-diary,
.sentence-breakdown {
  grid-template-columns: 0.82fr 1.18fr;
  align-items: start;
}

.membership-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.review-stat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

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

.my-courses-date-home {
  display: grid;
  gap: 14px;
}

.my-courses-panel {
  overflow: hidden;
  border: 1px solid var(--bd);
  border-radius: 24px;
  background: var(--pg);
}

.courses-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 36px;
  background: var(--t1);
  color: var(--or-bg);
}

.my-courses-hero-head h2 {
  margin: 0;
  color: var(--or-bg);
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
}

.my-courses-hero-head p,
.courses-header-total {
  color: color-mix(in srgb, var(--or-bg) 42%, transparent);
  font-size: 11px;
  line-height: 1.35;
}

.courses-header-total {
  white-space: nowrap;
}

.my-courses-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  background: var(--soft);
}

.my-courses-board.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.my-courses-panel .private-practice-board,
.my-courses-panel .joined-market-courses {
  display: block;
  min-width: 0;
  padding: 26px 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.my-courses-panel .private-practice-board {
  border-right: 1px solid var(--bd);
}

.my-courses-board.is-single .private-practice-board {
  border-right: 0;
}

.my-courses-type-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin-bottom: 16px;
  padding: 4px 10px;
  border: 1px solid var(--bd);
  border-radius: 7px;
  background: var(--pg);
  color: var(--t2);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 700;
}

.my-courses-type-tag.is-exclusive {
  border-color: var(--or-bd);
  background: var(--or-bg);
  color: var(--or-d);
}

.my-courses-type-tag.is-standard {
  color: var(--t1);
}

.my-courses-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 20px;
}

.my-courses-stat-row div {
  min-width: 0;
}

.my-courses-stat-row strong {
  display: block;
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.my-courses-stat-row strong.is-exclusive {
  color: var(--or-d);
}

.my-courses-stat-row strong.is-standard {
  color: var(--t1);
}

.my-courses-stat-row span {
  display: block;
  margin-top: 4px;
  color: var(--t2);
  font-size: 11.5px;
  line-height: 1.25;
}

.private-practice-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0;
}

.my-courses-panel .private-practice-toolbar {
  align-items: stretch;
  margin: 0 0 16px;
}

.private-practice-toolbar .chip-row {
  flex: 1;
  flex-wrap: nowrap;
}

.my-courses-panel .private-practice-toolbar .chip-row {
  flex-wrap: wrap;
}

.private-practice-search {
  width: min(260px, 38%);
}

.my-courses-panel .private-practice-search {
  width: min(190px, 42%);
}

.my-courses-title-row,
.my-courses-heading-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.my-courses-title-copy {
  display: grid;
  gap: 0;
}

.my-courses-title-icon {
  color: var(--t1);
}

.my-courses-title-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.private-practice-date-list,
.my-course-standard-list,
.life-diary-list,
.review-list,
.payment-steps,
.membership-benefits,
.partner-rule-list {
  display: grid;
  gap: 10px;
}

.private-date-row,
.life-diary-entry {
  padding: 12px;
}

.private-date-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.my-courses-panel .private-date-row,
.my-courses-panel .standard-course-row {
  margin-bottom: 8px;
  border: 1px solid color-mix(in srgb, var(--bd) 76%, transparent);
  border-radius: 10px;
  background: var(--pg);
  box-shadow: 0 1px 6px rgb(31 35 41 / 0.06);
  transition: box-shadow 150ms, transform 150ms;
}

.my-courses-panel .private-date-row:hover,
.my-courses-panel .standard-course-row:hover {
  box-shadow: 0 4px 16px rgb(31 35 41 / 0.1);
  transform: translateY(-1px);
}

.my-courses-panel .private-date-row.is-featured {
  border-color: var(--or-bd);
}

.private-date-value {
  min-width: 0;
  color: var(--t3);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.private-date-value.is-today {
  color: var(--or-d);
}

.main:has(.my-daily-page) {
  min-height: 100dvh;
  overflow: visible;
  background: #F5F6F8;
}

.main:has(.my-daily-page) .main-inner {
  min-height: 100dvh;
  padding: 0;
}

.main:has(.my-daily-page) .main-top-sentinel {
  height: 0;
}

.my-daily-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-height: 100dvh;
  background: #fff;
  color: #333;
  font-family: Inter, "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.65;
}

.my-daily-header {
  flex: 0 0 auto;
  padding: 20px 24px 0;
  border-bottom: 1px solid #F0F1F3;
  background: #fff;
}

.my-daily-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.my-daily-title h2 {
  margin: 0;
  color: #333;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 750;
}

.my-daily-title p {
  margin: 4px 0 0;
  color: #999;
  font-size: 13px;
  line-height: 1.5;
}

.my-daily-stats {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 26px;
  text-align: right;
  white-space: nowrap;
}

.my-daily-stats strong {
  display: block;
  color: #999;
  font-size: 20px;
  line-height: 1;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.my-daily-stats strong.is-primary {
  color: #E8650A;
}

.my-daily-stats span {
  display: block;
  margin-top: 5px;
  color: #999;
  font-size: 10px;
  line-height: 1.2;
}

.my-daily-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
}

.my-daily-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
}

.my-daily-tab {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: #999;
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
}

.my-daily-tab:hover {
  background: #F5F6F8;
  color: #333;
}

.my-daily-tab.is-active {
  background: #E8650A;
  color: #fff;
}

.my-daily-search {
  width: min(270px, 36%);
}

.my-daily-search input {
  width: 100%;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #F0F1F3;
  border-radius: 999px;
  background: #fff;
  color: #333;
  font: inherit;
  outline: none;
}

.my-daily-search input:focus {
  border-color: #E8650A;
  box-shadow: 0 0 0 3px rgba(232, 101, 10, 0.1);
}

.my-daily-body {
  display: block;
  min-height: 0;
  background: #fff;
}

.my-daily-list {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  padding: 12px 24px 18px;
}

.my-daily-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 13px 16px;
  border: 1px solid #F0F1F3;
  border-radius: 10px;
  background: #fff;
}

.my-daily-date {
  color: #111827;
  font-size: 14px;
  line-height: 1;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.my-daily-date.is-today {
  color: #111827;
}

.my-daily-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.my-daily-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #F5F6F8;
  color: #999;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
}

.my-daily-tag.is-diary {
  background: #FFF0E4;
  color: #E8650A;
}

.my-daily-tag.is-breakdown {
  background: #EEF4FF;
  color: #4A7FE8;
}

.my-daily-progress {
  flex: 0 0 auto;
  color: #6B7280;
  font-size: 12px;
  line-height: 1.2;
}

.my-daily-preview {
  display: grid;
  gap: 2px;
  margin-top: 7px;
}

.my-daily-preview p {
  margin: 0;
  overflow: hidden;
  color: #111827;
  font-size: 13px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-daily-action {
  position: relative;
  min-width: 76px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 750;
}

.my-daily-preview .my-daily-search-result {
  white-space: normal;
  overflow-wrap: anywhere;
  padding: 6px 0;
}

.my-daily-search-result button {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--t1);
  font: inherit;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.my-daily-action.is-primary {
  background: #E8650A;
  color: #fff;
}

.my-daily-action.is-view {
  border-color: #F0F1F3;
  background: #F5F6F8;
  color: #999;
}

.private-date-row button.has-new-badge {
  position: relative;
  min-width: 86px;
  overflow: visible;
}

.my-daily-new-badge {
  position: absolute;
  top: -9px;
  right: -9px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #DF3E32;
  color: #fff;
  box-shadow: 0 2px 8px rgb(87 39 24 / 0.2);
  font-size: 12px;
  line-height: 18px;
  font-weight: 850;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.my-daily-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 240px;
  border: 1px dashed #F0F1F3;
  border-radius: 12px;
  color: #999;
}

.my-daily-pager {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px 14px;
  border-top: 1px solid #F0F1F3;
  background: #fff;
}

.page-meta {
  font-size: 13px;
  color: #aaa;
  white-space: nowrap;
  margin: 0;
}

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

.pg-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border: 0.5px solid #EAECEF;
  color: #888;
  cursor: pointer;
  background: #fff;
  flex-shrink: 0;
  padding: 0;
  user-select: none;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.pg-btn:hover {
  border-color: #C8611A;
  color: #C8611A;
}

.pg-btn:active {
  background: #F5F6F8;
}

.pg-btn.active {
  background: #C8611A;
  color: #fff;
  border-color: #C8611A;
  font-weight: 500;
}

.pg-btn.active:hover {
  color: #fff;
}

.pg-btn.disabled {
  color: #ddd;
  pointer-events: none;
  cursor: default;
}

.pg-ellipsis {
  font-size: 14px;
  color: #bbb;
  padding: 0 2px;
  user-select: none;
}

.private-date-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.private-date-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.private-date-progress {
  margin-top: 4px;
  color: var(--t3);
  font-size: 11.5px;
  line-height: 1.25;
}

.life-diary-entry button:first-child {
  display: grid;
  width: 100%;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.life-diary-delete,
.course-start-close,
.payment-dialog-close,
.profile-panel-close,
.review-remove {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--pg);
  color: var(--t2);
}

.daily-coach-quota {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  background: var(--or-sd);
}

.daily-coach-quota-top,
.daily-coach-quota-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--t2);
  font-size: 11.5px;
}

.daily-coach-quota-top strong {
  color: var(--or-d);
}

.daily-coach-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--or-bd);
  overflow: hidden;
}

.daily-coach-bar span {
  display: block;
  width: 36%;
  height: 100%;
  border-radius: inherit;
  background: var(--or);
}

.daily-coach-bar .quota-pct-0 { width: 0; }
.daily-coach-bar .quota-pct-10 { width: 10%; }
.daily-coach-bar .quota-pct-20 { width: 20%; }
.daily-coach-bar .quota-pct-30 { width: 30%; }
.daily-coach-bar .quota-pct-40 { width: 40%; }
.daily-coach-bar .quota-pct-50 { width: 50%; }
.daily-coach-bar .quota-pct-60 { width: 60%; }
.daily-coach-bar .quota-pct-70 { width: 70%; }
.daily-coach-bar .quota-pct-80 { width: 80%; }
.daily-coach-bar .quota-pct-90 { width: 90%; }
.daily-coach-bar .quota-pct-100 { width: 100%; }

.life-diary-recorder {
  display: grid;
  gap: 4px;
  justify-items: center;
  margin-bottom: 14px;
  height: 160px;
  padding: 14px;
  border: 1.5px solid #EAECEF;
  border-radius: 14px;
  background: #FFFFFF;
  text-align: center;
  align-content: center;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.life-diary-recorder.is-recording {
  border-color: #D55D09;
  background: #E8650A;
}

.life-diary-recorder.is-done {
  border-color: #A8DDB8;
  background: #F0FAF4;
}

.life-diary-idle-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #E8650A;
  box-shadow: 0 4px 14px rgba(232, 101, 10, 0.32);
  color: #fff;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}

.life-diary-idle-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.life-diary-recording-state { gap: 4px; }
.life-diary-channel-note.is-placeholder { visibility: hidden; }

.life-diary-recording-state,
.life-diary-done-state {
  display: grid;
  justify-items: center;
  width: 100%;
}

.life-diary-idle-button.life-diary-progress-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #E8650A;
  color: #fff;
  cursor: pointer;
}

.life-diary-progress-button { overflow: visible; }
.life-diary-wave {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  pointer-events: none;
}
.life-diary-wave.is-left { right: calc(100% + 18px); }
.life-diary-wave.is-right { left: calc(100% + 18px); }
.life-diary-wave i {
  display: block;
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: #fff;
  transform: scaleY(.25);
  animation: lifeDiaryWave .9s ease-in-out infinite;
}
.life-diary-wave i:nth-child(1) { animation-delay: 0s; }
.life-diary-wave i:nth-child(2) { animation-delay: .37s; }
.life-diary-wave i:nth-child(3) { animation-delay: .74s; }
.life-diary-wave i:nth-child(4) { animation-delay: .21s; }
.life-diary-wave i:nth-child(5) { animation-delay: .58s; }
.life-diary-wave i:nth-child(6) { animation-delay: .05s; }
@keyframes lifeDiaryWave {
  0%, 100% { transform: scaleY(.25); }
  50% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .life-diary-wave i { animation: none; transform: scaleY(.6); }
}

.life-diary-progress-ring {
  position: absolute;
  inset: 0;
  display: block;
  width: 56px !important;
  height: 56px !important;
  max-width: none;
  max-height: none;
  overflow: visible;
  pointer-events: none;
}

.life-diary-progress-ring circle {
  fill: none;
}

.life-diary-timer-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 0;
  border: 0;
  border-radius: 50%;
  background: #E8650A;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", sans-serif;
}

.life-diary-timer-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.life-diary-timer-number {
  color: #fff;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
}

.life-diary-timer-unit {
  color: rgba(255, 255, 255, 0.88);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  margin-top: 1px;
}

.life-diary-idle-circle {
  margin-bottom: 0;
}

.life-diary-idle-button:hover:not(:disabled) {
  transform: none;
  box-shadow: 0 6px 16px rgba(232, 101, 10, 0.36);
}

.life-diary-idle-button:active:not(:disabled) {
  transform: none;
  box-shadow: 0 3px 10px rgba(232, 101, 10, 0.28);
}

.life-diary-done-check {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 0 12px;
  border: 2.5px solid #2AA96A;
  border-radius: 999px;
  background: #2AA96A;
  color: #fff;
  animation: lifeDiaryDonePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes lifeDiaryDonePop {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.coach-record-button,
.mic-button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--or);
  border-radius: 999px;
  background: var(--or);
  color: var(--pg);
}

.mic-button.danger {
  border-color: var(--rd);
  background: var(--rd);
  grid-auto-flow: column;
  gap: 6px;
  width: 92px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.mic-button-text {
  line-height: 1;
  white-space: nowrap;
}

.life-diary-recorder strong {
  color: var(--t1);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.life-diary-recorder.is-recording strong {
  color: #fff;
}

.life-diary-recorder.is-done strong {
  color: #2AA96A;
}

.life-diary-recorder .life-diary-channel-note {
  margin: 0;
  color: #A3A8B0;
  font-size: 11px;
  line-height: 1.5;
}

.life-diary-recorder.is-recording .life-diary-channel-note {
  color: rgba(255, 255, 255, 0.72);
}

.life-diary-listening-tip {
  display: grid;
  min-height: 260px;
  align-content: center;
  justify-items: center;
  gap: 10px;
}

.life-diary-listening-wave {
  font-size: 36px;
  opacity: 0.2;
}

.life-diary-listening-tip p {
  margin: 0;
  color: #A3A8B0;
  font-size: 12px;
  line-height: 1.8;
  text-align: center;
}

.life-diary-listening-tip em {
  color: #E8A878;
  font-style: normal;
  font-weight: 500;
}

.waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 34px;
}

.waveform span {
  display: block;
  width: 4px;
  height: 12px;
  border-radius: 999px;
  background: var(--or);
}

.is-recording .waveform span {
  animation: wave 0.7s ease-in-out infinite alternate;
}

.is-recording .waveform span:nth-child(2) { animation-delay: 0.08s; }
.is-recording .waveform span:nth-child(3) { animation-delay: 0.16s; }
.is-recording .waveform span:nth-child(4) { animation-delay: 0.24s; }
.is-recording .waveform span:nth-child(5) { animation-delay: 0.32s; }

@keyframes wave {
  from { height: 8px; }
  to { height: 30px; }
}

.life-diary-field,
.sentence-breakdown-field,
.market-search,
.private-practice-search,
.private-practice-filter {
  display: grid;
  gap: 7px;
}

.life-diary-field span,
.sentence-breakdown-label,
.market-search span {
  color: var(--t2);
  font-size: 12.5px;
  font-weight: 600;
}

.life-diary-output,
.sentence-breakdown-output {
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  background: var(--soft);
}

.life-diary-sentence-list,
.split-structured-output,
.split-structured-output section {
  display: grid;
  gap: 12px;
}

.split-structured-output section + section {
  padding-top: 12px;
  border-top: 1px solid var(--bd);
}

.life-diary-result-sentence,
.split-study-item,
.split-meaning-card,
.split-note-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: var(--pg);
}

.life-diary-result-sentence strong {
  color: var(--or-d);
  font-size: 16px;
  line-height: 1.35;
}

.life-diary-result-sentence {
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 10px;
}

.life-diary-sentence-heading {
  display: contents;
}

.life-diary-sentence-heading strong {
  min-width: 0;
  overflow-wrap: anywhere;
  grid-column: 2;
}

.life-diary-result-sentence > p,
.life-diary-result-sentence > .life-diary-sentence-tags {
  grid-column: 2;
}

.life-diary-read-aloud {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  width: 28px;
  height: 28px;
  min-height: 0;
  margin-top: calc((16px * 1.35 - 28px) / 2);
  padding: 0;
  border: 1.5px solid #E8590C;
  border-radius: 50%;
  background: #fff;
  color: #E8590C;
  cursor: pointer;
}

.life-diary-read-aloud.is-playing {
  background: #E8590C;
  color: #fff;
}

.life-diary-read-aloud:focus-visible {
  outline: 2px solid #E8590C;
  outline-offset: 2px;
}

.life-diary-read-aloud svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.life-diary-read-bars {
  display: flex;
  align-items: center;
  gap: 1.5px;
}

.life-diary-read-bars i {
  width: 2px;
  height: 6px;
  border-radius: 1px;
  background: currentColor;
}

.life-diary-read-bars i:nth-child(2) { height: 11px; }
.life-diary-read-bars i:nth-child(3) { height: 8px; }
.life-diary-read-bars i:nth-child(4) { height: 5px; }

@media (max-width: 768px), (pointer: coarse) {
  .life-diary-read-aloud::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.life-diary-result-sentence p,
.split-study-item p,
.split-meaning-card p,
.split-note-card p,
.split-source-sentence,
.split-section-head span,
.split-favorite-note,
.saved-practice-bar span {
  color: var(--t2);
  font-size: 12.5px;
  line-height: 1.55;
}

.split-note-card p {
  margin: 0;
}

.split-meaning-card p {
  margin: 0;
}

.split-source-sentence {
  margin: 0;
  max-height: 8.5em;
  overflow: auto;
  padding-right: 6px;
  color: var(--t1);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.split-study-term {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
}

.split-study-term strong {
  color: var(--or-d);
  font-size: 14px;
  line-height: 1.3;
}

.split-study-ipa {
  color: var(--t3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
}

.life-diary-sentence-tags,
.split-favorite-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.life-diary-practice-tag,
.split-favorite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: var(--pg);
  color: var(--t2);
  font-size: 12px;
  font-weight: 600;
}

.life-diary-practice-tag:hover,
.split-favorite:hover {
  border-color: var(--or-bd);
  background: var(--or-bg);
  color: var(--or-d);
}

.split-favorite.is-saved {
  border-color: var(--or);
  background: var(--or);
  color: var(--pg);
}

.split-favorite svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.split-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.saved-practice-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--gr);
  border-radius: 12px;
  background: var(--gr-bg);
  color: var(--gr);
}

.saved-practice-bar div {
  display: grid;
  gap: 3px;
}

.saved-practice-bar strong {
  font-size: 13.5px;
  line-height: 1.35;
}

.saved-practice-action {
  flex: 0 0 auto;
  border-color: var(--gr);
  background: var(--gr);
  color: var(--pg);
}

.life-diary-output h3,
.sentence-breakdown-output h3 {
  margin: 14px 0 6px;
  color: var(--or-d);
}

.life-diary-output h3:first-child,
.sentence-breakdown-output h3:first-child {
  margin-top: 0;
}

.sentence-breakdown-item-gap {
  display: block;
  height: 8px;
}

.main:has(.sentence-breakdown-page) {
  overflow: hidden;
  background: #fff;
}

.main:has(.sentence-breakdown-page) .main-top-sentinel {
  display: none;
}

.main:has(.sentence-breakdown-page) .main-inner {
  height: 100dvh;
  min-height: 0;
  padding: 0;
}

.sentence-breakdown-page {
  display: flex;
  min-height: 100%;
  color: #333;
  background: #fff;
  font-family: Inter, "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 13px;
  line-height: 1.65;
}

.sentence-breakdown-left {
  display: flex;
  flex: 0 0 400px;
  flex-direction: column;
  gap: 20px;
  width: 400px;
  padding: 36px 28px;
  border-right: 1px solid #EAECEF;
  background: #fff;
}

.sentence-breakdown-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sentence-breakdown-title-row h2 {
  margin: 0;
  color: #333;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}

.sentence-breakdown-title-row span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid #FFD4A8;
  border-radius: 20px;
  background: #FFF0E4;
  color: #E8650A;
  font-size: 10px;
  font-weight: 700;
}

.sentence-breakdown-left > div > p {
  margin: 4px 0 0;
  color: #999;
  font-size: 12px;
}

.sentence-breakdown-input-card {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
}

.sentence-breakdown-input-card > span {
  color: #A3A8B0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}

.sentence-breakdown-input-card textarea {
  flex: 0 0 auto;
  height: 286px;
  min-height: 180px;
  padding: 14px 16px;
  border: 1.5px solid #EAECEF;
  border-radius: 12px;
  outline: 0;
  resize: none;
  background: #F5F6F8;
  color: #333;
  font: inherit;
  font-size: 16px;
  line-height: 1.75;
  transition: border-color .15s, background .15s;
}

.sentence-breakdown-input-card textarea:focus {
  border-color: #E8650A;
  background: #fff;
}

/* 拆解生成中锁定输入框边框/背景，避免流式重渲染时边框闪动（桌面+手机） */
.sentence-breakdown-input-card textarea.is-busy,
.sentence-breakdown-input-card textarea.is-busy:focus,
.sentence-breakdown-input-card textarea.is-busy:hover,
.sentence-breakdown-input-card textarea.is-busy:focus-visible {
  border-color: #EAECEF;
  background: #F5F6F8;
  outline: 0;
  transition: none;
  animation: none;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.sentence-breakdown-input-card textarea { box-sizing: border-box; width: 100%; }

.sentence-breakdown-input-card textarea::placeholder {
  color: #A3A8B0;
}

.sentence-breakdown-actions {
  display: flex;
  gap: 10px;
}

.sentence-breakdown-primary,
.sentence-breakdown-clear {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.sentence-breakdown-primary {
  flex: 0 1 180px;
  background: #E8650A;
  color: #fff;
}

.sentence-breakdown-primary:hover {
  background: #D55D09;
}

.sentence-breakdown-clear {
  padding: 0 20px;
  background: #F5F6F8;
  color: #999;
}

.sentence-breakdown-clear:hover {
  background: #EAECEF;
}

.sentence-breakdown-primary:disabled,
.sentence-breakdown-clear:disabled {
  cursor: not-allowed;
  opacity: .6;
}

.sentence-breakdown-right {
  flex: 1;
  min-width: 0;
  height: 100dvh;
  padding: 36px;
  overflow-y: auto;
  background: #fff;
}

.sentence-breakdown-result {
  display: grid;
  gap: 20px;
  max-width: 900px;
}

.sentence-breakdown-result > h3 {
  margin: 0;
  color: #333;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}

.breakdown-result-sections,
.breakdown-section,
.breakdown-sentence-list {
  display: grid;
  gap: 10px;
}

.breakdown-result-sections {
  gap: 22px;
  margin-top: 0;
  padding: 0;
  background: transparent;
}

.breakdown-result-sections section + section {
  padding-top: 0;
  border-top: 0;
}

.breakdown-section h3,
.breakdown-section-head h3 {
  margin: 0;
  color: #E8650A;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
}

.breakdown-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.breakdown-section-head span {
  color: #999;
  font-size: 10px;
}

.breakdown-overall-card,
.breakdown-sentence-card,
.breakdown-item-card,
.breakdown-note-card,
.breakdown-example-card {
  border: 1px solid #EAECEF;
  border-radius: 12px;
  background: #fff;
}

.breakdown-overall-card,
.breakdown-note-card,
.breakdown-example-card {
  padding: 16px 18px;
}

.breakdown-overall-card p,
.breakdown-sentence-card p,
.breakdown-item-card p,
.breakdown-note-card p,
.breakdown-example-card p {
  margin: 0;
}

.breakdown-overall-en {
  color: #333;
  font-size: 16px;
  line-height: 1.55;
}

.breakdown-overall-divider {
  height: 1px;
  margin: 8px 0;
  background: #F0F1F3;
}

.breakdown-overall-zh {
  color: #999;
  font-size: 13px;
  line-height: 1.7;
}

.breakdown-sentence-card {
  padding: 16px 18px;
  transition: border-color .2s, background .2s;
}

.breakdown-sentence-card.is-saved {
  border-color: #E8650A;
  background: #FFFAF7;
}

.breakdown-sentence-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.breakdown-sentence-text {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 5px;
}

.breakdown-sentence-num {
  color: #A3A8B0;
  font-size: 9px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .08em;
}

.breakdown-sentence-card.is-saved .breakdown-sentence-num {
  color: #E8A060;
}

.breakdown-sentence-text strong {
  color: #333;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
}

.breakdown-sentence-text p {
  color: #999;
  font-size: 13px;
  line-height: 1.65;
}

.breakdown-save-control {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding-top: 2px;
  color: var(--or-d);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.breakdown-save-control input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.breakdown-save-control i {
  position: relative;
  display: block;
  width: 38px;
  height: 22px;
  border-radius: 20px;
  background: #D5D8DD;
  pointer-events: none;
  transition: background .2s;
}

.breakdown-save-control i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  transition: transform .2s;
}

.breakdown-save-control input:checked + i {
  background: #E8650A;
}

.breakdown-save-control input:checked + i::after {
  transform: translateX(16px);
}

.breakdown-saved-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}

.breakdown-saved-actions .breakdown-save-status { margin-top: 0; }

button.practice-entry-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 30px;
  height: 30px;
  padding: 0 10px;
  border-radius: 20px;
  font-size: 12px;
  line-height: 18px;
  flex: 0 0 auto;
}

.practice-entry-action > .practice-entry-icon {
  display: block;
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  color: inherit;
  fill: currentColor;
  stroke: none;
}

@media (max-width: 767px) {
  .breakdown-saved-actions { gap: 8px; }
  .breakdown-saved-actions .breakdown-save-status { min-height: 30px; padding: 0 4px; gap: 5px; font-size: 11px; white-space: nowrap; }
  .breakdown-saved-actions .breakdown-save-status time { margin-left: 0; padding-left: 6px; }
  .breakdown-saved-actions > .practice-entry-action { margin-left: auto; }
}

.breakdown-save-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  margin-top: 12px;
  padding: 6px 10px;
  border-radius: 7px;
  background: var(--gr-bg);
  color: var(--gr);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.breakdown-save-status svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.breakdown-save-status time {
  flex-shrink: 0;
  margin-left: 3px;
  padding-left: 10px;
  border-left: 1px solid color-mix(in srgb, var(--gr) 25%, transparent);
  font-variant-numeric: tabular-nums;
}

.breakdown-item-card {
  display: grid;
  gap: 9px;
  padding: 14px 16px;
}

.breakdown-item-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.breakdown-item-title strong {
  color: #E8650A;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
}

.breakdown-item-title span {
  color: #999;
  font-size: 13px;
}

.breakdown-item-card p {
  color: #555;
  font-size: 13px;
  line-height: 1.65;
}

.breakdown-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.breakdown-star-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--or-bd);
  border-radius: 20px;
  background: var(--or-sd);
  color: var(--or-d);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.breakdown-star-btn:hover {
  border-color: var(--or);
  background: var(--or-bg);
}

.breakdown-star-btn.starred {
  border-color: var(--gr);
  background: var(--gr-bg);
  color: var(--gr);
}

.breakdown-item-footer > span {
  color: #A3A8B0;
  font-size: 10px;
}

.breakdown-note-card.is-grammar p {
  color: #555;
  font-size: 13px;
  line-height: 1.8;
}

.breakdown-note-card p + p {
  margin-top: 8px;
}

.breakdown-example-pair {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid #F0F1F3;
}

.breakdown-example-pair:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.breakdown-example-en {
  color: #333;
  font-size: 16px;
  line-height: 1.55;
}

.breakdown-example-zh {
  margin-top: 3px;
  color: #999;
  font-size: 13px;
  line-height: 1.65;
}

.course-cover,
.my-course-cover {
  display: grid;
  place-items: center;
  height: 104px;
  min-height: 104px;
  padding: 0;
  border-radius: 12px;
  background: var(--or-bg);
  color: var(--t1);
  overflow: hidden;
}

.course-cover-art {
  width: 100%;
  height: 104px;
  color: var(--or-d);
  opacity: 0.72;
}

.course-cover-image {
  height: 240px;
  background: var(--soft);
}

.course-cover-image img {
  width: 100%;
  height: 240px;
  object-fit: contain;
}

.cover-bubbles,
.cover-people {
  display: none;
}

.course-card,
.my-course-tile,
.market-card {
  display: grid;
  gap: 12px;
}

.my-course-tile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.standard-course-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.standard-course-section-head h2 {
  margin: 0;
  color: var(--t1);
  font-size: 15.5px;
  line-height: 1.35;
  font-weight: 600;
}

.standard-course-section-head span,
.my-course-standard-meta {
  color: var(--t2);
  font-size: 12.5px;
  line-height: 1.35;
}

.my-course-standard-tile {
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--pg);
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.my-course-standard-tile:hover {
  border-color: var(--or-bd);
  background: var(--or-bg);
}

.my-course-standard-tile h3 {
  font-size: 14px;
  font-weight: 500;
}

.my-course-standard-tile p {
  min-height: 34px;
  color: var(--t2);
  font-size: 12.5px;
  line-height: 1.35;
}

.my-course-standard-tile .progress {
  height: 6px;
}

.standard-course-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 13px 14px;
  border-top: 1px solid var(--bd);
}

.standard-course-row:first-child,
.my-courses-panel .standard-course-row:first-child {
  border-top: 0;
}

.standard-course-row-main {
  display: grid;
  gap: 8px;
}

.standard-course-row h3 {
  margin: 0;
  color: var(--t1);
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 700;
}

.standard-course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.standard-course-meta span,
.affiliate-type-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 7px;
  background: var(--or-bg);
  color: var(--or-d);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 600;
}

.standard-course-row-progress {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: var(--t3);
  font-size: 11.5px;
  line-height: 1.2;
}

.my-courses-panel .standard-course-row .progress {
  height: 4px;
}

.sentence-card,
.vocab-card {
  padding: 14px;
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--pg);
}

.sentence-main,
.vocab-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.review-practice-button {
  min-height: 36px;
  padding: 7px 12px;
  white-space: nowrap;
}

.review-item-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.review-item-foot .review-practice-button {
  margin-left: auto;
}

.review-item-foot .secondary {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
  white-space: nowrap;
}

.sentence-star,
.icon-action,
.sentence-audio {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--pg);
  color: var(--or-d);
}

.sentence-translation {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  background: var(--soft);
}

.membership-card.featured,
.membership-card.member-plan {
  border: 2px solid var(--or);
  background: var(--or-sd);
}

.membership-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.membership-card-foot {
  display: grid;
  margin-top: auto;
}

.membership-card-foot button {
  width: 100%;
}

.membership-card-foot button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.membership-tabs button {
  position: relative;
}

.membership-tabs button span {
  margin-left: 6px;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--or-bg);
  color: var(--or-d);
  font-size: 10px;
  line-height: 1;
}

.membership-price {
  color: var(--t1);
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.membership-price span,
.membership-price em {
  color: var(--t2);
  font-size: 13px;
  font-style: normal;
}

.membership-equivalent,
.membership-note {
  color: var(--t2);
  font-size: 12.5px;
}

.membership-benefits {
  margin: 0;
  padding-left: 18px;
}

.membership-faq-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.membership-faq-list article {
  padding: 12px;
  border-radius: 12px;
  background: var(--soft);
}

.membership-faq-list strong {
  display: block;
  margin-bottom: 4px;
  color: var(--t1);
  font-size: 13px;
}

.membership-page {
  min-height: calc(100dvh - 8px);
  margin: -24px -30px -38px;
  padding: 24px 30px 28px;
  background: #FFFFFF;
  color: #1F2329;
}

.membership-page-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.membership-hero {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.membership-hero h2 {
  max-width: 940px;
  margin: 0;
  color: #1F2329;
  font-size: 24px;
  line-height: 1.05;
  font-weight: 800;
}

.membership-hero p {
  color: #78716C;
  font-size: 12px;
  line-height: 1.35;
}

.membership-plan-tabs {
  width: min(340px, 100%);
  margin: 0 auto 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  background: #F5F5F4;
}

.membership-plan-tabs button {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #78716C;
  font-size: 16px;
  font-weight: 700;
}

.membership-plan-tabs button.active {
  background: #1C1917;
  color: #fff;
  box-shadow: none;
}

.membership-pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 20px;
}

.membership-plan-card {
  position: relative;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 0;
  border-radius: 16px;
  color: #1C1917;
}

.membership-plan-card.is-member {
  background: #FFFFFF;
  border: 2px solid #E8650A;
}

.membership-plan-card.is-lifetime {
  background: #1C1917;
  color: #FFFFFF;
}

.membership-ribbon {
  position: absolute;
  top: -13px;
  left: 20px;
  transform: none;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 12px;
  border-radius: 999px;
  background: #E8650A;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  box-shadow: none;
}

.membership-card-kicker {
  color: #78716C;
  font-size: 12px;
  line-height: 1.3;
}

.membership-plan-card .membership-price {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  color: #1C1917;
  font-size: 34px;
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: 0;
}

.membership-plan-card .membership-price span {
  padding-bottom: 6px;
  color: #1C1917;
  font-size: 0.7em;
}

.membership-plan-card .membership-price em {
  padding-bottom: 3px;
  color: #1C1917;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

.membership-plan-card .membership-note {
  color: #1C1917;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
}

.membership-plan-card .membership-benefits {
  display: grid;
  gap: 7px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.membership-plan-card .membership-benefits li {
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  color: #1C1917;
  font-size: 12.5px;
  line-height: 1.35;
}

.membership-plan-card .membership-benefits span[aria-hidden] {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  color: #1C1917;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.membership-plan-card .membership-card-foot {
  position: relative;
  display: grid;
  gap: 7px;
  margin-top: auto;
  text-align: center;
}

.membership-plan-card.is-lifetime .membership-benefits {
  margin-bottom: 33px;
}

.membership-dark-button {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: #E8650A;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}

.membership-dark-button:disabled {
  color: rgba(255, 255, 255, 0.7);
}

.membership-payment-notice {
  border-color: #EAECEF;
  background: #F5F6F8;
  color: #1F2329;
}

.membership-plan-tabs button:not(.active){color:#57534E}
.membership-plan-card .membership-price em{color:#78716C}
.membership-plan-card .membership-benefits span[aria-hidden]{color:#E8650A}
.membership-plan-card.is-lifetime .membership-card-kicker,.membership-plan-card.is-lifetime .membership-benefits span[aria-hidden]{color:#D9B26A}
.membership-plan-card.is-lifetime .membership-price,.membership-plan-card.is-lifetime .membership-price>span{color:#F0D9A8}
.membership-plan-card.is-lifetime .membership-price em{color:#A8A29E}
.membership-plan-card.is-lifetime .membership-note,.membership-plan-card.is-lifetime .membership-benefits li{color:#FFFFFF}
.membership-plan-card.is-lifetime .membership-dark-button{background:#D9B26A;color:#1C1917}
.membership-pricing-grid{scroll-margin-top:140px}

.partner-hero {
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid var(--or-bd);
  border-radius: 14px;
  background: var(--or-sd);
}

.partner-code-card {
  display: grid;
  gap: 4px;
  min-width: 150px;
  padding: 12px;
  border-radius: 12px;
  background: var(--pg);
}

.partner-code-card span {
  color: var(--t2);
  font-size: 11.5px;
}

.partner-code-card strong {
  color: var(--or-d);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.partner-stats,
.affiliate-summary-grid,
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.partner-stats article,
.affiliate-summary-grid article,
.metric {
  padding: 12px;
  border-radius: 12px;
  background: var(--soft);
}

.partner-stats strong,
.affiliate-summary-grid strong,
.metric strong,
.review-stat-card strong,
.home-num {
  display: block;
  color: var(--t1);
  font-size: 24px;
  line-height: 1.05;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.streak-hero {
  background: linear-gradient(135deg, var(--or) 0%, #D85E1A 100%);
  border-radius: 14px;
  padding: 18px;
  color: white;
  overflow: hidden;
}

.streak-hero-top {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 10px;
}

.streak-hero-divider {
  width: 1px;
  height: 42px;
  background: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.streak-hero-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 3px;
}

.streak-hero-count {
  font-size: 34px;
  font-weight: 900;
  color: white;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.streak-hero-unit {
  font-size: 15px;
  font-weight: 600;
  margin-left: 2px;
  letter-spacing: 0;
}

.streak-hero-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 13px;
}

.streak-hero .check-week {
  gap: 5px;
}

.streak-hero .check-day {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.85);
  min-height: 50px;
}

.streak-hero .check-day.ok {
  background: rgba(255, 255, 255, 0.9);
  border-color: transparent;
  color: var(--or-d);
}

.streak-hero .check-day.now {
  background: rgba(255, 255, 255, 0.25);
  border-color: white;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
  color: white;
}

.streak-hero .check-day.ok.now {
  background: white;
  color: var(--or-d);
}

.check-stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.check-stat-row div {
  padding: 12px;
  border-radius: 12px;
  background: var(--soft);
}

.check-stat-row span,
.month-check span,
.point-rule-list strong {
  color: var(--t2);
  font-size: 11.5px;
  font-weight: 600;
}

.check-stat-row strong {
  display: block;
  margin-top: 5px;
  color: var(--t1);
  font-size: 30px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.check-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}

.check-day {
  display: grid;
  place-items: center;
  gap: 5px;
  min-height: 58px;
  border: 1px dashed var(--bd);
  border-radius: 10px;
  background: var(--pg);
  color: var(--t2);
}

.check-day em,
.check-day strong {
  font-style: normal;
}

.check-day em {
  font-size: 11px;
}

.check-day strong {
  font-size: 13px;
}

.check-day.ok {
  border-style: solid;
  border-color: var(--gr);
  background: var(--gr-bg);
  color: var(--gr);
}

.check-day.now {
  border-style: solid;
  border-color: var(--or);
  box-shadow: 0 0 0 3px var(--or-bg);
  color: var(--or-d);
}

.month-check {
  gap: 8px;
}

.month-check div,
.point-rule-list span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.month-check strong,
.point-rule-list em {
  color: var(--or-d);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.today-task {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 68px;
  padding: 12px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: var(--pg);
  color: var(--t1);
  text-align: left;
}

.today-task-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--or-bg);
  color: var(--or-d);
}

.today-task-icon svg,
.mic-button svg,
.life-diary-timer-ring svg,
.life-diary-done-button svg,
.life-diary-done-check svg,
.nav-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.life-diary-timer-ring svg {
  width: 15px;
  height: 15px;
}

.life-diary-done-check svg {
  width: 22px;
  height: 22px;
}

.life-diary-idle-circle svg {
  width: 22px;
  height: 22px;
}

.today-task-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.today-task-copy strong {
  font-size: 13.5px;
}

.today-task-copy em {
  overflow: hidden;
  color: var(--t2);
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-reward {
  min-height: 24px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--or-bg);
  color: var(--or-d);
  font-size: 11.5px;
  font-weight: 700;
}

.today-task-action {
  color: var(--or-d);
  font-size: 12px;
  font-weight: 700;
}

.point-rule-list {
  gap: 8px;
  padding-top: 2px;
}

.legal-card ul,
.partner-rule-list {
  margin: 10px 0 0;
  padding-left: 18px;
}

.feedback-entry-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--or);
  color: #fff;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.auth-notice,
.payment-notice,
.empty-state,
.course-level-empty,
.my-course-empty {
  padding: 12px 14px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: var(--soft);
  color: var(--t2);
}

.auth-notice.warning {
  border-color: var(--or-bd);
  background: var(--or-bg);
  color: var(--or-d);
}

.auth-notice.recording {
  border-color: #efc29a;
  background: #fff3e8;
  color: #b74c0e;
  font-weight: 800;
}

.auth-notice.success,
.saved-bar,
.done {
  border-color: var(--gr);
  background: var(--gr-bg);
  color: var(--gr);
}

.dev-login-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--or-bd);
  border-radius: 12px;
  background: var(--or-sd);
  color: var(--t2);
  font-size: 12px;
}

.is-auth-page {
  background: var(--or-sd);
}

.is-auth-page .main {
  min-height: 100dvh;
  background: var(--or-sd);
}

.is-auth-page .main-inner {
  width: 100%;
  min-height: 100dvh;
  padding: 0;
}

.auth-page-shell {
  min-height: 100dvh;
  background: var(--or-sd);
}

.auth-login-page {
  display: grid;
  grid-template-columns: minmax(0, 50.8%) minmax(0, 49.2%);
  background: var(--pg);
}

.auth-login-visual {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  padding: clamp(24px, 3.333vw, 48px);
  background: linear-gradient(165deg, #0A0726 0%, #17105A 35%, #3A25B8 70%, #7B5CFF 100%);
}

.auth-panel-brand {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  color: #fff;
}

.auth-panel-brand img {
  display: block;
  height: 27px;
  width: auto;
}

.auth-panel-brand span {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

.auth-panel-message {
  position: absolute;
  top: calc(50% - 40px);
  right: 24px;
  left: 24px;
  transform: translateY(-50%);
  text-align: center;
  color: #fff;
}

.auth-panel-message h1 {
  margin: 0;
  color: #fff;
  font-size: 38.4px;
  font-weight: 700;
  line-height: 1.35;
}

.auth-panel-message h1 span { color: #F5C451; }

.auth-panel-cta {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  margin-top: 32px;
  padding: 12px 24px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 12.8px;
  line-height: 1.5;
  transition: background .15s ease;
}

.auth-panel-cta:hover { background: rgba(255,255,255,0.14); }

@media (max-width: 767px) {
  .auth-panel-brand img { height: 22.5px; }
  .auth-panel-brand span { font-size: 15.75px; }
}

.auth-login-main {
  justify-content: center;
  padding: 32px clamp(24px, 6vw, 84px);
  background: var(--pg);
}

.auth-login-content {
  width: min(440px, 100%);
}

.auth-login-content .auth-page-card {
  background: #fff;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .18), 0 3px 12px rgba(0, 0, 0, .06);
}

.auth-login-content .auth-page-card,
.auth-login-content .auth-bind-card {
  width: 100%;
}

.auth-page-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
  padding: 44px 20px 30px;
}

.auth-page-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 26px;
  color: var(--t1);
  text-decoration: none;
}

.auth-page-logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: contain;
}

.auth-page-brand span {
  display: grid;
  gap: 2px;
}

.auth-page-brand strong {
  font-size: 19px;
  line-height: 1.1;
  font-weight: 700;
}

.auth-page-brand em {
  color: var(--t2);
  font-size: 13px;
  line-height: 1.2;
  font-style: normal;
}

.auth-page-card {
  width: min(420px, 100%);
  padding: 24px;
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--pg);
}

.required-service-open, .required-service-open .main { overflow: hidden !important; }
.required-service-dialog { outline: none; width: 780px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 20px; background: #fff; color: #111; box-shadow: 0 30px 80px rgba(0, 0, 0, .25); overflow: auto; transition: opacity .25s; }
.required-service-dialog::backdrop { background: rgba(17, 17, 17, .42); transition: opacity .25s; }
.required-service-dialog.is-leaving, .required-service-dialog.is-leaving::backdrop { opacity: 0; }
.required-service-dialog svg { width: 20px; height: 20px; flex-shrink: 0; }
.required-service-content { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; padding: 40px 44px 32px; }
.required-service-intro { display: flex; flex-direction: column; }
.required-service-eyebrow { font-size: 13px; font-weight: 600; color: #E8590C; }
.required-service-intro h2 { margin: 10px 0 0; font-size: 28px; line-height: 1.3; font-weight: 700; letter-spacing: normal; }
.required-service-description { margin: 10px 0 0; font-size: 14px; color: #6B6B6B; }
.required-service-features { display: flex; flex-direction: column; gap: 18px; margin-top: 26px; }
.required-service-features > div { display: flex; gap: 14px; align-items: flex-start; }
.required-service-features > div > span { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: #F4F4F5; display: flex; align-items: center; justify-content: center; color: #E8590C; }
.required-service-features strong { font-size: 16px; font-weight: 600; }
.required-service-features p { margin: 3px 0 0; font-size: 13px; color: #8A8A8A; }
.required-service-sync { margin-top: auto; padding-top: 24px; font-size: 13px; color: #6B6B6B; display: flex; align-items: center; gap: 8px; }
.required-service-sync svg { width: 16px; height: 16px; color: #07A35A; }
.required-service-scan { display: flex; flex-direction: column; align-items: center; background: #F7F7F8; border-radius: 16px; padding: 28px 24px 24px; }
.required-service-code { width: 212px; height: 212px; flex-shrink: 0; box-sizing: border-box; background: #fff; border-radius: 14px; padding: 16px; position: relative; box-shadow: 0 1px 0 rgba(0, 0, 0, .04); }
.required-service-code img { display: block; width: 180px; height: 180px; }
.required-service-code.is-expired img { opacity: .25; }
.required-service-expired, .required-service-done, .required-service-preparing { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font-size: 14px; }
.required-service-expired { border-radius: 14px; background: rgba(255, 255, 255, .88); }
.required-service-expired button { border: 0; background: #E8590C; color: #fff; padding: 9px 18px; border-radius: 8px; font-size: 13px; }
.required-service-done { gap: 14px; font-size: 16px; }
.required-service-done > span { width: 64px; height: 64px; border-radius: 50%; background: #07C160; color: #fff; display: flex; align-items: center; justify-content: center; }
.required-service-done svg { width: 32px; height: 32px; stroke-width: 2.6; }
.required-service-scan-title { margin-top: 20px; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.required-service-scan-title svg { color: #07A35A; }
.required-service-scan-sub { margin: 6px 0 0; font-size: 13px; color: #6B6B6B; text-align: center; line-height: 1.6; white-space: pre-line; }
.required-service-wait { margin-top: 14px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: #9A9A9A; }
.required-service-wait span { width: 6px; height: 6px; border-radius: 50%; background: #07C160; }
.required-service-conflict { margin: 14px 0 0; color: #B54708; font-size: 13px; text-align: center; }
.required-service-footer { border-top: 1px solid #F0F0F0; padding: 14px 44px; display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: #8A8A8A; }
.required-service-footer button, .required-service-conflict button { padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.required-service-footer button:hover, .required-service-conflict button:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .required-service-content { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
  .required-service-scan { width: 280px; max-width: 100%; justify-self: center; }
  .required-service-intro h2 { font-size: 24px; }
  .required-service-footer { padding: 14px 24px; }
}
.required-service-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 20px; }
.required-service-actions a, .required-service-actions button { padding: 10px 12px; border: 1px solid var(--bd); border-radius: 10px; color: var(--t1); background: var(--soft); text-decoration: none; font-size: 13px; }
.required-service-actions .primary { background: var(--or); }
.required-service-actions [aria-disabled] { opacity: .5; pointer-events: none; }
.required-service-dialog.is-mobile { width: 400px; border-radius: 14px; }
.required-service-dialog.is-mobile .required-service-content { grid-template-columns: 1fr; padding: 24px 20px; gap: 18px; }
.required-service-dialog.is-mobile .required-service-intro h2 { font-size: 22px; }
.required-service-dialog.is-mobile .required-service-features,
.required-service-dialog.is-mobile .required-service-sync { display: none; }
.required-service-dialog.is-mobile .required-service-scan { box-sizing: border-box; width: 100%; padding: 20px 12px; }
.required-service-dialog.is-mobile .required-service-footer { padding: 14px 20px; }
.required-service-dialog.is-mobile .required-service-code img { -webkit-touch-callout: default; user-select: auto; -webkit-user-select: auto; }

.auth-segmented {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  padding: 4px;
  border-radius: 11px;
  background: var(--soft);
}

.auth-segmented button {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  padding: 9px 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--t2);
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
}

.auth-segmented button.active {
  background: var(--pg);
  color: var(--t1);
  font-weight: 600;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--t1) 9%, transparent);
}

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

.auth-card-heading {
  margin-bottom: 20px;
}

.auth-card-heading h2 {
  margin: 0 0 4px;
  color: var(--t1);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
}

.auth-card-heading p {
  margin: 0;
  color: var(--t2);
  font-size: 12.5px;
  line-height: 1.6;
}

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

.auth-field > span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--t2);
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 600;
}

.auth-field b {
  color: var(--rd);
  font-weight: 600;
}

.auth-field em {
  margin-left: auto;
  color: var(--t3);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 400;
}

.auth-field input,
.auth-target-row input,
.auth-phone-row input {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  outline: 0;
  background: var(--pg);
  color: var(--t1);
  font-size: 14.5px;
  line-height: 1;
}

.auth-field input::placeholder,
.auth-target-row input::placeholder,
.auth-phone-row input::placeholder {
  color: var(--t3);
}

.auth-field input:focus,
.auth-target-row input:focus,
.auth-phone-row input:focus {
  border-color: var(--or);
  background: var(--pg);
}

.auth-target-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.auth-send-button {
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--or-bd);
  border-radius: 10px;
  background: var(--pg);
  color: var(--or-d);
  font-size: 13.5px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
}

.auth-send-button:hover:not(:disabled) {
  background: var(--or-bg);
}

.auth-send-button:disabled {
  border-color: var(--bd);
  background: var(--soft);
  color: var(--t3);
  opacity: 1;
}

.auth-field small,
.auth-field-error {
  margin: 0;
  color: var(--t3);
  font-size: 11.5px;
  line-height: 1.6;
}

.auth-field-error {
  color: var(--rd);
}

.auth-forgot {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--or-d);
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 500;
}

.auth-agree-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 3px 0 1px;
  cursor: pointer;
}

.auth-agree-input {
  position: absolute;
  width: 17px;
  height: 17px;
  margin: 0;
  opacity: 0;
}

.auth-agree-box {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  border: 1.5px solid var(--t3);
  border-radius: 5px;
  background: var(--pg);
  color: var(--pg);
}

.auth-agree-box svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.6;
}

.auth-agree-input:checked + .auth-agree-box {
  border-color: var(--or);
  background: var(--or);
}

.auth-agree-copy {
  color: var(--t2);
  font-size: 12.5px;
  line-height: 1.6;
}

.auth-agree-copy button,
.auth-scan-consent button,
.auth-alt button,
.auth-page-footer button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--or-d);
  font: inherit;
}

.auth-scan-consent {
  margin: 0;
  color: var(--t2);
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
}

.auth-submit {
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: 10px;
  background: var(--or);
  color: var(--pg);
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
}

.auth-submit:hover:not(:disabled) {
  background: var(--or-d);
}

.auth-submit:disabled {
  background: var(--bd);
  color: var(--t3);
  opacity: 1;
}

.auth-alt {
  margin: 1px 0 0;
  color: var(--t2);
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
}

.auth-login-page .auth-alt {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--bd);
}

.auth-alt button {
  font-weight: 600;
}

.auth-scan {
  display: grid;
  justify-items: center;
}

.auth-qr-box {
  position: relative;
  display: grid;
  place-items: center;
  width: 186px;
  height: 186px;
  margin: 6px auto 16px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.auth-qr-expired {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(255, 255, 255, .94);
}

.auth-qr-box img {
  width: 166px;
  height: 166px;
  object-fit: contain;
}

.auth-qr-box button,
.auth-qr-expired button {
  padding: 8px 10px;
  border: 1px solid var(--or-bd);
  border-radius: 9px;
  background: var(--pg);
  color: var(--or-d);
  font-size: 12.5px;
  font-weight: 600;
}

.auth-qr-loading {
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--t2);
  font-size: 12.5px;
}

.auth-qr-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--bd);
  border-top-color: var(--or);
  border-radius: 999px;
  animation: spin 0.9s linear infinite;
}

.auth-scan h3 {
  margin: 0 0 4px;
  color: var(--t1);
  font-size: 13.5px;
  line-height: 1.4;
  font-weight: 600;
  white-space: nowrap;
}

.auth-scan-legal,
.auth-scan-status {
  margin: 0 0 18px;
  color: var(--t2);
  text-align: center;
  font-size: 12.5px;
  line-height: 1.6;
}

.auth-page-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  width: min(420px, 100%);
  margin-top: 26px;
  color: var(--t3);
  text-align: center;
  font-size: 11.5px;
  line-height: 1.9;
}

.auth-page-footer a,
.auth-page-footer button {
  color: var(--t3);
  text-decoration: none;
}

@media (max-width: 760px) {
  .auth-login-page {
    display: block;
  }

  .auth-login-visual {
    display: none;
  }

  .auth-login-main {
    justify-content: flex-start;
    padding: 24px 16px;
  }

  .auth-login-content {
    width: 100%;
  }
}

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

.payment-dialog {
  width: min(820px, 100%);
}

.payment-dialog-body {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 18px;
}

.payment-dialog-price {
  color: var(--or-d);
  font-size: 34px;
  font-weight: 700;
}

.payment-dialog-qr {
  display: grid;
  place-items: center;
  min-height: 220px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: var(--soft);
}

.payment-dialog-qr img,
.payment-qr-panel img {
  width: 190px;
  height: 190px;
}

.payment-history {
  margin-top: 14px;
}

.payment-history > div {
  display: grid;
  gap: 10px;
}

.payment-history article {
  padding: 12px;
  border-radius: 12px;
  background: var(--soft);
}

.practice-mode-row,
.course-calendar-rail,
.affiliate-main,
.affiliate-side,
.cover-faq-list,
.landing-footer {
  display: grid;
  gap: 14px;
}

.practice-mode-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
}

.course-calendar {
  padding: 18px;
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--pg);
}

.course-calendar-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  text-align: center;
}

.course-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.course-calendar-grid span,
.course-calendar-grid button {
  display: grid;
  place-items: center;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--t2);
  font-size: 11.5px;
}

.course-calendar-grid button.has-entry {
  background: var(--or-bg);
  color: var(--or-d);
  font-weight: 700;
}

.review-timeline {
  display: grid;
  grid-template-columns: repeat(11, auto);
  align-items: start;
  gap: 12px;
  margin-top: 24px;
  overflow-x: auto;
  padding: 5px 2px 10px;
}

.timeline-node {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 86px;
  color: var(--t2);
  text-align: center;
  font-size: 12px;
}

.timeline-node i {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: var(--bd);
}

.timeline-node.ok i {
  background: var(--gr);
}

.timeline-node.now i {
  background: var(--or);
  box-shadow: 0 0 0 6px var(--or-bg);
}

.timeline-node strong {
  color: var(--t1);
  font-size: 14px;
  line-height: 1.2;
}

.timeline-node em {
  color: var(--t2);
  font-size: 12px;
  font-style: normal;
  line-height: 1.25;
}

.timeline-gap {
  min-width: 56px;
  margin-top: 11px;
  padding-top: 8px;
  border-top: 1px solid var(--bd);
  color: var(--t3);
  text-align: center;
  font-size: 12px;
  font-weight: 600;
}

.review-stat-card {
  display: grid;
  gap: 6px;
}

.review-stat-card p {
  color: var(--t2);
  font-size: 12px;
}

.review-test-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.review-filters {
  justify-content: space-between;
  margin: 14px 0;
}

.market-more {
  min-height: 30px;
  padding: 6px 10px;
}

.market-toolbar {
  margin: 14px 0;
}

.market-category-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
}

.market-search {
  min-width: 260px;
}

.market-course-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.review-dots {
  display: flex;
  gap: 6px;
  margin: 12px 0;
}

.review-dots span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--bd);
}

.review-dots span.active {
  background: var(--or);
}

.review-page-head,
.review-template-shell {
  width: 100%;
  max-width: none;
}

.review-page-head {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
}

.review-page-head h2 {
  margin: 0;
  color: #1F2329;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
}

.review-page-head p {
  color: #80858F;
  font-size: 12px;
}

.review-template-shell {
  display: grid;
  gap: 14px;
}























.review-template-shell > .chip-row {
  gap: 8px;
}

.review-template-shell > .chip-row .chip {
  min-height: 38px;
  padding-inline: 18px;
  border-radius: 12px;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
}

.review-today-list,
.review-all-list {
  display: grid;
  gap: 10px;
}

.review-today-list {
  padding: 8px 0 2px;
}












.review-date-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  color: #80858F;
  font-size: 12px;
  font-weight: 800;
}

.review-date-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #EAECEF;
}

.review-template-card {
  min-height: 220px;
  padding: 18px;
  border-radius: 18px;
  background: #fff;
}

.review-template-card h3 {
  margin-top: 8px;
  color: #1F2329;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 800;
}

.review-template-card > .muted {
  color: #80858F;
  font-size: 13px;
  line-height: 1.65;
}

.review-template-empty {
  padding: 24px;
  border: 1px dashed #E4E7EB;
  border-radius: 16px;
  background: #fff;
  color: #80858F;
  text-align: center;
}

.va-wrap {
  background: #F5F6F8;
  min-height: calc(100dvh - 72px);
  margin: -14px -12px -20px;
  padding: 18px 24px 22px;
  color: #333;
}

.va-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 14px;
}

.va-title {
  color: #1a1a1a;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.va-subtitle {
  margin-top: 4px;
  color: #888;
  font-size: 13px;
}

.va-badge {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, #e8652a, #f59940);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.va-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas:
    "link rate"
    "detail rules";
  gap: 14px;
  align-items: stretch;
}

.va-grid-unpaid {
  grid-template-areas:
    "link rate"
    "link rules";
}

.va-left,
.va-right {
  display: contents;
}

.va-link-card {
  grid-area: link;
  align-self: start;
}

.va-stat[data-invitation-filter] { border: 0; border-radius: 0; text-align: left; cursor: pointer; }
.va-stat[data-invitation-filter]:hover { background: var(--soft); }
.invitation-muted, .invitation-person span { color: var(--t2); font-size: 13px; }
.invitation-filters, .invitation-pagination { display: flex; align-items: center; gap: 14px; margin: 18px 0; flex-wrap: wrap; }
.invitation-filters button, .invitation-pagination button, [data-invitation-refresh] { border: 1px solid var(--bd); border-radius: 10px; background: var(--pg); color: var(--t1); padding: 8px 14px; cursor: pointer; }
.invitation-filters [aria-pressed="true"] { color: var(--or-d); background: var(--or-bg); border-color: var(--or-bd); }
.invitation-person { border-top: 1px solid var(--bd); }
.invitation-person summary { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 14px; align-items: center; padding: 18px 0; cursor: pointer; }
.invitation-person summary div { display: grid; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.invitation-person-body { padding: 0 0 18px; font-size: 14px; }
.invitation-orders { display: grid; gap: 14px; }
.invitation-order { border-radius: 14px; background: var(--soft); padding: 18px; overflow-wrap: anywhere; }
.invitation-order > div { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.invitation-order p { margin: 8px 0 0; }
.invitation-empty { padding: 28px 0; color: var(--t2); }
.binding-spinner { display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: binding-spin .8s linear infinite; }
@keyframes binding-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .binding-spinner { animation: none; } }
@media (max-width: 700px) {
  .invitation-person summary { grid-template-columns: 1fr 1fr; }
  .invitation-person summary > div:first-child { grid-column: 1 / -1; }
  .invitation-filters { gap: 8px; }
}

.va-commission-card {
  grid-area: detail;
}

.va-rate-card {
  grid-area: rate;
}

.va-rule-card {
  grid-area: rules;
}

.va-card {
  height: 100%;
  padding: 16px;
  border: 1px solid #EAECEF;
  border-radius: 16px;
  background: #fff;
}

.va-grid-unpaid .va-link-card .va-upgrade-btn {
  width: auto;
  min-width: 142px;
  padding-left: 18px;
  padding-right: 18px;
}

.va-link-label {
  margin-bottom: 10px;
  color: #aaa;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.va-link-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.va-link-input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border: 1.5px solid #EAECEF;
  border-radius: 10px;
  background: #F5F6F8;
  color: #555;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "SF Mono", Consolas, monospace;
  font-size: 13px;
}

.va-link-btns {
  display: flex;
  gap: 8px;
}

.va-btn-primary,
.va-btn-secondary {
  min-height: 43px;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.va-btn-primary {
  border: 0;
  background: #e8652a;
  color: #fff;
}

.va-btn-secondary {
  border: 2px solid #e8652a;
  background: #fff;
  color: #e8652a;
}

.va-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin-top: 12px;
  border-radius: 12px;
  background: #F0F1F3;
  overflow: hidden;
}

.va-stat {
  padding: 12px 14px;
  background: #fff;
}

.va-stat-label {
  margin-bottom: 6px;
  color: #aaa;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.va-stat-val {
  color: #1a1a1a;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.va-stat-val.orange {
  color: #e8652a;
}

.va-section-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.va-section-title {
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 700;
}

.va-section-meta {
  color: #aaa;
  font-size: 12px;
}

.va-empty-state {
  padding: 20px 16px;
  text-align: center;
}

.va-empty-icon {
  margin-bottom: 6px;
  font-size: 28px;
}

.va-empty-title {
  margin-bottom: 6px;
  color: #333;
  font-size: 15px;
  font-weight: 600;
}

.va-empty-desc {
  color: #aaa;
  font-size: 13px;
  line-height: 1.6;
}

.va-table {
  width: 100%;
  border-collapse: collapse;
}

.va-table th {
  padding: 8px 12px;
  color: #aaa;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-align: left;
  text-transform: uppercase;
}

.va-table td {
  padding: 8px 10px;
  border-top: 1px solid #F0F1F3;
  font-size: 14px;
}

.va-table tr.highlight td {
  background: #fff8f4;
}

.va-highlight-tag {
  display: inline-flex;
  margin-top: 4px;
  padding: 2px 7px;
  border-radius: 10px;
  background: #e8652a;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
}

.va-pct {
  color: #e8652a;
  font-size: 18px;
  font-weight: 700;
}

.va-pct-gray {
  color: #888;
  font-size: 18px;
  font-weight: 700;
}

.va-role {
  font-size: 14px;
  font-weight: 600;
}

.va-role-muted {
  color: #999;
}

.va-table-note {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #F0F1F3;
  color: #bbb;
  font-size: 11px;
  line-height: 1.6;
}

.va-upgrade-btn {
  width: 100%;
  margin-top: 10px;
  padding: 11px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #e8652a, #f59940);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.va-limits {
  margin-top: 4px;
}

.va-limit-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #F0F1F3;
  color: #666;
  font-size: 12px;
  line-height: 1.5;
}

.va-limit-item:last-child {
  border-bottom: 0;
}

.va-limit-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  margin-top: 5px;
  border-radius: 50%;
  background: #e8652a;
}

.va-card-copy {
  margin: 8px 0 2px;
  color: #888;
  font-size: 13px;
  line-height: 1.7;
}

.affiliate-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 356px;
  gap: 16px;
  align-items: start;
}

.affiliate-copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.partner-link-box {
  padding: 12px;
  border-radius: 12px;
  background: var(--soft);
  color: var(--t1);
  overflow-wrap: anywhere;
}

.affiliate-total {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--t2);
  font-size: 12.5px;
}

.affiliate-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 12.5px;
}

.affiliate-table th,
.affiliate-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--bd);
  text-align: left;
}

.affiliate-table th {
  color: var(--t2);
  font-weight: 600;
}

.affiliate-table td strong {
  color: var(--t1);
}

.affiliate-empty {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 18px;
  border: 1px dashed var(--or-bd);
  border-radius: 12px;
  background: var(--soft);
  color: var(--t2);
}

.affiliate-empty strong {
  color: var(--t1);
}

.inline-notice {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--or-sd);
  color: var(--or-d);
  font-weight: 700;
}

.partner-poster-preview {
  position: relative;
  width: min(390px, calc(100vw - 50px), calc((100dvh - 70px) * .6));
  aspect-ratio: 390 / 650;
  container-type: inline-size;
}

.partner-poster-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: contain;
  border-radius: 20px;
  box-shadow: 0 18px 42px rgba(31,35,41, 0.16);
  -webkit-touch-callout: default;
  user-select: auto;
}

.partner-poster-panel { position: relative; width: fit-content; padding-top: 40px; }
.partner-poster-close { position: absolute; right: 8px; top: 4px; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--t1); font-size: 18px; }
.partner-poster-preview.is-loaded img { opacity: 1; }
.partner-poster-preview.is-loaded .partner-poster-instant { visibility: hidden; }
.partner-poster-instant { height: 100%; border-radius: 20px; overflow: hidden; background: white; color: var(--t1); font-size: 3.4cqw; }
.poster-instant-head { height: 35.4%; background: var(--or); color: white; padding: 7%; }
.poster-instant-head strong { font-size: 5cqw; }
.poster-instant-head h2 { color: white; font-size: 9cqw; line-height: 1.2; margin: 7% 0 5%; }
.poster-instant-head p { margin: 0; font-size: 3.2cqw; }
.poster-instant-features { height: 39.6%; padding: 5% 7%; }
.poster-instant-features p { margin: 0; height: 33.33%; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--bd); }
.poster-instant-features span { display: block; color: var(--t2); font-size: 3cqw; margin-top: 5px; }
.poster-instant-foot { margin: 0 4%; padding: 5%; height: 22%; border-radius: 16px; background: var(--or); color: white; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.poster-instant-foot strong { font-size: 5cqw; }
.poster-instant-foot span { width: 31%; aspect-ratio: 1; display: grid; place-items: center; text-align: center; padding: 6px; background: white; color: var(--t2); border-radius: 10px; font-size: 3cqw; }

.partner-poster-loading {
  display: grid;
  min-height: 220px;
  place-items: center;
  color: var(--t2);
  font-weight: 700;
}

.affiliate-rate-card {
  background: var(--or-sd);
}

.affiliate-rate-card > .primary {
  width: 100%;
}

.affiliate-rate-table {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--or-bd);
  border-radius: 12px;
  background: var(--pg);
}

.affiliate-rate-table > div {
  display: grid;
  grid-template-columns: 1fr 72px 112px;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 12px;
  border-top: 1px solid var(--or-bd);
  color: var(--t2);
}

.affiliate-rate-table > div:first-child {
  min-height: 38px;
  border-top: 0;
  color: var(--t2);
  font-size: 12px;
  font-weight: 700;
}

.affiliate-rate-table > div.active {
  background: var(--or-bg);
}

.affiliate-rate-table strong {
  color: var(--or-d);
  font-size: 15px;
}

.affiliate-rate-table em {
  display: inline-flex;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--or-bg);
  color: var(--or-d);
  font-size: 10.5px;
  font-style: normal;
}

.landing-page main {
  display: grid;
  gap: 24px;
  padding: 0 clamp(20px, 5vw, 64px) 42px;
}

.landing-footer {
  grid-template-columns: repeat(5, auto);
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-top: 1px solid var(--bd);
  color: var(--t2);
  font-size: 12.5px;
}

.landing-footer button {
  border: 0;
  background: transparent;
  color: var(--t2);
}

/* 练习页夜间模式 */
body[data-practice-theme="dark"] {
  --pg: #181A1F;
  --t1: #E4E7EB;
  --t2: #80858F;
  --t3: #5F6570;
  --bd: #2F333A;
  --soft: #101216;
  --panel: #1F2329;
  --or-bd: #3A2810;
  --or-sd: rgba(200, 100, 20, .10);
}

.practice-shell {
  position: relative;
  height: 100dvh;
  min-height: 100dvh;
  background: var(--pg);
  overflow: hidden;
}

.practice-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  height: 62px;
  padding: 0 10px 0 28px;
  border-bottom: 1px solid var(--bd);
  background: var(--pg);
}

.practice-path {
  min-width: 0;
  overflow: hidden;
  color: var(--t2);
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.practice-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
}

.practice-mode-label {
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
}

.practice-mode-select {
  width: auto;
  min-width: 96px;
}

.practice-controls {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 24px);
  padding: 7px 9px;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: var(--pg);
  box-shadow: 0 14px 34px rgba(31,35,41, 0.12);
  transform: translateX(-50%);
}

/* 底部快捷条按钮（A 方案：Ctrl 徽章 + 文字，四个统一，无橘色）*/
.practice-controls .control-button {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: var(--pg);
  color: var(--t1);
  font-size: 14px;
  font-weight: 600;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, filter 0.12s ease;
}

.practice-controls .control-button:active {
  transform: scale(0.94);
  filter: brightness(0.94);
}

.practice-controls .control-button:hover {
  border-color: var(--or-bd);
  background: var(--or-sd);
}

.practice-controls .favorite-action.is-saved {
  border-color: rgba(46, 139, 79, 0.24);
  background: var(--gr-bg);
  color: var(--gr);
}

.practice-controls .favorite-action.is-saved kbd {
  border-color: rgba(46, 139, 79, 0.22);
  color: var(--gr);
}

.practice-controls .control-button kbd {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid var(--bd);
  border-radius: 6px;
  padding: 3px 7px;
  color: var(--t2);
  background: #fff;
}

.practice-controls .arrow-control {
  width: 40px;
  padding: 0;
  justify-content: center;
  color: var(--t3);
  font-size: 18px;
}

.dictation-stage {
  position: relative;
  display: grid;
  grid-template-rows: 6px 156px minmax(0, 1fr);
  align-content: start;
  justify-items: center;
  height: calc(100dvh - 62px);
  padding: 0 18px 88px;
  background: var(--soft);
  overflow: hidden;
}

body:not([data-practice-theme="dark"]) .practice-shell,
body:not([data-practice-theme="dark"]) .practice-topbar,
body:not([data-practice-theme="dark"]) .dictation-stage {
  background: #fff;
}

body:not([data-practice-theme="dark"]) .practice-controls {
  background: rgba(255, 255, 255, .94);
}

.dictation-stage > :not(.grid-bg) {
  position: relative;
  z-index: 1;
}

.grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.practice-progress-panel {
  position: relative;
  z-index: 1;
  width: 100%;
}

.practice-progress-track {
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 999px;
}
.practice-progress-track::-webkit-progress-bar {
  background: #eef2f4;
  border-radius: 999px;
}
.practice-progress-track::-webkit-progress-value {
  background: #10a979;
  border-radius: 999px;
}
.practice-progress-track::-moz-progress-bar {
  background: #10a979;
  border-radius: 999px;
}

.dictation-card {
  display: grid;
  align-self: start;
  justify-items: center;
  gap: clamp(28px, 5vh, 52px);
  width: min(1040px, 100%);
  margin-top: clamp(70px, 9vh, 116px);
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
}

.zh-prompt {
  color: var(--t1);
  font-size: 24px;
  text-align: center;
}

.blank-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px 18px;
  max-width: 1040px;
  margin-top: 0;
}

.dictation-token {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
}

.dictation-field {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  width: calc(var(--blank-ch, 5) * 1ch + 6px);
  inline-size: calc(var(--blank-ch, 5) * 1ch + 6px);
  padding-bottom: 10px;
}

.dictation-blank {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 100%;
  height: 1.22em;
  min-height: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-size: var(--practice-font-size, 2rem);
  line-height: 1.22;
  color: transparent;
  caret-color: var(--t1);
}

.dictation-display {
  position: absolute;
  inset: 0 0 10px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 2px;
  color: var(--t1);
  font-size: var(--practice-font-size, 2rem);
  line-height: 1.28;
  overflow: visible;
  pointer-events: none;
  white-space: nowrap;
}

.dictation-line {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 99px;
  background: var(--t3);
}

.dictation-field:focus-within .dictation-line {
  background: var(--or);
}

.dictation-blank.wrong {
  caret-color: var(--rd);
}

.dictation-display.wrong {
  color: var(--rd);
}

.dictation-blank.wrong ~ .dictation-line,
.dictation-field:focus-within .dictation-blank.wrong ~ .dictation-line {
  background: var(--rd);
}

.practice-feedback,
.audio-status {
  text-align: center;
  color: var(--t2);
}

.practice-answer-slot {
  display: grid;
  align-items: start;
  justify-items: center;
  width: calc(100vw - 96px);
  height: auto;
  min-height: 0;
  padding-top: 14px;
  pointer-events: auto;
}

.correct-review,
.answer-analysis {
  width: min(980px, 100%);
}

.answer-analysis {
  padding: 14px;
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--pg);
}

/* ===== 答案卡片（版本5 柔彩渐变）：音标在上 · 单词 · 实线下划线 · 无语法 ===== */
.answer-analysis.answer-cards-wrap {
  padding: 0;
  border: 0;
  background: transparent;
}

.answer-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
}

.answer-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 9px 14px 11px;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(31,35,41, .08);
  transition: transform .14s ease, box-shadow .14s ease;
}

.answer-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(31,35,41, .14);
}

.answer-card:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 2px;
}

.ac-ipa {
  display: block;
  min-height: 1.1em;
  font-style: normal;
  line-height: 1.1;
  font-size: 12px;
}

.ac-word {
  font-weight: 700;
  line-height: 1.15;
  color: var(--t1);
  font-size: 21px;
}

.ac-comma {
  color: var(--t3);
  font-weight: 700;
}

.ac-rule {
  height: 3px;
  border-radius: 99px;
  width: 64%;
  margin-top: 7px;
}

.answer-card:nth-child(5n+1) { background: linear-gradient(160deg, #FFF1E6, #FFE6D2); border-color: #F6D8BE; }
.answer-card:nth-child(5n+1) .ac-ipa { color: #C2641B; }
.answer-card:nth-child(5n+1) .ac-rule { background: #EE8B3C; }
.answer-card:nth-child(5n+2) { background: linear-gradient(160deg, #EAF6EF, #D9EFE1); border-color: #C7E6D2; }
.answer-card:nth-child(5n+2) .ac-ipa { color: #1E8A5E; }
.answer-card:nth-child(5n+2) .ac-rule { background: #2FB57E; }
.answer-card:nth-child(5n+3) { background: linear-gradient(160deg, #EAF1FC, #D9E6F8); border-color: #C6D9F2; }
.answer-card:nth-child(5n+3) .ac-ipa { color: #2C6FC7; }
.answer-card:nth-child(5n+3) .ac-rule { background: #4E8DE0; }
.answer-card:nth-child(5n+4) { background: linear-gradient(160deg, #F3ECFB, #E7DBF6); border-color: #DBCBF0; }
.answer-card:nth-child(5n+4) .ac-ipa { color: #7A4FC0; }
.answer-card:nth-child(5n+4) .ac-rule { background: #9A73D9; }
.answer-card:nth-child(5n+5) { background: linear-gradient(160deg, #FCECF1, #F7DBE4); border-color: #F1C9D6; }
.answer-card:nth-child(5n+5) .ac-ipa { color: #C13B69; }
.answer-card:nth-child(5n+5) .ac-rule { background: #E06089; }

/* 答题中（顶部答案槽）：卡片小一点，别跟中文一样大 */
.practice-answer-slot .answer-analysis {
  width: 100%;
  max-width: 100%;
}
.practice-answer-slot .answer-cards {
  width: 100%;
  justify-content: center;
}
.practice-answer-slot .answer-card {
  min-height: 74px;
  padding: 7px 11px 9px;
}
.practice-answer-slot .ac-ipa { font-size: 11.5px; }
.practice-answer-slot .ac-word { font-size: 19px; }
.practice-answer-slot .ac-rule { display: none; }

/* 答对/完成：整句单独放大显示 */
.dictation-card.is-reviewing {
  width: calc(100vw - 96px);
}

.correct-review {
  width: 100%;
}

.practice-completion-notice {
  width: min(520px, 100%);
  margin: 16px auto 0;
  padding: 10px 16px;
  border: 1px solid var(--or-bd);
  border-radius: 20px;
  background: var(--or-bg);
  color: var(--or-d);
  text-align: center;
  font-weight: 700;
}

.practice-completion-notice.is-review-complete {
  width: min(620px, 100%);
  padding: 16px 22px;
  border-color: rgba(34, 197, 94, .42);
  background: rgba(34, 197, 94, .12);
  color: #15803d;
  font-size: 26px;
  box-shadow: 0 18px 42px rgba(34, 197, 94, .12);
}

.practice-favorite-notice {
  position: fixed;
  left: 50%;
  bottom: 78px;
  z-index: 21;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin: 0;
  padding: 0 18px;
  border: 1px solid rgba(46, 139, 79, 0.24);
  border-radius: 20px;
  background: var(--gr-bg);
  color: var(--gr);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(31,35,41, 0.12);
  transform: translateX(-50%);
}

.review-completion-shell {
  min-height: 100dvh;
  overflow: hidden;
  background: radial-gradient(ellipse at 60% 10%, #0e1f3a 0%, #070e22 55%, #030810 100%);
  box-sizing: border-box;
}

.review-completion-scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: radial-gradient(ellipse at 60% 10%, #0e1f3a 0%, #070e22 55%, #030810 100%);
}

.review-completion-scene canvas#reviewCompletionFw {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.review-completion-scene .stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.review-completion-scene .star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: twinkle var(--td) ease-in-out infinite var(--tdel);
}

.review-completion-scene .center {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.review-completion-scene .card {
  width: 400px;
  max-width: calc(100vw - 36px);
  padding: 44px 36px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
  border-radius: 28px;
  background: #eef3fb;
  box-shadow:
    0 0 0 1px rgba(120, 170, 255, 0.18),
    0 32px 80px rgba(0, 8, 32, 0.75),
    0 0 80px rgba(60, 120, 240, 0.18);
  animation: card-in 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.05s;
  box-sizing: border-box;
}

.review-completion-scene .ring {
  width: 72px;
  height: 72px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid #3a7bd5;
  border-radius: 50%;
  animation: pulse 2.8s ease-in-out infinite;
}

.review-completion-scene .ring svg {
  width: 28px;
  height: 28px;
}

.review-completion-scene .tag {
  margin-bottom: 10px;
  color: #3a7bd5;
  font-size: 12px;
  letter-spacing: 0.3px;
}

.review-completion-scene .ttl {
  margin-bottom: 12px;
  color: #0c1a38;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: center;
}

.review-completion-scene .sub {
  color: #7d96bc;
  font-size: 13px;
  line-height: 1.8;
  text-align: center;
}

.review-completion-scene .stats-wrap {
  width: 100%;
  margin: 24px 0;
  border-top: 1px solid #dce8f5;
  border-bottom: 1px solid #dce8f5;
}

.review-completion-scene .stats {
  display: flex;
  width: 100%;
  padding: 20px 0;
}

.review-completion-scene .stat {
  position: relative;
  flex: 1;
  text-align: center;
}

.review-completion-scene .stat + .stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  width: 1px;
  height: 80%;
  background: #dce8f5;
}

.review-completion-scene .sn {
  display: block;
  color: #0c1a38;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.review-completion-scene .sl {
  display: block;
  margin-top: 3px;
  color: #a8bedc;
  font-size: 11px;
}

.review-completion-scene .btn {
  width: 100%;
  margin-bottom: 12px;
  padding: 16px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #3a7bd5, #2258b0);
  box-shadow: 0 6px 24px rgba(58, 123, 213, 0.42);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  transition: transform 0.12s;
}

.review-completion-scene .btn:active {
  transform: scale(0.97);
}

.review-completion-scene .unlock {
  color: #3a7bd5;
  font-size: 11px;
  opacity: 0.75;
}

@keyframes twinkle {
  0%, 100% {
    opacity: var(--tmin);
    transform: scale(1);
  }
  50% {
    opacity: var(--tmax);
    transform: scale(1.8);
  }
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(58, 123, 213, 0.35);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(0, 0, 0, 0);
  }
}

.correct-review .answer-analysis {
  width: 100%;
  max-width: 100%;
  padding: 16px 40px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.correct-review .answer-cards {
  flex-wrap: wrap;
  justify-content: center;
  overflow-x: visible;
  gap: 18px 22px;
  margin-bottom: 28px;
}

.correct-review .answer-card {
  position: relative;
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
  padding: 0 2px 7px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}

.correct-review .answer-card::before {
  display: none;
}

.correct-review .answer-card:nth-child(8n+2)::before,
.correct-review .answer-card:nth-child(8n+7)::before { background: #6edfa8; }
.correct-review .answer-card:nth-child(8n+3)::before,
.correct-review .answer-card:nth-child(8n+8)::before { background: #6eaaff; }
.correct-review .answer-card:nth-child(8n+4)::before { background: #c48eff; }
.correct-review .answer-card:nth-child(8n+5)::before { background: #ff6e8a; }
.correct-review .answer-card:nth-child(8n+6)::before { background: #ffd46e; }

.correct-review .ac-ipa {
  margin-bottom: 2px;
  color: #b0b0b0 !important;
  font-size: 12px;
  font-style: italic;
}

.correct-review .ac-word {
  color: #1a1a1a !important;
  font-size: var(--crac-fs, 34px);
  font-weight: 500;
  letter-spacing: .2px;
  white-space: nowrap;
}


.correct-review .ac-rule {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 1px;
  border-radius: 999px;
}

.correct-review .review-translation {
  display: block;
  max-width: min(980px, 90vw);
  margin: 30px auto 0;
  color: #5f6876;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.28;
  text-align: center;
}

.correct-review .review-translation::before,
.correct-review .review-translation::after {
  display: none;
}

body[data-practice-theme="dark"] .correct-review .answer-analysis {
  background: transparent;
  box-shadow: none;
}

body[data-practice-theme="dark"] .correct-review .answer-card {
  background: transparent !important;
}

body[data-practice-theme="dark"] .correct-review .ac-ipa {
  color: rgba(255, 255, 255, .38) !important;
}

body[data-practice-theme="dark"] .correct-review .ac-word {
  color: #fff !important;
}

body[data-practice-theme="dark"] .correct-review .review-translation {
  color: rgba(226, 232, 240, .76);
}

body:not([data-practice-theme="dark"]) .answer-analysis.answer-cards-wrap .answer-cards {
  gap: 12px 14.6667px;
}
/* 答对后中英对照：单词/列间距减半（手机+电脑），高特异性覆盖通用答案卡间距 */
body .correct-review .answer-analysis.review-answer-analysis .answer-cards {
  gap: 9px 11px;
}

body:not([data-practice-theme="dark"]) .answer-analysis.answer-cards-wrap .answer-card {
  min-height: auto;
  padding: 0 2px 7px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  overflow: visible;
}

body:not([data-practice-theme="dark"]) .answer-analysis.answer-cards-wrap .answer-card:hover {
  transform: translateY(-1px);
  box-shadow: none;
}

body:not([data-practice-theme="dark"]) .correct-review .answer-card::before {
  display: none;
}

body:not([data-practice-theme="dark"]) .answer-analysis.answer-cards-wrap .ac-ipa {
  margin-bottom: 2px;
  color: #9aa3af !important;
  font-size: 12px;
}

body:not([data-practice-theme="dark"]) .answer-analysis.answer-cards-wrap .ac-word {
  color: #111827 !important;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: .2px;
}

body:not([data-practice-theme="dark"]) .answer-analysis.answer-cards-wrap .ac-rule,
body:not([data-practice-theme="dark"]) .practice-answer-slot .ac-rule {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 1px;
  border-radius: 999px;
}

body:not([data-practice-theme="dark"]) .practice-answer-slot .answer-cards {
  gap: 12px 16px;
}

body:not([data-practice-theme="dark"]) .practice-answer-slot .ac-word {
  font-size: 24px;
}

/* 答对后中文翻译 */
.review-translation {
  margin: 14px 0 0;
  color: var(--t2);
  font-size: 24px;
  text-align: center;
}

/* ===== 答案单词释义弹层：固定定位、紧贴被点单词下方的小卡片（JS 用视口坐标设置 left/top）===== */
.answer-word-popover {
  position: fixed;
  z-index: 1200;
  width: min(280px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--bd, #EAECEF);
  border-radius: 12px;
  background: var(--pg, #fff);
  box-shadow: 0 14px 34px rgba(31,35,41, .20);
  color: var(--t1, #1f2937);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}
.answer-word-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.answer-word-title strong { font-size: 15px; font-weight: 700; }
.answer-word-popover-head button {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--t3, #80858F);
  font-size: 18px;
  line-height: 26px;
  cursor: pointer;
}
.answer-word-popover-head button:hover { background: rgba(0,0,0,.06); color: var(--t1,#1f2937); }
.answer-word-pron-list { display: flex; flex-direction: column; gap: 4px; }
.answer-word-pron-row { display: flex; align-items: center; gap: 8px; }
.answer-word-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 6px;
  background: var(--or-sd, #fdecdc);
  color: var(--or-d, #c2570a);
  font-size: 11px;
  font-weight: 700;
}
.answer-word-phonetic { color: var(--t2, #5f6876); font-size: 13px; }
.answer-word-pron-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--bd, #EAECEF);
  border-radius: 50%;
  background: var(--pg, #fff);
  color: var(--or, #e8650f);
  cursor: pointer;
}
.answer-word-pron-row button svg { width: 15px; height: 15px; fill: currentColor; }
.answer-word-detail { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.answer-word-meaning span,
.answer-word-example span {
  display: block;
  margin-bottom: 2px;
  color: var(--t3, #80858F);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}
.answer-word-meaning p,
.answer-word-example p { margin: 0; }
.answer-word-example { border-top: 1px dashed var(--bd, #EAECEF); padding-top: 6px; }
.answer-word-example strong { color: #E8650A; font-weight: 700; }
.answer-word-example .answer-word-example-zh { margin-top: 4px; color: var(--t3, #80858F); font-size: 12px; }
.answer-word-loading { color: var(--t3, #80858F); }
.answer-word-save {
  width: 100%;
  min-height: 42px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--or-bd, #f3c9a6);
  border-radius: 11px;
  background: #E8650A;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.answer-word-save.is-saved { background: #F2FBF6; border-color: #BFE6CF; color: #2E9E6A; }
.answer-word-save small { color: #80858F; font-size: 11px; font-weight: 400; }
.answer-word-save:disabled { opacity: .65; cursor: wait; }
.answer-word-meaning .answer-word-context-label { display: inline-block; margin-left: 6px; padding: 1px 5px; border-radius: 4px; color: #E8650A; background: #FFF4EA; font-size: 11px; }
.answer-word-meaning .answer-word-other-meanings { margin-top: 4px; color: #80858F; font-size: 12px; }
.review-word-hint { margin: 4px 0 16px; color: #80858F; font-size: 13px; text-align: center; }
@media (max-width: 600px) {
  .answer-word-popover { width: min(82vw, 320px); font-size: 13px; }
}

/* 夜间模式：卡片文字强制深色（卡片背景是浅色渐变）*/
body[data-practice-theme="dark"] .ac-word { color: #1F2329; }

/* ===== 设置：改成齿轮正下方的方形下拉框（不再占满左侧、不再挤压正文）===== */
.practice-settings-panel {
  position: absolute;
  top: 66px;
  right: 10px;
  z-index: 40;
  width: 400px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 96px);
  overflow: auto;
  padding: 14px;
  background: var(--pg);
  border: 1px solid var(--bd);
  border-radius: 16px;
  box-shadow: 0 22px 54px rgba(31,35,41, .18);
}

/* 两列四行 */
.practice-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}

/* tile 盒子（普通按钮 tile、以及下拉/字体的容器 div 都用它做外框）*/
.practice-setting-tile {
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: var(--pg);
  min-height: 54px;
}

/* 普通按钮 tile：图标在左 · 标签 · 值在右 */
button.practice-setting-tile,
.practice-setting-select > button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 54px;
  padding: 11px 13px;
  color: var(--t1);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  border-radius: 12px;
}
button.practice-setting-tile { background: var(--pg); }
.practice-setting-select > button { border: 0; background: transparent; }
button.practice-setting-tile:hover,
.practice-setting-select:hover { border-color: var(--or-bd); }
button.practice-setting-tile:hover,
.practice-setting-select > button:hover { background: var(--or-sd); }

.practice-setting-select { position: relative; padding: 0; }

/* 图标 = 橙色小方块（前置 logo）*/
.practice-setting-tile > i,
.practice-setting-select > button > i {
  order: 0;
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--or-sd);
  color: var(--or-d);
  font-size: 13px;
  font-style: normal;
}
.practice-setting-tile > span,
.practice-setting-select > button > span {
  order: 1;
  color: var(--t2);
  font-size: 13px;
}
.practice-setting-tile > strong,
.practice-setting-select > button > strong {
  order: 2;
  margin-left: auto;
  font-weight: 700;
  color: var(--t1);
  white-space: nowrap;
}

/* 字体大小格：占位一格，标签+值一行、滑条一行、刻度一行 */
.practice-font-setting {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px 13px;
}
.practice-font-setting > label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.practice-font-setting > label > span { color: var(--t2); font-size: 13px; }
.practice-font-setting > label > strong { margin-left: auto; font-weight: 700; color: var(--t1); }
.practice-font-setting input[type="range"] {
  flex: 1 0 100%;
  margin: 2px 0 0;
  accent-color: var(--or);
}
.font-scale-labels {
  display: flex;
  justify-content: space-between;
  color: var(--t3);
  font-size: 11px;
}

/* 下拉选项菜单 */
.practice-setting-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5;
  background: var(--pg);
  border: 1px solid var(--bd);
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(31,35,41, .16);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.practice-setting-dropdown button {
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--t1);
  font-size: 13px;
  cursor: pointer;
}
.practice-setting-dropdown button:hover { background: var(--or-sd); }
.practice-setting-dropdown button.is-selected { background: var(--or-sd); color: var(--or-d); font-weight: 700; }

/* 左上角计时（保留），右上角计时已删 */
.dictation-stage > .practice-stage-timer {
  position: absolute;
  top: 14px;
  left: 22px;
  z-index: 3;
}
.practice-stage-timer {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--t2);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.practice-stage-timer .pst-clock { font-size: 16px; }

/* ===== Perfect 连击徽章 ===== */
.correct-streak-toast {
  position: fixed;
  top: 96px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  z-index: 9999;
  pointer-events: none;
  white-space: nowrap;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 28px;
  font-weight: 650;
  font-style: italic;
  letter-spacing: 0.5px;
  line-height: 1.3;
  padding: .12em .35em .18em .12em;
  background: linear-gradient(180deg, #ffd479 0%, #ff9a3d 55%, #ff7a1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 6px rgba(255, 126, 32, 0.28));
  opacity: 0;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  will-change: transform, opacity;
}
.correct-streak-toast .n {
  margin-left: 8px;
}
body:not([data-practice-theme="dark"]) .correct-streak-toast {
  background: linear-gradient(180deg, #ff9b35 0%, #f97316 48%, #ea580c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 3px 5px rgba(234, 88, 12, .22));
  -webkit-text-stroke: 0;
}
.correct-streak-toast.play {
  animation: streakEaseIn 0.22s ease-out forwards;
}
.correct-streak-toast.is-leaving {
  animation: streakFadeOut 0.28s ease-in forwards;
}
@keyframes streakEaseIn {
  0% { opacity: 0; transform: translate3d(-50%, 3px, 0); }
  100% { opacity: 1; transform: translate3d(-50%, 0, 0) rotate(0deg); }
}
@keyframes streakFadeOut {
  0% { opacity: 1; transform: translate3d(-50%, 0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate3d(-50%, -4px, 0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .correct-streak-toast.play {
    animation: none;
    opacity: 1;
  }
  .correct-streak-toast.is-leaving {
    animation: streakFadeOut 0.18s ease-in forwards;
  }
}
.correct-review-mascot {
  margin-top: 10px;
  font-size: 26px;
  text-align: center;
}

.chapter-complete {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  min-height: 100dvh;
  padding: 24px;
  place-items: center;
  background: var(--soft);
  overflow: hidden;
}

.chapter-complete-fx,
.chapter-complete-fx-front {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.chapter-complete-fx-front {
  z-index: 4;
}

.chapter-complete-fx::before,
.chapter-complete-fx::after {
  content: "";
  position: absolute;
  width: min(56vw, 560px);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(249, 115, 22, 0) 0deg 9deg,
      rgba(249, 115, 22, 0.7) 10deg 12deg,
      rgba(250, 204, 21, 0.65) 13deg 15deg,
      rgba(56, 189, 248, 0) 16deg 24deg
    );
  mask: radial-gradient(circle, transparent 0 26%, #000 27% 29%, transparent 30% 100%);
  opacity: 0;
  filter: drop-shadow(0 0 18px rgba(249, 115, 22, 0.32));
  animation: chapterFireworkHalo 3.6s cubic-bezier(.18, .8, .24, 1) infinite;
}

.chapter-complete-fx::before {
  left: 7vw;
  top: 11vh;
}

.chapter-complete-fx::after {
  right: 6vw;
  bottom: 10vh;
  animation-delay: 1.2s;
  transform: rotate(18deg);
}

.chapter-complete-panel {
  position: relative;
  z-index: 3;
  width: min(520px, 100%);
  padding: 28px;
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--pg);
  text-align: center;
  box-shadow: 0 24px 70px rgba(31,35,41, 0.16);
}

.chapter-complete-fx-front .fx-pop {
  filter: drop-shadow(0 0 12px rgba(249, 115, 22, 0.36));
}

.chapter-complete-fx-front .fx-pop .before,
.chapter-complete-fx-front .fx-pop .after {
  box-shadow:
    0 -42px 0 #f97316,
    30px -30px 0 #fbbf24,
    42px 0 0 #22c55e,
    30px 30px 0 #38bdf8,
    0 42px 0 #a855f7,
    -30px 30px 0 #fb7185,
    -42px 0 0 #facc15,
    -30px -30px 0 #14b8a6;
}

.fx-pop {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  opacity: 0;
  transform: scale(.1);
  animation: chapterFireworkBurst 4.8s cubic-bezier(.18, .8, .24, 1) infinite;
}

.fx-front-1 { left: 15%; top: 28%; animation-delay: 120ms; }
.fx-front-2 { left: 85%; top: 28%; animation-delay: 260ms; }
.fx-front-3 { left: 12%; top: 50%; animation-delay: 940ms; }
.fx-front-4 { left: 88%; top: 50%; animation-delay: 1080ms; }
.fx-front-5 { left: 16%; top: 72%; animation-delay: 1560ms; }
.fx-front-6 { left: 84%; top: 72%; animation-delay: 1700ms; }

.fx-pop .before,
.fx-pop .after {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #f97316;
  box-shadow:
    0 -54px 0 #f97316,
    38px -38px 0 #fbbf24,
    54px 0 0 #22c55e,
    38px 38px 0 #38bdf8,
    0 54px 0 #a855f7,
    -38px 38px 0 #fb7185,
    -54px 0 0 #facc15,
    -38px -38px 0 #14b8a6;
}

.fx-pop .after {
  transform: rotate(22.5deg) scale(.74);
  opacity: .78;
}

.fx-pattern-2 .before,
.fx-pattern-2 .after {
  background: #38bdf8;
  box-shadow:
    0 -48px 0 #38bdf8,
    34px -34px 0 #f97316,
    48px 0 0 #facc15,
    34px 34px 0 #22c55e,
    0 48px 0 #a855f7,
    -34px 34px 0 #fb7185,
    -48px 0 0 #fbbf24,
    -34px -34px 0 #14b8a6;
}

.fx-pattern-3 .before,
.fx-pattern-3 .after {
  background: #facc15;
}

.fx-pattern-4 .before,
.fx-pattern-4 .after {
  background: #22c55e;
}

.fx-pattern-5 .before,
.fx-pattern-5 .after {
  background: #fb7185;
}

@keyframes chapterFireworkBurst {
  0% {
    opacity: 0;
    transform: scale(.1) rotate(0deg);
  }
  8% {
    opacity: 1;
  }
  38% {
    opacity: .9;
  }
  56% {
    opacity: 0;
    transform: scale(2.2) rotate(34deg);
  }
  100% {
    opacity: 0;
    transform: scale(.1) rotate(0deg);
  }
}

@keyframes chapterFireworkHalo {
  0% {
    opacity: 0;
    transform: scale(.18) rotate(0deg);
  }
  16% {
    opacity: .88;
  }
  58% {
    opacity: .55;
  }
  100% {
    opacity: 0;
    transform: scale(1.25) rotate(42deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chapter-complete-fx::before,
  .chapter-complete-fx::after,
  .chapter-complete-fx-front .fx-pop,
  .fx-pop {
    animation: none;
    opacity: .8;
  }
}

.chapter-complete.chapter-complete-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(156, 124, 240, .18), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(90, 200, 250, .13), transparent 28%),
    rgba(8, 8, 12, .72);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

body.is-chapter-complete .practice-shell {
  background: #08080c;
}

.chapter-complete-overlay canvas.fx {
  position: fixed;
  inset: 0;
  z-index: 1001;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cc-modal-wrap {
  position: relative;
  z-index: 1002;
  width: min(440px, 90vw);
  padding: 1.5px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .35) 0%, rgba(170, 140, 255, .55) 30%, rgba(120, 150, 255, .45) 55%, rgba(255, 255, 255, .15) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .04),
    0 24px 64px -18px rgba(80, 60, 180, .35),
    0 0 70px -18px rgba(120, 110, 255, .25);
}

.cc-modal {
  position: relative;
  overflow: hidden;
  padding: 32px 32px 26px;
  border-radius: 20.5px;
  background:
    linear-gradient(160deg, rgba(120, 90, 220, .30), rgba(70, 110, 230, .18) 45%, rgba(30, 20, 50, .55) 100%),
    rgba(24, 20, 36, .72);
}

.cc-modal::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -20%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(255, 255, 255, .10), transparent 65%);
  pointer-events: none;
}

.cc-header-label {
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, .55);
  font-size: 12.5px;
}

.cc-check-badge {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 4px auto 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6E7CF6, #4750D6);
  box-shadow: 0 8px 24px -6px rgba(80, 90, 240, .65), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.cc-headline {
  position: relative;
  z-index: 1;
  margin-bottom: 7px;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}

.cc-sub {
  position: relative;
  z-index: 1;
  margin-bottom: 22px;
  color: rgba(255, 255, 255, .62);
  font-size: 12.5px;
  line-height: 1.65;
  text-align: center;
}

.cc-sub b {
  color: #fff;
  font-weight: 600;
}

.cc-stat-row {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.cc-stat-card {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: rgba(255, 255, 255, .07);
}

.cc-stat-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.cc-stat-icon.time {
  background: linear-gradient(135deg, #3FE0B0, #1FB894);
}

.cc-stat-icon.count {
  background: linear-gradient(135deg, #5AC8FA, #3E9BE0);
}

.cc-stat-text .label {
  color: rgba(255, 255, 255, .55);
  font-size: 10.5px;
}

.cc-stat-text .val {
  margin-top: 2px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.cc-btn-row {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.cc-btn,
.cc-btn-footer {
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}

.cc-btn {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 0;
  border: 0;
  border-radius: 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.cc-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.cc-btn .kbd,
.cc-btn-footer .kbd {
  font-size: 11px;
  font-weight: 500;
  opacity: .75;
}

.cc-btn.secondary {
  background: linear-gradient(135deg, #9C7CF0, #7A6BE0);
}

.cc-btn.primary {
  background: linear-gradient(135deg, #5AC8FA, #4750D6);
}

.cc-btn-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 8px;
  padding: 11px 0;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .7);
  font-size: 12.5px;
}

.cc-btn-footer:hover {
  background: rgba(255, 255, 255, .1);
}

@media (max-width: 520px) {
  .chapter-complete.chapter-complete-overlay {
    padding: 18px;
  }

  .cc-modal {
    padding: 28px 20px 22px;
  }

  .cc-stat-row,
  .cc-btn-row {
    flex-direction: column;
  }
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    width: auto;
    height: auto;
    margin: 10px;
    max-height: none;
    border-right: 0;
  }

  .nav {
    flex: none;
    max-height: none;
  }

  .sidebar-points {
    margin-top: 0;
  }

  .main {
    height: auto;
    min-height: 100dvh;
  }

  .cover-hero,
  .landing-hero,
  .home-shell,
  .courses-shell,
  .life-diary,
  .sentence-breakdown,
  .payment-dialog-body,
  .va-grid,
  .affiliate-layout {
    grid-template-columns: 1fr;
  }

  .main:has(.sentence-breakdown-page) {
    overflow: visible;
  }

  .main:has(.sentence-breakdown-page) .main-inner {
    height: auto;
  }

  .main:has(.my-daily-page) {
    overflow: visible;
  }

  .main:has(.my-daily-page) .main-inner {
    height: auto;
  }

  .my-daily-page {
    min-height: 100dvh;
  }

  .my-daily-header {
    padding: 22px 18px 0;
  }

  .my-daily-header-top,
  .my-daily-filter-row {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .my-daily-stats {
    justify-content: space-between;
    text-align: left;
  }

  .my-daily-tabs {
    overflow-x: auto;
    padding-bottom: 1px;
  }

  .my-daily-search {
    width: 100%;
  }

  .my-daily-list {
    padding: 12px 18px 0;
    overflow: visible;
  }

  .my-daily-card {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 12px;
  }

  .my-daily-action {
    width: 100%;
  }

  .my-daily-pager {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 18px 18px;
  }

  .page-meta {
    white-space: normal;
  }

  .sentence-breakdown-page {
    flex-direction: column;
    min-height: 100dvh;
  }

  .sentence-breakdown-left {
    flex: none;
    width: 100%;
    padding: 24px 20px;
    border-right: 0;
    border-bottom: 1px solid #EAECEF;
  }

  .sentence-breakdown-input-card textarea {
    min-height: 180px;
  }

  .sentence-breakdown-right {
    height: auto;
    padding: 24px 20px 34px;
    overflow: visible;
  }

  .va-grid {
    grid-template-areas:
      "link"
      "detail"
      "rate"
      "rules";
  }

  .va-grid-unpaid {
    grid-template-areas:
      "link"
      "rate"
      "rules";
  }

  .va-wrap {
    padding: 20px 14px 28px;
  }

  .va-header,
  .va-link-box,
  .va-section-row {
    align-items: stretch;
    flex-direction: column;
  }

  .va-badge {
    align-self: flex-start;
  }

  .va-link-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .va-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .va-stats .va-stat:last-child { grid-column: 1 / -1; }

  .landing-steps,
  .landing-course-grid,
  .landing-pricing,
  .market-course-grid,
  .my-course-standard-grid,
  .my-courses-summary-grid,
  .my-courses-board,
  .course-layout,
  .grid,
  .membership-grid,
  .partner-grid,
  .legal-grid,
  .review-item-grid,
  .home-task-grid,
  .partner-stats,
  .metrics {
    grid-template-columns: 1fr;
  }

  .private-practice-toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .private-practice-search {
    width: 100%;
  }

  .my-courses-panel .private-practice-search {
    width: 100%;
  }

  .courses-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 22px 18px;
  }

  .my-courses-panel .private-practice-board,
  .my-courses-panel .joined-market-courses {
    padding: 22px 18px;
  }

  .my-courses-panel .private-practice-board {
    border-right: 0;
    border-bottom: 1px solid var(--bd);
  }

  .my-courses-stat-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .membership-page {
    margin: 0;
    padding: 34px 16px 42px;
  }

  .membership-page-inner {
    gap: 24px;
  }

  .membership-hero h2 {
    font-size: clamp(38px, 14vw, 58px);
  }

  .membership-hero p {
    font-size: 17px;
  }

  .membership-plan-tabs {
    margin-bottom: 18px;
  }

  .membership-pricing-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .membership-plan-card {
    min-height: auto;
    padding: 34px 24px 26px;
    border-radius: 22px;
  }

  .membership-plan-card .membership-price {
    font-size: clamp(48px, 18vw, 64px);
  }

  .standard-course-row,
  .standard-course-row-main,
  .private-date-row,
  .affiliate-copy-row {
    grid-template-columns: 1fr;
  }

  .standard-course-row {
    align-items: stretch;
  }

  .practice-topbar {
    grid-template-columns: auto minmax(0, 1fr);
    height: auto;
    padding: 10px 14px;
  }

  .practice-status {
    grid-column: 1 / -1;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .dictation-stage {
    height: calc(100dvh - 96px);
    padding-inline: 14px;
  }

  .practice-answer-slot,
  .dictation-card.is-reviewing {
    width: calc(100vw - 28px);
  }

  .practice-controls {
    gap: 6px;
    overflow-x: auto;
    border-radius: 16px;
  }





  .control-button {
    flex: 0 0 auto;
  }

  .saved-practice-bar,
  .split-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .main-inner {
    padding: 16px;
  }

  .landing-footer {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

/* Daily sentence deletion: anchored to the practice stage. */
.dictation-stage > .practice-delete { position: absolute; top: 20px; right: 15px; z-index: 20; }
.practice-delete-toggle { display: grid; place-items: center; width: 39px; height: 39px; padding: 0; border: 1.5px solid #E4E7EB; border-radius: 50%; background: #fff; color: #1F2329; cursor: pointer; }
.practice-delete-toggle svg { width: 18px; height: 18px; }
.practice-delete-toggle.is-open { position: relative; z-index: 1; border-radius: 50%; color: #e03030; background: #fff0f0; border: 2px solid #ffcece; }
.practice-delete-toggle.is-open svg { width: 18px; height: 18px; }
.practice-delete-popover { position: absolute; top: 13px; right: 13px; width: min(260px, calc(100vw - 48px)); box-sizing: border-box; padding: 24px 20px 20px; border: none; border-radius: 16px; background: #fff; color: #111; text-align: center; box-shadow: 0 4px 24px rgba(0,0,0,.10); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.practice-delete-popover strong { font-size: 16px; font-weight: 400; margin-bottom: 2px; }
.practice-delete-popover p { margin: 0 0 12px; color: #aaa; font-size: 12px; font-weight: 400; }
.practice-delete-popover > div { display: flex; gap: 10px; width: 100%; }
.practice-delete-popover button { flex: 1; padding: 10px 0; border: 1.5px solid #e0e0e0; border-radius: 10px; background: #f5f5f5; color: #888; font-size: 14px; font-weight: 400; cursor: pointer; }
.practice-delete-popover [data-practice-delete-confirm] { background: #e8302e; border: none; color: #fff; box-shadow: none; }
.practice-delete-popover button:disabled { opacity: .6; cursor: wait; }

/* Keep auth forms and the complete brand artwork inside the viewport. */
.auth-page-main.auth-login-main { min-height: 100dvh; padding: 16px clamp(16px, 4vw, 64px); }
@media (max-height: 850px) {
  .auth-login-content .auth-page-card { padding: 18px; }
  .auth-login-content .auth-form { gap: 10px; }
  .auth-login-content .auth-card-heading { margin-bottom: 12px; }
  .auth-login-content .auth-field { gap: 5px; }
  .auth-login-content .auth-alt { margin-top: 6px; padding-top: 12px; }
}
@media (max-height: 700px) {
  .auth-page-main.auth-login-main { padding-top: 8px; padding-bottom: 8px; }
  .auth-login-content .auth-page-card { padding: 14px; }
  .auth-login-content .auth-form { gap: 7px; }
  .auth-login-content .auth-field input, .auth-login-content .auth-send-button { height: 36px; min-height: 36px; }
  .auth-login-content .auth-submit { min-height: 38px; height: 38px; }
  .auth-login-content .auth-card-heading { margin-bottom: 8px; }
}

html:has(body.is-auth-page), .is-auth-page .main { scrollbar-gutter: auto; }

.is-auth-page .main-top-sentinel { height: 0; }

.feedback-dialog { width:min(600px, calc(100vw - 24px)); max-width:none; padding:0; border:1px solid var(--bd); border-radius:14px; background:#fff; color:var(--t1); overflow:hidden; }
.feedback-dialog::backdrop { background:rgba(0,0,0,.35); }
.feedback-dialog header { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; }
.feedback-dialog h2 { margin:0; font-size:20px; }
.feedback-dialog header button { width:36px; height:36px; border:0; border-radius:10px; background:var(--soft); color:var(--t2); font-size:26px; cursor:pointer; }
.feedback-dialog-body { padding:0 24px 24px; max-height:calc(100dvh - 112px); overflow-y:auto; }
.feedback-dialog form, .feedback-dialog label { display:grid; gap:8px; }
.feedback-dialog form { gap:12px; }
.feedback-dialog label { color:var(--t2); font-size:13px; }
.feedback-dialog input, .feedback-dialog select, .feedback-dialog textarea { width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--bd); border-radius:10px; color:var(--t1); background:#fff; font:inherit; }
.feedback-dialog textarea { min-height:100px; resize:vertical; }
.feedback-dialog button[type="submit"] { padding:12px; border:0; border-radius:10px; color:#fff; background:var(--or); font:inherit; cursor:pointer; }
.feedback-dialog button:disabled { opacity:.6; cursor:wait; }
.feedback-dialog-success { padding:24px; background:var(--gr-bg); color:var(--gr); border-radius:10px; line-height:1.8; overflow-wrap:anywhere; }
.auth-qr-expired { flex-direction: column; gap: 6px; color: var(--t1); font-size: 17px; }
.auth-qr-expired button { padding: 0; border: 0; border-radius: 0; background: transparent; color: #576b95; font-size: 17px; font-weight: 400; }

.scenario-market { color: var(--t1); }
.scenario-market, .scenario-preview { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }
.scenario-market button, .scenario-market input, .scenario-preview button { font-family: inherit; }
.scenario-market .primary, .scenario-preview .primary { background: var(--or-d); color: var(--pg); }
.scenario-market .page-header { margin-bottom: 24px; }
.scenario-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 24px; }
.scenario-categories { display: flex; justify-content: flex-start; gap: 8px; width: calc(100% - 174px); overflow: hidden; min-width: 0; flex-wrap: wrap; }
.scenario-category { box-sizing: border-box; height: 32px; min-height: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0 8px; border: 1px solid var(--bd); border-radius: 20px; background: var(--pg); color: var(--t1); white-space: nowrap; }
.scenario-category span { display: block; font-weight: 400; font-size: 14.5px; line-height: 1; }
.scenario-category.is-active { border-color: var(--or-d); background: var(--or-d); color: var(--pg); }
.scenario-category:hover { border-color: var(--or); }
.textbook-note { color: var(--t2); font-size: 12px; line-height: 1.7; margin: 12px 0; }
.textbook-cover { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; width: 100%; min-height: 144px; padding: 16px; background: var(--soft); border: 0; border-left: 6px solid var(--bd); border-radius: 0; color: var(--t1); text-align: left; }
.textbook-cover span { font-size: 11px; line-height: 1.4; }
.textbook-cover strong { font-size: 21px; }
.textbook-cover small { font-size: 10px; color: var(--t2); }
.textbook-pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.textbook-pill { border: 1px solid var(--bd); background: var(--soft); color: var(--t1); border-radius: 10px; padding: 9px 13px; font-size: 13px; }
.textbook-pill.is-active { background: var(--or-d); border-color: var(--or-d); color: var(--pg); }
.course-detail-card { overflow: hidden; border: 1px solid #E3E3E3; border-radius: 14px; background: #FFF; color: #111; }
.course-detail-head { display: grid; grid-template-columns: 168px minmax(0, 1fr); align-items: start; column-gap: 24px; row-gap: 16px; padding: 24px; }
.course-detail-cover { grid-row: 1 / 3; display: block; width: 168px; height: 112px; flex-shrink: 0; object-fit: cover; border-radius: 12px; }
.course-detail-intro { min-width: 0; }
.course-detail-intro h2 { margin: 0 0 8px; font-size: 20px; line-height: 1.4; font-weight: 600; letter-spacing: 0; }
.course-detail-intro > p { margin: 0; color: #5F6570; font-size: 16px; line-height: 1.4; }
.course-detail-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 10px; }
.course-detail-actions button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 88px; height: 42px; padding: 0 16px; border-radius: 10px; font-size: 16px; font-weight: 400; }
.course-detail-start { border: 1px solid #C46128; background: #C46128; color: #FFF; }
.course-detail-preview, .course-detail-subscribe { border: 1px solid #CECECE; background: #FFF; color: #111; }
.course-detail-chapters { list-style: none; padding: 0; margin: 0; }
.course-detail-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 16px; align-items: center; box-sizing: border-box; min-height: 82px; padding: 18px 24px; border-top: 1px solid #E5E5E5; }
.course-detail-number { font-size: 14.5px; color: #80858F; }
.course-detail-chapter-copy h4 { margin: 0 0 6px; font-size: 14.5px; font-weight: 400; line-height: 1.4; }
.course-detail-chapter-copy p { margin: 0; font-size: 14.5px; color: #80858F; line-height: 1.4; }
.course-detail-practice { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 42px; padding: 0; border: 1px solid #CECECE; border-radius: 10px; background: #FFF; color: #111; font-size: 14.5px; font-weight: 400; }
.course-detail-subscribe:hover, .course-detail-subscribe:active, .course-detail-preview:hover, .course-detail-preview:active, .course-detail-practice:hover, .course-detail-practice:active { background: #F5F5F5; color: #111; border-color: #CECECE; }
.course-detail-row.is-locked { border-top-color: #F2F2F2; }
.course-detail-row.is-locked h4 { color: #ADADAD; }
.course-detail-row.is-locked p, .course-detail-row.is-locked .course-detail-number { color: #A3A8B0; }
.course-detail-member { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; color: #A3A8B0; font-size: 14.5px; font-weight: 400; }
.course-detail-member svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.course-detail-unavailable { color: #ADADAD; font-size: 14.5px; }
.course-detail-upgrade { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; background: #1F2329; color: #F5F6F8; }
.course-detail-upgrade strong { font-size: 16px; line-height: 1.4; font-weight: 600; }
.course-detail-upgrade p { margin: 6px 0 0; color: #80858F; font-size: 16px; line-height: 1.4; }
.course-detail-upgrade button { flex-shrink: 0; padding: 12px 20px; border: 0; border-radius: 10px; background: #C46128; color: #FFF; font-size: 16px; font-weight: 600; }
.course-detail-start:hover, .course-detail-upgrade button:hover { background: #B65620; }
.course-detail-empty { padding: 24px 40px; }

.course-detail-row-actions { display: flex; align-items: center; gap: 10px; }
.course-detail-row-actions .course-detail-preview { min-height: 42px; padding: 0 12px; border-radius: 10px; font-size: 14.5px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 700px) {
  .course-detail-card { border-radius: 16px; }
  .course-detail-head { grid-template-columns: 80px minmax(0, 1fr); padding: 20px 16px; gap: 14px; }
  .course-detail-cover { grid-row: auto; width: 80px; height: 64px; border-radius: 9px; }
  .course-detail-intro { flex: 1; }
  .course-detail-intro h2 { margin: 0 0 8px; font-size: 19px; }
  .course-detail-intro > p { font-size: 14px; line-height: 1.6; }
  .course-detail-actions { grid-column: 1 / -1; gap: 8px; }
  .course-detail-actions button { min-width: 0; height: 42px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
  .course-detail-row { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; min-height: 88px; padding: 18px 16px; }
  .course-detail-number { font-size: 14.5px; }
  .course-detail-row-actions { grid-column: 2 / -1; justify-content: flex-end; }
  .course-detail-chapter-copy h4 { font-size: 14.5px; margin-bottom: 4px; }
  .course-detail-chapter-copy p { font-size: 14.5px; }
  .course-detail-practice { width: 60px; height: 42px; border-radius: 10px; font-size: 14.5px; }
  .course-detail-member { gap: 4px; font-size: 14.5px; }
  .course-detail-member svg { width: 14px; height: 14px; }
  .course-detail-unavailable { font-size: 14.5px; }
  .course-detail-upgrade { padding: 20px 16px; gap: 12px; }
  .course-detail-upgrade strong { display: block; font-size: 14px; }
  .course-detail-upgrade p { font-size: 14px; }
  .course-detail-upgrade button { padding: 12px; border-radius: 10px; font-size: 14px; }
}
.market-alphabet { display: grid; grid-template-columns: repeat(13, 1fr); gap: 8px; margin: 16px 0; }
.market-alphabet span { padding: 12px 4px; text-align: center; border: 1px solid var(--bd); border-radius: 7px; font-size: 20px; }
@media (max-width: 700px) {
  .market-alphabet { grid-template-columns: repeat(6, 1fr); }
}
.scenario-search { box-sizing: border-box; height: 32px; min-height: 0; margin: 0; display: flex; align-items: center; gap: 6px; flex-shrink: 0; min-width: 160px; width: 160px; padding: 6px 10px; border: 1px solid var(--bd); border-radius: 20px; background: var(--pg); color: var(--t2); }
.scenario-search svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; }
.scenario-search input { width: 100%; min-width: 0; height: 18px; min-height: 0; padding: 0; border: 0; outline: none; background: transparent; color: var(--t1); font: inherit; font-size: 12px; }
.scenario-search input::placeholder { color: var(--t2); }
.scenario-search:focus-within { border-color: var(--or-d); }
.scenario-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.scenario-market:not(.joined-course-market) .scenario-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.market-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; color: var(--t2); font-size: 12px; }
.scenario-card { min-width: 0; overflow: hidden; border: 1px solid var(--bd); border-radius: 14px; background: var(--pg); display: flex; flex-direction: column; }
.scenario-art-button { display: block; width: 100%; padding: 0; border: 0; border-radius: 0; background: var(--soft); overflow: hidden; }
.scenario-art-button img { display: block; width: 100%; height: 100px; object-fit: cover; transition: transform .2s ease; }
.scenario-art-button:hover img { transform: scale(1.025); }
.scenario-parent-group .scenario-art-button img { object-fit: cover; object-position: center 40%; }
.scenario-card-copy { padding: 10px; display: flex; flex-direction: column; flex: 1; }
.scenario-card-meta { margin: 0 0 6px; color: var(--t2); font-size: 10px; }
.scenario-card h3 { margin: 0 0 6px; font-size: 13px; font-weight: 650; line-height: 1.45; }
.scenario-card h3 + p { margin: 0 0 12px; color: var(--t2); font-size: 11px; line-height: 1.65; }
.scenario-card-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; }
.scenario-card .primary { font-size: 11px; white-space: nowrap; padding: 7px 9px; min-height: 32px; }
.scenario-parent-group .primary { align-self: flex-start; margin-top: auto; }
.scenario-preview-button { background: none; color: var(--t1); padding: 8px 0; border: 0; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
.scenario-empty { text-align: center; padding: 56px 20px; background: var(--soft); border-radius: 14px; }
.scenario-empty p { color: var(--t2); }
.scenario-preview { box-sizing: border-box; position: fixed; inset: 0; margin: auto; padding: 28px; width: min(700px, calc(100vw - 32px)); max-height: min(850px, calc(100dvh - 40px)); overflow-y: auto; border: 1px solid var(--bd); border-radius: 14px; background: var(--pg); color: var(--t1); }
.scenario-preview::backdrop { background: rgb(31 35 41 / .45); }
.course-loading-dialog { width: min(320px, calc(100vw - 32px)); }
.course-loading-status { min-height: 100px; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--t2); font-size: 15px; }
.scenario-preview-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: var(--soft); color: var(--t1); font-size: 24px; }
.scenario-preview-head { padding-right: 30px; }
.scenario-preview-head h2 { font-size: 24px; line-height: 1.4; margin: 12px 0; }
.scenario-preview-head p { color: var(--t2); font-size: 14px; line-height: 1.6; }
.scenario-sentences { padding-left: 28px; margin: 24px 0; }
.scenario-sentences li { padding: 14px 0 14px 8px; border-bottom: 1px solid var(--bd); }
.scenario-sentences li::marker { color: var(--t2); font-size: 13px; }
.scenario-sentences p { margin: 0; }
.scenario-sentences [lang="en"] { color: var(--t1); font-size: 18px; line-height: 1.55; }
.scenario-sentences [lang="zh-CN"] { color: var(--t2); font-size: 14px; line-height: 1.7; margin-top: 5px; }
.scenario-preview-footer { display: grid; gap: 14px; }
.scenario-preview-footer span { color: var(--t2); font-size: 13px; }
.scenario-market button:focus-visible, .scenario-market input:focus-visible, .scenario-preview button:focus-visible { outline: 2px solid var(--or-d); outline-offset: 3px; }
@media (max-width: 1200px) {
  .scenario-grid, .scenario-market:not(.joined-course-market) .scenario-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .scenario-toolbar { flex-wrap: wrap; gap: 10px; }
  .scenario-categories { width: 100%; }
  .scenario-grid, .scenario-market:not(.joined-course-market) .scenario-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scenario-preview { padding: 22px 18px; }
  .scenario-preview-head h2 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .scenario-art-button img, .scenario-category { transition: none; }
}
.scenario-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; font-size: 13px; }
.scenario-breadcrumb button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--bd); border-radius: 10px; background: var(--soft); color: var(--t1); font: inherit; font-weight: 600; cursor: pointer; }
.scenario-breadcrumb button:hover { background: var(--or-bg); border-color: var(--or-bd); }
.scenario-breadcrumb button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.scenario-breadcrumb [aria-current="page"] { color: var(--t2); }
.scenario-path-count { color: var(--t2); margin-left: auto; font-size: 11px; }
.joined-course-market { --pg: #fff; border: 0; border-radius: 0; background: var(--pg); }
.joined-course-market .courses-header { background: var(--pg); color: var(--t1); padding: 0 0 24px; }
.joined-course-market .my-courses-hero-head h2 { color: var(--t1); font-size: 24px; }
.joined-course-market .my-courses-hero-head p, .joined-course-market .courses-header-total { color: var(--t2); }
.joined-course-market .my-courses-board { display: block; padding: 0; background: var(--pg); }
.joined-course-market .joined-market-courses { padding: 0; border: 0; border-radius: 0; background: var(--pg); }
.joined-course-market .scenario-card .progress { width: 100%; margin: 0 0 10px; }
.joined-course-market .my-course-empty .primary { display: block; margin-top: 16px; }

.scenario-search input:focus, .scenario-search input:focus-visible { outline: none; box-shadow: none; border: 0; }
.scenario-favorite { margin-top: 8px; padding: 6px 10px; border: 1px solid var(--bd); border-radius: 10px; background: var(--pg); color: var(--t1); font: inherit; font-size: 12px; }
.scenario-favorite[aria-pressed="true"] { color: var(--or-d); border-color: var(--or-bd); background: var(--or-bg); }
.scenario-favorite-status { margin-left: 10px; font-size: 12px; color: var(--t2); }

.practice-favorite-anchor { position: relative; display: flex; }
.practice-favorite-popover { top: auto; bottom: calc(100% + 12px); right: 0; width: min(260px, calc(100vw - 48px)); z-index: 30; }
.practice-favorite-popover [data-confirm-review-remove] { background: var(--or); color: white; border: none; }

:root { --collection-text: #7c3aed; --collection-bg: #f3e8ff; }
.my-daily-tag.is-collection { color: var(--collection-text); background: var(--collection-bg); }

/* Preserve desktop spacing; answers paint above overlapping practice content. */
.dictation-stage > .practice-answer-slot { z-index: 3; height: 156px; min-height: 156px; padding-top: 14px; }
.practice-answer-slot.is-visible .answer-analysis { background: var(--soft); }
body:not([data-practice-theme="dark"]) .practice-answer-slot.is-visible .answer-analysis { background: #fff; }
/* 桌面端答案卡片展开时加白底边框，可遮挡背后内容（手机端由外层 .practice-answer-slot 加框，不在此列） */
@media (min-width: 601px) {
  .practice-answer-slot.is-visible .answer-analysis.answer-cards-wrap {
    /* 边框宽度随英文句子长短收缩，刚好包住内容，短句不再横跨整行；长句仍受 max-width 约束换行 */
    width: fit-content;
    max-width: 100%;
    justify-self: center;
    margin-inline: auto;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1px solid var(--bd);
    border-radius: 14px;
    background: var(--soft);
    box-shadow: 0 16px 38px rgba(31,35,41,.14);
  }
  body:not([data-practice-theme="dark"]) .practice-answer-slot.is-visible .answer-analysis.answer-cards-wrap { background: #fff; }
  /* 电脑端先隐藏答案单词右上角五角星收藏入口（手机端保留；单词收藏仍可用单词详情弹层内按钮） */
}
.mobile-notice-preference { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; }
.mobile-notice-preference input { width: 18px; height: 18px; }
.mobile-bottom-nav { display: none; }
.page-header { display: none; }
.practice-controls .control-button.is-next-question { background: var(--pg); color: var(--t1); border-color: var(--bd); }
.practice-controls .control-button.is-next-question kbd { color: var(--or); }
.mobile-account-card, .mobile-account-links { padding: 20px; margin-bottom: 16px; border: 1px solid var(--bd); border-radius: 14px; background: var(--pg); }
.mobile-account-card > strong { font-size: 22px; }
.mobile-account-links { display: grid; padding: 0 20px; }
.mobile-account-links > button { display: flex; justify-content: space-between; padding: 18px 0; border: 0; border-bottom: 1px solid var(--bd); border-radius: 0; background: transparent; text-align: left; }
.mobile-account-links > button:last-child { border-bottom: 0; }
.mobile-account-logout { width: 100%; margin-top: 4px; padding: 16px; border: 1px solid var(--bd); border-radius: 14px; background: var(--pg); color: #C0392B; font-size: 16px; font-weight: 600; text-align: center; }
.mobile-practice-notice { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.4); }
.mobile-practice-notice > div { position: relative; width: min(100%, 380px); padding: 30px 24px 22px; border: 1px solid var(--bd); box-shadow: 0 20px 60px #1F232926; border-radius: 22px; background: var(--pg); color: var(--t1); }
.mobile-practice-notice h2 { font-size: 21px; line-height: 1.4; margin: 12px 28px 14px 0; letter-spacing: -.4px; }
.mobile-practice-notice p { font-size: 14px; line-height: 1.8; color: var(--t2); margin: 10px 0; }
.mobile-practice-notice .mobile-site-address { display: inline-block; padding: 5px 12px; border-radius: 8px; background: var(--or-bg); color: var(--or-d); font-weight: 600; }
.mobile-practice-notice .primary { display: block; width: fit-content; max-width: 100%; padding: 12px 22px; margin: 20px auto 0; border-radius: 12px; font-size: 14px; }
.upgrade-pill svg { width: 14px; height: 14px; flex: none; }
.mobile-notice-close { position: absolute; top: 6px; right: 8px; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; font-size: 26px; }
.mobile-site-address { font-weight: 700; }

@media (max-width: 600px) {
  .app-shell:not(.auth-shell) { padding: env(safe-area-inset-top) 0 calc(78px + env(safe-area-inset-bottom)); }
  .app-shell > .sidebar { display: none; }
  .app-shell > .main { min-height: calc(100dvh - 132px); height: auto; overflow: visible; }
  .mobile-bottom-nav { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; padding: 7px 4px calc(7px + env(safe-area-inset-bottom)); background: var(--pg); border-top: 1px solid var(--bd); }
  .mobile-bottom-nav button { display: grid; justify-items: center; gap: 4px; min-height: 50px; padding: 5px 2px; border: 0; border-radius: 10px; font-size: 12px; color: var(--t2); background: transparent; }
  .mobile-bottom-nav button[aria-current] { color: var(--or); background: var(--or-sd); }
  .mobile-bottom-nav svg { width: 22px; height: 22px; }
  .main-inner { padding: 16px 12px; }
  .app-shell > .main { scroll-margin-top: 0; }
  .main-inner > .topbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .main-inner > .topbar .topbar-actions { flex-wrap: wrap; }
  .main-inner > .topbar .topbar-actions .profile-avatar-button { display: none; }
  .home-dashboard { gap: 16px; padding-bottom: 12px; }
  .home-checkin-bar, .home-bottom-grid, .home-try-grid { grid-template-columns: 1fr; }
  .home-checkin-bar, .home-try-card { padding: 20px; border-radius: 14px; }
  .home-checkin-right { width: 100%; justify-items: stretch; }
  .home-checkin-progress { flex-direction: column; align-items: stretch; gap: 8px; }
  .home-checkin-track { flex: none; }
  .home-check-week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .my-daily-tabs { overflow-x: auto; }
  .practice-shell { height: var(--mobile-visible-height, 100dvh); min-height: 0; }
  .practice-topbar { height: 52px; min-height: 52px; padding: 6px 10px; gap: 8px; grid-template-columns: auto minmax(0,1fr) auto; }
  .practice-path { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .practice-status { grid-column: auto; justify-content: flex-end; gap: 6px; font-size: 13px; min-width: 0; }
  .practice-topbar .practice-back { min-height: 30px; padding: 5px 12px; border-radius: 8px; font-size: 13px; }
  .practice-topbar .practice-mode-label { gap: 0; }
  .practice-topbar .practice-mode-select { width: 74px; min-width: 74px; height: 30px; padding: 4px 6px; font-size: 13px; }
  .practice-topbar .practice-status-divider { display: none; }
  .practice-topbar .practice-settings-button, .practice-topbar .fullscreen-button, .practice-settings-panel { display: none !important; }
  .practice-controls kbd { display: none; }
  .practice-controls { bottom: calc(var(--mobile-keyboard-inset, 0px) + env(safe-area-inset-bottom) + 6px); gap: 4px; padding: 6px; width: calc(100% - 16px); border-radius: 14px; }
  .practice-controls .control-button { padding: 0 9px; font-size: 13px; gap: 0; height: 40px; white-space: nowrap; }
  .practice-controls .arrow-control { flex: 0 0 26px; width: 26px; padding: 0; }
  .dictation-stage { height: calc(var(--mobile-visible-height, 100dvh) - 106px); padding: 0 12px 78px; grid-template-rows: 6px minmax(0,1fr); overflow-y: auto; scroll-padding: 60px 0 85px; }
  .dictation-card, .dictation-stage.has-answer-stage .dictation-card { margin-top: 44px; align-self: start; width: 100%; gap: 24px; }
  .dictation-stage.has-answer-stage .dictation-card { margin-top: 44px; }
  .zh-prompt { font-size: 18px; margin: 0; }
  .blank-row { gap: 18px 10px; }
  .dictation-field { font-size: 24px; }
  .dictation-blank, .dictation-display { font-size: 24px; }
  .dictation-stage > .practice-answer-slot { position: absolute; top: 8px; left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); height: auto; min-height: 0; padding: 0; z-index: 25; display: none; }
  .dictation-stage > .practice-answer-slot.is-visible { display: block; padding: 12px 10px; background: var(--pg); border: 1px solid var(--bd); border-radius: 14px; box-shadow: 0 16px 38px rgba(31,35,41,.18); max-height: calc(var(--mobile-visible-height,100dvh) - 170px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .practice-answer-slot .answer-analysis { padding: 6px 0; }
  .practice-shell .dictation-stage.has-answer-stage > .practice-answer-slot .answer-cards { gap: 6px 7.3333px; }
  body:not([data-practice-theme="dark"]) .practice-shell .answer-analysis .ac-word { font-size: 18px; font-weight: 400; }
  body:not([data-practice-theme="dark"]) .practice-shell .correct-review .ac-word { font-size: 20px; font-weight: 500; }
  .practice-shell .answer-analysis .answer-card { min-height: 0; padding: 4px 2px; }
  .practice-shell .answer-analysis .answer-cards { gap: 10px 6px; }
  .dictation-stage:has(.dictation-card.is-reviewing) { grid-template-rows: 6px minmax(0,1fr); }
  .dictation-stage .dictation-card.is-reviewing { align-self: center; margin-top: 0; }
  .sentence-breakdown-result { scroll-margin-top: 62px; min-height: calc(100dvh - 118px); }
  .profile-panel { max-height: calc(100dvh - 40px); overflow-y: auto; }
}

body.wechat-login-pending { background: #fff; }
@media (max-width: 600px) { .practice-controls .control-button, .practice-controls .control-button:hover, .practice-controls .control-button:focus { background: #fff; } }
.daily-token-bar {
  display: flex; align-items: center; gap: 12px; margin-top: 14px;
  padding-top: 12px; border-top: 1px dashed #E4E7EB; flex-wrap: wrap;
  width: 100%;
}
.daily-token-label { font-size: 13px; font-weight: 600; color: #80858F; }
.daily-token-track { appearance: none; border: 0; flex: 1; min-width: 120px; height: 8px; border-radius: 4px; background: #F5F6F8; overflow: hidden; }
.daily-token-track::-webkit-progress-bar { background: #F5F6F8; border-radius: 4px; }
.daily-token-track::-webkit-progress-value { background: #E8650F; border-radius: 4px; transition: width .2s; }
.daily-token-track::-moz-progress-bar { background: #E8650F; border-radius: 4px; transition: width .2s; }
.daily-token-remaining { font-size: 13px; color: #1F2329; font-variant-numeric: tabular-nums; white-space: nowrap; }
.daily-token-reset { font-size: 12px; color: #80858F; white-space: nowrap; }
.daily-token-bar.is-low .daily-token-track::-webkit-progress-value { background: #D2432F; }
.daily-token-bar.is-low .daily-token-track::-moz-progress-bar { background: #D2432F; }
.daily-token-bar.is-low .daily-token-remaining { color: #C0392B; }
button.quota-empty:disabled { background: #F3C4A4; cursor: not-allowed; }
.my-daily-stats .daily-token-ring { display: flex; align-items: flex-start; gap: 8px; border-right: 1px solid #F0F1F3; padding-right: 6px; text-align: left; }
.my-daily-stats .daily-token-ring > .quota-ring-image > svg { flex-shrink: 0; width: 40px; height: 40px; }
.daily-token-arc { stroke: #E8650F; transition: stroke-dashoffset .2s; }
.my-daily-stats .daily-token-ring strong { font-size: 18px; font-weight: 700; color: #E8650F; }
.my-daily-stats .daily-token-ring span { font-size: 11px; color: #80858F; }
.daily-token-ring.is-low .daily-token-arc { stroke: #D2432F; }
.my-daily-stats .daily-token-ring.is-low strong { color: #D2432F; }
@media (max-width: 600px) {
  .daily-token-reset { flex-basis: 100%; }
  .my-daily-stats { gap: 14px; }
  .my-daily-stats .daily-token-ring { gap: 5px; }
}
/* Daily cost allowance and membership dialog, reference 2026-09-17. */
.upgrade-pill{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border-radius:13px;border:1px solid #F6CBA8;background:#FFF3EA;color:#C2560C;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.upgrade-pill:hover{background:#FDE4D1}.upgrade-pill--xs{height:22px;padding:0 8px;font-size:11px;border-radius:11px}
.home-dashboard .upgrade-pill{background:#fff;border-color:#EE7A2C;color:#E8650A}
.home-dashboard .upgrade-pill:hover{background:#F3F3F2}
.upgrade-overlay{position:fixed;inset:0;z-index:11000;background:rgba(31,35,41,.45);display:flex;align-items:center;justify-content:center;padding:12px}
.upgrade-modal{position:relative;width:min(92vw,360px);max-height:95vh;overflow:auto;box-sizing:border-box;background:#FFFFFF;border-radius:18px;padding:22px 20px 18px;color:#1F2329;text-align:center}
.upgrade-close{position:absolute;right:12px;top:12px;border:0;background:none;font-size:22px;color:#80858F;cursor:pointer}
.upgrade-crown{width:52px;height:52px;margin:auto;display:grid;place-items:center;border-radius:50%;background:#FDEDE2;color:#E8650F}.upgrade-crown svg{width:28px;height:28px}
.upgrade-modal h3{font-size:19px;margin:12px 0 0}.upgrade-modal p{font-size:14px;line-height:1.6;color:#5F6570;margin:6px 0 14px}.upgrade-modal b{color:#E8650F}
.upgrade-compare{padding:12px 14px;border-radius:12px;background:#F5F6F8;font-size:13px}.upgrade-compare>div{display:flex;align-items:center;gap:10px}.upgrade-compare>div+div{margin-top:10px}.upgrade-compare span:first-child{width:52px;text-align:left}.upgrade-compare span:last-child{width:34px;text-align:right}.upgrade-compare i{flex:1}.upgrade-compare em{display:block;height:8px;border-radius:4px;background:#E8650F}.upgrade-compare>div:first-child em{background:#D5D8DD}
.upgrade-modal>small{display:block;font-size:12px;color:#80858F;margin-top:8px}.upgrade-primary{height:44px;width:100%;border:0;border-radius:12px;background:#E8650F;color:white;font-size:16px;font-weight:600;margin-top:14px;cursor:pointer}.upgrade-links{display:flex;justify-content:center;gap:14px;margin-top:12px;font-size:13px;color:#80858F}.upgrade-links button{border:0;background:none;color:inherit;cursor:pointer}.upgrade-modal footer{font-size:11px;color:#A3A8B0;margin-top:10px}
.quota-toast{position:fixed;z-index:12000;bottom:22%;left:50%;transform:translateX(-50%);max-width:90vw;background:#1F2329;color:#fff;font-size:13px;border-radius:20px;padding:9px 16px}
.quota-first-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:100%}.quota-second-row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;width:100%;margin-top:8px}.quota-reset-stack{display:flex;flex-direction:column;gap:2px;min-width:140px;font-size:14px;color:#1F2329}.quota-reset-stack small{font-size:12px;color:#80858F}
.quota-ring-image{position:relative;display:block;width:40px;height:40px;flex-shrink:0}.quota-ring-crown{position:absolute;inset:0;display:grid;place-items:center;color:#E8650F}.quota-ring-crown svg{width:16px;height:16px}.daily-token-ring[data-upgrade]{cursor:pointer;border-radius:10px}.daily-token-ring[data-upgrade]:hover{background:#FDF4EE}.daily-token-ring strong.quota-zero-label{font-size:14px;color:#C0392B}.quota-vip{font-size:10px;font-weight:800;color:#F3C98B;background:#1F2329;border-radius:6px;padding:1px 6px}.nav-button.quota-member-empty{background:#FFF4EC;border:1px solid #F6D7BF;border-radius:10px}.nav-button.quota-member-empty:hover{background:#FDEBDD}.quota-member-empty .nav-hint{color:#C0392B;font-weight:600}.quota-multiplier{margin-left:auto;background:#E8650F;color:white;font-size:11px;border-radius:10px;padding:2px 8px}
.bandu-overlay{position:fixed;inset:0;z-index:10000;background:rgba(31,35,41,.45);display:flex;align-items:center;justify-content:center;padding:16px}.bandu-dialog{width:min(92vw,400px);max-height:95vh;overflow:auto;box-sizing:border-box;background:#FFFFFF;border-radius:18px;padding:24px 22px 18px;color:#1F2329}.bandu-icons{display:flex;align-items:center;justify-content:center;gap:12px;color:#A3A8B0}.bandu-icons span{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:#1F6B45;color:#fff;font-size:20px}.bandu-icons span:last-child{background:#FDEDE2;color:#B8752C;font-weight:800}.bandu-dialog h2{font-size:18px;text-align:center;margin:12px 0 4px}.bandu-dialog p{font-size:13px;text-align:center;line-height:1.6;color:#5F6570}.bandu-info{background:#F5F6F8;border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.7;margin-top:14px}.bandu-info small{font-size:12px;color:#80858F}.bandu-info>div{margin-bottom:6px}.bandu-info button,.bandu-dialog footer button{background:none;border:0;text-decoration:underline;color:#80858F;font-size:12px;cursor:pointer}.bandu-actions{display:flex;gap:10px;margin-top:16px}.bandu-actions>button{flex:1;height:42px;border-radius:10px;border:1px solid #E4E7EB;background:#fff;color:#5F6570;font-size:15px;cursor:pointer}.bandu-actions>button.bandu-primary{flex:2}.bandu-dialog .bandu-primary{background:#E8650F;color:#fff;border:0;font-weight:600;outline:none}.bandu-dialog button:focus-visible{outline:2px solid #E8650F;outline-offset:2px}.bandu-dialog footer{font-size:11px;text-align:center;color:#A3A8B0;margin-top:10px}.bandu-ok{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:#E8F5EC;color:#2E7D4A;margin:auto;font-size:24px}.bandu-full{width:100%;height:42px;border-radius:10px;margin-top:16px;cursor:pointer}
.daily-token-bar{display:flex;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px dashed #E4E7EB}.daily-token-track{flex:1;min-width:120px;height:8px}.daily-token-ring{border-right:1px solid #F0F1F3}.daily-token-ring .quota-ring-image{display:block}.daily-token-ring .quota-ring-crown{display:grid}.daily-token-ring strong.quota-zero-label{font-size:14px;color:#C0392B}.quota-empty[aria-disabled=true]{background:#F3C4A4;cursor:pointer}

.collection-source{display:block;font-size:12px;color:#80858F}.my-daily-stats .quota-ring-crown svg{width:16px;height:16px}.my-daily-stats .quota-ring-crown{color:#E8650F}.my-daily-stats .daily-token-ring strong.quota-zero-label{font-size:14px;color:#C0392B}.quota-second-row{margin-top:8px}.daily-token-bar{row-gap:0}

/* Legal documents modal (privacy policy / terms): centered, scrollable dialog. */
.legal-modal-backdrop{position:fixed;inset:0;z-index:11000;background:rgba(31,35,41,.45);display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
.legal-modal{position:relative;width:min(92vw,680px);max-width:100%;max-height:88vh;display:flex;flex-direction:column;box-sizing:border-box;background:#FFFFFF;border-radius:18px;box-shadow:0 24px 60px rgba(31,35,41,.22);overflow:hidden;color:#1F2329}
.legal-modal-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid #F0F1F3;background:#FFFFFF}
.legal-modal-head h2{margin:0;font-size:17px;font-weight:700;color:#1F2329;line-height:1.4;padding-right:4px}
.legal-modal-head button{flex:0 0 auto;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:#F4F5F7;color:#5F6570;font-size:20px;line-height:1;cursor:pointer}
.legal-modal-head button:hover{background:#FDE4D1;color:#C2560C}
.legal-modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 20px 24px;overscroll-behavior:contain}
.legal-modal-body p{margin:0 0 10px;font-size:14px;line-height:1.75;color:#5F6570;word-break:break-word}
.legal-modal-body p.legal-modal-heading{margin:16px 0 8px;font-size:15px;font-weight:700;color:#1F2329;line-height:1.5}
.legal-modal-body p:first-child{margin-top:0}
.legal-modal button:focus-visible{outline:2px solid #E8650F;outline-offset:2px}
@media (max-width:600px){
  .legal-modal-backdrop{padding:12px}
  .legal-modal{width:94vw;max-height:90vh;border-radius:16px}
  .legal-modal-head{padding:13px 14px}
  .legal-modal-head h2{font-size:16px}
  .legal-modal-body{padding:14px 16px 20px}
  .legal-modal-body p{font-size:13.5px;line-height:1.7}
}
body:has(.bandu-overlay) .legal-modal-backdrop{z-index:10001}

.nav-button.quota-member-empty{grid-template-columns:34px minmax(0,1fr) auto}.quota-multiplier{white-space:nowrap}.upgrade-modal button:focus-visible{outline:2px solid #E8650F;outline-offset:2px}

/* 练习页取消收藏居中确认弹框 */
.practice-unfav-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.45);
}
.practice-unfav-card {
  width: min(440px, calc(100vw - 56px));
  box-sizing: border-box;
  background: #fff;
  border-radius: 22px;
  padding: 30px 26px 24px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  animation: practiceUnfavPop 0.14s ease-out;
}
@keyframes practiceUnfavPop {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.practice-unfav-card h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
}
.practice-unfav-card p {
  margin: 12px 0 22px;
  font-size: 14px;
  color: #9a9a9a;
  line-height: 1.5;
}
.practice-unfav-actions {
  display: flex;
  gap: 12px;
}
.practice-unfav-actions button {
  flex: 1;
  min-height: 46px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: transform 0.08s ease, filter 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.practice-unfav-actions button:active { transform: scale(0.97); filter: brightness(0.96); }
.practice-unfav-actions .is-cancel { background: #F4F5F7; color: #8a8a8a; }
.practice-unfav-actions .is-confirm { background: var(--or, #c8611a); color: #fff; }

/* ===== 手机「我的」页（参照 profile_schemeA，.mpp 作用域避免污染全局） ===== */
.mpp { padding-bottom: 8px; }
.mpp-vip-card {
  margin: 4px 4px 16px;
  background: linear-gradient(135deg, #2C1A0E 0%, #5C3A1E 60%, #8B5A2B 100%);
  border-radius: 16px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.mpp-vip-card::before { content: ''; position: absolute; right: -20px; top: -20px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,0.05); }
.mpp-vip-card::after { content: ''; position: absolute; right: 20px; bottom: -30px; width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.04); }
.mpp-vip-top { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.mpp-vip-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.15); border: 1.5px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mpp-vip-avatar svg { width: 24px; height: 24px; }
.mpp-vip-info { flex: 1; min-width: 0; }
.mpp-vip-phone { font-size: 15px; font-weight: 500; color: #fff; letter-spacing: 0.5px; }
.mpp-vip-badge { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; background: rgba(255,215,100,0.2); border: 0.5px solid rgba(255,215,100,0.5); border-radius: 20px; padding: 2px 8px; }
.mpp-vip-badge i { width: 6px; height: 6px; border-radius: 50%; background: #FFD700; }
.mpp-vip-badge span { font-size: 11px; color: #FFD700; font-weight: 500; white-space: nowrap; }
.mpp-vip-expire { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpp-vip-btn { background: rgba(255,255,255,0.12); border: 0.5px solid rgba(255,255,255,0.25); border-radius: 20px; padding: 6px 14px; color: rgba(255,255,255,0.85); font-size: 12px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.mpp-vip-btn:active { background: rgba(255,255,255,0.2); }

.mpp-section { margin: 0 4px 12px; background: #fff; border-radius: 14px; overflow: hidden; border: 0.5px solid #EAECEF; }
.mpp-menu { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; border-bottom: 0.5px solid #F0F1F3; background: transparent; text-align: left; cursor: pointer; font: inherit; }
.mpp-menu:last-child { border-bottom: none; }
.mpp-menu:active { background: #F5F6F8; }
.mpp-menu-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mpp-menu-icon.icon-study { background: #EAF3DE; color: #3B6D11; }
.mpp-menu-icon.icon-course { background: #E6F1FB; color: #185FA5; }
.mpp-menu-icon.icon-market { background: #FAEEDA; color: #854F0B; }
.mpp-menu-icon.icon-review { background: #FBEAF0; color: #993556; }
.mpp-menu-icon.icon-vip { background: #EEEDFE; color: #534AB7; }
.mpp-menu-icon.icon-partner { background: #E1F5EE; color: #0F6E56; }
.mpp-menu-label { flex: 1; font-size: 15px; color: #1a1a1a; }
.mpp-menu-arrow { color: #ccc; display: flex; }

.mpp-logout { display: block; width: calc(100% - 8px); margin: 4px 4px 24px; padding: 13px; text-align: center; color: #C0392B; font-size: 15px; font-weight: 500; background: #fff; border: 0.5px solid #EAECEF; border-radius: 14px; cursor: pointer; }
.mpp-logout:active { background: #F5F6F8; }

/* ===== 个人信息底部上滑 sheet ===== */
.mpp-sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 900; display: flex; align-items: flex-end; justify-content: center; }
.mpp-sheet { background: #fff; border-radius: 20px 20px 0 0; width: 100%; max-width: 480px; overflow: hidden; padding-bottom: calc(32px + env(safe-area-inset-bottom));  }
@keyframes mppSheetUp { from { transform: translateY(40px); opacity: 0.4; } to { transform: translateY(0); opacity: 1; } }
.mpp-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 0.5px solid #F0F1F3; }
.mpp-sheet-head > span { font-size: 16px; font-weight: 500; color: #1a1a1a; }
.mpp-sheet-head button { border: 0; background: transparent; color: #aaa; font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.mpp-sheet-hero { display: flex; align-items: center; gap: 14px; padding: 20px 20px 16px; }
.mpp-sheet-av { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #3D2B1F 0%, #8B5A2B 60%, #C4873A 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mpp-sheet-av svg { width: 36px; height: 36px; }
.mpp-sheet-name { font-size: 15px; font-weight: 500; color: #1a1a1a; }
.mpp-sheet-edit { border: 0; background: transparent; color: #B85C2A; font-size: 13px; margin-top: 4px; padding: 0; cursor: pointer; }
.mpp-rows { display: flex; flex-direction: column; }
.mpp-row { display: flex; align-items: center; width: 100%; padding: 13px 20px; border: 0; border-top: 0.5px solid #F0F1F3; background: transparent; text-align: left; font: inherit; cursor: pointer; }
.mpp-row-label { font-size: 14px; color: #888; flex: 1; }
.mpp-row-value { font-size: 14px; color: #888; text-align: right; }
.mpp-row-arr { color: #ccc; display: flex; margin-left: 6px; }
.mpp-row-bound { font-size: 14px; color: #B85C2A; }
.mpp-row.is-danger .mpp-row-label { color: #C0392B; }
.mpp-row:active { background: #F5F6F8; }
.mpp-vip-pill { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(90deg, #5C3A1E, #8B5A2B); border-radius: 20px; padding: 3px 10px; }
.mpp-vip-pill i { width: 5px; height: 5px; border-radius: 50%; background: #FFD700; }
.mpp-vip-pill span { font-size: 12px; color: #FFD700; font-weight: 500; }

/* 手动绑定手机号弹层的关闭按钮 */
.wechat-phone-bind-overlay.is-manual { align-items: center; justify-content: center; padding: 20px; }
.wechat-bind-manual-close { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border: 0; background: transparent; color: #888; font-size: 26px; line-height: 1; cursor: pointer; z-index: 2; }

/* ===== 手机统一页眉（page-header） ===== */
@media (max-width: 600px) {
  .page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    background: #fff;
    padding: 14px 16px 12px;
    border-bottom: 0.5px solid #EAECEF;
  }
  .page-header-title { font-size: 22px; font-weight: 500; color: #1a1a1a; line-height: 1; margin: 0; }
  .page-header-sub { font-size: 13px; color: #aaa; margin: 3px 0 0; }
  .page-header-right { display: flex; gap: 10px; align-items: center; padding-bottom: 2px; }
  .header-icon-btn {
    width: 32px; height: 32px; border-radius: 50%;
    background: #F4F5F7; border: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #666; -webkit-tap-highlight-color: transparent;
  }
  .header-icon-btn:active { background: #EAECEF; }
  .header-avatar-slot { display: flex; align-items: center; }
  .header-avatar-slot .profile-avatar-button { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; border: 0; background: transparent; padding: 0; display: flex; }
  .header-avatar-slot .profile-avatar-button img { width: 32px; height: 32px; border-radius: 50%; }


}

/* ===== round10 ===== */
/* 1. 朗读按钮点击：明确的光圈 + 高光反馈（JS 加 .control-ripple，不依赖 :active） */
.control-ripple-fx {
  position: fixed; z-index: 13000; border-radius: 14px; pointer-events: none;
  box-sizing: border-box; overflow: hidden;
  animation: controlBtnRipple .52s ease-out;
}
.control-ripple-fx::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 70%);
  animation: controlBtnFlash .52s ease-out;
}
@keyframes controlBtnRipple {
  0% { box-shadow: 0 0 0 0 rgba(232,101,15,.55); }
  45% { box-shadow: 0 0 0 10px rgba(232,101,15,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,101,15,0); }
}
@keyframes controlBtnFlash { 0% { opacity: .95; } 100% { opacity: 0; } }

/* 6. 下线答案区“收藏单个单词”：五角星与单词弹层收藏按钮双端一律隐藏（JS 也已不再渲染） */

@media (max-width: 600px) {
  /* 5. 我记的日常：额度环与百分比/文字垂直居中对齐 */
  .my-daily-stats { align-items: center; }
  .my-daily-stats .daily-token-ring { align-items: center; }
  /* 5.2 筛选标签始终一行（不换行），放不下时横向滑动 */
  .my-daily-tabs { flex-wrap: nowrap; }
  .my-daily-tab { flex: 0 0 auto; white-space: nowrap; padding: 0 11px; }

  /* 4. 句子拆解：页眉与输入卡之间不留空（隐藏已被统一页眉取代的空标题块），收紧上间距 */
  [data-app-view="sentenceBreakdown"] .sentence-breakdown-left > div:first-child { display: none; }
  [data-app-view="sentenceBreakdown"] .sentence-breakdown-left { padding-top: 12px; gap: 16px; }
}

/* ===== Round11 会员支付弹窗（1:1 移植设计稿，独立 pm- 前缀，不污染原有样式） ===== */
.pm-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:95;padding:24px;}
.pm-modal{background:#0f0e0c;border-radius:20px;border:0.5px solid rgba(220,100,30,0.22);width:100%;max-width:660px;padding:32px 32px 28px;position:relative;color:#f3c9a6;max-height:92vh;overflow-y:auto;}
.pm-close{position:absolute;top:18px;right:18px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.07);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(240,150,80,0.5);font-size:16px;line-height:1;transition:background 0.15s;}
.pm-close:hover{background:rgba(255,255,255,0.12);}
.pm-title{text-align:center;font-size:20px;font-weight:500;color:#f07830;margin-bottom:22px;letter-spacing:0.02em;}
.pm-inner{background:rgba(255,255,255,0.025);border-radius:14px;border:0.5px solid rgba(220,100,30,0.14);padding:20px 22px 18px;}
.pm-price-label-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pm-price-label{font-size:12px;color:rgba(240,150,80,0.48);}
.pm-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 9px;border-radius:20px;background:rgba(220,90,20,0.14);border:0.5px solid rgba(220,100,30,0.28);color:#f07830;font-size:11px;}
.pm-price-row{display:flex;align-items:flex-end;gap:10px;margin:6px 0 4px;}
.pm-price-big{font-size:36px;font-weight:500;color:#f07830;line-height:1;}
.pm-price-orig{font-size:13px;color:rgba(240,150,80,0.28);text-decoration:line-through;margin-bottom:4px;}
.pm-order-id{font-size:10px;color:rgba(240,150,80,0.3);font-family:'SF Mono','Fira Code',monospace;margin-top:4px;word-break:break-all;}
.pm-divider{height:0.5px;background:rgba(220,100,30,0.14);margin:16px 0;}
.pm-body{display:flex;gap:24px;}
.pm-body-left{flex:1;display:flex;flex-direction:column;gap:16px;}
.pm-body-right{flex:0 0 186px;display:flex;flex-direction:column;align-items:center;gap:10px;}
.pm-steps{display:flex;align-items:center;}
.pm-step-node{display:flex;flex-direction:column;align-items:center;gap:5px;}
.pm-step-circle{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;}
.pm-step-on{background:#f07830;color:#fff;}
.pm-step-off{background:rgba(255,255,255,0.04);color:rgba(240,150,80,0.28);border:0.5px solid rgba(220,100,30,0.16);}
.pm-step-label{font-size:10px;color:rgba(240,150,80,0.48);white-space:nowrap;}
.pm-step-label-on{font-size:10px;color:rgba(240,150,80,0.75);white-space:nowrap;}
.pm-step-line{flex:1;height:1.5px;margin-bottom:14px;}
.pm-step-line-on{background:#f07830;}
.pm-step-line-off{background:rgba(220,100,30,0.16);}
.pm-notice{background:rgba(220,90,20,0.07);border-radius:10px;border:0.5px solid rgba(220,100,30,0.15);padding:13px 15px;flex:1;}
.pm-notice-title{font-size:12px;font-weight:500;color:#f07830;margin-bottom:9px;display:flex;align-items:center;gap:5px;}
.pm-notice-item{font-size:11px;color:rgba(240,190,150,0.58);line-height:1.65;margin-bottom:4px;display:flex;gap:6px;}
.pm-notice-item:last-child{margin-bottom:0;}
.pm-dot{width:3px;height:3px;border-radius:50%;background:rgba(240,120,48,0.45);flex-shrink:0;margin-top:6px;}
.pm-dot-r{width:3px;height:3px;border-radius:50%;background:#e85c5c;flex-shrink:0;margin-top:6px;}
.pm-qr-box{background:#fff;border-radius:11px;padding:9px;width:158px;height:158px;display:flex;align-items:center;justify-content:center;}
.pm-qr-box img{display:block;width:140px;height:140px;object-fit:contain;}
.pm-qr-loading{display:flex;flex-direction:column;align-items:center;gap:8px;color:#80858F;font-size:11px;}
.pm-qr-expired{display:flex;flex-direction:column;align-items:center;gap:10px;color:#80858F;font-size:12px;}
.pm-recreate{border:none;cursor:pointer;background:#f07830;color:#fff;font-size:12px;padding:7px 16px;border-radius:8px;}
.pm-qr-hint{font-size:12px;font-weight:500;color:#f07830;}
.pm-qr-timer{font-size:11px;color:rgba(240,150,80,0.55);}
.pm-qr-timer #pm-countdown{color:#f07830;font-weight:500;}
.pm-qr-agree{font-size:10px;color:rgba(240,150,80,0.3);text-align:center;line-height:1.6;}
.pm-link{background:none;border:none;padding:0;color:#f07830;text-decoration:underline;font-size:inherit;line-height:inherit;cursor:pointer;font-family:inherit;}
.pm-help-wrap{position:relative;display:flex;justify-content:center;}
.pm-help{width:100%;max-width:240px;margin:18px auto 0;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px;border-radius:11px;background:rgba(220,90,20,0.1);color:#f07830;border:0.5px solid rgba(220,100,30,0.26);font-size:13px;font-weight:500;cursor:pointer;transition:background 0.15s;}
.pm-help:hover{background:rgba(220,90,20,0.16);}
.pm-service-pop{display:none;position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);background:#fff;border-radius:14px;padding:18px 20px 14px;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,0.4);z-index:99;width:210px;}
.pm-service-pop.is-open{display:block;}
.pm-service-title{font-size:14px;font-weight:500;color:#1a1a1a;margin-bottom:3px;}
.pm-service-sub{font-size:12px;color:#999;margin-bottom:12px;}
.pm-service-qr{width:164px;height:164px;border-radius:6px;margin:0 auto;background:#f5f5f5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;}
.pm-service-qr img{display:block;width:100%;height:100%;object-fit:contain;}

.pm-service-pop::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #fff;}

/* 成功弹窗 */
.pm-success{background:#0f0e0c;border-radius:20px;border:0.5px solid rgba(220,100,30,0.22);width:100%;max-width:480px;padding:40px 36px 32px;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;color:#f3c9a6;max-height:92vh;overflow-y:auto;}
.pm-dots{display:flex;gap:6px;margin-bottom:20px;}
.pm-dots .pm-dot{width:6px;height:6px;border-radius:50%;background:#f07830;margin-top:0;}
.pm-dots .pm-dot-fade{background:rgba(240,120,48,0.35);}
.pm-dots .pm-dot-fade2{background:rgba(240,120,48,0.2);}
.pm-icon-ring{width:72px;height:72px;border-radius:50%;border:2px solid #f07830;display:flex;align-items:center;justify-content:center;margin-bottom:18px;position:relative;}
.pm-icon-ring::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:0.5px solid rgba(240,120,48,0.18);}
.pm-icon-check{width:56px;height:56px;border-radius:50%;background:#f07830;display:flex;align-items:center;justify-content:center;}
.pm-checkmark{font-size:26px;color:#fff;line-height:1;}
.pm-success-title{font-size:22px;font-weight:500;color:#fff;margin-bottom:6px;}
.pm-success-sub{font-size:13px;color:rgba(240,150,80,0.5);margin-bottom:24px;}
.pm-order-card{background:rgba(220,90,20,0.07);border-radius:12px;border:0.5px solid rgba(220,100,30,0.17);padding:16px 20px;width:100%;margin-bottom:20px;}
.pm-order-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:0.5px solid rgba(220,100,30,0.1);gap:12px;}
.pm-order-row:last-child{border-bottom:none;padding-bottom:0;}
.pm-or-label{font-size:12px;color:rgba(240,150,80,0.44);flex-shrink:0;}
.pm-or-val{font-size:12px;color:rgba(240,190,150,0.8);font-family:'SF Mono','Fira Code',monospace;word-break:break-all;text-align:right;}
.pm-or-val-hi{font-size:12px;color:#f07830;font-weight:500;word-break:break-all;text-align:right;}
.pm-benefits{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-bottom:24px;}
.pm-benefit{background:rgba(255,255,255,0.03);border-radius:9px;border:0.5px solid rgba(220,100,30,0.12);padding:11px 12px;display:flex;align-items:center;gap:9px;text-align:left;}
.pm-benefit-icon{width:30px;height:30px;border-radius:8px;background:rgba(220,90,20,0.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;}
.pm-benefit-name{font-size:12px;color:rgba(240,190,150,0.9);font-weight:500;}
.pm-benefit-sub{font-size:10px;color:rgba(240,150,80,0.45);margin-top:1px;}
.pm-btn-primary{width:100%;padding:13px;border-radius:12px;background:#f07830;color:#fff;border:none;font-size:15px;font-weight:500;cursor:pointer;margin-bottom:10px;transition:opacity 0.15s;}
.pm-btn-primary:hover{opacity:0.9;}
.pm-btn-secondary{width:100%;padding:11px;border-radius:12px;background:rgba(220,90,20,0.1);color:#f07830;border:0.5px solid rgba(220,100,30,0.25);font-size:13px;cursor:pointer;transition:background 0.15s;}
.pm-btn-secondary:hover{background:rgba(220,90,20,0.16);}

/* 手机端轻遮罩：不展示购买/扫码版面，仅提示正在调起微信支付 */
.pm-spinner{width:38px;height:38px;border-radius:50%;border:3px solid rgba(240,120,48,0.18);border-top-color:#f07830;animation:pm-spin 0.8s linear infinite;}
.pm-spinner-dark{border-color:rgba(0,0,0,0.1);border-top-color:#f07830;width:30px;height:30px;}
@keyframes pm-spin{to{transform:rotate(360deg);}}

@media (max-width:600px){
  .pm-overlay{padding:16px;}
  .pm-success{padding:30px 20px 24px;}
  .pm-modal{padding:26px 18px 22px;}
  .pm-body{flex-direction:column-reverse;gap:18px;}
  .pm-body-right{flex:none;width:100%;}
  .pm-qr-box{margin:0 auto;}
  .pm-success-title{font-size:20px;}
  .pm-benefit-name{font-size:11px;}
}

/* ===== round12：练习计时器行右侧删除按钮（与计时器左右对齐） ===== */
.dictation-stage > .practice-stage-timer {
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.practice-stage-timer .pst-run { display: inline-flex; align-items: center; gap: 10px; }
.practice-stage-timer .practice-delete { position: relative; flex: 0 0 auto; z-index: 20; }
.practice-stage-timer .practice-delete-toggle {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--t2);
}
.practice-stage-timer .practice-delete-toggle svg { width: 15px; height: 15px; }
.practice-stage-timer .practice-delete-popover {
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  bottom: auto;
  z-index: 40;
}
/* 删除确认气泡打开时，计时器行整体浮到答案区之上，避免气泡及删除按钮被答案槽遮挡而点不到 */
.dictation-stage > .practice-stage-timer.is-delete-open { z-index: 40; }

/* ===== round12：手机「我记的日常」筛选一行均分、去横向滚动条、首尾两端对齐 ===== */
@media (max-width: 600px) {
  .my-daily-tabs {
    flex-wrap: nowrap;
    overflow: visible;
    justify-content: space-between;
    gap: 2px;
    padding-bottom: 0;
  }
  .my-daily-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 2px;
    white-space: nowrap;
    font-size: 12px;
    text-align: center;
  }
}

/* round12：手机端生成后“已存进我记的日常”条停靠在底部导航栏上沿，不被遮挡 */
@media (max-width: 600px) {
  .life-diary-result, .saved-practice-bar { scroll-margin-bottom: calc(68px + env(safe-area-inset-bottom)); }
}
/* Listening: independent language cards and playback-driven waveform. */
.dictation-stage[data-practice-mode="listening"] { grid-template-rows: 6px minmax(0, 1fr); }
.dictation-stage[data-practice-mode="listening"] > .practice-answer-slot { display: none; }
.dictation-stage[data-practice-mode="listening"] > .dictation-card {
  align-self: stretch; display: flex; flex-direction: column; justify-content: center;
  align-items: center; margin-top: 0; padding: 64px 0 24px; gap: 12px;
}
.listening-panel { display: flex; flex-direction: column; align-items: center; gap: 24px; width: min(640px, 100%); }
.listening-wave { display: flex; align-items: center; justify-content: center; gap: 6px; height: 48px; }
.listening-wave span { width: 6px; height: 30px; border-radius: 3px; background: var(--gr); opacity: .45; animation: listening-wave-pulse .85s ease-in-out infinite alternate; animation-play-state: paused; }
.listening-wave span:nth-child(1), .listening-wave span:nth-child(9) { height: 10px; animation-delay: -.3s; }
.listening-wave span:nth-child(2), .listening-wave span:nth-child(8) { height: 18px; animation-delay: -.6s; }
.listening-wave span:nth-child(3), .listening-wave span:nth-child(7) { height: 26px; animation-delay: -.1s; }
.listening-wave span:nth-child(4), .listening-wave span:nth-child(6) { height: 34px; animation-delay: -.5s; }
.listening-wave span:nth-child(5) { height: 40px; animation-delay: -.8s; }
.listening-wave.is-playing span { animation-play-state: running; opacity: 1; }
.listening-status { margin: 0; color: var(--muted); font-size: 16px; }
.listening-content-card { width: fit-content; max-width: 100%; padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); font-size: 20px; line-height: 1.6; overflow-wrap: anywhere; }
.practice-controls .control-button.is-listening-active { border-color: var(--gr); color: var(--gr); box-shadow: 0 0 0 1px var(--gr); }
@keyframes listening-wave-pulse { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .listening-wave span { animation: none; } }

.auth-forgot-mobile { display: none; }

/* Mobile auth B: keep all desktop selectors and form handlers unchanged. */
.auth-mobile-header, .auth-mobile-qr-corners { display: none; }
@media (max-width: 480px) {
  .auth-login-page { --auth-orange: #ce5b15; --auth-light: #ce5b15; --auth-link: #b85115; --auth-ink: #202124; --auth-muted: #71757b; --auth-line: #e5e7eb; display: block; min-height: 100dvh; color: var(--auth-ink); background: #fff; }
  .auth-login-page .auth-login-visual { display: none; }
  .auth-login-page .auth-login-main { min-height: 100dvh; padding: 28px 28px calc(26px + env(safe-area-inset-bottom)); background: #fff; justify-content: flex-start; }
  .auth-login-page .auth-login-content { width: 100%; min-height: calc(100dvh - 54px - env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
  .auth-mobile-header { display: block; flex: none; }
  .auth-mobile-brand { display: flex; align-items: flex-end; gap: 10px; color: #202124; font-size: 24px; font-weight: 700; line-height: 1; text-decoration: none; justify-content: flex-start; height: 42px; letter-spacing: .5px; }
  .auth-mobile-header h1 { font-size: 32px; font-weight: 700; line-height: 1.2; margin: 34px 0 10px; margin-top: 28px; letter-spacing: -1px; }
  .auth-mobile-header p { font-size: 14.5px; color: var(--auth-muted); margin: 0; line-height: 1.6; }
  .auth-login-page .auth-page-card { display: flex; flex-direction: column; flex: 1; width: 100%; padding: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; gap: 0; }
  .auth-login-page .auth-card-heading { margin: 22px 0 20px; }
  .auth-login-page .auth-card-heading h2 { font-size: 30px; line-height: 1.2; font-weight: 700; color: var(--auth-ink); margin: 0 0 10px; }
  .auth-login-page .auth-card-heading p { margin: 0; color: var(--auth-muted); font-size: 14px; line-height: 1.6; }
  .auth-login-page .auth-segmented { display: flex; flex: none; gap: 0; padding: 4px; margin: 30px 0 0; background: #f3f4f5; border: 0; border-radius: 12px; margin-top: 26px; }
  .auth-login-page .auth-segmented button { position: relative; flex: 1; padding: 11px 0; color: var(--auth-muted); font-size: 14px; font-weight: 400; border: 0; border-radius: 9px; background: transparent; box-shadow: none; white-space: nowrap; }
  .auth-login-page .auth-segmented button.active { color: var(--auth-ink); font-weight: 700; background: #fff; box-shadow: 0 1px 4px #0000000c; }
  .auth-login-page .auth-segmented button.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; border-radius: 3px; background: var(--auth-orange); display: none; }
  .auth-login-page .auth-scan { margin: 38px 0 0; padding: 0; margin-top: 34px; }
  .auth-login-page .auth-qr-box { width: 236px; height: 236px; min-height: 236px; padding: 18px; margin: 0 auto; border: 1px solid #e8eaed; border-radius: 18px; box-shadow: none; background: #fff; position: relative; }
  .auth-login-page .auth-qr-box > img { width: 200px; height: 200px; border-radius: 0; }
  .auth-mobile-qr-corners { display: block; position: absolute; inset: 0; pointer-events: none; }
  .auth-login-page .auth-qr-box::before, .auth-login-page .auth-qr-box::after, .auth-mobile-qr-corners::before, .auth-mobile-qr-corners::after { content: ''; position: absolute; width: 30px; height: 30px; border: 3px solid var(--auth-orange); pointer-events: none; border-color: #d5d8dd; border-width: 2px; }
  .auth-login-page .auth-qr-box::before { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 10px 0 0; }
  .auth-login-page .auth-qr-box::after { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 10px; }
  .auth-mobile-qr-corners::before { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
  .auth-mobile-qr-corners::after { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
  .auth-login-page .auth-scan h3 { font-size: 16px; font-weight: 700; margin: 22px 0 6px; color: var(--auth-ink); }
  .auth-login-page .auth-scan-legal { font-size: 13.5px; line-height: 1.6; color: var(--auth-muted); margin: 0 auto; text-align: center; max-width: 300px; }
  .auth-login-page .auth-form { display: flex; flex-direction: column; flex: 1; gap: 0; margin: 0; }
  .auth-login-page .auth-segmented + .auth-form { padding-top: 26px; }
  .auth-login-page .auth-field { position: relative; display: grid; grid-template-columns: 78px minmax(0,1fr); column-gap: 10px; row-gap: 0; align-items: center; margin: 16px 0 0; padding: 9px 12px; border: 1px solid #eceef0; background: #f5f6f7; margin-top: 14px; border-radius: 12px; }
  .auth-login-page .auth-field:first-child { margin-top: 0; }
  .auth-login-page .auth-field > span { grid-column: 1; grid-row: 1; display: flex; gap: 3px; align-items: center; color: var(--auth-ink); font-size: 13px; font-weight: 500; white-space: nowrap; }
  .auth-login-page .auth-field b { color: #D9482B; }
  .auth-login-page .auth-field > input, .auth-login-page .auth-target-row { grid-column: 2; grid-row: 1; min-width: 0; }
  .auth-login-page .auth-field input { width: 100%; min-width: 0; min-height: 0; height: 30px; padding: 4px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--auth-ink); font-size: 14px; outline: none; }
  .auth-login-page .auth-field input::placeholder { color: #767b82; }
  .auth-login-page .auth-field::after { content: ''; grid-column: 1 / -1; grid-row: 2; border-bottom: 1.5px solid var(--auth-line); padding-top: 11px; display: none; }
  .auth-login-page .auth-field:focus-within::after { border-color: var(--auth-orange); }
  .auth-login-page .auth-field small { grid-column: 1 / -1; margin: 5px 0 0; font-size: 11.5px; color: var(--auth-muted); line-height: 1.5; grid-row: 2; }
  .auth-login-page .auth-field-error { grid-column: 1 / -1; }
  .auth-login-page .auth-target-row { display: flex; align-items: center; gap: 6px; }
  .auth-login-page .auth-send-button { flex: none; min-height: 0; height: auto; padding: 0 0 0 12px; border: 0; border-left: 1px solid var(--auth-line); border-radius: 0; background: transparent; box-shadow: none; color: var(--auth-link); font-size: 12px; font-weight: 600; white-space: nowrap; padding-left: 8px; }
  .auth-login-page .auth-field:has([data-auth-invite-code]) { display: grid; }
  .auth-login-page .auth-field:has([data-auth-invite-code])::after { border-bottom-style: dashed; }
  .auth-login-page [data-auth-invite-code] { font-size: 12px; padding-right: 34px; }
  .auth-login-page .auth-field em { position: absolute; right: 12px; top: 14px; font-size: 12.5px; font-weight: 400; color: var(--auth-muted); white-space: nowrap; font-style: normal; }
  .auth-login-page .auth-forgot-desktop { display: none; }
  .auth-login-page .auth-forgot-mobile { display: block; position: static; align-self: flex-end; margin: 8px 0 0; padding: 4px 0 4px 12px; color: var(--auth-link); font-size: 12px; }
  .auth-login-page .auth-form::after { content: ''; order: 1; flex: 1; min-height: 24px; }
  .auth-login-page .auth-form > .auth-agree-row { order: 2; }
  .auth-login-page .auth-form > .auth-submit { order: 3; }
  .auth-login-page .auth-form > .auth-alt { order: 4; }
  .auth-login-page .auth-form > .auth-notice { order: 1; }
  .auth-login-page .auth-agree-row { margin: 0 0 14px; gap: 8px; font-size: 12.5px; line-height: 1.6; color: var(--auth-muted); }
  .auth-login-page .auth-agree-copy { font-size: 12.5px; color: var(--auth-muted); }
  .auth-login-page .auth-agree-box { width: 18px; height: 18px; flex: none; border-radius: 5px; }
  .auth-login-page .auth-agree-input:checked + .auth-agree-box { background: var(--auth-orange); border-color: var(--auth-orange); color: white; }
  .auth-login-page .auth-submit { height: 54px; min-height: 54px; width: 100%; margin: 0; border: 0; border-radius: 12px; background: #ce5b15; box-shadow: none; color: white; font-size: 17px; font-weight: 700; letter-spacing: 2px; }
  .auth-login-page .auth-alt { padding: 0; margin: 14px 0 0; border: 0; font-size: 14px; text-align: center; color: var(--auth-muted); padding-top: 16px; border-top: 1px solid #eee; margin-top: 20px; }
  .auth-login-page .auth-alt button, .auth-login-page [data-legal-doc] { color: var(--auth-link); }
  .auth-login-page .auth-alt button { font-weight: 700; }
  .auth-login-page[data-auth-mode="scan"] .auth-page-card::after { content: ''; order: 2; flex: 1; min-height: 24px; }
  .auth-login-page[data-auth-mode="scan"] .auth-scan-consent { order: 3; margin: 0; font-size: 12.5px; color: var(--auth-muted); line-height: 1.6; text-align: center; }
  .auth-login-page[data-auth-mode="scan"] .auth-alt { order: 4; }
  .auth-mobile-brand img { width:36px;height:36px;object-fit:contain;display:block; }
  .auth-login-page .auth-field:focus-within { border-color:#ce5b15; }
  .auth-login-page .auth-qr-box::before,.auth-login-page .auth-qr-box::after,.auth-mobile-qr-corners { display:none; }
}
/* Required service-account onboarding */
.service-bind-page { min-height: 100dvh; display: grid; place-items: center; padding: 28px 20px; background: var(--pg); color: var(--t1); }
.service-bind-card { width: min(100%, 440px); padding: 28px 30px; border: 1px solid var(--bd); border-radius: 14px; background: var(--panel, #fff); }
.service-bind-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--t1); font-size: 20px; font-weight: 700; }
.service-bind-brand img { object-fit: contain; }
.service-bind-card h1 { margin: 30px 0 12px; font-size: 25px; letter-spacing: -.5px; line-height: 1.35; }
.service-bind-card p { color: var(--t2); font-size: 14px; line-height: 1.75; margin: 10px 0; }
.service-bind-qr { margin: 26px auto 16px; width: fit-content; padding: 12px; border: 1px solid var(--bd); border-radius: 14px; background: #fff; }
.service-bind-qr img { display: block; width: 208px; max-width: 100%; height: auto; }
.service-bind-placeholder { min-height: 160px; display: grid; place-items: center; color: var(--t2); font-size: 14px; }
.service-bind-card .service-bind-hint { text-align: center; font-size: 13px; }
.service-bind-card .primary { width: 100%; margin-top: 14px; border-radius: 10px; padding: 13px 16px; font-size: 15px; }
.service-bind-card .service-bind-notice { padding: 10px 12px; border-radius: 7px; background: var(--or-bg); color: var(--or-d); font-size: 13px; }
@media (max-width: 480px) {
  .service-bind-page { display: block; padding: 24px 22px; }
  .service-bind-card { border: 0; padding: 0; margin: auto; background: transparent; }
}

@media (max-width: 760px) {
  .auth-mobile-brand span { padding-bottom: 2px; }
  .auth-login-page .auth-form:has([data-auth-register]) .auth-field { padding: 7px 12px; margin-top: 12px; }
  .auth-login-page .auth-form:has([data-auth-register]) .auth-field:first-child { margin-top: 0; }
  .auth-login-page .auth-form:has([data-auth-register]) .auth-field em { top: 12px; }
}

.pm-simple-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 30px; border-radius: 14px; background: #252525; color: #fff; font-size: 15px; }

.login-transition { min-height: 100dvh; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--pg); color: var(--t2); font-size: 14px; }
.login-transition-spinner { width: 18px; height: 18px; border: 2px solid var(--bd); border-top-color: var(--t2); border-radius: 50%; animation: login-transition-spin .8s linear infinite; }
@keyframes login-transition-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .login-transition-spinner { animation: none; } }

.service-bind-skip { display:block; margin:16px auto; padding:8px; border:0; background:transparent; color:var(--t2); font-size:14px; }

.service-learning-steps { padding-left:24px; text-align:left; margin:24px 0; color:var(--t1); }
.service-learning-steps li { padding-left:4px; margin:18px 0; }
.service-learning-steps p { font-size:14px; line-height:1.7; margin:6px 0; color:var(--t2); }

.delete-account-overlay { z-index:100; }
.delete-account-panel { box-sizing:border-box; width:min(420px, 100%); max-height:calc(100dvh - 40px); overflow-y:auto; padding:24px; border:1px solid var(--bd); border-radius:14px; background:var(--pg); color:var(--t1); }
.delete-account-head h2 { margin:0; font-size:22px; }
.delete-account-panel p { margin:16px 0; font-size:14px; line-height:1.7; }
.delete-account-warning { color:var(--t2); }
.delete-account-actions { display:flex; gap:12px; margin-top:24px; }
.delete-account-actions button, .delete-account-actions a { flex:1; display:flex; justify-content:center; align-items:center; min-height:44px; padding:10px 16px; border:1px solid var(--bd); border-radius:10px; background:var(--pg); color:var(--t1); font:inherit; text-decoration:none; }
.delete-account-actions a { border-color:var(--or); background:var(--or); color:var(--pg); }

[data-mobile-profile-layers] .profile-edit-overlay,
[data-mobile-profile-layers] .wechat-unbind-overlay,
[data-mobile-profile-layers] .delete-account-overlay { z-index: 910; }
.mpp-sheet { max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; }

/* Approved binding page B: display only; QR and action selectors stay unchanged. */
.service-bind-version-b { background: #FFFFFF; color: #1F2329; }
.service-bind-version-b .service-bind-card { background: #FFFFFF; }
.service-bind-version-b h1 { margin: 18px 0 8px; font-size: clamp(16px, 5.38vw, 21px); font-weight: 500; color: #1F2329; line-height: 1.3; letter-spacing: 0; white-space: nowrap; }
.service-bind-version-b .service-bind-subtitle { margin: 0 0 16px; font-size: 13px; color: #80858F; line-height: 1.6; }
.service-bind-benefits { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.service-bind-benefit { display: flex; align-items: center; gap: 12px; }
.service-bind-benefit-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: #FBEBDD; color: #C8641F; }
.service-bind-benefit-icon svg { width: 19px; height: 19px; }
.service-bind-benefit strong { font-size: 14px; font-weight: 600; color: #1F2329; }
.service-bind-version-b .service-bind-benefit p { margin: 0; font-size: 12px; line-height: 1.5; color: #80858F; }
.service-bind-version-b .service-bind-qr { margin-top: 18px; }
.service-bind-version-b .service-bind-hint { margin: 0 0 22px; font-size: 12px; line-height: 1.8; color: #80858F; text-align: center; }
.service-bind-version-b .service-bind-return-hint { margin: 0 0 6px; font-size: 12px; line-height: 1.5; color: #80858F; text-align: center; }
.service-bind-version-b .primary { margin-top: 0; background: #E07F42; border-color: #E07F42; }
.service-bind-version-b .service-bind-skip { background: transparent; color: #80858F; font-size: 13px; text-align: center; }

/* Homepage WeChat learning entry and account-specific binding popover. */
.wb-wrap{--green:#07C160;--ink:#1F2329}
.wb-wrap{position:relative;display:inline-block;flex-shrink:0}
.wb,.wb-bubble{font-family:inherit}
.wb{height:40px;border-radius:20px;font-size:13.5px;font-weight:400;display:flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wb > span:first-of-type{font-weight:700}
.wb .ic{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.wb .ic-fill{width:18px;height:18px;fill:currentColor;stroke:none}
.wb:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.wb [hidden],.wb-wrap [hidden]{display:none!important}

/* 未开启同步：白底绿边，点击行为沿用绑定弹窗。 */
.wb--unbound{padding:0 12px;border:1.5px solid #07C160;background:#fff;color:#07C160;--cut:#fff}
/* 已绑定：绿色实心 + 白圈绿勾 */
.wb--bound{padding:0 10px 0 12px;border:1.5px solid var(--green);background:var(--green);color:#fff;--cut:var(--green)}
.wb-tick{width:18px;height:18px;border-radius:50%;background:#fff;color:var(--green);display:flex;align-items:center;justify-content:center}
.wb-tick .ic{stroke-width:3.5}

/* 新用户首次引导气泡（只出现一次） */
.wb-bubble{position:absolute;left:0;top:calc(100% + 10px);z-index:5;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;border-radius:12px;background:var(--ink);color:#fff;font-size:13.5px;line-height:1.4;white-space:nowrap;box-shadow:0 8px 20px rgba(31,35,41,.28)}
.wb-bubble::before{content:"";position:absolute;top:-5px;left:44px;width:12px;height:12px;background:var(--ink);transform:rotate(45deg)}
.wb-bubble-text{cursor:pointer}
.wb-bubble-x{position:relative;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.wb-bubble-x::after{content:"";position:absolute;inset:-12px}   /* 触控区放大到 44px */
.wb-bubble-x .ic{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
/* 按钮靠屏幕右侧时，气泡改成右对齐：给 .wb-wrap 加 wb-wrap--right */
.wb-wrap--right .wb-bubble{left:auto;right:0}
.wb-wrap--right .wb-bubble::before{left:auto;right:44px}


.wl{
  --green:#00803F; --green-deep:#0B4F33; --tint:#E4F3EA;
  --ink:#1F2329; --muted:#5F6570; --line:#E4E7EB; --cream:#F5F6F8; --divider:#F0F1F3;
  --orange:#F0803A; --orange-ink:#C2570F; --page:#F5F6F8;

}
/* =====================  弹窗组件  .wl  ===================== */
.wl{position:relative;background:#fff;color:var(--ink);font-family:inherit;line-height:1.5;-webkit-font-smoothing:antialiased}
.wl *,.wl *::before,.wl *::after{box-sizing:border-box}
.wl [hidden]{display:none!important}
.wl h1,.wl p,.wl ol{margin:0;padding:0}
.wl ol{list-style:none}
.wl button{font-family:inherit;cursor:pointer}
.wl .ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wl .ic-fill{width:20px;height:20px;fill:currentColor;stroke:none}

/* 电脑：气泡卡片，宽 400，顶部小箭头（指向"微信学习"按钮，位置按线上按钮微调） */
.wl--desktop{width:400px;border:1px solid var(--line);border-radius:24px;box-shadow:0 20px 44px rgba(31,35,41,.12)}
.wl--desktop::before{content:"";position:absolute;top:-9px;right:80px;width:16px;height:16px;background:var(--green);transform:rotate(45deg)}
/* 手机：底部弹层，宽 100% */
.wl--mobile{width:100%;border-radius:24px 24px 0 0;box-shadow:0 -12px 40px rgba(31,35,41,.22)}

/* 头图 */
.wl-hero{position:relative;overflow:hidden;background:var(--green);color:#fff}
.wl--desktop .wl-hero{border-radius:23px 23px 0 0}
.wl--mobile .wl-hero{border-radius:24px 24px 0 0}
.wl-hero--unbound{height:204px;padding:28px 28px 0}
.wl--mobile .wl-hero--unbound{height:196px;padding:30px 24px 0}
.wl-hero--bound{padding:36px 28px 28px;text-align:center;display:flex;flex-direction:column;align-items:center}
.wl--mobile .wl-hero--bound{padding:40px 24px 28px}
.wl-grab{position:absolute;top:10px;left:50%;margin-left:-20px;width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.4)}
.wl-mark{position:absolute;right:-40px;top:-26px;width:210px;height:210px;color:rgba(255,255,255,.10)}
.wl-tag{position:relative;display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 10px;border-radius:14px;background:rgba(255,255,255,.18);font-size:13px;font-weight:500}
.wl-tag .ic-fill{width:14px;height:14px;--cut:var(--green)}
.wl-title{position:relative;margin-top:14px;font-size:26px;line-height:1.3;font-weight:700}
.wl--mobile .wl-hero--unbound .wl-title{margin-top:12px;font-size:24px}
.wl-hero--unbound .wl-title{text-align:center;margin-top:14px}
.wl-hero--unbound .wl-sub{text-align:center;margin-top:6px}
.wl-hero--bound .wl-title{margin-top:18px;font-size:24px}
.wl-sub{position:relative;margin-top:6px;font-size:14.5px;color:rgba(255,255,255,.9)}

/* 关闭按钮：44px 触控区 + 32px 圆形底；不出现方框聚焦 */
.wl-close{position:absolute;top:8px;right:8px;width:44px;height:44px;padding:0;border:0;background:transparent;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;outline:none}
.wl--mobile .wl-close{top:18px}
.wl-close span{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;display:flex;align-items:center;justify-content:center}
.wl-close .ic{width:16px;height:16px}
.wl-close:focus-visible span{box-shadow:0 0 0 2px #fff}

/* 已绑定头图：微信 ⇄ 网站 */
.wl-sync{display:flex;align-items:center;justify-content:center}
.wl-node{width:52px;height:52px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
.wl-node .ic,.wl-node .ic-fill{width:26px;height:26px}
.wl-node--wx{color:var(--green);--cut:#fff}
.wl-node--web{color:var(--orange-ink)}
.wl-link{position:relative;width:72px;height:0;margin:0 10px;border-top:2px dashed rgba(255,255,255,.65)}
.wl-link-ok{position:absolute;top:-13px;left:50%;margin-left:-12px;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--green);display:flex;align-items:center;justify-content:center}
.wl-link-ok .ic{width:14px;height:14px;stroke-width:3}

/* 主体 */
.wl-body{display:flex;flex-direction:column;align-items:center;padding:0 28px 24px}
.wl--mobile .wl-body{padding:0 24px max(24px,env(safe-area-inset-bottom))}
.wl-body--bound{align-items:stretch;padding-top:24px}
.wl-copy{align-self:stretch;padding-top:24px}

/* 二维码卡片：压住头图 40px。必须是 <img>，微信内才能长按识别 */
.wl-qr{position:relative;margin-top:-40px;width:196px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 10px 24px rgba(0,60,30,.16)}
.wl--mobile .wl-qr{width:176px}
.wl-qr img{display:block;width:100%;height:auto;aspect-ratio:1;-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}
.wl-cap{margin-top:14px;font-size:15px;font-weight:700;text-align:center}

/* 三步（横排） */
.wl-steps{display:flex;gap:8px;width:100%;margin-top:22px}
.wl--mobile .wl-steps{margin-top:18px}
.wl-steps li{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px}
.wl-num{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--tint);color:var(--green);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* 微信内长按提示 */
.wl-hint{margin-top:20px;width:100%;padding:14px 16px;background:var(--cream);border-radius:14px;display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--muted)}
.wl-ico{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--green);display:flex;align-items:center;justify-content:center}
.wl-hint .wl-ico{width:36px;height:36px}
.wl-hint .wl-ico .ic{width:18px;height:18px}

/* 手机浏览器：复制链接三步 */
.wl-label{font-size:13px;font-weight:700;color:var(--muted)}
.wl-list{margin-top:10px;padding:4px 14px;background:var(--cream);border-radius:18px}
.wl-list li{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--divider);font-size:15px}
.wl-list li:last-child{border-bottom:0}
.wl-list b{font-weight:700}
.wl-note{margin-top:10px;font-size:13px;color:var(--muted);text-align:center}

/* 已绑定：三个功能块 */
.wl-tiles{margin-top:10px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wl-tile{padding:16px 8px 14px;background:var(--cream);border-radius:16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.wl-tile b{font-size:14px}
.wl-tile span{font-size:12.5px;line-height:1.4;color:var(--muted)}
.wl-body--bound .wl-note{margin-top:14px}

/* 按钮 */
.wl-primary{margin-top:18px;width:100%;height:52px;border:0;border-radius:14px;background:var(--green);color:#fff;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px}
.wl-copy .wl-primary{margin-top:20px}
.wl-primary:active{background:#006E36}
.wl-primary:focus-visible,.wl-ghost:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.wl-ghost{margin-top:18px;width:100%;height:48px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--muted);font-size:15px}


/* Placement belongs to the app; preview-page styles are intentionally excluded. */
#wechat-learning-layer{position:relative;z-index:1600}
.wechat-learning-backdrop{display:none}
.wechat-learning-dialog{position:fixed;max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
.wl--desktop:before{position:fixed;top:var(--wechat-arrow-top);left:var(--wechat-arrow-left);right:auto}
.wl--desktop.is-shifted:before{display:none}
.wl .wl-qr-state{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:13px;text-align:center;color:var(--muted)}
.wl .wl-qr-state button{border:0;background:var(--tint);color:var(--green);padding:8px;border-radius:10px}
.wl .wl-error{font-size:12px;color:var(--muted);margin-top:12px;text-align:center}
button.wechat-learning-entry:focus,button.wechat-learning-entry:focus-visible{outline:none;box-shadow:none}
.wl button.wl-close:focus,.wl button.wl-close:focus-visible{outline:none!important;box-shadow:none!important}
@media(max-width:767px){
html:has(body.wechat-learning-open){scrollbar-gutter:auto;overflow:hidden}
.wechat-learning-open{overflow:hidden}
.wechat-learning-backdrop{display:block;position:fixed;inset:0;background:rgba(31,35,41,.52)}
.wechat-learning-dialog{left:0!important;right:0;top:auto!important;bottom:0;transform:none;width:100%;max-height:calc(100dvh - 16px)!important}
}
@media(max-width:600px){
.page-header:has([data-wechat-learning]){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px}
.page-header:has([data-wechat-learning]) .page-header-left{min-width:0}
.page-header:has([data-wechat-learning]) .page-header-sub{font-size:12px;line-height:1.6;max-width:180px}
.page-header:has([data-wechat-learning]) .page-header-right{display:grid;grid-template-columns:1fr 1fr;justify-items:end;gap:8px}
.page-header .wb-wrap{grid-column:1/-1}
}

/* Approved sidebar V4: single-line navigation and optically aligned brand. */
.my-daily-skeleton { height: 96px; margin-top: 16px; border-radius: 14px; background: linear-gradient(90deg, #F5F6F8, #F5F6F8, #F5F6F8); }
.sidebar .brand { align-items: flex-end; }
.sidebar .brand > div { display: flex; align-items: center; }
.sidebar .brand-title { font-size: 18px; line-height: 1.2; transform: translateY(-2px); }
@media (min-width: 981px) {
  html:has(.app-shell:not(.auth-shell) > .sidebar), body:has(.app-shell:not(.auth-shell) > .sidebar) { height: 100dvh; overflow: hidden; }
  .app-shell:not(.auth-shell) { height: 100dvh; min-height: 0; grid-template-columns: 172px minmax(0, 1fr); }
  .app-shell > .sidebar { position: sticky; top: 0; display: flex; width: 100%; height: 100dvh; margin: 0; overflow: hidden; border-right: 1px solid #F2F2F2; }
  .sidebar .sidebar-nav { overflow-y: auto; }
  .app-shell:not(.auth-shell) > .main { height: 100dvh; min-height: 0; overflow-y: auto; }
}
@media (min-width: 981px) and (max-height: 760px) {
  .app-shell > .sidebar { padding-block: 8px; }
  .sidebar .nav { padding: 6px 0 0; }
  .sidebar .nav-section { padding-bottom: 4px; margin-bottom: 4px; }
  .sidebar .nav-section-title { padding-top: 8px; }
  .sidebar .nav-button { min-height: 44px; padding-block: 4px; }
}
@media (min-width: 981px) and (max-height: 640px) {
  .app-shell > .sidebar { padding-block: 8px; }
  .sidebar .nav-section { padding-bottom: 2px; margin-bottom: 2px; }
  .sidebar .nav-section-title { padding: 4px 6px 3px; }
  .sidebar .nav-button { min-height: 36px; padding-block: 3px; }
  .sidebar .nav-icon { width: 18px; height: 18px; font-size: 20px; }
}

/* App shell v2: one sticky toolbar and aligned menu-page headings. */
.app-topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:flex-end;gap:10px;height:61px;padding:0 28px;border-bottom:1px solid #EAECEF;background:rgba(255,255,255,.92);backdrop-filter:blur(8px)}
.app-topbar :is(.topbar-link,.wb,.profile-avatar-button){height:38px;border-radius:999px}
.app-topbar .profile-avatar-button{width:38px;flex:none}
.app-topbar .topbar-link{position:relative;background:#fff}
.app-topbar-icon{display:none}
.app-shell:not(.auth-shell) .main-top-sentinel{height:0}
.app-shell:not(.auth-shell)>.main{background:#fff}
.app-shell:not(.auth-shell) .main-inner{height:auto;min-height:calc(100dvh - 61px);padding:20px 28px 32px}
.app-shell:not(.auth-shell) .main-inner>.topbar{align-items:flex-start}
.app-shell .main-inner :is(.page-title,.my-daily-title h2,.courses-header h2,.review-page-head h2,.pi-heading h1){margin:0;color:var(--t1);font-size:25px;line-height:1.2;font-weight:700;letter-spacing:-.015em}
.app-shell .main-inner :is(.page-kicker,.my-daily-title p,.courses-header p,.review-page-head p,.pi-heading p){margin:5px 0 0;color:var(--t2);font-size:12.5px;line-height:1.6}
.app-shell .review-page-head{gap:0}
.app-shell .pi-center{padding:0}
.app-shell .my-daily-page{min-height:0}
.app-shell .my-daily-header{padding:0;border-bottom:0}
.app-shell .my-daily-list{padding-inline:0}
.app-shell .sentence-breakdown-page{min-height:calc(100dvh - 160px)}
.app-shell .sentence-breakdown-left{padding:0 28px 24px 0}
.app-shell .sentence-breakdown-right{padding:0 0 24px 28px}
.app-shell[data-app-view="membership"] .main-inner{padding:0}
.app-shell .membership-page{margin:0;min-height:calc(100dvh - 61px)}
@media(max-width:980px){
  html:has(.app-shell:not(.auth-shell)),body:has(.app-shell:not(.auth-shell)){height:auto;overflow:visible}
  .app-shell:not(.auth-shell){grid-template-columns:1fr;height:auto;padding:env(safe-area-inset-top) 0 calc(78px + env(safe-area-inset-bottom))}
  .app-shell>.sidebar{display:none}
  .app-shell:not(.auth-shell)>.main{height:auto;min-height:calc(100dvh - 78px);overflow:visible}
  .app-topbar{padding-inline:16px}
  .app-topbar-label{display:none}
  .app-topbar-icon{display:flex}
  .app-topbar .topbar-link{width:38px;padding:0;justify-content:center;flex:none}
  .app-topbar .feedback-unread{position:absolute;top:-4px;right:-4px}
  .app-shell:not(.auth-shell) .main-inner{min-height:0;padding:20px 16px 32px}
  .mobile-bottom-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;bottom:0;left:0;right:0;z-index:50;padding:7px 4px calc(7px + env(safe-area-inset-bottom));background:var(--pg);border-top:1px solid var(--bd)}
  .mobile-bottom-nav button{display:grid;justify-items:center;gap:4px;min-height:50px;padding:5px 2px;border:0;border-radius:10px;font-size:12px;color:var(--t2);background:transparent}
  .mobile-bottom-nav button[aria-current]{color:var(--or);background:var(--or-sd)}
  .mobile-bottom-nav svg{width:22px;height:22px}
}
@media(max-width:600px){
  .app-shell .sentence-breakdown-left,.app-shell .sentence-breakdown-right{padding:0 0 24px;border:0}
  .app-shell .my-daily-header-top{flex-wrap:wrap;gap:14px}
}

/* App shell v4: canvas, account bar, and a sticky panel heading. */
.app-panel-shell,.app-shell.app-panel-shell:not(.auth-shell)>.sidebar,.app-shell.app-panel-shell:not(.auth-shell)>.main{background:#FFFFFF}
.app-panel-shell>.sidebar{width:200px;padding:8px 10px;border-right:0}
.app-panel-shell .brand{border-bottom:0}
.app-panel-shell .nav-button{border:1px solid transparent}
.app-panel-shell .nav-button.active{background:#EE7A2C;border-color:transparent;color:#fff}
.app-panel-shell .app-topbar{height:60px;padding:0 44px 0 28px;background:#FFFFFF;border:0;box-shadow:none;backdrop-filter:none;z-index:30}
.app-panel-shell:not(.auth-shell) .main-inner{width:calc(100% - 22px);min-height:calc(100dvh - 60px);margin:0 16px 0 6px;padding:0 28px 32px;background:#fff;border:1px solid #EAECEF;border-bottom:0;border-radius:14px 14px 0 0}
.app-panel-head{position:sticky;top:60px;z-index:20;display:flex;align-items:center;gap:18px;height:60px;margin:0 -28px 20px;padding:0 20px 0 24px;border-bottom:1px solid #F0F1F3;border-radius:14px 14px 0 0;background:#fff}
.app-panel-head h1{display:flex;align-items:center;gap:10px;flex:none;margin:0;color:#1F2329;font-size:20px;line-height:1.2;font-weight:800;white-space:nowrap}
.app-panel-head h1>svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:981px){
  /* Preserve the panel outline when its top border scrolls behind the sticky heading. */
  :is(.is-membership-page,.is-partner-page) .app-panel-shell .app-panel-head{top:61px}
  :is(.is-membership-page,.is-partner-page) .app-panel-shell .app-panel-head::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:14px;border:1px solid #EAECEF;border-bottom:0;border-radius:14px 14px 0 0;pointer-events:none}
}
.app-panel-head :is(button,summary,input):focus-visible{outline:2px solid var(--or-d);outline-offset:2px}
.app-panel-head :is(.my-daily-search,.scenario-search) input:is(:focus,:focus-visible){outline:none;box-shadow:none}
.app-panel-tools{display:flex;align-items:center;flex:1;min-width:0;justify-content:flex-end}
.app-panel-head .scenario-toolbar{display:flex;align-items:center;flex:1;min-width:0;gap:4px;margin:0;padding:0;border:0}
.app-panel-head .scenario-categories{display:flex;align-items:center;flex:1;min-width:0;gap:4px;flex-wrap:nowrap;overflow:visible}
.app-panel-head .scenario-category,.app-category-more summary{flex:none;white-space:nowrap;font-size:13.5px;padding:6px 11px;line-height:1.5}
.app-panel-head .scenario-category span{font-size:inherit}
.app-panel-head .scenario-search{width:180px;min-width:180px;margin-left:auto;background:#fff}
.app-category-more{position:relative;flex:none}
.app-category-more[hidden]{display:none}
.app-category-more summary{list-style:none;border:1px solid #EAECEF;border-radius:999px;cursor:pointer}
.app-category-more summary::-webkit-details-marker{display:none}
.app-category-more.has-active summary{color:#E8650A;background:#FFF4EC}
.app-category-menu{position:absolute;top:calc(100% + 8px);right:0;display:grid;gap:4px;min-width:180px;padding:8px;border:1px solid #EAECEF;border-radius:10px;background:#fff;box-shadow:0 8px 24px #1F23291a}
.app-category-menu .scenario-category{text-align:left}
.app-panel-head .my-daily-filter-row{display:flex;align-items:center;flex:1;min-width:0;gap:16px;margin:0;padding:0}
.app-panel-head .my-daily-tabs{flex-wrap:nowrap;gap:4px;white-space:nowrap}
.app-panel-head .my-daily-tab{padding:6px 11px;font-size:13.5px}
.app-panel-head .my-daily-search{width:180px;min-width:180px;margin-left:auto}
.app-panel-head .pi-tier{margin-left:auto;white-space:nowrap}
.app-panel-shell .my-daily-page{border:0;box-shadow:none;background:transparent}
.app-panel-shell .my-daily-header{padding:0 0 12px}
.app-panel-shell .my-daily-header-top{justify-content:flex-start}
.app-panel-shell .my-daily-stats{margin:0}
.app-panel-shell .membership-page{margin:-20px -28px -32px;min-height:calc(100dvh - 120px)}
.app-panel-shell .sentence-breakdown-page{min-height:calc(100dvh - 172px)}
.app-panel-shell .sentence-breakdown-right{height:auto}
@media(min-width:981px){
  html:has(.app-panel-shell){scrollbar-gutter:auto}
  .app-panel-shell:not(.auth-shell){grid-template-columns:200px minmax(0,1fr)}
}
@media(max-width:980px){
  .app-panel-shell,.app-shell.app-panel-shell:not(.auth-shell)>.main{background:#fff}
  .app-panel-shell:not(.auth-shell)>.main{scrollbar-gutter:auto}
  html:has(.app-panel-shell){scrollbar-gutter:auto}
  .app-panel-shell:not(.auth-shell) .main-inner{width:100%;min-height:calc(100dvh - 78px);margin:0;padding:0 16px 32px;border:0;border-radius:0}
  .app-panel-shell .app-topbar{display:none}
  .app-panel-shell .app-topbar .wb-wrap,.app-panel-shell .app-topbar .topbar-link{display:none}
  .app-panel-head{top:0;height:auto;min-height:60px;flex-wrap:wrap;gap:0;margin:0 -16px 20px;padding:0 16px;border-radius:0}
  .app-panel-head h1{display:flex;align-items:center;height:60px}
  .app-panel-head h1>svg{width:20px;height:20px}
  .app-panel-tools{flex-basis:100%;width:100%}
  .app-panel-tools:empty{display:none}
  .app-panel-head .scenario-toolbar,.app-panel-head .my-daily-filter-row{flex-wrap:wrap;gap:10px;padding-bottom:12px}
  .app-panel-head .scenario-categories{flex-basis:100%;overflow-x:auto;padding-bottom:3px}
  .app-panel-head .scenario-search{margin-left:0;width:100%}
  .app-panel-head .my-daily-tabs{overflow-x:auto;width:100%;justify-content:space-between;gap:4px}
  .app-panel-head .my-daily-tab{flex:0 0 auto;padding:6px 6px}
  .app-panel-head .my-daily-search{width:100%}
  .app-panel-head .pi-tier{flex-wrap:wrap;white-space:normal;margin:0 0 12px}
  .app-panel-shell .membership-page{margin:-20px -16px -32px}
}

/* September 28 sidebar: quiet icons and persistent account cards. */
.app-shell:not(.auth-shell)>.sidebar{width:216px;display:flex;flex-direction:column;gap:0}
.sidebar .sidebar-nav{flex:0 0 auto;min-height:0;overflow:visible}
.sidebar .nav{padding-bottom:0}
.sidebar .nav-section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.sidebar .nav-button .nav-icon{width:22px;height:22px;min-width:22px;background:transparent;color:#5F6570;display:grid;place-items:center;box-shadow:none}
.sidebar .nav-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sidebar .nav-button{gap:8px;color:#2F333A}
.sidebar .nav-label{font-weight:500}
.sidebar .nav-button:hover{background:rgba(0,0,0,.035)}
.sidebar .nav-button.active{background:#EE7A2C;border-color:transparent;color:#fff}
.sidebar .nav-button.active :is(.nav-icon,.nav-label,.nav-hint){color:#fff;font-weight:700}
.sb-cards{display:grid;gap:10px;margin-top:10px;padding-top:12px;border-top:1px solid #EEF0F2;flex:none}
.sb-card{display:flex;align-items:center;gap:6px;width:100%;min-width:0;padding:11px 10px;border:1px solid #ECE7E1;border-radius:14px;background:#fff;text-align:left;cursor:pointer}
.sb-card>i{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:11px;background:#F3EEFF;color:#8B5CF6}
.sb-card svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sb-card-copy{flex:1;min-width:0}
.sb-card b{display:flex;align-items:center;gap:4px;color:#2B2118;font-size:13.5px;font-weight:800;white-space:nowrap}
.sb-card small{display:block;color:#8A7B6B;font-size:11.5px;line-height:1.5;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-tag{font-size:10.5px;font-weight:700;border-radius:999px;padding:1px 5px;background:#F1EAFF;color:#7C4DDB}
.sb-arrow{color:#8A7B6B;font-size:16px;flex:none;white-space:nowrap}
.sb-upgrade{color:#7C4DDB;font-size:12px;font-weight:700}
.sb-partner{background:#fff;border-color:#E8E6E3}
.sb-partner>i{background:#F3F3F2;color:#7A6D60}.sb-partner svg{fill:none;stroke:currentColor}
.sb-partner.active{background:#EE7A2C;border-color:#EE7A2C;box-shadow:none}.sb-partner.active b,.sb-partner.active .sb-arrow{color:#fff}.sb-partner.active small{color:#FFE9D9}.sb-partner.active>i{background:#fff;color:#E8650A}
.sb-membership.active{border-color:#B9A2F2;box-shadow:0 0 0 1px #B9A2F2}
.sb-partner:not(.active){border:1px solid #E8E6E3;background:#fff}
.sb-partner:not(.active)>i{background:#EE7A2C;color:#fff}
.sb-partner:not(.active) small{color:#E8650A;font-weight:700}
.sb-partner:not(.active) .sb-arrow{color:#AAA}
.sb-membership:not(.active){border:1px solid #E8E6E3;background:#fff}
.sb-membership:not(.active)>i{background:#7C4DDB;color:#fff}
.sb-membership:not(.active) .sb-tag{background:#EFE9FB;color:#7C4DDB}
.sb-membership:not(.active) .sb-arrow:not(.sb-upgrade){color:#AAA}
.sb-card:hover{filter:brightness(.985)}.sb-card:focus-visible{outline:2px solid #E8650A;outline-offset:3px}
@media(min-width:981px){.app-shell:not(.auth-shell){grid-template-columns:216px minmax(0,1fr)}.app-panel-head .scenario-category{padding-inline:10px}}
@media(max-width:980px){.app-shell:not(.auth-shell)>.sidebar{display:none}}

/* Compact sidebar: replace the legacy icon column without changing its colors. */
.app-shell:not(.auth-shell)>.sidebar{width:204px;padding:8px 8px 10px;overflow-y:auto;overflow-x:hidden}
@media(min-width:981px){.app-shell:not(.auth-shell){grid-template-columns:204px minmax(0,1fr)}}
.sidebar .nav-button{grid-template-columns:18px minmax(0,1fr);gap:10px;padding:0 10px;min-height:38px}
.sidebar .nav-button .nav-icon{width:18px;height:18px;min-width:18px}
.sidebar .nav-icon svg{width:18px;height:18px}
.sidebar .nav-section-title{padding-left:10px}
.sb-card{padding:10px 9px;gap:8px}.sb-card>i{width:30px;height:30px;border-radius:9px}
.sidebar .nav-label{font-size:15px}

/* Shared notice presentation; existing hooks and trigger conditions stay in place. */
.eb-notice.eb-notice{--notice-icon:#9AA0A8;--notice-action:#5F6570;display:flex;align-items:center;gap:10px;padding:11px 14px;border:0;border-radius:12px;background:#F5F6F8;color:#1F2329;font-size:14px;font-weight:400;line-height:1.55;text-align:left;box-shadow:none}
.eb-notice::before{content:"i";display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:var(--notice-icon);color:#fff;font-size:14px;line-height:1;font-weight:600}
.eb-notice.warning{--notice-icon:#F08A3C;--notice-action:#E8650A;background:#FFF7F0}
.eb-notice.error{--notice-icon:#E5484D;--notice-action:#D93036;background:#FEF3F2}
.eb-notice.success{--notice-icon:#2BAA6A;--notice-action:#238553;background:#F2FBF6}
.eb-notice:is(.warning,.error)::before{content:"!"}.eb-notice.success::before{content:"✓"}
.eb-notice-copy{flex:1;min-width:0;overflow-wrap:anywhere}.eb-notice .eb-notice-action{flex:none;border:0;background:none;padding:0;color:var(--notice-action);font-size:14px;font-weight:400;cursor:pointer;text-decoration:none}
.life-diary-done-state .life-diary-transcribe-note{margin:6px 0 0;font-size:13px;color:#5F6570;font-weight:400}
.life-diary-transcribe-progress{width:min(160px,80%);height:4px;margin:12px auto 0;overflow:hidden;border-radius:4px;background:#D6F0E3}
.life-diary-transcribe-progress span{display:block;width:45%;height:100%;background:#2BAA6A;border-radius:inherit;animation:transcribe-progress 1.4s ease-in-out infinite alternate}
@keyframes transcribe-progress{from{transform:translateX(0)}to{transform:translateX(125%)}}
@media(prefers-reduced-motion:reduce){.life-diary-transcribe-progress span{animation:none}}
.my-daily-stats{align-items:center;text-align:center}
.my-daily-stats .daily-token-ring{align-items:center}
.my-daily-stats .daily-token-ring>.quota-ring-image{width:38px;height:38px;margin-top:0}
.my-daily-stats .daily-token-ring>.quota-ring-image>svg{display:block;width:38px;height:38px}

.membership-redeem-entry{margin:20px 0 0;text-align:center;color:#8F959E;font-size:14px}
.membership-redeem-entry button{padding:0;border:0;background:none;color:#1F2329;font-size:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.redeem-overlay{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.42);display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.redeem-dialog{position:relative;box-sizing:border-box;width:440px;max-width:100%;padding:28px;background:#fff;border-radius:18px;color:#1F2329;text-align:left}
.redeem-close{position:absolute;right:18px;top:14px;border:0;background:none;color:#9CA3AF;font:30px/1 Arial;cursor:pointer}
.redeem-dialog h2{margin:0;font-size:22px;font-weight:750;line-height:1.4}
.redeem-subtitle{margin:8px 0 20px;color:#8F959E;font-size:15px}
.redeem-input{box-sizing:border-box;width:100%;height:48px;border:1px solid #DADDE2;border-radius:12px;background:#fff;padding:0 14px;font:19px/1.4 ui-monospace,Consolas,monospace;letter-spacing:2px;color:#1F2329;outline:none}
.redeem-input:focus{border-color:#8F959E;box-shadow:0 0 0 2px #F3F4F6}
.redeem-input.is-error{border-color:#F45B69;box-shadow:none}
.redeem-error{margin:10px 0 0;font-size:14px;color:#EF4444}
.redeem-error[hidden]{display:none}
.redeem-submit{display:block;width:100%;height:48px;margin-top:16px;border:0;border-radius:12px;background:#000;color:#fff;font-family:inherit;font-size:16px;font-weight:700;line-height:1.4;cursor:pointer}
.redeem-submit:disabled{opacity:.6;cursor:wait}
.redeem-dialog.is-success{text-align:center;padding-top:32px}
.redeem-check{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:#E9F7F0;color:#21A366}
.redeem-check svg{width:32px;height:32px}
.redeem-expiry{margin:10px 0 24px;color:#646A73;font-size:15px}
.redeem-success-note{margin:14px 0 0;color:#8F959E;font-size:14px}
@media(max-width:600px){.redeem-dialog{width:100%;padding:24px}.redeem-dialog h2{font-size:21px}.redeem-input{font-size:18px;letter-spacing:1px}}

/* Sidebar support tools and shared help/contact dialogs. */
.support-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;flex:none;border-top:1px solid #EEF0F2;padding-top:12px}
.sidebar-tools{margin-top:auto;padding-bottom:2px}
.support-tools button{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;padding:8px 0 2px;border:0;background:none;color:#80858F;font-family:inherit;font-size:11.5px;line-height:1.5;cursor:pointer}
.support-tools button>span:last-child{font-size:11.5px;white-space:nowrap}
.support-tools button:hover{color:#1F2329}
.support-tool-icon{display:block;position:relative;width:18px;height:18px}
.support-tool-icon svg{display:block;width:18px;height:18px}
.support-tool-icon .feedback-unread{position:absolute;top:-7px;right:-9px;display:grid;place-items:center;box-sizing:content-box;min-width:8px;height:8px;padding:0;border-radius:999px;background:#EF4444;color:#fff;font:9px/1 Arial;border:2px solid #fff}
.support-tool-icon .feedback-unread:not(:empty){min-width:14px;height:14px;padding:0 2px;top:-10px;right:-12px}
.support-tools-mobile{margin:16px 0;background:#fff;border:1px solid #EAECEF;border-radius:14px;padding:14px 8px}
.support-dialog{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px)}
.support-dialog header{border-bottom:1px solid #EEF0F2;padding:20px 24px}
.support-dialog header button{background:none;color:#A6ABB3}
.support-dialog-body{padding:20px 24px 24px;max-height:calc(100dvh - 130px);overflow-y:auto;box-sizing:border-box}
.support-dialog .help-search{display:flex;align-items:center;gap:8px;background:#F5F6F8;padding:0 14px;border-radius:12px;color:#8F959E}
.help-search input{width:100%;min-width:0;border:0;background:none;padding:14px 0;color:#1F2329;font-family:inherit;font-size:14px;line-height:1.5;outline-offset:2px}
.help-faq-list{margin-top:14px}
.help-faq{border-bottom:1px solid #EEF0F2;padding:0 14px}
.help-faq[open]{border-radius:12px;background:#F8F9FA;border-bottom-color:transparent}
.help-faq summary{display:flex;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;padding:16px 0;font-size:15px;color:#1F2329}
.help-faq summary::-webkit-details-marker{display:none}
.help-faq summary span{color:#A6ABB3;flex:none}
.help-faq[open] summary{font-weight:700}
.help-faq[open] summary span{transform:rotate(90deg)}
.help-faq p{margin:0;padding-bottom:16px;color:#646A73;font-size:14px;line-height:1.9}
.help-contact{margin-top:16px;padding:18px 16px;border-radius:14px;background:#F0FAF6;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
.help-contact button{border:0;background:none;color:#07A85A;cursor:pointer;font-size:14px;font-weight:700}
.help-empty{color:#646A73;font-size:14px;line-height:1.8;padding:12px}
.support-qr{text-align:center}.support-qr h3{margin:4px 0 14px;font-size:18px}
.support-qr img{display:block;width:220px;height:220px;max-width:100%;object-fit:contain;margin:auto;border:1px solid #EAECEF;border-radius:14px}
.support-qr p{color:#80858F;font-size:14px;margin:12px 0}
.support-details{margin:18px 0 0}.support-details>div{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #EEF0F2;padding:16px 0;font-size:14px;line-height:1.7}
.support-details dt{flex:none}.support-details dd{margin:0;text-align:right;color:#80858F}
@media(max-width:600px){.support-dialog header{padding:16px 20px}.support-dialog-body{padding:16px 20px 20px}.support-details>div{gap:12px}}

/* Completion scenes never display the practice streak badge. */
body:is(.is-chapter-complete,.is-review-complete) .correct-streak-toast{display:none!important}

/* Same-day review dates. */
.review-dates { color: #646A73; font-size: 12px; line-height: 1.6; max-width: 330px; }
.review-dates summary { cursor: pointer; }
.review-dates p { margin: 6px 0; }
.review-dates small { font-size: 11px; }

.review-queue-card:has(.review-dates[open]) { flex-wrap: wrap; }
.review-queue-card:has(.review-dates[open]) .review-queue-side { flex-basis: 100%; align-items: flex-start; padding-top: 0; }

/* Neutral outer shell: do not change content surfaces or public/auth pages. */
.app-panel-shell,
.app-shell.app-panel-shell:not(.auth-shell) > .sidebar,
.app-shell.app-panel-shell:not(.auth-shell) > .main,
.app-panel-shell .app-topbar { background: #F5F5F4; }
.app-shell.app-panel-shell:not(.auth-shell) > .main { scrollbar-gutter: auto; }
.app-panel-shell:not(.auth-shell) .main-inner {
  width: calc(100% - 24px);
  min-height: calc(100dvh - 84px);
  margin: 12px;
  border: 1px solid #E8E6E3;
  border-radius: 14px;
  background: #fff;
}
.app-panel-shell .sidebar .nav-button { background: transparent; }
.app-panel-shell .sidebar .nav-button:hover { background: #EDEDEC; }
.app-panel-shell .sidebar .nav-button.active { background: #fff; border-color: #E8E6E3; color: #E8650A; }
.app-panel-shell .sidebar .nav-button.active :is(.nav-icon,.nav-label,.nav-hint) { color: #E8650A; }
.app-panel-shell .sb-card { background: #fff; }
.app-panel-shell .sb-partner.active :is(b,small,.sb-arrow) { color: #E8650A; }
.app-panel-shell .app-panel-head { top: 72px; }
@media (min-width: 981px) { :is(.is-membership-page,.is-partner-page) .app-panel-shell .app-panel-head { top: 73px; } }
:is(.is-membership-page,.is-partner-page) .app-panel-shell .app-panel-head::before { border-color: #E8E6E3; }
.app-panel-shell .app-topbar::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; background: #F5F5F4; }
@media (max-width: 980px) {
  .app-panel-shell:not(.auth-shell) .main-inner { min-height: calc(100dvh - 102px); }
  .app-panel-shell .app-panel-head { top: 12px; border-radius: 14px 14px 0 0; }
  .app-panel-shell .app-panel-head::before { content: ""; position: absolute; top: -13px; left: -13px; right: -13px; height: 12px; border: 0; background: #F5F5F4; }
  .app-panel-shell .mobile-bottom-nav { background: #F5F5F4; }
  .app-panel-shell .mobile-bottom-nav button { border: 1px solid transparent; }
  .app-panel-shell .mobile-bottom-nav button[aria-current] { background: #fff; border-color: #E8E6E3; }
}

/* Membership final: white VIP and black/gold lifetime cards. */
.app-panel-shell .membership-page{min-height:0;padding:18px 28px 20px}
.membership-page-inner{gap:0}
.membership-hero{gap:0}
.membership-hero h2{font-size:24px;line-height:1.3}
.membership-hero p{margin:6px 0 0;color:#78716C;font-size:12px;line-height:1.5}
.membership-plan-tabs{margin:16px auto 0;padding:3px}
.membership-plan-tabs button{min-height:32px;font-size:13px}
.membership-pricing-grid{margin-top:28px;gap:20px}
.membership-plan-card{min-height:300px;padding:20px;gap:12px;border-radius:16px}
.membership-plan-card .membership-price{font-size:34px}
.membership-plan-card .membership-benefits{gap:10px;margin:4px 0 18px}
.membership-plan-card.is-lifetime .membership-benefits{margin-bottom:18px}
.membership-redeem-entry{margin:14px 0 0}
@media(min-width:768px){.membership-pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){
  .app-panel-shell .membership-page{padding:18px 16px 20px}
  .membership-pricing-grid{grid-template-columns:1fr;gap:24px}
  .membership-redeem-entry{font-size:12px;white-space:normal;line-height:1.7}
}

/* Photo diary: compact fixed header, neutral menus and transient feedback. */
.photo-diary-head{flex-wrap:nowrap!important;gap:12px!important;min-height:64px}
.photo-diary-head h1{flex:none;white-space:nowrap}
.photo-diary-head .app-panel-tools{flex:1;min-width:0;width:auto}
.photo-diary-head .my-daily-filter-row{flex-direction:row;flex-wrap:nowrap!important;gap:10px!important;padding:0!important}
.my-daily-controls-scroll{position:relative;display:flex;align-items:center;gap:12px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}
.photo-diary-head .my-daily-tabs{flex:none;width:auto;overflow:visible;gap:2px}
.photo-diary-head .my-daily-tab{padding:6px 8px;white-space:nowrap}
.photo-diary-head .my-daily-search{flex:0 0 145px;width:145px;min-width:145px;margin-left:0}
.my-daily-unfinished{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto;white-space:nowrap;color:var(--t2);font-size:12px;cursor:pointer}
.my-daily-unfinished input{appearance:none;min-height:16px;max-height:16px;padding:0;box-sizing:border-box;flex:none;width:28px;height:16px;border:0;border-radius:20px;background:var(--bd);margin:0;position:relative;cursor:pointer}
.my-daily-unfinished input:after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--pg);transition:transform .15s}
.my-daily-unfinished input:checked{background:var(--or)}
.my-daily-unfinished input:checked:after{transform:translateX(12px)}
.image-diary-entry{flex:none;position:relative}
.image-diary-sheet button{display:block;text-align:left;width:100%;padding:16px;border:0;border-radius:0;background:var(--pg);color:var(--t1);font-size:14px;cursor:pointer}
.image-diary-sheet button+button{border-top:1px solid var(--bd)}
.image-diary-sheet button:hover{background:var(--soft)}
.image-diary-shade{position:fixed;inset:0;background:color-mix(in srgb,var(--t1) 28%,transparent);z-index:1000}
.image-diary-sheet{position:absolute;bottom:0;left:0;right:0;background:var(--pg);padding-bottom:env(safe-area-inset-bottom);border-radius:14px 14px 0 0;overflow:hidden}
.image-diary-sheet [data-image-dismiss]{text-align:center;color:var(--t2)}
.image-diary-working,.image-diary-feedback{position:fixed;z-index:1010;top:155px;left:50%;transform:translateX(-50%);padding:18px 24px;border:1px solid var(--bd);border-radius:14px;background:var(--pg);color:var(--t1);text-align:center;max-width:calc(100vw - 40px);font-size:14px;white-space:normal}
.image-diary-working{min-width:180px}
.image-diary-progress{height:4px;background:var(--bd);overflow:hidden;border-radius:10px;margin-top:14px}
.image-diary-progress span{display:block;height:100%;width:45%;background:var(--or);animation:photo-progress 1.4s ease-in-out infinite alternate}
@keyframes photo-progress{from{transform:translateX(-60%)}to{transform:translateX(190%)}}
@media(prefers-reduced-motion:reduce){.image-diary-progress span{animation:none;width:55%}}
.image-diary-feedback.is-toast{padding:9px 16px;background:var(--t1);color:var(--pg);border:0;border-radius:10px}
.image-diary-feedback p{color:var(--t2);margin:8px 0 14px}
.image-diary-feedback button{display:block;margin:14px auto 0}
.my-daily-card.is-just-added{border:1.5px solid var(--or);background:var(--pg)}
.my-daily-page .my-daily-tag{background:var(--soft);color:var(--t2)}
@media(max-width:980px){
  .photo-diary-head{height:60px;min-height:60px;margin-bottom:20px;gap:8px!important}
  .photo-diary-head h1{font-size:16px;gap:5px}
  .photo-diary-head h1>svg{display:none}
  .photo-diary-head .app-panel-tools{flex-basis:auto}
  .photo-diary-head .my-daily-filter-row{gap:8px!important}
  .my-daily-controls-scroll{gap:10px;scrollbar-width:none}
  .photo-diary-head .my-daily-tab{font-size:12px;padding:6px}
  .image-diary-working,.image-diary-feedback{top:82px}
}


/* My daily: 2026-10-08 full-page brief. */
.my-daily-page{--daily-orange:#E8650A;--daily-orange-text:#C2410C;--daily-border:#E7E5E4;--daily-muted:#78716C}
.my-daily-capture{display:flex;gap:12px;margin:12px 0 2px}
.my-daily-capture>a,.my-daily-capture>button{display:flex;flex:1;min-width:0;align-items:center;justify-content:center;gap:9px;padding:10px 14px;border:1px solid var(--daily-border);border-radius:10px;background:#fff;color:var(--t1);font:inherit;font-size:13px;line-height:1.5;text-decoration:none;cursor:pointer}
.my-daily-capture>a:hover,.my-daily-capture>button:hover{border-color:var(--daily-orange)}
.my-daily-capture svg{width:18px;height:18px;flex:none;color:var(--daily-orange)}
.my-daily-capture .daily-entry-mobile{display:none}
.image-diary-drop{display:flex;align-items:center;gap:16px;padding:22px;margin:12px 0 2px;border:1.5px dashed #D6D3D1;border-radius:12px;background:#FAFAF9}
.image-diary-drop.is-dragging,.image-diary-drop.is-working{border-style:solid;border-color:var(--daily-orange)}
.image-drop-icon{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;border-radius:10px;background:#fff;color:var(--daily-orange);overflow:hidden}
.image-drop-icon svg{width:24px;height:24px}
.image-drop-icon img{width:100%;height:100%;object-fit:cover}
.image-diary-thumbnail{display:block;width:64px;height:64px;object-fit:cover;margin:0 auto 12px;border-radius:8px}
.image-drop-copy{flex:1;min-width:0;line-height:1.6}
.image-drop-copy strong{font-size:15px;font-weight:700}
.image-drop-copy p{margin:5px 0 0;font-size:13px;color:var(--daily-muted)}
.image-drop-copy button{padding:0;border:0;background:none;color:var(--daily-orange-text);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.image-drop-copy kbd{display:inline-block;padding:0 5px;border:1px solid #D6D3D1;border-bottom-width:2px;border-radius:4px;background:#fff;font:inherit;font-size:12px;line-height:1.6;font-weight:500;vertical-align:1px}
.image-drop-mobile{display:none}
.my-daily-page .my-daily-card{grid-template-columns:56px minmax(0,1fr) auto auto;grid-template-rows:22px 19px;column-gap:16px;row-gap:6px;align-content:center;box-sizing:border-box;height:94px;min-height:94px;padding:18px 20px}
.my-daily-page .my-daily-date{grid-column:1;grid-row:1/3;font-size:15px;font-weight:700;line-height:1.4}
.my-daily-date small{display:block;font-size:11px;font-weight:400;color:#A8A29E;margin-top:4px}
.my-daily-page .my-daily-tags{grid-column:2;grid-row:1;flex-wrap:nowrap;min-width:0;overflow:hidden;white-space:nowrap}
.my-daily-page .my-daily-tag{flex:none}
.my-daily-page .my-daily-preview{display:block;grid-column:2;grid-row:2;min-width:0;margin:0;overflow:hidden}
.my-daily-page .my-daily-preview p,.my-daily-page .my-daily-preview .my-daily-search-result{padding:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:19px}
.my-daily-page .my-daily-search-result button{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:19px}
.my-daily-page .my-daily-progress{grid-column:3;grid-row:1/3;align-self:center;white-space:nowrap;font-size:12px;color:var(--daily-muted)}
.my-daily-page .my-daily-progress strong{font-weight:700;color:var(--daily-orange-text)}
.my-daily-page .my-daily-progress.is-complete{color:#3B6D11}
.my-daily-page .my-daily-actions{grid-column:4;grid-row:1/3;flex-direction:row;align-items:center;gap:10px}
.my-daily-page .my-daily-listen{display:flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:40px;height:40px;padding:0;border:1px solid var(--daily-border);border-radius:50%;background:#fff;color:#57534E}
.my-daily-listen svg{width:18px;height:18px}
.my-daily-page .my-daily-action{width:auto;flex:none;height:36px;min-height:36px;font-weight:600;white-space:nowrap;cursor:pointer}
.my-daily-page .my-daily-action.is-primary{border-color:var(--daily-orange);background:var(--daily-orange);color:#fff}
.my-daily-page .my-daily-action.is-outline{border-color:var(--daily-orange);background:#fff;color:var(--daily-orange-text)}
.my-daily-page .my-daily-action.is-view{border-color:#D6D3D1;background:#fff;color:#57534E}
.daily-entry-pulse{animation:daily-entry-pulse 1s ease-out 1}
@keyframes daily-entry-pulse{0%,100%{box-shadow:0 0 0 0 rgb(232 101 10 / 0)}35%{box-shadow:0 0 0 10px rgb(232 101 10 / 24%)}70%{box-shadow:0 0 0 18px rgb(232 101 10 / 0)}}
@media(max-width:767px){
  .my-daily-capture{margin:10px 0 4px;gap:8px}
  .my-daily-capture>a,.my-daily-capture>button{flex-direction:column;padding:12px 8px;gap:7px}
  .my-daily-capture .daily-entry-desktop{display:none}
  .my-daily-capture .daily-entry-mobile{display:inline}
  .image-diary-drop{margin:10px 0 4px;padding:22px;gap:12px;cursor:pointer}
  .image-drop-desktop{display:none}
  .image-drop-mobile{display:block}
  .image-drop-copy p{font-size:12px}
  .my-daily-page .my-daily-card{height:auto;min-height:0;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 19px 40px;row-gap:12px;column-gap:8px;padding:18px 20px}
  .my-daily-page .my-daily-date{grid-column:1;grid-row:1;display:flex;align-items:baseline;gap:7px;white-space:nowrap}
  .my-daily-date small{margin:0}
  .my-daily-page .my-daily-tags{grid-column:2;grid-row:1;justify-content:flex-end;max-width:100%;gap:4px}
  .my-daily-page .my-daily-tag{padding:3px 5px;font-size:10px}
  .my-daily-page .my-daily-preview{grid-column:1/3;grid-row:2}
  .my-daily-page .my-daily-progress{grid-column:1;grid-row:3}
  .my-daily-page .my-daily-actions{grid-column:2;grid-row:3;justify-content:flex-end;gap:8px}
}
@media(prefers-reduced-motion:reduce){.daily-entry-pulse{animation:none;outline:2px solid #E8650A;outline-offset:4px}}

/* AI disclosure: one plain-text label per result area. */
.ai-generated-label,.my-daily-stats .ai-generated-label{font-size:11px;font-weight:400;line-height:1.5;color:#b0b0b0;background:none;border:0;white-space:nowrap;text-align:right}
.my-daily-stats{flex:1;min-width:0}
.my-daily-stats>.ai-generated-label,.life-diary-list-head>.ai-generated-label{margin-left:auto}
.ai-result-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.ai-result-heading h3{margin:0}
.legal-card .ai-service-clause,.legal-modal-body .ai-service-clause{font-size:12px;font-weight:400;color:#888;background:none;border:0;overflow-wrap:anywhere}
@media(max-width:767px){
  .my-daily-stats{width:100%;flex-wrap:wrap;row-gap:8px}
  .my-daily-stats>.ai-generated-label{flex:0 0 100%;margin:0;text-align:right}
}

/* Keep membership type above the upgrade action, with room for the expiry date. */
.sidebar .sb-membership{display:grid;grid-template-columns:30px minmax(0,1fr) 32px;gap:6px 8px}
.sidebar .sb-membership>i{grid-column:1;grid-row:1}
.sidebar .sb-membership>.sb-card-copy{grid-column:2/4;grid-row:1}
.sidebar .sb-membership>.sb-card-copy small{padding-right:34px}
.sidebar .sb-membership>.sb-arrow{grid-column:3;grid-row:1;align-self:end;justify-self:end;line-height:17px}
.sidebar .sb-membership>.sb-points-row{grid-column:1/-1}
@media(min-width:981px){
 .app-shell:not(.auth-shell)>.sidebar{overflow:hidden}
 .sidebar .nav{padding-top:4px}
 .sidebar .nav-section{margin-bottom:3px;padding-bottom:3px}
 .sidebar .nav-section-title{padding-top:6px;padding-bottom:3px}
}
@media(min-width:981px) and (max-height:760px){
 .sidebar .nav-button{min-height:34px}
 .sidebar .brand{min-height:42px;padding-bottom:8px}
 .sidebar .sb-cards{gap:6px;margin-top:6px;padding-top:6px}
 .sidebar .sb-card{padding-block:8px}
 .sidebar .support-tools{padding-top:6px}
 .sidebar .support-tools button{gap:4px;padding-top:5px}
}
@media(min-width:981px) and (max-height:660px){
 .sidebar .nav-button{min-height:30px}
 .sidebar .nav-section{margin-bottom:2px;padding-bottom:2px}
 .sidebar .nav-section-title{padding-top:3px;padding-bottom:2px}
 .sidebar .brand{min-height:38px;padding-bottom:4px}
}

/* Device mode comes from screen size; viewport width only controls available space. */
html[data-device-layout="desktop"]:has(.app-shell:not(.auth-shell)),
html[data-device-layout="desktop"] body:has(.app-shell:not(.auth-shell)) { height:100dvh; overflow:hidden; }
html[data-device-layout="desktop"] .app-shell:not(.auth-shell) { grid-template-columns:204px minmax(0,1fr); height:100dvh; min-height:0; padding:0; }
html[data-device-layout="desktop"] .app-shell:not(.auth-shell) > .sidebar { display:flex; position:sticky; top:0; width:100%; height:100dvh; max-height:none; margin:0; overflow-y:auto; overflow-x:hidden; }
html[data-device-layout="desktop"] .sidebar .nav { max-height:none; flex:none; }
html[data-device-layout="desktop"] .app-shell:not(.auth-shell) > .main { height:100dvh; min-height:0; min-width:0; overflow-y:auto; }
html[data-device-layout="desktop"] .mobile-bottom-nav { display:none; }
html[data-device-layout="desktop"] .app-panel-shell .app-topbar { display:flex; height:60px; padding:0 28px; }
html[data-device-layout="desktop"] .app-panel-shell .app-topbar :is(.wb-wrap,.topbar-link) { display:flex; }
html[data-device-layout="desktop"] .app-topbar-label { display:inline; }
html[data-device-layout="desktop"] .app-topbar-icon { display:none; }
html[data-device-layout="desktop"] .app-topbar .topbar-link { width:auto; padding:0 12px; }
html[data-device-layout="desktop"] .app-panel-shell:not(.auth-shell) .main-inner { width:calc(100% - 24px); min-height:calc(100dvh - 84px); height:auto; margin:12px; padding:0 24px 28px; border:1px solid #E8E6E3; border-radius:14px; }
html[data-device-layout="desktop"] .app-panel-head { top:72px; height:auto; min-height:60px; margin:0 -24px 20px; padding:10px 24px; border-radius:14px 14px 0 0; gap:12px; flex-wrap:wrap; }
html[data-device-layout="desktop"] .app-panel-head::before { display:none; }
html[data-device-layout="desktop"] .app-panel-head h1 { height:auto; font-size:20px; }
html[data-device-layout="desktop"] .app-panel-head h1 > svg { display:block; width:22px; height:22px; }
html[data-device-layout="desktop"] .app-panel-tools { flex:1 1 300px; width:auto; }
html[data-device-layout="desktop"] :is(.app-panel-head .my-daily-filter-row,.app-panel-head .scenario-toolbar) { flex-direction:row; flex-wrap:wrap; padding:0; }
html[data-device-layout="desktop"] :is(.my-daily-controls-scroll,.app-panel-head .my-daily-tabs,.app-panel-head .scenario-categories) { flex-wrap:wrap; overflow:visible; width:auto; }
html[data-device-layout="desktop"] .photo-diary-head { flex-wrap:wrap!important; height:auto; }
html[data-device-layout="desktop"] .photo-diary-head .my-daily-filter-row { flex-wrap:wrap!important; }
html[data-device-layout="desktop"] .photo-diary-head .my-daily-search { flex:1 1 145px; width:auto; }
html[data-device-layout="desktop"] .photo-diary-head .my-daily-tab { font-size:13px; }
html[data-device-layout="desktop"] .life-diary { grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); align-items:start; }
html[data-device-layout="desktop"] .sentence-breakdown-page { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); min-height:0; gap:24px; }
html[data-device-layout="desktop"] .app-shell :is(.sentence-breakdown-left,.sentence-breakdown-right) { width:auto; min-width:0; height:auto; padding:0; border:0; overflow:visible; }
html[data-device-layout="desktop"] .sentence-breakdown-input-card textarea { min-height:240px; }
html[data-device-layout="desktop"] :is(.life-diary,.home-rich,.photo-section,.sentence-breakdown-page) { overflow-wrap:anywhere; }
html[data-device-layout="desktop"] .home-rich-checkin { flex-wrap:wrap; }
html[data-device-layout="desktop"] .home-rich-actions { grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
html[data-device-layout="desktop"] :is(.home-rich-columns,.home-rich-bottom) { grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); }
html[data-device-layout="desktop"] .home-rich-entry small { white-space:normal; }
html[data-device-layout="desktop"] .home-rich-sample strong { overflow-wrap:anywhere; }
html[data-device-layout="desktop"] .app-panel-shell .main-inner:has(>.photo-section) { padding:0; }
html[data-device-layout="desktop"] .photo-head { top:72px; height:auto; min-height:60px; padding:12px 24px; flex-wrap:wrap; }
html[data-device-layout="desktop"] .photo-head h1 { font-size:20px; }
html[data-device-layout="desktop"] .photo-body { padding:20px 24px; }
html[data-device-layout="desktop"] .photo-upload-desktop { display:flex; flex-wrap:wrap; }
html[data-device-layout="desktop"] .photo-upload-desktop > div:not(.photo-upload-actions) { flex:1 1 240px; min-width:0; }
html[data-device-layout="desktop"] .photo-upload-actions { margin-left:auto; flex-wrap:wrap; }
html[data-device-layout="desktop"] .photo-upload strong { font-size:15px; }
html[data-device-layout="desktop"] .photo-modes:not([hidden]) { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
html[data-device-layout="desktop"] .photo-result-objects { grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
html[data-device-layout="desktop"] .photo-result > header { flex-wrap:wrap; }
html[data-device-layout="desktop"] .my-daily-capture { flex-wrap:wrap; max-width:none; }
html[data-device-layout="desktop"] .my-daily-capture > :is(a,button) { flex:1 1 200px; flex-direction:row; }
html[data-device-layout="desktop"] .my-daily-capture .daily-entry-mobile { display:none; }
html[data-device-layout="desktop"] .my-daily-capture .daily-entry-desktop { display:inline; }

/* The rail remains in the grid: it never covers the page. */
html[data-device-layout="desktop"][data-sidebar="compact"] .app-shell:not(.auth-shell) { grid-template-columns:72px minmax(0,1fr); }
html[data-device-layout="desktop"][data-sidebar="compact"] .sidebar { padding:8px 4px; }
html[data-device-layout="desktop"][data-sidebar="compact"] .sidebar .brand { justify-content:center; min-height:48px; padding:4px; }
html[data-device-layout="desktop"][data-sidebar="compact"] .sidebar .brand > div { display:none; }
html[data-device-layout="desktop"][data-sidebar="compact"] .sidebar .brand img { max-width:40px; height:auto; }
html[data-device-layout="desktop"][data-sidebar="compact"] .sidebar :is(.nav-section-title,.nav-hint,.sb-tag,.sb-arrow,.sb-card small,.sb-points-row) { display:none; }
html[data-device-layout="desktop"][data-sidebar="compact"] .sidebar .nav-section { margin:0; padding:0; border:0; }
html[data-device-layout="desktop"][data-sidebar="compact"] .sidebar .nav-button { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; min-height:58px; padding:7px 0; gap:5px; }
html[data-device-layout="desktop"][data-sidebar="compact"] .sidebar .nav-label { font-size:10px; line-height:1.3; white-space:nowrap; }
html[data-device-layout="desktop"][data-sidebar="compact"] .sidebar .sb-cards { gap:6px; margin-top:8px; padding-top:8px; }
html[data-device-layout="desktop"][data-sidebar="compact"] .sidebar .sb-card { display:flex; flex-direction:column; align-items:center; padding:7px 0; gap:5px; border:0; background:transparent; }
html[data-device-layout="desktop"][data-sidebar="compact"] .sidebar .sb-card b { font-size:10px; }
html[data-device-layout="desktop"][data-sidebar="compact"] .sidebar .support-tools { grid-template-columns:1fr; margin-top:12px; }
html[data-device-layout="desktop"][data-sidebar="compact"] .sidebar .support-tools button { gap:4px; padding:7px 0; }
html[data-device-layout="desktop"][data-sidebar="compact"] .sidebar .support-tools button > span:last-child { font-size:10px; }

/* Touch targets apply to desktop mode only; the accepted phone UI is retained. */
html[data-touch-desktop="true"] :is(.app-shell,dialog,.image-objects-overlay) :is(button:not(.life-diary-read-aloud),a[href],summary,[role="button"],label:has(input[type="checkbox"])) { min-width:40px; min-height:40px; }
/* Keep scheme A's 28px circle while expanding its actual hit area. */
html[data-touch-desktop="true"] .life-diary-read-aloud::after { content:""; position:absolute; width:40px; height:40px; left:50%; top:50%; transform:translate(-50%,-50%); }
.photo-touch-hint,[data-photo-tablet-camera] { display:none; }
html[data-touch-desktop="true"] .photo-touch-hint { display:inline; }
html[data-touch-desktop="true"] :is(.photo-pointer-hint,[data-photo-qr]) { display:none; }
html[data-touch-desktop="true"] [data-photo-tablet-camera]:not([hidden]) { display:inline-flex; align-items:center; justify-content:center; }

/* A phone stays a phone in landscape, even when the viewport exceeds 980px. */
html[data-device-layout="phone"]:has(.app-shell:not(.auth-shell)),
html[data-device-layout="phone"] body:has(.app-shell:not(.auth-shell)) { height:auto; overflow:visible; }
html[data-device-layout="phone"] .app-shell:not(.auth-shell) { grid-template-columns:minmax(0,1fr); height:auto; padding:env(safe-area-inset-top) 0 calc(78px + env(safe-area-inset-bottom)); }
html[data-device-layout="phone"] .app-shell:not(.auth-shell) > .sidebar { display:none; }
html[data-device-layout="phone"] .app-shell:not(.auth-shell) > .main { height:auto; min-height:calc(100dvh - 78px); overflow:visible; }
html[data-device-layout="phone"] .app-panel-shell .app-topbar { display:none; }
html[data-device-layout="phone"] .mobile-bottom-nav { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); position:fixed; bottom:0; left:0; right:0; z-index:50; padding:7px 4px calc(7px + env(safe-area-inset-bottom)); background:#F5F5F4; border-top:1px solid var(--bd); }
html[data-device-layout="phone"] .mobile-bottom-nav button { display:grid; justify-items:center; gap:4px; min-height:50px; padding:5px 2px; border:1px solid transparent; border-radius:10px; font-size:12px; color:var(--t2); background:transparent; }
html[data-device-layout="phone"] .mobile-bottom-nav button[aria-current] { color:var(--or); background:#fff; border-color:#E8E6E3; }
html[data-device-layout="phone"] .mobile-bottom-nav svg { width:22px; height:22px; }
html[data-device-layout="phone"] .mobile-bottom-nav .photo-nav-camera svg { width:24px; height:24px; }
html[data-device-layout="phone"] .photo-upload-desktop { display:none; }
html[data-device-layout="phone"] .photo-head { top:12px; }

@media(max-width:1023px) {
  html[data-device-layout="desktop"] .app-panel-shell:not(.auth-shell) .main-inner { padding-inline:18px; }
  html[data-device-layout="desktop"] .app-panel-head { margin-inline:-18px; padding-inline:18px; }
  html[data-device-layout="desktop"] .app-panel-shell .main-inner:has(>.photo-section) { padding:0; }
  html[data-device-layout="desktop"] .my-daily-page .my-daily-card { height:auto; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto auto; gap:12px; }
  html[data-device-layout="desktop"] .my-daily-page .my-daily-date { grid-column:1; grid-row:1; }
  html[data-device-layout="desktop"] .my-daily-page .my-daily-tags { grid-column:2; grid-row:1; flex-wrap:wrap; }
  html[data-device-layout="desktop"] .my-daily-page .my-daily-preview { grid-column:1/-1; grid-row:2; }
  html[data-device-layout="desktop"] .my-daily-page .my-daily-progress { grid-column:1; grid-row:3; }
  html[data-device-layout="desktop"] .my-daily-page .my-daily-actions { grid-column:2; grid-row:3; }
}