@import url("/brand/palette.css?v=20261002-palette-1");

:root {
  color-scheme: light;
  --bg: var(--wx-bg); --panel: var(--wx-panel); --soft: var(--wx-soft); --text: var(--wx-text);
  --muted: var(--wx-muted); --line: var(--wx-line); --brand: var(--wx-link); --brand-hover: var(--wx-link-hover);
  --accent: var(--wx-tint); --danger: #a92224; --danger-bg: #fff0f0;
  --success: #176341; --success-bg: #edf9f1; --gold: #875d08; --gold-bg: #fff6da;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--wx-bg); --panel: var(--wx-panel); --soft: var(--wx-soft); --text: var(--wx-text);
  --muted: var(--wx-muted); --line: var(--wx-line); --brand: var(--wx-link); --brand-hover: var(--wx-link-hover);
  --accent: var(--wx-tint); --danger: #ffb7b7; --danger-bg: #462831;
  --success: #a4e3bc; --success-bg: #243f37; --gold: #f7d886; --gold-bg: #433b27;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --bg: var(--wx-bg); --panel: var(--wx-panel); --soft: var(--wx-soft); --text: var(--wx-text);
    --muted: var(--wx-muted); --line: var(--wx-line); --brand: var(--wx-link); --brand-hover: var(--wx-link-hover);
    --accent: var(--wx-tint); --danger: #ffb7b7; --danger-bg: #462831;
    --success: #a4e3bc; --success-bg: #243f37; --gold: #f7d886; --gold-bg: #433b27;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 0; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.65; }
button, input { font: inherit; max-width: 100%; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .55; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(26px, 4vw, 38px); line-height: 1.4; overflow-wrap: anywhere; }
h2 { font-size: 19px; margin-bottom: 16px; }
.site-header { border-bottom: 1px solid var(--line); background: var(--panel); }
.header-inner { width: min(1080px, calc(100% - 40px)); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 78px; padding: 14px 0; flex-wrap: wrap; }
.brand, .header-actions { display: flex; align-items: center; gap: 12px; }
.brand { font-weight: 700; color: var(--text); font-size: 19px; }
.brand img { object-fit: contain; background: var(--wx-accent); border-radius: 8px; }
.header-actions { flex-wrap: wrap; font-size: 14px; }
.theme-toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--text); background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; min-height: 40px; }
.theme-toggle b { font-weight: 500; }
.shell { width: min(1080px, calc(100% - 40px)); margin: 38px auto 48px; min-height: calc(100vh - 216px); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px; }
.loading-state { padding: 48px 24px; text-align: center; color: var(--muted); }
.message { padding: 12px 16px; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 22px; background: var(--accent); color: var(--text); overflow-wrap: anywhere; }
.message.error { color: var(--danger); background: var(--danger-bg); }
.message.success { color: var(--success); background: var(--success-bg); }
.auth-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
.auth-intro { padding-top: 42px; }
.eyebrow { display: block; color: var(--brand); font-size: 13px; font-weight: 700; margin-bottom: 10px; letter-spacing: .04em; }
.auth-intro > p { color: var(--muted); }
.reward-note { display: flex; gap: 14px; padding: 24px 0; margin-top: 25px; border-top: 1px solid var(--line); }
.coin-mark { flex: 0 0 auto; display: grid; place-items: center; background: var(--gold-bg); color: var(--gold); border-radius: 50%; font-size: 20px; font-weight: 800; width: 50px; height: 50px; }
.reward-note p { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
.auth-tabs { display: flex; border-bottom: 1px solid var(--line); gap: 28px; margin-bottom: 25px; }
.auth-tab { border: 0; background: transparent; color: var(--muted); font-weight: 700; padding: 0 10px 13px; font-size: 17px; border-bottom: 3px solid transparent; }
.auth-tab[aria-pressed="true"] { color: var(--brand); border-bottom-color: var(--brand); }
.account-form { display: flex; flex-direction: column; }
label { font-size: 14px; font-weight: 600; display: block; margin-bottom: 7px; }
input { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; background: var(--panel); color: var(--text); line-height: 1.5; }
input:read-only { background: var(--soft); }
.account-form input + label { margin-top: 18px; }
.field-help, .form-help { font-size: 12px; color: var(--muted); line-height: 1.7; margin: 7px 0 17px; }
.form-help { margin: 17px 0 0; }
.optional { color: var(--muted); font-weight: 400; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 6px; min-height: 44px; padding: 10px 18px; border-radius: 8px; border: 1px solid var(--brand); color: #fff; background: var(--wx-primary); font-size: 14px; font-weight: 650; white-space: nowrap; }
.button:hover:not(:disabled) { background: var(--wx-hover); border-color: var(--wx-hover); }
.button.secondary { color: var(--text); background: var(--panel); border-color: var(--line); }
.button.secondary:hover:not(:disabled) { background: var(--soft); border-color: var(--brand); }
.button.compact { padding: 7px 12px; min-height: 40px; font-size: 13px; }
.submit-button { margin-top: 22px; width: 100%; }
#register-form .submit-button { margin-top: 0; }
.dashboard-heading { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 25px; }
.dashboard-heading h1 { margin-bottom: 5px; }
.member-network { overflow-wrap: anywhere; }
.member-network code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.member-network span { display: block; font-size: 12px; }
.muted { color: var(--muted); font-size: 14px; margin: 7px 0 0; }
.stats-grid, .records-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.stat h2 { font-size: 15px; font-weight: 500; color: var(--muted); margin-bottom: 8px; }
.stat strong { display: block; font-size: 36px; line-height: 1.3; color: var(--brand); overflow-wrap: anywhere; }
.stat p { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
.invite-panel { margin: 20px 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.section-heading h2 { margin-bottom: 0; }
.reward-badge { color: var(--gold); background: var(--gold-bg); font-size: 13px; padding: 5px 11px; border-radius: 6px; }
.copy-row { display: flex; align-items: stretch; gap: 10px; }
.copy-row input { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; }
.invite-code-line { color: var(--muted); font-size: 14px; margin: 12px 0 18px; overflow-wrap: anywhere; }
code { color: var(--text); font-size: 14px; }
.rule-note { color: var(--muted); background: var(--soft); padding: 13px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 0; }
.records-panel { min-width: 0; }
.records-panel .section-heading { margin-bottom: 8px; }
.list-status { color: var(--muted); font-size: 14px; padding: 20px 0; margin-bottom: 0; }
.record-list { list-style: none; padding: 0; margin: 0; }
.record-list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); padding: 14px 0; }
.record-list li > div { min-width: 0; }
.record-title { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.record-subtitle, .record-date { display: block; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.record-amount { color: var(--success); font-weight: 750; white-space: nowrap; }
.record-amount.negative { color: var(--danger); }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 24px; }
.pagination span { font-size: 12px; color: var(--muted); text-align: center; }
.page-footer { text-align: center; color: var(--muted); font-size: 12px; padding: 0 20px 26px; }
@media (max-width: 760px) {
  .auth-layout { gap: 24px; grid-template-columns: 1fr; }
  .auth-intro { padding-top: 0; }
  .auth-intro h1 br { display: none; }
  .auth-intro h1 { font-size: 27px; margin-bottom: 12px; }
  .reward-note { padding: 16px 0 0; margin-top: 16px; }
  .records-grid { grid-template-columns: 1fr; }
  .shell { margin-top: 26px; }
}
@media (max-width: 480px) {
  .header-inner, .shell { width: calc(100% - 28px); }
  .header-inner { gap: 12px; }
  .header-actions { gap: 10px; width: 100%; justify-content: flex-end; }
  .brand { font-size: 18px; }
  .panel { padding: 21px 17px; border-radius: 11px; }
  .stats-grid { gap: 12px; }
  .stat { padding: 18px 13px; }
  .stat strong { font-size: 31px; }
  .dashboard-heading { align-items: flex-start; gap: 10px; }
  .dashboard-heading h1 { font-size: 25px; }
  .dashboard-heading .button { min-height: 40px; padding: 8px 12px; font-size: 12px; }
  .copy-row { flex-direction: column; }
  .copy-row .button { width: 100%; }
  .rule-note { padding: 12px; }
  input, .copy-row input { font-size: 16px; }
  .pagination { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* Optional account features retain the same controls on desktop and mobile. */
.account-extra-panel { margin-top: 20px; margin-bottom: 20px; }
.account-extra-panel .account-form { max-width: 560px; }
.account-extra-panel .account-form > .button { margin-top: 16px; }
.promotion-balances { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 20px 0; }
.promotion-balances > div { padding: 14px; border: 1px solid var(--wx-line); border-radius: 8px; background: var(--wx-soft); }
.promotion-balances dd { margin: 6px 0 0; font-size: 24px; font-weight: 700; overflow-wrap: anywhere; }
.promotion-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0; }
#promotion-code-box { margin: 20px 0; }
#promotion-code-box > label { display: block; margin-bottom: 8px; font-weight: 600; }
#promotion-orders { overflow-wrap: anywhere; }
@media (max-width: 520px) { .promotion-actions > * { width: 100%; } }