/* Base */
.sharebar {
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.sharebar--align-start  { justify-content:flex-start; }
.sharebar--align-center { justify-content:center; }
.sharebar--align-end    { justify-content:flex-end; }

/* Buttons (light theme by default) */
.sharebtn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:999px;
  background:#f8fafc; border:1px solid #e5e7eb;
  box-shadow:0 1px 1px rgba(0,0,0,.04);
  text-decoration:none; cursor:pointer; color:#111827;
  transition:transform .05s, background .2s, box-shadow .2s, border-color .2s;
  line-height:1;
}
.sharebtn:hover { background:#f0f4f8; border-color:#d1d5db; box-shadow:0 2px 6px rgba(0,0,0,.06); transform:translateY(-1px); }
.sharebtn:active { transform:translateY(0); }
.sharebtn .icon { font-size:16px; }
.sharebtn .label { margin-left:6px; font-size:14px; }

/* Brand-accent borders */
.sharebtn.x        { border-color:#11182722; }
.sharebtn.linkedin { border-color:#0a66c222; }
.sharebtn.facebook { border-color:#1877f222; }
.sharebtn.reddit   { border-color:#ff450022; }
.sharebtn.email    { border-color:#6b728022; }
.sharebtn.copy     { border-color:#7c3aed22; }
.sharebtn.print    { border-color:#37415122; }
.sharebtn.webshare { border-color:#2563eb22; }

/* Dark variant */
.sharebar--dark .sharebtn {
  background:#0b0f14; border-color:#263241; color:#e5e7eb;
}
.sharebar--dark .sharebtn:hover { background:#13202f; }

/* Floating */
.sharebar--floating { position:fixed; top:35%; z-index:9999; flex-direction:column; padding:8px; gap:8px; }
.sharebar--left  { left:10px; }
.sharebar--right { right:10px; }
.sharebar--floating .label { display:none; }

/* Tiny toast */
.sharebar-toast {
  margin-left:6px; font-size:.92rem; color:#065f46;
  background:#ecfdf5; border:1px solid #a7f3d0;
  padding:4px 8px; border-radius:4px; opacity:0; transition:opacity .25s;
}
.sharebar-toast.show { opacity:1; }

/* Responsive: hide labels on narrow screens */
@media (max-width:420px){ .sharebtn .label{ display:none; } }