/* Relaydot single theme source: app, official site and operations console.
 * Edit the theme foundations here; all component colors and type derive below.
 * Folded violet leads; jade marks earnings, orchid and gold mark membership details.
 * Partner logos retain their own brand colors; status errors remain semantic red. */
@font-face { font-family: Manrope; src: url("fonts/Manrope.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Relaydot Sans CN"; src: url("fonts/SLN-Sans-CN.woff") format("woff"); font-weight: 100 900; font-display: swap; }
:root {
  color-scheme: light;
  --theme-ink: #241e36;
  --theme-accent: #7b46ef;
  --theme-highlight: #a16aff;
  --theme-depth: #4c2b9e;
  --theme-jade: #168a74;
  --theme-violet: #b364d4;
  --theme-gold: #d9a441;
  --theme-rose: #cf608d;
  --theme-bronze: #b57d57;
  --theme-silver: #9296ad;
  --theme-paper: #ffffff;
  --theme-tint: color-mix(in srgb, var(--theme-accent) 6%, var(--theme-paper));
  --theme-cool: color-mix(in srgb, var(--theme-accent) 14%, var(--theme-paper));
  --theme-canvas: color-mix(in srgb, var(--theme-accent) 2%, var(--theme-paper));
  --theme-danger: #b53b48;
  --theme-font: Manrope, "Relaydot Sans CN", "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  --theme-font-size: 14px;
  --theme-unit: 4px;
  --theme-radius: 18px;
  --theme-control: 52px;
  --theme-width: 460px;

  --color-text: var(--theme-ink);
  --color-muted: color-mix(in srgb, var(--theme-ink) 76%, var(--theme-paper));
  --color-accent: color-mix(in srgb, var(--theme-accent) 94%, var(--theme-ink));
  --color-positive: color-mix(in srgb, var(--theme-jade) 72%, var(--theme-ink));
  --color-positive-tint: color-mix(in srgb, var(--theme-jade) 8%, var(--theme-paper));
  --color-member: color-mix(in srgb, var(--theme-violet) 84%, var(--theme-ink));
  --color-member-tint: color-mix(in srgb, var(--theme-violet) 9%, var(--theme-paper));
  --color-premium: color-mix(in srgb, var(--theme-gold) 54%, var(--theme-ink));
  --color-premium-tint: color-mix(in srgb, var(--theme-gold) 12%, var(--theme-paper));
  --color-status-light: color-mix(in srgb, var(--theme-jade) 60%, var(--theme-paper));
  --surface-brand: var(--theme-accent);
  --surface-brand-card: linear-gradient(125deg, var(--theme-accent), var(--theme-depth));
  --color-on-brand-muted: color-mix(in srgb, var(--theme-paper) 94%, var(--theme-accent));
  --surface-deep: color-mix(in srgb, var(--theme-depth) 32%, var(--theme-ink));
  --color-surface: var(--theme-paper);
  --color-tint: var(--theme-tint);
  --holding-wash: linear-gradient(120deg, color-mix(in srgb, var(--theme-accent) 18%, var(--theme-paper)), var(--theme-tint) 48%, var(--theme-cool));
  --holding-glow: color-mix(in srgb, var(--theme-accent) 14%, var(--theme-paper));
  --holding-pane: color-mix(in srgb, var(--theme-paper) 76%, transparent);
  --holding-shadow: 0 4px 20px color-mix(in srgb, var(--theme-ink) 4%, transparent);
  --holding-ring-shadow: 0 0 0 var(--space-8) color-mix(in srgb, var(--holding-pane) 40%, transparent);
  --color-progress-track: color-mix(in srgb, var(--theme-accent) 10%, var(--theme-paper));
  --gradient-progress: linear-gradient(90deg, var(--theme-depth), var(--theme-highlight));
  --gradient-about: linear-gradient(115deg, var(--theme-tint), var(--theme-cool));
  --color-canvas: var(--theme-canvas);
  --color-input: color-mix(in srgb, var(--theme-accent) 4%, var(--theme-paper));
  --color-line: color-mix(in srgb, var(--theme-ink) 9%, var(--theme-paper));
  --color-inverse: var(--theme-paper);
  --color-inverse-muted: color-mix(in srgb, var(--theme-paper) 80%, var(--surface-deep));
  --color-on-dark-accent: color-mix(in srgb, var(--theme-paper) 78%, var(--theme-accent));
  --color-danger: var(--theme-danger);
  --color-danger-tint: color-mix(in srgb, var(--theme-danger) 7%, var(--theme-paper));
  --color-overlay: color-mix(in srgb, var(--theme-ink) 44%, transparent);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 22%, transparent);
  --shadow-dialog: 0 24px 80px color-mix(in srgb, var(--theme-ink) 18%, transparent);
  --shadow-card: 0 8px 32px color-mix(in srgb, var(--theme-ink) 5%, transparent);
  --button-primary-bg: var(--surface-brand);
  --button-primary-text: var(--theme-paper);
  --button-primary-hover: color-mix(in srgb, var(--theme-accent) 86%, var(--theme-ink));
  --button-secondary-bg: var(--theme-tint);
  --button-secondary-text: var(--color-accent);
  --button-hover-filter: brightness(.96);
  --focus-outline: 2px solid var(--theme-accent);
  --focus-offset: 3px;

  --font-body: var(--theme-font);
  --text-micro: .5rem;
  --text-tiny: .571rem;
  --text-fine: .643rem;
  --text-caption: .714rem;
  --text-xs: .786rem;
  --text-sm: .857rem;
  --text-body: 1rem;
  --text-label: .929rem;
  --text-section: 1.214rem;
  --text-title: 1.857rem;
  --text-stat: 1.429rem;
  --text-amount: 2.143rem;
  --text-hero: 3.143rem;
  --text-rate: 4.429rem;
  --text-reading: 1.071rem;
  --text-lead: 1.143rem;
  --text-subtitle: 1.286rem;
  --text-card: 1.571rem;
  --text-card-title: 1.714rem;
  --text-display-sm: 2.571rem;
  --text-display-md: 3.429rem;
  --text-display-lg: 5.286rem;
  --text-display-xl: 6.857rem;
  --text-display-rate: 8.286rem;
  --text-input: max(16px, var(--text-lead));
  --weight-normal: 450;
  --weight-regular: 500;
  --weight-medium: 600;
  --weight-semibold: 650;
  --weight-strong: 700;
  --weight-bold: 750;
  --weight-heavy: 800;
  --line-body: 1.6;
  --line-title: 1.2;
  --tracking-number: -.04em;

  --space-1: var(--theme-unit);
  --space-2: calc(var(--theme-unit) * 2);
  --space-3: calc(var(--theme-unit) * 3);
  --space-4: calc(var(--theme-unit) * 4);
  --space-5: calc(var(--theme-unit) * 5);
  --space-6: calc(var(--theme-unit) * 6);
  --space-8: calc(var(--theme-unit) * 8);
  --space-10: calc(var(--theme-unit) * 10);
  --page-gutter: var(--space-6);
  --section-gap: var(--space-8);
  --card-padding: var(--space-5);
  --radius-card: var(--theme-radius);
  --radius-control: calc(var(--theme-radius) * .67);
  --radius-small: calc(var(--theme-radius) * .4);
  --radius-dialog: calc(var(--theme-radius) + var(--space-2));
  --radius-display: calc(var(--theme-radius) * 1.33);
  --radius-sculpture: calc(var(--theme-radius) * 1.67);
  --radius-round: 50%;
  --control-height: var(--theme-control);
  --tap-size: 44px;
  --row-height: 76px;
  --icon-size: 20px;
  --icon-small: 16px;
  --icon-box: 42px;
  /* Medal colors identify tiers independently of the primary action palette. */
  --medal-accent: var(--theme-accent);
  --medal-level-0: var(--color-muted);
  --medal-level-1: var(--theme-bronze);
  --medal-level-2: var(--theme-silver);
  --medal-level-3: color-mix(in srgb, var(--theme-gold) 74%, var(--theme-paper));
  --medal-level-4: var(--theme-jade);
  --medal-level-5: var(--theme-accent);
  --medal-level-6: var(--theme-violet);
  --medal-level-7: var(--theme-rose);
  --medal-level-8: var(--theme-gold);
  --medal-node-2000: var(--theme-accent);
  --medal-node-3000: var(--theme-violet);
  --medal-node-5000: var(--theme-gold);
  --medal-node-custom: var(--theme-accent);
  --medal-width: 48px;
  --medal-height: 54px;
  --medal-small-width: 25px;
  --medal-small-height: 28px;
  --medal-large-width: 64px;
  --medal-large-height: 72px;
  --progress-height: 4px;
  --app-width: var(--theme-width);
  --dialog-width: var(--theme-width);
  --qr-size: 202px;
  --motion-fast: 160ms;
  --motion-page: 220ms;

  /* Official-site composition shares the same typography and surface palette. */
  --site-width: 1200px;
  --site-gutter: clamp(22px, 5vw, 64px);
  --site-space: clamp(80px, 9vw, 140px);
  --site-font: var(--font-body);
  --site-display: clamp(3rem, 5.6vw, 5.571rem);
  --site-display-mobile: clamp(2.571rem, 9.4vw, 4.143rem);
  --site-heading: clamp(2.286rem, 3.5vw, 3.429rem);
  --site-motion: 700ms;
  --site-ease: cubic-bezier(.2,.7,.2,1);
  --surface-header: color-mix(in srgb, var(--theme-paper) 92%, transparent);
  --surface-glass: color-mix(in srgb, var(--theme-paper) 90%, transparent);
  --surface-soft: color-mix(in srgb, var(--theme-tint) 60%, var(--theme-paper));
  --surface-raised-dark: color-mix(in srgb, var(--theme-paper) 5%, var(--surface-deep));
  --surface-ticket: color-mix(in srgb, var(--color-on-dark-accent) 8%, var(--surface-deep));
  --color-glow: color-mix(in srgb, var(--theme-accent) 22%, transparent);
  --color-orbit: color-mix(in srgb, var(--color-on-dark-accent) 14%, transparent);
  --color-orbit-point: color-mix(in srgb, var(--color-on-dark-accent) 20%, transparent);
  --color-inverse-line: color-mix(in srgb, var(--theme-paper) 10%, transparent);
  --color-inverse-divider: color-mix(in srgb, var(--theme-paper) 12%, transparent);
  --color-inverse-track: color-mix(in srgb, var(--theme-paper) 15%, transparent);
  --gradient-halo: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--theme-tint) 95%, var(--theme-accent)) 0%, var(--theme-tint) 25%, transparent 65%);
  --gradient-horizon: linear-gradient(transparent, var(--theme-paper));
  --gradient-arch: linear-gradient(125deg, var(--theme-paper) 2%, var(--color-on-dark-accent) 20%, var(--theme-accent) 42%, var(--theme-tint) 65%, var(--theme-paper) 76%, var(--theme-accent));
  --gradient-arch-front: linear-gradient(130deg, var(--theme-paper), var(--theme-accent) 25%, var(--theme-ink) 47%, var(--theme-accent) 75%, var(--color-on-dark-accent));
  --gradient-sculpture: linear-gradient(135deg, var(--theme-paper), var(--theme-tint) 25%, var(--color-on-dark-accent) 68%, var(--theme-paper));
  --gradient-vault: linear-gradient(135deg, var(--color-on-dark-accent), var(--theme-tint) 48%, var(--theme-accent));
  --shadow-sculpture: inset 1px 2px 1px var(--theme-paper), inset -2px -3px 2px color-mix(in srgb, var(--theme-accent) 30%, transparent), 12px 20px 35px color-mix(in srgb, var(--theme-ink) 12%, transparent);
  --shadow-float: 0 25px 60px -26px color-mix(in srgb, var(--theme-ink) 30%, transparent);
  --shadow-vault: inset 1px 1px 2px var(--theme-paper), 8px 15px 40px var(--color-glow);
  --shadow-status: 0 0 16px var(--theme-jade);
  --shadow-engraved: 1px 1px var(--theme-paper);
  /* Opaque mask ink is geometric, not a visible brand color. */
  --mask-ink: #000000;
  --mask-arch: linear-gradient(var(--mask-ink) 0 0) padding-box, linear-gradient(var(--mask-ink) 0 0);
  --mask-partners: linear-gradient(to right, transparent, var(--mask-ink) 7%, var(--mask-ink) 93%, transparent);
}
/* Resolve face and lettering against each medal's local accent, before SVG use inherits them. */
.identity-medal {
  --medal-light: color-mix(in srgb, var(--medal-accent) 18%, var(--theme-paper));
  --medal-ink: color-mix(in srgb, var(--medal-accent) 48%, var(--theme-ink));
}
@media (max-width: 720px) {
  :root { --site-gutter: 22px; --site-space: 76px; }
}
@media (max-width: 359px) {
  :root { --page-gutter: var(--space-4); --card-padding: var(--space-4); --text-hero: 2.7rem; --text-rate: 4rem; }
}