/* ============================================================
   KRYIA BILLING — AFFILIATE CENTER
   COMPLETE DESIGN SYSTEM
   PART 2 / 3

   File:
   css-systems/affiliate.css
============================================================ */


/* ============================================================
   01. ROOT TOKENS
============================================================ */

:root {

  /* ----------------------------------------------------------
     BACKGROUNDS
  ---------------------------------------------------------- */

  --aff-bg-0:
    #050506;

  --aff-bg-1:
    #070708;

  --aff-bg-2:
    #0a0a0c;

  --aff-bg-3:
    #0e0e11;

  --aff-bg-4:
    #121216;


  /* ----------------------------------------------------------
     SURFACES
  ---------------------------------------------------------- */

  --aff-surface-1:
    rgba(255, 255, 255, 0.028);

  --aff-surface-2:
    rgba(255, 255, 255, 0.045);

  --aff-surface-3:
    rgba(255, 255, 255, 0.065);

  --aff-surface-4:
    rgba(255, 255, 255, 0.09);


  /* ----------------------------------------------------------
     TEXT
  ---------------------------------------------------------- */

  --aff-text:
    rgba(255, 255, 255, 0.97);

  --aff-text-soft:
    rgba(255, 255, 255, 0.74);

  --aff-text-muted:
    rgba(255, 255, 255, 0.48);

  --aff-text-faint:
    rgba(255, 255, 255, 0.27);


  /* ----------------------------------------------------------
     ACCENTS
  ---------------------------------------------------------- */

  --aff-cream:
    #eee9df;

  --aff-cream-soft:
    #d9d2c6;

  --aff-violet:
    #a68bff;

  --aff-blue:
    #7fb0ff;

  --aff-cyan:
    #86e6f0;

  --aff-green:
    #6ee7a4;

  --aff-yellow:
    #f0d478;

  --aff-red:
    #ff7979;


  /* ----------------------------------------------------------
     BORDERS
  ---------------------------------------------------------- */

  --aff-border:
    rgba(255, 255, 255, 0.085);

  --aff-border-soft:
    rgba(255, 255, 255, 0.055);

  --aff-border-strong:
    rgba(255, 255, 255, 0.15);

  --aff-border-bright:
    rgba(255, 255, 255, 0.24);


  /* ----------------------------------------------------------
     SHADOWS
  ---------------------------------------------------------- */

  --aff-shadow-xs:
    0 5px 14px rgba(0, 0, 0, 0.16);

  --aff-shadow-sm:
    0 12px 30px rgba(0, 0, 0, 0.22);

  --aff-shadow-md:
    0 22px 55px rgba(0, 0, 0, 0.32);

  --aff-shadow-lg:
    0 36px 100px rgba(0, 0, 0, 0.45);

  --aff-shadow-xl:
    0 50px 150px rgba(0, 0, 0, 0.62);


  /* ----------------------------------------------------------
     RADIUS
  ---------------------------------------------------------- */

  --aff-r-xs:
    10px;

  --aff-r-sm:
    14px;

  --aff-r-md:
    18px;

  --aff-r-lg:
    24px;

  --aff-r-xl:
    30px;

  --aff-r-2xl:
    38px;

  --aff-r-3xl:
    48px;

  --aff-pill:
    999px;


  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */

  --aff-page:
    1460px;

  --aff-page-wide:
    1580px;

  --aff-header-h:
    76px;

  --aff-section-gap:
    145px;


  /* ----------------------------------------------------------
     MOTION
  ---------------------------------------------------------- */

  --aff-fast:
    160ms;

  --aff-normal:
    260ms;

  --aff-slow:
    520ms;

  --aff-ease:
    cubic-bezier(.2, .8, .2, 1);

  --aff-ease-spring:
    cubic-bezier(.18, .89, .32, 1.18);

}


/* ============================================================
   02. RESET
============================================================ */

*,
*::before,
*::after {

  box-sizing:
    border-box;

}


html {

  width:
    100%;

  min-height:
    100%;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  scroll-behavior:
    smooth;

  background:
    var(--aff-bg-0);

  scrollbar-gutter:
    stable;

}


body {

  margin:
    0;

  width:
    100%;

  min-height:
    100vh;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  color:
    var(--aff-text);

  background:
    var(--aff-bg-0);

  font-family:
    "Inter",
    sans-serif;

  font-synthesis:
    none;

  text-rendering:
    optimizeLegibility;

  -webkit-font-smoothing:
    antialiased;

  -moz-osx-font-smoothing:
    grayscale;

}


button,
input,
select,
textarea {

  font:
    inherit;

}


button {

  padding:
    0;

  border:
    0;

}


button:not(:disabled),
a,
select {

  cursor:
    pointer;

}


a {

  color:
    inherit;

  text-decoration:
    none;

}


img {

  display:
    block;

  max-width:
    100%;

}


h1,
h2,
h3,
h4,
p,
dl,
dd,
dt {

  margin:
    0;

}


ul,
ol {

  margin:
    0;

  padding:
    0;

  list-style:
    none;

}


[hidden] {

  display:
    none !important;

}


/* ============================================================
   03. SCROLL LOCK
============================================================ */

html.kryia-scroll-locked,
body.kryia-scroll-locked {

  overflow:
    hidden !important;

}


/* ============================================================
   04. ACCESSIBILITY
============================================================ */

.skip-link {

  position:
    fixed;

  top:
    12px;

  left:
    12px;

  z-index:
    999999;

  padding:
    11px 14px;

  border-radius:
    11px;

  color:
    #08080a;

  background:
    #ffffff;

  font-size:
    0.74rem;

  font-weight:
    800;

  transform:
    translateY(-160%);

  transition:
    transform var(--aff-fast) ease;

}


.skip-link:focus {

  transform:
    translateY(0);

}


:focus-visible {

  outline:
    2px solid rgba(255, 255, 255, 0.9);

  outline-offset:
    4px;

}


/* ============================================================
   05. SELECTION
============================================================ */

::selection {

  color:
    #09090b;

  background:
    var(--aff-cream);

}


/* ============================================================
   06. SCROLLBAR
============================================================ */

::-webkit-scrollbar {

  width:
    8px;

  height:
    8px;

}


::-webkit-scrollbar-track {

  background:
    #060607;

}


::-webkit-scrollbar-thumb {

  border:
    2px solid #060607;

  border-radius:
    var(--aff-pill);

  background:
    rgba(255, 255, 255, 0.22);

}


::-webkit-scrollbar-thumb:hover {

  background:
    rgba(255, 255, 255, 0.36);

}


* {

  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(255, 255, 255, 0.24)
    rgba(0, 0, 0, 0.1);

}


/* ============================================================
   07. GLOBAL BACKGROUND
============================================================ */

.affiliate-background {

  position:
    fixed;

  inset:
    0;

  z-index:
    -100;

  overflow:
    hidden;

  pointer-events:
    none;

  background:
    var(--aff-bg-0);

}


.affiliate-background__base {

  position:
    absolute;

  inset:
    0;

  background:

    radial-gradient(
      circle at 12% 5%,
      rgba(166, 139, 255, 0.09),
      transparent 26%
    ),

    radial-gradient(
      circle at 88% 18%,
      rgba(127, 176, 255, 0.075),
      transparent 28%
    ),

    radial-gradient(
      circle at 52% 78%,
      rgba(134, 230, 240, 0.045),
      transparent 34%
    ),

    linear-gradient(
      180deg,
      #08080a 0%,
      #050506 55%,
      #070708 100%
    );

}


.affiliate-background__grid {

  position:
    absolute;

  inset:
    0;

  opacity:
    0.24;

  background-image:

    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );

  background-size:
    56px 56px;

  mask-image:
    radial-gradient(
      ellipse at center,
      black 0%,
      transparent 83%
    );

}


.affiliate-background__noise {

  position:
    absolute;

  inset:
    0;

  opacity:
    0.11;

  mix-blend-mode:
    soft-light;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");

}


.affiliate-background__vignette {

  position:
    absolute;

  inset:
    0;

  background:

    radial-gradient(
      ellipse at center,
      transparent 12%,
      rgba(0, 0, 0, 0.42) 70%,
      rgba(0, 0, 0, 0.82) 100%
    ),

    linear-gradient(
      180deg,
      transparent,
      rgba(0, 0, 0, 0.36)
    );

}


.affiliate-orb {

  position:
    absolute;

  border-radius:
    50%;

  filter:
    blur(90px);

  opacity:
    0.34;

  animation:
    affiliateOrbFloat
    14s
    ease-in-out
    infinite;

}


.affiliate-orb--one {

  width:
    420px;

  height:
    420px;

  left:
    -180px;

  top:
    120px;

  background:
    rgba(166, 139, 255, 0.18);

}


.affiliate-orb--two {

  width:
    560px;

  height:
    560px;

  right:
    -250px;

  top:
    410px;

  background:
    rgba(127, 176, 255, 0.12);

  animation-delay:
    -5s;

}


.affiliate-orb--three {

  width:
    360px;

  height:
    360px;

  left:
    46%;

  bottom:
    -160px;

  background:
    rgba(134, 230, 240, 0.08);

  animation-delay:
    -9s;

}


.affiliate-line {

  position:
    absolute;

  width:
    1px;

  height:
    74vh;

  background:
    linear-gradient(
      transparent,
      rgba(255, 255, 255, 0.16),
      transparent
    );

  opacity:
    0.25;

}


.affiliate-line--one {

  left:
    18%;

  top:
    4%;

  transform:
    rotate(22deg);

}


.affiliate-line--two {

  right:
    17%;

  top:
    20%;

  transform:
    rotate(-19deg);

}


/* ============================================================
   08. APPLICATION
============================================================ */

.affiliate-app {

  position:
    relative;

  isolation:
    isolate;

  width:
    100%;

  min-height:
    100vh;

}


/* ============================================================
   09. LOADER
============================================================ */

.affiliate-loader {

  position:
    fixed;

  inset:
    0;

  z-index:
    999999;

  display:
    grid;

  place-items:
    center;

  /* The loader is visual only and must never intercept controls. */
  pointer-events:
    none;

  background:
    #060607;

  transition:

    opacity 600ms ease,
    visibility 600ms ease;

}


.affiliate-loader.is-hidden {

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

}


.affiliate-loader::before,
.affiliate-loader::after {

  content:
    "";

  position:
    absolute;

  left:
    50%;

  top:
    50%;

  border:
    1px solid rgba(255, 255, 255, 0.07);

  border-radius:
    50%;

  transform:
    translate(-50%, -50%);

  animation:
    affiliateLoaderOrbit
    10s
    linear
    infinite;

}


.affiliate-loader::before {

  width:
    430px;

  height:
    430px;

}


.affiliate-loader::after {

  width:
    650px;

  height:
    650px;

  opacity:
    0.55;

  animation-direction:
    reverse;

  animation-duration:
    16s;

}


.affiliate-loader__content {

  position:
    relative;

  z-index:
    5;

  width:
    min(340px, calc(100% - 40px));

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  text-align:
    center;

}


.affiliate-loader__logo {

  width:
    86px;

  height:
    86px;

  padding:
    16px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    25px;

  background:
    rgba(255, 255, 255, 0.045);

  backdrop-filter:
    blur(20px);

  box-shadow:
    var(--aff-shadow-md);

  animation:
    affiliateLoaderLogo
    2.2s
    ease-in-out
    infinite;

}


.affiliate-loader__logo img {

  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

}


.affiliate-loader__brand {

  margin-top:
    20px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

}


.affiliate-loader__brand strong {

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    1.45rem;

  font-weight:
    800;

  letter-spacing:
    -0.06em;

}


.affiliate-loader__brand span {

  padding:
    5px 7px;

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

  border-radius:
    7px;

  color:
    var(--aff-text-muted);

  font-size:
    0.48rem;

  font-weight:
    800;

  letter-spacing:
    0.12em;

}


.affiliate-loader__bar {

  position:
    relative;

  width:
    215px;

  height:
    2px;

  margin-top:
    25px;

  overflow:
    hidden;

  border-radius:
    var(--aff-pill);

  background:
    rgba(255, 255, 255, 0.08);

}


.affiliate-loader__bar span {

  position:
    absolute;

  inset:
    0 auto 0 0;

  width:
    38%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      transparent,
      white,
      transparent
    );

  animation:
    affiliateLoaderBar
    1.3s
    ease-in-out
    infinite;

}


.affiliate-loader__content p {

  margin-top:
    14px;

  color:
    var(--aff-text-muted);

  font-size:
    0.7rem;

}


/* ============================================================
   10. HEADER
============================================================ */

.affiliate-header {

  position:
    sticky;

  top:
    12px;

  z-index:
    7000;

  width:
    min(
      var(--aff-page-wide),
      calc(100% - 28px)
    );

  min-height:
    var(--aff-header-h);

  margin:
    12px auto 0;

  padding:
    9px 10px 9px 13px;

  display:
    grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items:
    center;

  gap:
    22px;

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

  border-radius:
    24px;

  background:
    rgba(8, 8, 10, 0.72);

  backdrop-filter:
    blur(28px)
    saturate(1.25);

  -webkit-backdrop-filter:
    blur(28px)
    saturate(1.25);

  box-shadow:

    0 15px 55px rgba(0, 0, 0, 0.22),

    inset 0 1px 0 rgba(255, 255, 255, 0.055);

  transition:

    background var(--aff-normal) ease,
    border-color var(--aff-normal) ease,
    box-shadow var(--aff-normal) ease;

}


.affiliate-header.is-scrolled {

  background:
    rgba(8, 8, 10, 0.92);

  border-color:
    rgba(255, 255, 255, 0.13);

  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.4);

}


/* ============================================================
   11. BRAND
============================================================ */

.affiliate-brand {

  min-width:
    190px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

}


.affiliate-brand__logo {

  width:
    45px;

  height:
    45px;

  padding:
    8px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    14px;

  background:
    rgba(255, 255, 255, 0.045);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07);

  transition:
    transform var(--aff-normal)
    var(--aff-ease);

}


.affiliate-brand:hover
.affiliate-brand__logo {

  transform:
    rotate(-6deg)
    scale(1.05);

}


.affiliate-brand__logo img {

  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

}


.affiliate-brand__copy {

  display:
    flex;

  flex-direction:
    column;

}


.affiliate-brand__top {

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

}


.affiliate-brand__top strong {

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    1rem;

  font-weight:
    800;

  letter-spacing:
    -0.055em;

}


.affiliate-brand__top small {

  padding:
    3px 5px;

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

  border-radius:
    5px;

  color:
    var(--aff-text-muted);

  font-size:
    0.4rem;

  font-weight:
    800;

  letter-spacing:
    0.1em;

}


.affiliate-brand__subtitle {

  margin-top:
    3px;

  color:
    var(--aff-text-muted);

  font-size:
    0.49rem;

  font-weight:
    700;

  letter-spacing:
    0.15em;

}


/* ============================================================
   12. HEADER NAVIGATION
============================================================ */

.affiliate-nav {

  justify-self:
    center;

  padding:
    4px;

  display:
    flex;

  align-items:
    center;

  gap:
    3px;

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

  border-radius:
    14px;

  background:
    rgba(255, 255, 255, 0.018);

}


.affiliate-nav__link {

  position:
    relative;

  min-height:
    37px;

  padding:
    0 12px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    10px;

  color:
    var(--aff-text-muted);

  font-size:
    0.7rem;

  font-weight:
    650;

  transition:

    color var(--aff-fast) ease,
    background var(--aff-fast) ease;

}


.affiliate-nav__link:hover {

  color:
    white;

  background:
    rgba(255, 255, 255, 0.04);

}


.affiliate-nav__link.is-active {

  color:
    white;

  background:
    rgba(255, 255, 255, 0.065);

}


.affiliate-nav__link.is-active::after {

  content:
    "";

  position:
    absolute;

  left:
    50%;

  bottom:
    4px;

  width:
    16px;

  height:
    1px;

  background:
    white;

  transform:
    translateX(-50%);

}


/* ============================================================
   13. HEADER ACTIONS
============================================================ */

.affiliate-header__actions {

  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;

}


.promotion-status {

  min-height:
    44px;

  padding:
    0 11px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  border:
    1px solid rgba(110, 231, 164, 0.1);

  border-radius:
    13px;

  background:
    rgba(110, 231, 164, 0.035);

}


.promotion-status__dot {

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    var(--aff-green);

  box-shadow:
    0 0 0 5px rgba(110, 231, 164, 0.05);

  animation:
    affiliateStatusPulse
    2.2s
    ease-in-out
    infinite;

}


.promotion-status > span:last-child {

  display:
    flex;

  flex-direction:
    column;

}


.promotion-status small {

  color:
    rgba(157, 239, 191, 0.56);

  font-size:
    0.43rem;

  font-weight:
    800;

  letter-spacing:
    0.11em;

}


.promotion-status strong {

  margin-top:
    2px;

  font-size:
    0.67rem;

}


.header-icon-button {

  width:
    44px;

  height:
    44px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    13px;

  color:
    var(--aff-text-soft);

  background:
    rgba(255, 255, 255, 0.035);

  transition:
    all var(--aff-fast) ease;

}


.header-icon-button:hover {

  color:
    white;

  transform:
    translateY(-2px);

  background:
    rgba(255, 255, 255, 0.075);

}


/* ============================================================
   14. AFFILIATE ACCOUNT BUTTON
============================================================ */

.affiliate-account-button {

  min-width:
    162px;

  min-height:
    50px;

  padding:
    5px 9px 5px 6px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

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

  border-radius:
    15px;

  color:
    white;

  background:
    rgba(255, 255, 255, 0.045);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  transition:
    all var(--aff-fast) ease;

}


.affiliate-account-button:hover,
.affiliate-account-button[aria-expanded="true"] {

  border-color:
    var(--aff-border-strong);

  background:
    rgba(255, 255, 255, 0.075);

}


.affiliate-account-button__avatar {

  width:
    37px;

  height:
    37px;

  flex:
    0 0 37px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid rgba(255, 255, 255, 0.1);

  border-radius:
    11px;

  background:

    radial-gradient(
      circle at top left,
      rgba(255, 255, 255, 0.18),
      transparent 45%
    ),

    #17171a;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    0.75rem;

  font-weight:
    800;

}


.affiliate-account-button__copy {

  min-width:
    0;

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

}


.affiliate-account-button__copy small {

  color:
    var(--aff-text-muted);

  font-size:
    0.42rem;

  font-weight:
    800;

  letter-spacing:
    0.11em;

}


.affiliate-account-button__copy strong {

  max-width:
    88px;

  margin-top:
    2px;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  font-size:
    0.67rem;

}


.affiliate-account-button > i {

  color:
    var(--aff-text-muted);

  font-size:
    0.55rem;

  transition:
    transform var(--aff-normal)
    var(--aff-ease);

}


.affiliate-account-button[aria-expanded="true"]
> i {

  transform:
    rotate(180deg);

}


/* ============================================================
   15. ACCOUNT MENU
============================================================ */

.affiliate-account-menu {

  position:
    absolute;

  top:
    calc(100% + 10px);

  right:
    0;

  z-index:
    8000;

  width:
    310px;

  padding:
    9px;

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateY(-8px)
    scale(0.98);

  transform-origin:
    top right;

  border:
    1px solid rgba(255, 255, 255, 0.12);

  border-radius:
    21px;

  background:
    rgba(10, 10, 12, 0.95);

  backdrop-filter:
    blur(28px);

  box-shadow:
    var(--aff-shadow-lg);

  transition:

    opacity var(--aff-fast) ease,
    visibility var(--aff-fast) ease,
    transform var(--aff-normal)
    var(--aff-ease);

}


.affiliate-account-menu.show {

  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(0)
    scale(1);

}


.affiliate-account-menu__profile {

  padding:
    11px;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

}


.affiliate-account-menu__avatar {

  width:
    45px;

  height:
    45px;

  flex:
    0 0 45px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    14px;

  color:
    #121215;

  background:
    linear-gradient(
      135deg,
      white,
      var(--aff-cream-soft)
    );

  font-family:
    "Manrope",
    sans-serif;

  font-weight:
    800;

}


.affiliate-account-menu__profile
> span:last-child {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

}


.affiliate-account-menu__profile small {

  color:
    var(--aff-text-muted);

  font-size:
    0.44rem;

  font-weight:
    800;

  letter-spacing:
    0.12em;

}


.affiliate-account-menu__profile strong {

  margin-top:
    3px;

  max-width:
    190px;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  font-size:
    0.75rem;

}


.affiliate-account-menu__profile em {

  margin-top:
    3px;

  max-width:
    190px;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  color:
    var(--aff-text-muted);

  font-size:
    0.6rem;

  font-style:
    normal;

}


.affiliate-menu-divider {

  height:
    1px;

  margin:
    6px;

  background:
    rgba(255, 255, 255, 0.07);

}


.affiliate-menu-item {

  width:
    100%;

  min-height:
    47px;

  padding:
    0 10px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  border-radius:
    12px;

  color:
    var(--aff-text-soft);

  background:
    transparent;

  text-align:
    left;

  font-size:
    0.68rem;

  font-weight:
    650;

  transition:
    all var(--aff-fast) ease;

}


.affiliate-menu-item i {

  width:
    22px;

  color:
    var(--aff-text-muted);

}


.affiliate-menu-item:hover {

  color:
    white;

  background:
    rgba(255, 255, 255, 0.055);

  transform:
    translateX(2px);

}


/* ============================================================
   16. MAIN
============================================================ */

.affiliate-main {

  width:
    min(
      var(--aff-page),
      calc(100% - 38px)
    );

  margin:
    0 auto;

  padding:
    70px 0 0;

}


/* ============================================================
   17. PUBLIC
============================================================ */

.affiliate-public {

  width:
    100%;

}


/* ============================================================
   18. HERO
============================================================ */

.affiliate-hero {

  position:
    relative;

  min-height:
    clamp(
      680px,
      calc(100vh - 100px),
      900px
    );

  display:
    grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(500px, 1.1fr);

  align-items:
    center;

  gap:
    clamp(44px, 6vw, 100px);

  padding:
    30px 0 80px;

}


.affiliate-hero__content {

  position:
    relative;

  z-index:
    5;

  max-width:
    720px;

  animation:
    affiliateHeroCopyIn
    900ms
    var(--aff-ease)
    both;

}


.affiliate-eyebrow {

  margin-bottom:
    23px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  color:
    var(--aff-text-muted);

  font-size:
    0.6rem;

  font-weight:
    750;

  letter-spacing:
    0.14em;

}


.affiliate-eyebrow__live {

  padding:
    6px 8px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  border:
    1px solid rgba(110, 231, 164, 0.12);

  border-radius:
    var(--aff-pill);

  color:
    rgba(157, 239, 191, 0.76);

  background:
    rgba(110, 231, 164, 0.035);

}


.affiliate-eyebrow__live i {

  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    var(--aff-green);

  animation:
    affiliateStatusPulse
    2s
    ease-in-out
    infinite;

}


.affiliate-hero__title {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    clamp(3.3rem, 6vw, 6.6rem);

  line-height:
    0.9;

  letter-spacing:
    -0.085em;

  font-weight:
    700;

}


.affiliate-hero__title strong {

  color:
    white;

  font-weight:
    800;

}


.affiliate-hero__title-muted {

  color:
    rgba(255, 255, 255, 0.42);

}


.affiliate-hero__description {

  max-width:
    600px;

  margin-top:
    29px;

  color:
    var(--aff-text-soft);

  font-size:
    clamp(0.92rem, 1.3vw, 1.08rem);

  line-height:
    1.78;

  letter-spacing:
    -0.01em;

}


.affiliate-hero__actions {

  margin-top:
    34px;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  flex-wrap:
    wrap;

}


/* ============================================================
   19. BUTTONS
============================================================ */

.affiliate-primary-button {

  min-width:
    240px;

  min-height:
    64px;

  padding:
    7px 15px 7px 15px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  border-radius:
    19px;

  color:
    #111114;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #ded7cb
    );

  box-shadow:

    0 9px 0 rgba(145, 137, 124, 0.3),

    0 18px 40px rgba(255, 255, 255, 0.065);

  text-align:
    left;

  transition:
    all var(--aff-normal)
    var(--aff-ease);

}


.affiliate-primary-button:hover {

  transform:
    translateY(3px);

  box-shadow:

    0 6px 0 rgba(145, 137, 124, 0.3),

    0 13px 30px rgba(255, 255, 255, 0.06);

}


.affiliate-primary-button > span {

  display:
    flex;

  flex-direction:
    column;

}


.affiliate-primary-button small {

  font-size:
    0.43rem;

  font-weight:
    800;

  letter-spacing:
    0.13em;

  opacity:
    0.5;

}


.affiliate-primary-button strong {

  margin-top:
    3px;

  font-size:
    0.78rem;

}


.affiliate-secondary-button {

  min-height:
    62px;

  padding:
    0 17px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

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

  border-radius:
    18px;

  color:
    var(--aff-text-soft);

  background:
    rgba(255, 255, 255, 0.035);

  backdrop-filter:
    blur(15px);

  font-size:
    0.72rem;

  font-weight:
    700;

  transition:
    all var(--aff-normal)
    var(--aff-ease);

}


.affiliate-secondary-button:hover {

  color:
    white;

  transform:
    translateY(-2px);

  border-color:
    var(--aff-border-strong);

  background:
    rgba(255, 255, 255, 0.075);

}


/* ============================================================
   20. HERO TRUST
============================================================ */

.affiliate-hero__trust {

  margin-top:
    48px;

  display:
    grid;

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

  gap:
    8px;

}


.affiliate-hero__trust > div {

  min-height:
    67px;

  padding:
    10px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

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

  border-radius:
    16px;

  background:
    rgba(255, 255, 255, 0.018);

}


.affiliate-hero__trust i {

  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    10px;

  color:
    var(--aff-cream);

  background:
    rgba(255, 255, 255, 0.035);

  font-size:
    0.65rem;

}


.affiliate-hero__trust span {

  display:
    flex;

  flex-direction:
    column;

}


.affiliate-hero__trust strong {

  font-size:
    0.62rem;

}


.affiliate-hero__trust small {

  margin-top:
    2px;

  color:
    var(--aff-text-muted);

  font-size:
    0.52rem;

}


/* ============================================================
   21. HERO VISUAL
============================================================ */

.affiliate-hero__visual {

  position:
    relative;

  min-height:
    650px;

  perspective:
    1400px;

  animation:
    affiliateHeroVisualIn
    1000ms
    var(--aff-ease)
    120ms
    both;

}


.affiliate-hero-orbit {

  position:
    absolute;

  left:
    50%;

  top:
    50%;

  border:
    1px solid rgba(255, 255, 255, 0.07);

  border-radius:
    50%;

  transform:
    translate(-50%, -50%);

}


.affiliate-hero-orbit--one {

  width:
    420px;

  height:
    420px;

  animation:
    affiliateOrbit
    18s
    linear
    infinite;

}


.affiliate-hero-orbit--two {

  width:
    550px;

  height:
    550px;

  border-style:
    dashed;

  opacity:
    0.62;

  animation:
    affiliateOrbitReverse
    27s
    linear
    infinite;

}


.affiliate-hero-orbit--three {

  width:
    655px;

  height:
    655px;

  opacity:
    0.36;

}


.affiliate-hero__giant-letter {

  position:
    absolute;

  left:
    50%;

  top:
    50%;

  transform:
    translate(-50%, -50%);

  color:
    rgba(255, 255, 255, 0.022);

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    clamp(420px, 40vw, 620px);

  line-height:
    0.8;

  font-weight:
    800;

  letter-spacing:
    -0.15em;

  user-select:
    none;

}


/* ============================================================
   22. AFFILIATE PASS
============================================================ */

.affiliate-pass {

  position:
    absolute;

  z-index:
    4;

  left:
    50%;

  top:
    50%;

  width:
    min(390px, 62%);

  aspect-ratio:
    0.68;

  padding:
    26px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  overflow:
    hidden;

  border:
    1px solid rgba(255, 255, 255, 0.16);

  border-radius:
    34px;

  background:

    radial-gradient(
      circle at 20% 0%,
      rgba(255, 255, 255, 0.16),
      transparent 32%
    ),

    radial-gradient(
      circle at 85% 85%,
      rgba(166, 139, 255, 0.13),
      transparent 34%
    ),

    linear-gradient(
      150deg,
      #17171b,
      #0c0c0f
    );

  box-shadow:
    var(--aff-shadow-xl);

  transform:
    translate(-50%, -50%)
    rotateY(-8deg)
    rotateX(3deg);

  transform-style:
    preserve-3d;

  animation:
    affiliatePassFloat
    7s
    ease-in-out
    infinite;

}


.affiliate-pass::after {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  border-radius:
    inherit;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16);

  pointer-events:
    none;

}


.affiliate-pass__shine {

  position:
    absolute;

  width:
    44%;

  height:
    160%;

  left:
    3%;

  top:
    -30%;

  opacity:
    0.18;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.35),
      transparent
    );

  transform:
    rotate(22deg);

}


.affiliate-pass__top,
.affiliate-pass__bottom {

  position:
    relative;

  z-index:
    3;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

}


.affiliate-pass__top > span:first-child {

  display:
    flex;

  flex-direction:
    column;

}


.affiliate-pass__top small {

  color:
    var(--aff-text-muted);

  font-size:
    0.5rem;

  font-weight:
    700;

  letter-spacing:
    0.14em;

}


.affiliate-pass__top strong {

  margin-top:
    3px;

  font-size:
    0.83rem;

}


.affiliate-pass__logo {

  width:
    47px;

  height:
    47px;

  padding:
    9px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    15px;

  background:
    rgba(255, 255, 255, 0.045);

}


.affiliate-pass__logo img {

  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

}


.affiliate-pass__center {

  position:
    relative;

  z-index:
    3;

  display:
    flex;

  flex-direction:
    column;

}


.affiliate-pass__center > span {

  color:
    var(--aff-text-muted);

  font-size:
    0.51rem;

  font-weight:
    750;

  letter-spacing:
    0.15em;

}


.affiliate-pass__center strong {

  margin-top:
    5px;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    clamp(4rem, 7vw, 6.5rem);

  line-height:
    0.86;

  letter-spacing:
    -0.09em;

}


.affiliate-pass__center small {

  margin-top:
    10px;

  color:
    var(--aff-cream);

  font-size:
    0.52rem;

  font-weight:
    800;

  letter-spacing:
    0.13em;

}


.affiliate-pass__bottom {

  color:
    rgba(255, 255, 255, 0.3);

  font-size:
    0.49rem;

  font-weight:
    700;

  letter-spacing:
    0.13em;

}


/* ============================================================
   23. FLOATING HERO CARDS
============================================================ */

.affiliate-floating-card {

  position:
    absolute;

  z-index:
    7;

  min-height:
    70px;

  padding:
    9px 12px 9px 9px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  border:
    1px solid rgba(255, 255, 255, 0.13);

  border-radius:
    19px;

  background:
    rgba(10, 10, 12, 0.82);

  backdrop-filter:
    blur(20px);

  box-shadow:
    var(--aff-shadow-md);

}


.affiliate-floating-card__icon {

  width:
    42px;

  height:
    42px;

  flex:
    0 0 42px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    13px;

  color:
    #111114;

  background:
    linear-gradient(
      135deg,
      white,
      var(--aff-cream-soft)
    );

}


.affiliate-floating-card
> span:last-child {

  display:
    flex;

  flex-direction:
    column;

}


.affiliate-floating-card small {

  color:
    var(--aff-text-muted);

  font-size:
    0.43rem;

  font-weight:
    800;

  letter-spacing:
    0.11em;

}


.affiliate-floating-card strong {

  margin-top:
    3px;

  max-width:
    175px;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  font-size:
    0.67rem;

}


.affiliate-floating-card--one {

  left:
    0;

  top:
    18%;

  width:
    235px;

  animation:
    affiliateFloatOne
    6.2s
    ease-in-out
    infinite;

}


.affiliate-floating-card--two {

  right:
    0;

  top:
    27%;

  width:
    200px;

  animation:
    affiliateFloatTwo
    7.2s
    ease-in-out
    infinite;

}


.affiliate-floating-card--three {

  right:
    3%;

  bottom:
    13%;

  width:
    210px;

  animation:
    affiliateFloatThree
    6.6s
    ease-in-out
    infinite;

}


/* ============================================================
   24. LAUNCH PROMOTION
============================================================ */

.launch-promotion-section {

  padding-top:
    15px;

}


.launch-promotion {

  position:
    relative;

  min-height:
    200px;

  padding:
    26px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    28px;

  overflow:
    hidden;

  border:
    1px solid rgba(255, 255, 255, 0.12);

  border-radius:
    34px;

  background:

    radial-gradient(
      circle at 0% 0%,
      rgba(166, 139, 255, 0.14),
      transparent 31%
    ),

    radial-gradient(
      circle at 100% 100%,
      rgba(127, 176, 255, 0.08),
      transparent 28%
    ),

    rgba(255, 255, 255, 0.032);

  box-shadow:
    var(--aff-shadow-md);

}


.launch-promotion::after {

  content:
    "125";

  position:
    absolute;

  right:
    -30px;

  bottom:
    -58px;

  color:
    rgba(255, 255, 255, 0.025);

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    210px;

  font-weight:
    800;

  letter-spacing:
    -0.1em;

}


.launch-promotion__symbol {

  position:
    relative;

  z-index:
    2;

  width:
    124px;

  height:
    124px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    30px;

  background:

    radial-gradient(
      circle at top left,
      rgba(255, 255, 255, 0.14),
      transparent 44%
    ),

    rgba(255, 255, 255, 0.045);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

}


.launch-promotion__symbol span {

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    3.8rem;

  line-height:
    1;

  font-weight:
    800;

  letter-spacing:
    -0.09em;

}


.launch-promotion__symbol small {

  align-self:
    flex-start;

  margin-top:
    29px;

  color:
    var(--aff-cream);

  font-size:
    1rem;

  font-weight:
    800;

}


.launch-promotion__copy {

  position:
    relative;

  z-index:
    2;

}


.section-mini-label {

  color:
    var(--aff-text-muted);

  font-size:
    0.53rem;

  font-weight:
    800;

  letter-spacing:
    0.15em;

}


.launch-promotion__copy h2 {

  margin-top:
    8px;

  max-width:
    690px;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    clamp(1.7rem, 3vw, 2.8rem);

  line-height:
    1.02;

  letter-spacing:
    -0.06em;

}


.launch-promotion__copy p {

  max-width:
    680px;

  margin-top:
    10px;

  color:
    var(--aff-text-soft);

  font-size:
    0.78rem;

  line-height:
    1.68;

}


.launch-promotion__progress {

  position:
    relative;

  z-index:
    3;

  padding:
    18px;

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

  border-radius:
    21px;

  background:
    rgba(0, 0, 0, 0.16);

}


.launch-progress__header {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

}


.launch-progress__header span {

  color:
    var(--aff-text-muted);

  font-size:
    0.58rem;

}


.launch-progress__header strong {

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    0.79rem;

}


.launch-progress__track {

  height:
    7px;

  margin-top:
    13px;

  overflow:
    hidden;

  border-radius:
    var(--aff-pill);

  background:
    rgba(255, 255, 255, 0.07);

}


.launch-progress__track span {

  display:
    block;

  width:
    0;

  height:
    100%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      var(--aff-violet),
      var(--aff-blue),
      var(--aff-cyan)
    );

  box-shadow:
    0 0 18px rgba(127, 176, 255, 0.2);

  transition:
    width 800ms
    var(--aff-ease);

}


.launch-promotion__progress > small {

  display:
    block;

  margin-top:
    10px;

  color:
    var(--aff-text-muted);

  font-size:
    0.58rem;

  line-height:
    1.5;

}


/* ============================================================
   25. GENERIC SECTION HEADING
============================================================ */

.affiliate-section-heading {

  display:
    grid;

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

  align-items:
    end;

  gap:
    40px;

  margin-bottom:
    38px;

}


.affiliate-section-heading
> div:first-child {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

}


.section-number {

  margin-bottom:
    12px;

  color:
    rgba(255, 255, 255, 0.21);

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    0.62rem;

  font-weight:
    800;

}


.affiliate-section-heading h2 {

  margin-top:
    11px;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    clamp(2.5rem, 4.8vw, 5rem);

  line-height:
    0.94;

  letter-spacing:
    -0.075em;

}


.affiliate-section-heading h2 span,
.affiliate-section-heading h2 strong {

  display:
    block;

}


.affiliate-section-heading h2 strong {

  color:
    rgba(255, 255, 255, 0.43);

  font-weight:
    800;

}


.affiliate-section-heading
> p {

  color:
    var(--aff-text-soft);

  font-size:
    0.86rem;

  line-height:
    1.75;

}


/* ============================================================
   26. COMMISSION SECTION
============================================================ */

.affiliate-commission-section {

  padding-top:
    var(--aff-section-gap);

}


.affiliate-tier-grid {

  display:
    grid;

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

  gap:
    16px;

}


.affiliate-tier-card {

  position:
    relative;

  min-height:
    470px;

  padding:
    26px;

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

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

  border-radius:
    32px;

  background:
    rgba(255, 255, 255, 0.028);

  box-shadow:
    var(--aff-shadow-md);

  transition:
    all var(--aff-normal)
    var(--aff-ease);

}


.affiliate-tier-card:hover {

  transform:
    translateY(-5px);

  border-color:
    var(--aff-border-strong);

}


.affiliate-tier-card--launch {

  background:

    radial-gradient(
      circle at 18% 0%,
      rgba(166, 139, 255, 0.13),
      transparent 37%
    ),

    radial-gradient(
      circle at 95% 100%,
      rgba(127, 176, 255, 0.08),
      transparent 30%
    ),

    rgba(255, 255, 255, 0.033);

}


.affiliate-tier-card__glow {

  position:
    absolute;

  width:
    260px;

  height:
    260px;

  right:
    -100px;

  top:
    -100px;

  border-radius:
    50%;

  background:
    rgba(166, 139, 255, 0.09);

  filter:
    blur(40px);

}


.affiliate-tier-card__head {

  position:
    relative;

  z-index:
    2;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

}


.affiliate-tier-badge {

  min-height:
    34px;

  padding:
    0 10px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  border:
    1px solid rgba(166, 139, 255, 0.18);

  border-radius:
    var(--aff-pill);

  color:
    #d3c8ff;

  background:
    rgba(166, 139, 255, 0.055);

  font-size:
    0.51rem;

  font-weight:
    800;

  letter-spacing:
    0.11em;

}


.affiliate-tier-badge--standard {

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

  color:
    var(--aff-text-soft);

  background:
    rgba(255, 255, 255, 0.04);

}


.affiliate-tier-card__status {

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  color:
    var(--aff-text-muted);

  font-size:
    0.46rem;

  font-weight:
    700;

  letter-spacing:
    0.1em;

}


.affiliate-tier-card__status i {

  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    var(--aff-green);

}


.affiliate-tier-card__rate {

  position:
    relative;

  z-index:
    2;

  flex:
    1;

  margin:
    46px 0 30px;

  display:
    grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items:
    center;

  gap:
    24px;

}


.affiliate-tier-card__rate > div {

  display:
    flex;

  flex-direction:
    column;

}


.affiliate-tier-card__rate span {

  color:
    var(--aff-text-muted);

  font-size:
    0.5rem;

  font-weight:
    750;

  letter-spacing:
    0.12em;

}


.affiliate-tier-card__rate strong {

  margin-top:
    7px;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    clamp(4rem, 6vw, 6rem);

  line-height:
    0.86;

  letter-spacing:
    -0.08em;

}


.affiliate-tier-card__rate small {

  max-width:
    170px;

  margin-top:
    10px;

  color:
    var(--aff-text-muted);

  font-size:
    0.62rem;

  line-height:
    1.45;

}


.affiliate-tier-card__rate
> i {

  color:
    var(--aff-text-faint);

  font-size:
    0.7rem;

}


.affiliate-tier-card__rule {

  position:
    relative;

  z-index:
    2;

  padding:
    14px;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

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

  border-radius:
    17px;

  background:
    rgba(255, 255, 255, 0.025);

}


.affiliate-tier-card__rule i {

  margin-top:
    2px;

  color:
    var(--aff-green);

  font-size:
    0.68rem;

}


.affiliate-tier-card__rule p {

  color:
    var(--aff-text-soft);

  font-size:
    0.68rem;

  line-height:
    1.62;

}


.affiliate-tier-card__reactivation {

  position:
    relative;

  z-index:
    2;

  margin-top:
    10px;

  padding:
    14px;

  border:
    1px solid rgba(166, 139, 255, 0.1);

  border-radius:
    17px;

  background:
    rgba(166, 139, 255, 0.03);

}


.affiliate-tier-card__reactivation
> span {

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  color:
    #cbbfff;

}


.affiliate-tier-card__reactivation strong {

  font-size:
    0.5rem;

  letter-spacing:
    0.11em;

}


.affiliate-tier-card__reactivation p {

  margin-top:
    8px;

  color:
    var(--aff-text-muted);

  font-size:
    0.64rem;

  line-height:
    1.6;

}


.commission-disclaimer {

  margin-top:
    17px;

  padding:
    16px 18px;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    11px;

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

  border-radius:
    18px;

  background:
    rgba(255, 255, 255, 0.018);

}


.commission-disclaimer i {

  margin-top:
    2px;

  color:
    var(--aff-text-muted);

}


.commission-disclaimer p {

  color:
    var(--aff-text-muted);

  font-size:
    0.67rem;

  line-height:
    1.6;

}


/* ============================================================
   27. HOW IT WORKS
============================================================ */

.affiliate-how-section {

  padding-top:
    var(--aff-section-gap);

}


.affiliate-steps {

  display:
    grid;

  grid-template-columns:

    minmax(0, 1fr)
    58px
    minmax(0, 1fr)
    58px
    minmax(0, 1fr)
    58px
    minmax(0, 1fr);

  align-items:
    center;

}


.affiliate-step {

  position:
    relative;

  min-height:
    290px;

  padding:
    22px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  overflow:
    hidden;

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

  border-radius:
    28px;

  background:

    radial-gradient(
      circle at top left,
      rgba(255, 255, 255, 0.065),
      transparent 40%
    ),

    rgba(255, 255, 255, 0.024);

  transition:
    all var(--aff-normal)
    var(--aff-ease);

}


.affiliate-step:hover {

  transform:
    translateY(-5px);

  border-color:
    var(--aff-border-strong);

  background:
    rgba(255, 255, 255, 0.043);

  box-shadow:
    var(--aff-shadow-md);

}


.affiliate-step::after {

  content:
    "";

  position:
    absolute;

  width:
    150px;

  height:
    150px;

  right:
    -75px;

  top:
    -75px;

  border:
    1px solid rgba(255, 255, 255, 0.055);

  border-radius:
    50%;

}


.affiliate-step__number {

  color:
    var(--aff-text-faint);

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    0.58rem;

  font-weight:
    750;

}


.affiliate-step__icon {

  width:
    53px;

  height:
    53px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    16px;

  color:
    var(--aff-cream);

  background:
    rgba(255, 255, 255, 0.04);

}


.affiliate-step > div {

  display:
    flex;

  flex-direction:
    column;

}


.affiliate-step small {

  color:
    var(--aff-text-muted);

  font-size:
    0.47rem;

  font-weight:
    750;

  letter-spacing:
    0.13em;

}


.affiliate-step h3 {

  margin-top:
    7px;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    1.2rem;

  line-height:
    1.05;

  letter-spacing:
    -0.045em;

}


.affiliate-step p {

  margin-top:
    9px;

  color:
    var(--aff-text-muted);

  font-size:
    0.67rem;

  line-height:
    1.6;

}


.affiliate-step-connector {

  position:
    relative;

  height:
    1px;

  background:
    rgba(255, 255, 255, 0.075);

}


.affiliate-step-connector i {

  position:
    absolute;

  top:
    50%;

  left:
    0;

  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    white;

  transform:
    translateY(-50%);

  animation:
    affiliateConnectorMove
    2.7s
    ease-in-out
    infinite;

}


/* ============================================================
   28. ONBOARDING
============================================================ */

.affiliate-onboarding {

  padding-top:
    var(--aff-section-gap);

  display:
    grid;

  grid-template-columns:
    minmax(340px, 0.78fr)
    minmax(520px, 1.22fr);

  align-items:
    start;

  gap:
    clamp(40px, 6vw, 90px);

}


.affiliate-onboarding__intro {

  position:
    sticky;

  top:
    120px;

  padding-top:
    20px;

}


.affiliate-onboarding__intro h2 {

  max-width:
    560px;

  margin-top:
    12px;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    clamp(2.5rem, 4.3vw, 4.4rem);

  line-height:
    0.95;

  letter-spacing:
    -0.075em;

}


.affiliate-onboarding__intro > p {

  max-width:
    510px;

  margin-top:
    20px;

  color:
    var(--aff-text-soft);

  font-size:
    0.85rem;

  line-height:
    1.72;

}


.affiliate-onboarding__benefits {

  margin-top:
    30px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    9px;

}


.affiliate-onboarding__benefits > div {

  min-height:
    48px;

  padding:
    0 12px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

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

  border-radius:
    14px;

  background:
    rgba(255, 255, 255, 0.018);

  color:
    var(--aff-text-soft);

  font-size:
    0.68rem;

}


.affiliate-onboarding__benefits i {

  width:
    25px;

  height:
    25px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    8px;

  color:
    #111114;

  background:
    var(--aff-green);

  font-size:
    0.52rem;

}


.affiliate-onboarding__security {

  margin-top:
    20px;

  padding:
    14px;

  display:
    flex;

  gap:
    11px;

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

  border-radius:
    18px;

  background:

    radial-gradient(
      circle at top left,
      rgba(127, 176, 255, 0.07),
      transparent 40%
    ),

    rgba(255, 255, 255, 0.022);

}


.affiliate-onboarding__security > i {

  width:
    41px;

  height:
    41px;

  flex:
    0 0 41px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    12px;

  color:
    var(--aff-blue);

  background:
    rgba(127, 176, 255, 0.06);

}


.affiliate-onboarding__security
> span {

  display:
    flex;

  flex-direction:
    column;

}


.affiliate-onboarding__security strong {

  font-size:
    0.7rem;

}


.affiliate-onboarding__security small {

  margin-top:
    4px;

  color:
    var(--aff-text-muted);

  font-size:
    0.61rem;

  line-height:
    1.5;

}


/* ============================================================
   29. FORM CARD
============================================================ */

.affiliate-form-card {

  position:
    relative;

  padding:
    27px;

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

  border-radius:
    34px;

  background:

    radial-gradient(
      circle at top right,
      rgba(166, 139, 255, 0.07),
      transparent 30%
    ),

    rgba(255, 255, 255, 0.029);

  backdrop-filter:
    blur(18px);

  box-shadow:
    var(--aff-shadow-lg);

}


.affiliate-form-card__head {

  padding-bottom:
    21px;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

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

}


.affiliate-form-card__head h3 {

  margin-top:
    6px;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    1.7rem;

  letter-spacing:
    -0.05em;

}


.affiliate-form-card__secure {

  min-height:
    30px;

  padding:
    0 8px;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  border:
    1px solid rgba(110, 231, 164, 0.1);

  border-radius:
    var(--aff-pill);

  color:
    rgba(157, 239, 191, 0.7);

  background:
    rgba(110, 231, 164, 0.03);

  font-size:
    0.44rem;

  font-weight:
    800;

  letter-spacing:
    0.1em;

}


