xiaoshu-app/projects/xiaoshu-mobile/src/styles.scss

@use '../../shared/ui/dropdown';
:root {
  --brand: #2f9b82;
  --brand-strong: #1f7b68;
  --brand-deep: #155d50;
  --brand-pale: #e8f5f1;
  --brand-wash: #f1f8f6;
  --accent: #f59b23;
  --accent-strong: #df8211;
  --accent-pale: #fff3dc;
  --rose: #a34d67;
  --rose-pale: #faeaf0;
  --blue: #4f73aa;
  --blue-pale: #eaf0f9;
  --danger: #c94f4f;
  --danger-pale: #fff0ef;
  --success: #2f8b61;
  --ink: #172522;
  --ink-soft: #697673;
  --ink-faint: #96a29f;
  --surface: #ffffff;
  --surface-muted: #f4f7f6;
  --surface-hover: #f1f6f4;
  --line: #dce5e2;
  --line-soft: #eaf0ee;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --shadow-xs: 0 2px 8px rgb(24 54 47 / 5%);
  --shadow-sm: 0 5px 18px rgb(24 54 47 / 7%);
  --shadow-lg: 0 16px 40px rgb(24 54 47 / 16%);
  --shadow-brand: 0 14px 30px rgb(24 89 74 / 20%);
  --page-gutter: 14px;
  --panel-gap: 12px;
  --panel-radius: 8px;
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

html,
body {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background: var(--surface-muted);
}

body { min-width: 320px; }

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

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

/* Shared student read-only vocabulary card used from study history and companion center. */
.readonly-word-card {
  margin: 14px 14px 20px;
  overflow: hidden;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.readonly-word-header { display: flex; min-height: 106px; align-items: center; justify-content: space-between; padding: 20px 18px; color: white; background: var(--brand-strong); gap: 14px; }
.readonly-word-header > div { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.readonly-word-header strong { font-size: 22px; line-height: 1.25; }
.readonly-word-header span { color: rgb(255 255 255 / 78%); font-size: 13px; }
.readonly-word-header em { flex: 0 0 auto; padding: 7px 12px; color: var(--brand-deep); background: var(--brand-pale); border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 750; white-space: nowrap; }
.readonly-word-list article { display: grid; min-height: 88px; grid-template-columns: minmax(112px, .72fr) minmax(0, 1.28fr); align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); gap: 18px; }
.readonly-word-list article:last-child { border-bottom: 0; }
.readonly-word-list article > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.readonly-word-list strong { overflow-wrap: anywhere; color: var(--ink); font-size: 18px; line-height: 1.3; }
.readonly-word-list small { color: var(--ink-soft); font-size: 12px; }
.readonly-word-list p { margin: 0; overflow-wrap: anywhere; color: var(--ink); font-size: 15px; line-height: 1.6; }
.readonly-word-note { margin: 0; padding: 13px 18px; color: var(--ink-soft); background: var(--surface-muted); font-size: 12px; line-height: 1.6; }
@media (max-width: 360px) {
  .readonly-word-card { margin-inline: 10px; }
  .readonly-word-list article { grid-template-columns: minmax(92px, .7fr) minmax(0, 1.3fr); padding-inline: 14px; gap: 12px; }
}

button { cursor: pointer; }

.spin { animation: spin .8s linear infinite; }

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

app-learning-page .memory-loading-label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
app-learning-page .memory-list-loading { display: flex; min-height: 150px; align-items: center; justify-content: center; padding: 28px 20px; color: var(--brand-strong); text-align: center; flex-direction: column; gap: 7px; }
app-learning-page .memory-list-loading strong { color: var(--ink); font-size: 14px; }
app-learning-page .memory-list-loading span { color: var(--ink-soft); font-size: 11px; }
app-learning-page .memory-list-loading.error { color: #b14f45; }
app-learning-page .memory-list-loading button { min-height: 36px; margin-top: 4px; padding: 0 14px; color: var(--brand-strong); font-weight: 700; background: white; border: 1px solid var(--line); border-radius: 7px; }

a,
button,
input,
textarea,
select { transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease, transform 160ms ease; }

:focus-visible {
  outline: 3px solid rgb(245 155 35 / 48%);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  object-fit: cover;
}

.page { padding: 16px; }

.section {
  padding: 18px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
}

.section + .section { margin-top: 10px; }

.section-title {
  margin: 0 0 14px;
  font-size: 17px;
  letter-spacing: 0;
}

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

.primary-button,
.secondary-button,
.danger-button {
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 700;
  letter-spacing: 0;
}

.primary-button {
  color: white;
  background: var(--brand-strong);
  box-shadow: 0 6px 14px rgb(31 123 104 / 17%);
}

.secondary-button {
  color: var(--brand-strong);
  background: white;
  border-color: var(--brand);
}

.danger-button {
  color: white;
  background: var(--danger);
}

.primary-button:disabled,
.secondary-button:disabled,
.danger-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  box-shadow: none;
}

.field { display: grid; gap: 7px; }
.field + .field { margin-top: 15px; }

.field label {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 550;
}

.field input,
.field textarea,
.field select,
input:not([type='checkbox']):not([type='radio']):not([type='range']),
textarea,
select {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  outline: none;
}

.field textarea,
textarea { min-height: 110px; resize: vertical; }

.field input:focus,
.field textarea:focus,
.field select:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgb(47 155 130 / 12%);
}

/* The course-history month picker has a leading calendar icon outside the
   shared dropdown trigger. Keep independent space for the icon and arrow. */
body app-course-center-page .history-filter-control.month-control > button.xs-dropdown-trigger,
body app-course-center-page .history-filter-control.student-control > button.xs-dropdown-trigger {
  height: 46px;
  min-height: 46px;
  padding-right: 18px;
  padding-left: 42px;
  border-radius: 11px;
  box-shadow: 0 3px 10px rgb(20 53 45 / 4%);
  font-size: 13px;
}

.empty-state,
.center-state {
  display: grid;
  min-height: 220px;
  padding: 28px 20px;
  place-items: center;
  color: var(--ink-soft);
  text-align: center;
}

.empty-state lucide-icon,
.center-state lucide-icon { color: var(--ink-faint); }

.empty-state > *,
.center-state > * {
  min-width: 0;
  max-width: 100%;
}

.empty-state p,
.center-state p {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (hover: hover) {
  .primary-button:hover { background: var(--brand-deep); transform: translateY(-1px); }
  .secondary-button:hover { background: var(--brand-wash); }
}

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

/* Shared visual language for the route families that implement the 95 migrated pages. */
app-account-page .profile-header,
app-appointment-page .appointment-status,
app-finance-page .finance-summary,
app-merchant-page :is(.stock-summary, .settle-summary),
app-study-records-page :is(.mastery, .income-summary),
app-team-page .team-summary,
app-game-page .game-intro {
  background: linear-gradient(135deg, var(--brand-deep), var(--brand-strong));
  box-shadow: var(--shadow-brand);
}

app-account-page :is(.wallet-strip, .order-strip, .role-panel, .service-section, .settings-list),
app-course-center-page :is(.course-band, .schedule-band),
app-study-records-page :is(.filter-row, .record-tabs, .record-list),
app-team-page :is(.team-stats, .detail-link, .members),
app-merchant-page :is(.stock-list, .settlement-list, .settlement-preview, .sales-group),
app-order-page :is(.order-tabs, .order-list),
app-finance-page :is(.finance-list, .finance-actions),
app-resource-page :is(.description, .action-row, .tabs, .resource-list, .detail-list),
app-checkout-page :is(.checkout-section, .totals),
app-product-page :is(.product-info, .product-tools, .product-content, .comments) {
  border-color: var(--line-soft);
}

app-product-list-page .product-grid article,
app-appointment-page .unit-grid article,
app-game-page .game-menu button,
app-support-feedback-page :is(.agent-header, .message-intro),
app-form-page .order-context,
app-english-reading-page .question-block,
app-reading-exercise .question-block {
  border-color: var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

app-product-list-page .product-grid article,
app-game-page .game-menu button,
app-appointment-page .unit-grid article { transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }

app-resource-page :is(.resource-item, .detail-list div),
app-study-records-page :is(.learning-item, .history-item, .progress-item, .income-item),
app-course-center-page :is(.course-list li, .schedule-list article),
app-team-page .members article,
app-order-page .order-card,
app-finance-page .finance-item { border-color: var(--line-soft); }

app-resource-page :is(.resource-item:hover, .resource-item:focus-within),
app-study-records-page :is(.learning-item:hover, .progress-item:hover),
app-course-center-page .schedule-list article:hover,
app-team-page .members article:hover { background: var(--surface-hover); }

app-product-list-page .node-list button.active,
app-study-records-page .record-tabs button.active,
app-resource-page .tabs button.active,
app-auth-page .mode-tabs button.active,
app-login-page .mode-tabs button.active {
  color: var(--brand-strong);
  border-color: var(--brand-strong);
}

app-form-page :is(.audit-line, .status-line),
app-auth-page .audit-notice,
app-login-page .audit-notice { border-radius: var(--radius-md); }

app-form-page :is(.load-error, .upload-control, .image-item),
app-support-feedback-page :is(.error-state, input, textarea),
app-reading-setup :is(input, select, textarea),
app-english-reading-page :is(input, select, textarea) { border-radius: var(--radius-sm); }

app-product-page :is(.purchase-bar),
app-checkout-page footer,
app-appointment-page .appointment-actions,
app-reading-exercise .answer-footer {
  border-color: var(--line);
  box-shadow: 0 -8px 24px rgb(24 54 47 / 6%);
  backdrop-filter: blur(12px);
}

app-support-page .messages p,
app-support-page :is(.image-message, .file-message),
app-support-page form textarea { border-radius: var(--radius-md); }

app-auth-page,
app-login-page {
  background: linear-gradient(180deg, var(--brand-pale) 0, var(--surface-muted) 42%, var(--surface) 100%);
}

@media (hover: hover) {
  app-product-list-page .product-grid article:hover,
  app-game-page .game-menu button:hover,
  app-appointment-page .unit-grid article:hover {
    border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
  }
}

/* Shared page geometry: business subpages use the same inset surfaces as the main tabs. */
app-learning-page .catalog-tabs {
  display: grid;
  margin: var(--panel-gap) var(--page-gutter) 0;
  overflow: hidden;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-sm);
}

app-learning-page .catalog-tabs button {
  min-width: 0;
  min-height: 44px;
  padding: 0 4px;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  font-size: 12px;
}

app-learning-page .catalog-tabs button:last-child { border-right: 0; }
app-learning-page .catalog-tabs button.active { color: white; background: var(--brand-strong); font-weight: 700; }

app-learning-page .unit-selection-summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  margin: var(--panel-gap) var(--page-gutter) 0;
  padding: 0 14px;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-sm);
  gap: 10px;
}

