/* Shared visual contract for Web, H5, public pages and embedded tools. */
:root {
  color-scheme: light;
  --jx-bg: #f7f3ec;
  --jx-paper: #fffdf9;
  --jx-soft: #f0e8dc;
  --jx-text: #30271f;
  --jx-muted: #716457;
  --jx-line: #ded3c3;
  --jx-primary: #806039;
  --jx-primary-deep: #694a2a;
  --jx-gold: #ac8854;
  --jx-success: #466750;
  --jx-danger: #a74333;
  --jx-shadow: 0 8px 26px rgba(98,72,36,.06);
  --jx-ui: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --jx-display: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  --bg: var(--jx-bg); --bg-accent: var(--jx-soft);
  --surface: var(--jx-paper); --surface-strong: var(--jx-paper); --surface-2: #f8f2e8;
  --border: var(--jx-line); --border-strong: #b3a18c;
  --text: var(--jx-text); --text-muted: var(--jx-muted); --muted: var(--jx-muted);
  --primary: var(--jx-primary); --primary-deep: var(--jx-primary-deep); --primary-soft: var(--jx-soft);
  --highlight: var(--jx-primary); --gold: var(--jx-gold); --gold-2: #e5d2b3; --gold-deep: var(--jx-primary);
  --ink-dark: #3b2b1d; --cream: #faf3e7; --danger: var(--jx-danger);
  --shadow: var(--jx-shadow); --shadow-sm: 0 4px 14px rgba(98,72,36,.04);
  --font-ui: var(--jx-ui); --font-display: var(--jx-display);
  --radius-xl: 20px; --radius-lg: 16px; --radius-md: 12px; --radius-sm: 8px;
  --auth-bg: var(--jx-bg); --auth-card: var(--jx-paper); --auth-border: var(--jx-line);
  --auth-shadow: var(--jx-shadow); --auth-text: var(--jx-text); --auth-muted: var(--jx-muted);
  --auth-accent: var(--jx-primary); --auth-accent-dark: var(--jx-primary-deep);
  --mobile-bg: var(--jx-bg); --mobile-bg-deep: var(--jx-soft); --mobile-surface: var(--jx-paper);
  --mobile-card: var(--jx-paper); --mobile-border: var(--jx-line); --mobile-text: var(--jx-text);
  --mobile-muted: var(--jx-muted); --mobile-text-secondary: var(--jx-muted);
  --mobile-primary: var(--jx-primary); --mobile-primary-deep: var(--jx-primary-deep); --mobile-soft: #f0e8dc;
  --mobile-green: var(--jx-success); --mobile-yellow: #89612c; --mobile-red: var(--jx-danger);
  --mobile-shadow: var(--jx-shadow); --mobile-shadow-card: var(--jx-shadow); --mobile-shadow-item: none;
  --mobile-radius-xl: 20px; --mobile-radius-lg: 16px; --mobile-radius-md: 12px; --mobile-radius-sm: 8px;
  --mobile-font: var(--jx-ui); --mobile-display: var(--jx-display);
  --status-today: #466750; --status-today-bg: #eaf0e7; --status-overdue: var(--jx-danger); --status-overdue-bg: #f8e7e1;
  --mm-ink: var(--jx-text); --mm-muted: var(--jx-muted); --mm-line: var(--jx-line);
  --mm-paper: var(--jx-paper); --mm-canvas: var(--jx-bg); --mm-green: var(--jx-primary);
  --mm-green-dark: var(--jx-primary-deep); --mm-green-pale: var(--jx-soft); --mm-gold: var(--jx-gold);
  --mm-danger: var(--jx-danger); --mm-shadow: var(--jx-shadow);
  --hy-ink: var(--jx-text); --hy-muted: var(--jx-muted); --hy-line: var(--jx-line);
  --hy-paper: var(--jx-paper); --hy-soft: var(--jx-bg); --hy-red: var(--jx-primary);
  --hy-red-dark: var(--jx-primary-deep); --hy-teal: var(--jx-success); --hy-gold: var(--jx-gold);
  --hy-night: #3b2b1d; --hy-shadow: var(--jx-shadow);
}
html:has(body[data-brand-surface]), body[data-brand-surface] { background: var(--jx-bg); color: var(--jx-text); font-family: var(--jx-ui); }
body[data-brand-surface] :is(button,input,select,textarea) { font-family: var(--jx-ui); }
body[data-brand-surface] :is(a,button,input,select,textarea):focus-visible { outline: 3px solid var(--jx-primary); outline-offset: 3px; }
body[data-brand-surface] :is(button,a) { -webkit-tap-highlight-color: transparent; }
body[data-brand-surface] [hidden] { display: none !important; }
.jx-brand { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; color: var(--jx-text); text-decoration: none; }
.jx-brand-mark { width: 42px; height: 46px; object-fit: contain; flex-shrink: 0; }
.jx-brand-copy { display: grid; gap: 5px; min-width: 0; }
.jx-brand-copy strong { font-family: var(--jx-display); font-size: 20px; line-height: 1.3; letter-spacing: 1px; }
.jx-brand-copy small { font: 8px/1.4 var(--jx-ui); letter-spacing: 2px; color: var(--jx-muted); }
.jx-icon { display: inline-block; width: 22px; height: 22px; flex-shrink: 0; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.jx-mark-image { width: 100%; height: 100%; object-fit: contain; }
.jx-missing-image { object-fit: contain !important; padding: 16px; background: var(--jx-soft); }
body[data-brand-surface] :is(.primary-button,.primary-action,.mm-button-primary,.pill-button.solid,.btn-primary,.btn.solid) { background: var(--jx-primary); color: #fffdf9; border-color: var(--jx-primary); border-radius: 12px; min-height: 48px; box-shadow: 0 5px 14px rgba(128,96,57,.10); }
body[data-brand-surface] :is(.primary-button,.primary-action,.mm-button-primary,.pill-button.solid,.btn-primary,.btn.solid):hover { background: var(--jx-primary-deep); }
body[data-brand-surface] :is(.ghost-button,.secondary-button,.secondary-action,.text-button,.pill-button,.mm-button,.action-strip-button,.chip-button) { border-radius: 10px; }
body[data-brand-surface] :is(.ghost-button,.secondary-button,.secondary-action,.mm-button,.pill-button,.action-strip-button) { min-height: 44px; }
body[data-brand-surface] button:disabled { cursor: not-allowed; }
body[data-brand-surface] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),select,textarea) { border-color: var(--jx-line); border-radius: 10px; color: var(--jx-text); }
body[data-brand-surface] :is(input,textarea)::placeholder { color: var(--jx-muted); opacity: 1; }
body[data-brand-surface] :is(.surface,.mobile-card,.surface-card,.modal-card,.member-drawer__panel) { background-color: var(--jx-paper); border-color: var(--jx-line); box-shadow: var(--jx-shadow); }
body[data-brand-surface] :is(.empty-state,.mm-empty):not(:has(svg)):not(:has(img))::before { content: ''; display: block; width: 100px; height: 75px; margin: 0 auto 8px; background: url('/assets/brand/states/empty.svg') center/contain no-repeat; }
@media(max-width:700px) {
  body[data-brand-surface] :is(input:not([type=checkbox]):not([type=radio]),select,textarea) { font-size: 16px; }
  .jx-brand-mark { width: 30px; height: 33px; }
  .jx-brand-copy strong { font-size: 16px; letter-spacing: 0; }
  .jx-brand-copy small { font-size: 6px; letter-spacing: 1.5px; }
}
@media(prefers-reduced-motion:reduce) { body[data-brand-surface] *, body[data-brand-surface] *::before, body[data-brand-surface] *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }