body.page-affiliate.auth-checking .public-only,
body.page-affiliate.auth-checking .auth-only {
  visibility: hidden !important;
}

body.page-affiliate .affiliate-app {
  --aff-surface: rgba(26,26,26,.96);
  --aff-soft: rgba(255,255,255,.035);
  --aff-border: rgba(255,255,255,.09);
  --aff-accent-border: rgba(0,255,204,.18);

  width: 100%;
  min-height: 100vh;
  grid-template-columns: 260px minmax(0,1fr);
  align-items: start;

  background:
    linear-gradient(
      180deg,
      var(--bg),
      var(--bg2)
    );

  color: var(--text);
}

body.page-affiliate
.affiliate-app[hidden],

body.page-affiliate
.affiliate-view[hidden],

body.page-affiliate
.affiliate-toolbar-menu[hidden],

body.page-affiliate
.affiliate-modal[hidden],

body.page-affiliate
.affiliate-more-info[hidden],

body.page-affiliate
.affiliate-destination-fields[hidden] {
  display: none !important;
}

/* SIDEBAR */

body.page-affiliate
.affiliate-sidebar {
  position: sticky;
  top: 0;

  height: 100vh;
  overflow-y: auto;

  padding: 24px 16px;

  background:
    rgba(14,18,24,.98);

  border-right:
    1px solid
    var(--aff-border);

  z-index: 1200;
}

body.page-affiliate
.affiliate-brand {
  display: flex;
  align-items: center;

  min-height: 54px;

  padding:
    6px
    10px
    22px;
}

body.page-affiliate
.affiliate-brand img {
  width: 150px;
  height: auto;

  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

body.page-affiliate
.affiliate-sidebar-home,

body.page-affiliate
.affiliate-nav-group button {
  width: 100%;

  display: flex;
  align-items: center;

  gap: 12px;

  border:
    1px solid
    transparent;

  background:
    transparent;

  color:
    var(--text);

  border-radius:
    11px;

  padding:
    12px 13px;

  cursor:
    pointer;

  font-weight:
    650;

  text-align:
    left;

  transition:
    .2s ease;
}

body.page-affiliate
.affiliate-sidebar-home {
  margin-bottom:
    22px;

  border-color:
    rgba(255,0,0,.20);

  background:
    rgba(255,0,0,.10);
}

body.page-affiliate
.affiliate-sidebar-home:hover,

body.page-affiliate
.affiliate-sidebar-home.active,

body.page-affiliate
.affiliate-nav-group button:hover,

body.page-affiliate
.affiliate-nav-group button.active {
  color:
    var(--accent);

  background:
    rgba(0,255,204,.07);

  border-color:
    var(--aff-accent-border);
}

body.page-affiliate
.affiliate-sidebar button i {
  width: 20px;

  text-align:
    center;

  color:
    var(--accent);
}

body.page-affiliate
.affiliate-nav-group {
  display: grid;

  gap: 4px;

  margin:
    0 0 22px;

  padding-bottom:
    18px;

  border-bottom:
    1px solid
    var(--aff-border);
}

body.page-affiliate
.affiliate-nav-label {
  color:
    var(--muted);

  font-size:
    11px;

  letter-spacing:
    .12em;

  font-weight:
    800;

  padding:
    0 12px 8px;
}

body.page-affiliate
.affiliate-tier-mini {
  margin-top:
    16px;

  padding:
    18px;

  border:
    1px solid
    rgba(255,0,0,.18);

  border-radius:
    16px;

  background:
    linear-gradient(
      145deg,
      rgba(255,0,0,.10),
      rgba(0,255,204,.05)
    );

  text-align:
    center;
}

body.page-affiliate
.affiliate-tier-crown {
  color:
    #ffcc66;

  font-size:
    24px;
}

body.page-affiliate
.affiliate-tier-mini strong,

body.page-affiliate
.affiliate-tier-mini span {
  display: block;
}

body.page-affiliate
.affiliate-tier-mini span {
  color:
    var(--muted);

  margin:
    5px 0 12px;

  font-size:
    12px;
}

body.page-affiliate
.affiliate-tier-mini button {
  width: 100%;

  border:
    1px solid
    var(--aff-accent-border);

  background:
    rgba(0,255,204,.06);

  color:
    var(--accent);

  border-radius:
    10px;

  padding:
    9px 12px;

  cursor:
    pointer;

  font-weight:
    800;
}

/* TOPBAR */

body.page-affiliate
.affiliate-shell {
  min-width: 0;
}

body.page-affiliate
.affiliate-topbar {
  position: sticky;

  top: 0;

  z-index: 1100;

  min-height:
    72px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap: 20px;

  padding:
    10px 24px;

  background:
    rgba(18,22,28,.96);

  border-bottom:
    1px solid
    var(--aff-border);

  backdrop-filter:
    blur(14px);
}

body.page-affiliate
.affiliate-topbar-left,

body.page-affiliate
.affiliate-toolbar {
  display:
    flex;

  align-items:
    center;
}

body.page-affiliate
.affiliate-topbar-left {
  min-width:
    0;

  gap:
    10px;
}

body.page-affiliate
.affiliate-toolbar {
  flex:
    0 0 auto;

  gap:
    9px;
}

body.page-affiliate
.affiliate-topnav {
  display:
    flex;

  align-items:
    center;

  gap:
    4px;

  overflow-x:
    auto;
}

body.page-affiliate
.affiliate-topnav button {
  white-space:
    nowrap;

  border:
    0;

  border-bottom:
    2px solid
    transparent;

  background:
    transparent;

  color:
    var(--muted);

  padding:
    14px 12px;

  cursor:
    pointer;

  font-weight:
    750;
}

body.page-affiliate
.affiliate-topnav button:hover,

body.page-affiliate
.affiliate-topnav button.active {
  color:
    var(--text);

  border-bottom-color:
    var(--accent);
}

body.page-affiliate
.affiliate-sidebar-toggle {
  display:
    none;

  width:
    42px;

  height:
    42px;

  border:
    1px solid
    var(--aff-border);

  background:
    var(--aff-soft);

  color:
    var(--text);

  border-radius:
    10px;

  cursor:
    pointer;
}

body.page-affiliate
.affiliate-language,

body.page-affiliate
.affiliate-user-menu,

body.page-affiliate
.affiliate-notif-wrap {
  position:
    relative;
}

body.page-affiliate
.affiliate-toolbar-button,

body.page-affiliate
.affiliate-toolbar-icon,

body.page-affiliate
.affiliate-user-button {
  border:
    1px solid
    var(--aff-border);

  background:
    var(--aff-soft);

  color:
    var(--text);

  border-radius:
    12px;

  cursor:
    pointer;
}

body.page-affiliate
.affiliate-toolbar-button {
  min-height:
    42px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    0 12px;
}

body.page-affiliate
.affiliate-toolbar-icon {
  width:
    42px;

  height:
    42px;

  display:
    grid;

  place-items:
    center;

  position:
    relative;
}

body.page-affiliate
.affiliate-user-button {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    5px 10px;

  min-height:
    48px;

  text-align:
    left;
}

body.page-affiliate
.affiliate-avatar {
  width:
    36px;

  height:
    36px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--primary-dark)
    );

  color:
    #fff;

  font-size:
    12px;

  font-weight:
    900;
}

