.shg-share-card {
  max-width: 520px;
}

.shg-share-body {
  padding-top: 6px;
}

.shg-share-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.shg-share-code {
  font-size: 12px;
  color: var(--muted);
}

.shg-share-forum {
  font-size: 12px;
  color: var(--green);
  text-decoration: none;
}

.shg-share-forum:hover {
  text-decoration: underline;
}

.shg-share-actions {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}

.shg-share-actions .shg-btn {
  flex: 1 1 50%;
}

.shg-share-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.shg-share-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  user-select: none;
}

.shg-share-item:hover {
  border-color: rgba(249, 115, 22, 0.45);
}

.shg-share-item::before {
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M12%202a10%2010%200%20100%2020%2010%2010%200%20000-20zm3.9%207.3-1.6%207.5c-.1.5-.5.6-.9.4l-2.6-1.9-1.2%201.1c-.1.1-.2.2-.4.2l.2-2.9%205.3-4.8c.2-.2%200-.3-.3-.2L8%2012.9l-2.8-.9c-.6-.2-.6-.6.1-.9l10.9-4.2c.5-.2.9.1.7.4z%27/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M12%202a10%2010%200%20100%2020%2010%2010%200%20000-20zm3.9%207.3-1.6%207.5c-.1.5-.5.6-.9.4l-2.6-1.9-1.2%201.1c-.1.1-.2.2-.4.2l.2-2.9%205.3-4.8c.2-.2%200-.3-.3-.2L8%2012.9l-2.8-.9c-.6-.2-.6-.6.1-.9l10.9-4.2c.5-.2.9.1.7.4z%27/%3E%3C/svg%3E") center/contain no-repeat;
}

#shg-share-whatsapp::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M12%202a9.9%209.9%200%2000-8.6%2014.8L2%2022l5.3-1.4A9.9%209.9%200%201012%202zm5.7%2014.2c-.2.6-1%201.2-1.6%201.3-.4.1-.9.2-2.9-.6-2.7-1.1-4.5-3.8-4.6-3.9-.1-.1-1.1-1.5-1.1-2.9s.7-2%201-2.3c.2-.2.5-.2.7-.2h.5c.2%200%20.4-.1.6.4.2.5.7%201.8.7%201.9.1.1.1.3%200%20.4-.1.2-.2.3-.3.5-.1.1-.2.2-.1.4.1.2.6%201.1%201.3%201.8.9.9%201.7%201.2%201.9%201.3.1.1.3.1.4-.1l.9-1.2c.1-.2.3-.2.5-.1.2.1%201.4.7%201.6.8.2.1.4.2.5.3.1.1.1.6-.1%201.2z%27/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M12%202a9.9%209.9%200%2000-8.6%2014.8L2%2022l5.3-1.4A9.9%209.9%200%201012%202zm5.7%2014.2c-.2.6-1%201.2-1.6%201.3-.4.1-.9.2-2.9-.6-2.7-1.1-4.5-3.8-4.6-3.9-.1-.1-1.1-1.5-1.1-2.9s.7-2%201-2.3c.2-.2.5-.2.7-.2h.5c.2%200%20.4-.1.6.4.2.5.7%201.8.7%201.9.1.1.1.3%200%20.4-.1.2-.2.3-.3.5-.1.1-.2.2-.1.4.1.2.6%201.1%201.3%201.8.9.9%201.7%201.2%201.9%201.3.1.1.3.1.4-.1l.9-1.2c.1-.2.3-.2.5-.1.2.1%201.4.7%201.6.8.2.1.4.2.5.3.1.1.1.6-.1%201.2z%27/%3E%3C/svg%3E") center/contain no-repeat;
}

#shg-share-x::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M18.9%202H22l-6.8%207.8L23%2022h-6.3l-5-6.1L6.2%2022H3l7.3-8.4L2.8%202H9l4.6%205.7L18.9%202zm-1.1%2018h1.8L8.1%203.9H6.2L17.8%2020z%27/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M18.9%202H22l-6.8%207.8L23%2022h-6.3l-5-6.1L6.2%2022H3l7.3-8.4L2.8%202H9l4.6%205.7L18.9%202zm-1.1%2018h1.8L8.1%203.9H6.2L17.8%2020z%27/%3E%3C/svg%3E") center/contain no-repeat;
}

#shg-share-facebook::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M22%2012a10%2010%200%2010-11.6%209.9v-7H8.1V12h2.3V9.7c0-2.3%201.4-3.6%203.5-3.6%201%200%202%20.2%202%20.2v2.2h-1.1c-1.1%200-1.4.7-1.4%201.4V12h2.5l-.4%202.9h-2.1v7A10%2010%200%200022%2012z%27/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M22%2012a10%2010%200%2010-11.6%209.9v-7H8.1V12h2.3V9.7c0-2.3%201.4-3.6%203.5-3.6%201%200%202%20.2%202%20.2v2.2h-1.1c-1.1%200-1.4.7-1.4%201.4V12h2.5l-.4%202.9h-2.1v7A10%2010%200%200022%2012z%27/%3E%3C/svg%3E") center/contain no-repeat;
}

#shg-share-linkedin::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M4.98%203.5A2.5%202.5%200%20115%208%202.5%202.5%200%20014.98%203.5zM3%209h4v12H3V9zm7%200h3.8v1.6h.1c.5-1%201.8-2%203.7-2%204%200%204.7%202.6%204.7%206V21h-4v-5.3c0-1.3%200-2.9-1.8-2.9s-2.1%201.4-2.1%202.8V21h-4V9z%27/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M4.98%203.5A2.5%202.5%200%20115%208%202.5%202.5%200%20014.98%203.5zM3%209h4v12H3V9zm7%200h3.8v1.6h.1c.5-1%201.8-2%203.7-2%204%200%204.7%202.6%204.7%206V21h-4v-5.3c0-1.3%200-2.9-1.8-2.9s-2.1%201.4-2.1%202.8V21h-4V9z%27/%3E%3C/svg%3E") center/contain no-repeat;
}

@media (min-width: 520px) {
  .shg-share-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}