/* ==========================================================================
   ClipToEarn — design-system.css
   Single source of truth for the visual language.

   IMPORTANT: this file MUST be the LAST stylesheet in every page's <head>.
   It intentionally overrides the earlier layers (global.css -> redesign.css ->
   page.css -> fx.css) so the app has ONE coherent look instead of five
   competing palettes.

   Presentation only. It never changes markup contracts: every element id,
   class hook and data-attribute used by the JavaScript is preserved.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* -- surfaces: dark navy / charcoal ------------------------------------ */
  --bg:            #0B1020;
  --bg-1:          #111830;   /* raised panel */
  --bg-2:          #16203C;   /* card */
  --bg-3:          #1C2A4A;   /* elevated / hover */

  /* legacy aliases still referenced by older page CSS */
  --bg-card:        var(--bg-2);
  --bg-card-raised: var(--bg-3);
  --bg-elevated:    var(--bg-3);

  /* -- borders ----------------------------------------------------------- */
  --border:      #253255;
  --border-soft: #1B2440;
  --border-strong:#33436E;

  /* -- text -------------------------------------------------------------- */
  --text:       #EEF2FF;
  --text-muted: #A6B1CC;
  --text-faint: #8B99B8;
  --text-on-accent: #0A0F1E;

  /* -- accents: restrained violet -> blue -------------------------------- */
  --accent:   #7C6CF5;
  --accent-2: #5B7CFA;
  --accent-soft: rgba(124, 108, 245, .14);
  --accent-line: rgba(124, 108, 245, .38);
  --accent-text: #B4ACFF;          /* accent used as TEXT on dark (AA) */
  --grad: linear-gradient(135deg, #7C6CF5, #5B7CFA);

  /* money is accent-tinted violet, never gold */
  --money: #B4ACFF;

  /* -- status ------------------------------------------------------------ */
  --success: #3FD69B;
  --warning: #F5C36B;
  --danger:  #FF6B7A;
  --info:    #5B7CFA;

  --success-soft: rgba(63, 214, 155, .13);
  --warning-soft: rgba(245, 195, 107, .13);
  --danger-soft:  rgba(255, 107, 122, .13);
  --info-soft:    rgba(91, 124, 250, .13);

  /* -- radii ------------------------------------------------------------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-full: 999px;
  --radius:    var(--r-lg);   /* legacy aliases */
  --radius-sm: var(--r-sm);

  /* -- spacing scale ----------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* -- typography scale -------------------------------------------------- */
  --fs-0: 12px;
  --fs-1: 13px;
  --fs-2: 15px;
  --fs-3: 17px;
  --fs-4: 21px;
  --fs-5: 28px;
  --fs-6: 38px;
  --fs-hero: clamp(38px, 5.6vw, 68px);
  --fs-section: clamp(26px, 3.2vw, 38px);

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --lh-tight: 1.18;
  --lh-body: 1.55;
  --tracking-tight: -.022em;

  /* -- shadows ----------------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .28);
  --sh-2: 0 6px 20px -8px rgba(0, 0, 0, .55);
  --sh-3: 0 20px 48px -18px rgba(0, 0, 0, .68);
  --sh-glow: 0 0 0 1px rgba(124, 108, 245, .22), 0 14px 40px -18px rgba(124, 108, 245, .55);
  --sh-focus: 0 0 0 3px rgba(124, 108, 245, .40);

  /* -- motion ------------------------------------------------------------ */
  --dur-fast: .14s;
  --dur: .22s;
  --dur-slow: .38s;
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* -- layout ------------------------------------------------------------ */
  --nav-h: 60px;
  --bottom-nav-h: 62px;
  --rail-w: 236px;
  --content-max: 1240px;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body, 'Inter'), system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ONE static, very subtle glow. Replaces the animated pink/magenta aurora
   that fx.css injected on every page. */
body::before {
  content: "";
  position: fixed;
  inset: -30% -20% auto -20%;
  height: 70vh;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 62% -10%, rgba(124, 108, 245, .13), transparent 58%),
              radial-gradient(ellipse at 12% 0%, rgba(91, 124, 250, .08), transparent 52%);
}
body::after { content: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display, 'Space Grotesk'), 'Inter', system-ui, sans-serif;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin: 0 0 var(--sp-3);
}
/* Kill the site-wide gradient-clipped transparent headings from fx.css. */
h1 { font-size: var(--fs-5); }
h2 { font-size: var(--fs-4); }
h3 { font-size: var(--fs-3); }
h4 { font-size: var(--fs-2); }

p { margin: 0 0 var(--sp-3); }
a { color: var(--accent-text); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: #C9C3FF; text-decoration: none; }
img { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--border-soft); margin: var(--sp-5) 0; }
small { font-size: var(--fs-1); }

/* accessible focus ring everywhere */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
::selection { background: rgba(124, 108, 245, .35); color: #fff; }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: #2A3860 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2A3860; border-radius: var(--r-full); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #37487C; }

/* skip link */
.ct-skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--accent); color: #fff; font-weight: var(--fw-semi);
  transition: top var(--dur) var(--ease);
}
.ct-skip:focus { top: 12px; color: #fff; }

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

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-5) var(--sp-7);
}
.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3);
}
.panel-head select { width: auto; }
.section-title { font-size: var(--fs-3); margin: var(--sp-5) 0 var(--sp-3); }
.faint, .hint { color: var(--text-faint); font-size: var(--fs-1); }
.subtitle { color: var(--text-muted); margin: 0 0 var(--sp-4); }
.num { font-variant-numeric: tabular-nums; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--fs-1); margin-bottom: var(--sp-3); }
.back-link:hover { color: var(--text); }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 42px; padding: 10px 18px;
  border: 1px solid transparent; border-radius: var(--r-md);
  background: transparent; color: var(--text);
  font: inherit; font-weight: var(--fw-semi); font-size: var(--fs-2);
  line-height: 1.2; cursor: pointer; white-space: nowrap;
  text-decoration: none; position: relative; overflow: hidden;
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--grad);
  color: var(--text-on-accent);
  box-shadow: 0 8px 22px -12px rgba(124, 108, 245, .9);
}
.btn-primary:hover { box-shadow: 0 12px 28px -12px rgba(124, 108, 245, 1); color: var(--text-on-accent); }

.btn-secondary {
  background: var(--bg-3); color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover { background: #223055; border-color: var(--border-strong); color: var(--text); }

.btn-ghost { background: transparent; color: var(--text-muted); border-color: transparent; }
.btn-ghost:hover { background: var(--accent-soft); color: var(--text); }

.btn-danger { background: var(--danger-soft); color: #FF9AA4; border-color: rgba(255, 107, 122, .38); }
.btn-danger:hover { background: rgba(255, 107, 122, .2); color: #FFC2C8; }

.btn-discord { background: #5865F2; color: #fff; }
.btn-discord:hover { background: #6B76F5; color: #fff; }

.btn-google { background: #F1F3F9; color: #1F2430; }
.btn-google:hover { background: #fff; color: #1F2430; }

/* sizes */
.btn-sm { min-height: 34px; padding: 6px 12px; font-size: var(--fs-1); border-radius: var(--r-sm); }
.btn-lg { min-height: 50px; padding: 14px 26px; font-size: var(--fs-3); border-radius: var(--r-lg); }
.btn-block { width: 100%; }

/* loading + disabled */
.btn .spinner { width: 13px; height: 13px; border-width: 2px; }
.btn.is-loading { pointer-events: none; }

/* on-brand shine: single subtle sweep, no infinite gradient animation */
.btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .28) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .55s var(--ease);
}
.btn-primary:hover::after { transform: translateX(130%); }

.spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(255, 255, 255, .3); border-top-color: currentColor;
  border-radius: 50%; animation: ct-spin .7s linear infinite; vertical-align: -2px;
}
@keyframes ct-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   5. FORM CONTROLS
   -------------------------------------------------------------------------- */
.form-group { margin-bottom: var(--sp-4); min-width: 0; }
label, .form-group label {
  display: block; font-size: var(--fs-1); font-weight: var(--fw-medium);
  color: var(--text-muted); margin-bottom: 6px;
}
input, select, textarea {
  width: 100%; min-height: 42px; padding: 10px 13px;
  background: #0A1121; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-md);
  font: inherit; font-size: var(--fs-2);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
textarea { min-height: 92px; resize: vertical; line-height: var(--lh-body); }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: var(--sh-focus); background: #0C1426;
}
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; accent-color: var(--accent); }
select {
  appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A6B1CC' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.checks, .plat-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.consent { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-1); color: var(--text-muted); margin-bottom: var(--sp-3); cursor: pointer; }
.consent input { margin-top: 3px; }

/* validation states (used by js/ui-states.js helpers too) */
.field-error input, .field-error select, .field-error textarea,
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(255, 107, 122, .22);
}
.field-message { display: block; font-size: var(--fs-0); margin-top: 5px; color: var(--text-faint); }
.field-message.is-error, .field-error .field-message { color: #FF9AA4; }
.field-message.is-ok { color: var(--success); }
.field-optional { color: var(--text-faint); font-weight: var(--fw-normal); }

.username-check { font-size: var(--fs-0); margin-top: 4px; color: var(--text-faint); }
.username-check.available { color: var(--success); }
.username-check.taken { color: var(--danger); }
.trust-note { display: flex; align-items: center; gap: 6px; color: var(--text-faint); font-size: var(--fs-0); }

/* --------------------------------------------------------------------------
   6. CARDS / PANELS
   -------------------------------------------------------------------------- */
.card {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  box-shadow: var(--sh-1);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card > :last-child { margin-bottom: 0; }
.card h2, .card h3 { margin-top: 0; }
.card-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

/* interactive cards only lift on hover — plain content cards stay still */
a.card:hover, .card.is-interactive:hover, .campaign-card:hover, .review-card:hover, .dx-ccard:hover {
  border-color: var(--accent-line);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}

.stat-card, .stat-card.balance-card, .dx-stat, .pf-stat {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.stat-card .value, .stat-card strong { font-family: var(--font-display); font-size: var(--fs-4); color: var(--text); }
.stat-card.balance-card { border-color: var(--accent-line); background: linear-gradient(150deg, rgba(124, 108, 245, .16), var(--bg-2) 62%); }
.stat-card.balance-card .value { color: var(--money); }
.stat-label, .stat-card span { color: var(--text-muted); font-size: var(--fs-1); }
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); }

/* --------------------------------------------------------------------------
   7. BADGES / PILLS / CHIPS
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: var(--fs-0); font-weight: var(--fw-semi); line-height: 1.6;
  background: var(--bg-3); color: var(--text-muted);
  border: 1px solid transparent; white-space: nowrap; text-transform: none;
}
.badge:hover { transform: none; }   /* kill fx.css badge scale-on-hover */

/* positive */
.badge-approved, .badge-active, .badge-completed, .badge-resolved, .badge-paid, .badge-cleared, .badge-verified, .badge-live {
  background: var(--success-soft); color: var(--success); border-color: rgba(63, 214, 155, .3);
}
/* work-in-progress */
.badge-pending, .badge-pending_review, .badge-processing, .badge-changes_requested, .badge-under_review, .badge-in_progress, .badge-review, .badge-open, .badge-estimated {
  background: var(--warning-soft); color: var(--warning); border-color: rgba(245, 195, 107, .3);
}
/* neutral */
.badge-draft, .badge-closed, .badge-expired, .badge-unpaid, .badge-none, .badge-paused {
  background: var(--bg-3); color: var(--text-muted); border-color: var(--border);
}
/* negative */
.badge-rejected, .badge-failed, .badge-cancelled, .badge-reversed, .badge-suspended, .badge-banned {
  background: var(--danger-soft); color: #FF9AA4; border-color: rgba(255, 107, 122, .3);
}
/* informational */
.badge-info, .badge-review_requested, .badge-appealed {
  background: var(--info-soft); color: #9FB4FF; border-color: rgba(91, 124, 250, .3);
}
/* no pulsing/blinking badges */
.badge-pending { animation: none; box-shadow: none; }

.pill, .dx-pill, .pf-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-full);
  background: var(--accent-soft); color: var(--accent-text);
  border: 1px solid var(--accent-line);
  font-size: var(--fs-0); font-weight: var(--fw-medium);
}
.dx-pills, .pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }

/* --------------------------------------------------------------------------
   8. ALERTS / TOASTS
   -------------------------------------------------------------------------- */
.alert {
  display: none; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); margin: var(--sp-3) 0;
  font-size: var(--fs-2); line-height: 1.5;
  border: 1px solid var(--border); background: var(--bg-2); color: var(--text);
}
.alert.show { display: block; }
.alert-error   { background: var(--danger-soft);  border-color: rgba(255, 107, 122, .4); color: #FFC2C8; }
.alert-success { background: var(--success-soft); border-color: rgba(63, 214, 155, .38); color: #A6F0D2; }
.alert-info    { background: var(--info-soft);    border-color: rgba(91, 124, 250, .38); color: #C3D0FF; }
.alert-warning { background: var(--warning-soft); border-color: rgba(245, 195, 107, .38); color: #FFE0AC; }
.alert.show { animation: ct-fade-up var(--dur) var(--ease) both; }

/* toast host */
.ct-toast-host {
  position: fixed; z-index: 120;
  right: var(--sp-4); bottom: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  max-width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.ct-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-3); color: var(--text);
  border: 1px solid var(--border-strong); border-left: 3px solid var(--accent);
  border-radius: var(--r-md); box-shadow: var(--sh-3);
  font-size: var(--fs-2);
  animation: ct-toast-in var(--dur) var(--ease) both;
}
.ct-toast.is-success { border-left-color: var(--success); }
.ct-toast.is-error   { border-left-color: var(--danger); }
.ct-toast.is-warning { border-left-color: var(--warning); }
.ct-toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ct-toast button {
  margin-left: auto; background: none; border: 0; color: var(--text-faint);
  cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px;
}
.ct-toast button:hover { color: var(--text); }
@keyframes ct-toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   9. TABS
   -------------------------------------------------------------------------- */
.tabs {
  display: flex; gap: var(--sp-1); flex-wrap: wrap;
  border-bottom: 1px solid var(--border-soft);
  margin: var(--sp-5) 0 var(--sp-4);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--text-muted); padding: 11px 15px;
  font: inherit; font-weight: var(--fw-semi); font-size: var(--fs-2);
  cursor: pointer; white-space: nowrap;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.tab:hover { color: var(--text); background: rgba(255, 255, 255, .03); }
.tab.active, .tab[aria-selected="true"] {
  color: var(--accent-text); border-bottom-color: var(--accent);
  background: var(--accent-soft);
}
.tab-panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   10. TABLES
   -------------------------------------------------------------------------- */
.ct-table-wrap, .table-wrap {
  width: 100%; overflow-x: auto;
  border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  -webkit-overflow-scrolling: touch;
}
table { border-collapse: collapse; width: 100%; font-size: var(--fs-1); }
th {
  text-align: left; color: var(--text-muted);
  background: var(--bg-1);
  font-weight: var(--fw-semi); font-size: var(--fs-0);
  letter-spacing: .04em; text-transform: uppercase;
  padding: 11px 14px; white-space: nowrap;
}
td { padding: 12px 14px; border-top: 1px solid var(--border-soft); color: var(--text); vertical-align: middle; }
tbody tr { transition: background var(--dur-fast) var(--ease); }
tbody tr:hover { background: rgba(255, 255, 255, .025); }
th, td { border-color: var(--border-soft); }

/* --------------------------------------------------------------------------
   11. MODALS / SHEETS (visual layer for the existing is-open toggles)
   -------------------------------------------------------------------------- */
.ct-modal, .modal, .dx-sheet {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-3);
}
.dx-overlay { background: rgba(4, 7, 16, .68); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

/* --------------------------------------------------------------------------
   12. STATES — loading / empty / error
   -------------------------------------------------------------------------- */
.state-loading {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  color: var(--text-muted); padding: var(--sp-6) var(--sp-3); text-align: center;
}
.state-loading .spinner { border-color: rgba(255, 255, 255, .16); border-top-color: var(--accent); }
.state-error {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-4); border: 1px solid rgba(255, 107, 122, .38);
  border-radius: var(--r-md); background: var(--danger-soft); color: #FFC2C8;
}
.empty-state {
  text-align: center; color: var(--text-muted);
  padding: var(--sp-7) var(--sp-4);
  border: 1px dashed var(--border); border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .012);
}
.empty-state .ct-empty-icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin: 0 auto var(--sp-3);
  border-radius: var(--r-md); background: var(--accent-soft);
  color: var(--accent-text); font-size: 20px;
}
.empty-state strong, .empty-state h3 { display: block; color: var(--text); font-size: var(--fs-3); margin: 0 0 6px; }
.empty-state p { margin: 0 auto; max-width: 44ch; font-size: var(--fs-1); }
.empty-state .btn { margin-top: var(--sp-4); }

/* skeletons */
.sk { position: relative; overflow: hidden; background: var(--bg-3); border-radius: var(--r-sm); }
.sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .05), transparent);
  transform: translateX(-100%);
  animation: ct-shimmer 1.4s ease-in-out infinite;
}
.sk-line { height: 12px; margin-bottom: 8px; }
.sk-line.sk-w40 { width: 40%; } .sk-line.sk-w60 { width: 60%; } .sk-line.sk-w80 { width: 80%; }
.sk-title { height: 18px; width: 50%; margin-bottom: 12px; }
.sk-card { height: 132px; border-radius: var(--r-lg); }
.sk-avatar { width: 40px; height: 40px; border-radius: var(--r-full); flex: none; }
.sk-stat { height: 76px; border-radius: var(--r-lg); }
@keyframes ct-shimmer { 100% { transform: translateX(100%); } }