body.page-affiliate
.affiliate-user-copy {
  display:
    grid;

  gap:
    2px;
}

body.page-affiliate
.affiliate-user-copy strong {
  color:
    var(--text);

  font-size:
    13px;
}

body.page-affiliate
.affiliate-user-copy small {
  color:
    var(--muted);

  font-size:
    11px;
}

body.page-affiliate
.affiliate-toolbar-menu {
  position:
    absolute;

  top:
    calc(100% + 10px);

  right:
    0;

  min-width:
    190px;

  padding:
    8px;

  border:
    1px solid
    var(--aff-border);

  border-radius:
    13px;

  background:
    #14191f;

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.30);

  z-index:
    1400;
}

body.page-affiliate
.affiliate-toolbar-menu a,

body.page-affiliate
.affiliate-toolbar-menu button {
  width:
    100%;

  display:
    block;

  border:
    0;

  background:
    transparent;

  color:
    var(--text) !important;

  text-align:
    left;

  border-radius:
    9px;

  padding:
    10px 11px;

  cursor:
    pointer;
}

body.page-affiliate
.affiliate-toolbar-menu a:hover,

body.page-affiliate
.affiliate-toolbar-menu button:hover {
  background:
    rgba(0,255,204,.07);

  color:
    var(--accent) !important;
}

/* MAIN */

body.page-affiliate
.affiliate-main {
  width:
    100%;

  max-width:
    1540px;

  margin:
    0 auto;

  padding:
    26px;
}

body.page-affiliate
.affiliate-global-status {
  margin:
    0 0 16px;

  padding:
    11px 13px;

  border:
    1px solid
    rgba(0,255,204,.18);

  border-radius:
    10px;

  background:
    rgba(0,255,204,.06);

  color:
    var(--accent);

  font-size:
    13px;
}

body.page-affiliate
.affiliate-global-status.error {
  border-color:
    rgba(255,71,87,.25);

  background:
    rgba(255,71,87,.08);

  color:
    #ff707d;
}

body.page-affiliate
.affiliate-view {
  display:
    grid;

  gap:
    16px;
}

/* HERO */

body.page-affiliate
.affiliate-dashboard-hero {
  display:
    grid;

  grid-template-columns:
    minmax(0,1.7fr)
    minmax(280px,.75fr);

  gap:
    22px;

  padding:
    34px;

  border:
    1px solid
    rgba(255,0,0,.16);

  border-radius:
    20px;

  background:
    radial-gradient(
      circle at 78% 15%,
      rgba(0,255,204,.10),
      transparent 34%
    ),
    radial-gradient(
      circle at 18% 0%,
      rgba(255,0,0,.16),
      transparent 36%
    ),
    #11161c;

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.30);
}

body.page-affiliate
.affiliate-eyebrow {
  display:
    inline-block;

  color:
    var(--accent);

  font-size:
    11px;

  letter-spacing:
    .13em;

  font-weight:
    900;
}

body.page-affiliate
.affiliate-dashboard-copy h1,

body.page-affiliate
.affiliate-page-heading h1,

body.page-affiliate
.affiliate-surface h2,

body.page-affiliate
.affiliate-tier-panel strong {
  background:
    none !important;

  -webkit-text-fill-color:
    currentColor !important;
}

body.page-affiliate
.affiliate-dashboard-copy h1,

body.page-affiliate
.affiliate-page-heading h1 {
  color:
    var(--text) !important;

  margin:
    0;
}

body.page-affiliate
.affiliate-dashboard-copy h1 {
  font-size:
    clamp(
      30px,
      4vw,
      52px
    );
}

body.page-affiliate
.affiliate-dashboard-copy p {
  color:
    #c5ced8;

  line-height:
    1.7;
}

body.page-affiliate
.affiliate-dashboard-copy ul {
  display:
    grid;

  gap:
    11px;

  list-style:
    none;

  margin-top:
    20px;
}

body.page-affiliate
.affiliate-dashboard-copy li {
  display:
    flex;

  gap:
    10px;

  align-items:
    center;
}

body.page-affiliate
.affiliate-dashboard-copy li i {
  color:
    var(--accent);
}

body.page-affiliate
.affiliate-tier-panel {
  padding:
    22px;

  border:
    1px solid
    var(--aff-border);

  border-radius:
    17px;

  background:
    rgba(0,0,0,.24);
}

body.page-affiliate
.affiliate-tier-title {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  margin:
    12px 0 22px;

  padding-bottom:
    18px;

  border-bottom:
    1px solid
    var(--aff-border);
}

body.page-affiliate
.affiliate-tier-title i {
  color:
    #ffcc66;

  font-size:
    26px;
}

body.page-affiliate
.affiliate-tier-title strong {
  color:
    var(--text) !important;

  font-size:
    24px;
}

body.page-affiliate
.affiliate-tier-rate {
  display:
    grid;

  gap:
    4px;
}

body.page-affiliate
.affiliate-tier-rate span,

body.page-affiliate
.affiliate-tier-panel small {
  color:
    var(--muted);
}

body.page-affiliate
.affiliate-tier-rate strong {
  color:
    var(--accent) !important;

  font-size:
    30px;
}

body.page-affiliate
.affiliate-tier-progress {
  height:
    8px;

  margin:
    16px 0 9px;

  border-radius:
    999px;

  overflow:
    hidden;

  background:
    rgba(255,255,255,.08);
}

body.page-affiliate
.affiliate-tier-progress span {
  display:
    block;

  width:
    0;

  height:
    100%;

  background:
    linear-gradient(
      90deg,
      var(--primary),
      var(--accent)
    );
}

/* KPI / SURFACES */

body.page-affiliate
.affiliate-kpi-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:
    14px;
}

body.page-affiliate
.affiliate-kpi-card,

body.page-affiliate
.affiliate-surface {
  border:
    1px solid
    var(--aff-border);

  background:
    var(--aff-surface);

  border-radius:
    17px;

  box-shadow:
    0 12px 30px
    rgba(0,0,0,.18);
}

body.page-affiliate
.affiliate-kpi-card {
  min-height:
    118px;

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  padding:
    18px;
}

body.page-affiliate
.affiliate-kpi-icon,

body.page-affiliate
.affiliate-settings-icon {
  width:
    46px;

  height:
    46px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(--aff-accent-border);

  border-radius:
    14px;

  background:
    rgba(0,255,204,.08);

  color:
    var(--accent);
}

body.page-affiliate
.affiliate-kpi-card > div {
  display:
    grid;

  gap:
    3px;
}

body.page-affiliate
.affiliate-kpi-card small,

body.page-affiliate
.affiliate-kpi-card span {
  color:
    var(--muted);
}

body.page-affiliate
.affiliate-kpi-card strong {
  color:
    var(--text);

  font-size:
    23px;
}

body.page-affiliate
.affiliate-kpi-card span b {
  color:
    var(--accent);
}

body.page-affiliate
.affiliate-dashboard-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:
    16px;
}

body.page-affiliate
.affiliate-dashboard-grid-bottom {
  grid-template-columns:
    minmax(0,1.5fr)
    minmax(300px,.7fr);
}

body.page-affiliate
.affiliate-surface {
  min-width:
    0;

  padding:
    22px;
}

body.page-affiliate
.affiliate-surface h2 {
  color:
    var(--text) !important;

  margin:
    0;
}

body.page-affiliate
.affiliate-section-heading,

body.page-affiliate
.affiliate-page-heading {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap:
    16px;
}

body.page-affiliate
.affiliate-section-heading {
  margin-bottom:
    18px;
}

body.page-affiliate
.affiliate-section-heading p,

body.page-affiliate
.affiliate-page-heading p {
  color:
    var(--muted);

  margin:
    5px 0 0;
}

body.page-affiliate
.affiliate-page-heading h1 {
  font-size:
    31px;
}

/* FORM */

body.page-affiliate
.affiliate-referral-input {
  display:
    grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap:
    10px;
}

body.page-affiliate
.affiliate-referral-input input,

body.page-affiliate
.affiliate-payout-form input,

body.page-affiliate
.affiliate-payout-form select,

body.page-affiliate
.affiliate-more-info textarea {
  width:
    100%;

  border:
    1px solid
    var(--aff-border);

  background:
    var(--aff-soft);

  color:
    var(--text);

  border-radius:
    11px;

  padding:
    12px 13px;

  outline:
    none;
}

body.page-affiliate
.affiliate-payout-form select option {
  background:
    #14191f;

  color:
    var(--text);
}

body.page-affiliate
.affiliate-destination-fields {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:
    12px;

  padding:
    15px;

  border:
    1px solid
    var(--aff-border);

  border-radius:
    13px;

  background:
    rgba(0,255,204,.025);
}

body.page-affiliate
.affiliate-payout-form,

body.page-affiliate
.affiliate-more-info form {
  display:
    grid;

  gap:
    14px;
}

body.page-affiliate
.affiliate-payout-form label,

body.page-affiliate
.affiliate-more-info label {
  display:
    grid;

  gap:
    7px;

  color:
    var(--text);

  font-weight:
    750;
}

/* BUTTONS */

body.page-affiliate
.affiliate-primary-button,

body.page-affiliate
.affiliate-secondary-button,

body.page-affiliate
.affiliate-link-button,

body.page-affiliate
.affiliate-table-action {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  border-radius:
    10px;

  padding:
    10px 13px;

  cursor:
    pointer;

  font-weight:
    800;

  text-decoration:
    none !important;
}

body.page-affiliate
.affiliate-primary-button {
  border:
    1px solid
    transparent;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--primary-dark)
    );

  color:
    #fff !important;
}

body.page-affiliate
.affiliate-secondary-button,

body.page-affiliate
.affiliate-table-action {
  border:
    1px solid
    var(--aff-border);

  background:
    var(--aff-soft);

  color:
    var(--text) !important;
}

body.page-affiliate
.affiliate-secondary-button:hover,

body.page-affiliate
.affiliate-table-action:hover {
  border-color:
    var(--accent);

  color:
    var(--accent) !important;
}

body.page-affiliate
.affiliate-link-button {
  border:
    0;

  background:
    transparent;

  color:
    var(--accent);
}

/* TABLES */

body.page-affiliate
.affiliate-table-scroll {
  width:
    100%;

  overflow-x:
    auto;
}

body.page-affiliate
.affiliate-table {
  width:
    100%;

  min-width:
    700px;

  border-collapse:
    collapse;
}

body.page-affiliate
.affiliate-table th,

body.page-affiliate
.affiliate-table td {
  padding:
    13px 12px;

  text-align:
    left;

  border-bottom:
    1px solid
    var(--aff-border);
}

body.page-affiliate
.affiliate-table th {
  color:
    var(--muted);

  font-size:
    11px;

  text-transform:
    uppercase;
}

body.page-affiliate
.affiliate-table td {
  color:
    #dce6ea;

  font-size:
    13px;
}

body.page-affiliate
.affiliate-empty-cell,

body.page-affiliate
.affiliate-empty-state {
  color:
    var(--muted) !important;

  text-align:
    center !important;

  padding:
    28px !important;
}

body.page-affiliate
.affiliate-status-pill {
  display:
    inline-flex;

  border-radius:
    999px;

  padding:
    5px 9px;

  background:
    rgba(255,255,255,.06);

  color:
    var(--muted);

  font-size:
    11px;

  font-weight:
    850;
}

body.page-affiliate
.status-active,

body.page-affiliate
.status-available,

body.page-affiliate
.status-paid,

body.page-affiliate
.status-completed {
  background:
    rgba(0,255,204,.09);

  color:
    var(--accent);
}

body.page-affiliate
.status-held,

body.page-affiliate
.status-pending,

body.page-affiliate
.status-more-info,

body.page-affiliate
.status-more_info {
  background:
    rgba(255,204,102,.10);

  color:
    #ffcc66;
}

body.page-affiliate
.status-rejected,

body.page-affiliate
.status-failed,

body.page-affiliate
.status-reversed,

body.page-affiliate
.status-inactive {
  background:
    rgba(255,71,87,.10);

  color:
    #ff707d;
}

/* CHART */

body.page-affiliate
.affiliate-chart {
  width:
    100%;

  min-height:
    230px;
}

body.page-affiliate
.affiliate-chart-gridline {
  stroke:
    rgba(255,255,255,.08);
}

body.page-affiliate
.affiliate-chart-line {
  fill:
    none;

  stroke:
    var(--accent);

  stroke-width:
    3;
}

body.page-affiliate
.affiliate-chart-point {
  fill:
    var(--primary);

  stroke:
    var(--text);
}

/* LEADERBOARD */

body.page-affiliate
.affiliate-reward-item {
  display:
    grid;

  grid-template-columns:
    34px
    minmax(0,1fr)
    auto;

  gap:
    11px;

  align-items:
    center;

  padding:
    13px 0;

  border-bottom:
    1px solid
    var(--aff-border);
}

body.page-affiliate
.affiliate-reward-rank {
  width:
    29px;

  height:
    29px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(--aff-accent-border);

  border-radius:
    50%;

  color:
    var(--accent);
}

/* MATERIALS */

body.page-affiliate
.affiliate-filter-buttons {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;
}

body.page-affiliate
.affiliate-filter-buttons button {
  border:
    1px solid
    var(--aff-border);

  background:
    var(--aff-soft);

  color:
    var(--muted);

  border-radius:
    999px;

  padding:
    8px 12px;

  cursor:
    pointer;
}

body.page-affiliate
.affiliate-filter-buttons button.active {
  border-color:
    var(--accent);

  color:
    var(--accent);
}

body.page-affiliate
.affiliate-material-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:
    14px;
}

body.page-affiliate
.affiliate-material-card {
  display:
    grid;

  gap:
    12px;

  padding:
    16px;

  border:
    1px solid
    var(--aff-border);

  border-radius:
    14px;

  background:
    rgba(255,255,255,.025);
}

body.page-affiliate
.affiliate-material-card-head {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    12px;
}

body.page-affiliate
.affiliate-material-card img {
  width:
    100%;

  max-height:
    260px;

  object-fit:
    contain;

  border-radius:
    10px;
}

body.page-affiliate
.affiliate-material-card pre,

body.page-affiliate
.affiliate-material-card code {
  display:
    block;

  max-height:
    240px;

  overflow:
    auto;

  white-space:
    pre-wrap;

  word-break:
    break-word;

  background:
    #0d1116;

  color:
    #dce6ea;

  padding:
    12px;

  border-radius:
    10px;
}

body.page-affiliate
.affiliate-material-actions,

body.page-affiliate
.affiliate-payout-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;
}

/* PAYOUT */

body.page-affiliate
.affiliate-payout-layout {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:
    16px;
}

body.page-affiliate
.affiliate-payout-row {
  display:
    grid;

  gap:
    8px;

  padding:
    14px;

  border:
    1px solid
    var(--aff-border);

  border-radius:
    12px;

  background:
    rgba(255,255,255,.025);
}

body.page-affiliate
.affiliate-payout-row-head {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    10px;
}

/* SETTINGS */

body.page-affiliate
.affiliate-settings-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:
    16px;
}

body.page-affiliate
.affiliate-settings-list {
  display:
    grid;
}

body.page-affiliate
.affiliate-settings-list > div {
  display:
    grid;

  grid-template-columns:
    120px minmax(0,1fr);

  gap:
    12px;

  padding:
    10px 0;

  border-bottom:
    1px solid
    var(--aff-border);
}

body.page-affiliate
.affiliate-settings-list dt {
  color:
    var(--muted);
}

body.page-affiliate
.affiliate-settings-list dd {
  margin:
    0;

  color:
    var(--text);
}

/* CUSTOM MODAL */

body.page-affiliate
.affiliate-modal {
  position:
    fixed;

  inset:
    0;

  z-index:
    5000;

  display:
    grid;

  place-items:
    center;

  padding:
    20px;

  background:
    rgba(0,0,0,.72);

  backdrop-filter:
    blur(5px);
}

body.page-affiliate
.affiliate-modal-card {
  width:
    min(680px,100%);

  max-height:
    82vh;

  overflow:
    auto;

  border:
    1px solid
    var(--aff-border);

  border-radius:
    18px;

  background:
    #12171d;
}

body.page-affiliate
.affiliate-modal-header {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  padding:
    17px 20px;

  border-bottom:
    1px solid
    var(--aff-border);
}

body.page-affiliate
.affiliate-modal-header h2 {
  margin:
    0;

  color:
    var(--text);
}

body.page-affiliate
.affiliate-modal-header button {
  width:
    38px;

  height:
    38px;

  border:
    1px solid
    var(--aff-border);

  border-radius:
    50%;

  background:
    var(--aff-soft);

  color:
    var(--text);

  font-size:
    24px;

  cursor:
    pointer;
}

body.page-affiliate
.affiliate-modal-body {
  display:
    grid;

  gap:
    16px;

  padding:
    20px;
}

body.page-affiliate
.affiliate-modal-details > div {
  display:
    grid;

  grid-template-columns:
    minmax(120px,.55fr)
    minmax(0,1.45fr);

  gap:
    14px;

  padding:
    10px 0;

  border-bottom:
    1px solid
    var(--aff-border);
}

body.page-affiliate
.affiliate-modal-details dt {
  color:
    var(--muted);
}

body.page-affiliate
.affiliate-modal-details dd {
  color:
    var(--text);

  margin:
    0;

  word-break:
    break-word;
}

/* MOBILE */

@media(max-width:1250px) {
  body.page-affiliate
  .affiliate-kpi-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  body.page-affiliate
  .affiliate-material-grid,

  body.page-affiliate
  .affiliate-settings-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}

