@keyframes skeleton-loading {
  0% { background-color: #f0f4f8; }
  50% { background-color: #e2e8f0; }
  100% { background-color: #f0f4f8; }
}

.share-preview-card.is-loading .share-avatar,
.share-preview-card.is-loading .share-name,
.share-preview-card.is-loading .share-username,
.share-preview-card.is-loading .share-role-badge,
.share-preview-card.is-loading .share-info-item span,
.share-preview-card.is-loading .share-skill-tag,
.share-preview-card.is-loading .share-about,
.share-preview-card.is-loading .share-social-username,
.share-preview-card.is-loading .share-lang-name,
.share-preview-card.is-loading .share-lang-code,
.share-preview-card.is-loading .share-qr-canvas {
  color: transparent !important;
  background: #f0f4f8 !important;
  border-radius: 4px;
  animation: skeleton-loading 1.5s infinite ease-in-out;
  border: none !important;
}

.share-preview-card.is-loading .share-info-item svg,
.share-preview-card.is-loading .share-section-label svg,
.share-preview-card.is-loading .share-social-icon,
.share-preview-card.is-loading .share-lang-ring {
  visibility: hidden;
}

.share-preview-card.is-loading #shareAvatarInitials,
.share-preview-card.is-loading .share-avatar img {
    display: none !important;
}

.share-preview-card.is-loading .share-qr-canvas {
    opacity: 0.1;
}

/* ── Modal Overlay ── */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 19, 32, 0.4);
  backdrop-filter: blur(8px);
  z-index: 3000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.modal.is-open {
  display: flex;
}

/* ── Modal Panel (shared across pages) ── */
.modal-panel {
  background: #fff;
  width: 100%;
  max-width: 600px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(15, 19, 32, 0.18);
  display: flex;
  flex-direction: column;
  margin: auto;
  overflow: hidden;
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}

.modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #11131a;
}

.modal-close {
  border: none;
  background: #f0ede6;
  color: #11131a;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.modal-close:hover {
  box-shadow: 0 8px 20px rgba(17, 19, 26, 0.16);
  transform: translateY(-1px);
}

.modal-close:active {
  transform: scale(0.97);
}

/* ── AI / Generic Modal Content Box ── */
.modal-content {
  background: #fff;
  width: 100%;
  max-width: 480px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(15, 19, 32, 0.18);
  overflow: hidden;
  position: relative;
}

/* ── Share Modal Container ── */
.share-modal-panel {
  position: relative;
  max-width: 600px;
  border-radius: 20px;
  background: #fff;
}

.share-modal-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 16px 20px;
  background: #fff;
}

.share-modal-body {
  padding: 20px;
}

/* ── Profile Share Card ── */
.share-preview-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
  margin: 0 auto;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  border: 1px solid rgba(27, 143, 214, 0.08);
}

