@charset "UTF-8";
/* Shared affiliate portal tokens extracted from the v2 templates. */
:root {
  --font-display: "Archivo Expanded", "Archivo", -apple-system, sans-serif;
  --font-body: "Archivo", -apple-system, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-ui: 14px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 21px;
  --text-2xl: 27px;
  --text-3xl: 34px;
  --text-hero: 76px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --navy: #111418;
  --navy-2: #1b2026;
  --navy-3: #2a323b;
  --ink: #111418;
  --ink-soft: #5c636b;
  --ink-faint: #646c75;
  --money: #14613f;
  --money-deep: #0f4d32;
  --money-tint: #e3efe7;
  --gild: #e8540c;
  --gild-text: #b03a05;
  --gild-soft: #f07b42;
  --gild-tint: #fbe9df;
  --bg: #fafaf7;
  --surface: #fafaf7;
  --surface-2: #f1f1ec;
  --line: #c9ccc6;
  --line-soft: #dddfd9;
  --on-dark: #fafaf7;
  --on-dark-soft: rgba(250, 250, 247, 0.72);
  --on-dark-faint: rgba(250, 250, 247, 0.56);
  --dark-line: rgba(250, 250, 247, 0.16);
  --st-referred-bg: transparent;
  --st-referred-fg: #646c75;
  --st-signed-bg: transparent;
  --st-signed-fg: #2f5d8e;
  --st-docs-bg: transparent;
  --st-docs-fg: #8a5a14;
  --st-activated-bg: transparent;
  --st-activated-fg: #186078;
  --st-trading-bg: transparent;
  --st-trading-fg: var(--gild-text);
  --warn: #b03a05;
  --warn-tint: #fbe9df;
  --radius: 0;
  --radius-sm: 0;
  --shadow-card: none;
  --shadow-pop: 0 16px 44px -12px rgba(17, 20, 24, 0.25);
  --card-bg: transparent;
  --card-border: 0 solid transparent;
  --card-rule: 1px solid var(--ink);
  --chip-pad: 0;
  --chip-case: uppercase;
  --chip-ls: 0.14em;
  --chip-dot: none;
  --hero-bg: transparent;
  --hero-fg: var(--ink);
  --hero-fg-soft: var(--ink-soft);
  --hero-fg-faint: var(--ink-faint);
  --hero-cell-bg: transparent;
  --hero-cell-line: var(--line);
  --hero-kicker: var(--ink-faint);
  --hero-accent: var(--gild-text);
  --hero-rule: 2px solid var(--ink);
  --hero-hairline: none;
  --nav-bg: var(--bg);
  --nav-fg: var(--ink);
  --nav-fg-soft: var(--ink-soft);
  --nav-line: 1px solid var(--ink);
  --nav-active-bg: transparent;
  --nav-active-line: var(--gild);
  --bar: var(--ink);
  --bar-peak: var(--gild);
  --hero-shadow: none;
  --hero-pad: 36px 0 30px;
  --delta-bg: transparent;
  --delta-fg: var(--gild-text);
  --delta-pad: 0;
  --chip-fs: 11px;
  --card-pad-x: 0;
  --field-bg: #fff;
  --pop-bg: #fff;
  --ico-bg: transparent;
  --ico-border: 1px;
  --tone-1000: #111418;
  --tone-900: #282b2e;
  --tone-800: #404245;
  --tone-700: #57595b;
  --tone-600: #6e7071;
  --tone-500: #868788;
  --tone-400: #9d9e9e;
  --tone-300: #b4b5b4;
  --tone-200: #cbccca;
  --tone-100: #e3e3e1;
  --tone-0: #fafaf7;
  --primary-main: #e8540c;
  --primary-dark-800: #291b17;
  --primary-dark-700: #412215;
  --primary-dark-600: #592914;
  --primary-dark-500: #713013;
  --primary-dark-400: #883811;
  --primary-dark-300: #a03f10;
  --primary-dark-200: #b8460f;
  --primary-dark-100: #d04d0d;
  --primary-light-800: #ea6626;
  --primary-light-700: #ec7940;
  --primary-light-600: #ee8b5a;
  --primary-light-500: #f09e74;
  --primary-light-400: #f2b08f;
  --primary-light-300: #f4c3a9;
  --primary-light-200: #f6d5c3;
  --primary-light-100: #f8e8dd;
  --primary-light-50: #f8f1eb;
  --blue-main: #3a6ea5;
  --blue-light-100: #e5eaee;
  --gold-main: #b07c10;
  --gold-light-100: #f2ecdd;
  --teal-main: #1d7a96;
  --teal-light-100: #e1ecec;
}

/* CT Partner Portal — shared layout/components (from wireframe assets/styles.css).
   Design tokens live in affiliates/tokens.scss; page-specific styles in affiliates/pages/. */
/* ============================================================
   CT Partner Portal — components
   All colors/typography via tokens.css variables.
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  /* Sticky footer: body is a flex column at least as tall as the viewport, so the
     main content (.shell, flex:1) grows to fill any spare height and pins the
     footer to the bottom of the window. When content is taller than the viewport
     there's no spare height to absorb, so the footer flows below in normal scroll. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}

a {
  color: inherit;
}

button {
  font: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--primary-main);
  outline-offset: 2px;
  border-radius: 4px;
}

.hero :focus-visible {
  outline-color: var(--primary-main);
}

.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;
}

.skip {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 200;
  background: var(--navy);
  color: var(--on-dark);
  font-weight: 700;
  font-size: var(--text-md);
  padding: 10px 16px;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  transition: top 0.15s;
}

.skip:focus {
  top: 0;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-main), var(--primary-main));
  color: #fff;
  font-weight: 700;
  font-size: var(--text-md);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  letter-spacing: 0.5px;
}

/* ---------- page shell ---------- */
/* flex:1 lets the content absorb spare viewport height and push the footer down
   (see body sticky-footer note). margin-right:0 (not auto) keeps flex `stretch`
   active so the shell still fills its width up to max-width, exactly as before. */
.shell {
  max-width: 1280px;
  margin: 0;
  padding: 32px 24px 24px;
  flex: 1 0 auto;
}

.page-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 24px;
  flex-wrap: wrap;
}

.page-head h1 {
  font-size: var(--text-2xl);
  line-height: 1;
}

.page-head .sub {
  color: var(--ink-soft);
  font-size: var(--text-ui);
}

/* page-head top-right meta: date + currency + /// marks — canonical, shared by pipeline/trades/insights */
.page-meta {
  text-align: right;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.5;
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.page-meta b {
  font-weight: 600;
}

.page-meta .marks {
  color: var(--primary-main);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.kicker {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-main);
  margin-bottom: 6px;
}

/* canonical "///" eyebrow marks — pipeline kicker is the single source of truth for every page/mini header */
.kicker .slash {
  color: var(--primary-main);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hero .kicker {
  color: var(--hero-kicker);
}

.hero .kicker .slash {
  color: var(--hero-kicker);
}

/* ---------- cards ---------- */
.card {
  background: var(--card-bg);
  border: var(--card-border);
  border-top: var(--card-rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 24px var(--card-pad-x, 24px);
  position: relative;
}

.card h2 {
  font-size: var(--text-lg);
  margin-bottom: 4px;
}

.card .card-sub {
  color: var(--ink-soft);
  font-size: var(--text-md);
  margin: 0 0 16px;
}

.card-row {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.card-row--main {
  grid-template-columns: 1.35fr 1fr;
}

/* main + sidebar */
.card-row--half {
  grid-template-columns: 1fr 1fr;
}

.count {
  color: var(--ink-faint);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 400;
}

.footnote {
  font-size: var(--text-md);
  color: var(--ink-faint);
  margin: 12px 0 0;
}

/* ---------- hero (navy earnings panel) ---------- */
.hero {
  background: var(--hero-bg);
  color: var(--hero-fg);
  border-radius: var(--radius);
  box-shadow: var(--hero-shadow, none);
  border-top: var(--hero-rule);
  border-bottom: var(--hero-rule);
  padding: var(--hero-pad, 32px 0 28px);
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--hero-hairline);
  opacity: 0.7;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 32px;
  align-items: end;
}

.hero .kicker {
  color: var(--hero-kicker);
}

.hero__meta {
  color: var(--hero-fg-soft);
  font-size: var(--text-ui);
  margin-top: 10px;
}

.hero__meta strong {
  color: var(--hero-fg);
  font-weight: 700;
}

.hero__cells {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.hero-cell {
  background: var(--hero-cell-bg);
  border: 1px solid var(--hero-cell-line);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
}

.hero-cell .lbl {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hero-fg-faint);
  margin-bottom: 4px;
}

.hero-cell .val {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hero-cell .note {
  font-size: var(--text-sm);
  color: var(--hero-fg-soft);
  margin-top: 2px;
}

.hero-cell--gold .val {
  color: var(--hero-accent);
}

/* ---------- stat strip ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 0px;
}

.stats--3 {
  grid-template-columns: repeat(3, 1fr);
}

.stats--4 {
  grid-template-columns: repeat(4, 1fr);
}

.stats--6 {
  grid-template-columns: repeat(6, 1fr);
}

.stat .lbl {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 5px;
}

.stat .val {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.stat .note {
  font-size: var(--text-md);
  color: var(--ink-soft);
  margin-top: 3px;
  line-height: 1.15;
}

.stat .note .up {
  color: var(--money);
  font-weight: 700;
}

/* ---------- chart ---------- */
.chart-svg {
  width: 100%;
  height: auto;
  display: block;
}

.chart-svg .bar {
  fill: var(--bar);
  opacity: 0.85;
}

.chart-svg .bar:hover {
  opacity: 1;
}

.chart-svg .bar--peak {
  fill: var(--bar-peak);
  opacity: 1;
}

.chart-svg .bar--mtd {
  fill: none;
  stroke: var(--bar);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  opacity: 0.9;
}

.chart-svg .axis {
  font: var(--text-xs) var(--font-body);
  fill: var(--ink-faint);
}

.chart-svg .gline {
  stroke: var(--line-soft);
  stroke-width: 1;
}

/* ---------- chart summary strip ---------- */
.chart-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 14px;
}

.chart-stats > div:not(:first-child) {
  border-left: 1px solid var(--line-soft);
  padding-left: 18px;
}

.chart-stats > div {
  padding-right: 18px;
}

.chart-stats .lbl {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 3px;
}

.chart-stats .val {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.chart-stats .val small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--ink-soft);
}

/* ---------- tables ---------- */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-ui);
}

