:root {
  color-scheme: light;
  --xhy-green: #2f6f5e;
  --xhy-green-deep: #17483d;
  --xhy-green-dark: #0f2b25;
  --xhy-green-soft: #e8f0ec;
  --xhy-warm-white: #f7f8f5;
  --xhy-paper-white: #eef2ee;
  --xhy-gold: #c6a76a;
  --xhy-cinnabar: #b84a3a;
  --xhy-bg: #f7f8f5;
  --xhy-bg-side: #eef2ee;
  --xhy-surface: #fffefa;
  --xhy-surface-strong: #ffffff;
  --xhy-ink: #17483d;
  --xhy-body: #1d1d1f;
  --xhy-muted: #6f7b76;
  --xhy-faint: #a9b2ad;
  --xhy-line: #dfe6e1;
  --xhy-line-strong: #cbd8d1;
  --xhy-shadow: 0 16px 42px rgba(47, 111, 94, 0.08);
  --xhy-shadow-soft: 0 8px 24px rgba(47, 111, 94, 0.06);
  --xhy-radius: 8px;
  --xhy-radius-sm: 6px;
  --xhy-radius-pill: 999px;
  --xhy-font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --xhy-font-song: "Songti SC", "STSongti-SC-Regular", "STSongti-SC-Bold", "STSong", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;
  --xhy-app-font: var(--xhy-font-sans);
  --xhy-font-display: var(--xhy-app-font);
  --xhy-font-body: var(--xhy-app-font);
  --xhy-font-ui: var(--xhy-app-font);
  --xhy-font-number: var(--xhy-app-font);
  --ink: var(--xhy-ink);
  --muted: var(--xhy-muted);
  --line: var(--xhy-line);
  --paper: var(--xhy-surface);
  --wash: var(--xhy-bg);
  --wash-deep: var(--xhy-paper-white);
  --accent: var(--xhy-green);
  --accent-strong: var(--xhy-green-deep);
  --accent-dark: var(--xhy-green-dark);
  --gold: var(--xhy-gold);
  --danger: var(--xhy-cinnabar);
}

/* xhy-selected-readable-v2: final selected-state readability guard. */
body :where(
  button.active,
  button[aria-pressed="true"],
  a.active,
  [role="button"].active,
  [aria-current="page"],
  .tab.active,
  .subtab.active,
  .chip.active,
  .tag.active,
  .pill.active,
  .mode-tab.active,
  .dashboard-tab.active,
  .selected,
  .is-active
) {
  border-color: rgba(47, 111, 94, 0.38) !important;
  background: #e8f0ec !important;
  color: #17483d !important;
  -webkit-text-fill-color: #17483d !important;
  text-shadow: none !important;
}

body :where(
  button.active,
  button[aria-pressed="true"],
  a.active,
  [role="button"].active,
  [aria-current="page"],
  .tab.active,
  .subtab.active,
  .chip.active,
  .tag.active,
  .pill.active,
  .mode-tab.active,
  .dashboard-tab.active,
  .selected,
  .is-active
) * {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  text-shadow: none !important;
}

:where(button, a, [role="button"], .tab, .subtab, .chip, .tag, .pill) {
  -webkit-tap-highlight-color: rgba(47, 111, 94, 0.12);
}

:where(button.active, a.active, [aria-current="page"], .tab.active, .subtab.active, .chip.active, .tag.active, .pill.active, .selected, .is-active) {
  text-shadow: none;
}

:where(
  button.active,
  button[aria-pressed="true"],
  .tab.active,
  .subtab.active,
  .chip.active,
  .pill.active,
  .mode-tab.active,
  .dashboard-tab.active,
  .lesson-chip.active,
  .term-chip.active,
  .workspace-tabs .subtab.active
) {
  background: #e8f0ec !important;
  border-color: rgba(47, 111, 94, 0.38) !important;
  color: #17483d !important;
  -webkit-text-fill-color: #17483d !important;
  box-shadow: inset 0 0 0 1px rgba(47, 111, 94, 0.1) !important;
}

:where(
  button.active,
  button[aria-pressed="true"],
  .tab.active,
  .subtab.active,
  .chip.active,
  .pill.active,
  .mode-tab.active,
  .dashboard-tab.active,
  .lesson-chip.active,
  .term-chip.active,
  .workspace-tabs .subtab.active
) * {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

:where(button.active, a.active, .tab.active, .subtab.active, .chip.active, .tag.active, .pill.active) *,
:where(button[aria-current="page"], a[aria-current="page"]) * {
  text-shadow: none;
}

:where(button.active, a.active, .tab.active, .subtab.active, .chip.active, .tag.active, .pill.active):where(:active, :focus-visible),
:where(button[aria-current="page"], a[aria-current="page"]):where(:active, :focus-visible) {
  filter: brightness(1.02);
}


/* 2026-07-04: single light theme contract. Night/system theme switching is retired. */
[data-theme-toggle],
.theme-toggle {
  display: none !important;
}

@media (max-width: 680px) {
  :root {
    --xhy-mobile-font: var(--xhy-font-ui);
  }

  body.admin-page,
  body.parent-center-page,
  .growth-page,
  .page {
    font-family: var(--xhy-mobile-font) !important;
    letter-spacing: 0 !important;
    font-variant-east-asian: normal;
    font-synthesis-weight: none;
  }

  body.admin-page h1,
  body.admin-page h2,
  body.admin-page h3,
  body.admin-page h4,
  body.admin-page h5,
  body.parent-center-page h1,
  body.parent-center-page h2,
  body.parent-center-page h3,
  body.parent-center-page h4,
  body.parent-center-page h5,
  .growth-page h1,
  .growth-page h2,
  .growth-page h3,
  .growth-page h4,
  .growth-page h5,
  .page h1,
  .page h2,
  .page h3,
  .page h4,
  .page h5 {
    font-weight: 700 !important;
  }
}

:root[data-theme="dark"] {
  --xhy-green: #6da694;
  --xhy-green-deep: #ddebe6;
  --xhy-green-dark: #9cc9ba;
  --xhy-green-soft: #22372f;
  --xhy-warm-white: #101714;
  --xhy-paper-white: #16211d;
  --xhy-gold: #d3b879;
  --xhy-bg: #101714;
  --xhy-bg-side: #0c120f;
  --xhy-surface: #16211d;
  --xhy-surface-strong: #1c2a25;
  --xhy-ink: #e9f1ed;
  --xhy-body: #e6e3da;
  --xhy-muted: #aebab4;
  --xhy-faint: #6f8178;
  --xhy-line: #3d5047;
  --xhy-line-strong: #5d7469;
  --xhy-shadow: 0 18px 48px rgba(0, 0, 0, 0.26);
  --xhy-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --xhy-green: #6da694;
    --xhy-green-deep: #ddebe6;
    --xhy-green-dark: #9cc9ba;
    --xhy-green-soft: #22372f;
    --xhy-warm-white: #101714;
    --xhy-paper-white: #16211d;
    --xhy-gold: #d3b879;
    --xhy-bg: #101714;
    --xhy-bg-side: #0c120f;
    --xhy-surface: #16211d;
    --xhy-surface-strong: #1c2a25;
    --xhy-ink: #e9f1ed;
    --xhy-body: #e6e3da;
    --xhy-muted: #aebab4;
    --xhy-faint: #6f8178;
    --xhy-line: #3d5047;
    --xhy-line-strong: #5d7469;
    --xhy-shadow: 0 18px 48px rgba(0, 0, 0, 0.26);
    --xhy-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.2);
  }
}

:root[data-theme="dark"] body.parent-center-page {
  --parent-card-bg: #f7f1e7;
  --parent-card-bg-strong: #fffaf2;
  --parent-card-ink: #173f35;
  --parent-card-muted: #52635d;
  --parent-card-faint: #6a7b75;
  --parent-card-line: #d6c29f;
  --parent-card-gold: #b88f45;
  --parent-dark-panel: #111c18;
  --parent-dark-panel-strong: #16241f;
  --parent-dark-line: rgba(211, 184, 121, 0.32);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.parent-center-page {
    --parent-card-bg: #f7f1e7;
    --parent-card-bg-strong: #fffaf2;
    --parent-card-ink: #173f35;
    --parent-card-muted: #52635d;
    --parent-card-faint: #6a7b75;
    --parent-card-line: #d6c29f;
    --parent-card-gold: #b88f45;
    --parent-dark-panel: #111c18;
    --parent-dark-panel-strong: #16241f;
    --parent-dark-line: rgba(211, 184, 121, 0.32);
  }
}

