/*
 * ClickBee — Premium Referrals
 * 97
 * Isolated replacement for the referrals page.
 */

.cb-referrals{
  --ref-accent:168,101,255;
  --ref-green:101,239,145;
  width:100%;
  min-width:0;
  padding:0 0 18px;
}

.cb-referrals,
.cb-referrals *{
  box-sizing:border-box;
}

.cb-referrals button,
.cb-referrals input{
  font:inherit;
}

.cb-ref-hero{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);
  gap:18px;
  margin-top:28px;
  padding:22px;

  border:1px solid rgba(191,193,247,.16);
  border-radius:24px;

  background:
    radial-gradient(
      80% 140% at 100% 0%,
      rgba(175,96,255,.18) 0%,
      rgba(175,96,255,.055) 42%,
      transparent 72%
    ),
    radial-gradient(
      56% 120% at 0% 100%,
      rgba(63,109,242,.11) 0%,
      transparent 68%
    ),
    linear-gradient(
      145deg,
      rgba(40,47,100,.95),
      rgba(27,33,78,.97) 58%,
      rgba(19,24,61,.98)
    );

  box-shadow:
    0 20px 48px rgba(3,6,28,.22),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.cb-ref-hero:before{
  content:"";
  position:absolute;
  top:0;
  left:10%;
  right:10%;
  height:1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.10),
      rgba(194,119,255,.34),
      rgba(255,255,255,.10),
      transparent
    );
  pointer-events:none;
}

.cb-ref-hero:after{
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  right:-72px;
  bottom:-88px;
  border:1px dashed rgba(197,126,255,.15);
  border-radius:50%;
  box-shadow:
    0 0 0 28px rgba(183,112,255,.018),
    0 0 0 58px rgba(183,112,255,.012);
  pointer-events:none;
}

.cb-ref-hero-copy{
  position:relative;
  z-index:1;
  min-width:0;
}

.cb-ref-kicker{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:8px;
  color:#bcc3dc;
  font-size:9.5px;
  font-weight:800;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.cb-ref-kicker:before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:rgb(var(--ref-accent));
  box-shadow:
    0 0 9px rgba(var(--ref-accent),.52),
    0 0 18px rgba(var(--ref-accent),.18);
}

.cb-ref-hero h1{
  max-width:560px;
  margin:0;
  color:#fff;
  font-size:30px;
  font-weight:760;
  line-height:1.08;
  letter-spacing:-.8px;
}

.cb-ref-hero-copy > p{
  max-width:590px;
  margin:10px 0 0;
  color:#abb4d0;
  font-size:12.5px;
  line-height:1.58;
}

.cb-ref-rate-row{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:15px;
}

.cb-ref-rate{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:29px;
  padding:6px 9px;
  border:1px solid rgba(191,193,247,.11);
  border-radius:999px;
  color:#b8c0d9;
  background:rgba(255,255,255,.025);
  font-size:9.5px;
  font-weight:650;
}

.cb-ref-rate b{
  color:#baf6c8;
  font-size:10.5px;
}

.cb-ref-balance{
  position:relative;
  z-index:1;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-width:0;
  padding:16px;
  border:1px solid rgba(191,193,247,.11);
  border-radius:18px;
  background:
    radial-gradient(
      105% 120% at 100% 0%,
      rgba(174,103,255,.10),
      transparent 60%
    ),
    rgba(5,8,31,.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035);
}

.cb-ref-balance-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#8790ad;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.10em;
}

.cb-ref-balance-label span:last-child{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#a9edbc;
  text-transform:none;
  letter-spacing:0;
}

.cb-ref-balance-label span:last-child:before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:#65ef91;
  box-shadow:0 0 7px rgba(101,239,145,.40);
}

.cb-ref-balance-value{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:14px;
}

.cb-ref-balance-value img{
  width:31px;
  height:31px;
  flex:0 0 31px;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.18));
}