.tbl th {
  text-align: left;
  font-size: var(--text-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.tbl td {
  padding: 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

.tbl tr:last-child td {
  border-bottom: 0;
}

/* card tables keep a bottom edge so a following pager reads as connected */
.card .tbl tr:last-child td {
  border-bottom: 1px solid var(--line-soft);
}

.tbl .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
  padding-bottom: 4px;
}

.tbl th.num {
  text-align: right;
}

.tbl .money {
  color: var(--money-deep);
  font-weight: 700;
}

.tbl .tbl__total {
  background: var(--surface-2);
}

.tbl tbody tr {
  transition: background 0.12s;
}

.tbl tbody tr:hover {
  background: var(--surface-2);
}

.tbl .muted {
  color: var(--ink-faint);
}

.rowlink {
  color: var(--navy-3);
  font-weight: 700;
  text-decoration: none;
}

.rowlink:hover {
  text-decoration: underline;
}

/* client-type indicator icon (Corporate / Private) — inherits surrounding text colour */
.ctype-ico {
  width: 28px;
  height: 28px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  flex: 0 0 auto;
}

/* ---------- table toolbar + pager (trades / pipeline) ---------- */
.tbl-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 24px;
  position: relative;
}

.pager__nav {
  display: inline-flex;
  align-items: center;
}

.pager .pg {
  min-width: 34px;
  height: 37px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: var(--text-md);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.12s ease;
}

.pager__nav .pg {
  margin-left: -1px;
}

.pager__nav .pg[aria-label] {
  padding: 0 4px;
}

.pager__nav .pg:first-child {
  margin-left: 0;
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}

.pager__nav .pg:last-child {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

.pager .pg[aria-current=true] {
  background: var(--ink);
  color: var(--on-dark);
  border-color: var(--ink);
  position: relative;
  z-index: 2;
}

.pager .pg[aria-disabled=true] {
  opacity: 0.4;
  cursor: default;
}

.pager .pg:not(.pg--info):not([aria-current=true]):not([aria-disabled=true]):hover {
  background: var(--tone-100);
}

.pager .pg[aria-current=true]:hover {
  background: var(--tone-800);
}

.pager .pg--info {
  color: var(--ink-faint);
  cursor: default;
  background: var(--surface-2);
  padding: 0 12px;
}

@media (max-width: 767px) {
  .pager {
    justify-content: flex-start;
  }
}
@media (max-width: 480px) {
  .pager {
    flex-wrap: wrap;
    gap: 6px;
  }
}
@media (max-width: 479px) {
  .pager__nav .pg:not([aria-label]):not(.pg--info) {
    display: none;
  }
}
/* ---------- status chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--chip-fs, var(--text-sm));
  font-weight: 700;
  padding: var(--chip-pad);
  border-radius: 99px;
  text-transform: var(--chip-case);
  letter-spacing: var(--chip-ls);
  white-space: nowrap;
}

.chip::before {
  content: "";
  display: var(--chip-dot);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.chip--referred {
  background: var(--st-referred-bg);
  color: var(--st-referred-fg);
}

.chip--signed {
  background: var(--st-signed-bg);
  color: var(--st-signed-fg);
}

.chip--docs {
  background: var(--st-docs-bg);
  color: var(--st-docs-fg);
}

.chip--activated {
  background: var(--st-activated-bg);
  color: var(--st-activated-fg);
}

.chip--trading {
  background: var(--st-trading-bg);
  color: var(--primary-main);
}

.chip--paid {
  background: var(--st-trading-bg);
  color: var(--primary-main);
}

.chip--scheduled {
  background: var(--st-docs-bg);
  color: var(--st-docs-fg);
}

.chip--accruing {
  background: var(--st-signed-bg);
  color: var(--st-signed-fg);
}

.chip--rolled {
  background: var(--st-referred-bg);
  color: var(--st-referred-fg);
}

.chip--closed {
  background: var(--st-referred-bg);
  color: var(--st-referred-fg);
  opacity: 0.85;
}

/* date of last status change, shown inside the pill (Pipeline) */
.chip__date {
  font-weight: 600;
  font-size: 0.85em;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-weight: 700;
  font-size: var(--text-ui);
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--navy);
  color: var(--on-dark);
}

.btn--primary:hover {
  box-shadow: var(--shadow-card);
}

.btn--gold {
  background: var(--primary-main);
  color: #fff;
}

.btn--gold:hover {
  background: var(--primary-light-700);
}

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}

.btn--ghost:hover {
  background: var(--surface-2);
}

.btn--sm {
  padding: 6px 12px;
  font-size: var(--text-md);
  border-radius: var(--radius-sm);
}

.btn--on {
  background: var(--money-tint);
  border-color: var(--money);
  color: var(--money-deep);
}

.btn--ghost[aria-pressed=true] {
  background: var(--surface-2);
  border-color: var(--ink-soft);
}

.ico-pencil {
  width: 24px;
  height: 24px;
  display: block;
  flex: 0 0 auto;
}

/* Edit toggle buttons (settings — Edit profile / Edit brand kit / Edit account):
   full border all the way around, in the darkest tone per annotation. */
.editable__view [data-edit-toggle] {
  border-top: 1px solid var(--tone-1000);
  border-right: 1px solid var(--tone-1000);
  border-left: 1px solid var(--tone-1000);
  border-bottom: 1px solid var(--tone-1000);
}

/* Exception — share (Invite by Email) "Edit Message" toggle (the only edit
   toggle inside a .lbl-row): keep borders on top/right/left only, no bottom
   border. Do not change. */
.editable__view .lbl-row [data-edit-toggle] {
  border-bottom: 0;
}

/* icon + label (small) buttons: tighten the icon side of the padding and use a
   4px icon↔label gap so the glyph sits optically balanced against the text.
   Default assumes the icon is left of the label; add .btn--ico-right when the
   icon follows the label. (per design annotation) */
.btn--sm:has(> svg) {
  padding: 6px 12px 6px 8px;
  gap: 4px;
}

.btn--sm.btn--ico-right:has(> svg) {
  padding: 6px 8px 6px 12px;
}

/* fixed 35px height for specific table-action buttons (pipeline "Ask us why",
   payouts "Statement", invitations "Resend"); overrides the base .btn min-height:40px */
.btn--h35 {
  height: 35px;
  min-height: 35px;
}

/* ---------- copy field / referral link ---------- */
.copyfield {
  display: flex;
  align-items: stretch;
  gap: 0px;
  border: 1px solid var(--tone-1000);
}

.copyfield input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--ink);
  background: var(--field-bg, var(--surface-2));
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  min-width: 0;
}

.copy-ok {
  color: var(--money);
  font-weight: 700;
  font-size: var(--text-md);
}

