/*
 * Public creator page /c/{handle} (Prompt 02). Prefix cp-.
 * Colors come from tokens. Chrome uses the site tokens; every other creator theme
 * maps its palette onto the same tokens below (generated with WCAG AA contrast checks).
 */

body.cp-body { background: var(--bg); }

.cp-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
}
.cp-page a:hover { text-decoration: none; }

.cp-owner-bar {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 12px 32px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.cp-owner-bar__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-2);
}
.cp-owner-bar__link:hover { color: var(--text); }

/* Top bar */
.cp-top {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 32px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cp-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.cp-ghost:hover { background: var(--surface-2); }
.cp-ghost:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }

/* Grid */
.cp-grid {
  flex: 1;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px 32px 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 64px;
  align-items: start;
}

/* Identity */
.cp-identity { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding-top: 24px; min-width: 0; }
.cp-identity__text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cp-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 3px solid var(--brand);
  object-fit: cover;
  background: var(--surface-2);
  flex-shrink: 0;
}
.cp-avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-tint);
  font-size: 2.375rem;
  font-weight: 700;
  color: var(--brand-text);
}
.cp-name {
  margin: 0;
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text);
  overflow-wrap: anywhere;
}
.cp-verified { min-height: 28px; font-size: 0.8125rem; }
.cp-bio { margin: 0; max-width: 460px; font-size: 1.125rem; line-height: 1.6; color: var(--text-2); overflow-wrap: anywhere; white-space: pre-line; }

.cp-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cp-social:hover,
.cp-social:active,
.cp-social:focus-visible {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  outline: none;
}
.cp-social:focus-visible { box-shadow: var(--focus-ring); }

.cp-bio-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 460px; }
.cp-bio-more {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-text);
  cursor: pointer;
}
.cp-bio-more:hover { color: var(--brand-text-hover); }
.cp-bio-more:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.cp-bio-more[hidden] { display: none; }

.cp-link { gap: 8px; font-size: 0.875rem; color: var(--text-3); }
.cp-link span { overflow-wrap: anywhere; }
.cp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control-sm);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.cp-icon-btn:hover { background: var(--surface-2); color: var(--text); }
.cp-icon-btn:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
.cp-icon-btn__done { display: none; color: var(--ok-text); }
.cp-icon-btn.is-done .cp-icon-btn__copy { display: none; }
.cp-icon-btn.is-done .cp-icon-btn__done { display: inline-block; }

/* Support card */
.cp-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  overflow: visible;
}
.cp-card__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cp-card__title { margin: 0; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.015em; color: var(--text); }
.cp-help { position: relative; flex-shrink: 0; }
.cp-help__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
}
.cp-help__btn:hover { color: var(--text); border-color: var(--line-strong); }
.cp-help__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cp-help__tip {
  position: fixed;
  z-index: 80;
  width: min(280px, calc(100vw - 24px));
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-1);
  box-shadow: var(--shadow-panel);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-2);
}
.cp-help__tip[hidden] { display: none; }

.cp-optional__trigger {
  display: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-text);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cp-optional__trigger:hover { color: var(--brand-text-hover); }
.cp-optional__panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cp-form { display: flex; flex-direction: column; gap: 20px; }
.cp-field { display: flex; flex-direction: column; gap: 10px; }
.cp-field__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cp-label { font-size: 0.875rem; font-weight: 600; color: var(--text); }
.cp-muted { font-weight: 500; color: var(--text-3); }
.cp-counter { font-size: 0.8125rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.cp-error { margin: 0; font-size: 0.8125rem; color: var(--danger-text); }

.cp-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
}
.cp-notice__icon { color: var(--icon); margin-top: 1px; }
.cp-notice__title { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--text); }
.cp-notice__body { margin: 4px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--text-2); }

.cp-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--danger-bg);
  border: 1px solid var(--danger-line);
  border-radius: var(--radius-control);
  font-size: 0.875rem;
  color: var(--danger-text);
}
.cp-alert p { margin: 0; }