@media(max-width:980px) {
  body.page-affiliate
  .affiliate-app {
    grid-template-columns:
      1fr;
  }

  body.page-affiliate
  .affiliate-sidebar {
    position:
      fixed;

    width:
      min(320px,88vw);

    transform:
      translateX(-105%);

    transition:
      transform .25s ease;

    z-index:
      2600;
  }

  body.page-affiliate
  .affiliate-sidebar.open {
    transform:
      translateX(0);
  }

  body.page-affiliate
  .affiliate-sidebar-backdrop {
    position:
      fixed;

    inset:
      0;

    display:
      block;

    opacity:
      0;

    pointer-events:
      none;

    background:
      rgba(0,0,0,.66);

    z-index:
      2500;
  }

  body.page-affiliate
  .affiliate-sidebar-backdrop.show {
    opacity:
      1;

    pointer-events:
      auto;
  }

  body.page-affiliate
  .affiliate-sidebar-toggle {
    display:
      grid;

    place-items:
      center;
  }

  body.page-affiliate
  .affiliate-topnav {
    display:
      none;
  }

  body.page-affiliate
  .affiliate-dashboard-hero,

  body.page-affiliate
  .affiliate-dashboard-grid,

  body.page-affiliate
  .affiliate-dashboard-grid-bottom,

  body.page-affiliate
  .affiliate-payout-layout {
    grid-template-columns:
      1fr;
  }
}

@media(max-width:700px) {
  body.page-affiliate
  .affiliate-main {
    padding:
      14px;
  }

  body.page-affiliate
  .affiliate-user-copy {
    display:
      none;
  }

  body.page-affiliate
  .affiliate-kpi-grid,

  body.page-affiliate
  .affiliate-material-grid,

  body.page-affiliate
  .affiliate-settings-grid,

  body.page-affiliate
  .affiliate-referral-input,

  body.page-affiliate
  .affiliate-destination-fields {
    grid-template-columns:
      1fr;
  }

  body.page-affiliate
  .affiliate-section-heading,

  body.page-affiliate
  .affiliate-page-heading {
    flex-direction:
      column;
  }
}
/* =========================================================
   AFFILIATE DESKTOP STRUCTURE FIX
   IMPORTANT:
   Layout only. Milkacase colors remain unchanged.
   ========================================================= */

body.page-affiliate .affiliate-app,
body.page-affiliate .affiliate-app * {
  box-sizing: border-box;
}

/*
 * The backdrop is ONLY for mobile.
 *
 * Without this rule it becomes the first desktop grid item
 * and pushes:
 *
 * sidebar -> column 2
 * shell   -> next row
 */
body.page-affiliate .affiliate-sidebar-backdrop {
  display: none !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 981px) {

  body.page-affiliate .affiliate-app {
    width: 100% !important;
    min-height: 100vh;

    grid-template-columns:
      250px
      minmax(0, 1fr) !important;

    grid-template-rows:
      auto !important;

    align-items: stretch;
  }


  /* -------------------------
     LEFT SIDEBAR
     ------------------------- */

  body.page-affiliate .affiliate-sidebar {
    grid-column: 1;
    grid-row: 1;

    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;

    height: 100vh;

    position: sticky;
    top: 0;

    align-self: start;

    overflow-x: hidden;
    overflow-y: auto;
  }


  /* -------------------------
     RIGHT APP AREA
     ------------------------- */

  body.page-affiliate .affiliate-shell {
    grid-column: 2;
    grid-row: 1;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    align-self: stretch;
  }


  /* -------------------------
     TOP NAV
     ------------------------- */

  body.page-affiliate .affiliate-topbar {
    width: 100% !important;
    min-width: 0;

    display: flex;

    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;
  }

  body.page-affiliate .affiliate-topbar-left {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.page-affiliate .affiliate-topnav {
    width: auto;

    flex: 1 1 auto;

    min-width: 0;

    display: flex;

    align-items: center;
  }

  body.page-affiliate .affiliate-toolbar {
    flex: 0 0 auto;

    margin-left: auto;

    display: flex;

    align-items: center;
  }


  /* -------------------------
     MAIN CONTENT
     ------------------------- */

  body.page-affiliate .affiliate-main {
    width: 100% !important;

    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;

    padding: 24px !important;
  }

  body.page-affiliate .affiliate-view {
    width: 100%;
    min-width: 0;
  }


  /* -------------------------
     HERO
     ------------------------- */

  body.page-affiliate .affiliate-dashboard-hero {
    width: 100%;
    min-width: 0;

    display: grid;

    grid-template-columns:
      minmax(0, 1.7fr)
      minmax(280px, .65fr);

    gap: 22px;

    align-items: stretch;
  }

  body.page-affiliate .affiliate-dashboard-copy,
  body.page-affiliate .affiliate-tier-panel {
    min-width: 0;
  }

  body.page-affiliate .affiliate-kpi-grid {
    width: 100%;
    min-width: 0;

    display: grid !important;

    grid-template-columns:
      repeat(
        4,
        minmax(0, 1fr)
      ) !important;

    gap: 14px;
  }

  body.page-affiliate .affiliate-kpi-card {
    width: 100%;
    min-width: 0;
  }

  body.page-affiliate .affiliate-dashboard-grid {
    width: 100%;

    min-width: 0;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    gap: 16px;
  }

  body.page-affiliate .affiliate-referral-card,
  body.page-affiliate .affiliate-chart-card {
    width: 100%;

    min-width: 0;
  }

  body.page-affiliate
  .affiliate-dashboard-grid-bottom {
    grid-template-columns:
      minmax(0, 1.6fr)
      minmax(300px, .7fr) !important;
  }

  body.page-affiliate .affiliate-referral-input {
    width: 100%;

    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      auto;

    gap: 10px;
  }

  body.page-affiliate .affiliate-referral-input input {
    min-width: 0;
  }

  body.page-affiliate .affiliate-surface {
    width: 100%;
    min-width: 0;
  }

  body.page-affiliate .affiliate-table-scroll {
    width: 100%;
    max-width: 100%;

    overflow-x: auto;
  }

  body.page-affiliate .affiliate-payout-layout {
    width: 100%;

    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    gap: 16px;
  }

  body.page-affiliate .affiliate-settings-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      ) !important;

    gap: 16px;
  }

  body.page-affiliate .affiliate-material-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      ) !important;

    gap: 14px;
  }
}

@media (
  min-width: 981px
)
and (
  max-width: 1250px
) {

  body.page-affiliate .affiliate-kpi-grid {
    grid-template-columns:
      repeat(
        4,
        minmax(0, 1fr)
      ) !important;
  }

  body.page-affiliate
  .affiliate-dashboard-grid-bottom {
    grid-template-columns:
      minmax(0, 1.4fr)
      minmax(280px, .8fr) !important;
  }

  body.page-affiliate .affiliate-material-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;
  }
}

@media (max-width: 980px) {

  body.page-affiliate .affiliate-app {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  body.page-affiliate .affiliate-sidebar-backdrop {
    position: fixed;

    inset: 0;

    display: block !important;

    opacity: 0;

    pointer-events: none;

    background:
      rgba(0, 0, 0, .66);

    z-index: 2500;
  }

  body.page-affiliate
  .affiliate-sidebar-backdrop.show {
    opacity: 1;

    pointer-events: auto;
  }


  body.page-affiliate .affiliate-sidebar {
    position: fixed;

    top: 0;
    left: 0;

    width:
      min(
        320px,
        88vw
      ) !important;

    min-width: 0 !important;
    max-width: none !important;

    height: 100vh;

    transform:
      translateX(-105%);

    transition:
      transform .25s ease;

    z-index: 2600;
  }

  body.page-affiliate .affiliate-sidebar.open {
    transform:
      translateX(0);
  }


  body.page-affiliate .affiliate-shell {
    width: 100% !important;

    min-width: 0 !important;
  }


  body.page-affiliate .affiliate-sidebar-toggle {
    display: grid !important;

    place-items: center;
  }


  body.page-affiliate .affiliate-topnav {
    display: none !important;
  }


  body.page-affiliate .affiliate-main {
    width: 100% !important;

    max-width: none !important;

    padding: 16px !important;
  }


  body.page-affiliate .affiliate-dashboard-hero,
  body.page-affiliate .affiliate-dashboard-grid,
  body.page-affiliate .affiliate-dashboard-grid-bottom,
  body.page-affiliate .affiliate-payout-layout {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }


  body.page-affiliate .affiliate-kpi-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;
  }


  body.page-affiliate .affiliate-material-grid,
  body.page-affiliate .affiliate-settings-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;
  }
}