/* check glyph shown in the "Copied" state — external 24px SVG, recoloured to the
   button's currentColor via mask so it works on light and dark buttons alike */
.copy-ico {
  display: inline-block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: asset-url("affiliates/icon-check.svg") center/20px 20px no-repeat;
  mask: asset-url("affiliates/icon-check.svg") center/20px 20px no-repeat;
}

/* ---------- QR placeholder ---------- */
.qrbox {
  width: 124px;
  height: 124px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--field-bg, var(--surface));
  display: flex;
  align-items: center;
  justify-content: center;
}

.qrbox svg {
  display: block;
}

.qrbox svg rect {
  fill: var(--ink);
}

/* ---------- resources: calculator + snippet ---------- */
.calc-out {
  border-top: 1px solid var(--ink);
  padding-top: 12px;
  margin-top: 4px;
}

.calc-out .lbl {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 3px;
}

.calc-out .val {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--money-deep);
  font-variant-numeric: tabular-nums;
}

.calc-out .val small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--ink-soft);
}

.calc-out .note {
  font-size: var(--text-sm);
  color: var(--ink-faint);
  margin-top: 3px;
}

.snippet {
  margin: 0 0 12px;
  padding: 14px 16px;
  background: var(--navy);
  color: var(--on-dark);
  font: var(--text-md) var(--font-mono);
  overflow-x: auto;
  white-space: pre;
}

/* ---------- template gallery: in-situ message mocks ---------- */
.tpl-card {
  position: relative;
}

.tpl-card .tpl-tabs {
  display: flex;
  gap: 6px;
  margin: 10px 0 12px;
}

.tpl-variant[hidden] {
  display: none;
}

.mock-email {
  background: #fff;
  border: 1px solid var(--line);
  font-size: var(--text-md);
}

.mock-email__hdr {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
}

.mock-email__hdr b {
  color: var(--ink);
}

.mock-email__hdr div {
  padding: 2px 0;
}

.mock-email__body {
  padding: 14px;
  line-height: 1.6;
  color: var(--ink);
}

.mock-email__body .lnk {
  color: var(--primary-main);
  font-weight: 700;
  text-decoration: underline;
}

.mock-wa {
  background: #e9e2d8;
  border: 1px solid var(--line);
  padding: 18px 14px 14px;
}

.mock-wa__bubble {
  position: relative;
  background: #dcf5cd;
  border-radius: 8px 8px 8px 8px;
  padding: 10px 12px 18px;
  max-width: 92%;
  margin-left: auto;
  font-size: var(--text-md);
  line-height: 1.5;
  color: #1b2a1e;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.mock-wa__bubble .lnk {
  color: #0b6e9e;
  text-decoration: underline;
  word-break: break-all;
}

.mock-wa__meta {
  position: absolute;
  right: 10px;
  bottom: 4px;
  font-size: 10px;
  color: #7a8c7d;
}

.mock-wa__meta .tick {
  color: #53a6e0;
}

.browser-mock {
  border: 1px solid var(--tone-1000);
  background: #fff;
}

.browser-mock__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
}

.browser-mock__bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
}

.browser-mock__url {
  flex: 1;
  font: var(--text-2xs) var(--font-mono);
  color: var(--ink-soft);
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 99px;
  padding: 4px 12px;
}

.browser-mock__heroband {
  background: var(--navy);
  color: var(--on-dark);
  padding: 18px 18px 16px;
}

.browser-mock__heroband .k {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-main);
  margin-bottom: 6px;
}

.browser-mock__heroband .h {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.3;
}

.browser-mock__body {
  padding: 14px 18px;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.browser-mock__cta {
  display: inline-block;
  background: var(--primary-main);
  color: #fff;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  margin-top: 8px;
}

.range-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 2px;
}

.range-row input[type=range] {
  flex: 1;
  accent-color: var(--primary-main);
}

.range-row output {
  font: 700 var(--text-md) var(--font-body);
  min-width: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- connector cards ---------- */
.connector {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  padding: 14px 16px;
  background: #fff;
}

.connector .logo {
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--text-md);
}

.connector .t b {
  display: block;
  font-size: var(--text-ui);
}

.connector .t span {
  font-size: var(--text-sm);
  color: var(--ink-faint);
}

.connector .btn {
  margin-left: auto;
}

/* ---------- letter preview (invitation message) ---------- */
.letter {
  margin: 0;
  padding: 14px 20px;
  border: 1px solid var(--tone-1000);
  background: var(--surface-2);
  font-size: var(--text-ui);
  color: var(--ink-soft);
}

.letter p {
  margin: 0 0 10px;
}

.letter p:last-child {
  margin: 0;
}

.letter__link {
  color: var(--primary-main);
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: var(--text-md);
}

/* ---------- threshold / progress ---------- */
.meter {
  background: var(--line-soft);
  height: 8px;
  border-radius: 99px;
  overflow: hidden;
}

.meter > span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--money), var(--money-deep));
}

/* ---------- notifications panel ---------- */
.notif-wrap {
  position: relative;
}

.notif-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 384px;
  max-height: clamp(0px, 80vh, 624px);
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  z-index: 60;
  overflow: hidden;
  display: none;
  flex-direction: column;
}

.notif-panel.open {
  display: flex;
}

@media (prefers-reduced-motion: no-preference) {
  .notif-panel.open {
    animation: pop 0.18s ease-out;
  }
}
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
/* glyph masks — supplied funnel (pipeline) / trades / payouts / gear SVGs,
   tinted via background-color so they pick up the per-icon colour */