:root[data-theme="dark"] body.parent-center-page {
  background:
    linear-gradient(180deg, #0f1714, #121c18 54%, #101714);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.parent-center-page {
    background:
      linear-gradient(180deg, #0f1714, #121c18 54%, #101714);
  }
}

html {
  background: var(--xhy-bg);
}

body {
  font-family: var(--xhy-font-body);
  color: var(--xhy-ink);
  background:
    linear-gradient(90deg, var(--xhy-bg-side) 0 72px, transparent 72px calc(100% - 72px), var(--xhy-bg-side) calc(100% - 72px)),
    linear-gradient(180deg, var(--xhy-bg), var(--xhy-paper-white));
}

.xhy-site-footer {
  width: min(1180px, calc(100% - 32px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 10px auto 20px;
  color: color-mix(in srgb, var(--xhy-muted) 88%, transparent);
  font-family: var(--xhy-font-ui);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.xhy-site-brandline {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  color: color-mix(in srgb, var(--xhy-muted) 92%, transparent);
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
}

.xhy-site-brandline strong {
  color: color-mix(in srgb, var(--xhy-teal) 86%, var(--xhy-muted));
  font-weight: 800;
}

.xhy-site-brandline span {
  font-weight: 400;
}

.xhy-site-icp {
  line-height: 1.5;
}

@media print {
  .xhy-site-footer {
    display: none !important;
  }
}

body.parent-center-page .brand-row {
  position: relative;
  padding-top: 38px;
}

body.parent-center-page {
  --parent-card-bg: #fffdf8;
  --parent-card-bg-strong: #ffffff;
  --parent-card-ink: #173f35;
  --parent-card-muted: #5f6d67;
  --parent-card-faint: #74837d;
  --parent-card-line: #dfd0ba;
  --parent-card-gold: #b88f45;
  --parent-dark-panel: var(--xhy-surface);
  --parent-dark-panel-strong: var(--xhy-surface-strong);
  --parent-dark-line: var(--xhy-line);
  background:
    linear-gradient(180deg, var(--xhy-bg), var(--xhy-paper-white));
  font-family: var(--xhy-font-body);
  -webkit-font-smoothing: antialiased;
}

body.parent-center-page .query-panel::before,
body.parent-center-page .portal-section::before {
  display: none;
}

body.parent-center-page .query-panel,
body.parent-center-page .portal-section {
  background: var(--parent-dark-panel);
  border-color: color-mix(in srgb, var(--parent-dark-line) 62%, transparent);
  box-shadow: 0 10px 26px rgba(47, 111, 94, 0.055);
}

body.parent-center-page .theme-toggle {
  position: absolute;
  top: 0;
  right: 0;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--xhy-line);
  border-radius: var(--xhy-radius-pill);
  background: var(--xhy-surface-strong);
  color: var(--xhy-green-deep);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
}

body.parent-center-page .theme-toggle:not(:disabled):hover,
body.parent-center-page .theme-toggle:not(:disabled):focus-visible {
  border-color: var(--xhy-green);
  background: var(--xhy-green-soft);
  color: var(--xhy-green-deep);
}

body.parent-center-page .summary-grid div,
body.parent-center-page .summary-strip,
body.parent-center-page .dashboard-student-card,
body.parent-center-page .content-item,
body.parent-center-page .content-group,
body.parent-center-page .content-fold,
body.parent-center-page .dashboard-meta div,
body.parent-center-page .parent-bind-prompt dl {
  border-color: color-mix(in srgb, var(--parent-card-line) 58%, transparent);
  background: var(--parent-card-bg);
  color: var(--parent-card-ink);
}

body.parent-center-page .dashboard-student-card,
body.parent-center-page .content-item {
  border-width: 1px;
  border-left-width: 1px;
  box-shadow: none;
}

body.parent-center-page input,
body.parent-center-page select,
body.parent-center-page textarea {
  border-color: color-mix(in srgb, var(--parent-card-line) 60%, transparent);
  box-shadow: none;
  font-family: var(--xhy-font-ui);
}

body.parent-center-page button,
body.parent-center-page label,
body.parent-center-page p,
body.parent-center-page span,
body.parent-center-page dt,
body.parent-center-page dd {
  font-family: var(--xhy-font-ui);
}

body.parent-center-page .summary-grid strong,
body.parent-center-page .summary-strip strong,
body.parent-center-page .dashboard-student-card h3,
body.parent-center-page .dashboard-student-card h4,
body.parent-center-page .dashboard-balance,
body.parent-center-page .dashboard-meta dd,
body.parent-center-page .timeline-item strong,
body.parent-center-page .content-item strong,
body.parent-center-page .content-group h4,
body.parent-center-page .content-fold summary {
  color: var(--parent-card-ink);
  -webkit-text-fill-color: var(--parent-card-ink);
}

body.parent-center-page h1,
body.parent-center-page .dashboard-head h2,
body.parent-center-page .dashboard-block h3,
body.parent-center-page .dashboard-student-card h3,
body.parent-center-page .dashboard-student-card h4,
body.parent-center-page .content-group h4 {
  font-family: var(--xhy-font-display) !important;
  font-weight: 700;
  letter-spacing: 0;
}

body.parent-center-page h1,
body.parent-center-page .dashboard-head h2,
body.parent-center-page .dashboard-block > h3 {
  color: var(--xhy-green-deep);
  -webkit-text-fill-color: var(--xhy-green-deep);
}

body.parent-center-page .summary-grid strong,
body.parent-center-page .dashboard-balance,
body.parent-center-page .dashboard-meta dd,
body.parent-center-page .timeline-balance b {
  font-family: var(--xhy-font-number) !important;
  font-weight: 700;
  letter-spacing: 0;
}

body.parent-center-page .summary-grid span,
body.parent-center-page .summary-strip span,
body.parent-center-page .dashboard-muted,
body.parent-center-page .dashboard-student-card p,
body.parent-center-page .timeline-item p,
body.parent-center-page .timeline-item span,
body.parent-center-page .content-item span,
body.parent-center-page .content-group-head p,
body.parent-center-page .dashboard-meta dt,
body.parent-center-page .dashboard-balance span {
  color: var(--parent-card-muted);
  -webkit-text-fill-color: var(--parent-card-muted);
}

body.parent-center-page .dashboard-eyebrow,
body.parent-center-page .timeline-balance b,
body.parent-center-page .timeline-item.is-recharge .timeline-balance b {
  color: var(--parent-card-gold);
  -webkit-text-fill-color: var(--parent-card-gold);
}

body.parent-center-page .timeline-item {
  border-top-color: rgba(198, 167, 106, 0.3);
}

body.parent-center-page .content-group-kicker,
body.parent-center-page .content-type-badge {
  background: rgba(47, 111, 94, 0.1);
  color: var(--parent-card-ink);
}

body.parent-center-page .content-group-count {
  background: rgba(239, 231, 219, 0.78);
  color: var(--parent-card-muted);
}

body.parent-center-page .dashboard-tabs {
  gap: 10px;
  margin-bottom: 26px;
  padding: 10px;
  border-color: color-mix(in srgb, var(--xhy-gold) 30%, transparent);
  background: color-mix(in srgb, var(--xhy-warm-white) 72%, #fff);
}

body.parent-center-page .dashboard-tab {
  border: 1px solid color-mix(in srgb, var(--xhy-gold) 24%, transparent);
  background: var(--parent-card-bg-strong);
  color: var(--parent-card-ink);
  -webkit-text-fill-color: var(--parent-card-ink);
  font-size: 13px;
}

body.parent-center-page .dashboard-tab.active {
  border-color: var(--xhy-green);
  background: var(--xhy-green);
  color: #fff;
  -webkit-text-fill-color: #fff;
}

body.parent-center-page .dashboard-balance-note {
  border-color: color-mix(in srgb, var(--parent-card-line) 48%, transparent);
  background: color-mix(in srgb, var(--xhy-warm-white) 48%, transparent);
  color: var(--parent-card-muted);
  -webkit-text-fill-color: var(--parent-card-muted);
}

@media (max-width: 520px) {
  body.parent-center-page {
    overflow-x: hidden;
  }

  body.parent-center-page .page-shell {
    padding: 18px 14px;
  }

  body.parent-center-page .query-panel {
    padding: 20px 16px;
  }

  body.parent-center-page .portal-section {
    padding: 16px;
  }

  body.parent-center-page .page-shell,
  body.parent-center-page .query-panel,
  body.parent-center-page .portal-section,
  body.parent-center-page .parent-dashboard,
  body.parent-center-page .dashboard-student-card {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body.parent-center-page .code-input-row,
  body.parent-center-page .parent-bind-actions,
  body.parent-center-page .dashboard-head,
  body.parent-center-page .dashboard-card-head,
  body.parent-center-page .dashboard-meta,
  body.parent-center-page .summary-grid,
  body.parent-center-page .timeline-item,
  body.parent-center-page .content-item {
    grid-template-columns: 1fr !important;
    display: grid;
  }

  body.parent-center-page input,
  body.parent-center-page textarea,
  body.parent-center-page button,
  body.parent-center-page .code-input-row button,
  body.parent-center-page .parent-bind-actions .secondary {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
  }

  body.parent-center-page .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  body.parent-center-page .summary-grid div {
    padding: 13px 12px;
    border-radius: 8px;
  }

  body.parent-center-page .summary-grid strong {
    font-size: 22px;
  }

  body.parent-center-page .parent-center-panel.is-dashboard > .section-head {
    display: none;
  }

  body.parent-center-page .dashboard-head.dashboard-head-compact {
    grid-template-columns: minmax(0, 1fr) auto !important;
    display: grid;
    align-items: center;
    gap: 10px;
  }

  body.parent-center-page .dashboard-head.dashboard-head-compact button {
    width: auto;
    min-width: 72px !important;
    min-height: 38px;
    padding: 8px 13px;
    font-size: 14px;
  }

  body.parent-center-page .summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    display: grid;
  }

  body.parent-center-page .summary-strip strong {
    font-size: 20px;
  }

  body.parent-center-page .summary-strip span {
    font-size: 11px;
  }

  body.parent-center-page .dashboard-student-card,
  body.parent-center-page .content-item,
  body.parent-center-page .content-group,
  body.parent-center-page .content-fold {
    padding: 15px 14px;
    border-left-width: 2px;
  }

  body.parent-center-page .timeline-balance {
    text-align: left;
  }
}

body.admin-page {
  --admin-panel-bg: var(--xhy-surface);
  --admin-panel-bg-strong: var(--xhy-surface-strong);
  --admin-card-bg: var(--xhy-surface-strong);
  --admin-card-bg-soft: var(--xhy-green-soft);
  --admin-ink: var(--xhy-green-deep);
  --admin-body: var(--xhy-body);
  --admin-muted: var(--xhy-muted);
  --admin-line: color-mix(in srgb, var(--xhy-line) 82%, transparent);
  --admin-gold: var(--xhy-gold);
  background:
    linear-gradient(180deg, var(--xhy-bg), var(--xhy-paper-white));
}

:root[data-theme="dark"] body.admin-page {
  --admin-panel-bg: #121d19;
  --admin-panel-bg-strong: #17241f;
  --admin-card-bg: #192a24;
  --admin-card-bg-soft: #20342c;
  --admin-ink: #f2f8f5;
  --admin-body: #e4eee9;
  --admin-muted: #b9c8c1;
  --admin-line: rgba(211, 184, 121, 0.2);
  --admin-gold: #d9bf7d;
  background:
    linear-gradient(180deg, #0f1714, #121d19 52%, #0f1714);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.admin-page {
    --admin-panel-bg: #121d19;
    --admin-panel-bg-strong: #17241f;
    --admin-card-bg: #192a24;
    --admin-card-bg-soft: #20342c;
    --admin-ink: #f2f8f5;
    --admin-body: #e4eee9;
    --admin-muted: #b9c8c1;
    --admin-line: rgba(211, 184, 121, 0.2);
    --admin-gold: #d9bf7d;
    background:
      linear-gradient(180deg, #0f1714, #121d19 52%, #0f1714);
  }
}

body.admin-page .admin-app,
body.admin-page .topbar,
body.admin-page .teacher-workbench,
body.admin-page .panel,
body.admin-page .work-panel,
body.admin-page .growth-filter-panel,
body.admin-page .classroom-filter-panel,
body.admin-page .growth-edit-panel,
body.admin-page .classroom-edit-panel,
body.admin-page .growth-preview-panel,
body.admin-page .classroom-preview-panel,
body.admin-page .growth-history-panel,
body.admin-page .classroom-history-panel,
body.admin-page .record-card,
body.admin-page .student-quick-view,
body.admin-page .student-record-sections,
body.admin-page .quick-section,
body.admin-page .quick-card-group,
body.admin-page .ledger-selected-summary,
body.admin-page .ledger-more-panel,
body.admin-page .backup-panel,
body.admin-page .account-panel,
body.admin-page .account-admin-panel,
body.admin-page .followup-panel,
body.admin-page .handoff-panel {
  border-color: var(--admin-line);
  background: var(--admin-panel-bg);
  color: var(--admin-body);
  box-shadow: var(--xhy-shadow-soft);
}

body.admin-page .panel::before,
body.admin-page .admin-app::before,
body.admin-page .growth-card::before,
body.admin-page .card-shell::before {
  display: none;
}

body.admin-page .teacher-quick-card,
body.admin-page .quick-card-item,
body.admin-page .quick-grid > div,
body.admin-page .growth-action-card,
body.admin-page .growth-upload-field,
body.admin-page .classroom-section,
body.admin-page .classroom-template-actions,
body.admin-page .ledger-teacher-button,
body.admin-page .audit-summary-card,
body.admin-page .class-summary,
body.admin-page .growth-mode-note,
body.admin-page .growth-selected-photo,
body.admin-page .growth-image-empty,
body.admin-page .growth-reject-box,
body.admin-page .growth-delete-box,
body.admin-page .content-fold,
body.admin-page .date-shortcuts button,
body.admin-page .classroom-tag span,
body.admin-page .tag,
body.admin-page .info-band span,
body.admin-page .role-pill,
body.admin-page .status-badge,
body.admin-page .teacher-count-pill {
  border-color: var(--admin-line);
  background: var(--admin-card-bg);
  color: var(--admin-body);
  box-shadow: none;
}

body.admin-page h1,
body.admin-page h2,
body.admin-page h3,
body.admin-page h4,
body.admin-page h5,
body.admin-page label,
body.admin-page .topbar h1,
body.admin-page .teacher-workbench h2,
body.admin-page .teacher-quick-card strong,
body.admin-page .record-head h3,
body.admin-page .record-card strong,
body.admin-page .quick-card-item strong,
body.admin-page .quick-grid strong,
body.admin-page .quick-section h4,
body.admin-page .ledger-selected-summary strong,
body.admin-page .ledger-teacher-head strong,
body.admin-page .classroom-section h3,
body.admin-page .growth-head h2,
body.admin-page .growth-editor-head h2 {
  color: var(--admin-ink);
  -webkit-text-fill-color: var(--admin-ink);
}

body.admin-page h1,
body.admin-page h2,
body.admin-page h3,
body.admin-page .topbar h1,
body.admin-page .teacher-workbench h2,
body.admin-page .record-head h3,
body.admin-page .quick-section h4,
body.admin-page .classroom-section h3,
body.admin-page .growth-head h2,
body.admin-page .growth-editor-head h2 {
  font-family: var(--xhy-font-display);
  font-weight: 700;
  letter-spacing: 0;
}

body.admin-page label,
body.admin-page input,
body.admin-page select,
body.admin-page textarea,
body.admin-page button,
body.admin-page .tab,
body.admin-page .subtab,
body.admin-page .hint,
body.admin-page .meta,
body.admin-page .status {
  font-family: var(--xhy-font-ui);
}

body.admin-page .teacher-count-pill,
body.admin-page .quick-balance,
body.admin-page .balance-number,
body.admin-page .class-balance-number,
body.admin-page .audit-summary-card strong {
  font-family: var(--xhy-font-number);
  font-weight: 700;
}

body.admin-page,
body.admin-page *,
body.admin-page *::before,
body.admin-page *::after,
body.parent-center-page,
body.parent-center-page *,
body.parent-center-page *::before,
body.parent-center-page *::after {
  font-family: var(--xhy-app-font) !important;
  letter-spacing: 0 !important;
}

body.admin-page h1,
body.admin-page h2,
body.admin-page h3,
body.admin-page h4,
body.admin-page h5,
body.admin-page strong,
body.admin-page b,
body.admin-page label,
body.admin-page button,
body.admin-page input,
body.admin-page select,
body.admin-page textarea,
body.admin-page .tab,
body.admin-page .subtab,
body.admin-page .teacher-count-pill,
body.admin-page .quick-balance,
body.admin-page .balance-number,
body.admin-page .class-balance-number,
body.admin-page .status-badge,
body.parent-center-page h1,
body.parent-center-page h2,
body.parent-center-page h3,
body.parent-center-page h4,
body.parent-center-page h5,
body.parent-center-page strong,
body.parent-center-page b,
body.parent-center-page label,
body.parent-center-page button,
body.parent-center-page input,
body.parent-center-page select,
body.parent-center-page textarea,
body.parent-center-page .summary-grid strong,
body.parent-center-page .dashboard-balance,
body.parent-center-page .timeline-balance b {
  font-family: var(--xhy-app-font) !important;
  letter-spacing: 0 !important;
}

body.admin-page p,
body.admin-page .hint,
body.admin-page .meta,
body.admin-page .record-card .meta,
body.admin-page .teacher-quick-card span,
body.admin-page .quick-grid span,
body.admin-page .quick-card-item p,
body.admin-page .quick-card-item em,
body.admin-page .quick-card-group-head p,
body.admin-page .ledger-teacher-button span,
body.admin-page .section-head p,
body.admin-page .growth-mode-note,
body.admin-page .growth-class-help,
body.admin-page .status,
body.admin-page .autosave-status,
body.admin-page .growth-photo-status,
body.admin-page .bulk-hint {
  color: var(--admin-muted);
  -webkit-text-fill-color: var(--admin-muted);
}

body.admin-page .eyebrow,
body.admin-page .teacher-count-pill,
body.admin-page .quick-balance,
body.admin-page .balance-number,
body.admin-page .class-balance-number,
body.admin-page .audit-summary-card strong {
  color: var(--admin-gold);
  -webkit-text-fill-color: var(--admin-gold);
}

body.admin-page input,
body.admin-page select,
body.admin-page textarea {
  border-color: var(--admin-line);
  background: var(--admin-panel-bg-strong);
  color: var(--admin-body);
  -webkit-text-fill-color: var(--admin-body);
}

body.admin-page input::placeholder,
body.admin-page textarea::placeholder {
  color: color-mix(in srgb, var(--admin-muted) 72%, transparent);
  -webkit-text-fill-color: color-mix(in srgb, var(--admin-muted) 72%, transparent);
}

body.admin-page button.secondary,
body.admin-page .logout-button,
body.admin-page .secondary-action {
  border-color: var(--admin-line);
  background: var(--admin-card-bg);
  color: var(--admin-ink);
}

body.admin-page .date-shortcuts button:hover,
body.admin-page button.secondary:not(:disabled):hover,
body.admin-page .logout-button:not(:disabled):hover,
body.admin-page .secondary-action:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--xhy-green) 55%, var(--admin-line));
  background: var(--admin-card-bg-soft);
  color: var(--admin-ink);
}

body.admin-page .growth-filter-panel,
body.admin-page .classroom-filter-panel,
body.admin-page .growth-class-controls,
body.admin-page .classroom-class-controls,
body.admin-page .classroom-class-action-row,
body.admin-page .growth-basic,
body.admin-page .classroom-basic,
body.admin-page .toolbar,
body.admin-page .manage-toolbar,
body.admin-page .batch-controls,
body.admin-page .recharge-card-actions,
body.admin-page .roster-row,
body.admin-page .change-row,
body.admin-page .handoff-compose,
body.admin-page .handoff-teacher-picks,
body.admin-page .classroom-editor-layout,
body.admin-page .growth-editor-layout,
body.admin-page .growth-action-grid,
body.admin-page .classroom-photo-grid {
  min-width: 0;
  max-width: 100%;
}

body.admin-page .growth-filter-panel *,
body.admin-page .classroom-filter-panel *,
body.admin-page .growth-class-controls *,
body.admin-page .classroom-class-controls *,
body.admin-page .classroom-class-action-row *,
body.admin-page .growth-basic *,
body.admin-page .classroom-basic *,
body.admin-page .toolbar *,
body.admin-page .manage-toolbar *,
body.admin-page .batch-controls *,
body.admin-page .recharge-card-actions *,
body.admin-page .roster-row *,
body.admin-page .change-row *,
body.admin-page .handoff-compose *,
body.admin-page .handoff-teacher-picks * {
  min-width: 0;
}

body.admin-page .manage-toolbar > button {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
}

body.admin-page .growth-class-help,
body.admin-page .portal-note,
body.admin-page .bulk-hint,
body.admin-page .hint,
body.admin-page .meta,
body.admin-page .record-card,
body.admin-page .quick-card-item,
body.admin-page .teacher-quick-card {
  overflow-wrap: anywhere;
}

body.admin-page .roster-row,
body.admin-page .change-row,
body.admin-page .followup-compose,
body.admin-page .handoff-compose {
  border-color: var(--admin-line);
  background: var(--admin-card-bg);
  color: var(--admin-body);
}

body.admin-page .roster-row.header,
body.admin-page .change-row.header {
  background: var(--admin-card-bg-soft);
  color: var(--admin-muted);
}

@media (max-width: 760px) {
  body.admin-page {
    overflow-x: hidden;
  }

  body.admin-page .admin-shell {
    width: 100%;
    max-width: 100%;
    padding: 10px;
    overflow-x: hidden;
  }

  body.admin-page .admin-app,
  body.admin-page .teacher-workbench,
  body.admin-page .view,
  body.admin-page .panel,
  body.admin-page .work-panel,
  body.admin-page .growth-panel,
  body.admin-page .growth-editor,
  body.admin-page .growth-history-panel,
  body.admin-page .classroom-panel,
  body.admin-page .classroom-editor,
  body.admin-page .classroom-history-panel {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body.admin-page .growth-toolbar,
  body.admin-page .toolbar,
  body.admin-page .manage-toolbar,
  body.admin-page .batch-controls,
  body.admin-page .growth-basic,
  body.admin-page .growth-class-controls,
  body.admin-page .classroom-basic,
  body.admin-page .classroom-class-controls,
  body.admin-page .classroom-class-action-row,
  body.admin-page .growth-editor-layout,
  body.admin-page .classroom-editor-layout,
  body.admin-page .growth-action-grid,
  body.admin-page .growth-photo-row,
  body.admin-page .classroom-photo-grid,
  body.admin-page .classroom-template-actions,
  body.admin-page .recharge-card-actions,
  body.admin-page .roster-row,
  body.admin-page .change-row,
  body.admin-page .followup-compose,
  body.admin-page .handoff-compose,
  body.admin-page .handoff-panel,
  body.admin-page .handoff-teacher-picks,
  body.admin-page .ledger-selected-summary,
  body.admin-page .ledger-teacher-list,
  body.admin-page .quick-grid,
  body.admin-page .quick-card-group-head,
  body.admin-page .quick-card-item {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  body.admin-page input,
  body.admin-page select,
  body.admin-page textarea,
  body.admin-page button,
  body.admin-page label,
  body.admin-page .date-picker,
  body.admin-page .native-date-input,
  body.admin-page .growth-upload-field,
  body.admin-page .growth-photo-label,
  body.admin-page .growth-upload-button,
  body.admin-page .classroom-class-action-row button,
  body.admin-page .classroom-actions button,
  body.admin-page .form-actions button,
  body.admin-page .batch-actions button,
  body.admin-page .card-actions button {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
  }

  body.admin-page .roster-row,
  body.admin-page .change-row {
    gap: 6px;
    padding: 12px;
  }

  body.admin-page .roster-row.header,
  body.admin-page .change-row.header {
    display: none;
  }

  body.admin-page .date-shortcuts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body.admin-page .date-shortcuts button {
    min-height: 38px;
    padding: 8px 8px;
  }

  body.admin-page .growth-class-help,
  body.admin-page .portal-note,
  body.admin-page .bulk-hint {
    padding: 12px;
    font-size: 13px;
    line-height: 1.55;
  }
}

.growth-page,
.page {
  min-width: 0;
}

.growth-page .growth-card,
.page .card-shell {
  color: var(--xhy-body);
}

.growth-page .growth-card::before,
.page .card-shell::before {
  opacity: 0.55;
}

.growth-page .growth-card h1,
.growth-page .growth-card h2,
.growth-page .growth-card h3,
.growth-page .growth-card h4,
.page .card-shell h1,
.page .card-shell h2,
.page .card-shell h3 {
  color: var(--xhy-green-deep);
  -webkit-text-fill-color: var(--xhy-green-deep);
}

.growth-page .growth-card p,
.growth-page .growth-card span,
.growth-page .growth-card li,
.page .card-shell p,
.page .card-shell span,
.page .card-shell li,
.page .status {
  color: var(--xhy-muted);
  -webkit-text-fill-color: var(--xhy-muted);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .growth-page,
  :root:not([data-theme="light"]) .page {
    background:
      linear-gradient(180deg, #0f1714, #121d19 52%, #0f1714);
  }

  :root:not([data-theme="light"]) .growth-page .growth-card,
  :root:not([data-theme="light"]) .page .card-shell {
    border-color: rgba(211, 184, 121, 0.2);
    background: #121d19;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
  }

  :root:not([data-theme="light"]) .growth-page .growth-card::before,
  :root:not([data-theme="light"]) .page .card-shell::before {
    opacity: 0;
  }
}

:root[data-theme="dark"] .growth-page,
:root[data-theme="dark"] .page {
  background:
    linear-gradient(180deg, #0f1714, #121d19 52%, #0f1714);
}

:root[data-theme="dark"] .growth-page .growth-card,
:root[data-theme="dark"] .page .card-shell {
  border-color: rgba(211, 184, 121, 0.2);
  background: #121d19;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

:root[data-theme="dark"] .growth-page .growth-card::before,
:root[data-theme="dark"] .page .card-shell::before {
  opacity: 0;
}

@media (max-width: 680px) {
  .growth-page,
  .page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .growth-page .growth-card,
  .page .card-shell,
  .growth-page .report-layout,
  .growth-page .growth-preview-pair,
  .page .info-grid,
  .page .photo-grid,
  .page .card-section {
    max-width: 100%;
    min-width: 0;
  }
}

.panel,
.record-card,
.query-panel,
.portal-section,
.card-shell,
.growth-card,
.action-row,
.report-photo-card,
.section,
.teacher-workbench,
.classroom-section,
.classroom-edit-panel,
.classroom-preview-panel,
.growth-edit-panel,
.growth-preview-panel,
.student-quick-view,
.brand-dialog-card,
.preview-dialog-card,
.image-download-panel {
  border-color: var(--xhy-line);
  background: var(--xhy-surface);
  box-shadow: var(--xhy-shadow);
}

input,
select,
textarea {
  border-color: var(--xhy-line);
  border-radius: var(--xhy-radius-sm);
  color: var(--xhy-body);
  -webkit-text-fill-color: var(--xhy-body);
  background: var(--xhy-surface-strong);
  box-shadow: none;
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--xhy-muted) 62%, transparent);
  -webkit-text-fill-color: color-mix(in srgb, var(--xhy-muted) 62%, transparent);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--xhy-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--xhy-green) 18%, transparent);
}

button,
.download-button,
.video-link,
.image-download-actions .image-share-button,
.image-download-actions .image-open-button {
  border-radius: var(--xhy-radius-sm);
  background: var(--xhy-green);
  color: #fff;
  box-shadow: none;
}

button.secondary,
.logout-button,
.secondary-action,
.image-download-actions button,
.image-download-actions a {
  border-color: var(--xhy-line);
  background: var(--xhy-surface-strong);
  color: var(--xhy-green-deep);
}

button:not(:disabled):hover,
button:not(:disabled):focus-visible {
  background: var(--xhy-green-dark);
  outline: 2px solid color-mix(in srgb, var(--xhy-green) 22%, transparent);
  outline-offset: 2px;
}

button.secondary:not(:disabled):hover,
.logout-button:not(:disabled):hover,
.secondary-action:not(:disabled):hover {
  border-color: var(--xhy-green);
  background: var(--xhy-green-soft);
  color: var(--xhy-green-deep);
}

h1,
h2,
h3,
.topbar h1,
.section-head h2,
.growth-head h2,
.growth-editor-head h2,
.classroom-section h3,
.card h2,
.section h2 {
  color: var(--xhy-green-deep);
  font-family: var(--xhy-font-display);
  font-weight: 700;
  letter-spacing: 0;
}

button,
input,
select,
textarea,
.tab,
.subtab,
.theme-toggle,
.logout-button,
.secondary-action,
.download-button {
  font-family: var(--xhy-font-ui);
}

.summary-grid strong,
.metric strong,
.dashboard-balance,
.balance-number,
.class-balance-number,
.timeline-balance b,
.teacher-count-pill,
.status-badge {
  font-family: var(--xhy-font-number);
}

p,
.hint,
.portal-subtitle,
.section-head p,
.record-card .meta,
.summary-box p,
.teacher-comment p,
.status,
.video-fallback {
  color: var(--xhy-muted);
}

.eyebrow,
.hero p {
  color: var(--xhy-gold);
  letter-spacing: 0.08em;
}

.admin-shell {
  width: min(100%, 1560px);
  padding: 26px 28px 34px;
}

.admin-app {
  border: 1px solid var(--xhy-line);
  background: color-mix(in srgb, var(--xhy-surface) 86%, transparent);
  backdrop-filter: blur(18px);
  box-shadow: var(--xhy-shadow);
}

.admin-app::before,
.query-panel::before,
.growth-card::before {
  border-color: color-mix(in srgb, var(--xhy-gold) 34%, transparent);
}

.topbar {
  position: relative;
  z-index: 1;
  padding: 10px 16px;
  border: 1px solid var(--xhy-line);
  border-radius: var(--xhy-radius);
  background: var(--xhy-surface-strong);
  box-shadow: var(--xhy-shadow-soft);
}

.topbar h1 {
  font-family: var(--xhy-font-display);
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.12;
}

.topbar .eyebrow {
  margin: 0 0 2px;
  color: var(--xhy-green-deep);
  font-size: 13px;
}

.user-box {
  min-height: 34px;
}

#current-user {
  color: var(--xhy-muted);
  font-size: 14px;
}

.theme-toggle {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
}

.tabs,
.subtabs {
  gap: 8px;
}

.tab,
.subtab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--xhy-line);
  background: var(--xhy-surface-strong);
  color: var(--xhy-muted);
  box-shadow: none;
}

.tab.active,
.subtab.active {
  border-color: var(--xhy-green);
  background: var(--xhy-green);
  color: #fff;
}

.teacher-quick-card,
.portal-card,
.record-card,
.quick-card-item,
.student-quick-view,
.dashboard-card,
.parent-bind-prompt dl {
  border-color: var(--xhy-line);
  background: var(--xhy-surface-strong);
  box-shadow: none;
}

.teacher-quick-card strong,
.portal-card strong,
.record-card strong,
.quick-card-item strong,
.dashboard-card strong {
  color: var(--xhy-green-deep);
}

.date-shortcuts button,
.classroom-tag span,
.tag,
.info-band span,
.role-pill,
.status-badge,
.teacher-count-pill {
  border: 1px solid var(--xhy-line);
  background: var(--xhy-green-soft);
  color: var(--xhy-green-deep);
}

.classroom-tag input:checked + span {
  border-color: var(--xhy-green);
  background: var(--xhy-green);
  color: #fff;
}

.growth-photo-status,
.autosave-status,
.bulk-hint,
.portal-note,
.dashboard-empty {
  border: 1px solid color-mix(in srgb, var(--xhy-gold) 42%, transparent);
  border-color: color-mix(in srgb, var(--xhy-gold) 42%, transparent);
  background: color-mix(in srgb, var(--xhy-gold) 12%, var(--xhy-surface));
  color: var(--xhy-green-deep);
}

.classroom-live-preview,
.growth-live-preview {
  border-color: var(--xhy-line);
  background: var(--xhy-surface-strong);
}

.video-section video,
.video-preview {
  background: #050706;
}

.card-shell,
.growth-card {
  overflow: hidden;
}

.growth-page .report-footer,
.page .footer {
  justify-items: center;
  text-align: center;
}

.growth-page .report-footer > span,
.page .footer > span {
  justify-self: center;
  width: 100%;
  text-align: center;
}

.growth-page .report-footer .comment-card-footer-line,
.page .footer .comment-card-footer-line {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  justify-self: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  gap: 0 5px;
  text-align: center;
  line-height: 1.34;
  white-space: normal;
}

.growth-page .report-footer .comment-card-footer-line strong,
.page .footer .comment-card-footer-line strong {
  flex: 0 0 auto;
  width: auto;
  color: var(--xhy-green-deep);
  font-family: var(--xhy-font-body);
  font-weight: 700;
  letter-spacing: 0;
}

.growth-page .report-footer .comment-card-footer-line em,
.page .footer .comment-card-footer-line em {
  flex: 0 0 auto;
  color: var(--xhy-muted);
  font-family: var(--xhy-font-body);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.growth-page .report-footer .footer-separator,
.page .footer .footer-separator {
  flex: 0 0 auto;
  color: var(--xhy-gold);
  font-weight: 600;
}

.image-download-panel {
  text-align: center;
}

.image-download-actions {
  justify-content: center;
}

.query-panel,
.card-shell,
.growth-card,
.panel {
  position: relative;
}

.query-panel::before,
.card-shell::before,
.growth-card::before,
.panel::before {
  border-radius: var(--xhy-radius);
}

.hero,
.report-header {
  border-bottom-color: var(--xhy-line);
}

.brand-logo,
.hero img,
.report-header img,
.logo {
  filter: none;
}

@media (min-width: 1080px) {
  .admin-app {
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    gap: 20px 24px;
    align-items: start;
  }

  .topbar {
    grid-column: 1 / -1;
  }

  .tabs {
    position: sticky;
    top: 18px;
    grid-column: 1;
    grid-row: 2 / span 30;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 180px);
    margin-bottom: 0;
    padding: 22px 16px;
    border-radius: var(--xhy-radius);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--xhy-green-dark) 96%, #000), color-mix(in srgb, var(--xhy-green-dark) 88%, #000)),
      var(--xhy-green-dark);
    box-shadow: var(--xhy-shadow);
  }

  .tabs::before {
    content: "工作台\A ORIENTAL DANCE OPS";
    display: block;
    white-space: pre-line;
    margin: 2px 6px 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid color-mix(in srgb, #ffffff 18%, transparent);
    color: #fff;
    font-family: var(--xhy-font-display);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.18;
  }

  .tabs::after {
    content: "页面刷新恢复：老师、班级、日期、卡片类型和当前草稿。";
    display: block;
    margin: auto 6px 0;
    padding-top: 18px;
    border-top: 1px solid color-mix(in srgb, #ffffff 16%, transparent);
    color: color-mix(in srgb, #ffffff 58%, transparent);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.65;
  }

  .tab {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    justify-content: flex-start;
    border-color: transparent;
    background: transparent;
    border-radius: var(--xhy-radius-sm);
    color: color-mix(in srgb, #ffffff 78%, transparent);
    text-align: left;
  }

  .tab.active {
    background: var(--xhy-green);
    color: #fff;
  }

  .tab:not(.active):hover,
  .tab:not(.active):focus-visible {
    background: color-mix(in srgb, #ffffff 10%, transparent);
    color: #fff;
  }

  .teacher-workbench,
  .view {
    grid-column: 2;
    min-width: 0;
  }

  .teacher-workbench {
    margin-bottom: 16px;
  }

  .view > .panel,
  .teacher-workbench,
  .work-panel,
  .growth-filter-panel,
  .classroom-edit-panel,
  .growth-edit-panel,
  .classroom-preview-panel,
  .growth-preview-panel {
    border-radius: var(--xhy-radius);
  }

  .growth-editor-layout,
  .classroom-editor-layout {
    gap: 18px;
  }

  .classroom-preview-panel,
  .growth-preview-panel {
    position: sticky;
    top: 18px;
  }

  .record-list {
    gap: 12px;
  }

  .record-card {
    padding: 16px 18px;
  }

  .record-head h3 {
    color: var(--xhy-green-deep);
    font-size: 19px;
  }

  .toolbar {
    align-items: end;
  }
}

@media (min-width: 1280px) {
  .growth-class-controls.classroom-class-controls {
    grid-template-columns: minmax(170px, 0.8fr) minmax(260px, 1fr) minmax(220px, 0.9fr) minmax(300px, 1fr);
  }

  .classroom-class-action-row {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }
}

@media (max-width: 720px) {
  body {
    background: var(--xhy-bg);
  }

  .admin-shell,
  .page-shell,
  .growth-page,
  .page {
    padding-left: 12px;
    padding-right: 12px;
  }

  .admin-shell {
    padding-top: 12px;
    padding-bottom: 22px;
  }

  .admin-app {
    padding: 12px;
  }

  .topbar {
    gap: 10px;
    padding: 12px;
  }

  .topbar h1 {
    font-size: 22px;
  }

  .user-box {
    width: 100%;
    justify-content: flex-start;
  }

  .topbar,
  .panel,
  .query-panel,
  .card-shell,
  .growth-card {
    border-radius: 8px;
  }

  .tabs,
  .subtabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .tab,
  .subtab {
    min-height: 46px;
    padding: 10px 8px;
    font-size: 13px;
  }

  .theme-toggle,
  .logout-button {
    min-height: 36px;
  }

  .portal-actions,
  .teacher-quick-grid {
    grid-template-columns: 1fr;
  }

  .growth-photo-status,
  .autosave-status {
    min-height: 42px;
  }
}

@media (max-width: 760px) {
  body.parent-center-page,
  body.admin-page {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  body.parent-center-page h1,
  body.parent-center-page h2,
  body.parent-center-page h3,
  body.parent-center-page h4,
  body.parent-center-page .section-head h2,
  body.parent-center-page .dashboard-head h2,
  body.parent-center-page .dashboard-block > h3,
  body.parent-center-page .content-group h4,
  body.admin-page h1,
  body.admin-page h2,
  body.admin-page h3,
  body.admin-page h4,
  body.admin-page .topbar h1,
  body.admin-page .teacher-workbench h2,
  body.admin-page .record-head h3,
  body.admin-page .quick-section h4,
  body.admin-page .classroom-section h3,
  body.admin-page .growth-head h2,
  body.admin-page .growth-editor-head h2 {
    font-family: var(--xhy-font-display) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.24 !important;
  }

  body.parent-center-page .dashboard-student-card h3,
  body.parent-center-page .dashboard-student-card h4,
  body.parent-center-page .timeline-item strong,
  body.parent-center-page .content-item strong,
  body.parent-center-page .content-fold summary,
  body.admin-page .teacher-quick-card strong,
  body.admin-page .record-card strong,
  body.admin-page .quick-card-item strong,
  body.admin-page .quick-grid strong,
  body.admin-page .ledger-selected-summary strong,
  body.admin-page .ledger-teacher-head strong {
    font-family: var(--xhy-font-ui) !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
    line-height: 1.36 !important;
    font-variant-numeric: tabular-nums;
  }

  body.parent-center-page input,
  body.parent-center-page select,
  body.parent-center-page textarea,
  body.parent-center-page button,
  body.parent-center-page label,
  body.parent-center-page p,
  body.parent-center-page span,
  body.parent-center-page dd,
  body.parent-center-page dt,
  body.admin-page input,
  body.admin-page select,
  body.admin-page textarea,
  body.admin-page button,
  body.admin-page label,
  body.admin-page p,
  body.admin-page span,
  body.admin-page dd,
  body.admin-page dt,
  body.admin-page .tab,
  body.admin-page .subtab,
  body.admin-page .hint,
  body.admin-page .meta,
  body.admin-page .status {
    font-family: var(--xhy-font-ui) !important;
    letter-spacing: 0 !important;
    font-variant-numeric: tabular-nums;
  }

  body.parent-center-page .summary-grid strong,
  body.parent-center-page .dashboard-balance,
  body.parent-center-page .dashboard-meta dd,
  body.parent-center-page .timeline-balance b,
  body.admin-page .teacher-count-pill,
  body.admin-page .quick-balance,
  body.admin-page .balance-number,
  body.admin-page .class-balance-number,
  body.admin-page .audit-summary-card strong,
  body.admin-page .status-badge {
    font-family: var(--xhy-font-number) !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
  }

  body.parent-center-page .query-panel,
  body.parent-center-page .portal-section,
  body.parent-center-page .summary-grid div,
  body.parent-center-page .dashboard-student-card,
  body.parent-center-page .content-item,
  body.parent-center-page .content-group,
  body.parent-center-page .content-fold,
  body.parent-center-page .dashboard-meta div,
  body.parent-center-page .parent-bind-prompt dl {
    border-width: 1px !important;
    border-color: color-mix(in srgb, var(--parent-card-line) 46%, transparent) !important;
    box-shadow: none !important;
  }

  body.parent-center-page .dashboard-student-card,
  body.parent-center-page .content-item {
    border-left-width: 2px !important;
  }

  body.parent-center-page .query-panel,
  body.parent-center-page .portal-section {
    border-color: color-mix(in srgb, var(--parent-dark-line) 42%, transparent) !important;
  }

  body.parent-center-page .page-shell {
    padding: 8px 8px 18px !important;
  }

  body.parent-center-page .query-panel {
    padding: 14px 12px !important;
    border-radius: 8px !important;
  }

  body.parent-center-page .portal-section,
  body.parent-center-page .parent-dashboard {
    padding: 12px !important;
    border-radius: 8px !important;
  }

  body.parent-center-page .brand-row {
    gap: 8px !important;
    margin-bottom: 14px !important;
    padding-top: 32px !important;
  }

  body.parent-center-page .portal-subtitle,
  body.parent-center-page .section-head p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  body.parent-center-page .dashboard-block {
    gap: 18px !important;
    margin-top: 18px !important;
  }

  body.parent-center-page .summary-grid {
    margin-bottom: 14px !important;
  }

  body.parent-center-page .summary-grid div {
    padding: 11px 10px !important;
  }

  body.parent-center-page .dashboard-student-card,
  body.parent-center-page .content-item,
  body.parent-center-page .content-group,
  body.parent-center-page .content-fold {
    padding: 18px 16px !important;
    border-left-width: 1px !important;
  }

  body.parent-center-page .timeline-item,
  body.parent-center-page .content-item {
    gap: 14px !important;
  }

  body.parent-center-page h1,
  body.parent-center-page .section-head h2,
  body.parent-center-page .dashboard-head h2,
  body.parent-center-page .dashboard-block > h3 {
    color: var(--xhy-green-deep) !important;
    -webkit-text-fill-color: var(--xhy-green-deep) !important;
  }
}

@media (max-width: 760px) {
  :root[data-theme="dark"] body.admin-page {
    --admin-panel-bg: #f7f1e7;
    --admin-panel-bg-strong: #fffaf2;
    --admin-card-bg: #fffaf2;
    --admin-card-bg-soft: #edf4ef;
    --admin-ink: #173f35;
    --admin-body: #25463b;
    --admin-muted: #5c7068;
    --admin-line: rgba(198, 167, 106, 0.34);
    --admin-gold: #b88f45;
  }
}

@media (prefers-color-scheme: dark) and (max-width: 760px) {
  :root:not([data-theme="light"]) body.admin-page {
    --admin-panel-bg: #f7f1e7;
    --admin-panel-bg-strong: #fffaf2;
    --admin-card-bg: #fffaf2;
    --admin-card-bg-soft: #edf4ef;
    --admin-ink: #173f35;
    --admin-body: #25463b;
    --admin-muted: #5c7068;
    --admin-line: rgba(198, 167, 106, 0.34);
    --admin-gold: #b88f45;
  }
}

@media (max-width: 760px) {
  body.admin-page .admin-shell {
    padding: 8px 8px 20px !important;
  }

  body.admin-page .admin-app {
    padding: 10px !important;
  }

  body.admin-page .admin-app,
  body.admin-page .topbar,
  body.admin-page .teacher-workbench,
  body.admin-page .panel,
  body.admin-page .work-panel,
  body.admin-page .growth-filter-panel,
  body.admin-page .classroom-filter-panel,
  body.admin-page .growth-edit-panel,
  body.admin-page .classroom-edit-panel,
  body.admin-page .growth-preview-panel,
  body.admin-page .classroom-preview-panel,
  body.admin-page .growth-history-panel,
  body.admin-page .classroom-history-panel,
  body.admin-page .student-record-sections,
  body.admin-page .quick-section,
  body.admin-page .quick-card-group,
  body.admin-page .ledger-selected-summary,
  body.admin-page .ledger-more-panel,
  body.admin-page .backup-panel,
  body.admin-page .account-panel,
  body.admin-page .account-admin-panel,
  body.admin-page .followup-panel,
  body.admin-page .handoff-panel {
    border-width: 1px !important;
    border-color: var(--admin-line) !important;
    border-radius: 8px !important;
    background: var(--admin-panel-bg) !important;
    color: var(--admin-body) !important;
    -webkit-text-fill-color: var(--admin-body) !important;
    box-shadow: none !important;
  }

  body.admin-page .topbar,
  body.admin-page .teacher-workbench,
  body.admin-page .panel,
  body.admin-page .work-panel,
  body.admin-page .growth-filter-panel,
  body.admin-page .classroom-filter-panel,
  body.admin-page .growth-edit-panel,
  body.admin-page .classroom-edit-panel,
  body.admin-page .growth-history-panel,
  body.admin-page .classroom-history-panel,
  body.admin-page .quick-section,
  body.admin-page .quick-card-group,
  body.admin-page .student-record-sections,
  body.admin-page .account-panel,
  body.admin-page .backup-panel,
  body.admin-page .followup-panel,
  body.admin-page .handoff-panel {
    padding: 12px !important;
  }

  body.admin-page .record-card,
  body.admin-page .student-quick-view,
  body.admin-page .teacher-quick-card,
  body.admin-page .quick-card-item,
  body.admin-page .quick-grid > div,
  body.admin-page .growth-action-card,
  body.admin-page .growth-upload-field,
  body.admin-page .classroom-section,
  body.admin-page .classroom-template-actions,
  body.admin-page .ledger-teacher-button,
  body.admin-page .audit-summary-card,
  body.admin-page .class-summary,
  body.admin-page .growth-mode-note,
  body.admin-page .growth-selected-photo,
  body.admin-page .growth-image-empty,
  body.admin-page .growth-reject-box,
  body.admin-page .growth-delete-box,
  body.admin-page .content-fold,
  body.admin-page .date-shortcuts button,
  body.admin-page .classroom-tag span,
  body.admin-page .tag,
  body.admin-page .info-band span,
  body.admin-page .role-pill,
  body.admin-page .status-badge,
  body.admin-page .teacher-count-pill {
    border-width: 1px !important;
    border-left-width: 1px !important;
    border-color: var(--admin-line) !important;
    border-radius: 8px !important;
    background: var(--admin-card-bg) !important;
    color: var(--admin-body) !important;
    -webkit-text-fill-color: var(--admin-body) !important;
    box-shadow: none !important;
  }

  body.admin-page .record-card,
  body.admin-page .student-quick-view,
  body.admin-page .teacher-quick-card,
  body.admin-page .quick-card-item,
  body.admin-page .quick-grid > div,
  body.admin-page .growth-action-card,
  body.admin-page .growth-upload-field,
  body.admin-page .classroom-section,
  body.admin-page .classroom-template-actions,
  body.admin-page .ledger-teacher-button,
  body.admin-page .audit-summary-card,
  body.admin-page .class-summary,
  body.admin-page .growth-mode-note,
  body.admin-page .growth-selected-photo,
  body.admin-page .growth-image-empty,
  body.admin-page .growth-reject-box,
  body.admin-page .growth-delete-box,
  body.admin-page .content-fold {
    padding: 11px 10px !important;
  }

  body.admin-page .tabs,
  body.admin-page .subtabs {
    gap: 6px !important;
    margin-bottom: 12px !important;
  }

  body.admin-page .tab,
  body.admin-page .subtab {
    min-height: 40px !important;
    padding: 8px 7px !important;
  }

  body.admin-page .growth-toolbar,
  body.admin-page .toolbar,
  body.admin-page .manage-toolbar,
  body.admin-page .batch-controls,
  body.admin-page .growth-basic,
  body.admin-page .growth-class-controls,
  body.admin-page .classroom-basic,
  body.admin-page .classroom-class-controls,
  body.admin-page .classroom-class-action-row,
  body.admin-page .growth-editor-layout,
  body.admin-page .classroom-editor-layout,
  body.admin-page .growth-action-grid,
  body.admin-page .classroom-template-actions,
  body.admin-page .recharge-card-actions {
    gap: 10px !important;
  }

  body.admin-page h1,
  body.admin-page h2,
  body.admin-page h3,
  body.admin-page h4,
  body.admin-page h5,
  body.admin-page label,
  body.admin-page .topbar h1,
  body.admin-page .teacher-workbench h2,
  body.admin-page .teacher-quick-card strong,
  body.admin-page .record-head h3,
  body.admin-page .record-card strong,
  body.admin-page .quick-card-item strong,
  body.admin-page .quick-grid strong,
  body.admin-page .quick-section h4,
  body.admin-page .ledger-selected-summary strong,
  body.admin-page .ledger-teacher-head strong,
  body.admin-page .classroom-section h3,
  body.admin-page .growth-head h2,
  body.admin-page .growth-editor-head h2 {
    color: var(--admin-ink) !important;
    -webkit-text-fill-color: var(--admin-ink) !important;
  }

  body.admin-page p,
  body.admin-page .hint,
  body.admin-page .meta,
  body.admin-page .record-card .meta,
  body.admin-page .record-card p,
  body.admin-page .teacher-quick-card span,
  body.admin-page .quick-grid span,
  body.admin-page .quick-card-item p,
  body.admin-page .quick-card-item em,
  body.admin-page .quick-card-group-head p,
  body.admin-page .ledger-teacher-button span,
  body.admin-page .section-head p,
  body.admin-page .growth-mode-note,
  body.admin-page .growth-class-help,
  body.admin-page .status,
  body.admin-page .autosave-status,
  body.admin-page .growth-photo-status,
  body.admin-page .bulk-hint {
    color: var(--admin-muted) !important;
    -webkit-text-fill-color: var(--admin-muted) !important;
  }

  body.admin-page .eyebrow,
  body.admin-page .teacher-count-pill,
  body.admin-page .quick-balance,
  body.admin-page .balance-number,
  body.admin-page .class-balance-number,
  body.admin-page .audit-summary-card strong {
    color: var(--admin-gold) !important;
    -webkit-text-fill-color: var(--admin-gold) !important;
  }

  body.admin-page input,
  body.admin-page select,
  body.admin-page textarea {
    border-width: 1px !important;
    border-color: var(--admin-line) !important;
    background: var(--admin-panel-bg-strong) !important;
    color: var(--admin-body) !important;
    -webkit-text-fill-color: var(--admin-body) !important;
    box-shadow: none !important;
  }

  body.admin-page input::placeholder,
  body.admin-page textarea::placeholder {
    color: color-mix(in srgb, var(--admin-muted) 64%, transparent) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--admin-muted) 64%, transparent) !important;
  }
}

@media (max-width: 680px) {
  body.admin-page,
  body.admin-page *,
  body.parent-center-page,
  body.parent-center-page *,
  .growth-page,
  .growth-page *,
  .page,
  .page * {
    font-family: var(--xhy-mobile-font) !important;
    letter-spacing: 0 !important;
  }

  body.admin-page h1,
  body.admin-page h2,
  body.admin-page h3,
  body.admin-page h4,
  body.admin-page h5,
  body.admin-page .login-panel h1,
  body.admin-page .topbar h1,
  body.admin-page .teacher-workbench h2,
  body.admin-page .record-head h3,
  body.admin-page .quick-section h4,
  body.admin-page .classroom-section h3,
  body.admin-page .growth-head h2,
  body.admin-page .growth-editor-head h2,
  body.parent-center-page h1,
  body.parent-center-page h2,
  body.parent-center-page h3,
  body.parent-center-page h4,
  body.parent-center-page h5,
  .growth-page h1,
  .growth-page h2,
  .growth-page h3,
  .growth-page h4,
  .growth-page h5,
  .page h1,
  .page h2,
  .page h3,
  .page h4,
  .page h5 {
    font-family: var(--xhy-mobile-font) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
  }
}

@media (max-width: 960px) {
  :root {
    --xhy-mobile-font: "PingFang SC", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
    --xhy-font-display: var(--xhy-mobile-font);
    --xhy-font-body: var(--xhy-mobile-font);
    --xhy-font-ui: var(--xhy-mobile-font);
    --xhy-font-number: var(--xhy-mobile-font);
  }

  body.admin-page,
  body.admin-page *,
  body.admin-page *::before,
  body.admin-page *::after,
  body.parent-center-page,
  body.parent-center-page *,
  body.parent-center-page *::before,
  body.parent-center-page *::after,
  .growth-page,
  .growth-page *,
  .growth-page *::before,
  .growth-page *::after,
  .page,
  .page *,
  .page *::before,
  .page *::after {
    font-family: var(--xhy-mobile-font) !important;
    letter-spacing: 0 !important;
    font-variant-east-asian: normal !important;
    font-synthesis-weight: none;
  }

  body.admin-page input::placeholder,
  body.admin-page textarea::placeholder,
  body.parent-center-page input::placeholder,
  body.parent-center-page textarea::placeholder,
  .growth-page input::placeholder,
  .growth-page textarea::placeholder,
  .page input::placeholder,
  .page textarea::placeholder {
    font-family: var(--xhy-mobile-font) !important;
    letter-spacing: 0 !important;
  }

  body.admin-page h1,
  body.admin-page h2,
  body.admin-page h3,
  body.admin-page h4,
  body.admin-page h5,
  body.admin-page strong,
  body.admin-page b,
  body.admin-page label,
  body.admin-page button,
  body.admin-page input,
  body.admin-page select,
  body.admin-page textarea,
  body.admin-page .tab,
  body.admin-page .subtab,
  body.admin-page .status-badge,
  body.admin-page .teacher-count-pill,
  body.admin-page .balance-number,
  body.admin-page .class-balance-number,
  body.parent-center-page h1,
  body.parent-center-page h2,
  body.parent-center-page h3,
  body.parent-center-page h4,
  body.parent-center-page h5,
  body.parent-center-page strong,
  body.parent-center-page b,
  body.parent-center-page label,
  body.parent-center-page button,
  body.parent-center-page input,
  body.parent-center-page select,
  body.parent-center-page textarea,
  body.parent-center-page .summary-grid strong,
  body.parent-center-page .dashboard-balance,
  body.parent-center-page .timeline-balance b,
  .growth-page h1,
  .growth-page h2,
  .growth-page h3,
  .growth-page h4,
  .growth-page h5,
  .growth-page strong,
  .growth-page b,
  .growth-page button,
  .page h1,
  .page h2,
  .page h3,
  .page h4,
  .page h5,
  .page strong,
  .page b,
  .page button {
    font-family: var(--xhy-mobile-font) !important;
    letter-spacing: 0 !important;
  }
}

body.admin-page .workspace-switcher {
  margin: 0 0 16px !important;
  padding: 12px !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--admin-card-bg-soft) 58%, transparent), transparent),
    var(--admin-panel-bg-strong) !important;
  box-shadow: none !important;
}

body.admin-page .workspace-switcher-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