app-learning-page .unit-selection-summary span { font-size: 13px; }
app-learning-page .unit-selection-summary strong { color: var(--brand-strong); font-size: 17px; }
app-learning-page .unit-selection-summary small { font-size: 11px; }
app-learning-page .node-list > button.selected { background: var(--brand-pale); }
app-learning-page .node-list > button.unit-node { justify-content: flex-start !important; }

app-learning-page .node-list .node-check {
  display: grid !important;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  color: white;
  background: white;
  border: 1px solid #b5c6c1;
  border-radius: 6px;
  place-items: center;
}

app-learning-page .node-list > button.selected .node-check { background: var(--brand-strong); border-color: var(--brand-strong); }

app-learning-page .node-list .node-copy { flex: 1; }

app-learning-page .memory-student-filter {
  display: grid;
  align-items: end;
  margin: var(--panel-gap) var(--page-gutter) 0;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-sm);
  grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr);
  gap: 14px;
}

app-learning-page .memory-student-filter > div,
app-learning-page .memory-student-filter label { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
app-learning-page .memory-student-filter span { color: var(--ink-soft); font-size: 11px; }
app-learning-page .memory-student-filter strong { color: var(--ink); font-size: 18px; }
app-learning-page .memory-student-filter select { min-height: 42px; padding-block: 7px; }
app-learning-page .bulk-size-label { font-size: 12px; white-space: nowrap; }
app-learning-page .bulk-select-size { width: auto; }
app-learning-page .teacher-spelling-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 520px) {
  app-learning-page .memory-student-filter { grid-template-columns: 1fr; gap: 10px; }
}

app-learning-page .node-list .unit-progress-ring {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  margin-left: auto;
  position: relative;
  color: var(--brand-deep);
  background: conic-gradient(var(--brand) var(--progress, 0%), #e3ebe8 0);
  border-radius: 50%;
  place-items: center;
}

app-learning-page .node-list .unit-progress-ring::before {
  position: absolute;
  background: white;
  border-radius: 50%;
  content: '';
  inset: 5px;
}

app-learning-page .node-list .unit-progress-ring.complete { background: var(--brand-strong); }
app-learning-page .node-list .unit-progress-ring strong { z-index: 1; font-size: 9px; }
app-learning-page .unit-actions { grid-template-columns: minmax(0, 1fr) minmax(150px, 1.4fr); align-items: center; }
app-learning-page .unit-actions > span { color: var(--ink-soft); font-size: 13px; text-align: center; }

app-learning-page .repeat-list > button {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
app-learning-page .repeat-list .study-copy {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: baseline;
  gap: 12px;
}
app-learning-page .repeat-list .study-headword,
app-learning-page .repeat-list .study-answer { font-size: 1.5em; line-height: 1.4; overflow-wrap: anywhere; }
app-learning-page .repeat-list .study-headword { flex: 0 1 auto; max-width: 45%; }
app-learning-page .repeat-list .study-hints { flex: 1; min-width: 0; color: var(--ink-soft); overflow-wrap: anywhere; }
app-learning-page .repeat-list .study-phonetic { font-size: 1em; line-height: 1.4; }
app-learning-page .repeat-list .study-phonetic + .study-answer { margin-left: 10px; }
app-learning-page .repeat-list .repeat-dots { flex: 0 0 auto; }

app-resource-page .resource-page > :is(.description, .order-context, .action-row, .tabs, .state-line, .error-state, .resource-list, .detail-list, .empty-state),
app-appointment-page .appointment-page > :is(.course-section, .comment-panel, .report-panel),
app-article-page .article-page > :is(header, .article-content),
app-checkout-page .checkout-section,
app-finance-page .balance-band,
app-form-page .form-page,
app-order-page .order-page > :is(header, .timeline, .order-card, .order-links),
app-product-page .product-page > :is(.gallery-strip, .product-summary, .product-tools, .product-content, .comments),
app-study-records-page .records-page > :is(.mastery, .income-summary, .filter-row, .record-tabs, .record-list),
app-team-page :is(.team-summary, .team-stats, .detail-link, .members),
app-merchant-page :is(.stock-summary, .settle-summary, .stock-list, .settlement-list, .settlement-preview, .sales-group),
app-learning-page .learning-page > :is(.node-intro, .node-list, .selection-header, .word-select-list, .stage-banner, .repeat-list, .game-heading, .review-summary, .record-overview, .record-tip, .record-list, .anti-heading, .exam-status) {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-sm);
}

app-resource-page .resource-page {
  padding: var(--panel-gap) var(--page-gutter) 24px;
}

app-resource-page .resource-page > :is(.description, .order-context, .action-row, .tabs, .state-line, .error-state, .resource-list, .detail-list, .empty-state) {
  margin: 0 0 var(--panel-gap);
  background: white;
}

app-resource-page :is(.resource-item, .detail-list div):last-child { border-bottom: 0; }

app-learning-page .learning-page > :is(.node-intro, .node-list, .game-heading, .review-summary, .record-overview, .anti-heading, .exam-status) {
  margin: var(--panel-gap) var(--page-gutter) 0;
}

app-learning-page .learning-page > .node-list { margin-bottom: var(--panel-gap); }

app-learning-page .learning-page > .selection-header,
app-learning-page .learning-page > .stage-banner,
app-learning-page .learning-page > .record-tip {
  margin: var(--panel-gap) var(--page-gutter) 0;
  border-radius: var(--panel-radius) var(--panel-radius) 0 0;
}

app-learning-page .learning-page > .selection-header { top: 52px; }

app-learning-page .learning-page > :is(.word-select-list, .repeat-list, .record-list) {
  margin: 0 var(--page-gutter) var(--panel-gap);
  border-top: 0;
  border-radius: 0 0 var(--panel-radius) var(--panel-radius);
}

app-learning-page :is(.node-list, .word-select-list, .repeat-list, .record-list) > :last-child { border-bottom: 0; }

app-learning-page .learning-page > :is(.review-list, .match-grid, .anti-grid, .option-list) {
  padding-right: var(--page-gutter);
  padding-left: var(--page-gutter);
}

app-learning-page .learning-page > :is(.memory-calendar, .memory-date-tasks) {
  margin-right: var(--page-gutter);
  margin-left: var(--page-gutter);
}

app-appointment-page .appointment-page > .appointment-status {
  margin: var(--panel-gap) var(--page-gutter) 0;
  overflow: hidden;
  border-radius: var(--panel-radius) var(--panel-radius) 0 0;
}

app-appointment-page .appointment-page > .appointment-info {
  margin: 0 var(--page-gutter);
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--panel-radius) var(--panel-radius);
  box-shadow: var(--shadow-sm);
}

