/* BG-WHITE-R1.01: white invite page canvas; existing layout retained. */
.invite-page{background:#fff}
.invite-hero{
  min-height:9.25rem;
  border-radius:1.125rem;
  padding:1.25rem 1.0625rem;
  display:grid;
  grid-template-columns:minmax(0,1fr) 6rem;
  align-items:center;
  gap:0.625rem;
  overflow:hidden;
  position:relative;
  background:linear-gradient(135deg,#4e92ff,#7667f2);
  color:#fff;
  box-shadow:0 0.4375rem 1.25rem rgba(69,106,186,.16);
}
.invite-hero::after{
  content:"";
  position:absolute;
  width:9.6875rem;
  height:9.6875rem;
  border-radius:50%;
  right:-3.75rem;
  top:-3.875rem;
  background:rgba(255,255,255,.08);
}
.invite-hero-copy{position:relative;z-index:1;min-width:0}
.invite-hero h1{
  margin:0.5625rem 0 0.3125rem;
  font-size:1.5rem;
  line-height:1.15;
  font-weight:500;
}
.invite-hero p{
  margin:0;
  max-width:17.5rem;
  color:rgba(255,255,255,.84);
  
  line-height:1.55;
}
.invite-hero-art{
  position:relative;
  z-index:1;
  width:5.5rem;
  height:5.5rem;
  justify-self:end;
  border-radius:1.75rem;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.12);
}
.invite-hero-art svg{
  width:3.625rem;
  height:3.625rem;
  
  stroke:#fff;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.invite-panel{
  border:1px solid #e8eef6;
  border-radius:1.0625rem;
  background:#fff;
  box-shadow:0 0.25rem 0.875rem rgba(51,77,111,.06);
}
.invite-panel{padding:0.9375rem}
.invite-link-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:0.5rem;
}
.invite-link-row input{
  min-width:0;
  height:2.5rem;
  border:1px solid #dfe8f3;
  border-radius:0.625rem;
  padding:0 0.6875rem;
  background:#fbfdff;
  color:#6780a3;
  font-size:0.6875rem;
  font-weight:500;
  outline:none;
}
.invite-link-row button{
  height:2.5rem;
  padding:0 0.75rem;
  border:1px solid #cfe0fa;
  border-radius:0.625rem;
  background:#fff;
  color:#3f83f8;
  font-size:0.6875rem;
  font-weight:800;
}





@media(min-width:768px){
  .invite-content{padding-inline:1.375rem;align-items:start}
}


/* BG-INV-R1.01: white + blue reference layout, scoped to invite only.
   No global navigation, game or authentication style changes. */
