/* Extracted from recruiter-dashboard/referrals/index.html. */
/* ── Hero invite card ── */
    .referral-hero-invite {
      background: linear-gradient(135deg, var(--surface-dark) 0%, #064e3b 100%);
      color: #fff;
      border-radius: var(--radius-lg);
      padding: 40px 36px;
    }
    .referral-hero-invite__title {
      font-size: 1.625rem;
      font-weight: 700;
      margin: 0 0 8px;
      line-height: 1.25;
    }
    .referral-hero-invite__desc {
      margin: 0 0 24px;
      opacity: 0.85;
      max-width: 540px;
      line-height: 1.6;
    }
    .referral-link-row {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
    }
    .referral-link-row__input {
      flex: 1;
      min-width: 0;
      padding: 10px 14px;
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,0.1);
      color: #fff;
      font-size: 0.875rem;
      font-family: inherit;
    }
    .referral-link-row__input::selection { background: rgba(255,255,255,0.3); }
    .referral-link-row__copy {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 18px;
      background: #fff;
      color: var(--surface-dark);
      border: 0;
      border-radius: var(--radius-sm);
      font-weight: 600;
      font-size: 0.875rem;
      cursor: pointer;
      transition: background 0.15s;
      white-space: nowrap;
    }
    .referral-link-row__copy:hover { background: var(--accent-light); }
    .referral-link-row__copy svg {
      width: 16px; height: 16px;
      stroke: currentColor; fill: none;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    }
    .referral-share-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .referral-share-btn--ghost {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      border: 1px solid rgba(255,255,255,0.3);
      border-radius: var(--radius-sm);
      background: transparent;
      color: #fff;
      font-size: 0.8125rem;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }
    .referral-share-btn--ghost:hover {
      background: rgba(255,255,255,0.1);
      border-color: rgba(255,255,255,0.5);
    }
    .referral-share-btn--ghost svg {
      width: 16px; height: 16px;
      fill: currentColor;
    }

    /* ── Stats strip ── */
    .recruiter-stats-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .recruiter-stat-card {
      background: var(--surface);
      border-radius: var(--radius-md);
      padding: 24px 20px;
      text-align: center;
      box-shadow: var(--shadow-soft);
    }
    .recruiter-stat-card__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px; height: 40px;
      border-radius: 10px;
      margin-bottom: 12px;
    }
    .recruiter-stat-card__icon svg {
      width: 20px; height: 20px;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
      fill: none;
    }
    .recruiter-stat-card__icon--blue {
      background: #dbeafe;
      color: #2563eb;
    }
    .recruiter-stat-card__icon--green {
      background: #d1fae5;
      color: #059669;
    }
    .recruiter-stat-card__icon--violet {
      background: var(--lavender);
      color: var(--violet);
    }
    .recruiter-stat-card__value {
      display: block;
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--ink-strong);
      line-height: 1.2;
    }
    .recruiter-stat-card__label {
      display: block;
      font-size: 0.8125rem;
      color: var(--ink-faint);
      margin-top: 4px;
    }

    /* ── Referral history table ── */
    .referral-table-card {
      background: var(--surface);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }
    .referral-table-card__header {
      padding: 20px 24px 16px;
    }
    .referral-table-card__title {
      font-size: 1.125rem;
      font-weight: 700;
      margin: 0;
      color: var(--ink-strong);
    }
    .referral-table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .referral-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.875rem;
    }
    .referral-table th {
      text-align: left;
      padding: 10px 24px;
      font-weight: 600;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--ink-faint);
      border-bottom: 1px solid var(--line);
      white-space: nowrap;
    }
    .referral-table td {
      padding: 14px 24px;
      border-bottom: 1px solid var(--line-soft);
      white-space: nowrap;
    }
    .referral-table tbody tr:hover {
      background: var(--surface-muted);
    }
    .referral-table tbody tr:last-child td {
      border-bottom: 0;
    }
    .badge-status {
      display: inline-block;
      padding: 3px 10px;
      border-radius: var(--radius-pill);
      font-size: 0.75rem;
      font-weight: 600;
    }
    .badge-status--active {
      background: #d1fae5;
      color: #065f46;
    }
    .badge-status--pending {
      background: #fef3c7;
      color: #92400e;
    }

    /* ── How it works ── */
    .how-it-works {
      margin-top: 8px;
    }
    .how-it-works__title {
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--ink-strong);
      margin: 0 0 16px;
    }
    .how-it-works__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .how-step {
      background: var(--surface);
      border-radius: var(--radius-md);
      padding: 24px 20px;
      box-shadow: var(--shadow-soft);
    }
    .how-step__num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px; height: 32px;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      font-weight: 700;
      font-size: 0.875rem;
      margin-bottom: 12px;
    }
    .how-step__title {
      font-size: 0.9375rem;
      font-weight: 700;
      color: var(--ink-strong);
      margin: 0 0 6px;
    }
    .how-step__desc {
      font-size: 0.8125rem;
      color: var(--ink-soft);
      margin: 0;
      line-height: 1.55;
    }

    /* ── Responsive ── */
    @media (max-width: 767px) {
      .referral-hero-invite { padding: 24px 18px; }
      .referral-hero-invite__title { font-size: 1.25rem; }
      .referral-link-row { flex-direction: column; }
      .recruiter-stats-strip { grid-template-columns: 1fr; }
      .how-it-works__grid { grid-template-columns: 1fr; }
      .dashboard-main { min-width: 0; overflow-x: hidden; }
      .referral-page-stack { max-width: 100%; min-width: 0; }
    }
    @media (min-width: 768px) and (max-width: 1023px) {
      .recruiter-stats-strip { grid-template-columns: repeat(3, 1fr); }
      .how-it-works__grid { grid-template-columns: repeat(3, 1fr); }
    }

    /* ── Page-level spacing ── */
    .referral-page-stack {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }