/* Shared visual language. Business states keep their own semantic colors. */
:root {
  color-scheme: light;
  --ui-primary: #23766d;
  --ui-primary-hover: #195e57;
  --ui-ink: #1d1d1f;
  --ui-muted: #626268;
  --ui-bg: #f5f5f7;
  --ui-surface: #ffffff;
  --ui-line: #e1e2e6;
  --ui-soft: #eaf3f0;
  --ui-shadow: 0 2px 8px rgba(20, 24, 32, .025), 0 0 0 .5px rgba(20, 24, 32, .025);
  --ui-shadow-raised: 0 24px 70px rgba(20, 24, 32, .16), 0 2px 8px rgba(20, 24, 32, .06);
  --ui-radius: 18px;
  --ui-focus: rgba(35, 118, 109, .18);
  /* Compatibility for embedded pages and lazily loaded widgets. */
  --violet: var(--ui-primary);
  --violet2: #39867b;
  --vsoft: var(--ui-soft);
  --vline: #bfd6cb;
  --ink: var(--ui-ink);
  --ink2: #48484e;
  --gray: var(--ui-muted);
  --bg: var(--ui-bg);
  --card: var(--ui-surface);
  --line: var(--ui-line);
  --primary-hover: var(--ui-primary-hover);
  --price: #1d625a;
  --quiet: #f2f2f7;
  --hover: #f0f2f3;
  --focus: var(--ui-focus);
  --orange: #986322;
  --amber-soft: #fbf3e7;
  --amber-line: #e9d4b0;
}
body {
  color: var(--ui-ink);
  background: var(--ui-bg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font-family: inherit; }
button, a, input, select, textarea { touch-action: manipulation; }
button, input, select, textarea { accent-color: var(--ui-primary); }
button, a { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
::selection { background: #cce5d9; color: #173f39; }
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ui-primary);
  outline-offset: 3px;
}
:where(input, select, textarea):focus-visible {
  border-color: var(--ui-primary);
  outline: 2px solid var(--ui-primary);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px var(--ui-focus);
}
input::placeholder, textarea::placeholder { color: #77777e; opacity: 1; }
.ui-page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 6px 2px 22px; }
.ui-page-intro h1 { margin: 0; font-size: 28px; line-height: 1.3; font-weight: 750; letter-spacing: -.7px; }
.ui-page-intro p { margin: 8px 0 0; font-size: 13px; line-height: 1.7; color: var(--ui-muted); }
.ui-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; color: var(--ui-primary); margin-bottom: 8px; }
/* Shared checkout widgets inject their own CSS; these scoped rules keep their
   visual appearance consistent without changing payment behavior. */
body :is(.rc-ov, .dp-ov) { color: var(--ui-ink); background: rgba(24, 44, 38, .48); }
body :is(.rc-box, .dp-box) { border: 1px solid var(--ui-line); border-radius: 20px; box-shadow: var(--ui-shadow-raised); }
body :is(.rc-row, .dp-rows, .dp-row, .rc-close, .dp-close) { border-color: var(--ui-line); }
body .rc-row.on { border-color: var(--ui-primary); background: var(--ui-soft); }
body .rc-row input { accent-color: var(--ui-primary); }
body :is(.rc-row-pts, .rc-pay-amt, .dp-amount) { color: var(--ui-primary); }
body :is(.rc-row-sub, .rc-gray, .rc-poll, .rc-meta, .dp-meta) { color: var(--ui-muted); }
body :is(.rc-badge, .rc-btn-v, .dp-button) { background: var(--ui-primary); color: #fff; }
body .dp-secondary { background: #fff; color: var(--ui-primary); border-color: var(--ui-line); }
body .dp-note { background: var(--ui-bg); }
body :is(.rc-close, .dp-close) { min-height: 40px; }
@media (max-width: 640px) {
  :root { --ui-bg: #f2f2f7; --ui-radius: 18px; }
  .ui-page-intro { margin: 2px 2px 18px; }
  .ui-page-intro h1 { font-size: 24px; letter-spacing: -.4px; }
  .ui-page-intro p { font-size: 12px; margin-top: 6px; }
  .ui-eyebrow { font-size: 10px; margin-bottom: 6px; }
  /* Prevent iOS focus zoom without changing checkbox/radio geometry. */
  :is(body.ui-query, body.ui-mine, body.ui-shop, body.ui-mall) :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { font-size: 16px; }
}
@media (min-width: 1024px) {
  :root { --ui-radius: 16px; }
  body :is(.rc-box, .dp-box) { border-radius: 18px; }
  .ui-page-intro h1 { font-size: 30px; font-weight: 700; letter-spacing: -.8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body :where(button, a, input, select, textarea) { transition: none; }
}