body.admin-page .workspace-switcher-head strong {
  color: var(--admin-ink) !important;
  -webkit-text-fill-color: var(--admin-ink) !important;
  font-family: var(--xhy-app-font) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

body.admin-page .workspace-switcher-head span {
  color: var(--admin-muted) !important;
  -webkit-text-fill-color: var(--admin-muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.admin-page .workspace-tabs {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
}

body.admin-page .workspace-tabs .subtab {
  min-height: 42px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 8px !important;
  background: var(--admin-card-bg) !important;
  color: var(--admin-ink) !important;
  -webkit-text-fill-color: var(--admin-ink) !important;
  box-shadow: none !important;
}

body.admin-page .workspace-tabs .subtab.active {
  border-color: var(--xhy-green) !important;
  background: var(--xhy-green) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.growth-page .summary-box,
.growth-page .teacher-comment,
.growth-page .comment-card-main {
  border-color: color-mix(in srgb, var(--xhy-gold) 32%, transparent) !important;
  background: #f8f2e8 !important;
  color: #183f35 !important;
  -webkit-text-fill-color: #183f35 !important;
}

.growth-page .summary-box strong,
.growth-page .teacher-comment strong,
.growth-page .comment-card-main strong {
  color: #17483d !important;
  -webkit-text-fill-color: #17483d !important;
}

.growth-page .summary-box p,
.growth-page .teacher-comment p,
.growth-page .comment-card-main p {
  color: #4f625b !important;
  -webkit-text-fill-color: #4f625b !important;
}

.growth-page .growth-card .info-band span {
  border-color: color-mix(in srgb, var(--xhy-gold) 34%, transparent) !important;
  background: #f8f2e8 !important;
  color: #17483d !important;
  -webkit-text-fill-color: #17483d !important;
}

.growth-page .growth-card .action-row,
.growth-page .growth-card .report-photo-card {
  background: #fffdf8 !important;
  color: #183f35 !important;
  -webkit-text-fill-color: #183f35 !important;
}

.growth-page .growth-card .action-row h3,
.growth-page .growth-card .report-photo-card h3 {
  color: #17483d !important;
  -webkit-text-fill-color: #17483d !important;
}

.growth-page .growth-card .action-row h3::before,
.growth-page .growth-card .report-photo-card h3::before {
  background: #c6a76a !important;
}

.growth-page .growth-card figcaption,
.growth-page .growth-card .photo-empty {
  color: #5d6d67 !important;
  -webkit-text-fill-color: #5d6d67 !important;
}

.growth-page .report-footer,
.page .footer {
  color: #5d6d67 !important;
  -webkit-text-fill-color: #5d6d67 !important;
}

.growth-page .report-footer .comment-card-footer-line,
.page .footer .comment-card-footer-line {
  justify-content: center !important;
}

body.parent-center-page .content-item a.secondary,
body.parent-center-page .content-item a.secondary:visited,
body.parent-center-page .content-item a.secondary:focus-visible {
  min-width: 104px !important;
  min-height: 38px !important;
  width: auto !important;
  padding: 7px 16px !important;
  border-color: color-mix(in srgb, var(--parent-card-ink) 32%, transparent) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--parent-card-bg-strong) 78%, transparent) !important;
  color: var(--parent-card-ink) !important;
  -webkit-text-fill-color: var(--parent-card-ink) !important;
  font-family: var(--xhy-font-ui) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

body.parent-center-page .content-list {
  gap: 18px;
}

body.parent-center-page .content-group {
  gap: 18px;
}

body.parent-center-page .content-item a.secondary[aria-disabled="true"] {
  border-color: color-mix(in srgb, var(--parent-card-line) 58%, transparent) !important;
  background: color-mix(in srgb, var(--parent-card-bg-strong) 86%, var(--parent-card-bg)) !important;
  color: var(--parent-card-muted) !important;
  -webkit-text-fill-color: var(--parent-card-muted) !important;
}

@media (max-width: 760px) {
  body.admin-page .workspace-switcher {
    padding: 10px !important;
  }

  body.admin-page .workspace-switcher-head {
    display: grid !important;
    gap: 3px !important;
    margin-bottom: 8px !important;
  }

  body.admin-page .workspace-tabs {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  body.admin-page .workspace-tabs .subtab {
    min-height: 40px !important;
    padding: 8px !important;
    font-size: 14px !important;
  }
}

/* Final mobile readability pass: body/control text stays sans, student names keep the Songti highlight. */
body.admin-page,
body.admin-page input,
body.admin-page select,
body.admin-page textarea,
body.admin-page button,
body.admin-page .tab,
body.admin-page .subtab,
body.admin-page .meta,
body.admin-page .hint,
body.parent-center-page,
body.parent-center-page button,
body.parent-center-page input,
body.parent-center-page .content-item,
.growth-page,
.growth-page .summary-box,
.growth-page .teacher-comment,
.page,
.page .student-card,
.page .footer {
  font-family: var(--xhy-font-ui) !important;
  letter-spacing: 0 !important;
  font-synthesis-weight: none;
}

body.admin-page .tab.active,
body.admin-page .subtab.active,
body.admin-page .workspace-tabs .subtab.active,
body.admin-page button:not(.secondary):not(.logout-button):not(.theme-toggle):not(.text-link):not(.danger):not(.tab):not(.subtab):not(#load-manage-class):not(#open-manage-roster):not(:disabled) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.admin-page .tab:not(.active),
body.admin-page .subtab:not(.active),
body.admin-page .workspace-tabs .subtab:not(.active),
body.admin-page #load-manage-class,
body.admin-page #open-manage-roster {
  color: var(--admin-ink) !important;
  -webkit-text-fill-color: var(--admin-ink) !important;
}

body.admin-page .tabs .tab:not(.active),
body.admin-page .tabs .tab:not(.active):hover,
body.admin-page .tabs .tab:not(.active):focus-visible {
  background: var(--admin-card-bg) !important;
  color: var(--admin-ink) !important;
  -webkit-text-fill-color: var(--admin-ink) !important;
}

body.admin-page #show-student-form,
body.admin-page #show-student-form:not(:disabled),
body.admin-page #show-student-form:not(:disabled):hover,
body.admin-page #show-student-form:not(:disabled):focus-visible {
  background: var(--xhy-green) !important;
  border-color: var(--xhy-green) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.admin-page .workspace-tabs .subtab strong,
body.admin-page .workspace-tabs .subtab span {
  display: block !important;
  font-family: var(--xhy-font-ui) !important;
}

body.admin-page .workspace-tabs .subtab.active strong,
body.admin-page .workspace-tabs .subtab.active span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.parent-center-page .content-item a.secondary[aria-disabled="true"],
body.parent-center-page .content-item a.secondary[aria-disabled="true"]:visited {
  color: color-mix(in srgb, var(--parent-card-ink) 76%, transparent) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--parent-card-ink) 76%, transparent) !important;
  opacity: 1 !important;
}

.growth-page .summary-box,
.growth-page .summary-box *,
.growth-page .teacher-comment,
.growth-page .teacher-comment *,
.growth-page .comment-card-main,
.growth-page .comment-card-main *,
.growth-page .growth-card .info-band span {
  color: #183f35 !important;
  -webkit-text-fill-color: #183f35 !important;
}

.growth-page .report-footer,
.growth-page .report-footer *,
.page .footer,
.page .footer * {
  text-align: center !important;
  justify-content: center !important;
}
body.admin-page h1:not(:has(.student-title-name)),
body.admin-page h2:not(:has(.student-title-name)),
body.admin-page h3:not(:has(.student-title-name)),
body.admin-page h4,
body.admin-page h5,
body.admin-page p,
body.admin-page button,
body.admin-page input,
body.admin-page select,
body.admin-page textarea,
body.parent-center-page h1:not(:has(.student-title-name)),
body.parent-center-page h2:not(:has(.student-title-name)),
body.parent-center-page h3:not(:has(.student-title-name)),
body.parent-center-page h4,
body.parent-center-page h5,
body.parent-center-page p,
body.parent-center-page button,
body.parent-center-page input,
body.parent-center-page select,
body.parent-center-page textarea,
.growth-page h1:not(:has(.student-title-name)),
.growth-page h2:not(:has(.student-title-name)),
.growth-page h3:not(:has(.student-title-name)),
.growth-page h4,
.growth-page h5,
.growth-page p:not(.eyebrow),
.growth-page button,
.page h1:not(:has(.student-title-name)),
.page h2:not(:has(.student-title-name)):not(.student-head h2),
.page h3:not(:has(.student-title-name)),
.page h4,
.page h5,
.page p,
.page button {
  font-family: var(--xhy-font-ui) !important;
  letter-spacing: 0 !important;
  font-synthesis-weight: none !important;
}

/* Final contrast contract: readable text wins over generic button/status rules. */
body.admin-page .tabs .tab:not(.active),
body.admin-page .tabs .tab:not(.active):hover,
body.admin-page .tabs .tab:not(.active):focus-visible,
body.admin-page .workspace-tabs .subtab:not(.active),
body.admin-page .workspace-tabs .subtab:not(.active):hover,
body.admin-page .workspace-tabs .subtab:not(.active):focus-visible,
body.admin-page .subtabs .subtab:not(.active),
body.admin-page .subtabs .subtab:not(.active):hover,
body.admin-page .subtabs .subtab:not(.active):focus-visible,
body.admin-page .date-shortcuts button,
body.admin-page .date-shortcuts button:not(:disabled),
body.admin-page .date-shortcuts button:hover,
body.admin-page .date-shortcuts button:focus-visible,
body.admin-page .date-shortcuts button:disabled,
body.admin-page .account-password-line code,
body.admin-page .account-password-toggle,
body.admin-page .account-password-toggle:hover,
body.admin-page .account-password-toggle:focus-visible,
body.admin-page .account-password-toggle.is-visible,
body.admin-page .backup-counts span,
body.admin-page .quick-card-disabled,
body.admin-page .growth-status,
body.admin-page .growth-status.draft,
body.admin-page .status-badge,
body.admin-page .role-pill,
body.admin-page .teacher-count-pill,
body.admin-page .tag,
body.admin-page .info-band span {
  background: var(--admin-card-bg) !important;
  border-color: var(--admin-line) !important;
  color: var(--admin-ink) !important;
  -webkit-text-fill-color: var(--admin-ink) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

body.admin-page .date-shortcuts button:disabled,
body.admin-page button.secondary:disabled,
body.admin-page .secondary-action:disabled {
  background: var(--admin-card-bg) !important;
  color: var(--admin-muted) !important;
  -webkit-text-fill-color: var(--admin-muted) !important;
  opacity: 0.76 !important;
}

body.admin-page .tabs .tab.active,
body.admin-page .subtabs .subtab.active,
body.admin-page .workspace-tabs .subtab.active,
body.admin-page .workspace-tabs .subtab.active strong,
body.admin-page .workspace-tabs .subtab.active span,
body.admin-page #show-student-form,
body.admin-page #show-student-form:not(:disabled),
body.admin-page button.danger,
body.admin-page button.danger:hover,
body.admin-page button.danger:focus-visible,
body.admin-page button[data-restore-backup],
body.admin-page button[data-toggle-admin-user][data-disabled="1"] {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
}

body.admin-page button.danger,
body.admin-page button[data-restore-backup],
body.admin-page button[data-toggle-admin-user][data-disabled="1"] {
  background: var(--xhy-cinnabar) !important;
  border-color: var(--xhy-cinnabar) !important;
}

body.admin-page .backup-counts span,
body.admin-page .quick-card-disabled,
body.admin-page .growth-status.draft,
body.admin-page .status-badge,
body.admin-page .role-pill,
body.admin-page .teacher-count-pill,
body.admin-page .tag,
body.admin-page .info-band span {
  background: color-mix(in srgb, var(--admin-card-bg-soft) 82%, var(--admin-card-bg)) !important;
}

body.admin-page .growth-status.published {
  background: color-mix(in srgb, var(--xhy-green) 14%, var(--admin-card-bg)) !important;
  border-color: color-mix(in srgb, var(--xhy-green) 32%, var(--admin-line)) !important;
  color: var(--admin-ink) !important;
  -webkit-text-fill-color: var(--admin-ink) !important;
}

body.admin-page .growth-status.pending {
  background: color-mix(in srgb, var(--xhy-gold) 18%, var(--admin-card-bg)) !important;
  border-color: color-mix(in srgb, var(--xhy-gold) 38%, var(--admin-line)) !important;
  color: #6f541e !important;
  -webkit-text-fill-color: #6f541e !important;
}

body.admin-page .growth-status.rejected,
body.admin-page .growth-status.delete-pending {
  background: color-mix(in srgb, var(--xhy-cinnabar) 10%, var(--admin-card-bg)) !important;
  border-color: color-mix(in srgb, var(--xhy-cinnabar) 36%, var(--admin-line)) !important;
  color: var(--xhy-cinnabar) !important;
  -webkit-text-fill-color: var(--xhy-cinnabar) !important;
}

body.admin-page .account-password-toggle,
body.admin-page .account-password-line code {
  font-family: var(--xhy-font-ui) !important;
  font-weight: 800 !important;
}

/* 2026-07-05: account password chips must not render as blank white inputs. */
body.admin-page .account-password-toggle,
body.admin-page .account-password-toggle:not(:disabled),
body.admin-page .account-password-toggle:not(.is-visible),
body.admin-page .account-password-toggle:not(.is-visible):hover,
body.admin-page .account-password-toggle:not(.is-visible):focus-visible {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 136px !important;
  min-height: 44px !important;
  border: 1px solid var(--xhy-green-deep) !important;
  border-radius: 8px !important;
  background: var(--xhy-green-deep) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 2px 0 rgba(15, 43, 37, 0.08) !important;
}

body.admin-page .account-password-toggle.is-visible,
body.admin-page .account-password-toggle.is-visible:not(:disabled),
body.admin-page .account-password-toggle.is-visible:hover,
body.admin-page .account-password-toggle.is-visible:focus-visible {
  min-width: 148px !important;
  border-color: color-mix(in srgb, var(--xhy-green) 42%, var(--xhy-line)) !important;
  background: #edf5f1 !important;
  color: var(--xhy-green-dark) !important;
  -webkit-text-fill-color: var(--xhy-green-dark) !important;
}

/* 2026-07-04: keep date shortcuts readable on mobile Safari after theme switching. */
body.admin-page .date-shortcuts button,
body.admin-page .date-shortcuts button:not(:disabled),
body.admin-page .date-shortcuts button.secondary,
body.admin-page .date-shortcuts button:hover,
body.admin-page .date-shortcuts button:focus-visible,
body.admin-page .date-shortcuts button:disabled {
  background: #fffdf8 !important;
  border-color: #d9c9ad !important;
  color: #123f35 !important;
  -webkit-text-fill-color: #123f35 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  font-family: var(--xhy-font-ui) !important;
  font-weight: 800 !important;
}

body.admin-page .date-shortcuts button:hover,
body.admin-page .date-shortcuts button:focus-visible {
  background: #edf5f1 !important;
  box-shadow: 0 0 0 3px rgba(47, 111, 94, 0.14) !important;
}

@media (max-width: 760px) {
  body.admin-page .date-shortcuts button,
  body.admin-page .date-shortcuts button:not(:disabled),
  body.admin-page .date-shortcuts button:disabled {
    min-height: 40px;
    font-size: 14px;
    line-height: 1.2;
  }
}

/* 2026-07-04: final workflow/readability contract for admin, parent and four-card pages. */
:root {
  --xhy-ui-ink: #123f35;
  --xhy-ui-muted: #5f716b;
  --xhy-ui-soft: #edf4ef;
  --xhy-ui-card: #fffdf8;
  --xhy-ui-card-soft: #f8f2e8;
  --xhy-ui-line: #e4d7c3;
}

body.admin-page :where(p, span, label, legend, small, button, input, select, textarea, div, section, article, strong, em, code, summary, option),
body.parent-center-page :where(p, span, label, legend, small, button, input, select, textarea, div, section, article, strong, em, code, summary, option),
.growth-page :where(p, span, label, legend, small, button, input, select, textarea, div, section, article, strong, em, code, summary, option),
.page :where(p, span, label, legend, small, button, input, select, textarea, div, section, article, strong, em, code, summary, option) {
  font-family: var(--xhy-font-ui) !important;
  letter-spacing: 0 !important;
  font-synthesis-weight: none !important;
  text-shadow: none !important;
}

body.admin-page :where(h1, h2, h3, h4, h5, h6),
body.parent-center-page :where(h1, h2, h3, h4, h5, h6),
.growth-page :where(h1, h2, h3, h4, h5, h6),
.page :where(h1, h2, h3, h4, h5, h6) {
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

body.admin-page :where(.tab, .subtab, .workspace-tabs .subtab, .secondary, .logout-button, .theme-toggle, .date-shortcuts button, button, input, select, textarea),
body.parent-center-page :where(button, input, select, textarea, .secondary-action, .theme-toggle),
.growth-page :where(button, input, select, textarea, .secondary-action),
.page :where(button, input, select, textarea, .secondary-action) {
  color: var(--xhy-ui-ink) !important;
  -webkit-text-fill-color: var(--xhy-ui-ink) !important;
  opacity: 1 !important;
}

body.admin-page :where(.tab:not(.active), .subtab:not(.active), .workspace-tabs .subtab:not(.active), .secondary, .logout-button, .theme-toggle, .date-shortcuts button, button.secondary),
body.parent-center-page :where(.secondary-action, .theme-toggle, button.secondary),
.growth-page :where(.secondary-action, button.secondary),
.page :where(.secondary-action, button.secondary) {
  background: var(--xhy-ui-card) !important;
  border-color: var(--xhy-ui-line) !important;
  color: var(--xhy-ui-ink) !important;
  -webkit-text-fill-color: var(--xhy-ui-ink) !important;
}

body.admin-page :where(.tab.active, .subtab.active, .workspace-tabs .subtab.active),
body.admin-page :where(.tab.active *, .subtab.active *, .workspace-tabs .subtab.active *) {
  background: var(--xhy-green) !important;
  border-color: var(--xhy-green) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.admin-page :where(button:not(.secondary):not(.logout-button):not(.theme-toggle):not(.tab):not(.subtab):not(.danger):not(:disabled)),
body.parent-center-page :where(button:not(.secondary):not(.secondary-action):not(.theme-toggle):not(.danger):not(:disabled)),
.growth-page :where(button:not(.secondary):not(.secondary-action):not(.danger):not(:disabled)),
.page :where(button:not(.secondary):not(.secondary-action):not(.danger):not(:disabled)) {
  background: var(--xhy-green) !important;
  border-color: var(--xhy-green) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.admin-page :where(button:disabled, button[disabled], .secondary:disabled, .quick-card-disabled, .growth-status, .status-badge, .backup-counts span, .role-pill, .tag, .teacher-count-pill),
body.parent-center-page :where(button:disabled, button[disabled]),
.growth-page :where(button:disabled, button[disabled]),
.page :where(button:disabled, button[disabled]) {
  background: var(--xhy-ui-soft) !important;
  border-color: #d9e3dc !important;
  color: var(--xhy-ui-ink) !important;
  -webkit-text-fill-color: var(--xhy-ui-ink) !important;
  opacity: 1 !important;
}

body.admin-page .date-shortcuts button,
body.admin-page .date-shortcuts button:not(:disabled),
body.admin-page .date-shortcuts button:disabled {
  background: var(--xhy-ui-card) !important;
  border-color: var(--xhy-ui-line) !important;
  color: var(--xhy-ui-ink) !important;
  -webkit-text-fill-color: var(--xhy-ui-ink) !important;
}

body.admin-page :where(.hint, .muted, .field-hint, .growth-class-help, .workspace-switcher-head span),
body.parent-center-page :where(.hint, .muted),
.growth-page :where(.hint, .muted),
.page :where(.hint, .muted) {
  color: var(--xhy-ui-muted) !important;
  -webkit-text-fill-color: var(--xhy-ui-muted) !important;
}

body.admin-page .workflow-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

body.admin-page .workflow-step,
body.admin-page .flow-step-label {
  border: 1px solid var(--xhy-ui-line);
  border-radius: 10px;
  background: var(--xhy-ui-card);
  color: var(--xhy-ui-ink);
  padding: 14px;
}

body.admin-page .workflow-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: start;
}

body.admin-page .workflow-step > span,
body.admin-page .flow-step-label > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--xhy-ui-soft);
  color: var(--xhy-ui-ink);
  font-weight: 800;
}

body.admin-page .workflow-step.current > span,
body.admin-page .flow-step-label > span {
  background: var(--xhy-green);
  color: #fff;
  -webkit-text-fill-color: #fff;
}

body.admin-page .workflow-step strong,
body.admin-page .flow-step-label strong {
  font-size: 15px;
  line-height: 1.3;
  color: var(--xhy-ui-ink);
  -webkit-text-fill-color: var(--xhy-ui-ink);
}

body.admin-page .workflow-step em,
body.admin-page .flow-step-label em {
  grid-column: 2;
  color: var(--xhy-ui-muted);
  -webkit-text-fill-color: var(--xhy-ui-muted);
  font-style: normal;
  font-size: 13px;
  line-height: 1.45;
}

body.admin-page .flow-step-label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  margin: 0 0 16px;
}

body.admin-page .flow-step-label em {
  display: block;
}

body.admin-page .workspace-switcher,
body.admin-page .growth-filter-panel,
body.admin-page .classroom-filter-panel,
body.admin-page .panel,
body.admin-page .record-card {
  border-color: var(--xhy-ui-line) !important;
}

@media (max-width: 760px) {
  body.admin-page,
  body.parent-center-page,
  .growth-page,
  .page {
    background: var(--xhy-warm-white) !important;
  }

  body.admin-page .admin-shell,
  body.parent-center-page main,
  .growth-page main,
  .page main {
    width: 100% !important;
    max-width: none !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.admin-page .admin-app,
  body.admin-page .panel,
  body.admin-page .record-card,
  body.admin-page .growth-filter-panel,
  body.admin-page .classroom-filter-panel,
  body.parent-center-page :where(.panel, .content-card, .dashboard-student-card),
  .growth-page :where(.album-card, .report-card, .comment-card, .summary-card),
  .page :where(.card, .panel, .student-card) {
    border-width: 1px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  body.admin-page .admin-app,
  body.admin-page .panel,
  body.admin-page .growth-filter-panel,
  body.admin-page .classroom-filter-panel {
    padding: 12px !important;
  }

  body.admin-page .topbar {
    padding: 14px !important;
  }

  body.admin-page .tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 12px 0 !important;
  }

  body.admin-page .tab,
  body.admin-page .subtab,
  body.admin-page .workspace-tabs .subtab,
  body.admin-page button,
  body.admin-page input,
  body.admin-page select,
  body.admin-page textarea {
    min-height: 44px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  body.admin-page .tab,
  body.admin-page .subtab,
  body.admin-page .workspace-tabs .subtab {
    padding: 9px 8px !important;
  }

  body.admin-page .workspace-tabs {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.admin-page .workspace-tabs .subtab {
    text-align: left !important;
  }

  body.admin-page .workspace-tabs .subtab strong,
  body.admin-page .workspace-tabs .subtab span {
    display: block !important;
  }

  body.admin-page .workspace-tabs .subtab span {
    margin-top: 3px !important;
    font-size: 12px !important;
  }

  body.admin-page .workflow-map {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin: 12px 0 !important;
  }

  body.admin-page .workflow-step,
  body.admin-page .flow-step-label {
    padding: 12px !important;
  }

  body.admin-page .growth-class-controls,
  body.admin-page .classroom-class-controls,
  body.admin-page .form-grid,
  body.admin-page .toolbar {
    gap: 10px !important;
  }

  body.admin-page .date-shortcuts {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.admin-page .date-shortcuts button {
    font-size: 13px !important;
  }

  body.admin-page .record-list {
    gap: 10px !important;
  }

  body.admin-page .student-title-name {
    font-size: inherit !important;
    line-height: inherit !important;
  }
}

/* 2026-07-04: absolute contrast guard for dark-mode light surfaces. */
body.admin-page .date-shortcuts button,
body.admin-page .date-shortcuts button:not(:disabled),
body.admin-page .date-shortcuts button.secondary,
body.admin-page .date-shortcuts button:hover,
body.admin-page .date-shortcuts button:focus-visible,
body.admin-page .date-shortcuts button:active,
body.admin-page .date-shortcuts button:disabled,
:root[data-theme="dark"] body.admin-page .date-shortcuts button,
:root[data-theme="dark"] body.admin-page .date-shortcuts button:not(:disabled),
:root[data-theme="dark"] body.admin-page .date-shortcuts button:disabled {
  background: #fffdf8 !important;
  border: 1px solid #d9c9ad !important;
  color: #123f35 !important;
  -webkit-text-fill-color: #123f35 !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.admin-page .date-shortcuts button *,
:root[data-theme="dark"] body.admin-page .date-shortcuts button * {
  color: #123f35 !important;
  -webkit-text-fill-color: #123f35 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

body.admin-page :where(.student-quick-view, .student-quick-view .quick-section, .student-quick-view .quick-grid > div, .student-quick-view .quick-card-group, .student-quick-view .followup-item, .student-quick-view .ledger-item, .student-quick-view .followup-empty),
:root[data-theme="dark"] body.admin-page :where(.student-quick-view, .student-quick-view .quick-section, .student-quick-view .quick-grid > div, .student-quick-view .quick-card-group, .student-quick-view .followup-item, .student-quick-view .ledger-item, .student-quick-view .followup-empty) {
  background-color: #fffdf8 !important;
  border-color: #e4d7c3 !important;
  color: #123f35 !important;
  -webkit-text-fill-color: #123f35 !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

body.admin-page .student-quick-view :where(h3, h4, strong, b, p, span, small, div, summary),
:root[data-theme="dark"] body.admin-page .student-quick-view :where(h3, h4, strong, b, p, span, small, div, summary) {
  color: #123f35 !important;
  -webkit-text-fill-color: #123f35 !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

body.admin-page .student-quick-view :where(.quick-grid span, .followup-item p, .ledger-item p, .followup-empty, .quick-meta, .muted, .hint),
:root[data-theme="dark"] body.admin-page .student-quick-view :where(.quick-grid span, .followup-item p, .ledger-item p, .followup-empty, .quick-meta, .muted, .hint) {
  color: #5f716b !important;
  -webkit-text-fill-color: #5f716b !important;
}

body.admin-page .student-quick-view :where(.quick-section-count, .role-pill, .tag, .teacher-count-pill),
:root[data-theme="dark"] body.admin-page .student-quick-view :where(.quick-section-count, .role-pill, .tag, .teacher-count-pill) {
  background: #edf4ef !important;
  border-color: #d9e3dc !important;
  color: #123f35 !important;
  -webkit-text-fill-color: #123f35 !important;
  opacity: 1 !important;
}

body.admin-page .student-quick-view :where(button:not(.danger):not(:disabled)),
:root[data-theme="dark"] body.admin-page .student-quick-view :where(button:not(.danger):not(:disabled)) {
  color: #123f35 !important;
  -webkit-text-fill-color: #123f35 !important;
}

body.admin-page .student-quick-view :where(button.primary, button[data-action="save-followup"]:not(:disabled), button[data-action="save-handoff"]:not(:disabled)),
:root[data-theme="dark"] body.admin-page .student-quick-view :where(button.primary, button[data-action="save-followup"]:not(:disabled), button[data-action="save-handoff"]:not(:disabled)) {
  background: #2f6f5e !important;
  border-color: #2f6f5e !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* 2026-07-04: definitive light font/readability contract. Keep this block last. */
:root,
:root[data-theme="dark"] {
  color-scheme: light;
  --xhy-green: #2f6f5e;
  --xhy-green-deep: #17483d;
  --xhy-green-dark: #0f2b25;
  --xhy-green-soft: #e8f0ec;
  --xhy-warm-white: #f7f8f5;
  --xhy-paper-white: #eef2ee;
  --xhy-bg: #f7f8f5;
  --xhy-bg-side: #eef2ee;
  --xhy-surface: #fffefa;
  --xhy-surface-strong: #ffffff;
  --xhy-ink: #17483d;
  --xhy-body: #1d1d1f;
  --xhy-muted: #66736e;
  --xhy-faint: #98a49f;
  --xhy-line: #dfe6e1;
  --xhy-line-strong: #cbd8d1;
}

@media (prefers-color-scheme: dark) {
  :root,
  :root:not([data-theme="light"]),
  :root[data-theme="dark"] {
    color-scheme: light;
    --xhy-green: #2f6f5e;
    --xhy-green-deep: #17483d;
    --xhy-green-dark: #0f2b25;
    --xhy-green-soft: #e8f0ec;
    --xhy-warm-white: #f7f8f5;
    --xhy-paper-white: #eef2ee;
    --xhy-bg: #f7f8f5;
    --xhy-bg-side: #eef2ee;
    --xhy-surface: #fffefa;
    --xhy-surface-strong: #ffffff;
    --xhy-ink: #17483d;
    --xhy-body: #1d1d1f;
    --xhy-muted: #66736e;
    --xhy-faint: #98a49f;
    --xhy-line: #dfe6e1;
    --xhy-line-strong: #cbd8d1;
  }
}

body.admin-page,
body.parent-center-page,
.growth-page,
.page {
  background: var(--xhy-warm-white) !important;
  color: var(--xhy-body) !important;
}

body.admin-page :where(p, span, label, legend, small, button, input, select, textarea, div, section, article, strong, em, code, summary, option, a),
body.parent-center-page :where(p, span, label, legend, small, button, input, select, textarea, div, section, article, strong, em, code, summary, option, a),
.growth-page :where(p, span, label, legend, small, button, input, select, textarea, div, section, article, strong, em, code, summary, option, a),
.page :where(p, span, label, legend, small, button, input, select, textarea, div, section, article, strong, em, code, summary, option, a) {
  font-family: var(--xhy-font-ui) !important;
  letter-spacing: 0 !important;
  font-synthesis-weight: none !important;
  text-shadow: none !important;
}

body.admin-page :where(h1, h2, h3, h4, h5, h6),
body.admin-page :where(h1, h2, h3, h4, h5, h6) :where(span, strong, em, b, a),
body.parent-center-page :where(h1, h2, h3, h4, h5, h6),
body.parent-center-page :where(h1, h2, h3, h4, h5, h6) :where(span, strong, em, b, a),
.growth-page :where(h1, h2, h3, h4, h5, h6),
.growth-page :where(h1, h2, h3, h4, h5, h6) :where(span, strong, em, b, a),
.page :where(h1, h2, h3, h4, h5, h6),
.page :where(h1, h2, h3, h4, h5, h6) :where(span, strong, em, b, a),
body.admin-page :where(.meta, .hint, .muted, .small, .quick-meta, .quick-grid span, .quick-section-count, .role-pill, .tag, .teacher-count-pill, .growth-status, .status-badge, .count-pill, .backup-counts span),
body.admin-page :where(.meta, .hint, .muted, .small, .quick-meta, .quick-grid span, .quick-section-count, .role-pill, .tag, .teacher-count-pill, .growth-status, .status-badge, .count-pill, .backup-counts span) *,
body.parent-center-page :where(.meta, .hint, .muted, .small, .stat-label, .count-pill, .tag),
body.parent-center-page :where(.meta, .hint, .muted, .small, .stat-label, .count-pill, .tag) *,
.growth-page :where(.meta, .hint, .muted, .small, .tag, .eyebrow),
.growth-page :where(.meta, .hint, .muted, .small, .tag, .eyebrow) *,
.page :where(.meta, .hint, .muted, .small, .tag, .eyebrow),
.page :where(.meta, .hint, .muted, .small, .tag, .eyebrow) * {
  font-family: var(--xhy-font-ui) !important;
  font-synthesis-weight: none !important;
}

body.admin-page :where(button, input, select, textarea, .tab, .subtab, .workspace-tabs .subtab, .date-shortcuts button),
body.parent-center-page :where(button, input, select, textarea, .secondary-action),
.growth-page :where(button, input, select, textarea, .secondary-action),
.page :where(button, input, select, textarea, .secondary-action) {
  font-family: var(--xhy-font-ui) !important;
  color: var(--xhy-ui-ink) !important;
  -webkit-text-fill-color: var(--xhy-ui-ink) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

body.admin-page :where(button:disabled, button[disabled], button.secondary:disabled, .quick-card-disabled),
body.parent-center-page :where(button:disabled, button[disabled]),
.growth-page :where(button:disabled, button[disabled]),
.page :where(button:disabled, button[disabled]) {
  background: #f4efe6 !important;
  border-color: #ddd0bc !important;
  color: #62736d !important;
  -webkit-text-fill-color: #62736d !important;
  opacity: 1 !important;
}

body.admin-page .date-shortcuts :where(button, button:disabled, button[disabled]),
body.admin-page .date-shortcuts :where(button, button:disabled, button[disabled]) * {
  background: #fffdf8 !important;
  border-color: #d9c9ad !important;
  color: #123f35 !important;
  -webkit-text-fill-color: #123f35 !important;
  opacity: 1 !important;
}

body.admin-page .backup-counts span,
body.admin-page .backup-counts span *,
body.admin-page :where(.status-badge, .growth-status, .role-pill, .tag, .teacher-count-pill, .count-pill) {
  background: #edf4ef !important;
  border-color: #d9e3dc !important;
  color: #123f35 !important;
  -webkit-text-fill-color: #123f35 !important;
  opacity: 1 !important;
}

body.admin-page input[type="file"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: ellipsis !important;
}

body.admin-page .growth-photo-input {
  display: block !important;
  max-width: 100% !important;
}

@media (max-width: 760px) {
  body.admin-page .admin-shell,
  body.parent-center-page main,
  .growth-page main,
  .page main {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.admin-page :where(.panel, .record-card, .growth-filter-panel, .classroom-filter-panel),
  body.parent-center-page :where(.panel, .content-card, .dashboard-student-card),
  .growth-page :where(.album-card, .report-card, .comment-card, .summary-card),
  .page :where(.card, .panel, .student-card) {
    border-width: 1px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  body.admin-page .date-shortcuts {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.admin-page .date-shortcuts button {
    min-width: 0 !important;
    padding: 9px 8px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  body.admin-page .classroom-live-preview .growth-preview-watermark,
  body.admin-page .classroom-preview .growth-preview-watermark {
    display: none !important;
  }

  body.admin-page .classroom-live-preview .preview-footer,
  body.admin-page .classroom-preview .preview-footer,
  body.admin-page .growth-preview-card .preview-footer {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* 2026-07-04: mobile content-first rule. Date shortcut chips cost more space than they save. */
@media (max-width: 760px) {
  body.admin-page .date-shortcuts {
    display: none !important;
  }
}

/* 2026-07-04: mobile workflow labels and comment-card preview frame cleanup. */
body.admin-page .flow-mini-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

body.admin-page .flow-mini-steps span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border: 1px solid #d9e3dc;
  border-radius: 999px;
  background: #edf4ef;
  color: #17483d;
  -webkit-text-fill-color: #17483d;
  font-family: var(--xhy-font-ui) !important;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

body.admin-page .flow-mini-steps .current {
  border-color: #2f6f5e;
  background: #2f6f5e;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

body.admin-page .flow-step-label {
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: start !important;
}

body.admin-page .flow-step-label > span {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 28px !important;
  padding: 6px 10px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

body.admin-page .flow-step-label strong,
body.admin-page .flow-step-label em {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

@media (max-width: 760px) {
  body.admin-page .flow-mini-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  body.admin-page .flow-mini-steps span {
    justify-content: flex-start;
    padding: 8px 10px;
    font-size: 13px;
  }

  body.admin-page .flow-step-label {
    gap: 6px 8px !important;
    padding: 12px !important;
  }

  body.admin-page .flow-step-label > span {
    padding: 6px 9px !important;
    font-size: 12px !important;
  }

  body.admin-page .growth-comment-card-preview,
  body.admin-page .growth-comment-card-preview.print-5r,
  .growth-page .comment-card-public {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px !important;
    border: 1px solid #e2d6c4 !important;
    border-radius: 10px !important;
    background: #fffdf8 !important;
    box-shadow: none !important;
  }

  body.admin-page .growth-comment-card-preview::before,
  body.admin-page .growth-comment-card-preview .comment-card-corner,
  .growth-page .comment-card-public::after,
  .growth-page .comment-card-corner {
    display: none !important;
  }

  body.admin-page .growth-comment-card-preview.print-5r figure,
  body.admin-page .growth-comment-card-preview.print-5r section,
  body.admin-page .growth-comment-card-preview section,
  .growth-page .comment-card-photo,
  .growth-page .comment-card-main,
  .growth-page .comment-card-public .summary-box {
    border: 1px solid #eadfce !important;
    border-radius: 8px !important;
    background: #fbf7ef !important;
  }

  body.admin-page .growth-comment-card-preview.print-5r .comment-card-meta span,
  body.admin-page .growth-comment-card-preview .comment-card-tags span,
  .growth-page .comment-card-info span {
    border-color: #eadfce !important;
    background: #fffdf8 !important;
  }

  body.admin-page .growth-comment-card-preview.print-5r .eyebrow,
  .growth-page .comment-card-header .eyebrow {
    white-space: normal !important;
  }
}

@media (max-width: 760px) {
  body.admin-page .date-shortcuts {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

/* 2026-07-04: final audit card readability guard.
   Keep review actions and change details readable after generic mobile width rules. */
body.admin-page .audit-title-line {
  min-width: 0 !important;
}

body.admin-page .audit-title-line > span:first-child {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

body.admin-page .quick-view-link,
body.admin-page .quick-view-link:not(:disabled),
body.admin-page .quick-view-link:hover,
body.admin-page .quick-view-link:focus-visible {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: max-content !important;
  min-width: 74px !important;
  max-width: 100% !important;
  min-height: 34px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 5px 14px !important;
  border: 1px solid rgba(47, 111, 94, 0.18) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.66) !important;
  color: var(--xhy-green-deep) !important;
  -webkit-text-fill-color: var(--xhy-green-deep) !important;
  font-family: var(--xhy-font-ui) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

body.admin-page .quick-view-link:hover,
body.admin-page .quick-view-link:focus-visible {
  background: rgba(47, 111, 94, 0.06) !important;
  border-color: rgba(47, 111, 94, 0.26) !important;
}

body.admin-page .audit-actions .audit-select {
  display: inline-flex !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 36px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 999px !important;
  background: var(--admin-card-bg) !important;
  color: var(--admin-ink) !important;
  -webkit-text-fill-color: var(--admin-ink) !important;
  font-family: var(--xhy-font-ui) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}

body.admin-page .audit-actions .audit-select .student-check {
  flex: 0 0 auto !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
}

body.admin-page .audit-actions .audit-select span {
  display: inline-block !important;
  width: auto !important;
  color: var(--admin-ink) !important;
  -webkit-text-fill-color: var(--admin-ink) !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
}

body.admin-page .change-row > * {
  min-width: 0 !important;
}

body.admin-page .change-row .change-field-label,
body.admin-page .change-row .change-before,
body.admin-page .change-row .change-after {
  color: var(--admin-body) !important;
  -webkit-text-fill-color: var(--admin-body) !important;
  font-family: var(--xhy-font-ui) !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere !important;
}

body.admin-page .change-row.header .change-field-label,
body.admin-page .change-row.header .change-before,
body.admin-page .change-row.header .change-after {
  color: var(--admin-muted) !important;
  -webkit-text-fill-color: var(--admin-muted) !important;
}

@media (max-width: 760px) {
  body.admin-page .audit-title-line {
    align-items: flex-start !important;
  }

  body.admin-page .audit-title-line .quick-view-link {
    margin-top: 2px !important;
  }

  body.admin-page .audit-actions {
    justify-items: stretch !important;
    align-items: stretch !important;
  }

  body.admin-page .audit-actions .audit-select {
    justify-self: start !important;
    align-self: center !important;
  }

  body.admin-page .change-table {
    gap: 6px !important;
  }

  body.admin-page .change-row:not(.header) {
    display: grid !important;
    grid-template-columns: minmax(68px, 0.42fr) minmax(0, 1fr) !important;
    gap: 4px 8px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }

  body.admin-page .change-row:not(.header) > .change-field-label {
    grid-row: 1 / span 2 !important;
    align-self: start !important;
    font-size: 14px !important;
  }

  body.admin-page .change-row:not(.header) > .change-before,
  body.admin-page .change-row:not(.header) > .change-after {
    font-size: 14px !important;
  }

  body.admin-page .change-row:not(.header) > .change-before::before {
    content: "原：";
    color: var(--admin-muted) !important;
    -webkit-text-fill-color: var(--admin-muted) !important;
    font-weight: 900 !important;
  }

body.admin-page .change-row:not(.header) > .change-after::before {
    content: "现：";
    color: var(--admin-muted) !important;
    -webkit-text-fill-color: var(--admin-muted) !important;
    font-weight: 900 !important;
  }
}

/* 2026-07-05: product-font-clean-contract-v10.
   Product screens stay sans-serif. Finished parent-facing card titles keep the
   explicit Songti hook. Admin student record titles are handled by the SVG
   title component below, not by broad HTML font overrides. */
:root,
:root[data-theme],
:root[data-theme-mode],
:root:not([data-theme="light"]) {
  color-scheme: light !important;
  --xhy-font-product-ui: var(--xhy-font-sans);
  --xhy-font-ui: var(--xhy-font-sans);
  --xhy-font-body: var(--xhy-font-sans);
  --xhy-font-display: var(--xhy-font-sans);
  --xhy-font-number: var(--xhy-font-sans);
  --xhy-font-final-song: "Songti SC", "STSongti-SC-Regular", "STSongti-SC-Bold", "STSong", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;
  --xhy-font-admin-student-title-svg-songti: "XHY Admin Title Songti", "Songti SC", "STSongti-SC-Regular", "STSong", "SimSun", serif;
}

body.admin-page,
body.parent-center-page,
.growth-page,
.page,
body.admin-page :where(h1, h2, h3, h4, h5, h6, p, span, strong, b, small, a, button, input, select, textarea, label, option, summary, li, dt, dd, div, em),
body.parent-center-page :where(h1, h2, h3, h4, h5, h6, p, span, strong, b, small, a, button, input, select, textarea, label, option, summary, li, dt, dd, div, em),
.growth-page :where(h1, h2, h3, h4, h5, h6, p, span, strong, b, small, a, button, input, select, textarea, label, option, summary, li, dt, dd, div, em),
.page :where(h1, h2, h3, h4, h5, h6, p, span, strong, b, small, a, button, input, select, textarea, label, option, summary, li, dt, dd, div, em) {
  font-family: var(--xhy-font-product-ui) !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
  font-synthesis: none !important;
  font-synthesis-weight: none !important;
  text-shadow: none !important;
}

body.admin-page :where(.xhy-song-title, .xhy-song-title *),
body.parent-center-page :where(.xhy-song-title, .xhy-song-title *),
.growth-page :where(.xhy-song-title, .xhy-song-title *),
.page :where(.xhy-song-title, .xhy-song-title *) {
  font-family: var(--xhy-font-final-song) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
  font-synthesis: none !important;
  font-synthesis-weight: none !important;
  text-shadow: none !important;
}

body.admin-page :where(button, input, select, textarea, label, option, .tab, .subtab, .toolbar, .toolbar *, .manage-toolbar, .manage-toolbar *, .field-hint, .hint, .eyebrow, .count-pill),
body.parent-center-page :where(button, input, select, textarea, label, option, .field-hint, .hint, .count-pill),
.growth-page :where(button, input, select, textarea, label, option, .field-hint, .hint, .count-pill),
.page :where(button, input, select, textarea, label, option, .field-hint, .hint, .count-pill) {
  font-family: var(--xhy-font-product-ui) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
  font-synthesis-weight: none !important;
  text-shadow: none !important;
}

body.admin-page .date-shortcuts button,
body.admin-page .date-quick-button,
body.admin-page .quick-date-button,
body.admin-page .date-shortcuts button:not(:disabled),
body.admin-page .date-quick-button:not(:disabled),
body.admin-page .quick-date-button:not(:disabled) {
  color: var(--xhy-ink) !important;
  -webkit-text-fill-color: var(--xhy-ink) !important;
  background: var(--xhy-surface) !important;
  border-color: var(--xhy-line-strong) !important;
}

body.admin-page .classroom-tag-list .classroom-tag input[type="checkbox"] {
  position: static !important;
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  opacity: 1 !important;
}

body.admin-page .classroom-tag-list .classroom-tag span {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  color: var(--xhy-ink) !important;
  -webkit-text-fill-color: var(--xhy-ink) !important;
}

@media (max-width: 760px) {
  body.admin-page .date-shortcuts,
  body.admin-page .classroom-date-shortcuts {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

/* 2026-07-04: xhy-mobile-section-rhythm-v1.
   Mobile must clearly separate login, menu, and work area without spending
   width on decorative frames. */
@media (max-width: 760px) {
  body.admin-page .admin-shell {
    padding: 12px 10px 76px !important;
  }

  body.admin-page .admin-app {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.admin-page .topbar {
    margin: 10px 0 18px !important;
    padding: 16px 14px !important;
    border: 1px solid var(--xhy-line, #e4d6bf) !important;
    border-radius: 12px !important;
    background: var(--xhy-surface, #fffdf8) !important;
  }

  body.admin-page .tabs {
    margin: 0 0 22px !important;
    padding: 0 !important;
    gap: 10px !important;
  }

  body.admin-page .notice:not([hidden]),
  body.admin-page .teacher-workbench:not([hidden]) {
    margin: 0 0 18px !important;
  }

  body.admin-page .view:not([hidden]) {
    margin-top: 0 !important;
  }

  body.admin-page .view > .toolbar:first-child,
  body.admin-page .manage-toolbar {
    margin-top: 0 !important;
    padding: 12px !important;
    border: 1px solid var(--xhy-line, #e4d6bf) !important;
    border-radius: 12px !important;
    background: rgba(255, 253, 248, 0.9) !important;
  }

  body.admin-page .record-list {
    margin-top: 14px !important;
  }
}

body.admin-page .date-shortcuts button,
body.admin-page .date-quick-button,
body.admin-page .quick-date-button {
  color: var(--xhy-ink, #123f35) !important;
  -webkit-text-fill-color: var(--xhy-ink, #123f35) !important;
  background: var(--xhy-surface, #fffdf8) !important;
  border-color: var(--xhy-line-strong, #d9c8aa) !important;
}

@media (max-width: 760px) {
  body.admin-page .topbar {
    margin-bottom: 20px !important;
  }

  body.admin-page .tabs {
    margin-bottom: 24px !important;
  }

  body.admin-page .view > .toolbar:first-child,
  body.admin-page .manage-toolbar,
  body.admin-page .classroom-workflow,
  body.admin-page .growth-workflow {
    margin-bottom: 20px !important;
  }

  body.admin-page .record-card {
    margin-top: 14px !important;
  }
}

body.admin-page .topbar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}

body.admin-page .topbar-logo {
  display: block !important;
  width: 112px !important;
  max-width: 26vw !important;
  height: auto !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
}

body.admin-page .login-panel h1 {
  font-family: var(--xhy-font-product-ui) !important;
  font-weight: 800 !important;
}

@media (max-width: 760px) {
  body.admin-page .topbar {
    align-items: flex-start !important;
    gap: 16px !important;
  }

  body.admin-page .topbar-brand {
    align-items: flex-start !important;
    gap: 10px !important;
  }

  body.admin-page .topbar-logo {
    width: 86px !important;
    max-width: 24vw !important;
    margin-top: 2px !important;
  }
}

/* 2026-07-05: final mobile product-font cleanup.
   Audit workflow titles, empty states and date controls are product UI, not
   finished parent-facing cards. Keep them sans-serif and lighter on phones. */
body.admin-page :where(.audit-title-line, .audit-title-line *, .audit-request-title, .audit-request-title *, .request-type-badge, .followup-empty, .quick-card-empty, .date-weekday-hint) {
  font-family: var(--xhy-font-ui) !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
  text-shadow: none !important;
  font-synthesis: none !important;
  font-synthesis-weight: none !important;
}

body.admin-page :where(.audit-request-title, .audit-request-title .student-title-text) {
  font-weight: 720 !important;
}

body.admin-page :where(.followup-empty) {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  color: var(--xhy-muted) !important;
  -webkit-text-fill-color: var(--xhy-muted) !important;
}

body.admin-page :where(.quick-card-empty) {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: color-mix(in srgb, var(--xhy-ink) 58%, transparent) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--xhy-ink) 58%, transparent) !important;
}

body.admin-page :where(.date-weekday-hint) {
  display: none !important;
  font-weight: 650 !important;
  color: var(--xhy-green-deep) !important;
  -webkit-text-fill-color: var(--xhy-green-deep) !important;
}

body.admin-page :where(.date-picker) {
  position: relative !important;
  display: block !important;
}

body.admin-page :where(.date-picker-display) {
  display: block !important;
  font-family: var(--xhy-font-ui) !important;
  font-weight: 720 !important;
  color: var(--xhy-ink) !important;
  -webkit-text-fill-color: var(--xhy-ink) !important;
}

body.admin-page :where(.date-picker .native-date-input) {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 44px !important;
  opacity: 0.01 !important;
  cursor: pointer !important;
}

@font-face {
  font-family: "XHY Admin Title Songti";
  src:
    url("./fonts/NotoSerifCJKsc-Regular.otf?v=1") format("opentype"),
    local("STSongti-SC-Regular"),
    local("Songti SC Regular"),
    local("Songti SC"),
    local("STSong"),
    local("SimSun");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 2026-07-05: admin-student-title-svg-songti-clean-v11.
   The visible admin student record title is one SVG text layer, so mobile
   WebKit cannot mix different fallback fonts inside the same Chinese line.
   A dedicated local @font-face gives iOS WebKit one exact title font to hit. */
:root,
:root[data-theme],
:root[data-theme-mode] {
  --xhy-font-contract-v11-admin-student-title-local-songti-svg: "active";
}

body.admin-page :where(.record-card h3.student-title-row, .student-quick-view > h3.student-title-row, .classroom-student-card h3.student-title-row) {
  font-family: var(--xhy-font-product-ui) !important;
  font-size: clamp(18px, 4.6vw, 24px) !important;
  line-height: 1.28 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
  font-synthesis: none !important;
  font-synthesis-weight: none !important;
  text-shadow: none !important;
}

body.admin-page :where(.student-title-plain) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.admin-page :where(.student-title-svg) {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  color: inherit !important;
  line-height: 1 !important;
}

body.admin-page :where(button.secondary.compact-button[data-action="quick-view"]),
body.admin-page :where(button.secondary.compact-button[data-action="quick-view"]):not(:disabled),
body.admin-page :where(button.secondary.compact-button[data-action="quick-view"]):hover,
body.admin-page :where(button.secondary.compact-button[data-action="quick-view"]):focus-visible {
  min-width: 74px !important;
  min-height: 34px !important;
  padding: 5px 14px !important;
  border: 1px solid rgba(47, 111, 94, 0.18) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.66) !important;
  color: var(--xhy-green-deep) !important;
  -webkit-text-fill-color: var(--xhy-green-deep) !important;
  font-family: var(--xhy-font-ui) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}

body.admin-page :where(button.secondary.compact-button[data-action="quick-view"]):hover,
body.admin-page :where(button.secondary.compact-button[data-action="quick-view"]):focus-visible {
  background: rgba(47, 111, 94, 0.06) !important;
  border-color: rgba(47, 111, 94, 0.26) !important;
}

body.admin-page :where(.student-title-svg text) {
  font-family: var(--xhy-font-admin-student-title-svg-songti) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-synthesis: none !important;
  font-synthesis-weight: none !important;
}

/* 2026-07-05: final single-theme account guard. New accounts and fresh browsers
   must resolve every legacy theme attribute/system preference back to light. */
:root,
:root[data-theme],
:root[data-theme-mode],
:root:not([data-theme="light"]) {
  color-scheme: light !important;
  --xhy-green: #2f6f5e !important;
  --xhy-green-deep: #17483d !important;
  --xhy-green-dark: #0f2b25 !important;
  --xhy-green-soft: #e8f0ec !important;
  --xhy-warm-white: #f7f8f5 !important;
  --xhy-paper-white: #eef2ee !important;
  --xhy-gold: #c6a76a !important;
  --xhy-cinnabar: #b84a3a !important;
  --xhy-bg: #f7f8f5 !important;
  --xhy-bg-side: #eef2ee !important;
  --xhy-surface: #fffefa !important;
  --xhy-surface-strong: #ffffff !important;
  --xhy-ink: #17483d !important;
  --xhy-body: #1d1d1f !important;
  --xhy-muted: #66736e !important;
  --xhy-faint: #98a49f !important;
  --xhy-line: #dfe6e1 !important;
  --xhy-line-strong: #cbd8d1 !important;
  --ink: var(--xhy-ink) !important;
  --muted: var(--xhy-muted) !important;
  --line: var(--xhy-line) !important;
  --paper: var(--xhy-surface) !important;
  --wash: var(--xhy-bg) !important;
  --wash-deep: var(--xhy-paper-white) !important;
  --accent: var(--xhy-green) !important;
  --accent-strong: var(--xhy-green-deep) !important;
  --accent-dark: var(--xhy-green-dark) !important;
  --gold: var(--xhy-gold) !important;
  --danger: var(--xhy-cinnabar) !important;
}

html[data-theme],
html[data-theme-mode],
html:not([data-theme="light"]),
html[data-theme] body,
html[data-theme-mode] body,
html:not([data-theme="light"]) body {
  color-scheme: light !important;
}

/* 2026-07-05: admin-light-workbench-v1.
   Keep the teacher workbench and desktop side navigation in the single light
   product theme; no dark blocks remain in normal admin operations. */
body.admin-page .teacher-workbench:not([hidden]) {
  border-color: color-mix(in srgb, var(--xhy-gold) 36%, var(--xhy-line)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--xhy-green-soft) 58%, transparent), color-mix(in srgb, var(--xhy-warm-white) 78%, transparent)),
    var(--xhy-surface) !important;
  color: var(--xhy-body) !important;
  box-shadow: var(--xhy-shadow-soft) !important;
}

body.admin-page .teacher-quick-card,
body.admin-page .teacher-quick-card.primary,
body.admin-page .teacher-quick-card.active {
  border-color: color-mix(in srgb, var(--xhy-green) 28%, var(--xhy-line)) !important;
  background: var(--xhy-surface-strong) !important;
  color: var(--xhy-green-deep) !important;
  -webkit-text-fill-color: var(--xhy-green-deep) !important;
  box-shadow: none !important;
}

body.admin-page .teacher-quick-card strong,
body.admin-page .teacher-quick-card.active strong,
body.admin-page .teacher-quick-card.primary strong {
  color: var(--xhy-green-deep) !important;
  -webkit-text-fill-color: var(--xhy-green-deep) !important;
}

body.admin-page .teacher-quick-card span,
body.admin-page .teacher-quick-card.active span,
body.admin-page .teacher-quick-card.primary span {
  color: var(--xhy-muted) !important;
  -webkit-text-fill-color: var(--xhy-muted) !important;
  opacity: 1 !important;
}

body.admin-page .teacher-quick-card:hover,
body.admin-page .teacher-quick-card:focus-visible {
  border-color: color-mix(in srgb, var(--xhy-green) 48%, var(--xhy-line)) !important;
  background: var(--xhy-green-soft) !important;
}

@media (min-width: 1080px) {
  body.admin-page .tabs {
    border: 1px solid color-mix(in srgb, var(--xhy-gold) 36%, var(--xhy-line)) !important;
    background:
      linear-gradient(180deg, var(--xhy-surface-strong), color-mix(in srgb, var(--xhy-warm-white) 74%, var(--xhy-surface))) !important;
    box-shadow: var(--xhy-shadow-soft) !important;
  }

  body.admin-page .tabs::before {
    border-bottom-color: color-mix(in srgb, var(--xhy-gold) 38%, var(--xhy-line)) !important;
    color: var(--xhy-green-deep) !important;
    -webkit-text-fill-color: var(--xhy-green-deep) !important;
  }

  body.admin-page .tabs::after {
    border-top-color: color-mix(in srgb, var(--xhy-gold) 34%, var(--xhy-line)) !important;
    color: var(--xhy-muted) !important;
    -webkit-text-fill-color: var(--xhy-muted) !important;
  }

  body.admin-page .tabs .tab {
    border-color: color-mix(in srgb, var(--xhy-line) 72%, transparent) !important;
    background: var(--xhy-surface-strong) !important;
    color: var(--xhy-green-deep) !important;
    -webkit-text-fill-color: var(--xhy-green-deep) !important;
  }

  body.admin-page .tabs .tab.active,
  body.admin-page .tabs .tab:not(.active):hover,
  body.admin-page .tabs .tab:not(.active):focus-visible {
    border-color: color-mix(in srgb, var(--xhy-green) 42%, var(--xhy-line)) !important;
    background: var(--xhy-green-soft) !important;
    color: var(--xhy-green-deep) !important;
    -webkit-text-fill-color: var(--xhy-green-deep) !important;
  }
}

/* 2026-07-05: parent center mobile action contrast.
   This intentionally comes last because earlier global readability contracts
   reset parent buttons after the dashboard tab styles. */
body.parent-center-page .dashboard-tabs {
  border: 1px solid rgba(198, 167, 106, 0.3) !important;
  border-radius: 8px !important;
  background: rgba(246, 241, 232, 0.72) !important;
}

body.parent-center-page .dashboard-tab,
body.parent-center-page .dashboard-tab:not(.active),
body.parent-center-page .dashboard-tab:not(.active):hover,
body.parent-center-page .dashboard-tab:not(.active):focus-visible {
  border: 1px solid rgba(198, 167, 106, 0.24) !important;
  border-radius: 8px !important;
  background: var(--xhy-surface-strong) !important;
  color: var(--xhy-green-deep) !important;
  -webkit-text-fill-color: var(--xhy-green-deep) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

body.parent-center-page .dashboard-tab.active,
body.parent-center-page .dashboard-tab.active:hover,
body.parent-center-page .dashboard-tab.active:focus-visible {
  border: 1px solid var(--xhy-green) !important;
  border-radius: 8px !important;
  background: var(--xhy-green) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: none !important;
}

body.parent-center-page .dashboard-tab.active::after {
  display: none !important;
}

body.parent-center-page .content-item a,
body.parent-center-page .content-item a.secondary,
body.parent-center-page .content-item a:visited,
body.parent-center-page .content-item a.secondary:visited,
body.parent-center-page .content-item a:hover,
body.parent-center-page .content-item a:focus-visible {
  min-width: 74px !important;
  width: fit-content !important;
  min-height: 34px !important;
  padding: 5px 14px !important;
  border-color: rgba(47, 111, 94, 0.18) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.66) !important;
  color: var(--xhy-green-deep) !important;
  -webkit-text-fill-color: var(--xhy-green-deep) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

body.parent-center-page .content-item a:hover,
body.parent-center-page .content-item a:focus-visible {
  background: rgba(47, 111, 94, 0.06) !important;
  border-color: rgba(47, 111, 94, 0.26) !important;
}

body.parent-center-page .dashboard-student-card .student-title-name {
  font-family: var(--xhy-font-admin-student-title-svg-songti) !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
  font-synthesis: none !important;
  -webkit-font-smoothing: antialiased !important;
}

/* 2026-07-05: admin mobile teacher workflow v2.
   Phone-first backend layout for teachers checking details between classes:
   fewer heavy blocks, clearer hierarchy, compact light actions, and more
   breathing room around the student card content. */
@media (max-width: 760px) {
  body.admin-page {
    background: var(--xhy-warm-white) !important;
  }

  body.admin-page .admin-shell {
    padding: 8px !important;
  }

  body.admin-page .admin-app {
    padding: 14px !important;
    border-radius: 10px !important;
    background: rgba(255, 254, 250, 0.92) !important;
    box-shadow: none !important;
  }

  body.admin-page .topbar {
    gap: 12px !important;
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
  }

  body.admin-page .topbar h1 {
    font-size: 19px !important;
    line-height: 1.25 !important;
  }

  body.admin-page .tabs {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    overflow-x: auto !important;
    margin: 10px -2px 18px !important;
    padding: 0 2px 8px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    scrollbar-width: none !important;
  }

  body.admin-page .tabs::-webkit-scrollbar {
    display: none !important;
  }

  body.admin-page .tab {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 58px !important;
    min-height: 36px !important;
    padding: 7px 13px !important;
    border-radius: 999px !important;
    border-color: rgba(198, 167, 106, 0.24) !important;
    background: rgba(255, 254, 250, 0.88) !important;
    color: var(--xhy-green-deep) !important;
    -webkit-text-fill-color: var(--xhy-green-deep) !important;
    font-size: 13px !important;
    font-weight: 760 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
  }

  body.admin-page .tab.active {
    border-color: var(--xhy-green) !important;
    background: var(--xhy-green) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  body.admin-page .teacher-workbench:not([hidden]) {
    margin: 0 0 18px !important;
    padding: 16px !important;
    border-radius: 10px !important;
    background:
      linear-gradient(135deg, rgba(47, 111, 94, 0.08), rgba(246, 241, 232, 0.72)),
      rgba(255, 254, 250, 0.94) !important;
  }

  body.admin-page .teacher-workbench h2,
  body.admin-page .view h2 {
    margin-bottom: 10px !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
  }

  body.admin-page .teacher-quick-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.admin-page .teacher-quick-card,
  body.admin-page .teacher-quick-card.primary,
  body.admin-page .teacher-quick-card.active {
    min-height: 104px !important;
    padding: 15px !important;
    border-radius: 8px !important;
    background: rgba(255, 254, 250, 0.92) !important;
  }

  body.admin-page .teacher-quick-card strong {
    font-size: 24px !important;
    line-height: 1.05 !important;
  }

  body.admin-page .teacher-quick-card span {
    margin-top: 8px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  body.admin-page .toolbar,
  body.admin-page .manage-toolbar,
  body.admin-page .batch-controls,
  body.admin-page .growth-filter-panel,
  body.admin-page .classroom-filter-panel {
    gap: 10px !important;
  }

  body.admin-page .batch-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body.admin-page .record-list,
  body.admin-page .history-list,
  body.admin-page .ledger-list {
    gap: 18px !important;
  }

  body.admin-page .record-card,
  body.admin-page .history-card,
  body.admin-page .ledger-record,
  body.admin-page .audit-card,
  body.admin-page .account-user-card,
  body.admin-page .backup-card {
    margin: 0 !important;
    padding: 22px 20px !important;
    border: 1px solid rgba(198, 167, 106, 0.22) !important;
    border-radius: 10px !important;
    background: rgba(255, 254, 250, 0.94) !important;
    box-shadow: none !important;
  }

  body.admin-page .record-card.selectable {
    position: relative !important;
    padding-left: 78px !important;
  }

  body.admin-page .record-card.selectable > .student-check,
  body.admin-page .record-card.selectable > input[type="checkbox"] {
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
  }

  body.admin-page .record-card.selectable > div {
    min-width: 0 !important;
  }

  body.admin-page .record-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 14px !important;
    align-items: start !important;
  }

  body.admin-page .record-head > div {
    min-width: 0 !important;
  }

  body.admin-page .record-head h3,
  body.admin-page .record-head h3.student-title-row {
    margin: 0 0 10px !important;
    line-height: 1.25 !important;
  }

  body.admin-page .student-title-svg {
    max-height: 32px !important;
  }

  body.admin-page .meta {
    display: block !important;
    color: rgba(55, 77, 69, 0.68) !important;
    -webkit-text-fill-color: rgba(55, 77, 69, 0.68) !important;
    font-size: 13px !important;
    font-weight: 520 !important;
    line-height: 1.85 !important;
  }

  body.admin-page .student-id-pill,
  body.admin-page .phone-call-link {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
    max-width: 100% !important;
    margin: 2px 4px 2px 0 !important;
    padding: 2px 9px !important;
    border: 1px solid rgba(47, 111, 94, 0.08) !important;
    border-radius: 999px !important;
    background: rgba(47, 111, 94, 0.08) !important;
    color: rgba(31, 51, 45, 0.72) !important;
    -webkit-text-fill-color: rgba(31, 51, 45, 0.72) !important;
    font-size: 12px !important;
    font-weight: 720 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  body.admin-page .balance {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 3px !important;
    margin: 6px 0 0 !important;
    color: var(--xhy-ink) !important;
    -webkit-text-fill-color: var(--xhy-ink) !important;
    font-size: clamp(24px, 7vw, 34px) !important;
    font-weight: 780 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body.admin-page .balance::before {
    content: "余额" !important;
    margin-right: 4px !important;
    color: var(--xhy-muted) !important;
    -webkit-text-fill-color: var(--xhy-muted) !important;
    font-size: 12px !important;
    font-weight: 720 !important;
  }

  body.admin-page .card-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
    margin-top: 18px !important;
  }

  body.admin-page .card-actions input,
  body.admin-page .card-actions select,
  body.admin-page .card-actions label {
    grid-column: 1 / -1 !important;
  }

  body.admin-page .card-actions button[data-action="consume"],
  body.admin-page .card-actions button[data-action="recharge"] {
    grid-column: 1 / -1 !important;
  }

  body.admin-page .quick-view-link,
  body.admin-page button.secondary.compact-button[data-action="quick-view"],
  body.admin-page .card-actions > .compact-button[data-action="quick-view"] {
    width: fit-content !important;
    min-width: 74px !important;
    min-height: 32px !important;
    padding: 5px 13px !important;
    border: 1px solid rgba(47, 111, 94, 0.16) !important;
    border-radius: 8px !important;
    background: rgba(255, 254, 250, 0.72) !important;
    color: var(--xhy-green-deep) !important;
    -webkit-text-fill-color: var(--xhy-green-deep) !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
  }

  body.admin-page .quick-view-link:hover,
  body.admin-page .quick-view-link:focus-visible,
  body.admin-page button.secondary.compact-button[data-action="quick-view"]:hover,
  body.admin-page button.secondary.compact-button[data-action="quick-view"]:focus-visible {
    border-color: rgba(47, 111, 94, 0.26) !important;
    background: rgba(47, 111, 94, 0.06) !important;
  }

  body.admin-page .roster-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 14px !important;
    border-radius: 8px !important;
  }

  body.admin-page .audit-actions {
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  body.admin-page .audit-actions button,
  body.admin-page .account-actions button,
  body.admin-page .backup-actions button {
    width: auto !important;
    min-height: 36px !important;
    padding: 7px 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  body.admin-page .empty-state,
  body.admin-page .hint,
  body.admin-page .status {
    border-radius: 10px !important;
    line-height: 1.7 !important;
  }
}

/* 2026-07-05: admin mobile overview target v3 final lock.
   This sits after previous mobile rules so the approved overview wins. */
@media (max-width: 760px) {
  body.admin-page .admin-shell {
    max-width: 430px !important;
    padding: 8px 12px 18px !important;
  }

  body.admin-page .admin-app,
  body.admin-page .view,
  body.admin-page .teacher-workbench:not([hidden]) {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.admin-page .topbar {
    margin: 0 0 10px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    background: rgba(255, 254, 250, 0.96) !important;
  }

  body.admin-page .topbar-logo,
  body.admin-page #current-user,
  body.admin-page .teacher-workbench-head {
    display: none !important;
  }

  body.admin-page .topbar h1 {
    font-family: var(--xhy-font-ui) !important;
    font-size: 17px !important;
    font-weight: 860 !important;
    line-height: 1.22 !important;
  }

  body.admin-page .logout-button {
    min-width: 44px !important;
    min-height: 25px !important;
    padding: 4px 10px !important;
    border-radius: 7px !important;
    font-size: 10px !important;
  }

  body.admin-page .tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    overflow-x: auto !important;
    margin: 0 0 12px !important;
    padding: 0 0 3px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.admin-page .tab {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 22px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  body.admin-page .toolbar,
  body.admin-page .manage-toolbar,
  body.admin-page .batch-controls,
  body.admin-page .growth-filter-panel,
  body.admin-page .classroom-filter-panel,
  body.admin-page .workspace-switcher,
  body.admin-page .teacher-workbench:not([hidden]) {
    margin: 0 0 12px !important;
    padding: 12px !important;
    border-radius: 9px !important;
    background: rgba(255, 254, 250, 0.82) !important;
    box-shadow: none !important;
  }

  body.admin-page .teacher-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.admin-page .teacher-quick-card,
  body.admin-page .teacher-quick-card.primary,
  body.admin-page .teacher-quick-card.active {
    min-height: 54px !important;
    padding: 10px !important;
    border-radius: 7px !important;
    background: rgba(255, 254, 250, 0.96) !important;
    box-shadow: none !important;
  }

  body.admin-page .teacher-quick-card strong {
    margin-bottom: 5px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  body.admin-page .teacher-quick-card span {
    font-size: 9px !important;
    line-height: 1.35 !important;
  }

  body.admin-page :where(input, select, textarea) {
    min-height: 34px !important;
    padding: 7px 10px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
  }

  body.admin-page :where(button) {
    min-height: 34px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
  }

  body.admin-page .record-list,
  body.admin-page .history-list,
  body.admin-page .ledger-list,
  body.admin-page .quick-list {
    gap: 10px !important;
  }

  body.admin-page .record-card,
  body.admin-page .history-card,
  body.admin-page .ledger-record,
  body.admin-page .audit-card,
  body.admin-page .account-user-card,
  body.admin-page .backup-card,
  body.admin-page .quick-card-item {
    padding: 12px !important;
    border-radius: 7px !important;
    box-shadow: 0 1px 3px rgba(47, 53, 46, 0.04) !important;
  }

  body.admin-page .record-card.selectable {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    padding-left: 12px !important;
  }

  body.admin-page .record-card.selectable > .student-check,
  body.admin-page .record-card.selectable > input[type="checkbox"] {
    position: static !important;
    width: 21px !important;
    min-width: 21px !important;
    height: 21px !important;
    min-height: 21px !important;
    transform: none !important;
  }

  body.admin-page .record-head h3,
  body.admin-page .record-head h3.student-title-row {
    margin: 0 0 5px !important;
    font-size: 16px !important;
    line-height: 1.18 !important;
  }

  body.admin-page .student-title-svg {
    max-height: 22px !important;
  }

  body.admin-page .meta,
  body.admin-page .record-card .meta,
  body.admin-page .record-card p {
    font-size: 9px !important;
    line-height: 1.55 !important;
  }

  body.admin-page .student-id-pill,
  body.admin-page .phone-call-link,
  body.admin-page .count-pill,
  body.admin-page .tag {
    min-height: 17px !important;
    padding: 2px 6px !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  body.admin-page .balance {
    margin: 4px 0 0 !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
  }

  body.admin-page .balance::before {
    margin-right: 2px !important;
    font-size: 8px !important;
  }

  body.admin-page .card-actions {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 7px !important;
    margin-top: 8px !important;
  }

  body.admin-page .card-actions button[data-action="consume"],
  body.admin-page .card-actions button[data-action="recharge"] {
    width: auto !important;
    min-width: 74px !important;
    justify-self: end !important;
  }

  body.admin-page .quick-view-link,
  body.admin-page button.secondary.compact-button[data-action="quick-view"],
  body.admin-page .card-actions > .compact-button[data-action="quick-view"],
  body.admin-page .audit-actions button.secondary,
  body.admin-page .account-actions button,
  body.admin-page .backup-actions button {
    min-width: 58px !important;
    min-height: 24px !important;
    padding: 4px 9px !important;
    border-radius: 6px !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
  }
}
/* System button standard: light surfaces, centered content, no large solid fills. */
:where(button, [role="button"]):not(.xhy-theme-toggle) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--xhy-green, #2f6f5e) !important;
  -webkit-text-fill-color: var(--xhy-green, #2f6f5e) !important;
  border-color: rgba(47, 111, 94, 0.24) !important;
  box-shadow: none !important;
}

:where(button, [role="button"]):is(.active, [aria-selected="true"], [aria-pressed="true"]):not(.xhy-theme-toggle) {
  background: #e8f0ec !important;
  color: #17483d !important;
  -webkit-text-fill-color: #17483d !important;
}

:where(button, [role="button"]):is(.danger, .v2-danger-light, .lesson-action.danger):not(.xhy-theme-toggle) {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #a34f43 !important;
  -webkit-text-fill-color: #a34f43 !important;
  border-color: rgba(163, 79, 67, 0.28) !important;
}

:where(button, [role="button"]):disabled {
  opacity: 0.46 !important;
}