.cp-dash-picker {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--brand-tint-line);
  border-radius: 16px;
  background: var(--brand-tint);
}
.cp-dash-picker__row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cp-dash-picker__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 56px;
  color: var(--brand-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cp-dash-picker__times {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-3);
  line-height: 1;
}
.cp-dash-counts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  flex-wrap: nowrap;
  min-width: 0;
}
.cp-dash-count {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--surface-1);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.cp-dash-count:hover:not(:disabled) { border-color: var(--brand); transform: translateY(-1px); }
.cp-dash-count:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cp-dash-count.is-selected {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-brand);
}
.cp-dash-count:disabled { opacity: 0.55; cursor: not-allowed; }
.cp-dash-count--custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--text-2);
}
.cp-dash-count--custom.is-selected { color: var(--on-brand); }
.cp-dash-count--custom .cp-dash-count__icon {
  display: block;
}
.cp-dash-count--custom:not(.is-selected) .cp-dash-count__icon {
  color: var(--brand);
}
.cp-dash-picker__summary {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}
.cp-dash-picker__dot { margin: 0 6px; color: var(--text-3); font-weight: 500; }
.cp-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cp-chip {
  height: 52px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control-lg);
  background: var(--bg);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.cp-chip:hover:not(:disabled) { border-color: var(--text-3); }
.cp-chip:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
.cp-chip.is-selected {
  border: 1.5px solid var(--brand);
  background: var(--brand-tint);
  color: var(--brand-text);
}
.cp-chip:disabled { cursor: not-allowed; color: var(--text-3); border-color: var(--line); background: var(--surface-2); }

.cp-input {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control-lg);
  background: var(--bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cp-input:focus-within { border-color: var(--brand); box-shadow: var(--focus-ring); }
.cp-input input,
.cp-input textarea {
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  outline: none;
  box-shadow: none;
}
.cp-input input::placeholder,
.cp-input textarea::placeholder { color: var(--text-3); opacity: 1; }
.cp-input--textarea textarea { min-height: 96px; resize: vertical; }
.cp-input--prefixed input { padding-left: 4px; }
.cp-input__prefix { padding: 0 0 0 16px; font-size: 1rem; font-weight: 600; color: var(--text-2); }
.cp-input:has(:disabled) { border-color: var(--line); background: var(--surface-2); }
.cp-input :disabled { color: var(--text-3); cursor: not-allowed; }

.cp-fees {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 0.875rem;
  color: var(--text-2);
}
.cp-fees div { display: flex; justify-content: space-between; gap: 12px; }
.cp-fees dt,
.cp-fees dd { margin: 0; }
.cp-fees dd { font-variant-numeric: tabular-nums; }
.cp-fees__total { padding-top: 8px; border-top: 1px solid var(--line); font-weight: 700; color: var(--text); }

.cp-pay {
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 14px;
  background: var(--brand);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--on-brand);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.cp-pay:hover:not(:disabled) { background: var(--brand-hover); }
.cp-pay:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cp-pay:disabled { background: var(--surface-3); color: var(--text-3); cursor: not-allowed; }

.cp-paybar {
  display: none;
}

.cp-paybar__line {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-2);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cp-secure {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--text-3);
  text-align: center;
}