@media (max-width: 700px) {

  body.page-affiliate .affiliate-main {
    padding: 12px !important;
  }

  body.page-affiliate .affiliate-kpi-grid,
  body.page-affiliate .affiliate-material-grid,
  body.page-affiliate .affiliate-settings-grid,
  body.page-affiliate .affiliate-referral-input,
  body.page-affiliate .affiliate-destination-fields {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  body.page-affiliate .affiliate-user-copy {
    display: none;
  }

  body.page-affiliate .affiliate-toolbar {
    gap: 5px;
  }

  body.page-affiliate .affiliate-dashboard-hero {
    padding: 20px;
  }
}

body.page-affiliate
.affiliate-notif-wrap {
  position: relative;

  display: flex;

  align-items: center;

  flex: 0 0 auto;
}

body.page-affiliate
.affiliate-notif-wrap
.notif-bell {
  position: relative;

  width: 42px;
  height: 42px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius: 50%;

  background:
    rgba(255,255,255,.04);

  color: var(--text);

  cursor: pointer;

  transition:
    background .2s ease,
    border-color .2s ease;
}


body.page-affiliate
.affiliate-notif-wrap
.notif-bell:hover {
  background:
    rgba(0,255,204,.08);

  border-color:
    rgba(0,255,204,.22);
}

body.page-affiliate
.affiliate-notif-wrap
.notif-count {
  position: absolute;

  top: -6px;
  right: -7px;

  min-width: 19px;
  height: 19px;

  padding: 0 5px;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    2px solid
    #0b0e11;

  border-radius:
    999px;

  background:
    #f6465d;

  color: #fff;

  font-size: 11px;

  font-weight: 800;

  line-height: 1;
}

body.page-affiliate
.affiliate-notif-wrap
.notif-dropdown {
  position: absolute !important;

  top:
    calc(100% + 12px) !important;

  right: 0 !important;

  left: auto !important;

  width: 390px !important;

  max-width:
    calc(100vw - 24px) !important;

  background:
    #181a20 !important;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:
    14px;

  box-shadow:
    0 18px 50px
    rgba(0,0,0,.45);

  overflow: hidden;

  z-index: 10050;
}

body.page-affiliate
.notif-header {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  padding:
    16px 18px;

  border-bottom:
    1px solid
    rgba(255,255,255,.08);
}


body.page-affiliate
.notif-header strong {
  color: #fff;

  font-size: 17px;
}


body.page-affiliate
.notif-close {
  border: 0;

  background:
    transparent;

  color:
    #848e9c;

  font-size:
    25px;

  line-height: 1;

  cursor: pointer;
}


body.page-affiliate
.notif-close:hover {
  color: #fff;
}

body.page-affiliate
.notif-list {
  width: 100%;

  max-height:
    420px;

  overflow-y: auto;

  overflow-x: hidden;
}


body.page-affiliate
.notif-item {
  width: 100%;

  display: flex;

  align-items:
    flex-start;

  gap: 10px;

  padding:
    14px 16px;

  border: 0;

  border-bottom:
    1px solid
    rgba(255,255,255,.06);

  background:
    transparent;

  color: inherit;

  text-align: left;

  cursor: pointer;
}


body.page-affiliate
.notif-item:hover {
  background:
    rgba(255,255,255,.04);
}


body.page-affiliate
.notif-item.unread {
  background:
    rgba(246,70,93,.05);
}

body.page-affiliate
.notif-dot {
  width: 7px;
  height: 7px;

  margin-top: 7px;

  border-radius: 50%;

  background:
    transparent;

  flex: 0 0 auto;
}


body.page-affiliate
.notif-item.unread
.notif-dot {
  background:
    #f6465d;
}

body.page-affiliate
.notif-item-body {
  min-width: 0;

  display: flex;

  flex-direction:
    column;

  flex: 1;
}


body.page-affiliate
.notif-title {
  color:
    #f0f1f2;

  font-size:
    14px;

  font-weight:
    700;

  line-height:
    1.4;
}


body.page-affiliate
.notif-message {
  display:
    -webkit-box;

  margin-top:
    4px;

  overflow:
    hidden;

  color:
    #b7bdc6;

  font-size:
    13px;

  line-height:
    1.45;

  -webkit-line-clamp:
    2;

  -webkit-box-orient:
    vertical;
}


body.page-affiliate
.notif-meta {
  margin-top:
    6px;

  color:
    #707a8a;

  font-size:
    11px;
}


body.page-affiliate
.notif-empty {
  padding:
    35px 20px;

  color:
    #848e9c;

  text-align:
    center;

  font-size:
    13px;
}

body.page-affiliate
.notif-view-all {
  width: 100%;

  padding:
    13px 16px;

  border: 0;

  border-top:
    1px solid
    rgba(255,255,255,.08);

  background:
    transparent;

  color:
    var(--accent);

  font-size:
    13px;

  font-weight:
    700;

  cursor: pointer;
}


body.page-affiliate
.notif-view-all:hover {
  background:
    rgba(0,255,204,.05);
}

body.page-affiliate
.notif-detail {
  padding: 18px;
}


body.page-affiliate
.notif-back {
  margin-bottom:
    18px;

  padding: 0;

  border: 0;

  background:
    transparent;

  color:
    var(--accent);

  cursor: pointer;

  font-size:
    13px;

  font-weight:
    700;
}


body.page-affiliate
.notif-detail h4 {
  margin:
    0 0 12px;

  color: #fff;

  font-size:
    17px;

  line-height:
    1.4;
}


body.page-affiliate
.notif-detail p {
  margin: 0;

  color:
    #b7bdc6;

  font-size:
    14px;

  line-height:
    1.65;

  white-space:
    pre-wrap;

  word-break:
    break-word;
}


body.page-affiliate
.notif-detail-meta {
  margin-top:
    18px;

  color:
    #707a8a;

  font-size:
    12px;
}

body.page-affiliate
.notif-dropdown.hidden,

body.page-affiliate
.notif-count.hidden,

body.page-affiliate
.notif-detail.hidden,

body.page-affiliate
.notif-view-all.hidden {
  display:
    none !important;
}

body.page-affiliate
.affiliate-topbar,

body.page-affiliate
.affiliate-toolbar,

body.page-affiliate
.affiliate-notif-wrap {
  overflow:
    visible;
}

@media(max-width:700px) {

  body.page-affiliate
  .affiliate-notif-wrap
  .notif-dropdown {
    position:
      fixed !important;

    top:
      70px !important;

    left:
      12px !important;

    right:
      12px !important;

    width:
      auto !important;

    max-width:
      none !important;

    max-height:
      calc(100vh - 90px);
  }


  body.page-affiliate
  .notif-list {
    max-height:
      calc(100vh - 220px);
  }
}