/* ── Gradient header strip ── */
.share-card-header {
  height: 42px;
  background: linear-gradient(135deg, #1b8fd6, #4fb4f7);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
  color: #fff;
}

.share-theme-dual .share-card-header {
  background: linear-gradient(135deg, #2c56c9, #4fb4f7);
}

.share-theme-company .share-card-header {
    background: linear-gradient(135deg, #2f7d5b, #4fb4f7);
}

.share-theme-jobseeker .share-card-header {
    background: linear-gradient(135deg, #2c56c9, #6f8eff);
}

.share-header-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* Make it white */
}

.share-header-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: rgba(255,255,255,0.95);
}

/* ── Identity + QR row ── */
.share-top {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
}

.share-identity {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.share-identity-info {
  min-width: 0;
}

.share-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(145deg, #4fb4f7, #1b8fd6);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(27, 143, 214, 0.28);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.share-theme-dual .share-avatar {
  background: linear-gradient(145deg, #6f8eff, #2c56c9);
  box-shadow: 0 6px 16px rgba(44, 86, 201, 0.28);
}

.share-theme-company .share-avatar {
    background: linear-gradient(145deg, #2f7d5b, #69c49a);
    box-shadow: 0 6px 16px rgba(47, 125, 91, 0.28);
}

.share-theme-jobseeker .share-avatar {
    background: linear-gradient(145deg, #6f8eff, #2c56c9);
    box-shadow: 0 6px 16px rgba(44, 86, 201, 0.28);
}

.share-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.share-avatar.has-photo img {
  display: block;
}

.share-avatar.has-photo span {
  opacity: 0;
}

.share-name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.share-username {
  margin: 1px 0 4px;
  font-size: 11px;
  color: var(--ink-400);
}

.share-role-badge {
  display: inline-block;
  background: rgba(27, 143, 214, 0.1);
  color: #1b8fd6;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.share-theme-dual .share-role-badge {
  background: linear-gradient(90deg, rgba(27,143,214,0.12) 0%, rgba(44,86,201,0.12) 100%);
  color: #2c56c9;
}

.share-theme-company .share-role-badge {
    background: rgba(47, 125, 91, 0.1);
    color: #2f7d5b;
}

.share-theme-jobseeker .share-role-badge {
    background: rgba(44, 86, 201, 0.1);
    color: #2c56c9;
}

/* ── QR block ── */
.share-qr-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: -4px; /* Move slightly to the left as requested */
}

.share-qr-canvas {
  border-radius: 8px;
  border: 1px solid #e3f0fb;
  display: block;
}

.share-theme-company .share-qr-canvas { border-color: #f1fdf7; }
.share-theme-jobseeker .share-qr-canvas,
.share-theme-dual .share-qr-canvas { border-color: #f2f5ff; }

.share-qr-link {
  margin: 0;
  font-size: 8px; /* Slightly smaller as requested */
  color: #1b8fd6;
  font-weight: 600;
  letter-spacing: 0.1px;
  text-align: center;
  white-space: nowrap; /* Stay in one line */
  max-width: 110px; /* More space for the link */
}

.share-theme-dual .share-qr-link { color: #2c56c9; }
.share-theme-company .share-qr-link { color: #2f7d5b; }
.share-theme-jobseeker .share-qr-link { color: #2c56c9; }

/* ── Sections ── */
.share-sections {
  padding: 0 14px 10px;
  display: grid;
  gap: 0;
}

.share-section {
  border-top: 1px solid #edf4fb;
  padding: 8px 0 4px;
  display: grid;
  gap: 6px;
}

.share-theme-company .share-section { border-top-color: #f1fdf7; }
.share-theme-jobseeker .share-section,
.share-theme-dual .share-section { border-top-color: #f2f5ff; }

.share-section-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #1b8fd6;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.share-theme-dual .share-section-label { color: #2c56c9; }
.share-theme-company .share-section-label { color: #2f7d5b; }
.share-theme-jobseeker .share-section-label { color: #2c56c9; }

.share-section-label svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ── Info grid ── */
.share-info-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.share-info-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--ink-700);
  min-width: 0;
  max-width: calc(50% - 5px);
  overflow: hidden;
}

.share-info-item--wide { max-width: 100%; }

.share-info-item svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  color: #1b8fd6; /* Default learner blue */
}

.share-theme-learner .share-info-item svg { color: #1b8fd6; opacity: 0.6; }
.share-theme-company .share-info-item svg { color: #2f7d5b; opacity: 0.6; }
.share-theme-jobseeker .share-info-item svg,
.share-theme-dual .share-info-item svg { color: #2c56c9; opacity: 0.6; }

.share-info-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── About ── */
.share-about {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-600);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Skills ── */
.share-skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.share-skill-tag {
  background: #f1f7fd;
  color: #1b8fd6;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
}

.share-theme-dual .share-skill-tag { background: #f2f5ff; color: #2c56c9; }
.share-theme-company .share-skill-tag { background: #f1fdf7; color: #2f7d5b; }
.share-theme-jobseeker .share-skill-tag { background: #f2f5ff; color: #2c56c9; }

.share-skill-tag.verified {
  background: linear-gradient(160deg, #f6fffb 0%, #e8f7ef 100%);
  color: #155b39;
  border: 0.5px solid #bfe5d1;
}

.share-skill-tag.pending {
  background: linear-gradient(160deg, #fffaf3 0%, #fff1df 100%);
  color: #8f560f;
  border: 0.5px solid #ffd9ae;
}

/* ── Languages ── */
.share-lang-circles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.share-lang-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.share-lang-ring {
  --size: 38px;
  --thickness: 4px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#4fb4f7 calc(var(--progress) * 1%), #e3f0fb 0);
  position: relative;
  flex-shrink: 0;
}

.share-theme-dual .share-lang-ring { background: conic-gradient(#4c51bf calc(var(--progress) * 1%), #eef2ff 0); }
.share-theme-jobseeker .share-lang-ring { background: conic-gradient(#2c56c9 calc(var(--progress) * 1%), #eef2ff 0); }
.share-theme-company .share-lang-ring { background: conic-gradient(#2f7d5b calc(var(--progress) * 1%), #f0fdf4 0); }

.share-lang-ring::after {
  content: "";
  position: absolute;
  inset: var(--thickness);
  background: #fff;
  border-radius: 50%;
}

.share-lang-code {
  position: relative;
  z-index: 1;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-800);
  line-height: 1;
  text-transform: uppercase;
}

.share-theme-dual .share-lang-code { color: #4c51bf; }
.share-theme-jobseeker .share-lang-code { color: #2c56c9; }
.share-theme-company .share-lang-code { color: #2f7d5b; }

.share-lang-name {
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-400);
  text-transform: capitalize;
  max-width: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

/* ── Social Media ── */
.share-social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  margin-top: 4px;
}

.share-social-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-700);
}

.share-social-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  background-color: #1b8fd6;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  flex-shrink: 0;
  opacity: 0.7;
}

.share-theme-dual .share-social-icon { background-color: #2c56c9; }
.share-theme-company .share-social-icon { background-color: #2f7d5b; }
.share-theme-jobseeker .share-social-icon { background-color: #2c56c9; }

/* Icons using data URLs for simplicity or standard SVG paths */
.platform-linkedin {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z'/%3E%3C/svg%3E");
}
.platform-twitter, .platform-x {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath d='M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.055-4.425 5.055H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath d='M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.055-4.425 5.055H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z'/%3E%3C/svg%3E");
}
.platform-facebook {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath d='M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath d='M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z'/%3E%3C/svg%3E");
}
.platform-instagram {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath d='M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.281.11-.705.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath d='M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.281.11-.705.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z'/%3E%3C/svg%3E");
}
.platform-github {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E");
}


.share-social-username {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Share Modal Actions ── */
.share-action-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    text-decoration: none;
}

.pill:hover {
    transform: translateY(-1px);
    filter: brightness(0.95);
}

.pill.primary {
    color: #fff;
}

.share-theme-learner .pill.primary { background: linear-gradient(135deg, #4fb4f7, #1b8fd6) !important; color: #fff !important; }
.share-theme-learner .pill.primary:hover { background: linear-gradient(135deg, #1b8fd6, #1578b5) !important; box-shadow: 0 4px 12px rgba(27, 143, 214, 0.25) !important; }

.share-theme-jobseeker .pill.primary { background: linear-gradient(135deg, #6f8eff, #2c56c9) !important; color: #fff !important; }
.share-theme-jobseeker .pill.primary:hover { background: linear-gradient(135deg, #2c56c9, #2347a8) !important; box-shadow: 0 4px 12px rgba(44, 86, 201, 0.25) !important; }

.share-theme-company .pill.primary { background: linear-gradient(135deg, #69c49a, #2f7d5b) !important; color: #fff !important; }
.share-theme-company .pill.primary:hover { background: linear-gradient(135deg, #5bb68c, #266b4d) !important; box-shadow: 0 4px 12px rgba(47, 125, 91, 0.25) !important; }

.share-theme-dual .pill.primary { background: linear-gradient(135deg, #6f8eff, #2c56c9) !important; color: #fff !important; }
.share-theme-dual .pill.primary:hover { background: linear-gradient(135deg, #2c56c9, #2347a8) !important; box-shadow: 0 4px 12px rgba(44, 86, 201, 0.25) !important; }

.pill.secondary {
    background: #f1f5f9;
    color: #475569;
}

.share-theme-company .pill.secondary { 
    background: rgba(47, 125, 91, 0.05) !important; 
    color: #2f7d5b !important; 
    border: 1px solid rgba(47, 125, 91, 0.1) !important; 
}
.share-theme-company .pill.secondary:hover { 
    background: rgba(47, 125, 91, 0.1) !important; 
    border-color: rgba(47, 125, 91, 0.2) !important; 
}

.share-action-row .pill {
    flex: 1;
    gap: 6px;
    font-size: 13px;
    padding: 10px;
}

/* ── Open Profile Page extra link ── */
.share-extra-link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    text-align: center;
    font-size: 13px;
}

.share-theme-learner .share-extra-link {
    background: rgba(27, 143, 214, 0.08);
    color: #1b8fd6;
    border: 1px solid rgba(27, 143, 214, 0.15);
}
.share-theme-learner .share-extra-link:hover {
    background: rgba(27, 143, 214, 0.15);
    border-color: rgba(27, 143, 214, 0.25);
}

.share-theme-jobseeker .share-extra-link {
    background: rgba(44, 86, 201, 0.08);
    color: #2c56c9;
    border: 1px solid rgba(44, 86, 201, 0.15);
}
.share-theme-jobseeker .share-extra-link:hover {
    background: rgba(44, 86, 201, 0.15);
    border-color: rgba(44, 86, 201, 0.25);
}

.share-theme-company .share-extra-link {
    background: rgba(47, 125, 91, 0.05);
    color: #2f7d5b;
    border: 1px solid rgba(47, 125, 91, 0.1);
}
.share-theme-company .share-extra-link:hover {
    background: rgba(47, 125, 91, 0.1);
    border-color: rgba(47, 125, 91, 0.2);
}

.share-theme-dual .share-extra-link {
    background: rgba(44, 86, 201, 0.08);
    color: #2c56c9;
    border: 1px solid rgba(44, 86, 201, 0.15);
}
.share-theme-dual .share-extra-link:hover {
    background: rgba(44, 86, 201, 0.15);
    border-color: rgba(44, 86, 201, 0.25);
}

@media (max-width: 480px) {
  .share-action-row {
    flex-direction: column;
  }
}