.cb-ref-balance-value strong{
  min-width:0;
  overflow:hidden;
  color:#fff;
  font-size:24px;
  font-weight:750;
  line-height:1;
  letter-spacing:-.5px;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.cb-ref-balance-value small{
  margin-left:4px;
  color:#818ba7;
  font-size:9px;
  font-weight:650;
  letter-spacing:.02em;
}

.cb-ref-balance-foot{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-top:15px;
  padding-top:12px;
  border-top:1px solid rgba(191,193,247,.08);
}

.cb-ref-balance-foot div span{
  display:block;
  color:#707a97;
  font-size:8px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.cb-ref-balance-foot div b{
  display:block;
  margin-top:5px;
  color:#dce1f2;
  font-size:11px;
  line-height:1;
}

.cb-ref-balance-foot > b{
  color:#94efae;
  font-size:10px;
  font-weight:700;
}

/* Referral link / share command center */
.cb-ref-command{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(230px,.55fr);
  gap:12px;
  margin-top:12px;
}

.cb-ref-panel{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(191,193,247,.11);
  border-radius:18px;
  background:
    linear-gradient(
      145deg,
      rgba(31,38,82,.78),
      rgba(21,27,67,.86)
    );
  box-shadow:
    0 10px 28px rgba(3,6,28,.10),
    inset 0 1px 0 rgba(255,255,255,.032);
}

.cb-ref-link-panel{
  padding:15px;
}

.cb-ref-panel-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.cb-ref-panel-title h2,
.cb-ref-panel-title h3{
  margin:0;
  color:#f6f7ff;
  font-size:14px;
  font-weight:720;
  line-height:1.2;
}

.cb-ref-panel-title p{
  margin:4px 0 0;
  color:#78829f;
  font-size:9.5px;
  line-height:1.4;
}

.cb-ref-code{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:27px;
  padding:5px 8px;
  border:1px solid rgba(177,119,255,.14);
  border-radius:9px;
  color:#d7c8ef;
  background:rgba(150,91,232,.05);
  font-size:8.5px;
  font-weight:700;
}

.cb-ref-code b{
  color:#b779ff;
  font-size:8px;
  letter-spacing:.04em;
}

.cb-ref-linkbox{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:7px;
  margin-top:12px;
}

.cb-ref-link-display{
  display:flex;
  align-items:center;
  min-width:0;
  min-height:42px;
  padding:0 11px;
  border:1px solid rgba(191,193,247,.12);
  border-radius:11px;
  color:#c9cee1;
  background:rgba(7,10,35,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:text;
  user-select:all;
}

.cb-ref-copy-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:92px;
  min-height:42px;
  padding:0 11px;
  border:1px solid rgba(190,128,255,.22);
  border-radius:11px;
  color:#f2eaff;
  background:
    radial-gradient(
      100% 150% at 100% 0%,
      rgba(198,125,255,.16),
      transparent 65%
    ),
    rgba(148,84,229,.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 5px 12px rgba(87,44,160,.07);
  font-size:9.5px;
  font-weight:750;
  cursor:pointer;
}

.cb-ref-copy-btn i{
  font-style:normal;
  font-size:11px;
}

.cb-ref-link-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:9px;
  color:#69728e;
  font-size:8.5px;
}

.cb-ref-link-meta span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.cb-ref-link-meta span:before{
  content:"";
  width:4px;
  height:4px;
  border-radius:50%;
  background:#687390;
}

.cb-ref-link-meta span:first-child:before{
  background:#65ef91;
  box-shadow:0 0 6px rgba(101,239,145,.30);
}

.cb-ref-share-panel{
  padding:15px;
  display:flex;
  flex-direction:column;
}

.cb-ref-share-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:12px;
}

.cb-ref-share{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:0 8px;
  border:1px solid rgba(191,193,247,.10);
  border-radius:10px;
  color:#adb6d1;
  background:rgba(255,255,255,.02);
  font-size:9px;
  font-weight:700;
  cursor:pointer;
}

.cb-ref-share b{
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:7px;
  background:rgba(255,255,255,.045);
  color:#e8ebf8;
  font-size:8px;
}

.cb-ref-share.cb-ref-share-main{
  grid-column:1/-1;
  color:#f1eaff;
  border-color:rgba(174,105,255,.20);
  background:
    linear-gradient(
      110deg,
      rgba(93,83,226,.13),
      rgba(169,74,220,.10)
    );
}

/* Stat ribbon */
.cb-ref-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}