app-appointment-page .appointment-page > :is(.course-section, .comment-panel, .report-panel) {
  margin: var(--panel-gap) var(--page-gutter) 0;
  border-block: 1px solid var(--line);
}

app-article-page .article-page > :is(header, .article-content) {
  margin: var(--panel-gap) var(--page-gutter) 0;
}

app-article-page .article-video {
  width: calc(100% - (2 * var(--page-gutter)));
  margin: var(--panel-gap) var(--page-gutter) 0;
  overflow: hidden;
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-sm);
}

app-checkout-page .checkout-page { padding-top: var(--panel-gap); }
app-checkout-page .checkout-section { margin: 0 var(--page-gutter) var(--panel-gap); }

app-finance-page .balance-band {
  margin: var(--panel-gap) var(--page-gutter) 0;
}

app-finance-page .log-heading {
  margin: var(--panel-gap) var(--page-gutter) 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--panel-radius) var(--panel-radius) 0 0;
  box-shadow: var(--shadow-sm);
}

app-finance-page .finance-logs {
  margin: 0 var(--page-gutter) 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--panel-radius) var(--panel-radius);
  box-shadow: var(--shadow-sm);
}

app-finance-page .finance-logs article:last-child { border-bottom: 0; }

app-form-page {
  display: block;
  min-height: 100%;
  padding-top: 1px;
  background: var(--surface-muted);
}

app-form-page .form-page {
  margin: var(--panel-gap) var(--page-gutter) 24px;
  padding: 18px 16px 24px;
  background: white;
}

app-order-page .order-page { padding-top: 1px; }
app-order-page .order-page > :is(header, .timeline, .order-card, .order-links) { margin: var(--panel-gap) var(--page-gutter) 0; }

app-product-page .hero-image {
  display: block;
  width: calc(100% - (2 * var(--page-gutter)));
  margin: var(--panel-gap) var(--page-gutter) 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-sm);
}

app-product-page .product-page > :is(.gallery-strip, .product-summary, .product-tools, .product-content, .comments) {
  margin: var(--panel-gap) var(--page-gutter) 0;
}

app-product-list-page .browse-page:not(.with-nodes) > .search-row {
  margin: var(--panel-gap) var(--page-gutter) 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-sm);
}

app-product-list-page .browse-page:not(.with-nodes) > .product-region {
  padding-right: var(--page-gutter);
  padding-left: var(--page-gutter);
}

app-product-list-page .browse-page.with-nodes {
  width: calc(100% - (2 * var(--page-gutter)));
  height: calc(100dvh - 52px - (2 * var(--panel-gap)));
  margin: var(--panel-gap) var(--page-gutter);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-sm);
}

app-team-page .team-summary { margin: var(--panel-gap) var(--page-gutter) 0; }

app-team-page .team-stats {
  margin: var(--panel-gap) var(--page-gutter) 0;
  border-radius: var(--panel-radius) var(--panel-radius) 0 0;
}

app-team-page .detail-link {
  margin: 0 var(--page-gutter);
  border-top: 0;
  border-radius: 0 0 var(--panel-radius) var(--panel-radius);
}

app-team-page .members { margin: var(--panel-gap) var(--page-gutter) 24px; }
app-team-page .members article:last-child { border-bottom: 0; }

app-merchant-page :is(.stock-summary, .settle-summary) { margin: var(--panel-gap) var(--page-gutter) 0; }
app-merchant-page :is(.stock-list, .settlement-list, .settlement-preview, .sales-group) { margin: var(--panel-gap) var(--page-gutter) 0; border-block: 1px solid var(--line); }
app-merchant-page :is(.stock-list, .settlement-list, .sales-group) article:last-child { border-bottom: 0; }

app-study-records-page .records-page > :is(.mastery, .income-summary, .filter-row, .record-tabs, .record-list) {
  margin: var(--panel-gap) var(--page-gutter) 0;
}