#affiliateRegistrationForm {

  padding-top:
    23px;

}


.affiliate-form-grid {

  display:
    grid;

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

  gap:
    12px;

}


.affiliate-field {

  margin-bottom:
    14px;

}


.affiliate-field--full {

  width:
    100%;

}


.affiliate-field > label {

  min-height:
    24px;

  margin-bottom:
    7px;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  color:
    var(--aff-text-soft);

  font-size:
    0.61rem;

  font-weight:
    650;

}


.affiliate-field label em {

  color:
    var(--aff-red);

  font-style:
    normal;

}


.affiliate-field label small {

  margin-left:
    auto;

  color:
    var(--aff-text-faint);

  font-size:
    0.43rem;

  font-weight:
    750;

  letter-spacing:
    0.09em;

}


.affiliate-input-shell {

  position:
    relative;

  min-height:
    57px;

  display:
    flex;

  align-items:
    center;

  overflow:
    hidden;

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

  border-radius:
    16px;

  background:
    rgba(0, 0, 0, 0.18);

  transition:

    border-color var(--aff-fast) ease,
    background var(--aff-fast) ease,
    box-shadow var(--aff-fast) ease;

}


.affiliate-input-shell:focus-within {

  border-color:
    rgba(166, 139, 255, 0.36);

  background:
    rgba(255, 255, 255, 0.035);

  box-shadow:
    0 0 0 4px rgba(166, 139, 255, 0.04);

}


.affiliate-input-shell > i:first-child {

  width:
    48px;

  flex:
    0 0 48px;

  display:
    grid;

  place-items:
    center;

  color:
    var(--aff-text-muted);

  font-size:
    0.71rem;

}


.affiliate-input-shell input,
.affiliate-input-shell select {

  width:
    100%;

  min-width:
    0;

  height:
    55px;

  padding:
    0 14px 0 0;

  border:
    0;

  outline:
    0;

  color:
    white;

  background:
    transparent;

  font-size:
    0.73rem;

}


.affiliate-input-shell input::placeholder {

  color:
    rgba(255, 255, 255, 0.3);

}


.affiliate-input-shell select {

  appearance:
    none;

  -webkit-appearance:
    none;

}


.affiliate-input-shell select option {

  color:
    white;

  background:
    #111114;

}


.affiliate-input-shell--select
> i:last-child {

  width:
    38px;

  flex:
    0 0 38px;

  color:
    var(--aff-text-muted);

  pointer-events:
    none;

  font-size:
    0.55rem;

}


.affiliate-field.is-invalid
.affiliate-input-shell {

  border-color:
    rgba(255, 121, 121, 0.38);

  box-shadow:
    0 0 0 4px rgba(255, 121, 121, 0.035);

}


.affiliate-field-error {

  min-height:
    15px;

  margin-top:
    5px;

  display:
    block;

  color:
    rgba(255, 138, 138, 0.88);

  font-size:
    0.55rem;

}


.affiliate-honeypot {

  position:
    absolute !important;

  left:
    -99999px !important;

  width:
    1px !important;

  height:
    1px !important;

  overflow:
    hidden !important;

  opacity:
    0 !important;

  pointer-events:
    none !important;

}


/* ============================================================
   30. CHECKBOXES
============================================================ */

.affiliate-checkbox {

  position:
    relative;

  margin-top:
    10px;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  color:
    var(--aff-text-muted);

  cursor:
    pointer;

  font-size:
    0.62rem;

  line-height:
    1.56;

}


.affiliate-checkbox input {

  position:
    absolute;

  width:
    20px;

  height:
    20px;

  margin:
    1px 0 0;

  z-index:
    2;

  opacity:
    0;

  pointer-events:
    auto;

  cursor:
    pointer;

}


.affiliate-checkbox__box {

  width:
    20px;

  height:
    20px;

  flex:
    0 0 20px;

  margin-top:
    1px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    6px;

  background:
    rgba(255, 255, 255, 0.03);

  transition:
    all var(--aff-fast) ease;

}


.affiliate-checkbox__box i {

  opacity:
    0;

  color:
    #111114;

  font-size:
    0.47rem;

  transform:
    scale(0.7);

  transition:
    all var(--aff-fast)
    var(--aff-ease-spring);

}


.affiliate-checkbox
input:checked
+
.affiliate-checkbox__box {

  border-color:
    transparent;

  background:
    var(--aff-cream);

}


.affiliate-checkbox
input:checked
+
.affiliate-checkbox__box i {

  opacity:
    1;

  transform:
    scale(1);

}


.affiliate-checkbox
input:focus-visible
+
.affiliate-checkbox__box {

  outline:
    2px solid white;

  outline-offset:
    3px;

}


.affiliate-inline-link {

  display:
    inline;

  padding:
    0;

  color:
    rgba(255, 255, 255, 0.82);

  background:
    transparent;

  text-decoration:
    underline;

  text-underline-offset:
    3px;

}


/* ============================================================
   31. REGISTER BUTTON
============================================================ */

.affiliate-register-button {

  width:
    100%;

  min-height:
    72px;

  margin-top:
    22px;

  padding:
    8px 9px 8px 17px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border-radius:
    20px;

  color:
    #111114;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #ddd5c8
    );

  box-shadow:

    0 9px 0 rgba(145, 137, 124, 0.3),

    0 20px 38px rgba(255, 255, 255, 0.06);

  text-align:
    left;

  transition:
    all var(--aff-normal)
    var(--aff-ease);

}


.affiliate-register-button:hover {

  transform:
    translateY(3px);

  box-shadow:

    0 6px 0 rgba(145, 137, 124, 0.3),

    0 14px 30px rgba(255, 255, 255, 0.055);

}


.affiliate-register-button:disabled {

  opacity:
    0.55;

  cursor:
    wait;

  transform:
    none;

}


.affiliate-register-button
> span:first-child {

  display:
    flex;

  flex-direction:
    column;

}


.affiliate-register-button small {

  font-size:
    0.43rem;

  font-weight:
    800;

  letter-spacing:
    0.12em;

  opacity:
    0.48;

}


.affiliate-register-button strong {

  margin-top:
    3px;

  font-size:
    0.8rem;

}


.affiliate-register-button__icon {

  width:
    48px;

  height:
    48px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    14px;

  color:
    white;

  background:
    #111114;

}


.affiliate-form-status {

  min-height:
    21px;

  margin-top:
    13px;

  color:
    var(--aff-text-muted);

  font-size:
    0.61rem;

  line-height:
    1.5;

}


.affiliate-form-status.is-error {

  color:
    var(--aff-red);

}


.affiliate-form-status.is-success {

  color:
    var(--aff-green);

}


/* ============================================================
   32. AFFILIATE ACCESS
============================================================ */

.affiliate-access {

  position:
    relative;

  min-height:
    390px;

  margin-top:
    var(--aff-section-gap);

  display:
    grid;

  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(420px, 1.2fr);

  overflow:
    hidden;

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

  border-radius:
    38px;

  background:

    radial-gradient(
      circle at 14% 20%,
      rgba(127, 176, 255, 0.07),
      transparent 30%
    ),

    rgba(255, 255, 255, 0.028);

  box-shadow:
    var(--aff-shadow-lg);

}


.affiliate-access__visual {

  position:
    relative;

  min-height:
    390px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

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

}


.affiliate-access__giant {

  position:
    absolute;

  left:
    50%;

  top:
    50%;

  color:
    rgba(255, 255, 255, 0.022);

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    clamp(4.5rem, 9vw, 9rem);

  font-weight:
    800;

  letter-spacing:
    -0.08em;

  transform:
    translate(-50%, -50%)
    rotate(-90deg);

}


.affiliate-access__graphic {

  position:
    relative;

  z-index:
    2;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

}


.affiliate-access__graphic
> span {

  width:
    70px;

  height:
    70px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    21px;

  background:
    rgba(255, 255, 255, 0.045);

  box-shadow:
    var(--aff-shadow-sm);

}


.affiliate-access__graphic
> span i {

  font-size:
    1rem;

  color:
    var(--aff-cream);

}


.affiliate-access__graphic
> i {

  color:
    var(--aff-text-faint);

  font-size:
    0.65rem;

}


.affiliate-access__content {

  padding:
    clamp(34px, 5vw, 66px);

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

}


.affiliate-access__content h2 {

  margin-top:
    10px;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    clamp(2rem, 3.6vw, 3.7rem);

  line-height:
    0.96;

  letter-spacing:
    -0.07em;

}


.affiliate-access__content
> p {

  max-width:
    570px;

  margin-top:
    17px;

  color:
    var(--aff-text-soft);

  font-size:
    0.81rem;

  line-height:
    1.7;

}


.affiliate-access-form {

  max-width:
    620px;

  margin-top:
    24px;

  display:
    grid;

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

  align-items:
    end;

  gap:
    10px;

}


.affiliate-access-form
.affiliate-field {

  margin:
    0;

}


.affiliate-access-button {

  min-height:
    57px;

  padding:
    0 18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  border-radius:
    16px;

  color:
    #101013;

  background:
    var(--aff-cream);

  font-size:
    0.68rem;

  font-weight:
    750;

  transition:
    all var(--aff-normal)
    var(--aff-ease);

}


.affiliate-access-button:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0 15px 30px rgba(255, 255, 255, 0.08);

}


.affiliate-access-button:disabled {

  opacity:
    0.55;

  cursor:
    wait;

}


.affiliate-access-status {

  min-height:
    21px;

  margin-top:
    10px;

  color:
    var(--aff-text-muted);

  font-size:
    0.6rem;

}


/* ============================================================
   33. FAQ
============================================================ */

.affiliate-faq {

  padding-top:
    var(--aff-section-gap);

}


.affiliate-faq__grid {

  display:
    grid;

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

  gap:
    10px;

}


.affiliate-faq-item {

  overflow:
    hidden;

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

  border-radius:
    19px;

  background:
    rgba(255, 255, 255, 0.022);

  transition:
    border-color var(--aff-fast) ease;

}


.affiliate-faq-item:hover,
.affiliate-faq-item.is-open {

  border-color:
    var(--aff-border-strong);

}


.affiliate-faq-question {

  width:
    100%;

  min-height:
    78px;

  padding:
    0 18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  color:
    white;

  background:
    transparent;

  text-align:
    left;

  font-size:
    0.73rem;

  font-weight:
    680;

}


.affiliate-faq-question i {

  width:
    31px;

  height:
    31px;

  flex:
    0 0 31px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    9px;

  color:
    var(--aff-text-muted);

  background:
    rgba(255, 255, 255, 0.03);

  font-size:
    0.56rem;

  transition:
    transform var(--aff-normal)
    var(--aff-ease);

}


.affiliate-faq-item.is-open
.affiliate-faq-question i {

  transform:
    rotate(45deg);

}


.affiliate-faq-answer {

  max-height:
    0;

  overflow:
    hidden;

  transition:
    max-height 450ms
    var(--aff-ease);

}


.affiliate-faq-item.is-open
.affiliate-faq-answer {

  max-height:
    230px;

}


.affiliate-faq-answer p {

  padding:
    0 18px 20px;

  color:
    var(--aff-text-muted);

  font-size:
    0.66rem;

  line-height:
    1.65;

}


/* ============================================================
   34. CREATED PANEL
============================================================ */

.affiliate-created {

  width:
    min(900px, 100%);

  margin:
    60px auto 100px;

  padding:
    clamp(32px, 5vw, 64px);

  text-align:
    center;

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

  border-radius:
    38px;

  background:

    radial-gradient(
      circle at 50% 0%,
      rgba(110, 231, 164, 0.09),
      transparent 31%
    ),

    rgba(255, 255, 255, 0.03);

  box-shadow:
    var(--aff-shadow-lg);

}


.affiliate-created__symbol {

  width:
    75px;

  height:
    75px;

  margin:
    0 auto 22px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid rgba(110, 231, 164, 0.16);

  border-radius:
    23px;

  color:
    #0e1712;

  background:
    var(--aff-green);

  box-shadow:
    0 18px 42px rgba(110, 231, 164, 0.11);

}


.affiliate-created h2 {

  margin-top:
    10px;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    clamp(2.2rem, 4vw, 4rem);

  line-height:
    0.98;

  letter-spacing:
    -0.07em;

}


.affiliate-created > p {

  max-width:
    640px;

  margin:
    17px auto 0;

  color:
    var(--aff-text-soft);

  font-size:
    0.8rem;

  line-height:
    1.72;

}


.affiliate-created__credentials {

  margin-top:
    32px;

  display:
    grid;

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

  gap:
    9px;

  text-align:
    left;

}


.affiliate-created__credentials
> div {

  min-height:
    83px;

  padding:
    15px;

  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

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

  border-radius:
    17px;

  background:
    rgba(255, 255, 255, 0.025);

}


.affiliate-created__credentials
> div > span {

  color:
    var(--aff-text-muted);

  font-size:
    0.49rem;

  font-weight:
    750;

  letter-spacing:
    0.09em;

}


.affiliate-created__credentials strong {

  margin-top:
    6px;

  padding-right:
    40px;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  font-size:
    0.71rem;

}


.affiliate-created__credentials button {

  position:
    absolute;

  right:
    11px;

  top:
    50%;

  width:
    35px;

  height:
    35px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    10px;

  color:
    var(--aff-text-soft);

  background:
    rgba(255, 255, 255, 0.035);

  transform:
    translateY(-50%);

}


.affiliate-created__link {

  grid-column:
    1 / -1;

}


.affiliate-created__actions {

  margin-top:
    25px;

  display:
    flex;

  justify-content:
    center;

  gap:
    10px;

}


/* ============================================================
   35. DASHBOARD ROOT
============================================================ */

.affiliate-dashboard {

  padding:
    30px 0 80px;

}


/* ============================================================
   36. DASHBOARD HERO
============================================================ */

.affiliate-dashboard__hero {

  min-height:
    300px;

  padding:
    clamp(32px, 5vw, 60px);

  display:
    grid;

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

  align-items:
    end;

  gap:
    35px;

  overflow:
    hidden;

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

  border-radius:
    38px;

  background:

    radial-gradient(
      circle at 12% 0%,
      rgba(166, 139, 255, 0.11),
      transparent 33%
    ),

    radial-gradient(
      circle at 90% 80%,
      rgba(127, 176, 255, 0.07),
      transparent 31%
    ),

    rgba(255, 255, 255, 0.028);

  box-shadow:
    var(--aff-shadow-lg);

}


.dashboard-eyebrow {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  color:
    var(--aff-text-muted);

  font-size:
    0.53rem;

  font-weight:
    750;

  letter-spacing:
    0.13em;

}


.dashboard-eyebrow__status {

  padding:
    6px 8px;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  border:
    1px solid rgba(110, 231, 164, 0.1);

  border-radius:
    var(--aff-pill);

  color:
    rgba(159, 238, 191, 0.72);

  background:
    rgba(110, 231, 164, 0.03);

}


.dashboard-eyebrow__status i {

  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    var(--aff-green);

}


.affiliate-dashboard__hero h1 {

  margin-top:
    15px;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    clamp(3rem, 5.6vw, 5.8rem);

  line-height:
    0.91;

  letter-spacing:
    -0.08em;

}


.affiliate-dashboard__hero h1
span,
.affiliate-dashboard__hero h1
strong {

  display:
    block;

}


.affiliate-dashboard__hero h1
span {

  color:
    rgba(255, 255, 255, 0.47);

  font-weight:
    650;

}


.affiliate-dashboard__hero
> div:first-child > p {

  max-width:
    600px;

  margin-top:
    17px;

  color:
    var(--aff-text-soft);

  font-size:
    0.8rem;

  line-height:
    1.7;

}


.dashboard-tier-card {

  min-width:
    245px;

  padding:
    21px;

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

  border-radius:
    24px;

  background:
    rgba(255, 255, 255, 0.04);

  box-shadow:
    var(--aff-shadow-sm);

}