/* fade-in for list rows (existing helper classes) */
.fade-in-item { animation: ct-fade-up var(--dur) var(--ease) both; }
.fade-out-item { opacity: 0; transition: opacity var(--dur) var(--ease); }
@keyframes ct-fade-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   13. AVATARS
   -------------------------------------------------------------------------- */
.avatar, .pf-avatar, .pf-avatar-sm, .dx-avatar {
  border-radius: var(--r-full);
  background: var(--grad);
  color: #fff; font-weight: var(--fw-bold);
  display: grid; place-items: center;
  border: 2px solid var(--bg-2);
  flex: none; overflow: hidden;
}
.avatar { width: 36px; height: 36px; font-size: var(--fs-1); }
.avatar img, .pf-avatar img, .pf-avatar-sm img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   14. LISTS — campaigns, submissions, notifications, payouts
   -------------------------------------------------------------------------- */
.campaign-card, .review-card, .submission-row, .pf-tx, .pay-row, .notification-row, .ticket-item {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.campaign-card, .review-card, .submission-row { padding: var(--sp-4); margin-bottom: var(--sp-3); }
.notification-row, .pf-tx, .pay-row, .ticket-item { padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); }
.notification-row.unread, .notification-row[data-unread="true"] { border-left: 3px solid var(--accent); background: linear-gradient(90deg, var(--accent-soft), var(--bg-2) 40%); }

/* progress / meters */
.budget-bar-track, .view-bar, .pf-meter, .dx-bar {
  height: 8px; border-radius: var(--r-full);
  background: var(--bg-3); overflow: hidden;
  position: relative;
}
.budget-bar-fill, .view-bar-fill, .pf-bar, .dx-bar > span {
  display: block; height: 100%; border-radius: var(--r-full);
  background: var(--grad);
  transition: width var(--dur-slow) var(--ease);
}
.budget-bar-fill.is-warn, .pf-bar.is-warn { background: linear-gradient(90deg, var(--warning), #E8A94E); }
.budget-bar-fill.is-full, .pf-bar.is-full { background: linear-gradient(90deg, var(--danger), #E4556A); }
.budget-label, .view-bar-label, .dx-barlabel {
  display: flex; justify-content: space-between; gap: var(--sp-2);
  font-size: var(--fs-0); color: var(--text-faint); margin-bottom: 5px;
}

/* money numbers */
.num, .balance, .dx-money, .pf-money, [class*="balance"] .num, .pf-tx-amount {
  color: var(--money);
  font-variant-numeric: tabular-nums;
  text-shadow: none;   /* removes the gold glow from fx.css */
}

/* rule lists */
.rules-box, .rules-list { color: var(--text-muted); }
.rules-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: var(--fs-1); }
.live-rule {
  display: block; margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--warning); border-radius: var(--r-sm);
  background: var(--warning-soft); color: #FFE0AC; font-size: var(--fs-1);
}
.promo-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.promo-row { align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }

/* small helpers used by inline styles in existing pages */
.muted { color: var(--text-muted); }
.nowrap { white-space: nowrap; }

/* --------------------------------------------------------------------------
   15. NAVIGATION — ONE consistent system on every page
   -------------------------------------------------------------------------- */

/* ---- 15a. public nav (landing / terms / privacy) ---------------------- */
.lp-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 12px max(20px, calc((100vw - var(--content-max)) / 2));
  background: rgba(11, 16, 32, .88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.lp-header.is-stuck { box-shadow: var(--sh-2); background: rgba(11, 16, 32, .96); }
.lp-header .brand { margin-right: auto; }
.lp-nav-links { display: flex; align-items: center; gap: var(--sp-5); }
.lp-nav-links > a:not(.btn) {
  color: var(--text-muted); font-weight: var(--fw-medium); font-size: var(--fs-2);
  position: relative; padding: 4px 0;
}
.lp-nav-links > a:not(.btn):hover,
.lp-nav-links > a:not(.btn)[aria-current="page"] { color: var(--text); }
.lp-nav-links > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--grad); border-radius: 2px;
  transition: right var(--dur) var(--ease);
}
.lp-nav-links > a:not(.btn):hover::after,
.lp-nav-links > a:not(.btn)[aria-current="page"]::after { right: 0; }
.lp-brand { color: var(--text); }
.lp-brand img { filter: none; animation: none; }   /* kill fx.css logo pulse */
.brand { color: var(--text); }
.brand img { filter: none; animation: none; }
.lp-menu-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0 10px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-md);
  cursor: pointer;
}
.lp-menu-toggle span { display: block; height: 2px; background: var(--text); border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.lp-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lp-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.lp-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- 15b. app top bar (all data-guard pages except dashboard) --------- */
.navbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: nowrap;
  padding: 10px var(--sp-5);
  background: rgba(11, 16, 32, .92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
  transition: box-shadow var(--dur) var(--ease);
}
.navbar.is-stuck { box-shadow: var(--sh-2); }
.navbar .brand { margin-right: auto; font-size: var(--fs-3); }
.navbar nav {
  display: flex; align-items: center; gap: var(--sp-1);
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.navbar nav::-webkit-scrollbar { display: none; }
.navbar nav a, .navbar nav button {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--text-muted); font-weight: var(--fw-medium); font-size: var(--fs-2);
  padding: 8px 12px; border-radius: var(--r-sm);
  white-space: nowrap; border: 0; background: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.navbar nav a:hover, .navbar nav button:hover { color: var(--text); background: rgba(255, 255, 255, .045); text-decoration: none; }
.navbar nav a.active,
.navbar nav a[aria-current="page"] { color: var(--accent-text); background: var(--accent-soft); }
/* keep .btn styling inside nav */
.navbar nav a.btn, .navbar nav button.btn { padding: 8px 14px; background: var(--bg-3); border: 1px solid var(--border); color: var(--text); }
.navbar nav a.btn:hover, .navbar nav button.btn:hover { background: #223055; }

/* desktop rail — consistent on EVERY app page (overrides redesign.css) */
@media (min-width: 1100px) {
  body[data-guard]:not(.dx) > .navbar.navbar {
    position: fixed; inset: 0 auto 0 0; z-index: 45;
    width: var(--rail-w);
    padding: var(--sp-5) var(--sp-3);
    display: flex; flex-direction: column; align-items: stretch;
    justify-content: flex-start; gap: var(--sp-6);
    background: #0D1424;
    border-right: 1px solid var(--border-soft);
    border-bottom: 0; overflow-y: auto;
  }
  body[data-guard]:not(.dx) > .navbar.navbar .brand { padding: 0 var(--sp-3); font-size: var(--fs-3); margin-right: 0; }
  body[data-guard]:not(.dx) > .navbar.navbar nav { flex-direction: column; align-items: stretch; gap: 3px; overflow: visible; }
  body[data-guard]:not(.dx) > .navbar.navbar nav a,
  body[data-guard]:not(.dx) > .navbar.navbar nav button {
    width: 100%; justify-content: flex-start; padding: 10px 12px; font-size: var(--fs-2);
  }
  body[data-guard]:not(.dx) > .navbar.navbar nav a.btn,
  body[data-guard]:not(.dx) > .navbar.navbar nav button.btn { background: var(--bg-2); }
  body[data-guard]:not(.dx) > .container {
    margin-left: var(--rail-w);
    max-width: calc(var(--content-max) + var(--rail-w));
    padding: var(--sp-6) var(--sp-6) var(--sp-7);
  }
}

/* ---- 15c. dashboard shell (.dx-nav) ---------------------------------- */
.dx-nav, header.dx-nav {
  position: sticky; top: 0; z-index: 45;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-4);
  background: rgba(11, 16, 32, .94) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft) !important;
}
.dx-nav.is-stuck { box-shadow: var(--sh-2); }
.dx-brand { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-3); margin-right: auto; }
.dx-brand img { filter: none; }
.dx-icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--text-muted); cursor: pointer; position: relative;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.dx-icon-btn:hover { background: var(--bg-3); color: var(--text); border-color: var(--border-strong); }
.dx-quick-btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 16px;
  background: var(--grad); color: var(--text-on-accent);
  border: 0; border-radius: var(--r-md);
  font: inherit; font-weight: var(--fw-semi); font-size: var(--fs-2); cursor: pointer;
}
.dx-quick-btn:hover { filter: brightness(1.06); }
.dx-notification-btn { overflow: visible; }
.notification-count {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--danger); color: #fff;
  border-radius: var(--r-full); border: 2px solid var(--bg);
  font-size: 10px; font-weight: var(--fw-bold); line-height: 1;
}