.cb-ref-stat{
  min-width:0;
  padding:12px;
  border:1px solid rgba(191,193,247,.09);
  border-radius:14px;
  background:
    linear-gradient(
      145deg,
      rgba(30,37,80,.70),
      rgba(21,27,66,.78)
    );
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.cb-ref-stat-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  color:#717b98;
  font-size:8px;
  font-weight:700;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.cb-ref-stat-head i{
  width:7px;
  height:7px;
  border-radius:3px;
  background:rgba(var(--ref-accent),.20);
  box-shadow:inset 0 0 0 1px rgba(var(--ref-accent),.25);
}

.cb-ref-stat strong{
  display:block;
  margin-top:7px;
  overflow:hidden;
  color:#f1f3fb;
  font-size:17px;
  font-weight:740;
  line-height:1;
  letter-spacing:-.28px;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.cb-ref-stat small{
  display:block;
  margin-top:6px;
  color:#77819e;
  font-size:8.5px;
  line-height:1.25;
}

.cb-ref-stat small.green{
  color:#98eab0;
}

/* Insight area */
.cb-ref-insights{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:12px;
  margin-top:12px;
}

.cb-ref-funnel,
.cb-ref-tier{
  padding:15px;
}

.cb-ref-funnel-flow{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin-top:14px;
}

.cb-ref-funnel-step{
  position:relative;
  min-width:0;
  padding:0 12px;
  border-left:1px solid rgba(191,193,247,.08);
}

.cb-ref-funnel-step:first-child{
  padding-left:0;
  border-left:0;
}

.cb-ref-funnel-step:last-child{
  padding-right:0;
}

.cb-ref-funnel-step small{
  display:block;
  color:#6e7895;
  font-size:7.5px;
  font-weight:700;
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.cb-ref-funnel-step strong{
  display:block;
  margin-top:6px;
  color:#eef0fa;
  font-size:14px;
  font-weight:720;
  line-height:1;
}

.cb-ref-funnel-step span{
  display:block;
  margin-top:5px;
  color:#77819d;
  font-size:8px;
  line-height:1.2;
}

.cb-ref-funnel-step.active strong{
  color:#a9efbd;
}

.cb-ref-funnel-track{
  position:relative;
  height:4px;
  margin-top:14px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.045);
}

.cb-ref-funnel-track i{
  display:block;
  width:73%;
  height:100%;
  border-radius:inherit;
  background:
    linear-gradient(
      90deg,
      rgba(102,109,255,.62),
      rgba(174,101,255,.88),
      rgba(101,239,145,.76)
    );
  box-shadow:0 0 10px rgba(162,100,255,.18);
}

.cb-ref-tier-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
}

.cb-ref-tier-badge{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  flex:0 0 46px;
  border:1px solid rgba(193,127,255,.20);
  border-radius:15px;
  color:#e1c7ff;
  background:
    radial-gradient(
      100% 100% at 100% 0%,
      rgba(202,126,255,.20),
      rgba(150,91,232,.07) 62%
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 7px 16px rgba(96,49,174,.08);
  font-size:19px;
}

.cb-ref-tier-copy{
  min-width:0;
}

.cb-ref-tier-copy strong{
  display:block;
  color:#f1f2fb;
  font-size:13px;
  font-weight:730;
}

.cb-ref-tier-copy span{
  display:block;
  margin-top:4px;
  color:#75809d;
  font-size:8.8px;
  line-height:1.3;
}

.cb-ref-tier-progress{
  margin-top:14px;
}

.cb-ref-tier-progress-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#747e9a;
  font-size:8px;
}

.cb-ref-tier-progress-head b{
  color:#b7bfda;
  font-weight:700;
}

.cb-ref-tier-bar{
  height:6px;
  margin-top:7px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.045);
}

.cb-ref-tier-bar i{
  display:block;
  width:69%;
  height:100%;
  border-radius:inherit;
  background:
    linear-gradient(
      90deg,
      rgba(126,96,244,.82),
      rgba(191,104,255,.95)
    );
  box-shadow:0 0 9px rgba(181,102,255,.20);
}

.cb-ref-tier-perks{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:11px;
}

.cb-ref-tier-perks span{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:5px 7px;
  border:1px solid rgba(191,193,247,.08);
  border-radius:8px;
  color:#8993af;
  background:rgba(255,255,255,.016);
  font-size:7.8px;
  font-weight:650;
}

.cb-ref-tier-perks span.done{
  color:#a6e9b9;
  border-color:rgba(101,239,145,.10);
}

/* Referral activity */
.cb-ref-activity{
  margin-top:12px;
  padding:15px;
}

.cb-ref-activity-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}