.notif-panel {
  --ni-pipeline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.98,2.22c-5.39,0-9.75,1.45-9.75,3.75v1.23c0,.67.24,1.32.69,1.83l5.54,6.21v3.72c0,1.51,1.23,2.75,2.75,2.75h1.5c1.51,0,2.75-1.24,2.75-2.75v-3.65l5.58-6.26c.44-.51.69-1.16.69-1.84v-1.24c0-2.3-4.37-3.75-9.75-3.75ZM5.85,4.57c1.59-.54,3.78-.85,6.12-.85s4.53.3,6.12.84c1.39.46,2.12,1.03,2.12,1.4v.2c-.17.36-.88.84-2.09,1.24-1.6.53-3.79.84-6.13.84s-4.54-.31-6.13-.85c-1.4-.47-2.13-1.04-2.13-1.41s.72-.95,2.12-1.41ZM14.14,14.45c-.13.13-.2.31-.2.49l.06.06v4c0,.69-.56,1.25-1.25,1.25h-1.5c-.7,0-1.25-.56-1.25-1.25v-4c0-.19-.07-.37-.2-.5l-5.44-6.09c1.79.84,4.53,1.32,7.62,1.32s5.73-.46,7.52-1.27l-5.36,5.99ZM15.46,15.1v-.14l.04.04-.04.1Z'/%3E%3C/svg%3E");
  --ni-trade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5,13.44l-14.99-.02h0c-.67,0-1,.81-.53,1.28l4.34,4.34c.29.29.77.29,1.06,0s.29-.77,0-1.06l-3.05-3.05,13.18.02h0c.41,0,.75-.33.75-.75s-.33-.75-.75-.75Z'/%3E%3Cpath d='M4.5,10.56l14.99.02h0c.67,0,1-.81.53-1.28l-4.34-4.34c-.29-.29-.77-.29-1.06,0s-.29.77,0,1.06l3.05,3.05-13.18-.02h0c-.41,0-.75.33-.75.75s.33.75.75.75Z'/%3E%3C/svg%3E");
  --ni-payout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21,10.68c.41,0,.75-.34.75-.75v-3.01c0-.3-.18-.57-.45-.69l-9-3.93c-.2-.09-.41-.09-.61,0L2.69,6.22c-.28.11-.45.38-.45.68v3c0,.41.33.75.75.75v.03h10.9v6.56h-.9c-.42,0-.75.33-.75.75s.33.75.75.75h6.53l.71,1.42v.07h-10.25c-.42,0-.75.33-.75.75s.33.75.75.75l.02.02h11c.41,0,.75-.34.75-.75v-1c0-.12-.03-.24-.08-.34l-1-2c-.13-.26-.39-.42-.68-.42h-.24v-6.56h1.25ZM20.24,7.39v1.76H3.75v-1.75l8.25-3.6,8.24,3.59ZM18.25,17.24h-2.86v-6.56h2.86v6.56Z'/%3E%3Cpath d='M10.58,16.46c.04-.06.09-.11.12-.18,0,0,0-.01,0-.02.03-.08.05-.17.05-.26,0-.05-.02-.1-.03-.15,0-.05-.01-.1-.03-.14,0-.02-.02-.03-.03-.04-.04-.07-.07-.14-.13-.21,0,0-.02-.01-.03-.02l-2.98-2.98c-.3-.3-.77-.3-1.07,0-.3.29-.3.76,0,1.06h.01s1.72,1.73,1.72,1.73H3c-.42,0-.75.33-.75.75s.33.75.75.75h5.17l-1.71,1.71c-.3.29-.3.76,0,1.06.29.29.76.29,1.06,0h.01s3-2.99,3-2.99c.02-.02.03-.05.05-.07Z'/%3E%3C/svg%3E");
  --ni-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.2,12.09l-1.17-.8c-.53-.37-.7-1.09-.38-1.65l.71-1.23c.36-.63.3-1.4-.15-1.97l-.71-.9c-.45-.57-1.2-.8-1.89-.58l-1.35.41c-.62.19-1.29-.13-1.53-.74l-.52-1.31c-.27-.67-.91-1.11-1.63-1.11h-1.15c-.73,0-1.36.44-1.63,1.12l-.5,1.3c-.24.61-.91.93-1.53.74l-1.41-.43c-.68-.21-1.44.02-1.89.59l-.71.9c-.45.57-.5,1.35-.14,1.97l.72,1.23c.33.56.17,1.29-.37,1.66l-1.15.79c-.6.41-.88,1.13-.72,1.84l.25,1.12c.16.71.73,1.24,1.44,1.35h0l1.4.21c.64.1,1.11.68,1.06,1.33l-.1,1.41c-.05.72.33,1.39.99,1.71l1.03.5c.65.32,1.42.2,1.95-.29l1.04-.96c.48-.44,1.22-.44,1.7,0l1.04.96c.54.49,1.3.61,1.95.29l1.03-.5c.65-.31,1.04-.98.99-1.7l-.1-1.41c-.05-.65.42-1.23,1.06-1.33l1.4-.21c.71-.11,1.28-.64,1.44-1.34l.25-1.12c.16-.71-.12-1.43-.72-1.84ZM20.2,14.71c-.02.1-.11.18-.21.2l-1.4.21c-1.41.22-2.43,1.5-2.33,2.92l.1,1.41c0,.1-.05.2-.14.24l-1.04.5c-.09.05-.21.03-.28-.04l-1.04-.96c-1.05-.97-2.69-.97-3.73,0l-1.04.96c-.08.07-.19.09-.28.04l-1.03-.5c-.09-.04-.15-.14-.14-.25l.1-1.41c.1-1.42-.92-2.7-2.33-2.92l-1.4-.21c-.1-.02-.18-.09-.21-.2l-.25-1.12c-.02-.1.02-.21.1-.27l1.15-.79c1.19-.81,1.55-2.42.82-3.66l-.72-1.23c-.05-.09-.04-.2.02-.29l.71-.9c.07-.08.18-.11.28-.09l1.41.43c1.37.42,2.85-.29,3.37-1.63l.5-1.3c.04-.1.13-.16.24-.16h1.15c.11,0,.2.06.24.16l.52,1.31c.52,1.33,2,2.04,3.37,1.62l1.35-.41c.11-.03.21,0,.27.08l.71.9c.07.08.07.2.02.28l-.71,1.23c-.71,1.24-.34,2.83.83,3.64l1.17.8c.09.06.13.16.1.27l-.25,1.12Z'/%3E%3Cpath d='M9.55,9.55c-1.35,1.35-1.35,3.54,0,4.89s3.54,1.35,4.89,0,1.35-3.54,0-4.89c-1.35-1.35-3.54-1.35-4.89,0ZM13.39,13.39c-.74.74-2.03.74-2.77,0s-.76-2.01,0-2.77c.76-.76,2.01-.76,2.77,0s.76,2.01,0,2.77Z'/%3E%3C/svg%3E");
}

/* header: dark bar — unread count · title · Settings (gear) */
.notif-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--navy);
  color: var(--on-dark);
}

.notif-head__count {
  flex: none;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-main);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-ui);
  line-height: 1;
}

.notif-head__count[hidden] {
  display: none;
}

.notif-head__title {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--on-dark);
}

.notif-head__settings {
  /* Click area fills the header height and stretches to the panel's right
     edge; negative margins absorb the header's own 12px 16px padding so the
     label/icon stay put while the hit target grows to match the design. */
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 12px 12px 16px;
  margin: -12px -16px -12px 0;
  border-left: 1px solid var(--dark-line);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary-main);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.notif-head__settings::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--ni-gear) center/contain no-repeat;
  mask: var(--ni-gear) center/contain no-repeat;
}

.notif-head__settings:hover {
  text-decoration: none;
  background: var(--tone-900);
}

/* scrolling list — scrollbar shows when items overflow the panel height */
.notif-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  border-bottom: 1px solid var(--tone-1000);
}

.notif {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  border-left: 3px solid transparent;
  font-size: var(--text-ui);
  line-height: 1.4;
  color: inherit;
  text-decoration: none;
}

a.notif:hover {
  background: var(--primary-light-50);
}

.notif:last-of-type {
  border-bottom: 0;
}

/* new / unread: orange rule down the left edge */
.notif.unread {
  border-left-color: var(--primary-main);
}

.notif__icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-soft);
  color: var(--ink);
}

.notif__icon::before {
  content: "";
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: center/contain no-repeat;
  mask: center/contain no-repeat;
}

.notif__icon--pipeline::before {
  -webkit-mask-image: var(--ni-pipeline);
  mask-image: var(--ni-pipeline);
}

.notif__icon--trade::before {
  -webkit-mask-image: var(--ni-trade);
  mask-image: var(--ni-trade);
}

.notif__icon--payout::before {
  -webkit-mask-image: var(--ni-payout);
  mask-image: var(--ni-payout);
}

.notif__icon--pipeline {
  border-color: var(--tone-1000);
}

.notif__icon--trade,
.notif__icon--payout {
  color: var(--primary-main);
  border-color: var(--primary-main);
}

/* empty state (welcome page) */
.notif-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--text-ui);
  line-height: 1.5;
}

.notif__body {
  flex: 1 1 auto;
  min-width: 0;
}

.notif__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.notif__date {
  flex: none;
  color: var(--tone-500);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.notif__sub {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

/* client names sit at normal weight (per annotation — not bold) */
.notif__sub strong {
  font-weight: 400;
}

.notif__amt {
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.notif__detail {
  margin-top: 2px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.notif-foot {
  flex: none;
  padding: 12px 16px;
  background: var(--tone-100);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ---------- resources ---------- */
.res-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.res-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.res-card .thumb {
  height: 110px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: radial-gradient(100% 140% at 80% -10%, var(--primary-light-100), transparent 60%), linear-gradient(150deg, var(--navy-2), var(--navy));
  display: flex;
  align-items: flex-end;
  padding: 12px;
}

.res-card .thumb .tag {
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
}

.res-card h3 {
  font-size: var(--text-base);
}

.res-card p {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.35;
  color: var(--ink-soft);
  flex: 1;
}

/* ---------- filters row ---------- */
.filters {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 16px;
  align-items: end;
}

/* ---------- forms ---------- */
.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: var(--text-md);
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--ink-soft);
}

.field input[type=text], .field input[type=email], .field input[type=password],
.field select, .field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}

/* form-field placeholder text — tone-400 */
.field input::placeholder, .field textarea::placeholder {
  color: var(--tone-300);
  opacity: 1;
}

/* custom dropdown chevron (chevron_down_sm, tone1000) — replaces native select arrow */
.field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 38px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23323333' d='M12,15.75c-.19,0-.38-.07-.53-.22l-4-4c-.29-.29-.29-.77,0-1.06s.77-.29,1.06,0l3.47,3.47,3.47-3.47c.29-.29.77-.29,1.06,0s.29.77,0,1.06l-4,4c-.15.15-.34.22-.53.22Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 28px 28px;
}

.field select::-ms-expand {
  display: none;
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.field--invalid input,
.field--invalid select,
.field--invalid textarea {
  border-color: var(--danger, #c0392b);
}

.field .error {
  display: block;
  margin-top: 6px;
  font-size: var(--text-sm, 13px);
  color: var(--danger, #c0392b);
}

.simple_form .alert-error {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--danger, #c0392b);
  color: var(--danger, #c0392b);
  font-size: var(--text-md);
}

/* validation errors: red border on the control + message below it. The `.field`
   wrapper gets `.field--invalid` from SimpleForm; the message is a `.field__error`. */
.field--invalid input[type=text],
.field--invalid input[type=email],
.field--invalid input[type=password],
.field--invalid select,
.field--invalid textarea {
  border-color: var(--warn);
}

.field__error {
  display: block;
  margin-top: 6px;
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--warn);
}

/* keep the message off the next row when it sits inside a tight two-col grid */
.settings-two-col-fields .field__error {
  margin-bottom: 4px;
}

.field__hint {
  display: block;
  margin-top: 6px;
  font-size: var(--text-md);
  color: var(--ink-soft);
}

.switchrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}

.switchrow:last-child {
  border-bottom: 0;
}

.switchrow .t {
  font-size: var(--text-ui);
  font-weight: 700;
}

.switchrow .d {
  font-size: var(--text-md);
  color: var(--ink-soft);
}

.switch {
  position: relative;
  width: 40px;
  height: 22px;
  flex: none;
}

/* hit area extends 11px beyond the visual switch — 44px effective target */
.switch input {
  position: absolute;
  opacity: 0;
  inset: -11px;
  margin: 0;
  cursor: pointer;
}

.switch span {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: var(--line);
  transition: background 0.15s;
}

.switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s;
}

.switch input:checked + span {
  background: var(--primary-main);
}

.switch input:checked + span::after {
  left: 21px;
}

/* ---------- read-view definition list ---------- */
.dl {
  margin: 0 0 16px;
}

.dl > div {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}

.dl > div:last-child {
  border-bottom: 0;
}

.dl dt {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  align-self: center;
}

.dl dd {
  margin: 0;
  font-size: var(--text-ui);
  font-variant-numeric: tabular-nums;
}

.editable__form[hidden] {
  display: none;
}

.editable__actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

/* segmented single-select (e.g. account owner: Company / Individual) */
.segmented {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--tone-1000);
  border-radius: 0;
  background: var(--tone-100);
}

.segmented__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 0;
  font: inherit;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--tone-0);
  cursor: pointer;
}

.segmented__btn:hover {
  color: var(--ink);
}

/* unselected option gets a visible tone-1000 outline */
.segmented__btn[aria-pressed=false] {
  border-color: var(--tone-1000);
}

.segmented__btn[aria-pressed=true] {
  background: var(--ink);
  color: var(--on-dark);
  padding-left: 14px;
}

/* tick badge — same checkmark icon/treatment as the notifications channel toggle */
.segmented__check {
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 6px;
  background: var(--on-dark);
  color: var(--ink);
}

.segmented__btn[aria-pressed=true] .segmented__check {
  display: inline-flex;
}

.segmented__check svg {
  width: 13px;
  height: 13px;
  display: block;
}

/* in-form sub-heading (e.g. Bank holder's address) —
   matches the .factlist .k key styling (e.g. "Paid around the 28th, monthly") */
.form-subhead {
  margin: 22px 0 14px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9aa1a8;
}

/* bank-account detail fields, bracketed by a divider on either side */
.bank-detail-group {
  margin-top: 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 32px 0;
}

.bank-detail-group > .field:last-child {
  margin-bottom: 0;
}

/* ---------- settings definition rows ---------- */
.setrow {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 44px;
  padding: 28px 0 32px;
  border-top: 1px solid var(--ink);
}

.setrow__head h2 {
  margin-bottom: 6px;
}

.setrow__head p {
  margin: 0;
  font-size: var(--text-md);
  color: var(--ink-soft);
  max-width: 36ch;
}

.setrow__body {
  max-width: 640px;
  position: relative;
}

@media (max-width: 920px) {
  .setrow {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
/* ---------- callouts ---------- */
.callout {
  border-left: 3px solid var(--primary-main);
  background: var(--primary-light-100);
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
  font-size: var(--text-ui);
}

.callout--green {
  border-color: var(--money);
  background: var(--money-tint);
}

/* ---------- inverted (dark) card — theme-safe accent moment ---------- */
.card--invert {
  background: var(--navy);
  color: var(--on-dark);
  border: 0;
  border-top: 0;
  padding: 24px 28px;
}

.card--invert h2 {
  color: var(--on-dark);
}

.empty-mark {
  font: 600 64px/0.8 var(--font-display);
  color: var(--primary-main);
  margin-bottom: 12px;
}

/* ---------- swiss structural refinements (default theme only) ---------- */
/* figure row: one shared ink rule over the group, hairlines between cells */
html:not([data-theme]) .stats {
  border-top: 1px solid var(--ink);
  padding-top: 0px;
  gap: 0;
}

html:not([data-theme]) .stats .card {
  border: 0;
  padding-top: 32px;
  padding-bottom: 32px;
}

html:not([data-theme]) .stats > *:not(:first-child) {
  border-left: 1px solid var(--line);
  padding-left: 22px;
}

html:not([data-theme]) .stats > * {
  padding-right: 22px;
}

/* section headings: smallcaps rigor; page titles: expanded display scale */
html:not([data-theme]) .card h2 {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

html:not([data-theme]) .card h2 .count {
  text-transform: none;
  letter-spacing: 0;
}

html:not([data-theme]) .page-head h1 {
  font-size: 38px;
  letter-spacing: -0.03em;
}

html:not([data-theme]) .btn--primary:hover {
  background: var(--primary-main);
  box-shadow: none;
}

html:not([data-theme]) .foot {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html:not([data-theme]) .hero-cell {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  padding: 4px 0 4px 16px;
}

html:not([data-theme]) .card-row--main,
html:not([data-theme]) .card-row--half {
  column-gap: 44px;
}

html:not([data-theme]) .card-row--main > :first-child,
html:not([data-theme]) .card-row--half > :first-child {
  border-right: 1px solid var(--line-soft);
  padding-right: 44px;
}

/* ---------- footer ---------- */
.foot {
  border-top: 1px solid var(--line-soft);
  margin-top: 48px;
  padding: 16px 24px;
  font-size: var(--text-md);
  color: var(--tone-400);
  text-align: center;
  line-height: 1em;
}

.foot__contact {
  margin-top: 6px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 18px;
  row-gap: 6px;
}

.foot__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.foot__tel {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.foot__tel:hover {
  color: var(--gild);
}

.foot__tel .foot__icon--hover {
  display: none;
}

.foot__tel:hover .foot__icon--rest {
  display: none;
}

.foot__tel:hover .foot__icon--hover {
  display: inline-block;
}

.foot__mail {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.foot__mail:hover {
  color: var(--primary-main);
}

.foot__mail .foot__icon--hover {
  display: none;
}

.foot__mail:hover .foot__icon--rest {
  display: none;
}

.foot__mail:hover .foot__icon--hover {
  display: inline-block;
}

.foot__icon {
  width: 18px;
  height: 18px;
  flex: none;
}

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  background: var(--navy);
  color: var(--on-dark);
  font: 700 var(--text-md) var(--font-body);
  letter-spacing: 0.02em;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  z-index: 120;
  max-width: clamp(0px, 90vw, 480px);
}

.toast--leaving {
  opacity: 0;
  transition: opacity 0.25s;
}

@media (prefers-reduced-motion: no-preference) {
  .toast {
    animation: toast-in 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
  }

  @keyframes toast-in {
    from {
      opacity: 0;
      transform: translate(-50%, 8px);
    }
  }
}
/* ---------- empty / welcome states ---------- */
.empty {
  text-align: center;
  padding: 48px 32px;
  color: var(--ink-soft);
}

.empty .big {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--ink);
  margin-bottom: 6px;
}

/* ---------- load-in motion (restrained, honors reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rise {
    animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }

  .rise:nth-child(2) {
    animation-delay: 0.06s;
  }

  .rise:nth-child(3) {
    animation-delay: 0.12s;
  }

  .rise:nth-child(4) {
    animation-delay: 0.18s;
  }

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }
}
/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .card-row {
    grid-template-columns: 1fr;
  }

  html:not([data-theme]) .card-row--main > :first-child,
html:not([data-theme]) .card-row--half > :first-child {
    border-right: 0;
    padding-right: 0;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  /* once stats wrap to 2 columns, the left column starts each visual row —
     drop its left divider + inset so wrapped cells sit flush like the first
     cell (no dangling border on the row's leading edge). .stats--6 keeps its
     own bespoke divider matrix. */
  html:not([data-theme]) .stats:not(.stats--6) > *:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }

  .res-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .shell {
    padding: 20px 16px 60px;
  }

  /* top-right date/currency meta hides on mobile (matches Insights) */
  .page-meta {
    display: none;
  }

  /* tables become horizontally scrollable instead of crushing columns */
  .tbl {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tbl th, .tbl td {
    white-space: nowrap;
  }

  /* filter rows stack */
  .filters {
    grid-template-columns: 1fr 1fr !important;
  }

  /* touch targets: 44px minimum where fingers go */
  .avatar {
    width: 40px;
    height: 40px;
  }

  .btn {
    padding: 11px 16px;
  }

  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .res-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 24px 16px;
  }

  .hero__cells {
    grid-template-columns: 1fr;
  }

  .tbl {
    font-size: var(--text-md);
  }

  .tbl th, .tbl td {
    padding: 8px;
  }

  .hide-sm {
    display: none;
  }

  .notif-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 64px;
    width: auto;
  }
}
/* ============================================================
   v2 — dark left sidebar nav (Figma redesign, "get styles" page)
   Always dark per design (#111418 ink / #fafaf7 on-dark).
   Layout: fixed rail (--rail-w) + content offset.
   ============================================================ */
:root {
  --rail-w: 212px;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail-w);
  background: var(--navy);
  color: var(--on-dark);
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px 8px 14px;
  z-index: 50;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sidebar__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 0;
  color: var(--on-dark);
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 0.2px;
}

.sidebar__logo svg {
  display: block;
  flex: 0 0 auto;
}

/* v2: brand wordmark asset (diamond mark + "currencytransfer"), fixed 170×28 */
.sidebar__logo img {
  display: block;
  flex: 0 0 auto;
  width: 170px;
  height: 28px;
}

.sidebar__burger {
  display: none;
}

/* desktop: no burger; shown ≤992px */
.sidebar__burger .sidebar__burger-ico--close {
  display: none;
}

.sidebar.is-open .sidebar__burger .sidebar__burger-ico--bars {
  display: none;
}

.sidebar.is-open .sidebar__burger .sidebar__burger-ico--close {
  display: block;
}

/* nav + footer are wrapped in this drawer (by app.js) so the open mobile menu
   can be a single positioned overlay. display:contents makes the wrapper
   layout-transparent, so desktop & closed states behave exactly as before. */
.sidebar__drawer {
  display: contents;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar__nav a,
.sidebar__item,
.sidebar__user {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 4px 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--on-dark-soft);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--text-base);
  text-align: left;
  transition: color 0.15s;
}

.sidebar__nav a:hover,
.sidebar__item:hover,
.sidebar__user:hover {
  color: var(--on-dark);
}

.sidebar__nav a[aria-current=page] {
  color: var(--primary-main);
  font-weight: 600;
}

.sidebar__nav a[aria-current=page] .sidebar__ico {
  color: var(--primary-main);
}

.sidebar__ico {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.sidebar__ico svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* Branded nav icons (provided SVG set): 28px, tone0 by default, primary when active.
   Path data is shared between the primary/tone0 variants — only the fill differs — so
   one currentColor SVG reproduces both states via the tokens below. */
.sidebar__ico svg.ico-brand {
  width: 28px;
  height: 28px;
}

.sidebar__nav a .ico-brand,
.sidebar__item .ico-brand {
  color: var(--on-dark);
}

.sidebar__nav a[aria-current=page] .ico-brand,
.sidebar__item[aria-current=page] .ico-brand {
  color: var(--primary-main);
}

/* Notifications bell (provided SVG set): two states share the bell body
   (currentColor → tone0); the "new" variant adds a primary dot. JS sets
   .has-unread on the toggle from the panel's .notif.unread items, so the dotted
   bell shows while unread remain and the plain bell shows once they're read. */
.sidebar__ico .notif-ico {
  display: none;
}

.sidebar__ico .notif-ico--read {
  display: block;
}

[data-notif-toggle].has-unread .sidebar__ico .notif-ico--read {
  display: none;
}

[data-notif-toggle].has-unread .sidebar__ico .notif-ico--new {
  display: block;
}

.notif-ico__dot {
  fill: var(--primary-main);
}

.sidebar__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar__user {
  gap: 10px;
  color: var(--on-dark);
}

.sidebar__user .avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 999px;
  background: var(--primary-main);
  background-image: none;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-ui);
  letter-spacing: 0.3px;
}

.sidebar .notif-wrap {
  position: relative;
  width: 100%;
}

/* The tray is lifted to <body> by app.js. Because .sidebar is position:fixed it
   forms its own stacking context, so a panel nested inside it can never paint
   below the rail (its z-index is scoped INSIDE the sidebar). At body level the
   tray lives in the root stacking context, where z-index:40 sits BELOW the z-50
   sidebar — so the dark nav rail fully occludes the tray and it slides out from
   BEHIND the main navigation. Docked full-height to the right of the rail, 479px. */
body > .notif-panel {
  position: fixed;
  left: var(--rail-w);
  top: 0;
  bottom: 0;
  right: auto;
  width: 479px;
  max-width: calc(100vw - var(--rail-w));
  max-height: none;
  border-radius: 0;
  /* Slide-open: keep the tray rendered (not display:none) so transform can animate.
     Closed = tucked LEFT off-axis (translateX(-100%)) + inert; open = slid into the
     docked spot. Sitting below the rail, the left→right slide emerges from behind
     the main nav instead of obscuring it. */
  display: flex;
  transform: translateX(-100%);
  visibility: hidden;
  pointer-events: none;
  z-index: 40;
  /* docked-mode (≥992px) edge borders per annotation */
  border-left: 1px solid var(--tone-800);
  border-right: 1px solid var(--tone-1000);
}

body > .notif-panel.open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  animation: none;
  /* override the base "pop" fade — the slide replaces it */
}

@media (prefers-reduced-motion: no-preference) {
  /* transition transform for the slide; delay visibility so the tray stays
     painted while it slides back out on close. */
  body > .notif-panel {
    transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.3, 1), visibility 0s linear 0.26s;
  }

  body > .notif-panel.open {
    transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.3, 1), visibility 0s;
  }
}
/* content offset by the rail */
.shell {
  margin-left: var(--rail-w);
  max-width: 1280px;
}

.foot {
  margin-left: var(--rail-w);
}

/* Collapse the rail to a top app-bar + hamburger below 992px. The fixed
   212px rail would otherwise squeeze content and clip it on narrower laptops;
   below this width the rail gets out of the way and content uses full width. */
@media (max-width: 992px) {
  .sidebar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    z-index: 50;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 8px 14px;
    max-height: none;
    overflow: visible;
  }

  .sidebar__logo {
    padding: 0;
    margin-right: auto;
    font-size: var(--text-base);
  }

  .sidebar__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    padding: 0;
    background: none;
    border: 0;
    color: var(--on-dark);
    cursor: pointer;
  }

  .sidebar__burger svg {
    width: 32px;
    height: 32px;
    display: block;
  }

  /* nav + footer collapsed by default, revealed under .is-open */
  .sidebar__nav, .sidebar__foot {
    display: none;
    flex-basis: 100%;
    width: 100%;
  }

  /* open menu OVERLAYS the page content instead of expanding the sticky bar and
     pushing content down: drop the drawer below the bar as an absolute panel at
     a higher z-index than the content. The bar keeps z-index:50 / overflow:visible
     so this isn't clipped. */
  .sidebar.is-open .sidebar__drawer {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--navy);
    padding: 0 14px 12px;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.32);
  }

  .sidebar.is-open .sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--dark-line);
  }

  .sidebar.is-open .sidebar__nav a {
    padding: 4px 4px;
  }

  .sidebar.is-open .sidebar__foot {
    display: flex;
    flex-direction: column;
    align-items: start;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--dark-line);
  }

  .sidebar.is-open .sidebar__group {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .sidebar__item {
    width: auto;
  }

  .sidebar__user {
    width: auto;
  }

  .shell, .foot {
    margin-left: 0;
  }

  /* Banner mode: tray drops out from directly under the sticky top bar (~58px)
     and fills the screen height down to the bottom, right-aligned, 479px wide
     (capped to viewport on narrow phones). The banner sits on top. */
  /* Banner mode closed-state tucks OFF the right edge (translateX(100%)) so the tray
     slides in right-to-left from the screen edge; .open (higher specificity) snaps it
     back to translateX(0). */
  body > .notif-panel {
    position: fixed;
    top: 58px;
    bottom: 0;
    right: 0;
    left: auto;
    width: clamp(0px, 479px, 100vw);
    max-width: 100vw;
    max-height: none;
    border-radius: 0;
    transform: translateX(100%);
    border-top: 1px solid var(--tone-800);
    border-left: 1px solid var(--tone-1000);
  }

  /* Notifications relocated into the top bar (by sidebar Stimulus controller) as a
     bell-only icon, sitting left of the burger. Drop the "Notifications" label and
     square it off to match the burger; the unread dot / white bell come from .ico-brand. */
  .sidebar .notif-wrap--bar {
    width: auto;
    flex: 0 0 auto;
  }

  .sidebar .notif-wrap--bar > [data-notif-toggle] {
    width: 42px;
    height: 42px;
    padding: 0;
    gap: 0;
    justify-content: center;
    font-size: 0;
    /* hide the trailing "Notifications" text */
  }

  .sidebar .notif-wrap--bar > [data-notif-toggle] .sidebar__ico {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
  }

  /* match the burger: bell glyph at 32×32 in the mobile top bar */
  .sidebar .notif-wrap--bar > [data-notif-toggle] .sidebar__ico svg.ico-brand {
    width: 32px;
    height: 32px;
  }
}
/* v2: filled status pills (Swiss default) — colours mapped to the named
   Figma palette variables above (per design spec). Scoped to the default
   theme so the concierge/ct-blue themes keep their own chip treatment.
   Trading→Primary, Signed up→Blue, In review→Gold, Activated→Teal,
   Closed/Referred→Tone (Tone/Light/100 read as Tone/100, the lightest tone). */