/* dashboard drawer */
.dx-drawer {
  background: #0D1424 !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: var(--sh-3);
}
.dx-drawer-head { padding: var(--sp-4) var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--border-soft); }
.dx-links { padding: var(--sp-3); display: flex; flex-direction: column; gap: 3px; }
.dx-link {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--r-sm);
  color: var(--text-muted); font-weight: var(--fw-medium); font-size: var(--fs-2);
  text-align: left; width: 100%; border: 0; background: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.dx-link:hover, .dx-link[aria-current="page"] { background: rgba(255, 255, 255, .05) !important; color: var(--text); }
.dx-link.is-active, .dx-link.active {
  background: var(--accent-soft) !important;
  color: var(--accent-text);
  box-shadow: inset 2px 0 0 var(--accent);
}
.dx-link .dx-ico { width: 18px; height: 18px; flex: none; opacity: .85; }
.dx-logout { color: #FF9AA4; margin: var(--sp-2) var(--sp-3) var(--sp-4); width: auto; }
.dx-logout:hover { background: var(--danger-soft) !important; color: #FFC2C8; }

/* wallet chip + user menu that nav.js injects into the top bar */
.ct-wallet-chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 0 13px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--r-full);
  color: var(--money); font-size: var(--fs-1); font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ct-wallet-chip:hover { background: rgba(124, 108, 245, .22); color: #CFC9FF; }
.ct-wallet-chip .ct-wallet-label { color: var(--text-faint); font-weight: var(--fw-normal); }

.ct-user-menu { position: relative; }
.ct-user-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 38px; padding: 3px 10px 3px 3px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-full);
  color: var(--text); font: inherit; font-size: var(--fs-1); cursor: pointer;
}
.ct-user-btn:hover { background: var(--bg-3); border-color: var(--border-strong); }
.ct-user-btn .avatar { width: 30px; height: 30px; font-size: 12px; }
.ct-user-btn .ct-user-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 216px; padding: 6px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--sh-3);
  display: none;
}
.ct-menu.is-open { display: block; animation: ct-fade-up var(--dur-fast) var(--ease) both; }
.ct-menu a, .ct-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 11px; border: 0; background: none;
  border-radius: var(--r-sm); color: var(--text-muted);
  font: inherit; font-size: var(--fs-2); text-align: left; cursor: pointer;
}
.ct-menu a:hover, .ct-menu button:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
.ct-menu-sep { height: 1px; background: var(--border-soft); margin: 5px 0; }
.ct-menu-head { padding: 9px 11px 4px; }
.ct-menu-head strong { display: block; color: var(--text); font-size: var(--fs-2); }
.ct-menu-head span { color: var(--text-faint); font-size: var(--fs-0); }

/* wrapper for the injected notification bell (kept distinct from
   .ct-user-menu, which buildUserMenu() uses as its render guard) */
.ct-menu-wrap { position: relative; display: inline-flex; }

/* icon sizing inside the bars */
.navbar nav a svg, .navbar nav button svg { width: 16px; height: 16px; flex: none; }
.dx-icon-btn svg { width: 19px; height: 19px; }
.ct-menu a svg, .ct-menu button svg, .ct-menu-head + * svg { width: 17px; height: 17px; }
.lp-nav-links .btn svg { width: 16px; height: 16px; }

/* search affordance */
.ct-search-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--text-muted); cursor: pointer;
}
.ct-search-btn:hover { background: var(--bg-3); color: var(--text); }

/* ---- 15d. mobile bottom tab bar (creators) --------------------------- */
.ct-bottomnav { display: none; }
@media (max-width: 767px) {
  .ct-bottomnav {
    display: grid;
    grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: rgba(13, 20, 36, .97);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .ct-bottomnav a, .ct-bottomnav button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: var(--bottom-nav-h);
    padding: 8px 2px;
    border: 0; background: none; cursor: pointer;
    color: var(--text-faint); font-size: 10.5px; font-weight: var(--fw-medium);
    text-decoration: none;
  }
  .ct-bottomnav a:hover, .ct-bottomnav button:hover { text-decoration: none; color: var(--text-muted); }
  .ct-bottomnav a[aria-current="page"] { color: var(--accent-text); }
  .ct-bottomnav a[aria-current="page"] svg { color: var(--accent); }
  .ct-bottomnav svg { width: 21px; height: 21px; }
  body.ct-has-bottomnav { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 28px); }
  body.ct-has-bottomnav .dx-wrap,
  body.ct-has-bottomnav .container { padding-bottom: calc(var(--bottom-nav-h) + var(--sp-6)); }
  .ct-toast-host { bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 16px); }
}