app-study-records-page .records-page > .record-list { margin-bottom: 24px; }

app-study-records-page .current-learning-card {
  margin: var(--panel-gap) var(--page-gutter) 0;
  overflow: hidden;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-sm);
}

app-study-records-page .current-learning-card > header {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  color: white;
  background: var(--brand-strong);
  gap: 12px;
}

app-study-records-page .current-learning-card > header > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

app-study-records-page .current-learning-card > header span { color: rgb(255 255 255 / 78%); font-size: 10px; }
app-study-records-page .current-learning-card > header strong { font-size: 16px; }

app-study-records-page .current-learning-list button {
  display: grid;
  width: 100%;
  min-height: 66px;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  padding: 9px 14px;
  color: var(--ink);
  text-align: left;
  background: white;
  border: 0;
  border-bottom: 1px solid var(--line);
  gap: 10px;
}

app-study-records-page .current-learning-list button:last-child { border-bottom: 0; }

app-study-records-page .current-learning-list button > i {
  display: grid;
  width: 36px;
  height: 36px;
  color: var(--brand-strong);
  background: var(--brand-pale);
  border-radius: var(--radius-md);
  place-items: center;
}

app-study-records-page .current-learning-list button > span { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
app-study-records-page .current-learning-list button strong,
app-study-records-page .current-learning-list button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
app-study-records-page .current-learning-list button strong { font-size: 13px; }
app-study-records-page .current-learning-list button small { color: var(--ink-soft); font-size: 10px; }
app-study-records-page .current-learning-list button:disabled { cursor: not-allowed; opacity: .58; }
app-study-records-page .current-learning-list button.readonly:not(:disabled) { cursor: pointer; }
app-study-records-page .current-learning-list button.readonly:disabled { opacity: .58; }

app-learning-page .node-list > button.readonly { cursor: pointer; }
app-learning-page .readonly-word-header { display: flex; min-height: 70px; align-items: center; justify-content: space-between; padding: 12px 16px; color: white; background: var(--brand-strong); gap: 12px; }
app-learning-page .readonly-word-header > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
app-learning-page .readonly-word-header strong { font-size: 18px; }
app-learning-page .readonly-word-header span { color: rgb(255 255 255 / 76%); font-size: 11px; }
app-learning-page .readonly-word-header em { padding: 5px 9px; color: var(--brand-deep); background: var(--brand-pale); border-radius: 999px; font-size: 10px; font-style: normal; font-weight: 750; white-space: nowrap; }
app-learning-page .readonly-word-list { background: white; }
app-learning-page .readonly-word-list article { display: grid; min-height: 72px; grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr); align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); gap: 14px; }
app-learning-page .readonly-word-list article > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
app-learning-page .readonly-word-list strong { overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
app-learning-page .readonly-word-list small { color: var(--ink-soft); font-size: 12px; }
app-learning-page .readonly-word-list p { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.5; }
app-learning-page .readonly-word-note { margin: 12px 14px 0; padding: 10px 12px; color: var(--ink-soft); background: var(--brand-wash); border: 1px solid var(--line); border-radius: var(--radius-md); font-size: 11px; line-height: 1.5; text-align: center; }

app-learning-page .history-word-audio {
  display: flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  color: var(--brand-strong);
  background: transparent;
  border: 0;
  border-radius: 6px;
  text-align: left;
  gap: 8px;
  cursor: pointer;

  > span { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
  strong { white-space: normal; overflow-wrap: anywhere; }
  lucide-icon { flex-shrink: 0; }
  &:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 3px; }
  &:disabled { cursor: default; }
  &:disabled lucide-icon { opacity: .35; }
}

app-study-records-page .current-learning-toggle {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--brand-strong);
  background: var(--brand-pale);
  border: 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 750;
  gap: 6px;
}

app-study-records-page .current-learning-toggle lucide-icon { transition: transform .18s ease; transform: rotate(90deg); }
app-study-records-page .current-learning-toggle.expanded lucide-icon { transform: rotate(-90deg); }