.dashboard-tier-card__label {

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  color:
    var(--aff-text-muted);

  font-size:
    0.47rem;

  font-weight:
    750;

  letter-spacing:
    0.11em;

}


.dashboard-tier-card__label i {

  color:
    var(--aff-violet);

}


.dashboard-tier-card > strong {

  display:
    block;

  margin-top:
    10px;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    1.75rem;

  letter-spacing:
    -0.05em;

}


.dashboard-tier-card > small {

  display:
    block;

  margin-top:
    6px;

  color:
    var(--aff-text-muted);

  font-size:
    0.61rem;

}


/* ============================================================
   37. DASHBOARD NAVIGATION
============================================================ */

.dashboard-navigation {

  position:
    sticky;

  top:
    102px;

  z-index:
    4000;

  width:
    fit-content;

  max-width:
    100%;

  margin:
    17px auto 0;

  padding:
    5px;

  display:
    flex;

  align-items:
    center;

  gap:
    3px;

  overflow-x:
    auto;

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

  border-radius:
    18px;

  background:
    rgba(9, 9, 11, 0.84);

  backdrop-filter:
    blur(24px);

  box-shadow:
    var(--aff-shadow-sm);

}


.dashboard-navigation__item {

  min-height:
    43px;

  padding:
    0 14px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  border-radius:
    13px;

  color:
    var(--aff-text-muted);

  background:
    transparent;

  white-space:
    nowrap;

  font-size:
    0.65rem;

  font-weight:
    680;

  transition:
    all var(--aff-fast) ease;

}


.dashboard-navigation__item:hover {

  color:
    white;

  background:
    rgba(255, 255, 255, 0.04);

}


.dashboard-navigation__item.is-active {

  color:
    #111114;

  background:
    var(--aff-cream);

}


/* ============================================================
   38. DASHBOARD PANELS
============================================================ */

.dashboard-panel {

  padding-top:
    32px;

  animation:
    affiliatePanelIn
    400ms
    var(--aff-ease)
    both;

}


.dashboard-panel:not(.is-active) {

  display:
    none;

}


.dashboard-panel.is-active {

  display:
    block;

}


/* ============================================================
   39. METRICS
============================================================ */

.dashboard-metrics {

  display:
    grid;

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

  gap:
    11px;

}


.dashboard-metric-card {

  min-height:
    188px;

  padding:
    18px;

  display:
    flex;

  flex-direction:
    column;

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

  border-radius:
    24px;

  background:

    radial-gradient(
      circle at top left,
      rgba(255, 255, 255, 0.06),
      transparent 44%
    ),

    rgba(255, 255, 255, 0.024);

  transition:
    all var(--aff-normal)
    var(--aff-ease);

}


.dashboard-metric-card:hover {

  transform:
    translateY(-4px);

  border-color:
    var(--aff-border-strong);

  box-shadow:
    var(--aff-shadow-sm);

}


.dashboard-metric-card--money {

  background:

    radial-gradient(
      circle at top right,
      rgba(110, 231, 164, 0.075),
      transparent 40%
    ),

    rgba(255, 255, 255, 0.025);

}


.dashboard-metric-card__head {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

}


.dashboard-metric-card__icon {

  width:
    42px;

  height:
    42px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    13px;

  color:
    var(--aff-cream);

  background:
    rgba(255, 255, 255, 0.04);

}


.dashboard-metric-card__period {

  color:
    var(--aff-text-faint);

  font-size:
    0.48rem;

  font-weight:
    750;

}


.dashboard-metric-card
> span:nth-of-type(1) {

  margin-top:
    22px;

  color:
    var(--aff-text-muted);

  font-size:
    0.58rem;

}


.dashboard-metric-card
> strong {

  margin-top:
    6px;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    clamp(2rem, 3vw, 3rem);

  line-height:
    1;

  letter-spacing:
    -0.065em;

}


.dashboard-metric-card
> small {

  margin-top:
    auto;

  padding-top:
    12px;

  color:
    var(--aff-text-faint);

  font-size:
    0.55rem;

}


/* ============================================================
   40. DASHBOARD GRIDS
============================================================ */

.dashboard-overview-grid {

  margin-top:
    12px;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(340px, 0.8fr);

  gap:
    12px;

}


.dashboard-overview-grid--lower {

  grid-template-columns:
    minmax(0, 1.3fr)
    minmax(320px, 0.7fr);

}


/* ============================================================
   41. DASHBOARD CARD
============================================================ */

.dashboard-card {

  position:
    relative;

  padding:
    22px;

  overflow:
    hidden;

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

  border-radius:
    26px;

  background:
    rgba(255, 255, 255, 0.026);

  box-shadow:
    var(--aff-shadow-sm);

}


.dashboard-card__header {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    18px;

}


.dashboard-card__header
> div {

  min-width:
    0;

}


.dashboard-card__eyebrow {

  color:
    var(--aff-text-muted);

  font-size:
    0.49rem;

  font-weight:
    750;

  letter-spacing:
    0.13em;

}


.dashboard-card__header h2 {

  margin-top:
    6px;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    1.35rem;

  letter-spacing:
    -0.045em;

}


.dashboard-card__header-icon {

  width:
    43px;

  height:
    43px;

  flex:
    0 0 43px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    13px;

  color:
    var(--aff-cream);

  background:
    rgba(255, 255, 255, 0.04);

}


/* ============================================================
   42. REFERRAL CARD
============================================================ */

.dashboard-referral-card {

  min-height:
    380px;

  background:

    radial-gradient(
      circle at 90% 0%,
      rgba(127, 176, 255, 0.07),
      transparent 35%
    ),

    rgba(255, 255, 255, 0.026);

}


.dashboard-referral-card > p {

  max-width:
    650px;

  margin-top:
    16px;

  color:
    var(--aff-text-soft);

  font-size:
    0.7rem;

  line-height:
    1.65;

}


.dashboard-referral-link {

  min-height:
    82px;

  margin-top:
    23px;

  padding:
    13px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

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

  border-radius:
    18px;

  background:
    rgba(0, 0, 0, 0.2);

}


.dashboard-referral-link > div {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

}


.dashboard-referral-link small {

  color:
    var(--aff-text-muted);

  font-size:
    0.45rem;

  font-weight:
    750;

  letter-spacing:
    0.1em;

}


.dashboard-referral-link strong {

  margin-top:
    5px;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    0.75rem;

}


.dashboard-copy-button {

  width:
    44px;

  height:
    44px;

  flex:
    0 0 44px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    13px;

  color:
    white;

  background:
    rgba(255, 255, 255, 0.04);

  transition:
    all var(--aff-fast) ease;

}


.dashboard-copy-button:hover {

  color:
    #111114;

  background:
    var(--aff-cream);

}


.dashboard-referral-actions {

  margin-top:
    10px;

  display:
    grid;

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

  gap:
    8px;

}


.dashboard-action-button {

  min-height:
    49px;

  padding:
    0 14px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

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

  border-radius:
    14px;

  color:
    var(--aff-text-soft);

  background:
    rgba(255, 255, 255, 0.03);

  font-size:
    0.64rem;

  font-weight:
    680;

  transition:
    all var(--aff-fast) ease;

}


.dashboard-action-button:hover {

  color:
    white;

  transform:
    translateY(-2px);

  background:
    rgba(255, 255, 255, 0.07);

}


.dashboard-action-button--primary {

  color:
    #111114;

  border-color:
    transparent;

  background:
    var(--aff-cream);

}


.dashboard-action-button--primary:hover {

  color:
    #111114;

  background:
    white;

}


.dashboard-affiliate-code {

  min-height:
    63px;

  margin-top:
    9px;

  padding:
    10px 12px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  border:
    1px dashed rgba(255, 255, 255, 0.11);

  border-radius:
    15px;

}


.dashboard-affiliate-code > span {

  display:
    flex;

  flex-direction:
    column;

}


.dashboard-affiliate-code small {

  color:
    var(--aff-text-muted);

  font-size:
    0.43rem;

  font-weight:
    750;

  letter-spacing:
    0.1em;

}


.dashboard-affiliate-code strong {

  margin-top:
    4px;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    0.74rem;

  letter-spacing:
    0.03em;

}


.dashboard-affiliate-code button {

  width:
    35px;

  height:
    35px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    10px;

  color:
    var(--aff-text-muted);

  background:
    rgba(255, 255, 255, 0.04);

}


/* ============================================================
   43. LAUNCH CARD
============================================================ */

.dashboard-launch-card {

  min-height:
    380px;

  background:

    radial-gradient(
      circle at 100% 0%,
      rgba(166, 139, 255, 0.11),
      transparent 40%
    ),

    rgba(255, 255, 255, 0.027);

}


.dashboard-launch-status {

  min-height:
    70px;

  margin-top:
    21px;

  padding:
    11px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

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

  border-radius:
    17px;

  background:
    rgba(255, 255, 255, 0.025);

}


.dashboard-launch-status__icon {

  width:
    43px;

  height:
    43px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    13px;

  color:
    var(--aff-yellow);

  background:
    rgba(240, 212, 120, 0.06);

}


.dashboard-launch-status
> span:last-child {

  display:
    flex;

  flex-direction:
    column;

}


.dashboard-launch-status small {

  color:
    var(--aff-text-muted);

  font-size:
    0.43rem;

  font-weight:
    750;

  letter-spacing:
    0.09em;

}


.dashboard-launch-status strong {

  margin-top:
    4px;

  font-size:
    0.7rem;

}


.dashboard-launch-rule {

  margin-top:
    10px;

  padding:
    12px;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

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

  border-radius:
    15px;

}


.dashboard-launch-rule > span {

  color:
    var(--aff-violet);

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    0.55rem;

  font-weight:
    800;

}


.dashboard-launch-rule p {

  color:
    var(--aff-text-muted);

  font-size:
    0.62rem;

  line-height:
    1.55;

}


.dashboard-launch-progress {

  margin-top:
    12px;

}


.dashboard-launch-progress
> div:first-child {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

}


.dashboard-launch-progress
span {

  color:
    var(--aff-text-muted);

  font-size:
    0.55rem;

}


.dashboard-launch-progress
strong {

  font-size:
    0.66rem;

}


.dashboard-launch-progress__track {

  height:
    5px;

  margin-top:
    9px;

  overflow:
    hidden;

  border-radius:
    var(--aff-pill);

  background:
    rgba(255, 255, 255, 0.07);

}


.dashboard-launch-progress__track
span {

  display:
    block;

  width:
    0;

  height:
    100%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      var(--aff-violet),
      var(--aff-blue)
    );

  transition:
    width 800ms
    var(--aff-ease);

}


.dashboard-launch-rates {

  margin-top:
    15px;

  display:
    grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items:
    center;

  gap:
    12px;

}


.dashboard-launch-rates
> span {

  padding:
    11px;

  display:
    flex;

  flex-direction:
    column;

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

  border-radius:
    14px;

  background:
    rgba(255, 255, 255, 0.022);

}


.dashboard-launch-rates small {

  color:
    var(--aff-text-muted);

  font-size:
    0.4rem;

  font-weight:
    750;

  letter-spacing:
    0.09em;

}


.dashboard-launch-rates strong {

  margin-top:
    5px;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    1.35rem;

}


.dashboard-launch-rates
> i {

  color:
    var(--aff-text-faint);

  font-size:
    0.6rem;

}


/* ============================================================
   44. ACTIVITY
============================================================ */

.dashboard-activity-card {

  min-height:
    310px;

}


.dashboard-text-button {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  color:
    var(--aff-text-muted);

  background:
    transparent;

  font-size:
    0.6rem;

  font-weight:
    650;

}


.dashboard-text-button:hover {

  color:
    white;

}


.dashboard-activity-list {

  margin-top:
    18px;

}


/* ============================================================
   45. EMPTY STATE
============================================================ */

.dashboard-empty-state {

  min-height:
    260px;

  padding:
    24px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

}


.dashboard-empty-state--compact {

  min-height:
    200px;

}


.dashboard-empty-state > span {

  width:
    56px;

  height:
    56px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    17px;

  color:
    var(--aff-text-muted);

  background:
    rgba(255, 255, 255, 0.025);

}


.dashboard-empty-state strong {

  margin-top:
    14px;

  font-size:
    0.72rem;

}


.dashboard-empty-state p {

  max-width:
    360px;

  margin-top:
    7px;

  color:
    var(--aff-text-muted);

  font-size:
    0.61rem;

  line-height:
    1.55;

}


/* ============================================================
   46. EARNINGS
============================================================ */

.dashboard-earnings-card {

  min-height:
    310px;

}


.dashboard-balance {

  margin-top:
    26px;

  display:
    flex;

  flex-direction:
    column;

}


.dashboard-balance small {

  color:
    var(--aff-text-muted);

  font-size:
    0.45rem;

  font-weight:
    750;

  letter-spacing:
    0.1em;

}


.dashboard-balance strong {

  margin-top:
    8px;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    clamp(2.7rem, 4vw, 4rem);

  line-height:
    0.9;

  letter-spacing:
    -0.07em;

}


.dashboard-balance
> span:last-child {

  margin-top:
    8px;

  color:
    var(--aff-text-muted);

  font-size:
    0.52rem;

  font-weight:
    750;

}


.dashboard-balance-breakdown {

  margin:
    21px 0 13px;

  display:
    grid;

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

  gap:
    8px;

}


.dashboard-balance-breakdown
> span {

  min-height:
    65px;

  padding:
    11px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

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

  border-radius:
    14px;

  background:
    rgba(255, 255, 255, 0.022);

}


.dashboard-balance-breakdown small {

  color:
    var(--aff-text-muted);

  font-size:
    0.47rem;

}


.dashboard-balance-breakdown strong {

  margin-top:
    4px;

  font-size:
    0.75rem;

}


/* ============================================================
   47. PANEL HEADING
============================================================ */

.dashboard-panel-heading {

  min-height:
    105px;

  padding:
    6px 2px 22px;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    30px;

}


.dashboard-panel-heading h2 {

  margin-top:
    6px;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    clamp(2rem, 3.8vw, 3.6rem);

  letter-spacing:
    -0.065em;

}


.dashboard-panel-heading p {

  max-width:
    620px;

  margin-top:
    8px;

  color:
    var(--aff-text-muted);

  font-size:
    0.69rem;

  line-height:
    1.6;

}


.dashboard-panel-heading__actions {

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

}


/* ============================================================
   48. SEARCH + SELECT
============================================================ */

.dashboard-search {

  min-width:
    245px;

  min-height:
    45px;

  padding:
    0 12px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

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

  border-radius:
    13px;

  background:
    rgba(255, 255, 255, 0.03);

}


.dashboard-search i {

  color:
    var(--aff-text-muted);

  font-size:
    0.62rem;

}


.dashboard-search input {

  width:
    100%;

  border:
    0;

  outline:
    0;

  color:
    white;

  background:
    transparent;

  font-size:
    0.66rem;

}


.dashboard-search input::placeholder {

  color:
    var(--aff-text-faint);

}


.dashboard-select {

  min-height:
    45px;

  padding:
    0 34px 0 12px;

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

  border-radius:
    13px;

  color:
    var(--aff-text-soft);

  background:
    #101013;

  outline:
    0;

  font-size:
    0.64rem;

}


/* ============================================================
   49. TABLE CARD
============================================================ */

.dashboard-table-card {

  overflow:
    hidden;

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

  border-radius:
    24px;

  background:
    rgba(255, 255, 255, 0.023);

  box-shadow:
    var(--aff-shadow-sm);

}


.dashboard-table-scroll {

  overflow-x:
    auto;

}


.dashboard-table {

  width:
    100%;

  min-width:
    880px;

  border-collapse:
    collapse;

  border-spacing:
    0;

}


