#profile-social-tools { position:relative; display:flex; gap:.35rem; align-items:center; }
#profile-social-tools[hidden] { display:none; }
#favorites-button { position:relative; }
.social-count { position:absolute; top:3px; right:3px; display:flex; align-items:center; gap:2px; padding:0; background:transparent; color:#fff; border:0; font-size:10px; font-weight:800; line-height:1; pointer-events:none; }
.social-icon { display:grid; place-items:center; width:38px; height:38px; padding:0; font-size:25px; background:transparent; color:inherit; border:1px solid transparent; border-radius:6px; }
.social-icon:hover,.social-icon:focus-visible { border-color:var(--accent,#ff315b); }
.social-dropdown { position:absolute; right:0; top:calc(100% + 14px); width:min(350px,calc(100vw - 24px)); max-height:70vh; overflow:auto; z-index:1200; padding:16px; background:#111; color:#fff; border:1px solid #444; border-radius:8px; box-shadow:0 8px 30px #0008; }
.social-dropdown h2 { font-size:1.15rem; margin:0 0 12px; }
.social-row { display:flex; align-items:center; gap:10px; border-bottom:1px solid #333; padding:8px 0; }
.social-profile-link { display:flex; flex:1; align-items:center; gap:12px; text-align:left; background:transparent; color:inherit; border:0; padding:5px; }
.social-profile-link img { width:45px; height:55px; object-fit:cover; border-radius:4px; }
.social-profile-link .social-name { min-width:0; overflow-wrap:anywhere; }
.social-profile-link .social-demographic { font-size:.72rem; line-height:1.6; }
.social-profile-link small { font-weight:normal; color:#aaa; }
.social-profile-link .social-presence { display:inline-flex; align-items:center; gap:5px; }
.social-presence::before { content:''; width:7px; height:7px; flex-shrink:0; border-radius:50%; background:#888; }
.social-profile-link .social-presence.is-online { color:#6ee7a0; }
.social-presence.is-online::before { background:#6ee7a0; }
.profile-favorite { position:static; flex-shrink:0; background:#111b; color:white; }
.profile-favorite.is-favorite,.is-favorite { color:#ff315b; }
.public-profile-card .profile-card-featured .profile-action-bar:has(.profile-favorite) { align-self:stretch; width:100%; }
.profile-action-bar .profile-favorite { margin-right:auto; }
.social-row .profile-favorite { position:static; flex-shrink:0; }
@media(max-width:850px) { .auth-actions .social-icon { padding:0; flex-shrink:0; width:32px; height:34px; } }

/* More specific than the generic After Dark button theme, including hover. */
html[data-after-dark="true"] #profile-social-tools > .social-icon { background:#09090b; color:#fff; border:1px solid #3a3940; box-shadow:none; }
html[data-after-dark="true"] #profile-social-tools > .social-icon:hover,
html[data-after-dark="true"] #profile-social-tools > .social-icon:focus-visible { background:#09090b; color:#fff; border-color:var(--accent,#f02d50); transform:none; box-shadow:none; }
html[data-after-dark="true"] .social-dropdown { background:var(--surface,#111116); border-color:var(--line,rgba(255,255,255,.12)); }
html[data-after-dark="true"] .social-dropdown .social-profile-link,
html[data-after-dark="true"] .social-dropdown .social-profile-link small { color:#fff; }
html[data-after-dark="true"] .social-dropdown .social-name-male { color:#68c9ff; }
html[data-after-dark="true"] .social-dropdown .social-name-female { color:#ff8fba; }
html[data-after-dark="true"] .social-dropdown .social-name-neutral { color:#c4b5fd; }
html[data-after-dark="true"] .social-dropdown .social-profile-link { background:transparent; box-shadow:none; }
html[data-after-dark="true"] .social-dropdown .social-profile-link:hover,
html[data-after-dark="true"] .social-dropdown .social-profile-link:focus-visible { background:var(--surface-light,#18181f); transform:none; box-shadow:none; }
html[data-after-dark="true"] .social-dropdown .profile-favorite,
html[data-after-dark="true"] .profile-action-bar .profile-favorite { color:#fff; background:var(--surface-light,#18181f); border:1px solid #3a3940; box-shadow:none; }
html[data-after-dark="true"] .social-dropdown .profile-favorite:hover,
html[data-after-dark="true"] .social-dropdown .profile-favorite:focus-visible,
html[data-after-dark="true"] .profile-action-bar .profile-favorite:hover,
html[data-after-dark="true"] .profile-action-bar .profile-favorite:focus-visible { color:#fff; background:#25252d; border-color:var(--accent,#f02d50); transform:none; box-shadow:none; }

/* Keep the original white outline heart light, independent of button font weight. */
html[data-after-dark="true"] :is(#favorites-button,.profile-favorite){font-family:Arial,sans-serif;font-size:25px;font-weight:400;color:#fff;text-shadow:none;-webkit-text-stroke:0}