.lf-social-bar {
  background: var(--lf-surface, #ffffff);
  color: var(--lf-ink, #101f35);
  border-bottom: 1px solid var(--lf-line, #cbd9e5);
}

.lf-social-bar .lf-social-bar-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding-block: 6px;
}

.lf-social-caption {
  margin: 0;
  color: var(--lf-muted, #536477);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.lf-social-links {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.lf-social-link {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--lf-ink, #101f35);
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

.lf-social-link:hover {
  background: var(--lf-hover, #e2eef6);
  color: var(--lf-ink, #101f35);
}

.lf-social-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: none;
}

.lf-social-community {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border: 1px solid var(--lf-line, #cbd9e5);
  border-radius: 999px;
  background: var(--lf-soft, #eaf2f8);
  color: var(--lf-ink, #101f35);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.lf-social-community:hover {
  background: var(--lf-hover, #e2eef6);
  color: var(--lf-ink, #101f35);
  border-color: var(--lf-secondary-hover-border, #426a86);
}

.lf-social-community-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.lf-social-community-platform {
  color: var(--lf-muted, #536477);
  font-weight: 400;
}

.lf-social-community-arrow {
  width: 14px;
  height: 14px;
  flex: none;
}

.lf-social-link:focus-visible,
.lf-social-community:focus-visible {
  outline: 3px solid var(--lf-focus, #087792);
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .lf-social-bar .lf-social-bar-inner { gap: 12px; }
  .lf-social-caption { display: none; }
  .lf-social-links { margin-left: 0; }
  .lf-social-community { margin-left: auto; }
  .lf-social-community-platform { display: none; }
}

@media (max-width: 480px) {
  .lf-social-bar .lf-social-bar-inner { width: calc(100% - 24px); gap: 8px; }
  .lf-social-links { gap: 0; }
  .lf-social-community { flex: 0 1 auto; gap: 6px; padding-inline: 10px; }
  .lf-social-community > .lf-social-icon { display: none; }
  .lf-social-community-label { display: block; overflow: hidden; text-overflow: ellipsis; }
}

@media (prefers-reduced-motion: reduce) {
  .lf-social-link, .lf-social-community { transition: none; }
}

@media (forced-colors: active) {
  .lf-social-bar { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .lf-social-link { background: Canvas; color: LinkText; }
  .lf-social-community { background: Canvas; color: LinkText; border-color: LinkText; }
  .lf-social-community-platform { color: LinkText; }
  .lf-social-link:hover, .lf-social-community:hover { background: Canvas; color: LinkText; outline: 1px solid Highlight; }
  .lf-social-link:focus-visible, .lf-social-community:focus-visible { outline-color: Highlight; }
}