.dashboard-table th {

  height:
    54px;

  padding:
    0 16px;

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

  color:
    var(--aff-text-muted);

  background:
    rgba(255, 255, 255, 0.018);

  text-align:
    left;

  white-space:
    nowrap;

  font-size:
    0.48rem;

  font-weight:
    750;

  letter-spacing:
    0.09em;

}


.dashboard-table td {

  min-height:
    64px;

  padding:
    14px 16px;

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

  color:
    var(--aff-text-soft);

  font-size:
    0.64rem;

  vertical-align:
    middle;

}


.dashboard-table tr:last-child td {

  border-bottom:
    0;

}


.dashboard-table tbody tr:not(.dashboard-empty-row) {

  transition:
    background var(--aff-fast) ease;

}


.dashboard-table tbody
tr:not(.dashboard-empty-row):hover {

  background:
    rgba(255, 255, 255, 0.025);

}


.dashboard-empty-row td {

  padding:
    0;

}


/* ============================================================
   50. TABLE BADGES
============================================================ */

.table-status {

  min-height:
    27px;

  padding:
    0 8px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

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

  border-radius:
    var(--aff-pill);

  color:
    var(--aff-text-muted);

  background:
    rgba(255, 255, 255, 0.025);

  font-size:
    0.51rem;

  font-weight:
    680;

}


.table-status::before {

  content:
    "";

  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    currentColor;

}


.table-status--active {

  color:
    var(--aff-green);

  border-color:
    rgba(110, 231, 164, 0.12);

  background:
    rgba(110, 231, 164, 0.035);

}


.table-status--pending {

  color:
    var(--aff-yellow);

  border-color:
    rgba(240, 212, 120, 0.12);

  background:
    rgba(240, 212, 120, 0.03);

}


.table-status--inactive {

  color:
    var(--aff-text-muted);

}


.table-status--failed {

  color:
    var(--aff-red);

  border-color:
    rgba(255, 121, 121, 0.12);

  background:
    rgba(255, 121, 121, 0.03);

}


/* ============================================================
   51. COMMISSION SUMMARY
============================================================ */

.commission-summary-grid {

  margin-bottom:
    11px;

  display:
    grid;

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

  gap:
    9px;

}


.commission-summary-grid article {

  min-height:
    115px;

  padding:
    17px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

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

  border-radius:
    19px;

  background:
    rgba(255, 255, 255, 0.024);

}


.commission-summary-grid small {

  color:
    var(--aff-text-muted);

  font-size:
    0.46rem;

  font-weight:
    750;

  letter-spacing:
    0.1em;

}


.commission-summary-grid strong {

  margin-top:
    7px;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    1.55rem;

  letter-spacing:
    -0.05em;

}


/* ============================================================
   52. DASHBOARD SUBSECTION
============================================================ */

.dashboard-subsection-heading {

  margin:
    34px 0 15px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

}


.dashboard-subsection-heading h3 {

  margin-top:
    5px;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    1.4rem;

  letter-spacing:
    -0.04em;

}


/* ============================================================
   53. REFERRAL TOOLS
============================================================ */

.referral-tools-grid {

  display:
    grid;

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

  gap:
    11px;

}


.referral-tool-card {

  min-height:
    260px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

}


.referral-tool-card__icon {

  width:
    49px;

  height:
    49px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    15px;

  color:
    var(--aff-cream);

  background:
    rgba(255, 255, 255, 0.045);

}


.referral-tool-card > small {

  margin-top:
    23px;

  color:
    var(--aff-text-muted);

  font-size:
    0.46rem;

  font-weight:
    750;

  letter-spacing:
    0.1em;

}


.referral-tool-card h3 {

  margin-top:
    6px;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    1.2rem;

  line-height:
    1.05;

  letter-spacing:
    -0.04em;

}


.referral-tool-card > p {

  margin-top:
    10px;

  color:
    var(--aff-text-muted);

  font-size:
    0.65rem;

  line-height:
    1.55;

}


.referral-tool-card
.dashboard-action-button {

  margin-top:
    auto;

}


.referral-tool-value {

  width:
    100%;

  min-height:
    59px;

  margin-top:
    auto;

  padding:
    10px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

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

  border-radius:
    14px;

  background:
    rgba(0, 0, 0, 0.18);

}


.referral-tool-value span {

  min-width:
    0;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  font-size:
    0.65rem;

}


.referral-tool-value button {

  width:
    35px;

  height:
    35px;

  flex:
    0 0 35px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    10px;

  color:
    var(--aff-text-muted);

  background:
    rgba(255, 255, 255, 0.04);

}


.affiliate-share-builder {

  margin-top:
    11px;

}


.affiliate-share-options {

  margin-top:
    20px;

  display:
    grid;

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

  gap:
    8px;

}


.affiliate-share-options button {

  min-height:
    68px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

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

  border-radius:
    16px;

  color:
    var(--aff-text-soft);

  background:
    rgba(255, 255, 255, 0.025);

  font-size:
    0.64rem;

  font-weight:
    650;

  transition:
    all var(--aff-fast) ease;

}


.affiliate-share-options button:hover {

  color:
    white;

  transform:
    translateY(-3px);

  background:
    rgba(255, 255, 255, 0.065);

}


/* ============================================================
   54. ACCOUNT GRID
============================================================ */

.affiliate-account-grid {

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(320px, 0.85fr);

  gap:
    11px;

}


.affiliate-profile-card,
.affiliate-payout-setup {

  min-height:
    385px;

}


.affiliate-profile-data {

  margin-top:
    22px;

  display:
    grid;

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

  gap:
    8px;

}


.affiliate-profile-data div {

  min-height:
    77px;

  padding:
    13px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

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

  border-radius:
    14px;

  background:
    rgba(255, 255, 255, 0.021);

}


.affiliate-profile-data dt {

  color:
    var(--aff-text-muted);

  font-size:
    0.48rem;

  font-weight:
    750;

  letter-spacing:
    0.07em;

}


.affiliate-profile-data dd {

  margin-top:
    5px;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  font-size:
    0.67rem;

}


.affiliate-payout-status {

  min-height:
    78px;

  margin-top:
    24px;

  padding:
    12px;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

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

  border-radius:
    17px;

  background:
    rgba(255, 255, 255, 0.025);

}


.affiliate-payout-status__icon {

  width:
    46px;

  height:
    46px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    14px;

  color:
    var(--aff-yellow);

  background:
    rgba(240, 212, 120, 0.055);

}


.affiliate-payout-status
> span:last-child {

  display:
    flex;

  flex-direction:
    column;

}


.affiliate-payout-status small {

  color:
    var(--aff-text-muted);

  font-size:
    0.45rem;

  font-weight:
    750;

  letter-spacing:
    0.1em;

}


.affiliate-payout-status strong {

  margin-top:
    4px;

  font-size:
    0.7rem;

}


.affiliate-payout-setup > p {

  margin:
    21px 0;

  color:
    var(--aff-text-muted);

  font-size:
    0.66rem;

  line-height:
    1.62;

}


.affiliate-security-card {

  margin-top:
    11px;

}


.affiliate-security-card > p {

  max-width:
    700px;

  margin:
    17px 0;

  color:
    var(--aff-text-muted);

  font-size:
    0.67rem;

  line-height:
    1.6;

}


/* ============================================================
   55. FOOTER
============================================================ */

.affiliate-footer {

  width:
    min(
      var(--aff-page),
      calc(100% - 38px)
    );

  margin:
    var(--aff-section-gap)
    auto
    0;

  padding-bottom:
    34px;

}


.affiliate-footer__main {

  padding:
    31px 0;

  display:
    grid;

  grid-template-columns:
    1.5fr
    repeat(3, 0.7fr);

  gap:
    10px;

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

}


.affiliate-footer__brand,
.affiliate-footer__column {

  padding:
    19px;

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

  border-radius:
    19px;

  background:
    rgba(255, 255, 255, 0.016);

}


.affiliate-footer__brand > a {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

}


.affiliate-footer__brand
> a > span:first-child {

  width:
    41px;

  height:
    41px;

  padding:
    8px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    13px;

  background:
    rgba(255, 255, 255, 0.04);

}


.affiliate-footer__brand img {

  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

}


.affiliate-footer__brand
> a > span:last-child {

  display:
    flex;

  flex-direction:
    column;

}


.affiliate-footer__brand strong {

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    0.85rem;

}


.affiliate-footer__brand small {

  margin-top:
    2px;

  color:
    var(--aff-text-muted);

  font-size:
    0.43rem;

  letter-spacing:
    0.1em;

}


.affiliate-footer__brand > p {

  max-width:
    400px;

  margin-top:
    16px;

  color:
    var(--aff-text-muted);

  font-size:
    0.64rem;

  line-height:
    1.6;

}


.affiliate-footer__column {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    10px;

}


.affiliate-footer__column
> strong {

  margin-bottom:
    5px;

  color:
    var(--aff-text-muted);

  font-size:
    0.49rem;

  letter-spacing:
    0.12em;

}


.affiliate-footer__column a,
.affiliate-footer__column button {

  padding:
    0;

  color:
    rgba(255, 255, 255, 0.63);

  background:
    transparent;

  font-size:
    0.64rem;

  transition:
    all var(--aff-fast) ease;

}


.affiliate-footer__column a:hover,
.affiliate-footer__column button:hover {

  color:
    white;

  transform:
    translateX(3px);

}


.affiliate-footer__bottom {

  min-height:
    65px;

  display:
    grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items:
    center;

  gap:
    20px;

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

  color:
    var(--aff-text-faint);

  font-size:
    0.52rem;

  font-weight:
    650;

  letter-spacing:
    0.06em;

}


.affiliate-footer__bottom
span:nth-child(2) {

  text-align:
    center;

}


.affiliate-footer__bottom
span:last-child {

  text-align:
    right;

}


/* ============================================================
   56. MODAL BASE
============================================================ */

.affiliate-modal {

  position:
    fixed;

  inset:
    0;

  z-index:
    30000;

  width:
    100vw;

  height:
    100dvh;

  padding:
    20px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

}


.affiliate-modal__backdrop {

  position:
    absolute;

  inset:
    0;

  background:
    rgba(3, 3, 5, 0.82);

  backdrop-filter:
    blur(22px);

}


.affiliate-modal__card {

  position:
    relative;

  z-index:
    2;

  width:
    min(560px, 100%);

  max-height:
    calc(100dvh - 30px);

  padding:
    18px;

  overflow-y:
    auto;

  border:
    1px solid rgba(255, 255, 255, 0.13);

  border-radius:
    29px;

  background:
    rgba(12, 12, 15, 0.96);

  box-shadow:
    var(--aff-shadow-xl);

  animation:
    affiliateModalIn
    380ms
    var(--aff-ease)
    both;

}


.affiliate-modal__header {

  padding:
    6px 6px 16px;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

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

}


.affiliate-modal__header h2 {

  margin-top:
    5px;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    1.45rem;

  letter-spacing:
    -0.05em;

}


.affiliate-modal__close {

  width:
    41px;

  height:
    41px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    13px;

  color:
    white;

  background:
    rgba(255, 255, 255, 0.04);

  transition:
    all var(--aff-fast) ease;

}


.affiliate-modal__close:hover {

  transform:
    rotate(5deg);

  background:
    rgba(255, 255, 255, 0.08);

}


/* ============================================================
   57. LANGUAGE MODAL
============================================================ */

.affiliate-language-modal {

  width:
    min(580px, 100%);

}


.affiliate-language-current {

  min-height:
    72px;

  margin:
    13px 0;

  padding:
    11px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  border:
    1px solid rgba(166, 139, 255, 0.1);

  border-radius:
    17px;

  background:
    rgba(166, 139, 255, 0.035);

}


.affiliate-language-current > i {

  width:
    44px;

  height:
    44px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    13px;

  color:
    #111114;

  background:
    var(--aff-cream);

}


.affiliate-language-current > span {

  display:
    flex;

  flex-direction:
    column;

}


.affiliate-language-current small {

  color:
    var(--aff-text-muted);

  font-size:
    0.44rem;

  font-weight:
    750;

  letter-spacing:
    0.1em;

}


.affiliate-language-current strong {

  margin-top:
    4px;

  font-size:
    0.7rem;

}


.affiliate-language-grid {

  display:
    grid;

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

  gap:
    7px;

}


.affiliate-language-grid button {

  min-height:
    68px;

  padding:
    8px;

  display:
    grid;

  grid-template-columns:
    40px
    1fr;

  align-items:
    center;

  gap:
    9px;

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

  border-radius:
    16px;

  color:
    white;

  background:
    rgba(255, 255, 255, 0.025);

  text-align:
    left;

  transition:
    all var(--aff-fast) ease;

}


.affiliate-language-grid button:hover {

  transform:
    translateY(-2px);

  border-color:
    var(--aff-border-strong);

  background:
    rgba(255, 255, 255, 0.055);

}


.affiliate-language-grid button.is-selected,
.affiliate-language-grid button[aria-pressed="true"] {
  border-color: rgba(238, 233, 223, 0.42);
  background: rgba(238, 233, 223, 0.09);
  box-shadow: inset 0 0 0 1px rgba(238, 233, 223, 0.05);
}


.affiliate-language-grid
button > span:first-child {

  width:
    40px;

  height:
    40px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    11px;

  background:
    rgba(255, 255, 255, 0.03);

  font-size:
    1.08rem;

}


.affiliate-language-grid
button > span:last-child {

  display:
    flex;

  flex-direction:
    column;

}


.affiliate-language-grid strong {

  font-size:
    0.68rem;

}


.affiliate-language-grid small {

  margin-top:
    2px;

  color:
    var(--aff-text-muted);

  font-size:
    0.53rem;

}


/* ============================================================
   58. TERMS MODAL
============================================================ */

.affiliate-terms-modal {

  width:
    min(700px, 100%);

}


.affiliate-terms-content {

  padding:
    10px 3px 0;

}


.affiliate-terms-content
> div {

  padding:
    16px 6px;

  display:
    grid;

  grid-template-columns:
    35px
    1fr;

  gap:
    11px;

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

}


.affiliate-terms-content
> div > span {

  color:
    var(--aff-text-faint);

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    0.54rem;

  font-weight:
    750;

}


.affiliate-terms-content h3 {

  font-size:
    0.75rem;

}


.affiliate-terms-content p {

  margin-top:
    6px;

  color:
    var(--aff-text-muted);

  font-size:
    0.64rem;

  line-height:
    1.62;

}


.affiliate-terms-modal__footer {

  padding-top:
    16px;

  display:
    flex;

  justify-content:
    flex-end;

}


/* ============================================================
   59. MESSAGE MODAL
============================================================ */

.affiliate-message-modal {

  width:
    min(480px, 100%);

  padding:
    34px;

  text-align:
    center;

}


.affiliate-message-modal__icon {

  width:
    68px;

  height:
    68px;

  margin:
    0 auto 20px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid rgba(127, 176, 255, 0.12);

  border-radius:
    21px;

  color:
    var(--aff-blue);

  background:
    rgba(127, 176, 255, 0.05);

  font-size:
    1.1rem;

}


.affiliate-message-modal h2 {

  margin-top:
    7px;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    2rem;

  letter-spacing:
    -0.06em;

}


.affiliate-message-modal p {

  max-width:
    380px;

  margin:
    12px auto 24px;

  color:
    var(--aff-text-muted);

  font-size:
    0.67rem;

  line-height:
    1.62;

}


.affiliate-message-modal
.affiliate-primary-button {

  margin:
    0 auto;

}


/* ============================================================
   60. TOAST
============================================================ */

.affiliate-toast {

  position:
    fixed;

  right:
    18px;

  bottom:
    18px;

  z-index:
    40000;

  width:
    min(360px, calc(100vw - 28px));

  min-height:
    73px;

  padding:
    10px;

  display:
    grid;

  grid-template-columns:
    43px
    1fr
    33px;

  align-items:
    center;

  gap:
    9px;

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateY(18px)
    scale(0.97);

  border:
    1px solid rgba(255, 255, 255, 0.13);

  border-radius:
    19px;

  background:
    rgba(10, 10, 12, 0.95);

  backdrop-filter:
    blur(22px);

  box-shadow:
    var(--aff-shadow-lg);

  transition:

    opacity var(--aff-normal) ease,
    visibility var(--aff-normal) ease,
    transform var(--aff-normal)
    var(--aff-ease);

}