/* --------------------------------------------------------------------------
   16. LANDING PAGE
   -------------------------------------------------------------------------- */
.lp-wrap { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--sp-5); }
.lp-hero {
  display: grid; grid-template-columns: 1.06fr .94fr;
  gap: var(--sp-7); align-items: center;
  padding: var(--sp-8) 0 var(--sp-7);
}
.lp-hero-copy > p { max-width: 56ch; color: var(--text-muted); font-size: var(--fs-3); }
.lp-hero h1 { font-size: var(--fs-hero); margin: 0 0 var(--sp-4); }
.lp-hero h1 span { color: var(--accent-text); }
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px 14px; margin-bottom: var(--sp-5);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--r-full); color: var(--accent-text);
  font-size: var(--fs-0); font-weight: var(--fw-semi); letter-spacing: .03em;
}
.lp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(124, 108, 245, .16); }
.lp-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-3); }
.lp-cta-center { justify-content: center; }
.lp-note { color: var(--text-faint); font-size: var(--fs-1); margin-bottom: var(--sp-4); }
.lp-trust-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); color: var(--text-faint); font-size: var(--fs-1); }
.lp-trust-row span:first-child { color: var(--accent-text); }

.lp-hero-visual {
  background: linear-gradient(150deg, #16203C, #0C1324);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  box-shadow: var(--sh-3);
}
.lp-visual-top { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-faint); font-size: var(--fs-0); letter-spacing: .06em; margin-bottom: var(--sp-4); }
.lp-window-dots { display: inline-flex; gap: 5px; }
.lp-window-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-3); }
.lp-live-pill { margin-left: auto; padding: 3px 10px; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-text); font-size: 10px; }
.lp-visual-balance {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4); margin-bottom: var(--sp-3);
  background: linear-gradient(140deg, rgba(124, 108, 245, .18), var(--bg-2) 65%);
  border: 1px solid var(--accent-line); border-radius: var(--r-lg);
}
.lp-visual-balance strong { display: block; font-family: var(--font-display); font-size: var(--fs-5); color: var(--money); }
.lp-muted-label, .lp-visual-balance small, .lp-visual-stats small, .lp-mini-copy span { display: block; color: var(--text-faint); font-size: var(--fs-0); }
.lp-balance-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text); font-weight: var(--fw-bold); }
.lp-visual-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.lp-visual-stats > div { padding: var(--sp-3); background: rgba(255, 255, 255, .022); border: 1px solid var(--border-soft); border-radius: var(--r-md); }
.lp-visual-stats span { color: var(--text-faint); font-size: var(--fs-0); }
.lp-visual-stats strong { display: block; font-family: var(--font-display); font-size: var(--fs-4); }
.lp-mini-campaign {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 11px var(--sp-3); margin-bottom: var(--sp-2);
  background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--r-md);
}
.lp-campaign-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-sm); flex: none; }
.lp-music-icon { background: var(--accent-soft); color: var(--accent-text); }
.lp-brand-icon { background: rgba(91, 124, 250, .16); color: #9FB4FF; }
.lp-mini-copy { flex: 1; min-width: 0; }
.lp-mini-copy strong { display: block; font-size: var(--fs-1); }
.lp-campaign-status { padding: 3px 9px; border-radius: var(--r-full); background: var(--success-soft); color: var(--success); font-size: 10px; font-weight: var(--fw-semi); }
.lp-visual-disclaimer { margin: var(--sp-3) 0 0; color: var(--text-faint); font-size: 10.5px; text-align: center; }

.lp-section { padding: var(--sp-8) 0; border-top: 1px solid var(--border-soft); }
.lp-section-intro { max-width: 62ch; margin-bottom: var(--sp-6); }
.lp-section-intro h2 { font-size: var(--fs-section); }
.lp-kicker, .lp-type-label { display: inline-block; color: var(--accent-text); font-size: var(--fs-0); font-weight: var(--fw-bold); letter-spacing: .1em; margin-bottom: var(--sp-2); }
.lp-lead { color: var(--text-muted); font-size: var(--fs-3); }

.lp-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-4); }
.lp-step-card, .lp-type-card {
  background: var(--bg-2); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); padding: var(--sp-5);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lp-step-card:hover, .lp-type-card:hover { transform: translateY(-3px); border-color: var(--accent-line); }
.lp-step-number { display: block; font-family: var(--font-display); font-size: var(--fs-1); font-weight: var(--fw-bold); color: var(--accent-text); letter-spacing: .1em; margin-bottom: var(--sp-3); }
.lp-step-icon, .lp-benefit-icon {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text);
  margin-bottom: var(--sp-3); font-size: var(--fs-3);
}
.lp-step-card h3, .lp-type-card h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-3); }
.lp-step-card p, .lp-type-card p { color: var(--text-muted); font-size: var(--fs-1); margin: 0; }

.lp-type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-4); }
.lp-type-card { display: grid; grid-template-columns: 130px minmax(0, 1fr); padding: 0; overflow: hidden; }
.lp-type-art { display: grid; place-items: center; font-size: 34px; color: #fff; position: relative; }
.lp-art-music { background: linear-gradient(150deg, #4B3A96, #211B45); }
.lp-art-brand { background: linear-gradient(150deg, #2A4C86, #151D3B); }
.lp-art-wave, .lp-art-ring { display: none; }
.lp-type-content { padding: var(--sp-5); }
.lp-text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); font-weight: var(--fw-semi); font-size: var(--fs-1); margin-top: var(--sp-3); }

.lp-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); }
.lp-benefits > article { display: flex; gap: var(--sp-3); padding: var(--sp-4); background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--r-lg); }
.lp-benefits > article .lp-benefit-icon { margin-bottom: 0; flex: none; }
.lp-benefits h3 { margin: 0 0 4px; font-size: var(--fs-2); }
.lp-benefits p { margin: 0; color: var(--text-muted); font-size: var(--fs-1); }

