/* V83: referral discovery and cross-theme accessibility polish. */
.skip-link{
  position:fixed;
  z-index:1000;
  inset-inline-start:16px;
  top:10px;
  translate:0 -160%;
  background:#111827;
  color:#fff;
  border:3px solid #fff;
  border-radius:12px;
  padding:11px 16px;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 8px 24px #0006;
}
.skip-link:focus{translate:0 0}

.referral-invite-card{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) 92px;
  gap:12px;
  margin-bottom:12px;
  padding:18px;
  border:1px solid #cfc7ff;
  border-radius:26px;
  color:#242044;
  background:radial-gradient(circle at 10% 5%,#fff8cf 0 9%,transparent 31%),linear-gradient(145deg,#fff,#eeeaff 70%,#dbf8ff);
  box-shadow:0 14px 32px #47338f20;
}
.referral-invite-card::after{content:"";position:absolute;inset-inline-end:-42px;bottom:-62px;width:150px;height:150px;border-radius:50%;background:#754cff12;pointer-events:none}
.referral-invite-copy{grid-column:1;min-width:0;align-self:center}
.referral-kicker{display:inline-block;color:#6948ef;font-size:10px;letter-spacing:.11em;font-weight:900}
.referral-invite-card h3{margin:3px 0 6px;font-size:20px;line-height:1.3}
.referral-invite-card p{margin:0;color:#5d6077;font-size:12px;line-height:1.65}
.referral-invite-card p b{color:#3d2b8c}
.referral-invite-mascot{grid-column:2;grid-row:1;width:92px;height:92px;object-fit:contain;align-self:center;filter:drop-shadow(0 9px 8px #2a1d7b30)}
.referral-progress,.referral-link-label,.referral-link-row,.referral-actions,.referral-invite-card>small,.referral-status{grid-column:1/-1}
.referral-progress{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px;padding:10px 12px;background:#ffffffb8;border:1px solid #dcd7f5;border-radius:15px;font-size:11px}
.referral-progress b{color:#4931c1}.referral-progress>div{grid-column:1/-1;height:7px;border-radius:99px;background:#e2def7;overflow:hidden}.referral-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6948ef,#22c6d6);transition:width .25s ease}
.referral-link-label{font-size:11px;font-weight:900;margin-bottom:-7px}
.referral-link-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;direction:ltr}
.referral-link-input{min-width:0;width:100%;border:2px solid #d9d5ef;background:#fff;color:#292447;border-radius:14px;padding:11px;font:700 11px/1.4 monospace;text-overflow:ellipsis}
.referral-link-input:focus{border-color:#6948ef;outline-offset:2px}
.referral-icon-button{border:0;border-radius:14px;background:#202e65;color:#fff;padding:0 14px;font-weight:900}
.referral-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.referral-invite-card>small{color:#686d83;font-size:10px;line-height:1.55}
.referral-status{min-height:18px;color:#177454!important;font-weight:900!important}

html[data-vibe-theme="app"] .referral-invite-card{
  color:#f7f9ff;
  border-color:#61d4ff;
  background:radial-gradient(circle at 8% 7%,#ffd95d24 0 10%,transparent 31%),linear-gradient(145deg,#172f6d,#24205e 58%,#512a86);
  box-shadow:inset 0 1px 0 #fff3,0 7px 0 #03112b,0 16px 28px #0005;
}
html[data-vibe-theme="app"] .referral-kicker{color:#ffe375}
html[data-vibe-theme="app"] .referral-invite-card h3,html[data-vibe-theme="app"] .referral-invite-card p b{color:#fff}
html[data-vibe-theme="app"] .referral-invite-card p,html[data-vibe-theme="app"] .referral-invite-card>small{color:#c9d8f5}
html[data-vibe-theme="app"] .referral-progress{background:#071a42a8;border-color:#4b78bb;color:#dce8ff}
html[data-vibe-theme="app"] .referral-progress b{color:#ffe375}
html[data-vibe-theme="app"] .referral-progress>div{background:#061531}
html[data-vibe-theme="app"] .referral-link-input{background:#071a42;color:#fff;border-color:#5276bd}
html[data-vibe-theme="app"] .referral-icon-button{background:linear-gradient(#2a8ee1,#164d9e);border:1px solid #7edaff}

html.vibe-font-huge body{font-size:150%}
html.vibe-font-huge :is(button,input,select,textarea,label,p,li,small){font-size:1em!important;line-height:1.7}
html.vibe-text-spacing body{line-height:1.7;letter-spacing:.035em;word-spacing:.12em}
html.vibe-text-spacing :is(p,li,label,button,input,select,textarea,small){line-height:1.75!important;letter-spacing:.035em!important;word-spacing:.12em!important}
html.vibe-highlight-links a{text-decoration:underline!important;text-decoration-thickness:3px!important;text-underline-offset:.2em!important}
html.vibe-simplified-view body{background:#f7f8fc!important}
html.vibe-simplified-view :is(.hero,.tile,.profile-card,.learn-card,.quiz-box,.grammar-box,.friends-card,.referral-invite-card,.site-announcement){box-shadow:none!important}
html.vibe-simplified-view :is(.hero,.site-announcement,.case-banner,.disco-banner,.race-banner)::before,
html.vibe-simplified-view :is(.hero,.site-announcement,.case-banner,.disco-banner,.race-banner)::after{display:none!important}

@media(prefers-contrast:more){
  :root{--vibe-a11y-outline:#000}
  :is(a,button,input,select,textarea):focus-visible{outline:4px solid #000!important;outline-offset:3px!important}
  .referral-invite-card{border-width:2px}
}
@media(forced-colors:active){
  .skip-link,.referral-invite-card,.referral-progress,.referral-link-input,.referral-icon-button{forced-color-adjust:auto;border:2px solid CanvasText}
  .referral-progress i{background:Highlight}
}
@media(max-width:390px){
  .referral-invite-card{grid-template-columns:minmax(0,1fr) 72px;padding:15px}
  .referral-invite-mascot{width:72px;height:72px}
  .referral-invite-card h3{font-size:17px}
  .referral-link-row,.referral-actions{grid-template-columns:1fr}
  .referral-icon-button{min-height:44px}
}

html.vibe-high-contrast .referral-invite-card,
html.vibe-high-contrast[data-vibe-theme="app"] .referral-invite-card{background:#000!important;color:#fff!important;border:3px solid #fff!important;box-shadow:none!important}
html.vibe-high-contrast .referral-invite-card :is(h3,p,b,small,label,.referral-kicker,.referral-status){color:#fff!important}
html.vibe-high-contrast .referral-progress,html.vibe-high-contrast .referral-link-input{background:#000!important;color:#fff!important;border:2px solid #fff!important}