:root{
  --su-share-bg:#101012;
  --su-share-fg:#fff;
  --su-share-accent:var(--accent,#7c5cff);
}

/* wrapper + trigger */
.su-share-wrap{position:relative}
.su-share-btn{
  position:absolute; right:12px; bottom:12px; z-index:10;
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:999px; color:#fff; background:rgba(16,16,18,.78);
  border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
}
.su-share-btn:hover{opacity:.96}
.su-share-btn svg{width:22px;height:22px}

/* backdrop + panel */
.su-share-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  z-index:1000; opacity:0; pointer-events:none; transition:opacity .18s;
}
.su-share-backdrop[data-open="true"]{opacity:1; pointer-events:auto}

.su-share-panel{
  position:fixed; z-index:1001;
  width:min(420px, calc(100vw - 24px));
  background:var(--su-share-bg); color:var(--su-share-fg);
  border:1px solid #ffffff22; border-radius:16px; padding:8px;
  box-shadow:0 22px 48px rgba(0,0,0,.5);
  opacity:0; transform:translateY(-4px) scale(.985);
  transition:opacity .18s, transform .18s;
}
.su-share-panel[data-open="true"]{opacity:1; transform:translateY(0) scale(1)}

/* bottom sheet on mobile */
.su-share-panel.is-mobile{
  left:0!important; right:0!important; bottom:0!important; top:auto!important;
  max-width:none; border-radius:16px 16px 0 0;
  transform:translateY(100%); max-height:60vh; overflow:auto;
  padding-bottom:max(8px, env(safe-area-inset-bottom));
}
.su-share-panel.is-mobile[data-open="true"]{transform:translateY(0)}

/* LIST layout */
.su-share-list{display:flex; flex-direction:column; gap:6px; padding:6px}
.su-share-item{
  display:grid; grid-template-columns:44px 1fr auto; align-items:center;
  gap:12px; padding:10px 12px; min-height:56px;
  border-radius:12px; background:#151518; border:1px solid #ffffff14;
  cursor:pointer; transition:background .12s ease, border-color .12s ease;
}
.su-share-item:hover{background:#1b1b21; border-color:#ffffff22}
.su-share-item:active{transform:none}


.su-share-ic{
  width:36px;height:36px; display:grid; place-items:center;
  border-radius:10px; background:transparent; border:0;
}
/* Make inline SVG icons inherit the button color (white) */
.su-share-ic svg {
  width:22px; height:22px; display:block; color:#fff;
}

/* Force all shapes inside those SVGs to use currentColor */
.su-share-ic svg path,
.su-share-ic svg circle,
.su-share-ic svg rect,
.su-share-ic svg line,
.su-share-ic svg polyline,
.su-share-ic svg polygon {
  fill: currentColor;
  stroke: currentColor;
}
.su-share-ic img.si{
  width:22px; height:22px; display:block; filter:invert(1); /* make Simple Icons white */
}

/* Hover affordance, subtle */
.su-share-item:hover .su-share-ic{ background:#1f1f25 }

/* Tighter, more balanced rows */
.su-share-item{
  display:grid; grid-template-columns:40px 1fr auto; align-items:center;
  gap:12px; padding:10px 12px; min-height:56px;
  border-radius:12px; background:#151518; border:1px solid #ffffff14;
}
@media (max-width:360px){
  .su-share-item{ grid-template-columns:38px 1fr auto; min-height:52px; padding:9px 10px }
}

/* text */
.su-share-block{min-width:0}
.su-share-title{
  font-weight:700; font-size:14px; line-height:1.1; letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.su-share-sub{
  font-size:12px; opacity:.78; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* right hint (e.g., “Copied”) */
.su-share-hint{font-size:12px; opacity:.7}