.affiliate-toast.is-visible {

  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(0)
    scale(1);

}


.affiliate-toast__icon {

  width:
    43px;

  height:
    43px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    13px;

  background:
    rgba(255, 255, 255, 0.04);

}


.affiliate-toast[data-type="success"]
.affiliate-toast__icon {

  color:
    var(--aff-green);

}


.affiliate-toast[data-type="error"]
.affiliate-toast__icon {

  color:
    var(--aff-red);

}


.affiliate-toast[data-type="warning"]
.affiliate-toast__icon {

  color:
    var(--aff-yellow);

}


.affiliate-toast__copy {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

}


.affiliate-toast__copy strong {

  font-size:
    0.69rem;

}


.affiliate-toast__copy small {

  margin-top:
    3px;

  overflow:
    hidden;

  color:
    var(--aff-text-muted);

  font-size:
    0.59rem;

  line-height:
    1.45;

}


.affiliate-toast > button {

  width:
    33px;

  height:
    33px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    10px;

  color:
    var(--aff-text-muted);

  background:
    transparent;

}


.affiliate-toast > button:hover {

  color:
    white;

  background:
    rgba(255, 255, 255, 0.05);

}


/* ============================================================
   61. CONNECTION
============================================================ */

.affiliate-connection {

  position:
    fixed;

  left:
    16px;

  bottom:
    16px;

  z-index:
    6000;

  min-height:
    29px;

  padding:
    0 10px;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

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

  border-radius:
    var(--aff-pill);

  background:
    rgba(9, 9, 11, 0.74);

  backdrop-filter:
    blur(16px);

  color:
    var(--aff-text-muted);

}


.affiliate-connection > span {

  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    var(--aff-green);

}


.affiliate-connection small {

  font-size:
    0.51rem;

  font-weight:
    650;

}


.affiliate-connection.is-offline
> span {

  background:
    var(--aff-red);

}


/* ============================================================
   62. DYNAMIC ACTIVITY ROWS
============================================================ */

.dashboard-activity-item {

  min-height:
    68px;

  padding:
    9px 2px;

  display:
    grid;

  grid-template-columns:
    40px
    1fr
    auto;

  align-items:
    center;

  gap:
    10px;

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

}


.dashboard-activity-item:last-child {

  border-bottom:
    0;

}


.dashboard-activity-item__icon {

  width:
    40px;

  height:
    40px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    12px;

  color:
    var(--aff-cream);

  background:
    rgba(255, 255, 255, 0.03);

}


.dashboard-activity-item__copy {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

}


.dashboard-activity-item__copy strong {

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  font-size:
    0.65rem;

}


.dashboard-activity-item__copy small {

  margin-top:
    3px;

  color:
    var(--aff-text-muted);

  font-size:
    0.54rem;

}


.dashboard-activity-item__amount {

  color:
    var(--aff-green);

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    0.68rem;

  font-weight:
    750;

}


/* ============================================================
   63. GENERIC STATE CLASSES
============================================================ */

.is-success {

  color:
    var(--aff-green) !important;

}


.is-warning {

  color:
    var(--aff-yellow) !important;

}


.is-danger {

  color:
    var(--aff-red) !important;

}


.is-muted {

  color:
    var(--aff-text-muted) !important;

}


.is-loading {

  pointer-events:
    none;

  opacity:
    0.62;

}


.is-disabled {

  pointer-events:
    none;

  opacity:
    0.4;

}


/* ============================================================
   64. SKELETON
============================================================ */

.affiliate-skeleton {

  position:
    relative;

  overflow:
    hidden;

  border-radius:
    8px;

  background:
    rgba(255, 255, 255, 0.045);

}


.affiliate-skeleton::after {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.08),
      transparent
    );

  transform:
    translateX(-100%);

  animation:
    affiliateSkeleton
    1.4s
    ease-in-out
    infinite;

}


/* ============================================================
   65. KEYFRAMES
============================================================ */

@keyframes affiliateOrbFloat {

  0%,
  100% {

    transform:
      translate3d(0, 0, 0)
      scale(1);

  }

  50% {

    transform:
      translate3d(38px, -26px, 0)
      scale(1.08);

  }

}


@keyframes affiliateLoaderOrbit {

  from {

    transform:
      translate(-50%, -50%)
      rotate(0deg);

  }

  to {

    transform:
      translate(-50%, -50%)
      rotate(360deg);

  }

}


@keyframes affiliateLoaderLogo {

  0%,
  100% {

    transform:
      scale(1);

  }

  50% {

    transform:
      scale(1.055);

  }

}


@keyframes affiliateLoaderBar {

  0% {

    transform:
      translateX(-130%);

  }

  100% {

    transform:
      translateX(360%);

  }

}


@keyframes affiliateStatusPulse {

  0%,
  100% {

    box-shadow:
      0 0 0 4px rgba(110, 231, 164, 0.045);

  }

  50% {

    box-shadow:
      0 0 0 7px rgba(110, 231, 164, 0.085);

  }

}


@keyframes affiliateHeroCopyIn {

  from {

    opacity:
      0;

    transform:
      translateY(35px);

  }

  to {

    opacity:
      1;

    transform:
      translateY(0);

  }

}


@keyframes affiliateHeroVisualIn {

  from {

    opacity:
      0;

    transform:
      translateY(40px)
      scale(0.96);

  }

  to {

    opacity:
      1;

    transform:
      translateY(0)
      scale(1);

  }

}


@keyframes affiliateOrbit {

  from {

    transform:
      translate(-50%, -50%)
      rotate(0deg);

  }

  to {

    transform:
      translate(-50%, -50%)
      rotate(360deg);

  }

}


@keyframes affiliateOrbitReverse {

  from {

    transform:
      translate(-50%, -50%)
      rotate(360deg);

  }

  to {

    transform:
      translate(-50%, -50%)
      rotate(0deg);

  }

}


@keyframes affiliatePassFloat {

  0%,
  100% {

    transform:
      translate(-50%, -50%)
      rotateY(-8deg)
      rotateX(3deg)
      translateY(0);

  }

  50% {

    transform:
      translate(-50%, -50%)
      rotateY(-5deg)
      rotateX(1deg)
      translateY(-11px);

  }

}


@keyframes affiliateFloatOne {

  0%,
  100% {

    transform:
      translateY(0)
      rotate(-2deg);

  }

  50% {

    transform:
      translateY(-11px)
      rotate(0deg);

  }

}


@keyframes affiliateFloatTwo {

  0%,
  100% {

    transform:
      translateY(0)
      rotate(3deg);

  }

  50% {

    transform:
      translateY(9px)
      rotate(1deg);

  }

}


@keyframes affiliateFloatThree {

  0%,
  100% {

    transform:
      translateY(0)
      rotate(-2deg);

  }

  50% {

    transform:
      translateY(-9px)
      rotate(-1deg);

  }

}


@keyframes affiliateConnectorMove {

  0% {

    left:
      0;

    opacity:
      0;

  }

  20% {

    opacity:
      1;

  }

  80% {

    opacity:
      1;

  }

  100% {

    left:
      calc(100% - 5px);

    opacity:
      0;

  }

}


@keyframes affiliatePanelIn {

  from {

    opacity:
      0;

    transform:
      translateY(12px);

  }

  to {

    opacity:
      1;

    transform:
      translateY(0);

  }

}


@keyframes affiliateModalIn {

  from {

    opacity:
      0;

    transform:
      translateY(22px)
      scale(0.96);

  }

  to {

    opacity:
      1;

    transform:
      translateY(0)
      scale(1);

  }

}


@keyframes affiliateSkeleton {

  from {

    transform:
      translateX(-100%);

  }

  to {

    transform:
      translateX(100%);

  }

}


/* ============================================================
   66. LARGE DESKTOP
============================================================ */

@media
(
  min-width: 1650px
) {

  :root {

    --aff-page:
      1520px;

    --aff-page-wide:
      1640px;

  }


  .affiliate-hero {

    grid-template-columns:
      0.85fr
      1.15fr;

  }


  .affiliate-hero__visual {

    min-height:
      720px;

  }

}


/* ============================================================
   67. NOTEBOOK
============================================================ */

@media
(
  max-width: 1280px
) {

  .promotion-status {

    display:
      none;

  }


  .affiliate-nav__link {

    padding:
      0 9px;

    font-size:
      0.65rem;

  }


  .affiliate-hero {

    grid-template-columns:
      minmax(0, 0.88fr)
      minmax(450px, 1.12fr);

    gap:
      35px;

  }


  .affiliate-pass {

    width:
      min(350px, 60%);

  }


  .affiliate-floating-card--one {

    width:
      210px;

  }


  .affiliate-floating-card--two {

    width:
      180px;

  }


  .affiliate-footer__main {

    grid-template-columns:
      1.3fr
      repeat(3, 0.7fr);

  }

}


/* ============================================================
   68. TABLET LANDSCAPE
============================================================ */

@media
(
  max-width: 1080px
) {

  :root {

    --aff-section-gap:
      110px;

  }


  .affiliate-header {

    grid-template-columns:
      auto
      1fr;

  }


  .affiliate-nav {

    display:
      none;

  }


  .affiliate-header__actions {

    justify-self:
      end;

  }


  .affiliate-hero {

    min-height:
      auto;

    grid-template-columns:
      1fr;

    padding-top:
      70px;

  }


  .affiliate-hero__content {

    max-width:
      850px;

  }


  .affiliate-hero__visual {

    min-height:
      620px;

  }


  .affiliate-pass {

    width:
      360px;

  }


  .launch-promotion {

    grid-template-columns:
      auto
      1fr;

  }


  .launch-promotion__progress {

    grid-column:
      1 / -1;

  }


  .affiliate-steps {

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

    gap:
      12px;

  }


  .affiliate-step-connector {

    display:
      none;

  }


  .affiliate-onboarding {

    grid-template-columns:
      1fr;

  }


  .affiliate-onboarding__intro {

    position:
      static;

    max-width:
      750px;

  }


  .affiliate-access {

    grid-template-columns:
      0.65fr
      1.35fr;

  }


  .dashboard-metrics {

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

  }


  .dashboard-overview-grid,
  .dashboard-overview-grid--lower {

    grid-template-columns:
      1fr;

  }


  .referral-tools-grid {

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

  }


  .referral-tool-card:last-child {

    grid-column:
      1 / -1;

  }


  .affiliate-share-options {

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

  }

}


/* ============================================================
   69. TABLET
============================================================ */

@media
(
  max-width: 860px
) {

  .affiliate-main {

    width:
      calc(100% - 24px);

  }


  .affiliate-header {

    top:
      7px;

    width:
      calc(100% - 14px);

    margin-top:
      7px;

    border-radius:
      21px;

  }


  .affiliate-hero__title {

    font-size:
      clamp(3.1rem, 10vw, 5.3rem);

  }


  .affiliate-hero__visual {

    min-height:
      560px;

  }


  .affiliate-floating-card--one {

    left:
      2%;

  }


  .affiliate-floating-card--two {

    right:
      2%;

  }


  .affiliate-section-heading {

    grid-template-columns:
      1fr;

  }


  .affiliate-section-heading > p {

    max-width:
      600px;

  }


  .affiliate-tier-grid {

    grid-template-columns:
      1fr;

  }


  .affiliate-tier-card {

    min-height:
      auto;

  }


  .affiliate-access {

    grid-template-columns:
      1fr;

  }


  .affiliate-access__visual {

    min-height:
      270px;

    border-right:
      0;

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

  }


  .affiliate-faq__grid {

    grid-template-columns:
      1fr;

  }


  .affiliate-dashboard__hero {

    grid-template-columns:
      1fr;

    align-items:
      start;

  }


  .dashboard-tier-card {

    width:
      100%;

  }


  .dashboard-navigation {

    margin-left:
      0;

    margin-right:
      0;

    width:
      100%;

  }


  .dashboard-panel-heading {

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  .dashboard-panel-heading__actions {

    width:
      100%;

  }


  .dashboard-search {

    flex:
      1;

  }


  .commission-summary-grid {

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

  }


  .affiliate-account-grid {

    grid-template-columns:
      1fr;

  }


  .affiliate-footer__main {

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

  }


  .affiliate-footer__brand {

    grid-column:
      1 / -1;

  }

}


/* ============================================================
   70. MOBILE
============================================================ */

@media
(
  max-width: 680px
) {

  :root {

    --aff-section-gap:
      82px;

  }


  .affiliate-main {

    width:
      calc(100% - 18px);

    padding-top:
      40px;

  }


  .affiliate-header {

    min-height:
      64px;

    padding:
      7px;

  }


  .affiliate-brand {

    min-width:
      0;

  }


  .affiliate-brand__logo {

    width:
      40px;

    height:
      40px;

  }


  .affiliate-brand__subtitle,
  .affiliate-brand__top small {

    display:
      none;

  }


  .header-icon-button {

    width:
      40px;

    height:
      40px;

  }


  .affiliate-account-button {

    min-width:
      44px;

    width:
      44px;

    height:
      44px;

    min-height:
      44px;

    padding:
      4px;

  }


  .affiliate-account-button__copy,
  .affiliate-account-button > i {

    display:
      none;

  }


  .affiliate-account-button__avatar {

    width:
      34px;

    height:
      34px;

    flex-basis:
      34px;

  }


  .affiliate-account-menu {

    position:
      fixed;

    top:
      75px;

    left:
      10px;

    right:
      10px;

    width:
      auto;

    transform-origin:
      top center;

  }


  .affiliate-hero {

    padding-top:
      32px;

    padding-bottom:
      60px;

  }


  .affiliate-eyebrow {

    font-size:
      0.51rem;

  }


  .affiliate-hero__title {

    font-size:
      clamp(2.8rem, 14.8vw, 4.4rem);

  }


  .affiliate-hero__description {

    font-size:
      0.82rem;

  }


  .affiliate-hero__actions {

    display:
      grid;

    grid-template-columns:
      1fr;

  }


  .affiliate-primary-button,
  .affiliate-secondary-button {

    width:
      100%;

  }


  .affiliate-hero__trust {

    grid-template-columns:
      1fr;

  }


  .affiliate-hero__trust > div {

    min-height:
      58px;

  }


  .affiliate-hero__visual {

    min-height:
      490px;

  }


  .affiliate-pass {

    width:
      min(300px, 72%);

    padding:
      20px;

    border-radius:
      27px;

  }


  .affiliate-floating-card {

    min-height:
      60px;

  }


  .affiliate-floating-card--one {

    width:
      190px;

    left:
      -1%;

    top:
      15%;

  }


  .affiliate-floating-card--two {

    width:
      170px;

    right:
      -1%;

    top:
      24%;

  }


  .affiliate-floating-card--three {

    width:
      185px;

    right:
      3%;

    bottom:
      7%;

  }


  .affiliate-floating-card__icon {

    width:
      37px;

    height:
      37px;

    flex-basis:
      37px;

  }


  .launch-promotion {

    padding:
      19px;

    grid-template-columns:
      1fr;

    gap:
      18px;

    border-radius:
      26px;

  }


  .launch-promotion__symbol {

    width:
      100%;

    height:
      95px;

    justify-content:
      flex-start;

    padding-left:
      18px;

  }


  .launch-promotion__symbol small {

    margin-top:
      18px;

  }


  .launch-promotion__progress {

    grid-column:
      auto;

  }


  .affiliate-section-heading h2 {

    font-size:
      clamp(2.3rem, 12vw, 3.7rem);

  }


  .affiliate-tier-card {

    padding:
      20px;

    border-radius:
      25px;

  }


  .affiliate-tier-card__head {

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  .affiliate-tier-card__rate {

    margin:
      34px 0 24px;

    grid-template-columns:
      1fr;

    gap:
      15px;

  }


  .affiliate-tier-card__rate
  > i {

    transform:
      rotate(90deg);

  }


  .affiliate-tier-card__rate small {

    max-width:
      100%;

  }


  .affiliate-steps {

    grid-template-columns:
      1fr;

  }


  .affiliate-step {

    min-height:
      220px;

  }


  .affiliate-form-card {

    padding:
      19px;

    border-radius:
      26px;

  }


  .affiliate-form-grid {

    grid-template-columns:
      1fr;

  }


  .affiliate-access {

    border-radius:
      27px;

  }


  .affiliate-access-form {

    grid-template-columns:
      1fr;

  }


  .affiliate-access-button {

    width:
      100%;

  }


  .affiliate-created {

    padding:
      28px 18px;

    border-radius:
      27px;

  }


  .affiliate-created__credentials {

    grid-template-columns:
      1fr;

  }


  .affiliate-created__link {

    grid-column:
      auto;

  }


  .affiliate-created__actions {

    flex-direction:
      column;

  }


  .affiliate-dashboard__hero {

    min-height:
      340px;

    padding:
      28px 20px;

    border-radius:
      28px;

  }


  .affiliate-dashboard__hero h1 {

    font-size:
      clamp(2.7rem, 13vw, 4.2rem);

  }


  .dashboard-navigation {

    top:
      79px;

    border-radius:
      15px;

  }


  .dashboard-navigation__item {

    min-height:
      39px;

    padding:
      0 11px;

  }


  .dashboard-navigation__item span {

    font-size:
      0.58rem;

  }


  .dashboard-metrics {

    grid-template-columns:
      1fr;

  }


  .dashboard-metric-card {

    min-height:
      150px;

  }


  .dashboard-referral-actions {

    grid-template-columns:
      1fr;

  }


  .dashboard-panel-heading__actions {

    flex-direction:
      column;

    align-items:
      stretch;

  }


  .dashboard-search {

    width:
      100%;

    min-width:
      0;

  }


  .dashboard-select {

    width:
      100%;

  }


  .commission-summary-grid {

    grid-template-columns:
      1fr;

  }


  .referral-tools-grid {

    grid-template-columns:
      1fr;

  }


  .referral-tool-card:last-child {

    grid-column:
      auto;

  }


  .affiliate-share-options {

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

  }


  .affiliate-profile-data {

    grid-template-columns:
      1fr;

  }


  .affiliate-footer {

    width:
      calc(100% - 18px);

  }


  .affiliate-footer__main {

    grid-template-columns:
      1fr;

  }


  .affiliate-footer__brand {

    grid-column:
      auto;

  }


  .affiliate-footer__bottom {

    grid-template-columns:
      1fr;

    gap:
      7px;

    padding:
      17px 0;

  }


  .affiliate-footer__bottom
  span:nth-child(2),
  .affiliate-footer__bottom
  span:last-child {

    text-align:
      left;

  }


  .affiliate-language-grid {

    grid-template-columns:
      1fr;

  }


  .affiliate-modal {

    padding:
      8px;

  }


  .affiliate-modal__card {

    border-radius:
      24px;

  }


  .affiliate-toast {

    left:
      8px;

    right:
      8px;

    bottom:
      8px;

    width:
      auto;

  }


  .affiliate-connection {

    display:
      none;

  }

}


/* ============================================================
   71. SMALL MOBILE
============================================================ */

@media
(
  max-width: 430px
) {

  .affiliate-brand__top strong {

    font-size:
      0.88rem;

  }


  .affiliate-hero__title {

    font-size:
      clamp(2.55rem, 14vw, 3.8rem);

  }


  .affiliate-hero__visual {

    min-height:
      430px;

  }


  .affiliate-pass {

    width:
      250px;

  }


  .affiliate-pass__center strong {

    font-size:
      4rem;

  }


  .affiliate-floating-card--one {

    width:
      165px;

  }


  .affiliate-floating-card--two {

    width:
      155px;

  }


  .affiliate-floating-card--three {

    width:
      170px;

  }


  .affiliate-floating-card strong {

    max-width:
      115px;

    font-size:
      0.58rem;

  }


  .affiliate-floating-card small {

    font-size:
      0.37rem;

  }


  .affiliate-section-heading h2 {

    font-size:
      clamp(2.2rem, 11.8vw, 3.25rem);

  }


  .affiliate-tier-card__rate strong {

    font-size:
      4.2rem;

  }


  .affiliate-form-card__head {

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  .affiliate-access__visual {

    min-height:
      230px;

  }


  .affiliate-access__graphic
  > span {

    width:
      58px;

    height:
      58px;

  }


  .affiliate-access__content {

    padding:
      28px 19px;

  }


  .dashboard-card {

    padding:
      18px;

    border-radius:
      22px;

  }


  .dashboard-launch-rates {

    grid-template-columns:
      1fr;

  }


  .dashboard-launch-rates
  > i {

    transform:
      rotate(90deg);

  }


  .affiliate-share-options {

    grid-template-columns:
      1fr;

  }


  .affiliate-language-modal {

    padding:
      13px;

  }

}


/* ============================================================
   72. VERY SMALL MOBILE
============================================================ */

@media
(
  max-width: 350px
) {

  .affiliate-main {

    width:
      calc(100% - 12px);

  }


  .affiliate-header {

    width:
      calc(100% - 8px);

  }


  .header-icon-button {

    display:
      none;

  }


  .affiliate-hero__title {

    font-size:
      2.4rem;

  }


  .affiliate-hero__visual {

    min-height:
      390px;

  }


  .affiliate-pass {

    width:
      225px;

  }


  .affiliate-floating-card {

    display:
      none;

  }


  .affiliate-section-heading h2 {

    font-size:
      2.1rem;

  }


  .affiliate-tier-card__rate strong {

    font-size:
      3.8rem;

  }

}


/* ============================================================
   73. TOUCH DEVICES
============================================================ */

@media
(
  hover: none
) {

  .affiliate-step:hover,
  .affiliate-tier-card:hover,
  .dashboard-metric-card:hover {

    transform:
      none;

  }

}


/* ============================================================
   74. REDUCED MOTION
============================================================ */

@media
(
  prefers-reduced-motion: reduce
) {

  *,
  *::before,
  *::after {

    scroll-behavior:
      auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

  }

}


/* ============================================================
   75. PRINT
============================================================ */

@media print {

  .affiliate-header,
  .affiliate-background,
  .affiliate-footer,
  .affiliate-toast,
  .affiliate-connection,
  .dashboard-navigation {

    display:
      none !important;

  }


  body {

    color:
      black;

    background:
      white;

  }

}


/* ============================================================
   76. PAGE SCROLL SAFETY
============================================================ */

html:not(.kryia-scroll-locked),
body:not(.kryia-scroll-locked) {

  height:
    auto !important;

  min-height:
    100%;

  overflow-y:
    auto;

}


.affiliate-app,
.affiliate-main,
.affiliate-public,
.affiliate-hero,
.launch-promotion-section,
.affiliate-commission-section,
.affiliate-how-section,
.affiliate-onboarding,
.affiliate-access,
.affiliate-faq,
.affiliate-dashboard,
.dashboard-panel,
.affiliate-footer {

  overflow-y:
    visible;

}


/* ============================================================
   END — KRYIA BILLING AFFILIATE CENTER
============================================================ */


/* ============================================================
   77. SHARED KRYIA VISUAL + TRANSLATION-SAFE RESPONSIVENESS
============================================================ */

body {
  background:
    radial-gradient(circle at 12% 18%, rgba(90, 226, 145, 0.08), transparent 30%),
    radial-gradient(circle at 88% 10%, rgba(244, 239, 229, 0.1), transparent 30%),
    radial-gradient(circle at 50% 105%, rgba(142, 184, 255, 0.08), transparent 36%),
    linear-gradient(135deg, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.82)),
    url("../gradinetgrey.jpg") center / cover fixed no-repeat;
}


.affiliate-background__base {
  background: rgba(5, 5, 6, 0.48);
}


html,
body,
.affiliate-app,
.affiliate-main,
.affiliate-public,
.affiliate-dashboard {
  max-width: 100%;
}


.affiliate-app,
.affiliate-main,
.affiliate-header,
.affiliate-header > *,
.affiliate-hero > *,
.affiliate-section-heading > *,
.affiliate-tier-grid > *,
.affiliate-onboarding > *,
.affiliate-access > *,
.affiliate-dashboard > *,
.dashboard-panel,
.dashboard-panel > *,
.dashboard-card,
.affiliate-footer > *,
.affiliate-modal__card,
.affiliate-form-grid > *,
.affiliate-field,
.affiliate-field > * {
  min-width: 0;
}


[data-i18n],
.affiliate-hero__title,
.affiliate-section-heading h2,
.affiliate-dashboard__hero h1,
.affiliate-tier-card,
.dashboard-card,
.affiliate-modal__card,
.affiliate-toast__copy,
.affiliate-form-status {
  overflow-wrap: anywhere;
  word-break: normal;
}


html:not([lang="en"]) .affiliate-hero__title,
html:not([lang="en"]) .affiliate-section-heading h2,
html:not([lang="en"]) .affiliate-dashboard__hero h1 {
  letter-spacing: -0.045em;
}


.affiliate-primary-button,
.affiliate-secondary-button,
.affiliate-access-button,
.dashboard-action-button,
.dashboard-navigation__item,
.affiliate-language-grid button {
  height: auto;
  min-height: 44px;
  white-space: normal;
  text-align: center;
}


.dashboard-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}


.affiliate-modal__card {
  max-height: min(880px, calc(100dvh - 24px));
  overflow-y: auto;
  overscroll-behavior: contain;
}


@media (max-width: 680px) {
  body {
    background-attachment: scroll;
  }

  .affiliate-header__actions {
    min-width: 0;
    gap: 6px;
  }

  .affiliate-hero__content,
  .affiliate-section-heading,
  .affiliate-onboarding__intro,
  .affiliate-access__content,
  .affiliate-dashboard__hero,
  .dashboard-panel,
  .affiliate-footer__main {
    max-width: 100%;
  }

  .affiliate-hero__title,
  .affiliate-section-heading h2,
  .affiliate-dashboard__hero h1 {
    hyphens: auto;
  }

  .affiliate-form-card,
  .affiliate-tier-card,
  .dashboard-card,
  .dashboard-table-card,
  .referral-tool-card {
    max-width: 100%;
  }

  .dashboard-navigation {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }

  .dashboard-navigation::-webkit-scrollbar {
    display: none;
  }

  .dashboard-navigation__item {
    flex: 0 0 auto;
  }

  .affiliate-modal {
    align-items: flex-start;
    padding:
      max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }
}


@media (max-width: 430px) {
  .affiliate-main,
  .affiliate-footer {
    width: calc(100% - 16px);
  }

  .affiliate-header {
    width: calc(100% - 10px);
  }

  .affiliate-hero__visual {
    max-width: 100%;
    overflow: hidden;
  }

  .affiliate-form-card,
  .affiliate-tier-card,
  .affiliate-created,
  .affiliate-dashboard__hero,
  .dashboard-card,
  .dashboard-table-card {
    padding-inline: 16px;
  }

  .affiliate-toast {
    max-height: calc(100dvh - 18px);
    overflow-y: auto;
  }
}


/* ============================================================
   78. COMPACT AFFILIATE LAYOUT
============================================================ */

:root {
  --aff-page: 1180px;
  --aff-page-wide: 1280px;
  --aff-header-h: 64px;
  --aff-section-gap: 86px;
}


body {
  font-size: 14px;
}


.affiliate-header {
  top: 8px;
  min-height: 64px;
  margin-top: 8px;
  border-radius: 17px;
}


.affiliate-brand {
  min-width: 164px;
}


.affiliate-brand__logo {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}


.affiliate-main {
  padding-top: 38px;
}


.affiliate-hero {
  min-height: 570px;
  grid-template-columns: minmax(0, 0.96fr) minmax(360px, 1.04fr);
  gap: clamp(28px, 4vw, 58px);
  padding: 16px 0 56px;
}


.affiliate-hero__content {
  max-width: 590px;
}


.affiliate-hero__title {
  font-size: clamp(2.8rem, 5vw, 5.15rem);
  line-height: 0.94;
}


.affiliate-hero__description {
  max-width: 540px;
  margin-top: 21px;
  font-size: clamp(0.82rem, 1.05vw, 0.96rem);
  line-height: 1.68;
}


.affiliate-hero__actions {
  margin-top: 25px;
}


.affiliate-primary-button {
  min-width: 210px;
  min-height: 54px;
  border-radius: 14px;
}


.affiliate-secondary-button {
  min-height: 52px;
  border-radius: 13px;
}


.affiliate-hero__trust {
  margin-top: 32px;
}


.affiliate-hero__visual {
  min-height: 500px;
}


.affiliate-pass {
  width: min(330px, 62%);
  padding: 21px;
  border-radius: 25px;
}


.affiliate-floating-card--one,
.affiliate-floating-card--three {
  width: 175px;
}


.affiliate-floating-card--two {
  width: 158px;
}


.launch-promotion {
  min-height: 168px;
  padding: 21px;
  border-radius: 22px;
}


.affiliate-section-heading {
  gap: 28px;
  margin-bottom: 28px;
}


.affiliate-section-heading h2 {
  font-size: clamp(2.05rem, 4vw, 3.85rem);
  line-height: 0.98;
}


.affiliate-tier-card {
  min-height: 410px;
  padding: 22px;
  border-radius: 22px;
}


.affiliate-step {
  min-height: 190px;
}


.affiliate-onboarding {
  grid-template-columns: minmax(285px, 0.75fr) minmax(430px, 1.25fr);
  gap: clamp(28px, 4vw, 58px);
}


.affiliate-form-card,
.affiliate-access,
.affiliate-created,
.affiliate-dashboard__hero,
.dashboard-card,
.dashboard-table-card,
.dashboard-metric-card {
  border-radius: 20px;
}


.affiliate-dashboard__hero {
  min-height: 250px;
  padding: clamp(24px, 4vw, 42px);
}


.dashboard-metric-card {
  min-height: 156px;
}


.affiliate-modal__card {
  width: min(520px, 100%);
  padding: 15px;
  border-radius: 18px;
}


.affiliate-language-modal {
  width: min(540px, 100%);
}


.affiliate-language-grid button {
  min-height: 60px;
  border-radius: 12px;
}


@media (max-width: 1080px) {
  .affiliate-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .affiliate-hero__content {
    max-width: 700px;
  }

  .affiliate-onboarding {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 680px) {
  :root {
    --aff-section-gap: 64px;
  }

  .affiliate-main {
    padding-top: 24px;
  }

  .affiliate-hero {
    padding-top: 22px;
    padding-bottom: 42px;
  }

  .affiliate-hero__title {
    font-size: clamp(2.35rem, 12vw, 3.6rem);
  }

  .affiliate-hero__visual {
    min-height: 390px;
  }

  .affiliate-pass {
    width: min(260px, 74%);
    padding: 17px;
  }

  .affiliate-floating-card--one,
  .affiliate-floating-card--three {
    width: 145px;
  }

  .affiliate-floating-card--two {
    width: 135px;
  }

  .affiliate-section-heading h2 {
    font-size: clamp(1.95rem, 10vw, 2.85rem);
  }

  .affiliate-tier-card,
  .affiliate-form-card,
  .affiliate-created,
  .affiliate-dashboard__hero,
  .dashboard-card,
  .dashboard-table-card {
    border-radius: 17px;
  }

  .affiliate-step {
    min-height: 170px;
  }

  .affiliate-dashboard__hero {
    min-height: 260px;
  }
}


@media (max-width: 430px) {
  .affiliate-hero__visual {
    min-height: 340px;
  }

  .affiliate-pass {
    width: min(235px, 76%);
  }

  .affiliate-floating-card {
    transform: scale(0.88);
  }

  .affiliate-language-grid button {
    min-height: 54px;
  }
}