html:not([data-theme]) .chip {
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* pills carrying an inset date sit tight on the right where the date box is */
html:not([data-theme]) .chip:has(.chip__date) {
  padding: 2px 2px 2px 8px;
}

html:not([data-theme]) .chip::before {
  display: none;
}

html:not([data-theme]) .chip--referred,
html:not([data-theme]) .chip--rolled,
html:not([data-theme]) .chip--closed {
  background: var(--tone-100);
  color: var(--tone-500);
}

html:not([data-theme]) .chip--signed,
html:not([data-theme]) .chip--accruing {
  background: var(--blue-light-100);
  color: var(--blue-main);
}

html:not([data-theme]) .chip--docs,
html:not([data-theme]) .chip--scheduled {
  background: var(--gold-light-100);
  color: var(--gold-main);
}

html:not([data-theme]) .chip--activated {
  background: var(--teal-light-100);
  color: var(--teal-main);
}

html:not([data-theme]) .chip--trading,
html:not([data-theme]) .chip--paid {
  background: var(--primary-light-100);
  color: var(--primary-main);
}

/* white inset date box to match the Figma pill redesign */
html:not([data-theme]) .chip__date {
  background: #fff;
  color: inherit;
  border-radius: 3px;
  padding: 2px 5px 0px 5px;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.07em;
}

.affiliates-payouts .kicker__link {
  color: inherit;
  text-decoration: none;
}
.affiliates-payouts .kicker__link:hover {
  text-decoration: underline;
}
.affiliates-payouts .statement-head__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.affiliates-payouts .stat .val--sm {
  font-size: var(--text-lg);
}
.affiliates-payouts .setrow--tight {
  margin-top: 8px;
}
.affiliates-payouts .payhead {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.affiliates-payouts .payhead__meta {
  text-align: right;
}
.affiliates-payouts .payhead__meta .lbl {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.affiliates-payouts .payhead__meta p {
  margin: 0;
  font-size: var(--text-ui);
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 300px;
}
.affiliates-payouts .payout-note {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--tone-100);
  color: var(--ink);
  padding: 16px 18px;
  font-size: var(--text-ui);
  line-height: 1.5;
  margin-bottom: 24px;
}
.affiliates-payouts .payout-note__ico {
  flex: none;
  width: 32px;
  height: 32px;
  color: var(--ink-soft);
  margin-top: 1px;
}
.affiliates-payouts .payout-note__ico svg {
  width: 32px;
  height: 32px;
  display: block;
}
.affiliates-payouts .payout-note p {
  margin: 0;
}
.affiliates-payouts .statements-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}
.affiliates-payouts .tbl .cell-month--live {
  font-weight: 600;
}
.affiliates-payouts .tbl .cell-month {
  font-size: var(--text-ui);
}
.affiliates-payouts .tbl .cell-action {
  text-align: right;
}
@media (min-width: 768px) {
  .affiliates-payouts .payhead {
    align-items: flex-end;
  }
  .affiliates-payouts .stats.stats--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  html:not([data-theme]) .affiliates-payouts .stats.stats--3 > *:nth-child(odd):not(:first-child) {
    border-left: 1px solid var(--line);
    padding-left: 22px;
  }
}
@media (max-width: 767px) {
  .affiliates-payouts .page-head {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .affiliates-payouts .payhead {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  .affiliates-payouts .payhead__meta {
    text-align: left;
  }
  .affiliates-payouts .payhead__meta p {
    max-width: none;
  }
  .affiliates-payouts .payhead .btn {
    align-self: flex-start;
  }
  .affiliates-payouts .payout-note {
    padding: 14px 16px;
  }
  .affiliates-payouts .stats--3 {
    grid-template-columns: 1fr;
  }
  html:not([data-theme]) .affiliates-payouts .stats.stats--3 > *:not(:first-child) {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
  }

  .affiliates-payouts .tbl {
    display: block;
    overflow-x: visible;
  }
  .affiliates-payouts .tbl thead, .affiliates-payouts .tbl tbody, .affiliates-payouts .tbl tr, .affiliates-payouts .tbl th, .affiliates-payouts .tbl td {
    display: block;
  }
  .affiliates-payouts .tbl th, .affiliates-payouts .tbl td {
    white-space: normal;
    border: 0;
    padding: 0;
  }
  .affiliates-payouts .tbl td .chip {
    white-space: nowrap;
  }
  .affiliates-payouts .tbl tr {
    display: grid;
    grid-template-columns: 1fr 75px 88px 92px;
    align-items: center;
    column-gap: 12px;
  }
  .affiliates-payouts .tbl thead tr {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
  }
  .affiliates-payouts .tbl tbody tr {
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .affiliates-payouts .tbl tbody tr:last-child {
    border-bottom: 0;
  }
  .affiliates-payouts .tbl tbody tr:hover {
    background: transparent;
  }
  .affiliates-payouts .tbl thead .col-status, .affiliates-payouts .tbl thead .col-action {
    display: none;
  }
  .affiliates-payouts .tbl .cell-month {
    grid-column: 1;
    grid-row: 1;
  }
  .affiliates-payouts .tbl .cell-status {
    grid-column: 1;
    grid-row: 2;
    padding-top: 4px;
  }
  .affiliates-payouts .tbl .cell-trades, .affiliates-payouts .tbl thead .col-trades {
    padding-right: 20px;
  }
  .affiliates-payouts .tbl .cell-trades {
    grid-column: 2;
    grid-row: 1/span 2;
    text-align: right;
  }
  .affiliates-payouts .tbl .cell-commission {
    grid-column: 3;
    grid-row: 1/span 2;
    text-align: left;
  }
  .affiliates-payouts .tbl .cell-action {
    grid-column: 4;
    grid-row: 1/span 2;
    justify-self: end;
  }
  .affiliates-payouts .tbl .cell-action .btn {
    white-space: nowrap;
  }
}
@media (max-width: 479px) {
  .affiliates-payouts .tbl tr {
    grid-template-columns: 1fr auto auto;
    column-gap: 6px;
  }
  .affiliates-payouts .tbl thead .col-trades {
    display: none;
  }
  .affiliates-payouts .tbl thead .col-commission {
    grid-column: 3;
    text-align: right;
  }
  .affiliates-payouts .tbl .cell-month {
    grid-column: 1;
    grid-row: 1;
  }
  .affiliates-payouts .tbl .cell-status {
    grid-column: 1;
    grid-row: 2;
    padding-top: 4px;
  }
  .affiliates-payouts .tbl .cell-trades {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    text-align: right;
    color: var(--ink-soft);
    padding-right: 0;
  }
  .affiliates-payouts .tbl .cell-trades::after {
    content: " Trades  ·";
    color: var(--ink-faint);
  }
  .affiliates-payouts .tbl .cell-commission {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    text-align: right;
  }
  .affiliates-payouts .tbl .cell-action {
    grid-column: 1/-1;
    grid-row: 3;
    justify-self: stretch;
    padding-top: 12px;
  }
  .affiliates-payouts .tbl .cell-action .btn {
    display: block;
    width: 100%;
    text-align: center;
  }
  .affiliates-payouts .tbl .cell-action:empty {
    display: none;
  }
}

.affiliates-dashboard .stat .val.val--money {
  color: var(--money-deep);
}
.affiliates-dashboard .hero__title {
  color: var(--hero-fg);
  font-size: var(--text-3xl);
  line-height: 1.2;
  margin: 0;
}
.affiliates-dashboard .hero__meta {
  max-width: 420px;
}
.affiliates-dashboard .hero__copyfield {
  margin-top: 18px;
  max-width: 480px;
}
.affiliates-dashboard .hero__copyfield input {
  background: transparent;
  border-color: var(--hero-cell-line);
  color: var(--hero-fg);
}
.affiliates-dashboard .empty__lead {
  margin: 0 0 16px;
}
.affiliates-dashboard .sub-partners-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.affiliates-dashboard .manager-bottom-row {
  margin-top: 18px;
}
.affiliates-dashboard .dash-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 16px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line-soft);
}
.affiliates-dashboard .dash-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-main);
  margin-bottom: 6px;
}
.affiliates-dashboard .dash-eyebrow .slash {
  color: var(--primary-main);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.affiliates-dashboard .dash-head h1 {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.6px;
  line-height: 1;
  color: var(--ink);
  margin: 0;
}
.affiliates-dashboard .stat-row {
  display: grid;
  grid-template-columns: 1.48fr 1fr 1fr 1fr;
  border-bottom: 1px solid var(--line-soft);
}
.affiliates-dashboard .stat-col {
  padding: 34px 30px 30px;
  min-width: 0;
}
.affiliates-dashboard .stat-col + .stat-col {
  border-left: 1px solid var(--line-soft);
}
.affiliates-dashboard .stat-col__lbl {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9aa1a8;
  margin-bottom: 0;
}
.affiliates-dashboard .stat-mega {
  display: flex;
  align-items: flex-start;
  margin-top: 22px;
}
.affiliates-dashboard .stat-mega__cur {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -0.6px;
  color: var(--ink);
  line-height: 1;
}
.affiliates-dashboard .stat-mega__num {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 92px;
  letter-spacing: -4.6px;
  line-height: 0.84;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow-wrap: break-word;
}
.affiliates-dashboard .stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 6px 8px;
  border-radius: 4px;
  background: rgba(232, 84, 12, 0.1);
  font-size: var(--text-ui);
  font-weight: 600;
  letter-spacing: 0.105em;
  text-transform: uppercase;
  color: var(--primary-main);
  white-space: nowrap;
}
.affiliates-dashboard .stat-foot {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 22px;
  line-height: 1.55;
}
.affiliates-dashboard .stat-foot strong {
  color: var(--ink);
  font-weight: 700;
}
.affiliates-dashboard .stat-fig {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -0.6px;
  color: var(--ink);
  margin-top: 22px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.affiliates-dashboard .stat-fig .of {
  color: #9aa1a8;
  font-size: 18px;
  letter-spacing: 0;
}
.affiliates-dashboard .stat-note {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 8px;
}
.affiliates-dashboard .dash-grid {
  display: grid;
  grid-template-columns: 1.43fr 1fr;
  border-bottom: 1px solid var(--line-soft);
}
.affiliates-dashboard .dash-chart {
  padding: 40px 32px 0 0;
}
.affiliates-dashboard .dash-aside {
  padding: 40px 0 0 32px;
  border-left: 1px solid var(--line-soft);
}
.affiliates-dashboard .dash-chart h2,
.affiliates-dashboard .dash-aside h2 {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 8px;
}
.affiliates-dashboard .dash-sub {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.affiliates-dashboard .dash-link {
  color: var(--primary-main);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.affiliates-dashboard .dash-aside .dash-sub {
  justify-content: flex-end;
}
.affiliates-dashboard .dash-aside__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
}
.affiliates-dashboard .dash-aside__head h2 {
  margin: 0;
}
.affiliates-dashboard .chart-stats--flat {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 4px;
  border-top: 1px solid var(--line-soft);
}
.affiliates-dashboard .chart-stats--flat > div {
  padding: 16px 30px;
  border: 0;
}
.affiliates-dashboard .chart-stats--flat > div + div {
  border-left: 1px solid var(--line-soft);
}
.affiliates-dashboard .chart-stats--flat .lbl {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9aa1a8;
  margin-bottom: 6px;
}
.affiliates-dashboard .chart-stats--flat .val {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.4px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.affiliates-dashboard .chart-stats--flat .val small {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: 0;
  margin-left: 4px;
}
.affiliates-dashboard .pipe {
  list-style: none;
  margin: 0;
  padding: 0;
}
.affiliates-dashboard .pipe li {
  display: grid;
  grid-template-columns: 28px 1fr 104px 92px;
  align-items: center;
  gap: 0 8px;
  height: 50.7px;
  border-top: 1px solid var(--line-soft);
}
.affiliates-dashboard .pipe li .chip {
  justify-self: end;
}
.affiliates-dashboard .pipe .ctype-ico {
  color: var(--ink);
  margin-right: 0;
}
.affiliates-dashboard .pipe__name {
  font-size: var(--text-ui);
  color: var(--ink);
  white-space: nowrap;
}
.affiliates-dashboard .pipe__name .id {
  color: #9aa1a8;
  margin-left: 8px;
}
.affiliates-dashboard .pipe__when {
  font-size: var(--text-ui);
  color: var(--ink-soft);
  white-space: nowrap;
  justify-self: end;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.affiliates-dashboard .pipe__money {
  font-size: var(--text-ui);
  font-weight: 700;
  color: var(--tone-1000);
  white-space: nowrap;
  justify-self: end;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.affiliates-dashboard .refer {
  padding: 40px 0 0;
}
.affiliates-dashboard .refer__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 30px;
}
.affiliates-dashboard .refer__grid {
  display: grid;
  grid-template-columns: 156px 1fr 346px;
  align-items: stretch;
}
.affiliates-dashboard .refer__qr {
  display: flex;
  align-items: flex-start;
}
.affiliates-dashboard .refer__qr .qbox {
  padding: 16px;
  border: 1px solid var(--line-soft);
  background: #fff;
}
.affiliates-dashboard .refer__qr svg {
  display: block;
}
.affiliates-dashboard .refer__copy {
  padding: 12px 32px;
}
.affiliates-dashboard .refer__copy p {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.affiliates-dashboard .refer__copy p strong {
  color: var(--ink);
  font-weight: 700;
}
@media (max-width: 980px) {
  .affiliates-dashboard .stat-row {
    grid-template-columns: 1fr 1fr;
  }
  .affiliates-dashboard .stat-col:nth-child(odd) {
    border-left: 0;
  }
  .affiliates-dashboard .stat-col:nth-child(n+3) {
    border-top: 1px solid var(--line-soft);
  }
  .affiliates-dashboard .dash-grid {
    grid-template-columns: 1fr;
  }
  .affiliates-dashboard .dash-aside {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
    margin-top: 8px;
    min-width: 0;
  }
  .affiliates-dashboard .dash-chart {
    padding-right: 0;
    min-width: 0;
  }
  .affiliates-dashboard .chart-svg {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .affiliates-dashboard .refer__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .affiliates-dashboard .refer__copy {
    padding: 0;
  }
}
@media (max-width: 560px) {
  .affiliates-dashboard .stat-row {
    grid-template-columns: 1fr;
  }
  .affiliates-dashboard .stat-col {
    padding: 26px 0;
  }
  .affiliates-dashboard .stat-col + .stat-col {
    border-left: 0;
  }
  .affiliates-dashboard .stat-col:nth-child(odd) {
    border-left: 0;
  }
  .affiliates-dashboard .stat-col:nth-child(n+2) {
    border-top: 1px solid var(--line-soft);
  }
  .affiliates-dashboard .stat-mega__num {
    font-size: clamp(56px, 19vw, 92px);
    letter-spacing: -2.6px;
  }
  .affiliates-dashboard .stat-mega__cur {
    font-size: clamp(22px, 7vw, 30px);
  }
  .affiliates-dashboard .chart-stats--flat {
    grid-template-columns: 1fr;
  }
  .affiliates-dashboard .chart-stats--flat > div {
    padding: 16px 0;
  }
  .affiliates-dashboard .chart-stats--flat > div + div {
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }
  .affiliates-dashboard .refer__copy {
    padding: 0;
  }
}
@media (max-width: 440px) {
  .affiliates-dashboard .pipe li {
    grid-template-columns: 28px 1fr auto;
    grid-auto-rows: auto;
    height: auto;
    padding: 12px 0;
    row-gap: 4px;
  }
  .affiliates-dashboard .pipe li .chip {
    justify-self: end;
  }
  .affiliates-dashboard .pipe .ctype-ico {
    grid-row: span 2;
  }
  .affiliates-dashboard .pipe__name {
    white-space: normal;
    min-width: 0;
  }
  .affiliates-dashboard .pipe__name .id {
    display: block;
    margin-left: 0;
  }
  .affiliates-dashboard .pipe__when,
.affiliates-dashboard .pipe__money {
    grid-column: 2/-1;
    padding-left: 0;
    justify-self: start;
  }
}