/* Footer: quieter than the support card */
.cp-footer {
  border-top: 1px solid var(--line);
  padding: 24px 20px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.cp-footer__by { margin: 0; font-size: 0.875rem; color: var(--text-3); }
.cp-footer__link { font-size: 0.875rem; font-weight: 700; color: var(--brand-text); }
.cp-footer__link:hover { color: var(--brand-text-hover); }
.cp-footer__tools { margin-top: 10px; }

.cp-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 60;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--text);
  color: var(--bg);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: var(--shadow-panel);
}
.cp-toast[hidden] { display: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 820px) {
  .cp-top { padding: 0 16px; height: 52px; }
  .cp-ghost__label { display: none; }
  .cp-ghost { width: 40px; padding: 0; justify-content: center; }
  .cp-grid { grid-template-columns: minmax(0, 1fr); padding: 4px 0 40px; gap: 20px; }
  .cp-identity {
    padding: 4px 20px 0;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  .cp-identity .cp-avatar {
    width: 72px;
    height: 72px;
    border-width: 2px;
  }
  .cp-avatar--initials { font-size: 1.5rem; }
  .cp-identity__text { gap: 6px; }
  .cp-identity .cp-row { justify-content: center; gap: 8px; }
  .cp-name {
    font-size: 1.375rem;
    letter-spacing: -0.02em;
  }
  .cp-verified {
    min-height: 26px;
    padding: 4px;
    gap: 0;
  }
  .cp-verified__label { display: none; }
  .cp-bio-wrap { margin-inline: auto; align-items: center; }
  .cp-bio {
    margin-inline: auto;
    font-size: 0.9375rem;
    line-height: 1.5;
    text-align: center;
  }
  .cp-bio--clamp:not(.is-expanded) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    white-space: normal;
  }
  .cp-bio-more { align-self: center; }
  .cp-socials { gap: 8px; }
  .cp-social {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    gap: 0;
    border-radius: 50%;
  }
  .cp-social__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .cp-link { display: none; }
  .cp-card { border-radius: 0; border-left: 0; border-right: 0; padding: 24px 20px 28px; box-shadow: none; overflow: visible; }
  .cp-optional__trigger { display: block; }
  .cp-optional:not(.is-open) .cp-optional__panel { display: none; }
  .cp-optional.is-open .cp-optional__trigger { margin-bottom: 12px; }
  .cp-dash-picker__summary--desktop,
  .cp-custom__hint { display: none; }
  .cp-pay--in-form,
  .cp-secure--in-form { display: none; }
  .cp-page { padding-bottom: 0; }
  .cp-footer { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
  .cp-paybar {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--surface-1);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
  }
  .cp-paybar .cp-pay {
    height: 52px;
    border-radius: 999px;
  }
  .cp-toast {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 820px) {
  .cp-optional-label { display: none; }
}

@media (min-width: 821px) {
  .cp-optional__trigger { display: none; }
  .cp-optional__panel { display: flex !important; }
  .cp-optional__panel[hidden] { display: flex !important; }
}

/* Midnight is a dark theme in both site modes: use the light-on-dark logo. */
.cp-theme--midnight .ui-logo__img--light { display: none; }
.cp-theme--midnight .ui-logo__img--dark { display: block; }

/* ===== Creator themes (Chrome uses the site tokens) ===== */
/* Paper: clean white page, black type and controls (monochrome) */
.cp-theme--paper {
  --bg: #FFFFFF;
  --surface-1: #FFFFFF;
  --surface-2: #F5F5F5;
  --surface-3: #E8E8E8;
  --sidebar: #FFFFFF;
  --line: #E5E5E5;
  --line-strong: #D4D4D4;
  --text: #0A0A0A;
  --text-2: #525252;
  --text-3: #737373;
  --icon: #171717;
  --brand: #171717;
  --brand-hover: #404040;
  --on-brand: #FFFFFF;
  --brand-text: #171717;
  --brand-text-hover: #404040;
  --brand-tint: #F5F5F5;
  --brand-tint-line: #E5E5E5;
  --focus-ring: 0 0 0 3px color-mix(in srgb, #171717 22%, transparent);
  color-scheme: light;
}

[data-theme="dark"] .cp-theme--paper {
  --bg: #0A0A0A;
  --surface-1: #141414;
  --surface-2: #1F1F1F;
  --surface-3: #2A2A2A;
  --sidebar: #141414;
  --line: #2A2A2A;
  --line-strong: #404040;
  --text: #FAFAFA;
  --text-2: #D4D4D4;
  --text-3: #A3A3A3;
  --icon: #FAFAFA;
  --brand: #FAFAFA;
  --brand-hover: #E5E5E5;
  --on-brand: #0A0A0A;
  --brand-text: #FAFAFA;
  --brand-text-hover: #E5E5E5;
  --brand-tint: #1F1F1F;
  --brand-tint-line: #2A2A2A;
  --focus-ring: 0 0 0 3px color-mix(in srgb, #FAFAFA 25%, transparent);
  color-scheme: dark;
}

.cp-theme--midnight {
  --bg: #0F172A;
  --surface-1: #1E293B;
  --surface-2: #334155;
  --surface-3: #465365;
  --sidebar: #1E293B;
  --line: #334155;
  --line-strong: #556173;
  --text: #F1F5F9;
  --text-2: #A0ADC0;
  --text-3: #A0ADC0;
  --icon: #06BFDE;
  --brand: #06B6D4;
  --brand-hover: #24BFD9;
  --on-brand: #0E0E10;
  --brand-text: #06BFDE;
  --brand-text-hover: #41CCE5;
  --brand-tint: #1A4257;
  --brand-tint-line: #165A71;
  --focus-ring: 0 0 0 3px color-mix(in srgb, #06B6D4 30%, transparent);
  color-scheme: dark;
}

.cp-theme--sand {
  --bg: #FAF8F3;
  --surface-1: #FFFFFF;
  --surface-2: #F5F1E8;
  --surface-3: #E3DDD4;
  --sidebar: #FFFFFF;
  --line: #E7DED1;
  --line-strong: #C9BDB2;
  --text: #3E2723;
  --text-2: #81645B;
  --text-3: #81645B;
  --icon: #BD3A12;
  --brand: #D84315;
  --brand-hover: #B83912;
  --on-brand: #FFFFFF;
  --brand-text: #BD3A12;
  --brand-text-hover: #9D3516;
  --brand-tint: #FAE8E3;
  --brand-tint-line: #F1BDAD;
  --focus-ring: 0 0 0 3px color-mix(in srgb, #D84315 30%, transparent);
  color-scheme: light;
}

[data-theme="dark"] .cp-theme--sand {
  --bg: #2C1810;
  --surface-1: #3E2723;
  --surface-2: #5D4037;
  --surface-3: #6D524A;
  --sidebar: #3E2723;
  --line: #5D4037;
  --line-strong: #796159;
  --text: #FAF8F3;
  --text-2: #C4B5B0;
  --text-3: #C4B5B0;
  --icon: #F5A58E;
  --brand: #D84315;
  --brand-hover: #DD5A31;
  --on-brand: #FFFFFF;
  --brand-text: #F5A58E;
  --brand-text-hover: #F6BAA7;
  --brand-tint: #5A2C20;
  --brand-tint-line: #74311E;
  --focus-ring: 0 0 0 3px color-mix(in srgb, #D84315 30%, transparent);
  color-scheme: dark;
}

.cp-theme--forest {
  --bg: #F0FDF4;
  --surface-1: #FFFFFF;
  --surface-2: #DCFCE7;
  --surface-3: #C8EBD4;
  --sidebar: #FFFFFF;
  --line: #BBF7D0;
  --line-strong: #9DD9B3;
  --text: #14532D;
  --text-2: #166534;
  --text-3: #166534;
  --icon: #117636;
  --brand: #16A34A;
  --brand-hover: #138B3F;
  --on-brand: #FFFFFF;
  --brand-text: #117636;
  --brand-text-hover: #126D34;
  --brand-tint: #E3F4E9;
  --brand-tint-line: #ADDFC0;
  --focus-ring: 0 0 0 3px color-mix(in srgb, #16A34A 30%, transparent);
  color-scheme: light;
}

[data-theme="dark"] .cp-theme--forest {
  --bg: #052E16;
  --surface-1: #14532D;
  --surface-2: #166534;
  --surface-3: #2C7447;
  --sidebar: #14532D;
  --line: #166534;
  --line-strong: #3D8057;
  --text: #F0FDF4;
  --text-2: #86EFAC;
  --text-3: #86EFAC;
  --icon: #53E88A;
  --brand: #16A34A;
  --brand-hover: #138B3F;
  --on-brand: #FFFFFF;
  --brand-text: #53E88A;
  --brand-text-hover: #7AEDA4;
  --brand-tint: #146132;
  --brand-tint-line: #156F37;
  --focus-ring: 0 0 0 3px color-mix(in srgb, #16A34A 30%, transparent);
  color-scheme: dark;
}

.cp-theme--berry {
  --bg: #FDF4FF;
  --surface-1: #FFFFFF;
  --surface-2: #FAE8FF;
  --surface-3: #E9D4F4;
  --sidebar: #FFFFFF;
  --line: #E9D5FF;
  --line-strong: #CDB4EC;
  --text: #4C1D95;
  --text-2: #7E22CE;
  --text-3: #7E22CE;
  --icon: #B022C1;
  --brand: #C026D3;
  --brand-hover: #A320B3;
  --on-brand: #FFFFFF;
  --brand-text: #B022C1;
  --brand-text-hover: #9721B6;
  --brand-tint: #F7E5FA;
  --brand-tint-line: #E9B3F0;
  --focus-ring: 0 0 0 3px color-mix(in srgb, #C026D3 30%, transparent);
  color-scheme: light;
}

[data-theme="dark"] .cp-theme--berry {
  --bg: #2E1065;
  --surface-1: #4C1D95;
  --surface-2: #6B21A8;
  --surface-3: #7A36B1;
  --sidebar: #4C1D95;
  --line: #6B21A8;
  --line-strong: #8547B8;
  --text: #FDF4FF;
  --text-2: #E9D5FF;
  --text-3: #CDB4EC;
  --icon: #E6A8F0;
  --brand: #C026D3;
  --brand-hover: #C840D8;
  --on-brand: #FFFFFF;
  --brand-text: #E6A8F0;
  --brand-text-hover: #ECBBF4;
  --brand-tint: #611FA0;
  --brand-tint-line: #7520AB;
  --focus-ring: 0 0 0 3px color-mix(in srgb, #C026D3 30%, transparent);
  color-scheme: dark;
}

.cp-theme--rose {
  --bg: #FFF1F2;
  --surface-1: #FFFFFF;
  --surface-2: #FFE4E6;
  --surface-3: #FECDD3;
  --sidebar: #FFFFFF;
  --line: #FECDD3;
  --line-strong: #FDA4AF;
  --text: #881337;
  --text-2: #9F1239;
  --text-3: #BE123C;
  --icon: #E11D48;
  --brand: #F43F5E;
  --brand-hover: #E11D48;
  --on-brand: #FFFFFF;
  --brand-text: #E11D48;
  --brand-text-hover: #BE123C;
  --brand-tint: #FFE4E6;
  --brand-tint-line: #FECDD3;
  --focus-ring: 0 0 0 3px color-mix(in srgb, #F43F5E 30%, transparent);
  color-scheme: light;
}

[data-theme="dark"] .cp-theme--rose {
  --bg: #4C0519;
  --surface-1: #881337;
  --surface-2: #9F1239;
  --surface-3: #BE123C;
  --sidebar: #881337;
  --line: #9F1239;
  --line-strong: #E11D48;
  --text: #FFF1F2;
  --text-2: #FECDD3;
  --text-3: #FDA4AF;
  --icon: #FB7185;
  --brand: #F43F5E;
  --brand-hover: #FB7185;
  --on-brand: #FFFFFF;
  --brand-text: #FDA4AF;
  --brand-text-hover: #FECDD3;
  --brand-tint: #9F1239;
  --brand-tint-line: #BE123C;
  --focus-ring: 0 0 0 3px color-mix(in srgb, #F43F5E 30%, transparent);
  color-scheme: dark;
}

.cp-theme--bloom {
  --bg: #FDF2F8;
  --surface-1: #FFFFFF;
  --surface-2: #FCE7F3;
  --surface-3: #FBCFE8;
  --sidebar: #FFFFFF;
  --line: #FBCFE8;
  --line-strong: #F9A8D4;
  --text: #831843;
  --text-2: #9D174D;
  --text-3: #BE185D;
  --icon: #DB2777;
  --brand: #EC4899;
  --brand-hover: #DB2777;
  --on-brand: #FFFFFF;
  --brand-text: #DB2777;
  --brand-text-hover: #BE185D;
  --brand-tint: #FCE7F3;
  --brand-tint-line: #FBCFE8;
  --focus-ring: 0 0 0 3px color-mix(in srgb, #EC4899 30%, transparent);
  color-scheme: light;
}

[data-theme="dark"] .cp-theme--bloom {
  --bg: #500724;
  --surface-1: #831843;
  --surface-2: #9D174D;
  --surface-3: #BE185D;
  --sidebar: #831843;
  --line: #9D174D;
  --line-strong: #DB2777;
  --text: #FDF2F8;
  --text-2: #FBCFE8;
  --text-3: #F9A8D4;
  --icon: #F472B6;
  --brand: #EC4899;
  --brand-hover: #F472B6;
  --on-brand: #FFFFFF;
  --brand-text: #F9A8D4;
  --brand-text-hover: #FBCFE8;
  --brand-tint: #9D174D;
  --brand-tint-line: #BE185D;
  --focus-ring: 0 0 0 3px color-mix(in srgb, #EC4899 30%, transparent);
  color-scheme: dark;
}

.cp-theme--ocean {
  --bg: #F0FDFA;
  --surface-1: #FFFFFF;
  --surface-2: #CCFBF1;
  --surface-3: #99F6E4;
  --sidebar: #FFFFFF;
  --line: #99F6E4;
  --line-strong: #5EEAD4;
  --text: #134E4A;
  --text-2: #115E59;
  --text-3: #0F766E;
  --icon: #0D9488;
  --brand: #14B8A6;
  --brand-hover: #0D9488;
  --on-brand: #FFFFFF;
  --brand-text: #0F766E;
  --brand-text-hover: #115E59;
  --brand-tint: #CCFBF1;
  --brand-tint-line: #99F6E4;
  --focus-ring: 0 0 0 3px color-mix(in srgb, #14B8A6 30%, transparent);
  color-scheme: light;
}

[data-theme="dark"] .cp-theme--ocean {
  --bg: #042F2E;
  --surface-1: #134E4A;
  --surface-2: #115E59;
  --surface-3: #0F766E;
  --sidebar: #134E4A;
  --line: #115E59;
  --line-strong: #14B8A6;
  --text: #F0FDFA;
  --text-2: #99F6E4;
  --text-3: #5EEAD4;
  --icon: #2DD4BF;
  --brand: #14B8A6;
  --brand-hover: #2DD4BF;
  --on-brand: #042F2E;
  --brand-text: #5EEAD4;
  --brand-text-hover: #99F6E4;
  --brand-tint: #115E59;
  --brand-tint-line: #0F766E;
  --focus-ring: 0 0 0 3px color-mix(in srgb, #14B8A6 30%, transparent);
  color-scheme: dark;
}

.cp-theme--slate {
  --bg: #F8FAFC;
  --surface-1: #FFFFFF;
  --surface-2: #F1F5F9;
  --surface-3: #DADFE4;
  --sidebar: #FFFFFF;
  --line: #E2E8F0;
  --line-strong: #BCC2CC;
  --text: #0F172A;
  --text-2: #606F85;
  --text-3: #606F85;
  --icon: #0960EB;
  --brand: #3B82F6;
  --brand-hover: #326ED1;
  --on-brand: #FFFFFF;
  --brand-text: #0960EB;
  --brand-text-hover: #0A4EBB;
  --brand-tint: #E7F0FE;
  --brand-tint-line: #BAD3FC;
  --focus-ring: 0 0 0 3px color-mix(in srgb, #3B82F6 30%, transparent);
  color-scheme: light;
}

[data-theme="dark"] .cp-theme--slate {
  --bg: #020617;
  --surface-1: #0F172A;
  --surface-2: #1E293B;
  --surface-3: #343E4E;
  --sidebar: #0F172A;
  --line: #1E293B;
  --line-strong: #454F5E;
  --text: #F8FAFC;
  --text-2: #94A3B8;
  --text-3: #94A3B8;
  --icon: #5994F6;
  --brand: #3B82F6;
  --brand-hover: #5391F7;
  --on-brand: #FFFFFF;
  --brand-text: #5994F6;
  --brand-text-hover: #81AEF8;
  --brand-tint: #172A4F;
  --brand-tint-line: #1E3C71;
  --focus-ring: 0 0 0 3px color-mix(in srgb, #3B82F6 30%, transparent);
  color-scheme: dark;
}

/* Status colors for themes that stay dark in the light site mode */
.cp-theme--midnight {
  --danger-bg: #2A1214;
  --danger-text: #FCA5A5;
  --danger-line: #4A1D20;
  --ok-text: #86EFAC;
}

/* Dash payment result (tips/callback) */
.cp-result { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 20px 64px; }
.cp-result__card { width: 100%; max-width: 460px; align-items: center; text-align: center; gap: 16px; }
.cp-result__icon { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; }
.cp-result__icon--ok { background: var(--brand); color: var(--on-brand); box-shadow: 0 10px 30px -10px var(--brand); }
.cp-result__icon--warn { background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-line); }
.cp-result__icon--fail { background: var(--danger-bg); color: var(--danger-text); border: 1px solid var(--danger-line); }
.cp-result__title { margin: 4px 0 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.cp-result__text { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--text-2); }
.cp-result__text strong { color: var(--text); }
.cp-result__amount { width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; }
.cp-result__amount span { font-size: 0.8125rem; color: var(--text-3); }
.cp-result__amount strong { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.cp-result__message { margin: 0; width: 100%; padding: 12px 16px; border-radius: 14px; background: var(--brand-tint); border: 1px solid var(--brand-tint-line); font-size: 0.9375rem; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.cp-result__actions { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.cp-result__btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; text-decoration: none; }
a.cp-pay { height: 52px; }
a.cp-ghost.cp-result__btn { height: 48px; }
@media (max-width: 820px) {
  .cp-result__card { border-radius: var(--radius-panel); border: 1px solid var(--line); box-shadow: var(--shadow-panel); padding: 28px 22px; }
}
a.cp-ghost.cp-result__btn { width: 100%; padding: 0 16px; }