.lp-faq { max-width: 880px; }
.lp-faq details { background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: var(--sp-2); }
.lp-faq summary { cursor: pointer; font-weight: var(--fw-semi); color: var(--text); list-style: none; display: flex; justify-content: space-between; gap: var(--sp-3); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; color: var(--accent-text); font-size: var(--fs-4); line-height: 1; }
.lp-faq details[open] summary::after { content: "\2212"; }
.lp-faq details p { margin: var(--sp-3) 0 0; color: var(--text-muted); font-size: var(--fs-1); }

.lp-final { text-align: center; border-top: 1px solid var(--border-soft); }
.lp-final .lp-section-intro { margin-left: auto; margin-right: auto; text-align: center; }
.lp-final-type { color: var(--text-muted); }

.lp-footer {
  max-width: var(--content-max); margin: 0 auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--border-soft);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-6);
  color: var(--text-muted);
}
.lp-footer-brand p { color: var(--text-faint); font-size: var(--fs-1); max-width: 42ch; margin-top: var(--sp-2); }
.lp-footer nav { display: flex; flex-direction: column; gap: 9px; }
.lp-footer nav a { color: var(--text-muted); font-size: var(--fs-1); }
.lp-footer nav a:hover { color: var(--text); }
.lp-footer-bottom { grid-column: 1 / -1; padding-top: var(--sp-4); border-top: 1px solid var(--border-soft); color: var(--text-faint); font-size: var(--fs-0); }

/* legal pages */
.lp-legal { max-width: 820px; margin: 0 auto; padding: var(--sp-7) var(--sp-5); }
.lp-legal h1 { font-size: var(--fs-5); margin-bottom: var(--sp-2); }
.lp-legal h2 { font-size: var(--fs-3); margin: var(--sp-6) 0 var(--sp-2); }
.lp-legal p, .lp-legal li { color: var(--text-muted); font-size: var(--fs-2); line-height: 1.7; }
.lp-legal ul { padding-left: var(--sp-5); }
.lp-legal .lp-updated { color: var(--text-faint); font-size: var(--fs-1); margin-bottom: var(--sp-5); }
.lp-legal .card { background: var(--bg-2); }

/* --------------------------------------------------------------------------
   17. AUTH PAGES
   -------------------------------------------------------------------------- */
.auth-page {
  min-height: 100vh; padding: var(--sp-6) var(--sp-4);
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% -8%, rgba(124, 108, 245, .16), transparent 55%), var(--bg);
}
.auth-box { width: min(100%, 468px); }
.auth-box > .brand { justify-content: center; margin-bottom: var(--sp-5); font-size: var(--fs-4); }
.auth-box h1 { font-size: var(--fs-4); margin-bottom: 4px; }
.auth-box > .card { padding: var(--sp-6); border-color: var(--border); box-shadow: var(--sh-3); }
.auth-box form .btn[type="submit"] { width: 100%; margin-top: var(--sp-1); }
.auth-divider { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0; color: var(--text-faint); font-size: var(--fs-0); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); }
.auth-box > .card > .btn-google, .auth-box > .card > .btn-discord { width: 100%; }
.auth-switch { text-align: center; color: var(--text-muted); font-size: var(--fs-1); margin-top: var(--sp-3); }
.auth-switch a { color: var(--accent-text); }
.auth-page .brand img { filter: none; animation: none; }

