/* Figma Project Colors · Dark/Light · 2026-10-08. See docs/figma-colors.json. */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --brand-blue-default: #5c7bff;
  --brand-blue-active: #536fe5;
  --brand-blue-hover: #6c88ff;
  --brand-blue-subtle: rgba(92, 123, 255, 0.250);
  --brand-blue-disabled: rgba(92, 123, 255, 0.100);
  --brand-pink-default: #ff538d;
  --brand-pink-active: #e54b7f;
  --brand-pink-hover: #ff6498;
  --brand-pink-subtle: rgba(255, 83, 141, 0.250);
  --brand-pink-disabled: rgba(255, 83, 141, 0.100);
  --brand-indigo-default: #2e3eb3;
  --brand-indigo-active: #2938a1;
  --brand-indigo-hover: #4351bb;
  --brand-indigo-subtle: rgba(46, 62, 179, 0.250);
  --brand-indigo-disabled: rgba(46, 62, 179, 0.100);
  --accent-cyan-default: #4dc2e3;
  --accent-cyan-light: #78daf0;
  --brand-gradient-default-start: #5c7bff;
  --brand-gradient-default-end: #ff538d;
  --brand-gradient-active-start: #536fe5;
  --brand-gradient-active-end: #e54b7f;
  --brand-gradient-hover-start: #6c88ff;
  --brand-gradient-hover-end: #ff6498;
  --brand-gradient-subtle-start: rgba(92, 123, 255, 0.250);
  --brand-gradient-subtle-end: rgba(255, 83, 141, 0.250);
  --brand-gradient-disabled-start: rgba(92, 123, 255, 0.100);
  --brand-gradient-disabled-end: rgba(255, 83, 141, 0.100);
  --text-primary: #141418;
  --text-secondary: #3d3c4a;
  --text-tertiary: #5c5b69;
  --text-muted: #7e7d8d;
  --text-disabled: #9a99a5;
  --bg-page: #ffffff;
  --bg-surface: #f7f7fa;
  --bg-emphasis: #eeeef1;
  --bg-disabled: #e4e4e8;
  --border-default: #eeeef1;
  --state-success: #2fcc66;
  --state-warning: #ff9900;
  --state-danger: #e44545;
  --overlay-mask-default: rgba(0, 0, 0, 0.500);
  --overlay-mask-strong: rgba(0, 0, 0, 0.750);
  --membership-accent: #f7c156;
  --membership-on-accent: #802600;
  --media-tag-background: rgba(20, 20, 24, 0.800);
  --bg-media-placeholder-strong: #cdd1d5;
  --membership-tier-blue-subtle: rgba(92, 123, 255, 0.102);
  --membership-tier-blue-on-subtle: #536fe5;
  --membership-tier-pink-subtle: rgba(255, 83, 141, 0.102);
  --membership-tier-pink-on-subtle: #e54b7f;
  --membership-price-gradient-start: #536fe5;
  --membership-price-gradient-end: #e54b7f;
  --text-on-brand: #ffffff;
  --membership-account-card-coin-bg-start: #eef2ff;
  --membership-account-card-coin-bg-mid: #fff4e0;
  --membership-account-card-coin-bg-end: #fff1f7;
  --membership-account-card-vip-bg-start: #eef1ff;
  --membership-account-card-vip-bg-mid: #f7ecff;
  --membership-account-card-vip-bg-end: #fff4e5;
  --membership-account-card-surface-meta: rgba(255, 255, 255, 0.720);
  --membership-account-card-surface-feature: rgba(255, 255, 255, 0.720);
  --membership-account-card-border-feature: rgba(20, 20, 24, 0.080);
  --membership-account-card-glow-coin: rgba(247, 164, 86, 0.100);
  --membership-account-card-glow-vip-pink: rgba(255, 83, 141, 0.180);
  --membership-account-card-glow-vip-blue: rgba(92, 123, 255, 0.120);
  --membership-account-card-glow-vip-gold: rgba(247, 164, 86, 0.080);
  --membership-account-card-shadow-card: rgba(20, 20, 24, 0.100);
  --membership-selection-card-month-surface: #fafbff;
  --membership-selection-card-quarter-surface: #fff9fc;
  --membership-selection-card-year-surface: #f8f7ff;
  --membership-selection-text-on-dark-primary: #ffffff;
  --membership-selection-text-on-dark-secondary: #cbc9d4;
  --membership-selection-text-on-dark-muted: #aaa7b4;
  --membership-selection-text-accent-foreground: #9b5c00;
  --membership-selection-text-accent-on-dark: #ffd68f;
  --membership-selection-shadow-selected: rgba(92, 123, 255, 0.100);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand-blue-default: #5c7bff;
  --brand-blue-active: #536fe5;
  --brand-blue-hover: #6c88ff;
  --brand-blue-subtle: rgba(92, 123, 255, 0.250);
  --brand-blue-disabled: rgba(92, 123, 255, 0.100);
  --brand-pink-default: #ff538d;
  --brand-pink-active: #e54b7f;
  --brand-pink-hover: #ff6498;
  --brand-pink-subtle: rgba(255, 83, 141, 0.250);
  --brand-pink-disabled: rgba(255, 83, 141, 0.100);
  --brand-indigo-default: #2e3eb3;
  --brand-indigo-active: #2938a1;
  --brand-indigo-hover: #4351bb;
  --brand-indigo-subtle: rgba(46, 62, 179, 0.250);
  --brand-indigo-disabled: rgba(46, 62, 179, 0.100);
  --accent-cyan-default: #4dc2e3;
  --accent-cyan-light: #78daf0;
  --brand-gradient-default-start: #5c7bff;
  --brand-gradient-default-end: #ff538d;
  --brand-gradient-active-start: #536fe5;
  --brand-gradient-active-end: #e54b7f;
  --brand-gradient-hover-start: #6c88ff;
  --brand-gradient-hover-end: #ff6498;
  --brand-gradient-subtle-start: rgba(92, 123, 255, 0.250);
  --brand-gradient-subtle-end: rgba(255, 83, 141, 0.250);
  --brand-gradient-disabled-start: rgba(92, 123, 255, 0.100);
  --brand-gradient-disabled-end: rgba(255, 83, 141, 0.100);
  --text-primary: #ffffff;
  --text-secondary: #c3c2cf;
  --text-tertiary: #b5b4c2;
  --text-muted: #a6a5b5;
  --text-disabled: #8a899c;
  --bg-page: #141418;
  --bg-surface: #222224;
  --bg-emphasis: #2e2e30;
  --bg-disabled: #3a3a3d;
  --border-default: #2e2e30;
  --state-success: #2fcc66;
  --state-warning: #ff9900;
  --state-danger: #e44545;
  --overlay-mask-default: rgba(0, 0, 0, 0.500);
  --overlay-mask-strong: rgba(0, 0, 0, 0.750);
  --membership-accent: #f7c156;
  --membership-on-accent: #802600;
  --media-tag-background: rgba(20, 20, 24, 0.800);
  --bg-media-placeholder-strong: #515257;
  --membership-tier-blue-subtle: rgba(92, 123, 255, 0.161);
  --membership-tier-blue-on-subtle: #adbfff;
  --membership-tier-pink-subtle: rgba(255, 83, 141, 0.149);
  --membership-tier-pink-on-subtle: #ff9ec2;
  --membership-price-gradient-start: #94abff;
  --membership-price-gradient-end: #ff63a8;
  --text-on-brand: #ffffff;
  --membership-account-card-coin-bg-start: rgba(92, 123, 255, 0.110);
  --membership-account-card-coin-bg-mid: rgba(247, 164, 86, 0.160);
  --membership-account-card-coin-bg-end: rgba(255, 83, 141, 0.060);
  --membership-account-card-vip-bg-start: rgba(46, 62, 179, 0.200);
  --membership-account-card-vip-bg-mid: rgba(255, 83, 141, 0.100);
  --membership-account-card-vip-bg-end: rgba(247, 164, 86, 0.180);
  --membership-account-card-surface-meta: rgba(255, 255, 255, 0.060);
  --membership-account-card-surface-feature: rgba(255, 255, 255, 0.050);
  --membership-account-card-border-feature: rgba(255, 255, 255, 0.100);
  --membership-account-card-glow-coin: rgba(247, 164, 86, 0.200);
  --membership-account-card-glow-vip-pink: rgba(255, 83, 141, 0.460);
  --membership-account-card-glow-vip-blue: rgba(92, 123, 255, 0.300);
  --membership-account-card-glow-vip-gold: rgba(247, 164, 86, 0.150);
  --membership-account-card-shadow-card: rgba(92, 123, 255, 0.080);
  --membership-selection-card-month-surface: #222224;
  --membership-selection-card-quarter-surface: #222224;
  --membership-selection-card-year-surface: #222224;
  --membership-selection-text-on-dark-primary: #ffffff;
  --membership-selection-text-on-dark-secondary: #cbc9d4;
  --membership-selection-text-on-dark-muted: #aaa7b4;
  --membership-selection-text-accent-foreground: #ffd68f;
  --membership-selection-text-accent-on-dark: #ffd68f;
  --membership-selection-shadow-selected: rgba(92, 123, 255, 0.160);
}

