/**
 * SwissFans 3.0 — Ultimate Premium Pass
 * Loaded after final-polish.css. UI only.
 * Cache bump: up20260724c
 */

/* ------------------------------------------------------------------ */
/* #topMenu avatar trigger — identisch zu layouts/header/header.php,   */
/* dort bislang nur inline definiert; hier zusaetzlich fuer Kontexte   */
/* (z.B. Premium-Home-Feed via sf_main.php), die header.php nicht      */
/* einbinden, aber denselben #topMenu/getMenu-Hook verwenden           */
/* (sf_user_menu(), themes/default/sf/php/auth_ui.php). Keine neue     */
/* Business-Logik, reine Wiederverwendung bestehender Werte.           */
/* ------------------------------------------------------------------ */

.sf-header-avatar-trigger .i_h_in {
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sf-header-avatar-trigger__img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* ------------------------------------------------------------------ */
/* Cookie — full text, no horizontal clip                              */
/* ------------------------------------------------------------------ */

html {
  overflow-x: clip;
}

.gdprcookie,
body.sf-ui-consistency-v2 .gdprcookie,
body.chat_p_body .gdprcookie,
body.sf-messenger-v2 .gdprcookie,
body.sf-notifications-v2 .gdprcookie {
  position: fixed !important;
  z-index: 2147483000 !important;
  box-sizing: border-box !important;
  left: 0.75rem !important;
  right: auto !important;
  bottom: calc(5.15rem + env(safe-area-inset-bottom, 0px)) !important;
  width: calc(100% - 1.5rem) !important;
  max-width: calc(100% - 1.5rem) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0.85rem 0.95rem !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: linear-gradient(165deg, #221733, #181025) !important;
  color: #fff !important;
  box-shadow: 0 18px 40px rgba(8, 2, 18, 0.55) !important;
  transform: none !important;
}

@media (min-width: 768px) {
  .gdprcookie,
  body.sf-ui-consistency-v2 .gdprcookie,
  body.chat_p_body .gdprcookie,
  body.sf-messenger-v2 .gdprcookie {
    left: auto !important;
    right: 1.25rem !important;
    bottom: 1.25rem !important;
    width: min(22rem, calc(100% - 2.5rem)) !important;
    max-width: 22rem !important;
  }
}

.gdprcookie h1,
.gdprcookie h2,
.gdprcookie p,
body.sf-ui-consistency-v2 .gdprcookie h1,
body.sf-ui-consistency-v2 .gdprcookie h2,
body.sf-ui-consistency-v2 .gdprcookie p {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: 100% !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  color: #fff !important;
}

.gdprcookie h1,
.gdprcookie h2 {
  font-size: 0.95rem !important;
  line-height: 1.35 !important;
  margin: 0 0 0.4rem !important;
}

.gdprcookie-buttons,
.gdprcookie-buttons.flex_,
body.sf-ui-consistency-v2 .gdprcookie-buttons,
body.sf-ui-consistency-v2 .gdprcookie-buttons.flex_ {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0.45rem !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0.75rem !important;
  box-sizing: border-box !important;
}

@media (min-width: 768px) {
  .gdprcookie-buttons,
  .gdprcookie-buttons.flex_,
  body.sf-ui-consistency-v2 .gdprcookie-buttons {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
}

.gdprcookie-buttons button,
.gdprcookie-buttons.flex_ button,
body.sf-ui-consistency-v2 .gdprcookie-buttons button {
  flex: 0 0 auto !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0.55rem 0.85rem !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-sizing: border-box !important;
}

@media (min-width: 768px) {
  .gdprcookie-buttons button,
  body.sf-ui-consistency-v2 .gdprcookie-buttons button {
    width: auto !important;
    flex: 1 1 auto !important;
  }
}

/* ------------------------------------------------------------------ */
/* Messenger — desktop list rail + mobile fullscreen (no 100vw)        */
/* ------------------------------------------------------------------ */

body.sf-messenger-v2 {
  overflow-x: clip !important;
  max-width: 100% !important;
}

body.sf-messenger-v2 .wrapper,
body.sf-messenger-v2 .th_middle,
body.sf-messenger-v2 .pageMiddle {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  overflow-x: clip !important;
}

body.sf-messenger-v2 .leftSticky,
body.sf-messenger-v2 .i_left_container,
body.sf-messenger-v2 .mobile_left,
body.sf-messenger-v2 .sf-bottom-nav {
  display: none !important;
}

body.sf-messenger-v2 .i_chat_wrapper {
  display: flex !important;
  width: 100% !important;
  max-width: 1480px !important;
  margin-inline: auto !important;
  min-height: calc(100dvh - 64px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

@media (min-width: 768px) {
  body.sf-messenger-v2 .chat_left_container {
    width: 400px !important;
    min-width: 380px !important;
    max-width: 420px !important;
    flex-shrink: 0 !important;
  }
}

body.sf-messenger-v2 .i_message_wrapper {
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

body.sf-messenger-v2 .i_message_wrapper:hover {
  transform: translateX(2px);
  border-color: rgba(225, 34, 146, 0.2);
}

/* Empty-state / decorative images must never exceed viewport */
body.sf-messenger-v2 .noWithOutConversation,
body.sf-messenger-v2 .with_without_conversation,
body.sf-messenger-v2 .chat_empty {
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body.sf-messenger-v2 .chat_empty {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.25rem !important;
  background: transparent !important;
  background-color: transparent !important;
}

body.sf-messenger-v2 .chat_empty_logo {
  width: 160px !important;
  max-width: 160px !important;
  height: 160px !important;
  max-height: 160px !important;
  margin: 0 auto !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  flex-shrink: 0 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

body.sf-messenger-v2 .noWithOutConversation img,
body.sf-messenger-v2 .with_without_conversation img,
body.sf-messenger-v2 .chat_middle_container > img,
body.sf-messenger-v2 .chat_right_container img.no_message,
body.sf-messenger-v2 .chat_middle_wrapper img {
  display: block !important;
  max-width: min(240px, 72%) !important;
  width: auto !important;
  height: auto !important;
  margin-inline: auto !important;
  object-fit: contain !important;
}

@media (max-width: 767px) {
  body.sf-messenger-v2,
  body.sf-messenger-v2 .header,
  body.sf-messenger-v2 .i_header,
  body.sf-messenger-v2 .i_header_in,
  body.sf-messenger-v2 .wrapper,
  body.sf-messenger-v2 .i_chat_wrapper,
  body.sf-messenger-v2 .chat_right_container,
  body.sf-messenger-v2 .chat_middle_wrapper,
  body.sf-messenger-v2 .chat_middle_container,
  body.sf-messenger-v2 .chat_left_container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  body.sf-messenger-v2 .i_chat_wrapper {
    display: flex !important;
    flex-direction: column !important;
    min-height: calc(100dvh - 52px) !important;
    height: calc(100dvh - 52px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  body.sf-messenger-v2 .chat_left_container {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 100 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    background: #0e071a !important;
    border: 0 !important;
  }

  body.sf-messenger-v2 .chat_left_container.chatDisplay {
    display: flex !important;
    flex-direction: column !important;
  }

  body.sf-messenger-v2 .chat_right_container,
  body.sf-messenger-v2 .chat_middle_container {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  body.sf-messenger-v2 .i_chat_wrapper:has(.chat_left_container.chatDisplay) .chat_right_container,
  body.sf-messenger-v2 .i_chat_wrapper:has(.chat_left_container.chatDisplay) .chat_middle_container {
    display: none !important;
  }

  /* Empty states only — never apply to active conversation pane */
  body.sf-messenger-v2 .noWithOutConversation,
  body.sf-messenger-v2 .with_without_conversation,
  body.sf-messenger-v2 .chat_empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 1.5rem 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body.sf-messenger-v2 .chat_empty_logo {
    width: 148px !important;
    max-width: 148px !important;
    height: 148px !important;
    max-height: 148px !important;
  }

  body.sf-messenger-v2 .noWithOutConversation img,
  body.sf-messenger-v2 .with_without_conversation img {
    max-width: min(200px, 58%) !important;
  }

  body.sf-messenger-v2 .cList {
    display: inline-flex !important;
  }

  body.sf-messenger-v2 .gdprcookie {
    left: 0.75rem !important;
    right: auto !important;
    width: calc(100% - 1.5rem) !important;
    max-width: calc(100% - 1.5rem) !important;
  }
}

/* Chat composer: kill legacy white .nanosSend / input strip (style.css). */
body.sf-messenger-v2 .nanosSend,
body.sf-messenger-v2 .nanos,
body.sf-messenger-v2 .nanosSecret,
body.chat_p_body .nanosSend,
body.chat_p_body .nanos,
body.chat_p_body .nanosSecret {
  background: transparent !important;
  background-color: transparent !important;
}

body.sf-messenger-v2 .message_send_form_wrapper,
body.sf-messenger-v2 .message_form_footer,
body.sf-messenger-v2 .message_form_box,
body.sf-messenger-v2 .c_message_form,
body.sf-messenger-v2 .chat_message_input_box,
body.chat_p_body .message_send_form_wrapper,
body.chat_p_body .message_form_footer,
body.chat_p_body .message_form_box,
body.chat_p_body .c_message_form,
body.chat_p_body .chat_message_input_box {
  background: #181025 !important;
  background-color: #181025 !important;
}

body.sf-messenger-v2 .message_text_textarea,
body.sf-messenger-v2 textarea.m_t_box,
body.sf-messenger-v2 #messageText,
body.sf-messenger-v2 .messageText,
body.chat_p_body .message_text_textarea,
body.chat_p_body textarea.m_t_box,
body.chat_p_body #messageText,
body.chat_p_body .messageText {
  background: rgba(255, 255, 255, 0.06) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #f7eef8 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ------------------------------------------------------------------ */
/* Notifications                                                       */
/* ------------------------------------------------------------------ */

body.sf-notifications-v2 .notificationsContainer,
body.sf-notifications-v2 .sf-notifications-panel {
  min-height: min(52vh, 480px);
}

body.sf-notifications-v2 .i_notification_wrpper,
body.sf-notifications-v2 .i_notification_wrapper {
  transition: background 180ms ease, transform 180ms ease;
}

body.sf-notifications-v2 .i_notification_wrpper:hover,
body.sf-notifications-v2 .i_notification_wrapper:hover {
  background: rgba(255, 255, 255, 0.045);
  transform: translateY(-1px);
}

@media (max-width: 767px) {
  body.sf-notifications-v2 .leftSticky,
  body.sf-notifications-v2 .i_left_container {
    display: none !important;
  }

  body.sf-notifications-v2 .pageMiddle,
  body.sf-notifications-v2 .th_middle,
  body.sf-notifications-v2 .wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    overflow-x: clip !important;
  }

  body.sf-notifications-v2 .pageMiddle {
    padding: 0.55rem 0.7rem calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.sf-notifications-v2 .notificationsContainer {
    min-height: auto;
    border-radius: 16px;
  }

  /*
   * Compact dropdown under the topbar — NOT a fullscreen sheet.
   * Panels mount on <body> on mobile (see sfAppendHeaderPanel), so fixed
   * coords are viewport-relative and stay clear of backdrop-filter traps.
   */
  .i_general_box_notifications_container.generalBox,
  .i_general_box_message_notifications_container.generalBox,
  .i_general_box_container.generalBox,
  body.sf-ui-consistency-v2 .i_general_box_notifications_container.generalBox,
  body.sf-ui-consistency-v2 .i_general_box_message_notifications_container.generalBox,
  body.sf-ui-consistency-v2 .i_general_box_container.generalBox {
    position: fixed !important;
    /* Do NOT set `inset` here — it is a shorthand and would wipe top/right/left. */
    top: calc(env(safe-area-inset-top, 0px) + 62px) !important;
    right: 10px !important;
    left: 10px !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: min(52vh, 420px) !important;
    margin: 0 !important;
    transform: none !important;
    border-radius: 16px !important;
    border: 1px solid #2e1a32 !important;
    z-index: 2000 !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: #1c0f1f !important;
    box-shadow: 0 18px 40px rgba(8, 2, 18, 0.55) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .i_general_box_notifications_container.generalBox .btest,
  .i_general_box_message_notifications_container.generalBox .btest,
  .i_general_box_container.generalBox .btest {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: min(52vh, 420px) !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
}

/* ------------------------------------------------------------------ */
/* Message + Notification dropdowns — force dark brand chrome           */
/* (legacy style.css paints white header #fff / footer #F0F1F5)         */
/* ------------------------------------------------------------------ */

.i_general_box_message_notifications_container.generalBox,
.i_general_box_notifications_container.generalBox {
  background: #1c0f1f !important;
  border: 1px solid #2e1a32 !important;
  color: #f7eef8 !important;
}

.i_general_box_message_notifications_container.generalBox .i_box_messages_header,
.i_general_box_notifications_container.generalBox .i_box_messages_header {
  background: #150a16 !important;
  color: #f7eef8 !important;
  border-bottom: 1px solid #2e1a32 !important;
  font-size: 0.95rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  padding: 0.85rem 0.95rem !important;
}

.i_general_box_message_notifications_container.generalBox .i_message_full_screen a,
.i_general_box_notifications_container.generalBox .i_message_full_screen a {
  color: #a993ab !important;
}

.i_general_box_message_notifications_container.generalBox .i_message_full_screen svg,
.i_general_box_notifications_container.generalBox .i_message_full_screen svg {
  fill: #a993ab !important;
  width: 18px !important;
  height: 18px !important;
}

.i_general_box_message_notifications_container.generalBox .i_message_wrapper,
.i_general_box_notifications_container.generalBox .i_notification_wrapper,
.i_general_box_notifications_container.generalBox .i_notification_wrpper {
  background: transparent !important;
  border-radius: 10px !important;
  color: #f7eef8 !important;
}

.i_general_box_message_notifications_container.generalBox .i_message_wrapper:hover,
.i_general_box_notifications_container.generalBox .i_notification_wrapper:hover,
.i_general_box_notifications_container.generalBox .i_notification_wrpper:hover {
  background: rgba(233, 30, 140, 0.1) !important;
}

.i_general_box_message_notifications_container.generalBox .i_message_wrapper.notSeenYet,
.i_general_box_notifications_container.generalBox .notSeenYet {
  background: rgba(233, 30, 140, 0.08) !important;
}

.i_general_box_message_notifications_container.generalBox .i_message_owner_name,
.i_general_box_notifications_container.generalBox .i_message_owner_name,
.i_general_box_notifications_container.generalBox .i_not_owner_name {
  color: #f7eef8 !important;
}

.i_general_box_message_notifications_container.generalBox .i_message_i,
.i_general_box_notifications_container.generalBox .i_not_text,
.i_general_box_notifications_container.generalBox .i_message_i {
  color: #a993ab !important;
}

.i_general_box_message_notifications_container.generalBox .footer_container,
.i_general_box_notifications_container.generalBox .footer_container,
.i_general_box_message_notifications_container.generalBox .footer_container.messages,
.i_general_box_notifications_container.generalBox .footer_container.messages {
  background: #150a16 !important;
  border-top: 1px solid #2e1a32 !important;
  border-radius: 0 0 16px 16px !important;
  padding: 0.75rem 0.9rem !important;
}

.i_general_box_message_notifications_container.generalBox .footer_container.messages a,
.i_general_box_notifications_container.generalBox .footer_container.messages a,
.i_general_box_message_notifications_container.generalBox .messages a,
.i_general_box_notifications_container.generalBox .messages a {
  color: #e91e8c !important;
  font-weight: 650 !important;
  font-size: 0.9rem !important;
}

.i_general_box_message_notifications_container.generalBox .no_not_here,
.i_general_box_notifications_container.generalBox .no_not_here {
  color: #a993ab !important;
  background: transparent !important;
}

@media (min-width: 768px) {
  /*
   * Diese Panels werden per JS (inora.js) als Kind-Element direkt in den
   * 40x40px Icon-Button (#topNotifications / #topMessages / #topPoints /
   * #topMenu, .sf-top-bar__btn--badge / .i_header_btn_item
   * { position: relative }) eingefuegt. Deshalb ist der Icon-Button selbst
   * das "containing block" fuer position:absolute — Prozent-Breiten (z.B.
   * "92%"/"100%") beziehen sich also auf die 40px des Buttons, nicht auf
   * den Viewport. .i_general_box_container wird sowohl vom Nutzermenü
   * (#topMenu/getMenu) als auch vom Coins-/Punkte-Widget (#topPoints)
   * verwendet — identischer Bug, identischer Fix: FESTE Pixel-Breite statt
   * eines Prozentwerts (UI-only, keine Logikänderung).
   */
  .i_general_box_notifications_container.generalBox,
  .i_general_box_message_notifications_container.generalBox,
  .i_general_box_container.generalBox,
  body.sf-ui-consistency-v2 .i_general_box_notifications_container.generalBox,
  body.sf-ui-consistency-v2 .i_general_box_message_notifications_container.generalBox,
  body.sf-ui-consistency-v2 .i_general_box_container.generalBox {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: 300px !important;
    max-width: calc(100vw - 24px) !important;
    max-height: min(72vh, 560px) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    transform: none !important;
    z-index: 2000 !important;
    background: #1c0f1f !important;
    border: 1px solid #2e1a32 !important;
    box-shadow: 0 20px 48px rgba(8, 2, 18, 0.55) !important;
  }

  .i_general_box_notifications_container.generalBox .btest,
  .i_general_box_message_notifications_container.generalBox .btest,
  .i_general_box_container.generalBox .btest {
    overflow-y: auto !important;
  }
}

/* ------------------------------------------------------------------ */
/* Profile dropdown (#topMenu, header_menu.php) — full dark theme      */
/* Only .i_general_box_container.generalBox background was ever dark- */
/* themed above; every inner element (header block, menu item text,   */
/* icon circles, dividers, footer strip) still fell through to the    */
/* legacy two-theme system (css/style.css light vs. css/night_style.  */
/* css dark, picked server-side via $lightDark) — that legacy system  */
/* never used the tokens.css palette, so it looked "light" whenever a */
/* user's stored $lightDark setting was 'light' (now unreachable via  */
/* UI since the Tag/Nacht toggle was removed). Force the tokens.css   */
/* palette here regardless of $lightDark. Also applies to the shared  */
/* #topPoints widget (points_box.php reuses the same wrapper/footer   */
/* classes) — same bug, same fix.                                     */
/* ------------------------------------------------------------------ */

/* Points panel header ("Your Points") — legacy style.css is #ffffff */
.i_general_box_container.generalBox .i_box_messages_header {
  background: #150a16 !important;
  background-color: #150a16 !important;
  color: #f7eef8 !important;
  border-bottom: 1px solid #2e1a32 !important;
  font-size: 0.95rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  padding: 0.85rem 0.95rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  flex-wrap: nowrap !important;
}

.i_general_box_container.generalBox.extensionPost .sf-points-box-title {
  color: #f7eef8 !important;
  flex: 0 1 auto;
  min-width: 0;
}

.i_general_box_container.generalBox.extensionPost .sf-points-level-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  margin-left: auto;
  flex: 0 0 auto;
}

.i_general_box_container.generalBox.extensionPost .sf-points-level-badge .sf-badge-lvl__label {
  color: #c4b3c6 !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

/* Points widget is short — no scroll needed; kill white OS scrollbar */
.i_general_box_container.generalBox.extensionPost {
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}

.i_general_box_container.generalBox.extensionPost .btest {
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}

.i_general_box_container.generalBox .btest,
.i_general_box_message_notifications_container.generalBox .btest,
.i_general_box_notifications_container.generalBox .btest {
  scrollbar-width: thin;
  scrollbar-color: #2e1a32 #150a16;
}

.i_general_box_container.generalBox .btest::-webkit-scrollbar,
.i_general_box_message_notifications_container.generalBox .btest::-webkit-scrollbar,
.i_general_box_notifications_container.generalBox .btest::-webkit-scrollbar {
  width: 6px;
}

.i_general_box_container.generalBox .btest::-webkit-scrollbar-track,
.i_general_box_message_notifications_container.generalBox .btest::-webkit-scrollbar-track,
.i_general_box_notifications_container.generalBox .btest::-webkit-scrollbar-track {
  background: #150a16;
}

.i_general_box_container.generalBox .btest::-webkit-scrollbar-thumb,
.i_general_box_message_notifications_container.generalBox .btest::-webkit-scrollbar-thumb,
.i_general_box_notifications_container.generalBox .btest::-webkit-scrollbar-thumb {
  background: #2e1a32;
  border-radius: 999px;
}

.i_general_box_container.generalBox .i_header_others_box,
.i_general_box_container.generalBox .i_user_details {
  background: transparent !important;
  color: #f7eef8 !important;
}

.i_general_box_container.generalBox .point_pr a {
  background: #2e1a32 !important;
  border: 1px solid rgba(233, 30, 140, 0.35) !important;
  color: #f7eef8 !important;
  border-radius: 999px !important;
}

.i_general_box_container.generalBox .point_pr a svg,
.i_general_box_container.generalBox .point_pr a path {
  fill: #e91e8c !important;
}

.i_general_box_container.generalBox .i_unm,
.i_general_box_container.generalBox .i_user_nm {
  color: var(--sf-text-primary) !important;
}

.i_general_box_container.generalBox .i_see_prof {
  color: var(--sf-text-secondary) !important;
}

.i_general_box_container.generalBox .i_u_details:hover {
  background: var(--sf-color-accent-muted) !important;
}

.i_general_box_container.generalBox .i_header_others_item,
.i_general_box_container.generalBox .i_header_others_box a,
.i_general_box_container.generalBox .point_pr a {
  color: var(--sf-text-primary) !important;
}

.i_general_box_container.generalBox .i_header_others_item:hover {
  background: var(--sf-color-accent-muted) !important;
}

.i_general_box_container.generalBox .i_header_item_icon_box {
  background: var(--sf-color-accent-muted) !important;
}

.i_general_box_container.generalBox .i_header_item_icon_box svg {
  fill: var(--sf-text-primary) !important;
}

.i_general_box_container.generalBox .arrow {
  background-color: var(--sf-border-standard) !important;
}

.i_general_box_container.generalBox .sf-menu-level-xp {
  color: var(--sf-text-muted) !important;
}

.i_general_box_container.generalBox .crnt_points {
  color: var(--sf-text-primary) !important;
}

.i_general_box_container.generalBox .i_s_menu_box:hover {
  background: var(--sf-color-accent-muted) !important;
}

/*
 * Profile-menu legal strip (Impressum, AGB, … + socials):
 * Legacy .footer_container uses position:sticky;bottom:0 which floats the
 * strip into the middle of the item list (between Languages and Logout).
 * Keep it in normal flow as the last block, pinned to the panel bottom.
 */
.i_general_box_container.generalBox .btest {
  display: flex !important;
  flex-direction: column !important;
}

/* grow when short (push footer down); never shrink below content height
   (shrink was crushing the menu so Impressum floated mid-list). */
.i_general_box_container.generalBox .i_user_details {
  min-height: 0 !important;
  flex: 1 0 auto !important;
  overflow: visible !important;
  padding-bottom: 0.35rem !important;
}

.i_general_box_container.generalBox .footer_container {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  top: auto !important;
  margin-top: auto !important;
  flex: 0 0 auto !important;
  background: #150a16 !important;
  border-top: 1px solid #2e1a32 !important;
  padding: 0.7rem 0.85rem 0.8rem !important;
  z-index: 1 !important;
}

.i_general_box_container.generalBox .footer_menu_item,
.i_general_box_container.generalBox .footer_menu_item a {
  color: var(--sf-text-muted) !important;
}

.i_general_box_container.generalBox .footer_menu_item a:hover {
  color: var(--sf-text-secondary) !important;
}

.i_general_box_container.generalBox .footer_menu_item:after {
  background-color: var(--sf-text-muted) !important;
}

.i_general_box_container.generalBox .iisocialicon svg {
  fill: var(--sf-text-secondary) !important;
}

.i_general_box_container.generalBox .footer_social_links_container {
  margin-top: 0.45rem !important;
}

/* ------------------------------------------------------------------ */
/* Discovery empty                                                     */
/* ------------------------------------------------------------------ */

body.sf-creator-discovery-v2 .sf-cd-grid:has(.sf-cd-empty) {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  width: 100% !important;
}

body.sf-creator-discovery-v2 .sf-cd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 260px;
  margin: 1.5rem auto 2rem;
  padding: 2rem 1.35rem;
  width: min(34rem, 100%);
  max-width: 34rem;
  grid-column: 1 / -1;
  border-radius: 20px;
  border: 1px dashed rgba(225, 34, 146, 0.32);
  background: rgba(24, 16, 37, 0.72);
  text-align: center;
  color: #c4b8d4;
  box-shadow: 0 12px 28px rgba(8, 2, 18, 0.35);
}

body.sf-creator-discovery-v2 .sf-cd-empty__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 750;
  color: #fff;
  letter-spacing: -0.02em;
}

body.sf-creator-discovery-v2 .sf-cd-empty__text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  max-width: 28ch;
}

body.sf-creator-discovery-v2 .sf-cd-empty__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 0.45rem;
  padding: 0 1.15rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #f02aa6, #d91b87);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(225, 34, 146, 0.35);
}

body.sf-creator-discovery-v2 .sf-cd-grid {
  max-height: none !important;
  overflow: visible !important;
}

/* ------------------------------------------------------------------ */
/* Home premium depth                                                  */
/* ------------------------------------------------------------------ */

body.sf-premium-home .sf-feed .sf-stories {
  padding: 0.35rem 0.2rem 0.65rem !important;
  margin-bottom: 0.35rem !important;
}

body.sf-premium-home .sf-feed .sf-composer {
  margin-bottom: 1rem;
  box-shadow:
    0 14px 36px rgba(8, 2, 18, 0.42),
    0 0 0 1px rgba(225, 34, 146, 0.12);
}

body.sf-premium-home .sf-creator-hub__section-title {
  font-size: 1.15rem;
  letter-spacing: -0.03em;
}

body.sf-premium-home .sf-creator-hub__card--portrait {
  box-shadow:
    0 14px 34px rgba(8, 2, 18, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

body.sf-premium-home .sf-feed .i_post_body {
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(8, 2, 18, 0.38);
}

@media (min-width: 1024px) {
  body.sf-premium-home {
    --sf-ph-story: 98px;
    --sf-ph-story-ring: 88px;
  }

  body.sf-premium-home .sf-feed .i_p_image,
  body.sf-premium-home .sf-feed .i_post_image_swip_wrapper,
  body.sf-premium-home .sf-feed .i_post_image_swip_wrapper img,
  body.sf-premium-home .sf-feed video {
    max-height: 480px !important;
    object-fit: cover !important;
  }
}

/* ------------------------------------------------------------------ */
/* Motion                                                              */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  body.sf-premium-home .sf-creator-hub__card--portrait,
  body.sf-shop-v2 .s_p_product_container,
  body.sf-creator-discovery-v2 .sf-cd-card-inner {
    transition:
      transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 220ms ease,
      border-color 220ms ease;
  }

  body.sf-premium-home .sf-creator-hub__card--portrait:hover {
    transform: translateY(-6px) scale(1.01);
  }

  body.sf-premium-home .sf-feed .publish_btn:hover,
  body.sf-premium-home .sf-creator-hub__cta:hover {
    transform: translateY(-1px);
  }
}

/* ------------------------------------------------------------------ */
/* Locked PPV overlay + post actions + comment pill (design system)    */
/* ------------------------------------------------------------------ */

.onlyPremium .premium_locked,
.onlySubs .premium_locked,
.onlyPremium .onlySubs_icon,
.onlySubs .onlySubs_icon {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9999px !important;
  background: rgba(21, 10, 22, 0.65) !important;
  border: 1px solid rgba(247, 238, 248, 0.22) !important;
  box-shadow: none !important;
}

.onlyPremium .premium_locked_icon,
.onlyPremium .onlySubs_icon,
.onlySubs .onlySubs_icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

.onlyPremium .premium_locked_icon svg,
.onlyPremium .onlySubs_icon svg,
.onlySubs .onlySubs_icon svg {
  width: 28px !important;
  height: 28px !important;
  fill: #f7eef8 !important;
  color: #f7eef8 !important;
}

.onlyPremium .onlySubsWrapper,
.onlySubs .onlySubsWrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.85rem !important;
  max-width: min(340px, 92%) !important;
}

.onlyPremium .onlySubs_note,
.onlySubs .onlySubs_note {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
}

/* Legacy separate "Purchase this post!" link — hide when merged CTA exists */
.onlyPremium .buythistext {
  display: none !important;
}

.onlyPremium .buyThisPost.prcsPost,
.onlyPremium .buyThisPost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0.35rem 0.45rem !important;
  min-height: 44px !important;
  padding: 0.7rem 1.25rem !important;
  border: none !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, #e91e8c, #8b2fc9) !important;
  color: #fff !important;
  font-size: 0.92rem !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(233, 30, 140, 0.35) !important;
  text-decoration: none !important;
}

.onlyPremium .buyThisPost .sf-ppv-cta__icon {
  display: inline-flex !important;
  width: 18px !important;
  height: 18px !important;
}

.onlyPremium .buyThisPost .sf-ppv-cta__icon svg {
  width: 18px !important;
  height: 18px !important;
  fill: #fff !important;
  color: #fff !important;
}

.onlyPremium .buyThisPost .sf-ppv-cta__price,
.onlyPremium .buyThisPost .sf-ppv-cta__price span,
.onlyPremium .buyThisPost span {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: inherit !important;
  margin: 0 !important;
}

.onlyPremium .buyThisPost .sf-ppv-cta__sep {
  opacity: 0.85;
  font-weight: 500 !important;
}

.onlyPremium .buyThisPost .sf-ppv-cta__action {
  font-weight: 600 !important;
}

.onlyPremium .fr_subs.uSubsModal,
.onlyPremium .fr_subs,
.onlySubs .fr_subs.uSubsModal {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  margin-top: 0.15rem !important;
  padding: 0.45rem 0.9rem !important;
  border-radius: 9999px !important;
  background: rgba(21, 10, 22, 0.55) !important;
  border: 1px solid rgba(247, 238, 248, 0.2) !important;
  color: #f7eef8 !important;
  font-size: 0.82rem !important;
  font-weight: 550 !important;
  box-shadow: none !important;
}

.onlyPremium .fr_subs svg,
.onlySubs .fr_subs svg {
  width: 15px !important;
  height: 15px !important;
  fill: #c4b3c6 !important;
  color: #c4b3c6 !important;
  margin: 0 !important;
}

/* ------------------------------------------------------------------ */
/* Post actions — design-system icons (not legacy thin stock glyphs)   */
/* ------------------------------------------------------------------ */

.i_post_footer.sf-post-footer,
.i_post_footer {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  gap: 0.45rem !important;
  width: 100% !important;
  padding: 0.55rem 0.85rem 0.65rem !important;
  border-top: 1px solid #2e1a32 !important;
  box-sizing: border-box !important;
}

.i_post_footer .i_post_footer_item {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  gap: 0.25rem !important;
}

/* Like + Comment as one shared pill (not two separate circles) */
.i_post_footer .i_post_footer_engage {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 0.15rem !important;
  min-height: 42px !important;
  padding: 0.2rem 0.35rem !important;
  border-radius: 9999px !important;
  background: rgba(46, 26, 50, 0.65) !important;
  border: 1px solid rgba(138, 122, 141, 0.28) !important;
  box-sizing: border-box !important;
}

.i_post_footer .i_post_footer_engage__sep {
  width: 1px !important;
  height: 1.1rem !important;
  margin: 0 0.2rem !important;
  background: rgba(138, 122, 141, 0.35) !important;
  flex-shrink: 0 !important;
}

.i_post_footer .i_post_footer_engage .i_post_footer_item {
  gap: 0.2rem !important;
}

.i_post_footer .i_post_item_btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 9999px !important;
  background: rgba(46, 26, 50, 0.55) !important;
  border: 1px solid rgba(138, 122, 141, 0.22) !important;
  color: #c4b3c6 !important;
  box-sizing: border-box !important;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease !important;
}

/* Icons inside engage group: flat, no own circle */
.i_post_footer .i_post_footer_engage .i_post_item_btn.in_like,
.i_post_footer .i_post_footer_engage .i_post_item_btn.in_unlike,
.i_post_footer .i_post_footer_engage .i_post_item_btn.in_comment {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.i_post_footer .i_post_footer_engage .i_post_item_btn.in_like:hover,
.i_post_footer .i_post_footer_engage .i_post_item_btn.in_comment:hover {
  background: rgba(233, 30, 140, 0.14) !important;
  border-color: transparent !important;
  color: #f7eef8 !important;
}

.i_post_footer .i_post_footer_engage .i_post_item_btn.in_unlike {
  color: #fff !important;
  background: linear-gradient(135deg, #e91e8c, #8b2fc9) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 10px rgba(233, 30, 140, 0.3) !important;
}

.i_post_footer .i_post_footer_engage .lp_sum {
  padding-right: 0.35rem !important;
  min-width: 0.5rem !important;
}

/* Hide legacy DB SVGs — replaced by ::before masks below */
.i_post_footer .i_post_item_btn.in_like > svg,
.i_post_footer .i_post_item_btn.in_unlike > svg,
.i_post_footer .i_post_item_btn.in_comment > svg,
.i_post_footer .i_post_item_btn.in_share > svg,
.i_post_footer .i_post_item_btn.in_save_btn svg {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.i_post_footer .i_post_item_btn.in_like::before,
.i_post_footer .i_post_item_btn.in_unlike::before,
.i_post_footer .i_post_item_btn.in_comment::before,
.i_post_footer .i_post_item_btn.in_share::before,
.i_post_footer .i_post_item_btn.in_save_btn::before {
  content: "" !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  background-color: currentColor !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

/* Heart (outline) */
.i_post_footer .i_post_item_btn.in_like::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") !important;
}

/* Heart (filled / liked) */
.i_post_footer .i_post_item_btn.in_unlike {
  color: #fff !important;
  background: linear-gradient(135deg, #e91e8c, #8b2fc9) !important;
  border-color: transparent !important;
  box-shadow: 0 3px 12px rgba(233, 30, 140, 0.35) !important;
}

.i_post_footer .i_post_item_btn.in_unlike::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") !important;
}

/* Comment bubble */
.i_post_footer .i_post_item_btn.in_comment::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8v.5z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8v.5z'/%3E%3C/svg%3E") !important;
}

/* Share (corner-up-right) */
.i_post_footer .i_post_item_btn.in_share::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 14 20 9 15 4'/%3E%3Cpath d='M4 20v-7a4 4 0 0 1 4-4h12'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 14 20 9 15 4'/%3E%3Cpath d='M4 20v-7a4 4 0 0 1 4-4h12'/%3E%3C/svg%3E") !important;
}

/* Bookmark / Speichern (outline) */
.i_post_footer .i_post_item_btn.in_save_btn::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") !important;
}

/* Bookmark filled / gespeichert */
.i_post_footer .i_post_item_btn.in_save_btn.in_saved {
  color: #fff !important;
  background: linear-gradient(135deg, #e91e8c, #8b2fc9) !important;
  border-color: transparent !important;
  box-shadow: 0 3px 12px rgba(233, 30, 140, 0.35) !important;
}

.i_post_footer .i_post_item_btn.in_save_btn.in_saved::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") !important;
}

.i_post_footer .i_post_item_btn.in_save_btn:hover {
  background: rgba(233, 30, 140, 0.14) !important;
  border-color: rgba(233, 30, 140, 0.4) !important;
  color: #f7eef8 !important;
}

.i_post_footer .i_post_item_btn.in_save_btn.in_saved:hover {
  color: #fff !important;
  background: linear-gradient(135deg, #e91e8c, #8b2fc9) !important;
  border-color: transparent !important;
}

.i_post_footer .i_post_item_btn:active {
  transform: scale(0.94) !important;
}

.i_post_footer .lp_sum {
  color: #c4b3c6 !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  padding-right: 0.15rem !important;
  min-width: 0.75rem !important;
}

/* Save / Tip stay on the right */
.i_post_footer .i_post_footer_item--save {
  margin-left: auto !important;
}

.i_post_footer .i_post_footer_item--tip {
  margin-left: 0.2rem !important;
}

.i_post_footer .i_post_footer_item--tip .i_post_item_btn.in_tips {
  color: #e6c07a !important;
  background: rgba(212, 168, 83, 0.16) !important;
  border: 1px solid rgba(212, 168, 83, 0.4) !important;
}

.i_post_footer .i_post_item_btn.in_tips > svg {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.i_post_footer .i_post_item_btn.in_tips::before {
  content: "" !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  background-color: currentColor !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  /* Hand + heart — clearly reads as tip / donation */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 14h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 16'/%3E%3Cpath d='m7 20 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9'/%3E%3Cpath d='m2 15 6 6'/%3E%3Cpath d='M19.5 8.5c.8-.8.8-2 0-2.8a2 2 0 0 0-2.8 0l-.7.7-.7-.7a2 2 0 0 0-2.8 2.8l.7.7 2.8 2.8 2.8-2.8.7-.7z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 14h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 16'/%3E%3Cpath d='m7 20 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9'/%3E%3Cpath d='m2 15 6 6'/%3E%3Cpath d='M19.5 8.5c.8-.8.8-2 0-2.8a2 2 0 0 0-2.8 0l-.7.7-.7-.7a2 2 0 0 0-2.8 2.8l.7.7 2.8 2.8 2.8-2.8.7-.7z'/%3E%3C/svg%3E") !important;
}

.i_post_footer .i_post_item_btn.in_tips:hover {
  background: rgba(212, 168, 83, 0.28) !important;
  border-color: rgba(212, 168, 83, 0.65) !important;
  color: #f3d9a0 !important;
}

/* ------------------------------------------------------------------ */
/* Tip modal — dark design system (overrides light/night leftovers)    */
/* ------------------------------------------------------------------ */

.i_modal_bg_in .i_modal_in_in.modal_tip,
.i_modal_bg_in.i_modal_display_in .i_modal_in_in.modal_tip {
  width: min(400px, calc(100vw - 1.5rem)) !important;
  max-width: 400px !important;
  background: #1c0f1f !important;
  border: 1px solid #2e1a32 !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55) !important;
  overflow: hidden !important;
}

.i_modal_bg_in .modal_tip .i_modal_content {
  background: transparent !important;
}

.i_modal_bg_in .modal_tip .i_modal_g_header {
  background: #150a16 !important;
  color: #f7eef8 !important;
  border-bottom: 1px solid #2e1a32 !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  font-size: 1rem !important;
  font-weight: 650 !important;
  padding: 1rem 1.1rem !important;
}

.i_modal_bg_in .modal_tip .shareClose {
  color: #c4b3c6 !important;
}

.i_modal_bg_in .modal_tip .shareClose svg {
  width: 18px !important;
  height: 18px !important;
  fill: #c4b3c6 !important;
}

.i_modal_bg_in .modal_tip .i_more_text_wrapper {
  background: #1c0f1f !important;
  padding: 1.15rem 1.1rem 0.85rem !important;
}

.i_modal_bg_in .modal_tip .i_set_subscription_fee {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid #2e1a32 !important;
  background: #150a16 !important;
}

.i_modal_bg_in .modal_tip .i_subs_currency {
  background: #2e1a32 !important;
  color: #e6c07a !important;
  padding: 0.75rem 0.9rem !important;
  border-radius: 0 !important;
}

.i_modal_bg_in .modal_tip .i_subs_currency svg {
  width: 18px !important;
  height: 18px !important;
  fill: #e6c07a !important;
}

.i_modal_bg_in .modal_tip .i_subs_price {
  max-width: none !important;
  width: 100% !important;
  color: #f7eef8 !important;
}

.i_modal_bg_in .modal_tip .i_subs_price input,
.i_modal_bg_in .modal_tip #tipVal.aval {
  background: #150a16 !important;
  color: #f7eef8 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0.8rem 0.95rem !important;
  font-size: 0.95rem !important;
  box-shadow: none !important;
}

.i_modal_bg_in .modal_tip .i_subs_price input::placeholder,
.i_modal_bg_in .modal_tip #tipVal.aval::placeholder {
  color: #8a7a8d !important;
}

.i_modal_bg_in .modal_tip .i_subs_price input:focus,
.i_modal_bg_in .modal_tip #tipVal.aval:focus {
  outline: none !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(233, 30, 140, 0.45) !important;
}

.i_modal_bg_in .modal_tip .i_tip_not {
  color: #8a7a8d !important;
  font-size: 0.78rem !important;
  padding-top: 0.55rem !important;
  line-height: 1.35 !important;
}

.i_modal_bg_in .modal_tip .i_block_box_footer_container {
  background: #150a16 !important;
  border-top: 1px solid #2e1a32 !important;
  border-bottom-left-radius: 18px !important;
  border-bottom-right-radius: 18px !important;
  padding: 0.85rem 1.1rem 1.05rem !important;
}

.i_modal_bg_in .modal_tip .send_tip_btn,
.i_modal_bg_in .modal_tip .send_tip_btn_profile,
.i_modal_bg_in .modal_tip .send_tip_btn_message {
  background: linear-gradient(135deg, #e91e8c, #8b2fc9) !important;
  color: #fff !important;
  border-radius: 9999px !important;
  padding: 0.85rem 1rem !important;
  font-weight: 650 !important;
  box-shadow: 0 4px 16px rgba(233, 30, 140, 0.35) !important;
  transform: none !important;
}

.i_modal_bg_in .modal_tip .send_tip_btn:hover,
.i_modal_bg_in .modal_tip .send_tip_btn_profile:hover,
.i_modal_bg_in .modal_tip .send_tip_btn_message:hover {
  transform: scale(1.02) !important;
  filter: brightness(1.05) !important;
}

.i_modal_bg_in .modal_tip .send_tip_btn svg,
.i_modal_bg_in .modal_tip .send_tip_btn_profile svg,
.i_modal_bg_in .modal_tip .send_tip_btn_message svg {
  width: 17px !important;
  height: 17px !important;
  fill: #fff !important;
  margin-right: 0.5rem !important;
}

/* White separator under actions = legacy .i_post_comments_box #F0F2F5 */
.i_post_comments_wrapper,
.i_post_comments_box,
body.sf-app-body .sf-feed .i_post_comments_wrapper,
body.sf-app-body .sf-feed .i_post_comments_box {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Comment bubbles — kill legacy light #F0F2F5 / black text */
.i_user_comment_text,
body.sf-app-body .sf-feed .i_user_comment_text {
  background: #2e1a32 !important;
  background-color: #2e1a32 !important;
  color: #f7eef8 !important;
  border: 1px solid rgba(138, 122, 141, 0.22) !important;
  border-radius: 16px !important;
  padding: 0.55rem 0.8rem !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
}

.i_user_comment_text a,
body.sf-app-body .sf-feed .i_user_comment_text a {
  color: #e91e8c !important;
}

.i_user_commented_user_infos,
.i_user_commented_user_infos a,
body.sf-app-body .sf-feed .i_user_commented_user_infos a {
  color: #f7eef8 !important;
}

.i_comment_reply,
.rplyComment,
.i_comment_time,
.i_comment_like_sum,
body.sf-app-body .sf-feed .i_comment_reply,
body.sf-app-body .sf-feed .rplyComment,
body.sf-app-body .sf-feed .i_comment_time,
body.sf-app-body .sf-feed .i_comment_like_sum {
  color: #8a7a8d !important;
}

.i_comment_item_btn,
body.sf-app-body .sf-feed .i_comment_item_btn {
  color: #c4b3c6 !important;
}

.i_comment_item_btn svg,
body.sf-app-body .sf-feed .i_comment_item_btn svg {
  fill: currentColor !important;
  color: inherit !important;
  width: 16px !important;
  height: 16px !important;
}

.i_comment_item_btn.c_in_unlike,
.i_comment_item_btn.in_unlike,
body.sf-app-body .sf-feed .i_comment_item_btn.c_in_unlike {
  color: #e91e8c !important;
}

.i_post_user_commented_avatar,
body.sf-app-body .sf-feed .i_post_user_commented_avatar {
  border: 1px solid #2e1a32 !important;
}

.i_post_comments_wrapper {
  margin-top: 0 !important;
  padding-top: 0.15rem !important;
}

.i_post_comments_box {
  padding-top: 0.35rem !important;
}

/* 2+ image posts — full-bleed tiles (override legacy width/padding-top) */
.i_image_two,
.i_image_three,
.i_image_four,
.i_image_five,
.i_image_gallery {
  display: grid !important;
  width: 100% !important;
  gap: 2px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #150a16 !important;
}

.i_image_two {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.i_image_two .i_post_image_swip_wrapper,
.i_image_three .i_post_image_swip_wrapper,
.i_image_four .i_post_image_swip_wrapper,
.i_image_five .i_post_image_swip_wrapper {
  width: 100% !important;
  margin: 0 !important;
  margin-left: 0 !important;
  padding-top: 0 !important;
  float: none !important;
  background-size: cover !important;
  background-position: center !important;
}

.i_image_two .i_post_image_swip_wrapper {
  aspect-ratio: 3 / 4 !important;
  max-height: min(52vh, 440px) !important;
}

/* Comment composer — continuous pill */
.i_comment_form {
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  margin: 0.55rem 0 0.85rem !important;
  padding: 0.35rem 0.4rem 0.35rem 0.45rem !important;
  border-radius: 26px !important;
  background: #1c0f1f !important;
  border: 1px solid #2e1a32 !important;
  box-sizing: border-box !important;
}

.i_comment_form .i_post_user_comment_avatar {
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  border: 1px solid #2e1a32 !important;
  align-self: center !important;
}

.i_comment_form .i_post_user_comment_avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.i_comment_form .i_comment_form_textarea {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.25rem !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  position: relative !important;
}

.i_comment_form .i_comment_t_body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.i_comment_form textarea.comment,
.i_comment_form .comment,
.i_comment_form .nwComment,
.i_comment_form .commenta {
  width: 100% !important;
  min-height: 36px !important;
  max-height: 96px !important;
  margin: 0 !important;
  padding: 0.55rem 0.25rem !important;
  border: 0 !important;
  outline: none !important;
  resize: none !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #f7eef8 !important;
  caret-color: #f7eef8;
  font-size: 0.92rem !important;
  line-height: 1.35 !important;
}

.i_comment_form textarea.comment::placeholder,
.i_comment_form .comment::placeholder,
.i_comment_form .nwComment::placeholder,
.i_comment_form .commenta::placeholder {
  color: #8a7a8d !important;
  opacity: 1;
}

.i_comment_form .i_comment_footer {
  position: static !important;
  top: auto !important;
  right: auto !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

.i_comment_form .i_comment_fast_answers {
  display: flex !important;
  align-items: center !important;
  gap: 0.15rem !important;
}

.i_comment_form .i_fa_body {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  color: #8a7a8d !important;
}

.i_comment_form .i_fa_body svg,
.i_comment_form .i_fa_body path {
  width: 18px !important;
  height: 18px !important;
  fill: #8a7a8d !important;
  color: #8a7a8d !important;
}

.i_comment_form .i_fa_body.sndcom {
  width: 36px !important;
  height: 36px !important;
  margin-left: 0.1rem !important;
  background: linear-gradient(135deg, #e91e8c, #8b2fc9) !important;
  box-shadow: 0 3px 12px rgba(233, 30, 140, 0.35) !important;
  color: #fff !important;
}

.i_comment_form .i_fa_body.sndcom svg,
.i_comment_form .i_fa_body.sndcom path {
  width: 16px !important;
  height: 16px !important;
  fill: #fff !important;
  color: #fff !important;
}

.i_comment_form:focus-within {
  border-color: rgba(233, 30, 140, 0.45) !important;
  box-shadow: 0 0 0 2px rgba(233, 30, 140, 0.12) !important;
}

/* ------------------------------------------------------------------ */
/* Sidebar "Become a Creator" teaser                                   */
/* ------------------------------------------------------------------ */

.i_become_creator_wrapper.sf-bc-teaser,
.sf-bc-teaser.i_become_creator_wrapper {
  position: relative !important;
  background: #1c0f1f !important;
  border: 1px solid #2e1a32 !important;
  border-radius: 16px !important;
  padding: 1.15rem 1.1rem 1.25rem !important;
  overflow: hidden !important;
  box-shadow: 0 10px 28px rgba(8, 2, 18, 0.35) !important;
}

.sf-bc-teaser .i_become_creator_title {
  color: #f7eef8 !important;
  font-size: 1.05rem !important;
  font-weight: 750 !important;
  margin: 0 0 0.35rem !important;
  position: relative !important;
  z-index: 1;
}

.sf-bc-teaser .i_become_title_mini {
  color: #c4b3c6 !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
  margin: 0 0 0.9rem !important;
  position: relative !important;
  z-index: 1;
}

.sf-bc-teaser .i_become_ceator_link {
  position: relative !important;
  z-index: 1;
  margin: 0 !important;
}

.sf-bc-teaser .i_become_ceator_link a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 1.1rem !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, #e91e8c, #8b2fc9) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(233, 30, 140, 0.35) !important;
}

.sf-bc-teaser .i_become_creator_icon {
  position: absolute !important;
  right: -0.35rem !important;
  bottom: -0.5rem !important;
  opacity: 0.18 !important;
  pointer-events: none !important;
  z-index: 0;
}

.sf-bc-teaser .i_bicome svg {
  width: 88px !important;
  height: 88px !important;
  fill: #e91e8c !important;
}

/* ------------------------------------------------------------------ */
/* Audit pass: legal / FAQ / contact / purchase / challenge / events   */
/* Force dark tokens even when body.dark is missing.                   */
/* ------------------------------------------------------------------ */

.legal-content,
.faq-content {
  background: #1c0f1f !important;
  color: #f7eef8 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35) !important;
  border: 1px solid #2e1a32 !important;
}

.legal-title,
.faq-title,
.legal-section h3,
.faq-section-title {
  color: #e91e8c !important;
}

.legal-subtitle,
.faq-subtitle,
.legal-section p,
.faq-content .panel p,
.legal-section li {
  color: #c4b3c6 !important;
}

.legal-address-box,
.faq-content .contact-box {
  background: rgba(233, 30, 140, 0.1) !important;
  border-color: rgba(233, 30, 140, 0.35) !important;
  color: #f7eef8 !important;
}

.faq-content .contact-email,
.faq-content .accordion {
  color: #f7eef8 !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.faq-content .accordion:hover,
.faq-content .accordion.active {
  background: rgba(233, 30, 140, 0.12) !important;
}

/* Contact page uses .bCreatorBg (orange) — neutralize for dark shell */
.wrapper.bCreatorBg:has(.contact_us_form_container),
.wrapper.bCreatorBg:has(.faq-content),
body:has(.contact_us_form_container) .wrapper.bCreatorBg {
  background: #150a16 !important;
  background-image: none !important;
}

.contact_us_form_container {
  background: #1c0f1f !important;
  border: 1px solid #2e1a32 !important;
  border-radius: 20px !important;
  color: #f7eef8 !important;
  overflow: hidden !important;
}

.contact_us_form_container .i_direct_login,
.contact_us_form_container #con_for,
.contact_us_form_container form {
  background: #1c0f1f !important;
  color: #f7eef8 !important;
}

.contact_us_form_container .form_label,
.contact_us_form_container .i_lBack,
.contact_us_form_container .i_lnot,
.contact_us_form_container label {
  color: #f7eef8 !important;
}

.contact_us_form_container .form_group .form-control .inora_user_input,
.contact_us_form_container .description_ {
  background: #150a16 !important;
  color: #f7eef8 !important;
  border: 1px solid #2e1a32 !important;
  border-radius: 12px !important;
}

.contact_us_form_container .description_::placeholder,
.contact_us_form_container .inora_user_input::placeholder {
  color: #8a7a8d !important;
}

.contact_us_form_container .i_login_button button {
  background: linear-gradient(135deg, #e91e8c, #8b2fc9) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 9999px !important;
}

/* Purchase / payment modals */
.i_modal_bg_in .i_modal_in_in.i_sf_box,
.i_modal_bg_in .i_sf_box .i_modal_content {
  background: #1c0f1f !important;
  border: 1px solid #2e1a32 !important;
  color: #f7eef8 !important;
}

.i_modal_bg_in .purchase_premium_header,
.i_modal_bg_in .i_sf_box .i_modal_g_header {
  background: #150a16 !important;
  color: #f7eef8 !important;
  border-bottom: 1px solid #2e1a32 !important;
}

.i_modal_bg_in .purchase_post_details,
.i_modal_bg_in .purchase_pp_container,
.i_modal_bg_in .p_p_wallet_cont {
  background: #1c0f1f !important;
  color: #f7eef8 !important;
}

.i_modal_bg_in .album-wanted-point {
  color: #e91e8c !important;
}

.i_modal_bg_in .album-wanted-point span {
  color: #c4b3c6 !important;
}

.i_modal_bg_in .payment_method_box {
  background: #150a16 !important;
  border: 1px solid #2e1a32 !important;
  border-radius: 14px !important;
}

.i_modal_bg_in .payment_method_item.payrexx {
  background: #fff !important;
  border-radius: 10px !important;
  padding: 0.75rem 1rem !important;
}

.i_modal_bg_in .i_modal_g_footer,
.i_modal_bg_in .alertBtnLeft {
  background: #150a16 !important;
  color: #c4b3c6 !important;
  border-top: 1px solid #2e1a32 !important;
}

/* Challenge modals + chat cards */
.ch_modal,
.challenge-card,
.challenge_item {
  background: #1c0f1f !important;
  color: #f7eef8 !important;
  border: 1px solid #2e1a32 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
}

.ch_modal input,
.ch_modal textarea,
.ch_modal select {
  background: #150a16 !important;
  color: #f7eef8 !important;
  border: 1px solid #2e1a32 !important;
}

.ch_modal .ch_footer,
.ch_modal .ch_cancel,
.ch_modal .ch_btn_cancel {
  background: #150a16 !important;
  color: #c4b3c6 !important;
}

/* Events shells */
.events_wrapper,
.s_p_product_wrapper,
.s_p_product_container .s_p_product_wrapper {
  background: #1c0f1f !important;
  border-color: #2e1a32 !important;
  color: #f7eef8 !important;
}

.layouts-profile-events,
.profile-events-card {
  background: #1c0f1f !important;
  border-color: #2e1a32 !important;
}

/* ------------------------------------------------------------------ */
/* Suggested creators — avatar-only cards (no cover/title image)       */
/* ------------------------------------------------------------------ */

.sf-creator-card--avatar {
  min-height: 0 !important;
  background: #1c0f1f !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.sf-creator-card--avatar .i_sub_u_cov {
  display: none !important;
}

.sf-creator-card--avatar .i_sub_u_det {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #1c0f1f !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 0.85rem 0.55rem 0.7rem !important;
  box-sizing: border-box !important;
}

.sf-creator-card--avatar .i_sub_u_det_container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  gap: 0.15rem !important;
}

.sf-creator-card--avatar .i_sub_u_ava {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 0.45rem !important;
  border: 2px solid rgba(233, 30, 140, 0.55) !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  box-shadow: 0 0 0 2px rgba(233, 30, 140, 0.12) !important;
}

.sf-creator-card--avatar .i_sub_u_ava .i_post_user_avatar,
.sf-creator-card--avatar .i_sub_u_ava a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.sf-creator-card--avatar .i_sub_u_ava img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 9999px !important;
}

.sf-creator-card--avatar .i_sub_u_d {
  padding: 0 !important;
  width: 100% !important;
  text-align: center !important;
}

.sf-creator-card--avatar .i_sub_u_name {
  line-height: 1.2 !important;
  margin: 0 !important;
}

.sf-creator-card--avatar .i_sub_u_name a {
  color: #f7eef8 !important;
  font-weight: 700 !important;
  font-size: 0.86rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.sf-creator-card--avatar .i_sub_u_men {
  line-height: 1.2 !important;
  margin: 0.1rem 0 0 !important;
}

.sf-creator-card--avatar .i_sub_u_men a {
  color: #c4b3c6 !important;
  font-size: 0.72rem !important;
}

.sf-creator-card--avatar .i_p_items_box_,
.sf-creator-card--avatar .i_sub_u_d .i_p_items_box_ {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.25rem !important;
  margin: 0.45rem 0 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.sf-creator-card--avatar .i_btn_item_box,
.sf-creator-card--avatar .i_sub_u_d .i_p_items_box_ .i_btn_item_box {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0.18rem 0.2rem !important;
  gap: 0.15rem !important;
  color: #c4b3c6 !important;
  background: rgba(46, 26, 50, 0.75) !important;
  border: 1px solid rgba(138, 122, 141, 0.22) !important;
  border-radius: 999px !important;
  font-size: 0.68rem !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}

.sf-creator-card--avatar .i_btn_item_box svg,
.sf-creator-card--avatar .i_sub_u_d .i_p_items_box_ .i_btn_item_box svg {
  width: 11px !important;
  height: 11px !important;
  fill: #c4b3c6 !important;
  flex-shrink: 0 !important;
}

/* Sidebar grid: Vorgeschlagene Creator (avatar-only, kompakt) */
.sf-suggested-creators .sf-suggested-creators__grid,
.sf-suggested-creators .i_topinoras_wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
  flex-flow: unset !important;
  align-items: stretch !important;
}

.sf-suggested-creators .sugest.sf-creator-card--avatar {
  width: auto !important;
  margin: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}

.sf-suggested-creators .sf-creator-card--avatar {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #1d142c !important;
}

.sf-suggested-creators .sf-creator-card--avatar .i_sub_u_det {
  padding: 0.75rem 0.45rem 0.6rem !important;
  background: transparent !important;
}

.sf-suggested-creators .sf-creator-card--avatar .i_sub_u_ava {
  width: 56px !important;
  height: 56px !important;
  margin-bottom: 0.35rem !important;
  border-width: 2px !important;
}

.sf-suggested-creators .sf-creator-card--avatar .i_sub_u_name a {
  font-size: 0.8rem !important;
}

.sf-suggested-creators .sf-creator-card--avatar .i_sub_u_men a {
  font-size: 0.68rem !important;
}

.sf-suggested-creators .sf-creator-card--avatar .i_p_items_box_ {
  margin-top: 0.35rem !important;
  gap: 0.2rem !important;
}

.sf-suggested-creators .sf-creator-card--avatar .i_btn_item_box {
  padding: 0.15rem 0.15rem !important;
  font-size: 0.64rem !important;
}