app-learning-page .memory-watermark { position: absolute; top: -28px; right: -26px; color: white; opacity: .07; pointer-events: none; }
app-learning-page .memory-copy { min-width: 0; }
app-learning-page .memory-copy strong,
app-learning-page .memory-copy small { display: block; }
app-learning-page .memory-kicker { display: inline-flex; align-items: center; color: rgb(255 255 255 / 72%); font-size: 11px; font-weight: 650; gap: 5px; }
app-learning-page .memory-copy strong { margin-top: 7px; color: white; font-size: 21px; line-height: 1.2; }
app-learning-page .memory-copy small { margin-top: 6px; color: rgb(255 255 255 / 72%); font-size: 10px; }
app-learning-page .memory-score { display: flex; width: 68px; height: 68px; flex: 0 0 68px; align-items: center; justify-content: center; color: white; background: rgb(255 255 255 / 12%); border: 1px solid rgb(255 255 255 / 32%); border-radius: 50%; box-shadow: 0 0 0 5px rgb(255 255 255 / 5%); flex-direction: column; }
app-learning-page .memory-score b { font-size: 18px; line-height: 1; }
app-learning-page .memory-score small { margin-top: 5px; color: rgb(255 255 255 / 70%); font-size: 8px; }
app-learning-page .memory-curve { position: absolute; inset: 0; margin: 0; overflow: hidden; background: rgb(3 45 39 / 12%); pointer-events: none; z-index: 0; }
app-learning-page .memory-curve figcaption { position: absolute; top: 116px; right: 20px; left: 20px; display: flex; align-items: center; justify-content: space-between; color: rgb(255 255 255 / 78%); font-size: 11px; z-index: 2; }
app-learning-page .memory-curve figcaption strong { display: inline-flex; align-items: center; color: #b8ef9f; font-size: 10px; gap: 5px; }
app-learning-page .memory-curve figcaption strong i { width: 6px; height: 6px; background: #8bd47a; border-radius: 50%; box-shadow: 0 0 0 3px rgb(139 212 122 / 14%); }
app-learning-page .memory-curve-chart { position: absolute; top: 136px; right: 8px; bottom: 61px; left: 8px; }
app-learning-page .memory-curve-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
app-learning-page .memory-curve-chart text { fill: rgb(255 255 255 / 62%); font-family: inherit; font-size: 7px; }
app-learning-page .memory-chart-axis { stroke: rgb(255 255 255 / 24%); stroke-width: 1; vector-effect: non-scaling-stroke; }
app-learning-page .memory-forgetting-line,
app-learning-page .memory-learning-line,
app-learning-page .memory-review-decay { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
app-learning-page .memory-forgetting-line { stroke: #e58b72; stroke-dasharray: 4 4; stroke-width: 1.7; }
app-learning-page .memory-learning-line { stroke: #8bd47a; stroke-width: 2.7; }
app-learning-page .memory-review-decay { stroke: #ffd084; stroke-width: 1.8; }
app-learning-page .memory-review-lift { stroke: #b8ef9f; stroke-dasharray: 90; stroke-dashoffset: 90; stroke-linecap: round; stroke-width: 2; vector-effect: non-scaling-stroke; animation: memory-review-lift 15s ease-out infinite; animation-delay: var(--pulse-delay); }
app-learning-page .memory-review-dot { fill: #ffad32; stroke: #126c5d; stroke-width: 1.2; }
app-learning-page .memory-reset-dot { fill: #8bd47a; stroke: #126c5d; stroke-width: 1.1; }
app-learning-page .memory-review-ripple { fill: none; stroke: #ffd084; stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: memory-review-ripple 15s ease-out infinite; animation-delay: var(--pulse-delay); }
app-learning-page .memory-review-label { fill: #ffdba0; font-size: 6px; font-weight: 700; }
app-learning-page .memory-line-label { font-size: 6px; font-weight: 700; }
app-learning-page .memory-line-label.forgetting { fill: #f2aa96; }
app-learning-page .memory-line-label.learning { fill: #b8ef9f; }
app-learning-page .memory-day-dot { fill: rgb(255 255 255 / 58%); transform-box: fill-box; transform-origin: center; animation: memory-day-pulse 12s ease-in-out infinite; animation-delay: var(--pulse-delay); }
app-learning-page .memory-day-ripple { fill: none; stroke: #ffd084; stroke-width: .8; opacity: 0; transform-box: fill-box; transform-origin: center; animation: memory-day-ripple 12s ease-out infinite; animation-delay: var(--pulse-delay); }

@keyframes memory-day-pulse { 0%, 9%, 100% { fill: rgb(255 255 255 / 58%); transform: scale(1); } 4.5% { fill: #ffad32; transform: scale(1.8); } }
@keyframes memory-day-ripple { 0%, 100% { opacity: 0; transform: scale(.6); } 3% { opacity: .8; } 10% { opacity: 0; transform: scale(3); } }
@keyframes memory-review-lift { 0%, 100% { opacity: .2; stroke-dashoffset: 90; } 5%, 14% { opacity: 1; stroke-dashoffset: 0; } 22% { opacity: .52; stroke-dashoffset: 0; } }
@keyframes memory-review-ripple { 0%, 100% { opacity: 0; transform: scale(.7); } 5% { opacity: .9; } 15% { opacity: 0; transform: scale(4); } }

@media (prefers-reduced-motion: reduce) {
  app-learning-page .memory-day-dot,
  app-learning-page .memory-day-ripple,
  app-learning-page .memory-review-lift,
  app-learning-page .memory-review-ripple { animation: none; }
}

app-study-records-page .ai-reading-feature { margin: 12px 14px 0; overflow: hidden; background: white; border: 1px solid color-mix(in srgb, var(--brand-strong) 34%, var(--line)); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
app-study-records-page .ai-reading-visual { position: relative; min-height: 230px; overflow: hidden; background: #116b5a; }
app-study-records-page .ai-reading-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
app-study-records-page .ai-reading-copy { display: flex; width: 52%; min-height: 230px; padding: 18px 0 18px 18px; position: relative; z-index: 1; align-items: flex-start; color: white; flex-direction: column; }
app-study-records-page .ai-reading-eyebrow { display: inline-flex; align-items: center; color: #dff8ef; font-size: 11px; font-weight: 700; gap: 6px; }
app-study-records-page .ai-reading-copy h2 { margin: 10px 0 7px; font-size: 23px; line-height: 1.28; letter-spacing: 0; }
app-study-records-page .ai-reading-copy p { width: 185px; margin: 0; color: rgb(255 255 255 / 82%); font-size: 12px; line-height: 1.6; }
app-study-records-page .ai-reading-cta { display: inline-flex; min-height: 44px; margin-top: auto; padding: 0 12px; align-items: center; justify-content: center; color: #14352f; background: var(--accent); border: 0; border-radius: var(--radius-sm); box-shadow: 0 6px 16px rgb(6 47 39 / 24%); font-size: 12px; font-weight: 750; gap: 7px; }
app-study-records-page .ai-reading-cta:disabled { color: rgb(255 255 255 / 72%); background: rgb(255 255 255 / 14%); box-shadow: none; cursor: not-allowed; }
app-study-records-page .ai-reading-flow { display: grid; min-height: 62px; margin: 0; padding: 0 8px; list-style: none; grid-template-columns: repeat(4, minmax(0, 1fr)); }
app-study-records-page .ai-reading-flow li { display: flex; min-width: 0; align-items: center; justify-content: center; position: relative; color: var(--ink-soft); font-size: 10px; flex-direction: column; gap: 4px; }
app-study-records-page .ai-reading-flow li:not(:last-child)::after { width: 1px; height: 24px; position: absolute; top: 19px; right: 0; background: var(--line); content: ''; }
app-study-records-page .ai-reading-flow b { display: grid; width: 20px; height: 20px; color: white; background: var(--brand-strong); border-radius: 50%; font-size: 10px; place-items: center; }
app-study-records-page .ai-reading-flow span { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }

app-learning-page .word-refine-item { background: white; border-bottom: 1px solid var(--line); }
app-learning-page .word-refine-item.selected { background: var(--brand-pale); }
app-learning-page .word-refine-item:last-child { border-bottom: 0; }
app-learning-page .word-refine-main { display: grid; min-height: 72px; align-items: center; padding: 8px 14px; grid-template-columns: 32px minmax(0, 1fr) auto 40px; gap: 8px; }
app-learning-page .word-select-check { display: grid; width: 32px; height: 32px; padding: 0; color: white; background: white; border: 1px solid var(--line); border-radius: var(--radius-sm); place-items: center; }
app-learning-page .word-select-check[aria-pressed='true'] { background: var(--brand-strong); border-color: var(--brand-strong); }
app-learning-page .word-reveal { display: flex; min-width: 0; min-height: 52px; padding: 5px 0; align-items: flex-start; justify-content: center; color: var(--ink); text-align: left; background: transparent; border: 0; flex-direction: column; gap: 5px; }
app-learning-page .word-reveal strong { max-width: 100%; font-size: 18px; overflow-wrap: anywhere; }
app-learning-page .word-reveal small { overflow: hidden; max-width: 100%; color: var(--ink-faint); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
app-learning-page .word-reveal small.revealed { color: var(--ink-soft); font-size: 13px; }
app-learning-page .word-refine-main .audio { display: grid; width: 40px; height: 44px; min-width: 40px; min-height: 44px; color: var(--brand-strong); place-items: center; }
app-learning-page .word-assessment { display: flex; align-items: center; gap: 4px; }
app-learning-page .word-assessment button, app-learning-page .bulk-assessment button, app-learning-page .bulk-select-toggle { display: inline-flex; min-width: 0; min-height: 32px; padding: 0 8px; align-items: center; justify-content: center; color: var(--brand-strong); background: white; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 12px; font-weight: 650; white-space: nowrap; }
app-learning-page .word-assessment .unknown-button, app-learning-page .bulk-assessment .unknown-button { color: #9a6407; }
app-learning-page .word-assessment .known-button.active { color: white; background: var(--brand-strong); border-color: var(--brand-strong); }
app-learning-page .word-assessment .unknown-button.active { color: #4d3100; background: var(--accent-pale); border-color: var(--accent); }
app-learning-page .course-bulk-toolbar { display: grid; position: sticky; top: 0; z-index: 2; padding: 12px 14px; align-items: center; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; background: var(--brand-wash); border-bottom: 1px solid var(--line); }
app-learning-page .bulk-assessment { display: flex; align-items: center; justify-self: end; gap: 8px; }
app-learning-page .bulk-count { min-width: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
app-learning-page .bulk-count b { color: var(--brand-strong); font-weight: 750; }
app-learning-page .course-bulk-toolbar small { grid-column: 1 / -1; color: var(--ink-soft); font-size: 11px; line-height: 1.6; }
app-learning-page .bulk-assessment button { min-height: 38px; padding: 0 12px; gap: 6px; font-size: 13px; font-weight: 750; transition: filter .15s, box-shadow .15s; }
app-learning-page .bulk-assessment .known-button { color: white; background: var(--brand-strong); border-color: var(--brand-strong); box-shadow: 0 3px 8px rgba(23,108,85,.16); }
app-learning-page .bulk-assessment .unknown-button { color: #795007; background: var(--accent-pale); border-color: #d6b56e; }
app-learning-page .bulk-assessment button:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 3px; }
@media (hover: hover) { app-learning-page .bulk-assessment button:not(:disabled):hover { filter: brightness(1.06); } }
@media (max-width: 350px) { app-learning-page .course-bulk-toolbar { grid-template-columns: auto minmax(0,1fr); } app-learning-page .bulk-count { justify-self: end; } app-learning-page .bulk-assessment { grid-column: 1 / -1; } }
app-learning-page .selection-retry-note { margin: 10px 14px; padding: 12px; color: #704500; background: var(--accent-pale); border-radius: var(--radius-sm); font-size: 13px; line-height: 1.6; }
app-learning-page .word-refine-main:has(.word-assessment) .audio { width: 40px; }
app-learning-page .word-refine-main:not(:has(.word-assessment)) { grid-template-columns: 32px minmax(0, 1fr) 40px; }
app-learning-page .word-refine-main button:disabled, app-learning-page .course-bulk-toolbar button:disabled { opacity: .55; cursor: default; }
@media (pointer: coarse) { app-learning-page .word-assessment button, app-learning-page .bulk-assessment button, app-learning-page .bulk-select-toggle { min-height: 44px; } }
@media (max-width: 380px) { app-learning-page .word-refine-main { padding-inline: 10px; gap: 6px; } app-learning-page .word-assessment button { padding-inline: 6px; font-size: 11px; } }
app-learning-page .word-selection-panel { padding: 14px; background: var(--surface-muted); }
app-learning-page .word-selection-list { overflow: hidden; background: white; border: solid var(--line); border-width: 0 1px 1px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-sm); }
app-learning-page .word-selection-tabs { display: grid; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-sm); grid-template-columns: repeat(2, minmax(0, 1fr)); }
app-learning-page .word-selection-tabs button { display: flex; min-height: 58px; padding: 0 14px; align-items: center; justify-content: center; color: var(--ink-soft); background: white; border: 0; border-bottom: 3px solid transparent; font-size: 15px; font-weight: 700; gap: 8px; }
app-learning-page .word-selection-tabs button + button { border-left: 1px solid var(--line); }
app-learning-page .word-selection-tabs button.active { color: var(--brand-strong); background: var(--brand-wash); border-bottom-color: var(--brand-strong); }
app-learning-page .word-selection-tabs b { min-width: 25px; padding: 3px 7px; color: inherit; background: var(--surface-muted); border-radius: 999px; font-size: 11px; }
app-learning-page .word-selection-tabs button.active b { background: var(--brand-pale); }
app-learning-page .word-selection-tabs.course-pass-tabs { grid-template-columns: repeat(4,minmax(0,1fr)); }
app-learning-page .course-pass-tabs button { min-width: 0; min-height: 72px; padding: 8px 4px; flex-direction: column; gap: 5px; font-size: 14px; }
app-learning-page .course-pass-tabs button span { text-align: center; overflow-wrap: anywhere; }

app-learning-page .word-column-help { min-height: 51px; margin: 0; padding: 10px 14px; color: var(--ink-soft); border-bottom: 1px solid var(--line); font-size: 11px; line-height: 1.45; }
app-learning-page .word-complete-check { display: grid; width: 32px; height: 32px; color: white; background: var(--brand-strong); border-radius: 50%; place-items: center; }
app-learning-page .word-pending-mark { display: grid; width: 32px; height: 32px; color: #9a6407; background: var(--accent-pale); border-radius: 50%; place-items: center; }
app-learning-page .completed-word { background: color-mix(in srgb, var(--brand-pale) 58%, white); }
app-learning-page .word-column-empty { display: flex; min-height: 150px; padding: 24px; align-items: center; justify-content: center; color: var(--ink-faint); flex-direction: column; gap: 8px; }

@media (hover: hover) { app-study-records-page .ai-reading-cta:not(:disabled):hover { filter: brightness(1.04); transform: translateY(-1px); } }
@media (prefers-reduced-motion: reduce) { app-study-records-page .ai-reading-cta { transition: none; } }
@media (max-width: 360px) { app-study-records-page .ai-reading-feature { margin-inline: 10px; } app-study-records-page .ai-reading-copy { width: 58%; padding-left: 14px; } app-study-records-page .ai-reading-copy h2 { font-size: 21px; } app-study-records-page .ai-reading-copy p { width: 160px; } app-study-records-page .ai-reading-cta { padding-inline: 9px; } }
@media (min-width: 500px) { app-study-records-page .ai-reading-copy { width: 44%; max-width: 334px; } app-study-records-page .ai-reading-copy p { width: 230px; } }

@media (max-width: 360px) {
  :root { --page-gutter: 10px; }
}

.mobile-pagination{display:flex;align-items:center;justify-content:center;gap:16px;padding:20px;flex-wrap:wrap}.mobile-pagination button{border:1px solid #dce6e2;border-radius:10px;background:#fff;color:#18745d;padding:10px 16px;font:inherit;cursor:pointer}.mobile-pagination button:disabled{opacity:.45;cursor:default}

/* Keep the generated dropdown trigger aligned with the fee filter's calendar icon. */
body app-study-records-page .fee-month-select > button.xs-dropdown-trigger {
  min-height: 48px;
  height: auto;
  padding: 10px 16px 10px 40px;
  font-size: 16px;
  border-radius: 10px;
}
body app-study-records-page .fee-month-select > .fee-select-chevron { display: none; }

/* Keep the full meaning readable in the end-of-lesson assessment. */
app-learning-page .review-list .word-audio.assessment-word small { white-space: normal; overflow-wrap: anywhere; }

app-study-records-page .record-number, app-course-center-page .record-number { display: inline-flex; min-width: 28px; min-height: 28px; align-items: center; justify-content: center; padding: 2px 5px; color: var(--brand-strong); background: var(--brand-pale); border-radius: 7px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
app-course-center-page .record-time { display: flex; align-items: flex-start; flex-direction: column; gap: 5px; }