/* --------------------------------------------------------------------------
   18. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1099px) {
  .container { padding: var(--sp-5) var(--sp-5) var(--sp-7); }
}
@media (max-width: 1023px) {
  .lp-hero { grid-template-columns: 1fr; padding: var(--sp-7) 0 var(--sp-6); gap: var(--sp-6); }
  .lp-hero-visual { order: 2; }
}
@media (max-width: 860px) {
  .lp-nav-links {
    position: absolute; left: var(--sp-4); right: var(--sp-4); top: calc(100% + 8px);
    flex-direction: column; align-items: stretch; gap: var(--sp-1);
    padding: var(--sp-3);
    background: var(--bg-2); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--sh-3);
    display: none;
  }
  .lp-nav-links.is-open { display: flex; animation: ct-fade-up var(--dur-fast) var(--ease) both; }
  .lp-nav-links > a:not(.btn) { padding: 10px 12px; border-radius: var(--r-sm); }
  .lp-nav-links > a:not(.btn)::after { display: none; }
  .lp-nav-links .btn { width: 100%; }
  .lp-menu-toggle { display: flex; }
  .lp-header { position: relative; }
}
@media (max-width: 767px) {
  :root { --content-max: 100%; }
  body { font-size: var(--fs-2); }
  .container { padding: var(--sp-4) var(--sp-4) var(--sp-6); }
  .card { padding: var(--sp-4); border-radius: var(--r-md); }
  .grid-2 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: var(--sp-3); }
  .lp-wrap { padding: 0 var(--sp-4); }
  .lp-section { padding: var(--sp-6) 0; }
  .lp-footer { grid-template-columns: 1fr; gap: var(--sp-5); padding: var(--sp-6) var(--sp-4) var(--sp-5); }
  .lp-visual-stats { grid-template-columns: 1fr; }
  .lp-type-card { grid-template-columns: 1fr; }
  .lp-type-art { min-height: 104px; }
  .auth-box > .card { padding: var(--sp-5); }
  .navbar { padding: 10px var(--sp-4); }
  .navbar nav { gap: 2px; }
  .navbar nav a, .navbar nav button { padding: 8px 10px; font-size: var(--fs-1); }
  /* the app top bar collapses to a hamburger panel, exactly like the
     public header — nav.js toggles .is-open / aria-expanded on .navbar.
     Visual order on mobile: brand … [bell][balance][avatar][menu] */
  .navbar > .lp-menu-toggle { display: flex; order: 5; margin-left: var(--sp-1); }
  .ct-menu-wrap { order: 2; margin-right: var(--sp-1); }
  .ct-wallet-chip { order: 3; margin-right: var(--sp-1); }
  .ct-user-menu { order: 4; }
  .navbar nav {
    position: absolute; left: var(--sp-3); right: var(--sp-3); top: calc(100% + 8px);
    flex-direction: column; align-items: stretch; gap: var(--sp-1);
    padding: var(--sp-3);
    background: var(--bg-2); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--sh-3);
    overflow: visible;
    display: none;
  }
  .navbar.is-open nav { display: flex; animation: ct-fade-up var(--dur-fast) var(--ease) both; }
  .navbar nav a, .navbar nav button { width: 100%; justify-content: flex-start; padding: 11px 12px; font-size: var(--fs-2); }
  .navbar nav a.btn, .navbar nav button.btn { justify-content: center; }
  .tabs { margin-top: var(--sp-4); }
  .nav-hide-mobile { display: none !important; }
}
@media (max-width: 480px) {
  .lp-hero h1 { font-size: clamp(32px, 10vw, 44px); }
  .lp-cta .btn { flex: 1 1 100%; }
  .lp-cta { gap: var(--sp-2); }
  .ct-user-btn .ct-user-name { display: none; }
  .ct-wallet-chip .ct-wallet-label { display: none; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .ct-toast-host { left: var(--sp-3); right: var(--sp-3); max-width: none; }
}

@media (min-width: 1024px) {
  .ct-only-mobile { display: none !important; }
}

/* print */
@media print {
  body::before { display: none; }
  .navbar, .lp-header, .ct-bottomnav, .dx-nav, .ct-toast-host { display: none !important; }
}

/* --------------------------------------------------------------------------
   19. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .sk::after { display: none; }
  .btn:hover, .card:hover, .campaign-card:hover, a.card:hover { transform: none; }
  .fx-reveal { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   20. LEGACY TOKEN BRIDGE

   The older page stylesheets (dashboard-v2.css, brand.css, profile.css,
   support.css …) reference a handful of tokens that were never declared, so
   their light-theme fallbacks (grey #6b7280, slate #9aa9bd, navy #263449)
   were silently applied on the dark UI. Declaring them here fixes every one
   of those call sites at once, with no per-rule rewriting.
   -------------------------------------------------------------------------- */
:root {
  --muted:      var(--text-muted);
  --muted-2:    var(--text-faint);
  --line:       var(--border);
  --line-soft:  var(--border-soft);
  --line-strong: var(--border-strong);
  --ink:        var(--text);
  --panel:      var(--bg-2);
  --panel-2:    var(--bg-3);
  --card:       var(--bg-2);
  --faint:      var(--text-faint);
}

/* Surfaces that older page CSS pinned to a hard-coded light colour. */
.analytics-metrics > div,
.view-streak-card,
.streak-progress,
.dx-notification-panel,
.notification-row { border-color: var(--border-soft); }
.analytics-metrics > div,
.view-streak-card { background: var(--bg-2); border-radius: var(--r-md); }
.streak-progress { background: var(--bg-3); }
.dx-notification-panel { background: var(--bg-2); border-color: var(--border); box-shadow: var(--sh-3); }
.dx-notification-head { background: var(--bg-2); border-bottom-color: var(--border-soft); }
.dx-notification-item { border-bottom-color: var(--border-soft); }
.dx-notification-item.is-unread { background: var(--accent-soft); }
.dx-notification-count, .notification-count { background: var(--danger); }
.view-bar { border-bottom-color: var(--border-soft); }
.view-bar-fill { background: var(--accent); }
.view-bar-label, .view-bar-value { color: var(--text-faint); }
.dx-notification-copy span, .dx-notification-empty, .notification-empty { color: var(--text-muted); opacity: 1; }

/* Creator dashboard surfaces that the old layer pinned with !important. */
.dx-avail {
  background: linear-gradient(150deg, rgba(124, 108, 245, .16), var(--bg-2) 62%) !important;
  border-color: var(--accent-line) !important;
}
.dx-money { color: var(--money) !important; }
.dx-tab.is-active { color: var(--accent-text) !important; border-color: var(--accent) !important; }
.dx-balance, .dx-bal-tile { border-color: var(--border-soft) !important; }
.dx-nav { background: rgba(11, 16, 32, .94) !important; }

/* Campaign wizard from brand.css */
.campaign-wizard-progress li { color: var(--text-faint); }
.campaign-wizard-progress li.active { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.campaign-wizard-progress li.complete { color: var(--success); border-color: rgba(63, 214, 155, .5); }

/* Muted small text must stay legible: the old layer dimmed it with
   opacity (0.48–0.72) on top of an already-muted colour, which pushed
   several labels below AA against the dark background. */
.notification-row small,
.dx-notification-copy small,
.dx-notification-copy span,
.dx-notification-empty,
.dx-notification-readall,
.notification-empty { opacity: 1; color: var(--text-muted); }
.notification-row small, .dx-notification-copy small { color: var(--text-faint); }
.view-bar-fill { opacity: 1; }
/* the streak keeps its identity without a gold emoji glyph */
#view-streak-level { color: var(--accent-text); }

/* Respect the HTML hidden attribute on everything, even display-styled parts. */
[hidden] { display: none !important; }

/* ==========================================================================
   Campaign description / requirements (campaign.html)
   ==========================================================================
   `js/campaign.js` renders the brand's brief into `.description` and the
   brand's own rules into `.requirements`, but neither class was ever defined
   in any stylesheet. The brief therefore rendered as unstyled, unseparated
   text: multi-line descriptions collapsed into a single run-on blob and any
   stray max-height / line-clamp from a generic `p` rule could clip it, which
   is what creators reported as a "truncated or empty" description.

   These rules guarantee the FULL text is always shown:
     * `white-space: pre-wrap` preserves the line breaks the brand typed.
     * `max-height: none` and `-webkit-line-clamp: unset` undo any clamping
       inherited from a generic selector, so nothing is clipped.
     * `overflow-wrap: anywhere` stops a long URL from forcing horizontal
       scroll on narrow screens.
   ========================================================================== */
.campaign-info .description,
.campaign-info .requirements {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow: visible;
  max-height: none;
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  line-height: 1.65;
  margin: 0.75rem 0 1rem;
  color: var(--text, inherit);
}

/* The brand's own rules are supplementary: give them a visible left edge so a
   creator can tell them apart from the fixed campaign rules that follow. */
.campaign-info .requirements {
  border-left: 3px solid var(--border, rgba(127, 127, 127, 0.35));
  padding: 0.25rem 0 0.25rem 0.85rem;
}