body:has(.um-social-shell),
body:has(.um-login-gate) {
  margin: 0;
  background: var(--um-bg);
  color: var(--um-text);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  font-family: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body:has(.um-social-shell) .umda-toggle {
  top: auto !important;
  right: 18px !important;
  bottom: 18px !important;
}

.um-social-shell h1,
.um-social-shell h2,
.um-social-shell h3,
.um-login-gate h1,
.um-login-gate h2,
.um-login-gate h3 {
  font-family: "Rubik", "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
}

html:has(.um-social-shell),
html:has(.um-login-gate) {
  margin-top: 0 !important;
}

.um-navitem,
.um-shortcut,
.um-contact {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 8px;
  border-radius: var(--um-radius);
  color: var(--um-text);
  text-decoration: none;
  font-weight: 750;
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.um-navitem:hover,
.um-shortcut:hover,
.um-contact:hover {
  background: var(--um-chip-active-bg, #ffe4e6);
}

.um-menu-row {
  min-width: 0;
}

.um-menu-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.um-menu-copy small {
  color: var(--um-muted);
  line-height: 1.35;
}

.um-navitem > .um-menu-mark,
.um-sidebar .um-navitem > span:first-child,
.um-tab-icon,
.um-action-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 999px;
  background: rgba(225, 29, 72, 0.08);
  color: var(--um-primary-dark);
}

.um-navitem > .um-menu-mark svg,
.um-sidebar .um-navitem svg,
.um-tab-icon svg,
.um-action-icon svg,
.um-menu-icon svg,
.um-notification-icon svg,
.um-account-icon svg,
.um-group-icon svg,
.um-saved-icon svg,
.um-event-art svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.um-menu-icon svg,
.um-account-icon svg,
.um-saved-icon svg {
  width: 19px;
  height: 19px;
}

.um-navitem.is-current {
  background: #dbeafe;
  color: var(--um-primary-dark);
}

.um-menu-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--um-line);
  border-radius: 8px;
}

/* Two classes on purpose: the generic .um-overlay rule (380px) lives in media-core.css, which loads
   after this file since the CSS split. At one class each it won on source order and squeezed the
   two-column Menu to 380px -- the main column shrank to 101px, cutting "Dashboard" off and wrapping
   every description a word per line. */
.um-overlay.um-menu-overlay {
  width: min(760px, calc(100vw - 36px));
}

.um-menu-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 14px;
  padding: 14px;
  max-height: calc(100vh - 92px);
  overflow: auto;
  background: var(--um-surface-strong);
  border: 1px solid var(--um-line);
  border-radius: var(--um-radius);
  box-shadow: 0 18px 48px rgba(32, 35, 31, 0.16);
}

.um-menu-main,
.um-menu-create {
  display: grid;
  align-content: start;
  gap: 12px;
}

.um-menu-panel h2,
.um-menu-panel h3 {
  margin: 0;
}

.um-menu-main section {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--um-line);
}

.um-menu-link {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 0;
  border-radius: var(--um-radius);
  padding: 9px;
  background: transparent;
  color: var(--um-text);
  text-align: left;
  cursor: pointer;
}

.um-menu-link:hover {
  background: var(--um-chip-active-bg, #ffe4e6);
}

.um-menu-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(225, 29, 72, 0.08);
  color: var(--um-primary-dark);
  font-weight: 900;
}

.um-menu-create {
  padding: 14px;
  border-radius: var(--um-radius);
  background: var(--um-chip-bg, #fff7f8);
}

.um-social-share-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(54px, 1fr));
  gap: 10px;
}

.um-social-target {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--um-text);
  text-decoration: none;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.um-social-target span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #fff;
  background: #374151;
  font-size: 20px;
  font-weight: 950;
}

.um-social-target small {
  max-width: 68px;
  overflow: hidden;
  color: var(--um-text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.um-social-target.is-embed span {
  background: var(--um-chip-active-bg, #ffe4e6);
  color: #4c0519;
}

.um-social-target.is-facebook span {
  background: #315a9f;
}

.um-social-target.is-reddit span {
  background: #d9481f;
}

.um-social-target.is-x span {
  background: #101315;
}

.um-social-target.is-whatsapp span {
  background: #1f9d55;
}

.um-social-target.is-messenger span {
  background: #2563eb;
}

.um-social-target.is-tiktok span {
  background: #111827;
}

.um-social-shell h1,
.um-social-shell h2,
.um-social-shell h3,
.um-login-gate h1,
.um-login-gate h2,
.um-login-gate h3 {
  font-weight: 500;
  letter-spacing: 0;
}

.um-social-shell h1,
.um-login-gate h1 {
  font-size: clamp(17px, 1.6vw, 20px) !important;
  line-height: 1.22;
}

.um-social-shell h2 {
  font-size: clamp(14px, 1.35vw, 16px) !important;
  line-height: 1.26;
}

.um-social-shell h3 {
  font-size: 13.5px !important;
  line-height: 1.28;
}

.um-social-shell :where(button, input, textarea, a),
.um-login-gate :where(button, input, textarea, a) {
  font-family: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
}

.um-social-shell :where(.um-btn, .um-primary-link, .um-icon-btn, .um-tab, .um-action, .um-tool, .um-navitem, .um-shortcut, .um-contact, .um-link-button, .um-text-button),
.um-login-gate :where(.um-primary-link, .um-btn, .um-icon-btn) {
  font-size: 13px;
  font-weight: 500 !important;
  letter-spacing: 0;
}

.um-social-shell :where(strong, b, label, button, .um-feed-notice, .um-story-theme, .um-story-view span),
.um-login-gate :where(strong, b, label, button) {
  font-weight: 500;
}

.um-social-shell :where(.um-card strong, .um-author strong, .um-group-mini strong, .um-friend-name, .um-listing-card strong, .um-saved-content strong, .um-birthday-row strong) {
  font-size: 13px;
  font-weight: 500 !important;
}

.um-social-shell :where(.um-group-post p, .um-group-mini span, .um-card small, .um-card-body p, .um-muted) {
  font-size: 13px;
}

.um-social-shell :where(.um-group-post-art, .um-story-view strong) {
  font-size: 18px !important;
  font-weight: 500 !important;
}