.invite-content{display:flex;flex-direction:column;gap:0.3125rem;padding:0.75rem clamp(0.5rem,2.6vw,1.5rem) 0.75rem;min-width:0;font-weight:500}
.invite-content *{box-sizing:border-box}
.invite-content button{-webkit-tap-highlight-color:transparent;cursor:pointer}
.invite-content button:focus-visible,.invite-content input:focus-visible{outline:0.125rem solid #236dff;outline-offset:0.125rem}
.invite-hero{flex:none;min-height:9.6875rem;padding:1.125rem 1.125rem;border-radius:1.1875rem;grid-template-columns:minmax(0,1fr) 7.1875rem;gap:0.1875rem;background:linear-gradient(117deg,#428cff,#6a5bf0 100%);box-shadow:0 0.4375rem 1.1875rem rgba(56,88,186,.12)}
.invite-hero:after{right:-1.125rem;top:-5rem;width:10.3125rem;height:10.3125rem}
.invite-hero-copy{z-index:2}
.invite-hero h1{font-size:1.5625rem;margin:0.8125rem 0 0.5rem}
.invite-hero p{font-size:0.75rem;max-width:none;line-height:1.58;color:#fff}
.invite-hero-art{width:7rem;height:7rem;border-radius:50%;background:rgba(255,255,255,.045);opacity:.91;align-self:center}
.invite-hero-art svg{width:6.5rem;height:6.5rem;color:#fff;fill:none;stroke:none}
.invite-content .invite-panel{padding:0.75rem 0.75rem 0.8125rem;border:1px solid #eaf0f9;border-radius:1.25rem;box-shadow:0 0.25rem 1.125rem rgba(36,63,100,.055)}
.invite-content .invite-overview{padding-bottom:0.6875rem}
.invite-heading{display:flex;align-items:center;gap:0.5625rem;min-width:0}
.invite-heading-icon{display:flex;flex:0 0 2.1875rem;width:2.1875rem;height:2.1875rem;align-items:center;justify-content:center;background:#ecf4ff;color:#2774fe;border-radius:0.75rem}
.invite-heading-icon svg{width:1.25rem;height:1.25rem}
.invite-heading-icon-warm{background:#fff2eb;color:#f44766}
.invite-heading-copy{flex:1;min-width:0}
.invite-heading-copy h2{font-size:0.9375rem;color:#153358;line-height:1.4;margin:0 0 1px;font-weight:500}
.invite-heading-copy p{font-size:0.625rem;color:#8ca3c4;margin:0;line-height:1.5}
.invite-heading-action{text-decoration:none;white-space:nowrap;border:0;background:transparent;padding:0.25rem 0 0.25rem 0.25rem;font-size:0.75rem;font-weight:500;color:#1973fd}
.invite-heading-action > [aria-hidden="true"]{font-size:1.0625rem;margin-left:0.125rem;vertical-align:-1px}
.invite-metrics{display:grid;background:linear-gradient(135deg,#f2f7ff,#f7f9fe);border-radius:0.9375rem;margin-top:0.5rem;border:1px solid #f0f4fb}
.invite-team-metrics{grid-template-columns:1fr 1fr;padding:0.75rem 0.25rem;min-height:5.75rem;gap:0}
.invite-team-metrics .invite-metric{display:flex;align-items:center;justify-content:center;gap:0.5625rem;min-width:0;padding:0 0.3125rem;text-align:center}
.invite-team-metrics .invite-metric+.invite-metric{border-inline-start:1px solid #d2e0f4}
.invite-metric-icon{width:2.1875rem;height:2.1875rem;flex:none;display:grid;place-items:center;color:#3881ff}
.invite-metric-icon svg{width:2.1875rem;height:2.1875rem}
.invite-metric-direct{color:#9778ee}
.invite-metric-label{display:block;max-width:100%;font-size:0.75rem;color:#123256;white-space:normal;overflow-wrap:anywhere}
.invite-metric-value{white-space:nowrap;line-height:1.2;margin-top:0.25rem}
.invite-metric-value strong{color:#2879ff;font-size:0.9375rem;font-weight:500}
.invite-metric-value small{font-size:0.75rem;margin-inline-start:0.125rem;color:#193a65}
.invite-section-divider{height:1px;background:#e7eef8;margin:0.6875rem 0}
.invite-income-metrics{grid-template-columns:repeat(3,minmax(0,1fr));padding:0.625rem 0.125rem 0.6875rem}
.invite-income-item{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 1px;gap:0.25rem;color:#17365a}
.invite-income-item+.invite-income-item{border-inline-start:1px solid #d2e0f4}
.invite-income-icon{font-size:1.5625rem;line-height:1.15}
.invite-income-item>span:not(.invite-income-icon){max-width:100%;font-size:0.75rem;white-space:normal;overflow-wrap:anywhere}
.invite-income-item strong{color:#1671f6;font-size:0.9375rem;line-height:1.25;font-weight:500}
.invite-content .invite-share-panel{padding-top:0.8125rem}
.invite-share-panel .invite-link-row{margin-top:0.5625rem;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0.375rem}
.invite-share-panel .invite-link-row input{width:100%;height:2.6875rem;padding:0 0.5625rem;color:#1d385b;font-size:0.625rem;border:1px solid #e1e9f4;border-radius:0.6875rem;background:#f8faff;min-width:0;text-overflow:ellipsis}
.invite-share-panel .invite-link-row .invite-copy-share{font-size:0.6875rem;height:2.6875rem;padding:0 0.75rem;white-space:nowrap;background:linear-gradient(135deg,#408cfc,#1769f8);border:0;color:#fff;border-radius:0.6875rem;box-shadow:0 0.1875rem 0.5rem rgba(30,100,232,.18);font-weight:500}
.invite-copy-share span{font-size:1rem;vertical-align:-1px}
.invite-social-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0.1875rem;margin-top:0.625rem}
.invite-social-grid button{min-width:0;background:#fff;border:1px solid #edf1f8;border-radius:0.625rem;box-shadow:0 0.125rem 0.4375rem rgba(29,51,80,.03);min-height:3.8125rem;padding:0.3125rem 0 0.1875rem;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:0.25rem}
.invite-social-grid button small{font-size:0.5rem;color:#254060;letter-spacing:-.04em;white-space:nowrap}
.invite-social-symbol{height:1.8125rem;width:1.8125rem;display:grid;place-items:center;border-radius:50%}
.invite-rate-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.375rem;margin-top:0.6875rem}
.invite-rate{min-width:0;min-height:4.25rem;padding:0.4375rem 0.1875rem;border-radius:0.75rem;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.125rem}
.invite-rate span{max-width:100%;font-size:0.75rem;font-weight:500;white-space:normal;overflow-wrap:anywhere}
.invite-rate strong{font-size:1.4375rem;line-height:1.2}
.rate-one{background:#fff0ec;border:1px solid #ffcbbb;color:#bf2635}
.rate-two{background:#e9f3ff;border:1px solid #bfdcfe;color:#1560cc}
.rate-three{background:#e8f8ed;border:1px solid #bfeccf;color:#117548}
@media(max-width:380px){
 .invite-hero{grid-template-columns:minmax(0,1fr) 5.875rem;padding:1.0625rem 0.875rem}
 .invite-hero-art{width:5.875rem;height:5.875rem}
 .invite-hero-art svg{width:5.875rem;height:5.875rem}
 .invite-metric-icon,.invite-metric-icon svg{width:1.875rem;height:1.875rem}
 .invite-heading-copy p{font-size:0.5625rem}
 .invite-social-grid{gap:0.125rem}
 .invite-social-grid button small{font-size:0.4375rem}
 .invite-social-symbol{height:1.6875rem;width:1.6875rem}
}
@media screen and (min-width:768px){
  .invite-content{display:flex;flex-direction:column;gap:0.3125rem;padding:0.875rem 1.375rem 0.75rem}
}

@media screen and (min-width:1200px){.invite-content{padding-inline:1.75rem}}

/* BG-INV-R1.03: merge invitation/share and rebate rules into one white card.
   Scoped to the invite view. Keep CTA/buttons and the fixed nav behavior untouched. */
.invite-content .invite-share-rules{padding:0.75rem 0.75rem 0.125rem}
.invite-share-rules .invite-segment{background:transparent;border:0;box-shadow:none;border-radius:0;margin:0;padding:0;min-width:0}
.invite-content .invite-share-rules .invite-share-panel{padding-top:0}
.invite-share-rules .invite-rules{margin-top:0.75rem;padding-top:0.75rem;border-top:1px solid #e7eef8}
/* Remove stacked bottom padding. The actual fixed bottom nav safe-area is retained. */
.invite-page{padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom) + 0.5rem)}
.invite-page .invite-content{padding-bottom:0}

/* BG-CLEAN-R1.01: one source of truth for the approved compact copy notice. */
.invite-page #inviteToast{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2147483000;
  box-sizing:border-box;width:max-content;min-width:0;max-width:min(82vw,16.25rem);
  margin:0;padding:0.5rem 0.875rem;border-radius:0.625rem;background:rgba(25,36,54,.88);
  color:#fff;font-size:0.75rem;font-weight:500;line-height:1.4;text-align:center;
  overflow-wrap:anywhere;pointer-events:none;box-shadow:0 0.5rem 1.5rem rgba(0,0,0,.18);
}

html[dir="rtl"] .invite-heading-action > [aria-hidden="true"]{display:inline-block;transform:scaleX(-1)}