:root {
  --font-ui: "PingFang SC", -apple-system, BlinkMacSystemFont, "Microsoft YaHei", sans-serif;
  --font-size-body: 16px;
  --radius-card: 12px;
  --radius-media: 8px;
  --radius-pill: 100px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --content-width: 1300px;
}
/* Opt in page by page after acceptance; legacy page styles stay isolated. */
.xl-ui { margin: 0; background: var(--bg-page); color: var(--text-primary); font: var(--font-size-body)/1.5 var(--font-ui); }
.xl-ui *, .xl-ui *::before, .xl-ui *::after { box-sizing: border-box; }
.xl-ui button, .xl-ui input { font: inherit; }
.xl-ui button { cursor: pointer; }
.xl-ui :focus-visible { outline: 2px solid var(--brand-blue-default); outline-offset: 4px; }
.xl-container { width: min(var(--content-width), calc(100% - 48px)); margin-inline: auto; }
.xl-surface { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: 24px; }
.xl-primary { border: 0; border-radius: var(--radius-pill); padding: 12px 24px; color: var(--text-on-brand); background: linear-gradient(90deg, var(--brand-gradient-default-start), var(--brand-gradient-default-end)); }
.xl-primary:hover { background: linear-gradient(90deg, var(--brand-gradient-hover-start), var(--brand-gradient-hover-end)); }
.xl-primary:active { background: linear-gradient(90deg, var(--brand-gradient-active-start), var(--brand-gradient-active-end)); }
.xl-primary:disabled { opacity: .25; cursor: default; }
.xl-secondary { color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 11px 24px; }
.xl-secondary:hover { background: var(--bg-emphasis); }
@media (max-width: 600px) { .xl-container { width: calc(100% - 32px); } }