#m-app {
  color-scheme: light;

  --canvas: #f4f5f7;
  --surface: #ffffff;
  --surface-muted: #f2f3f5;
  --surface-subtle: #f8f9fb;
  --surface-raised: #ffffff;
  --surface-hover: #f2f3f5;
  --surface-selected: #eaf1fe;
  --border: #eceded;
  --border-strong: #dee0e3;
  --border-subtle: #eef0f3;
  --text-primary: #1f2329;
  --text-secondary: #646a73;
  --text-tertiary: #8f959e;
  --text-inverse: #ffffff;
  --action: #3370ff;
  --action-hover: #2b5fd9;
  --action-soft: #eaf1fe;
  --market-up: #e04536;
  --market-up-soft: #fdecea;
  --market-down: #16a34a;
  --market-down-soft: #e9f7ee;
  --warning: #b45309;
  --warning-soft: #fdf3e3;
  --chart-up: #c93f45;
  --chart-down: #087a55;
  --elevation-card: 0 1px 2px rgba(31, 35, 41, .04);
  --elevation-float: 0 12px 32px rgba(0, 0, 0, .14);
  --backdrop: rgba(17, 24, 39, .48);

  --motion-press: 100ms;
  --motion-press-release: 160ms;
  --motion-fade: 120ms;
  --motion-enter: 260ms;
  --motion-exit: 200ms;
  --motion-pop: 240ms;
  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-press: ease-out;

  --mobile-header-height: 52px;
  --mobile-touch-size: 44px;
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-page-padding: 12px;
  --mobile-chart-height: 240px;
  --mobile-table-row-height: 44px;
  --mobile-table-header-height: 40px;
  --mobile-icon-cell: 78px;
  --mobile-sheet-radius: 12px;
  --mobile-min-width: 320px;
  --mobile-tabbar-height: 56px;
  --mobile-tabbar-label-size: 11px;
  --m-keyboard-inset: 0px;

  --font-size-aux: 11.5px;
  --font-size-caption: 12.5px;
  --font-size-label: 13px;
  --font-size-table: 13.5px;
  --font-size-body: 14px;
  --font-size-card-title: 15px;
  --font-size-page-title: 18px;
  --font-size-metric: 24px;

  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 14px;
}

#m-app[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #141519;
  --surface: #232529;
  --surface-muted: #2a2d33;
  --surface-subtle: #202329;
  --surface-raised: #232529;
  --surface-hover: #2a2d33;
  --surface-selected: #2b3b58;
  --border: #2b2e34;
  --border-strong: #3a3e47;
  --border-subtle: #2b2e34;
  --text-primary: #e8eaed;
  --text-secondary: #a9adb3;
  --text-tertiary: #7c828a;
  --text-inverse: #ffffff;
  --action: #5b8def;
  --action-hover: #7ba5f5;
  --action-soft: #2b3b58;
  --market-up: #f26762;
  --market-up-soft: #3d2829;
  --market-down: #43bc8a;
  --market-down-soft: #22362c;
  --warning: #e2ad58;
  --warning-soft: #3d3220;
  --chart-up: #f06d73;
  --chart-down: #43bc8a;
  --elevation-card: 0 1px 2px rgba(0, 0, 0, .28);
  --elevation-float: 0 12px 32px rgba(0, 0, 0, .46);
  --backdrop: rgba(0, 0, 0, .66);
}