.cb-ref-activity-tabs{
  display:flex;
  align-items:center;
  gap:5px;
}

.cb-ref-filter{
  min-height:27px;
  padding:5px 8px;
  border:1px solid transparent;
  border-radius:8px;
  color:#747e9b;
  background:transparent;
  font-size:8.7px;
  font-weight:700;
  cursor:pointer;
}

.cb-ref-filter.active{
  color:#f2edff;
  border-color:rgba(177,119,255,.14);
  background:rgba(145,87,232,.065);
}

.cb-ref-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:12px;
}

.cb-ref-person{
  display:grid;
  grid-template-columns:minmax(150px,1.4fr) .75fr .75fr .85fr .8fr;
  align-items:center;
  gap:0;
  min-height:52px;
  padding:7px 9px;
  border:1px solid rgba(191,193,247,.07);
  border-radius:12px;
  background:rgba(7,10,34,.17);
}

.cb-ref-person[hidden]{
  display:none!important;
}

.cb-ref-person-main{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.cb-ref-avatar{
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  flex:0 0 29px;
  border:1px solid rgba(191,193,247,.10);
  border-radius:9px;
  color:#d7dcef;
  background:
    linear-gradient(
      145deg,
      rgba(124,96,228,.15),
      rgba(174,84,213,.08)
    );
  font-size:8px;
  font-weight:800;
}

.cb-ref-person-name{
  min-width:0;
}

.cb-ref-person-name strong,
.cb-ref-person-name small{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.cb-ref-person-name strong{
  color:#e8ebf7;
  font-size:9.5px;
  font-weight:700;
}

.cb-ref-person-name small{
  margin-top:4px;
  color:#65708c;
  font-size:7.8px;
}

.cb-ref-person-cell{
  min-width:0;
  padding:0 9px;
  border-left:1px solid rgba(191,193,247,.055);
}

.cb-ref-person-cell small{
  display:block;
  color:#626d89;
  font-size:7px;
  font-weight:700;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.cb-ref-person-cell strong{
  display:block;
  margin-top:5px;
  overflow:hidden;
  color:#dce0ee;
  font-size:8.7px;
  font-weight:700;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.cb-ref-person-cell strong.green{
  color:#a7eabb;
}

.cb-ref-status{
  display:inline-flex!important;
  align-items:center;
  gap:5px;
}

.cb-ref-status:before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:#69728e;
}

.cb-ref-status.active:before{
  background:#65ef91;
  box-shadow:0 0 7px rgba(101,239,145,.34);
}

.cb-ref-status.new:before{
  background:#b779ff;
  box-shadow:0 0 7px rgba(183,121,255,.30);
}

/* Milestones */
.cb-ref-milestones{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.58fr);
  gap:12px;
  margin-top:12px;
}

.cb-ref-milestone-main,
.cb-ref-how{
  padding:15px;
}

.cb-ref-milestone-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  margin-top:12px;
}

.cb-ref-milestone{
  min-width:0;
  padding:10px;
  border:1px solid rgba(191,193,247,.075);
  border-radius:11px;
  background:rgba(255,255,255,.014);
}

.cb-ref-milestone.done{
  border-color:rgba(101,239,145,.10);
  background:rgba(66,213,112,.025);
}

.cb-ref-milestone b{
  display:block;
  color:#dfe2ef;
  font-size:10px;
  font-weight:730;
}

.cb-ref-milestone span{
  display:block;
  margin-top:5px;
  color:#6c7692;
  font-size:7.8px;
  line-height:1.25;
}

.cb-ref-milestone.done b{
  color:#a5e8b8;
}

.cb-ref-how-list{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:12px;
}

.cb-ref-how-step{
  display:grid;
  grid-template-columns:25px minmax(0,1fr);
  gap:8px;
  align-items:start;
}

.cb-ref-how-step b{
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border:1px solid rgba(177,119,255,.13);
  border-radius:8px;
  color:#cfb5f5;
  background:rgba(151,91,232,.05);
  font-size:8px;
}

.cb-ref-how-step strong{
  display:block;
  color:#cfd4e6;
  font-size:9px;
  line-height:1.25;
}

.cb-ref-how-step span{
  display:block;
  margin-top:3px;
  color:#69738f;
  font-size:7.8px;
  line-height:1.35;
}

.cb-ref-toast{
  position:fixed;
  z-index:1200;
  left:50%;
  bottom:82px;
  transform:translate3d(-50%,12px,0);
  padding:8px 11px;
  border:1px solid rgba(101,239,145,.15);
  border-radius:10px;
  color:#b9f5c9;
  background:rgba(19,46,40,.94);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  font-size:9px;
  font-weight:700;
  opacity:0;
  pointer-events:none;
  transition:
    opacity .18s ease,
    transform .18s cubic-bezier(.22,1,.36,1);
}

.cb-ref-toast.visible{
  opacity:1;
  transform:translate3d(-50%,0,0);
}

@media (hover:hover) and (pointer:fine){
  .cb-ref-copy-btn:hover,
  .cb-ref-share:hover,
  .cb-ref-filter:hover{
    filter:brightness(1.08);
  }

  .cb-ref-person:hover{
    border-color:rgba(177,119,255,.12);
    background:rgba(145,87,232,.025);
  }
}

@media(max-width:900px){
  .cb-ref-hero{
    grid-template-columns:1fr;
  }

  .cb-ref-command,
  .cb-ref-insights,
  .cb-ref-milestones{
    grid-template-columns:1fr;
  }

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

@media(max-width:768px){
  .cb-ref-hero{
    margin-top:17px;
    padding:16px;
    border-radius:20px;
  }

  .cb-ref-hero h1{
    font-size:23px;
    line-height:1.12;
  }

  .cb-ref-hero-copy > p{
    font-size:11.5px;
  }

  .cb-ref-balance{
    padding:14px;
  }

  .cb-ref-command,
  .cb-ref-stats,
  .cb-ref-insights,
  .cb-ref-milestones{
    margin-top:10px;
  }

  .cb-ref-person{
    grid-template-columns:1.2fr .8fr .8fr;
    grid-template-areas:
      "main tasks earned"
      "main spend status";
    row-gap:8px;
    padding:9px;
  }

  .cb-ref-person-main{
    grid-area:main;
    align-self:stretch;
  }

  .cb-ref-person-cell{
    padding:2px 7px;
  }

  .cb-ref-person-cell:nth-child(2){
    grid-area:tasks;
  }

  .cb-ref-person-cell:nth-child(3){
    grid-area:spend;
  }

  .cb-ref-person-cell:nth-child(4){
    grid-area:earned;
  }

  .cb-ref-person-cell:nth-child(5){
    grid-area:status;
  }

  .cb-ref-milestone-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:480px){
  .cb-ref-hero{
    padding:14px;
  }

  .cb-ref-hero h1{
    font-size:21px;
  }

  .cb-ref-rate-row{
    gap:5px;
  }

  .cb-ref-rate{
    font-size:8.8px;
  }

  .cb-ref-balance-value strong{
    font-size:21px;
  }

  .cb-ref-linkbox{
    grid-template-columns:1fr;
  }

  .cb-ref-copy-btn{
    min-width:0;
    width:100%;
    min-height:38px;
  }

  .cb-ref-share-buttons{
    grid-template-columns:1fr 1fr;
  }

  .cb-ref-stats{
    gap:6px;
  }

  .cb-ref-stat{
    padding:10px;
  }

  .cb-ref-stat strong{
    font-size:15px;
  }

  .cb-ref-funnel-flow{
    grid-template-columns:1fr 1fr;
    row-gap:12px;
  }

  .cb-ref-funnel-step:nth-child(3){
    padding-left:0;
    border-left:0;
  }

  .cb-ref-activity-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .cb-ref-person{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "main main"
      "tasks earned"
      "spend status";
  }

  .cb-ref-person-main{
    padding-bottom:7px;
    border-bottom:1px solid rgba(191,193,247,.055);
  }

  .cb-ref-person-cell:nth-child(2),
  .cb-ref-person-cell:nth-child(3),
  .cb-ref-person-cell:nth-child(4),
  .cb-ref-person-cell:nth-child(5){
    border-left:0;
  }

  .cb-ref-person-cell:nth-child(even){
    border-left:1px solid rgba(191,193,247,.055);
  }
}

@media(prefers-reduced-motion:reduce){
  .cb-ref-toast{
    transition:none;
  }
}


/* 121 — one compact full-width referral growth card. */
.cb-ref-growth-card{
  display:grid;
  grid-template-columns:
    minmax(92px,.72fr)
    minmax(98px,.78fr)
    minmax(104px,.82fr)
    minmax(96px,.76fr)
    minmax(300px,2.15fr)
    minmax(160px,1.18fr);
  align-items:stretch;
  width:100%;
  min-width:0;
  margin-top:12px;
  overflow:hidden;
  border:1px solid rgba(191,193,247,.09);
  border-radius:14px;
  background:
    linear-gradient(
      145deg,
      rgba(28,35,77,.72),
      rgba(18,24,61,.80)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 8px 24px rgba(3,6,28,.06);
}

.cb-ref-growth-card > div{
  min-width:0;
  padding:11px 12px;
}

.cb-ref-growth-card > div + div{
  border-left:1px solid rgba(191,193,247,.065);
}

.cb-ref-growth-stat{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.cb-ref-growth-stat > span,
.cb-ref-growth-label,
.cb-ref-growth-level-head > span{
  color:#727d99;
  font-size:7.6px;
  font-weight:760;
  line-height:1;
  letter-spacing:.065em;
  text-transform:uppercase;
}

.cb-ref-growth-stat > strong{
  display:block;
  margin-top:6px;
  color:#f2f4fb;
  font-size:15px;
  font-weight:760;
  line-height:1;
  letter-spacing:-.22px;
}

.cb-ref-growth-stat > small{
  display:block;
  margin-top:5px;
  color:#7f89a5;
  font-size:7.9px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.cb-ref-growth-stat > small.green{
  color:#96e7ad;
}

.cb-ref-growth-funnel{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.cb-ref-growth-flow{
  display:flex;
  align-items:center;
  min-width:0;
  margin-top:7px;
}

.cb-ref-growth-flow > span{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.cb-ref-growth-flow b{
  color:#eef1f9;
  font-size:10px;
  font-weight:750;
  line-height:1;
  white-space:nowrap;
}

.cb-ref-growth-flow small{
  margin-top:3px;
  color:#77819c;
  font-size:7px;
  line-height:1;
}

.cb-ref-growth-flow > i{
  flex:0 0 auto;
  margin:0 7px;
  color:#59627e;
  font-size:8px;
  font-style:normal;
}

.cb-ref-growth-funnel-note{
  display:block;
  margin-top:6px;
  color:#69748f;
  font-size:7px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.cb-ref-growth-level{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.cb-ref-growth-level-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.cb-ref-growth-level-head b{
  color:#c8b5ff;
  font-size:8.4px;
  font-weight:780;
}

.cb-ref-growth-level > strong{
  display:block;
  margin-top:6px;
  color:#eef0f8;
  font-size:11px;
  font-weight:750;
  line-height:1;
}

.cb-ref-growth-bar{
  width:100%;
  height:4px;
  margin-top:7px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.045);
}

.cb-ref-growth-bar i{
  display:block;
  width:69%;
  height:100%;
  border-radius:inherit;
  background:
    linear-gradient(
      90deg,
      rgba(124,96,244,.82),
      rgba(188,104,255,.94)
    );
}

.cb-ref-growth-level > small{
  display:block;
  margin-top:5px;
  color:#7a849f;
  font-size:7.5px;
  line-height:1.15;
}

@media(max-width:1120px){
  .cb-ref-growth-card{
    grid-template-columns:
      repeat(4,minmax(105px,1fr))
      minmax(300px,2.2fr);
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }

  .cb-ref-growth-card::-webkit-scrollbar{
    display:none;
  }

  .cb-ref-growth-funnel{
    min-width:300px;
  }

  .cb-ref-growth-level{
    min-width:170px;
  }
}

@media(max-width:768px){
  .cb-ref-growth-card{
    grid-template-columns:
      repeat(4,minmax(108px,1fr))
      minmax(290px,2.1fr)
      minmax(170px,1fr);
    border-radius:12px;
  }

  .cb-ref-growth-card > div{
    padding:10px 11px;
  }

  .cb-ref-growth-stat > strong{
    font-size:14px;
  }
}


/* 123 — let the referral growth card wrap to two rows on tighter screens. */
@media(max-width:1120px){
  .cb-ref-growth-card{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    overflow:visible!important;
  }

  .cb-ref-growth-funnel{
    grid-column:1 / span 3!important;
    min-width:0!important;
    border-left:0!important;
    border-top:1px solid rgba(191,193,247,.065)!important;
  }

  .cb-ref-growth-level{
    grid-column:4!important;
    min-width:0!important;
    border-top:1px solid rgba(191,193,247,.065)!important;
  }

  .cb-ref-growth-flow{
    flex-wrap:nowrap!important;
  }

  .cb-ref-growth-funnel-note{
    white-space:normal!important;
  }
}

@media(max-width:760px){
  .cb-ref-growth-card{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .cb-ref-growth-card > .cb-ref-growth-stat:nth-child(3),
  .cb-ref-growth-card > .cb-ref-growth-stat:nth-child(4){
    border-top:1px solid rgba(191,193,247,.065)!important;
  }

  .cb-ref-growth-card > .cb-ref-growth-stat:nth-child(3){
    border-left:0!important;
  }

  .cb-ref-growth-funnel{
    grid-column:1 / -1!important;
  }

  .cb-ref-growth-level{
    grid-column:1 / -1!important;
    border-left:0!important;
  }

  .cb-ref-growth-flow{
    justify-content:space-between!important;
    gap:5px!important;
  }

  .cb-ref-growth-flow > i{
    margin:0 2px!important;
  }
}

@media(max-width:430px){
  .cb-ref-growth-card{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .cb-ref-growth-card > div{
    padding:9px 10px!important;
  }

  .cb-ref-growth-stat > strong{
    font-size:13.5px!important;
  }

  .cb-ref-growth-flow b{
    font-size:9.3px!important;
  }

  .cb-ref-growth-flow small,
  .cb-ref-growth-funnel-note,
  .cb-ref-growth-level > small{
    font-size:6.8px!important;
  }
}


/* 125 — compact referral hero; earnings panel removed. */
.cb-ref-hero{
  grid-template-columns:minmax(0,1fr)!important;
  gap:0!important;
  margin-top:18px!important;
  padding:14px 16px!important;
  border-radius:18px!important;
}

.cb-ref-hero-copy{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  grid-template-areas:
    "kicker title"
    "text text"
    "rates rates"!important;
  column-gap:12px!important;
  align-items:center!important;
}

.cb-ref-kicker{
  grid-area:kicker!important;
  margin:0!important;
  white-space:nowrap!important;
  font-size:8.5px!important;
}

.cb-ref-hero h1{
  grid-area:title!important;
  max-width:none!important;
  margin:0!important;
  font-size:20px!important;
  line-height:1.12!important;
  letter-spacing:-.35px!important;
}

.cb-ref-hero-copy > p{
  grid-area:text!important;
  max-width:none!important;
  margin:7px 0 0!important;
  font-size:10.5px!important;
  line-height:1.42!important;
}

.cb-ref-rate-row{
  grid-area:rates!important;
  gap:6px!important;
  margin-top:9px!important;
}

.cb-ref-rate{
  min-height:24px!important;
  padding:4px 8px!important;
  font-size:8.6px!important;
}

.cb-ref-rate b{
  font-size:9.3px!important;
}

/* Old earnings styles remain inert because the markup is removed. */
.cb-ref-balance{
  display:none!important;
}

@media(max-width:768px){
  .cb-ref-hero{
    margin-top:14px!important;
    padding:13px 14px!important;
  }

  .cb-ref-hero-copy{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "kicker"
      "title"
      "text"
      "rates"!important;
  }

  .cb-ref-kicker{
    margin-bottom:6px!important;
  }

  .cb-ref-hero h1{
    font-size:18px!important;
  }

  .cb-ref-hero-copy > p{
    margin-top:6px!important;
    font-size:10px!important;
  }

  .cb-ref-rate-row{
    margin-top:8px!important;
  }
}

@media(max-width:480px){
  .cb-ref-hero{
    padding:12px!important;
    border-radius:16px!important;
  }

  .cb-ref-hero h1{
    font-size:17px!important;
  }

  .cb-ref-rate{
    min-height:22px!important;
    padding:4px 7px!important;
    font-size:8.2px!important;
  }
}


/* 126 — title sits directly below the Referral network tag. */
.cb-ref-hero-copy{
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-areas:
    "kicker"
    "title"
    "text"
    "rates"!important;
  column-gap:0!important;
}

.cb-ref-kicker{
  margin-bottom:5px!important;
}

.cb-ref-hero h1{
  margin:0!important;
}