/* Referral program box ("Invite friends, get free credits"): referral.js fills it.
   On Home it sits on the right-hand side on wide screens, and under the page on smaller ones. */
.ref-card[hidden] { display: none !important; }
.ref-card {
  box-sizing: border-box;
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;
  border-radius: 18px;
  background: var(--r-surface, #17181b);
  border: 1px solid var(--r-border, rgba(255,255,255,0.08));
  color: var(--r-text, #ececef);
  font-size: 14px;
}
.ref-head { display: flex; gap: 12px; align-items: flex-start; }
.ref-icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--r-accent-soft, rgba(46,230,182,0.12)); color: var(--r-accent-text, var(--r-accent, #2ee6b6));
}
.ref-head h3 { margin: 0 0 4px; font-size: 15px; font-weight: 650; line-height: 1.25; color: var(--r-text, #ececef); }
.ref-head p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--r-text-2, #a9a9b2); }
.ref-head b { color: var(--r-text, #ececef); }

.ref-link { display: flex; gap: 6px; }
.ref-link input {
  flex: 1 1 auto; min-width: 0; padding: 9px 10px; border-radius: 10px;
  border: 1px solid var(--r-border-strong, rgba(255,255,255,0.14)); background: var(--r-bg, #0f1012);
  color: var(--r-text, #ececef); font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ref-copy, .ref-btn {
  flex: 0 0 auto; padding: 9px 14px; border-radius: 10px; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; text-align: center;
  transition: filter 0.15s, background 0.15s;
}
.ref-copy { background: var(--r-accent, #2ee6b6); color: #06201a; min-width: 74px; }
.ref-copy:hover { filter: brightness(1.08); }
.ref-share { display: flex; gap: 6px; }
.ref-btn { flex: 1 1 0; background: var(--r-surface-2, rgba(255,255,255,0.06)); color: var(--r-text, #ececef); }
.ref-btn:hover { background: var(--r-surface-3, rgba(255,255,255,0.1)); }

.ref-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ref-stats div {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px;
  border-radius: 10px; background: var(--r-surface-2, rgba(255,255,255,0.05));
}
.ref-stats b { font-size: 17px; font-weight: 700; color: var(--r-text, #ececef); }
.ref-stats span { font-size: 11px; color: var(--r-text-3, #6b6b74); text-align: center; }
.ref-note { margin: 0; font-size: 12px; color: var(--r-text-3, #6b6b74); }

/* Home: on the right-hand side. */
.launcher-container:has(> .ref-side) { position: relative; }
.ref-side { width: 300px; }
@media (min-width: 1240px) {
  .ref-side { position: absolute; top: 24px; right: 24px; z-index: 2; }
  /* Make room for it, so it never covers the page. */
  .launcher-container:has(> .ref-side:not([hidden])) { padding-right: 348px; }
}
@media (max-width: 1239px) {
  .ref-side { order: 2; width: 100%; max-width: 640px; margin: 24px auto 8px; }
}

/* Credits page: a section of its own. */
.cr-inner .ref-card { margin: 8px 0 24px; }

/* Little message after accepting an invite. */
.ref-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; z-index: 5000;
  max-width: min(440px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 14px;
  background: var(--r-surface, #17181b); color: var(--r-text, #ececef);
  border: 1px solid var(--r-border-strong, rgba(255,255,255,0.14)); box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  font-size: 14px; transition: opacity 0.25s, transform 0.25s;
}
.ref-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Sign-in screen, opened from an invite link. */
.lg-invite[hidden] { display: none !important; }
.lg-invite {
  margin: 4px 0 14px; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.4;
  background: var(--r-accent-soft, rgba(46,230,182,0.12)); color: var(--r-text, #ececef);
  border: 1px solid color-mix(in srgb, var(--r-accent, #2ee6b6) 35%, transparent);
}