/* Extracted from jobseeker-dashboard/referrals/index.html. */
body { background: linear-gradient(180deg, #eef2f0 0%, #f3f5f7 320px) !important; background-repeat: no-repeat !important; }
    /* ── Hero invite card (matches recruiter referrals) ── */
    .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__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; 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; }
    .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; }
    /* ── Referral table (matches recruiter) ── */
    .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; }
    .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; }
    /* ── 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; } }

    /* Stats strip: 4 columns on desktop. The default .referral-stats-strip
       in dashboard.css is repeat(3, 1fr) which made the 4th card
       (Auto-apply Credits) wrap to a second row. Now 4-up on ≥900px,
       2-up on tablet, 1-up below 480px. (Ticket: t1778250195675) */
    .referral-stats-strip {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (min-width: 900px) {
      .referral-stats-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }
	    @media (max-width: 479px) {
	      .referral-stats-strip {
	        grid-template-columns: minmax(0, 1fr);
	      }
	    }

    .referrals-empty-state {
      display: none;
      align-items: flex-start;
      gap: 18px;
      margin: 18px 0;
      padding: 24px;
      background: #ffffff;
      border: 1px solid rgba(1, 56, 44, 0.1);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-soft);
    }
    .referrals-empty-state[hidden] { display: none !important; }
    body[data-state="new-user-empty"] .referrals-empty-state[hidden] { display: flex !important; }
    .referrals-empty-state__icon {
      width: 48px;
      height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      color: #047857;
      background: rgba(5, 150, 105, 0.1);
      border-radius: 14px;
    }
    .referrals-empty-state__icon svg { width: 24px; height: 24px; }
    .referrals-empty-state__eyebrow {
      margin: 0 0 6px;
      color: #047857;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .referrals-empty-state__title {
      margin: 0 0 6px;
      color: var(--ink-strong);
      font-size: 1.25rem;
      line-height: 1.25;
    }
    .referrals-empty-state__copy {
      margin: 0;
      max-width: 620px;
      color: var(--ink-muted);
      line-height: 1.6;
    }
    body[data-state="new-user-empty"] .referral-hero-invite__source,
    body[data-state="new-user-empty"] .referral-stats-strip,
    body[data-state="new-user-empty"] .referral-table-card {
      display: none !important;
    }
    .referrals-state-strip {
      position: fixed;
      right: 18px;
      bottom: 18px;
      left: 18px;
      z-index: 200;
      display: flex;
      align-items: center;
      gap: 12px;
      width: max-content;
      max-width: calc(100vw - 36px);
      margin-left: auto;
      padding: 8px 10px;
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(1, 56, 44, 0.1);
      border-radius: 999px;
      box-shadow: 0 8px 24px rgba(1, 56, 44, 0.1), 0 1px 0 rgba(1, 56, 44, 0.04);
      font-size: 11.5px;
    }
    .referrals-state-strip__label {
      flex-shrink: 0;
      padding: 0 4px 0 8px;
      color: rgba(1, 56, 44, 0.5);
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .referrals-state-strip__chips {
      display: flex;
      align-items: center;
      gap: 4px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .referrals-state-strip__chips::-webkit-scrollbar { display: none; }
    .referrals-state-strip__chip {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 11px;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 999px;
      color: rgba(1, 56, 44, 0.72);
      font: inherit;
      font-weight: 500;
      cursor: pointer;
      white-space: nowrap;
      transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
    }
    .referrals-state-strip__chip:hover {
      background: color-mix(in srgb, var(--chip-accent, #059669) 8%, transparent);
    }
    .referrals-state-strip__chip.is-active {
      color: #01382c;
      background: color-mix(in srgb, var(--chip-accent, #059669) 14%, #ffffff);
      border-color: color-mix(in srgb, var(--chip-accent, #059669) 28%, transparent);
      font-weight: 700;
    }
    .referrals-state-strip__dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--chip-accent, #059669);
      opacity: 0.55;
    }
    .referrals-state-strip__chip.is-active .referrals-state-strip__dot { opacity: 1; }
    @media (max-width: 767px) {
      .referrals-empty-state { flex-direction: column; padding: 20px; }
      .referrals-state-strip {
        right: 10px;
        bottom: calc(76px + env(safe-area-inset-bottom));
        left: 10px;
        max-width: calc(100vw - 20px);
      }
      .referrals-state-strip__label { display: none; }
    }