/* Fans254 SQL-backed Appearance layer. Loaded last on every page. */
:root{
  --f-feed-bg:var(--f-surface);
  --f-repost-bg:var(--f-surface);
  --f-header-bg:var(--f-surface);
  --f-sidebar-bg:var(--f-surface);
  --f-menu-bg:var(--f-surface);
  --f-modal-bg:var(--f-surface);
  --f-popup-bg:var(--f-surface);
  --f-input-bg:var(--f-surface);
  --f-strip-bg:var(--f-surface);
  --f-video-play-bg:#0b1724;
  --f-button-bg:var(--f-surface);
  --f-button-text:var(--f-text);
  --f-button-active-bg:var(--f-primary);
  --f-button-active-text:#fff;
  --f-icon:var(--f-text);
  --f-icon-muted:var(--f-muted);
  --f-feed-icon:var(--f-muted);
  --f-feed-icon-active:var(--f-primary);
  --f-tab-bg:var(--f-surface);
  --f-tab-active-bg:var(--f-surface-3);
  --f-tab-text:var(--f-muted);
  --f-tab-active-text:var(--f-primary);
  --f-pill-bg:var(--f-surface-2);
  --f-pill-active-bg:var(--f-primary);
  --f-pill-text:var(--f-text);
  --f-pill-active-text:#fff;
  --f-border-width:1px;
  --f-card-radius:16px;
  --f-button-radius:10px;
  --f-input-radius:10px;
  --f-modal-radius:18px;
  --f-menu-radius:14px;
  --f-pill-radius:999px;
  --f-motion-duration:180ms;
  --f-svg-stroke-width:2;
  --f-feed-svg-stroke-width:2;
  --f-icon-device-scale:1;
  --f-icon-size:24px;
  --f-nav-icon-size:28px;
  --f-button-icon-size:22px;
  --f-feed-icon-size:29px;
  --f-feed-gap:0px;
  --f-horizontal-margin-top:0px;
  --f-horizontal-margin-bottom:0px;
}

html,body{background:var(--f-bg)!important;color:var(--f-text)!important}
body,.f254-shell,.f254-social-app,.f254-admin,.f254-v2-page,.f254-v2-onboard,.f254-marketplace-page,.f254-wallet-page,.f254-purchases-page,.f254-notifications-page{color:var(--f-text)}

/* Global text and links */
:where(h1,h2,h3,h4,h5,h6,strong,b,.f254-title,.f254-section-title,.f254-page-title,.f254-social-profile-name){color:var(--f-text)}
:where(.f254-caption,.f254-subtitle,.f254-help,.f254-muted,.f254-faint,small,[class*="metadata"],[class*="-meta"],[class*="-time"]){color:var(--f-muted)}
:where(a:not(.f254-btn):not(.f254-social-action)){color:var(--f-link)}

/* Main surfaces, cards, feeds, reposts */
:where(.f254-card,.f254-panel,.f254-v2-panel,.f254-v2-frame,.f254-v2-status-card,.f254-v2-onboard-shell,
.f254-social-card,.f254-marketplace-card,.f254-wallet-card,.f254-purchase-card,.f254-notification-card,
.f254-group-panel,.f254-group-post,.f254-group-composer,.f254-subscriber-plan,.f254-verification-card,
.f254-premium-plan,.f254-campaign-card,.f254-ad-card,.f254-message-panel,.f254-messenger-panel){
  background:var(--f-surface)!important;
  color:var(--f-text)!important;
  border-color:var(--f-line)!important;
  border-width:var(--f-border-width)!important;
  border-style:solid!important;
  border-radius:var(--f-card-radius)!important;
  box-shadow:var(--f-shadow-soft)!important;
}
.f254-social-post{background:var(--f-feed-bg)!important;color:var(--f-text)!important;border:var(--f-border-width) solid var(--f-line)!important;border-radius:var(--f-card-radius)!important}
.f254-social-repost,.f254-social-repost-original,.f254-social-repost-original-card{background:var(--f-repost-bg)!important;color:var(--f-text)!important;border-color:var(--f-line)!important}
.f254-social-repost-original,.f254-social-repost-original-card,.f254-quoted-post,.quoted-post{border-color:var(--f-line)!important}

/* Headers and horizontal strips */
:where(.f254-topbar,.f254-header,.f254-social-topbar,.f254-social-header,.f254-v2-onboard-head,
.f254-home-subheader,.f254-mobile-subheader,.f254-tablet-topbar,.f254-admin-topbar,
.f254-card-head,.f254-modal-head,.f254-social-sheet-head,.f254-message-header,.f254-reels-header){
  background:var(--f-header-bg)!important;
  color:var(--f-text)!important;
  border-color:var(--f-line)!important;
}
:where(.f254-settings-tabs,.f254-social-tabs,.f254-profile-tabs,.f254-home-stories,.f254-horizontal-strip,
.f254-suggestion-rail,.f254-story-strip,.f254-reels-suggestion-strip,.f254-mobile-shortcuts){
  background:var(--f-strip-bg)!important;
  border-color:var(--f-line)!important;
}

/* Sidebars and menus */
:where(.f254-sidebar,.f254-social-left,.f254-social-right,.f254-social-desktop-sidebar,.f254-tablet-sidebar,
.f254-mobile-sidebar,.f254-admin-sidebar,.f254-left-sidebar,.f254-right-sidebar){
  background:var(--f-sidebar-bg)!important;
  color:var(--f-text)!important;
  border-color:var(--f-line)!important;
}
:where(.f254-menu,.f254-dropdown,.f254-popover,.f254-more-popup,.f254-context-menu,.f254-social-result-list,
[role="menu"],.f254-account-menu,.f254-mobile-sidebar-panel,.f254-tablet-sidebar-panel){
  background:var(--f-menu-bg)!important;
  color:var(--f-text)!important;
  border-color:var(--f-line)!important;
  border-radius:var(--f-menu-radius)!important;
  box-shadow:var(--f-shadow)!important;
}

/* Modals, sheets, popups */
:where(.f254-modal,.f254-social-sheet,.f254-popup,.f254-dialog,.f254-checkout,.f254-country-popup,
.f254-subscriber-checkout,.f254-subscriber-subscription-info,.f254-subscriber-plan-form,
.f254-message-modal,.f254-engagement-popup,.f254-story-create-modal){
  background:var(--f-modal-bg)!important;
  color:var(--f-text)!important;
  border:var(--f-border-width) solid var(--f-line)!important;
  border-radius:var(--f-modal-radius)!important;
  box-shadow:var(--f-shadow)!important;
}
:where(.f254-modal-backdrop,.f254-social-overlay,.f254-popup-backdrop,.f254-country-backdrop,.f254-message-modal-backdrop){background:var(--f-overlay)!important}
:where(.f254-toast,.f254-social-toast,.f254-tooltip){background:var(--f-popup-bg)!important;color:var(--f-text)!important;border-color:var(--f-line)!important}

/* Inputs */
:where(input,select,textarea,.f254-input,.f254-select,.f254-textarea,[contenteditable="true"]){
  background:var(--f-input-bg)!important;
  color:var(--f-text)!important;
  border-color:var(--f-line-strong)!important;
  border-width:var(--f-border-width)!important;
  border-radius:var(--f-input-radius)!important;
}
:where(input,textarea)::placeholder{color:var(--f-faint)!important}
:where(input,select,textarea,.f254-input,.f254-select,.f254-textarea):focus{
  border-color:var(--f-primary)!important;
  box-shadow:0 0 0 3px var(--f-primary-soft)!important;
}

/* Buttons: background, words and SVG share one state */
:where(button,.f254-btn,.f254-icon-btn,.f254-social-btn,.f254-social-close,.f254-social-more,
.f254-header-button,.f254-social-header-pill,.f254-group-primary-action,.f254-bottom-action){
  border-color:var(--f-line-strong)!important;
  border-radius:var(--f-button-radius)!important;
  transition:background-color var(--f-motion-duration) ease,color var(--f-motion-duration) ease,border-color var(--f-motion-duration) ease,transform var(--f-motion-duration) ease!important;
}
:where(.f254-btn-secondary,.f254-btn-ghost,.f254-icon-btn,.f254-social-close,.f254-social-more,.f254-social-header-pill){
  background:var(--f-button-bg,var(--f-surface,#fff))!important;
  color:var(--f-button-text,var(--f-text,#101828))!important;
}
:where(.f254-btn:not(.f254-btn-secondary):not(.f254-btn-ghost),.f254-social-btn,.f254-group-primary-action,
button.is-active,.f254-btn.is-active,.f254-social-header-pill.is-active){
  background:var(--f-button-active-bg,var(--f-primary,var(--f-blue,#1688f5)))!important;
  color:var(--f-button-active-text,#fff)!important;
  border-color:var(--f-button-active-bg,var(--f-primary,var(--f-blue,#1688f5)))!important;
}
:where(button,.f254-btn,.f254-social-btn,.f254-icon-btn,.f254-social-more):disabled{opacity:.5!important;filter:none!important}

/* Tabs: active and inactive are separate */
:where(.f254-settings-tab,.f254-social-tab,.f254-social-profile-tab,.f254-tab,.f254-filter-tab,[role="tab"]){
  background:var(--f-tab-bg)!important;
  color:var(--f-tab-text)!important;
  border-color:var(--f-line)!important;
  border-radius:var(--f-button-radius)!important;
}
:where(.f254-settings-tab.is-active,.f254-social-tab.is-active,.f254-social-profile-tab.is-active,
.f254-tab.is-active,.f254-filter-tab.is-active,[role="tab"][aria-selected="true"]){
  background:var(--f-tab-active-bg)!important;
  color:var(--f-tab-active-text)!important;
  border-color:color-mix(in srgb,var(--f-tab-active-text) 38%,var(--f-line))!important;
}

/* Pills, badges, statuses and steps */
:where(.f254-pill,.f254-chip,.f254-status,.f254-badge,.f254-role-pill,.f254-group-role-pill,
.f254-social-post-type,.f254-step-pill,.f254-progress-pill){
  background:var(--f-pill-bg)!important;
  color:var(--f-pill-text)!important;
  border-color:var(--f-line)!important;
  border-radius:var(--f-pill-radius)!important;
}
:where(.f254-pill.is-active,.f254-chip.is-selected,.f254-status.is-active,.f254-badge.is-active,
.f254-step-pill.is-active,.f254-step-pill.is-done,.f254-progress-pill.is-active,.f254-progress-pill.is-done){
  background:var(--f-pill-active-bg)!important;
  color:var(--f-pill-active-text)!important;
  border-color:var(--f-pill-active-bg)!important;
}
:where(.f254-step-number,.f254-v2-step-dot,.f254-verification-step-number,.f254-group-create-step-number){
  background:var(--f-pill-bg)!important;color:var(--f-pill-text)!important;border-color:var(--f-line)!important
}
:where(.f254-step.is-active .f254-step-number,.f254-step.is-done .f254-step-number,
.f254-v2-step-dot.is-active,.f254-v2-step-dot.is-done,.is-active>.f254-verification-step-number,.is-done>.f254-verification-step-number){
  background:var(--f-pill-active-bg)!important;color:var(--f-pill-active-text)!important;border-color:var(--f-pill-active-bg)!important
}

/* SVG system: generic icons and feed actions are deliberately separate */
:where(.f254-icon,button svg,a svg,.f254-btn svg,.f254-nav-link svg,.f254-bottom-link svg,
.f254-sidebar svg,.f254-menu svg,.f254-modal svg,.f254-popup svg){
  color:inherit;
  stroke:currentColor;
  stroke-width:var(--f-svg-stroke-width);
}
:where(.f254-nav-link,.f254-bottom-link,.f254-sidebar-nav a,.f254-sidebar-nav button,.f254-menu a,.f254-menu button){color:var(--f-icon-muted)!important}
:where(.f254-nav-link.is-active,.f254-bottom-link.is-active,.f254-sidebar-nav a.is-active,.f254-sidebar-nav button.is-active){color:var(--f-primary)!important}

.f254-social-actions{background:var(--f-feed-bg)!important;border-color:var(--f-line)!important}
.f254-social-action{color:var(--f-feed-icon)!important;background:transparent!important;border-radius:var(--f-button-radius)!important}
.f254-social-action svg{color:inherit!important;stroke:currentColor!important;stroke-width:var(--f-feed-svg-stroke-width)!important}
.f254-social-action.is-active,.f254-social-action:hover,.f254-social-action:focus-visible{color:var(--f-feed-icon-active)!important;background:var(--f-primary-soft)!important}

/* Borders and radius consistency without duplicating component definitions */
:where(.f254-card,.f254-social-post,.f254-panel,.f254-modal,.f254-social-sheet,.f254-menu,.f254-dropdown,
.f254-popup,.f254-input,.f254-select,.f254-textarea,.f254-settings-tab,.f254-social-tab,.f254-pill,.f254-status){border-color:var(--f-line)!important}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* Configurable icon sizing. Component-specific fixed sizes are overridden here once. */
:where(.f254-icon,svg.f254-icon){width:var(--f-icon-size)!important;height:var(--f-icon-size)!important}
:where(.f254-nav-link svg,.f254-bottom-link svg,.f254-sidebar-nav svg,.f254-social-desktop-nav svg,.f254-social-bottom-nav svg,.f254-mobile-subheader svg){width:var(--f-nav-icon-size)!important;height:var(--f-nav-icon-size)!important}
:where(button svg,.f254-btn svg,.f254-social-btn svg,.f254-icon-btn svg,.f254-social-more svg){width:var(--f-button-icon-size)!important;height:var(--f-button-icon-size)!important}
.f254-social-action svg{width:var(--f-feed-icon-size)!important;height:var(--f-feed-icon-size)!important}

/* Feature-card coverage discovered by the v13.2.5 CSS audit. */
:where(.f254-suggestion-card,.f254-user-suggestion-card,.f254-reel-suggestion-card,.f254-premium-video-card,
.f254-premium-user-card,.f254-group-card,.f254-product-card,.f254-marketplace-listing,.f254-creator-card,
.f254-analytics-card,.f254-stat-card,.f254-kpi-card,.f254-plan-card,.f254-pricing-card,.f254-verification-step-card,
.f254-group-create-card,.f254-onboarding-card,.f254-story-insight-card,.f254-ad-preview-card,.f254-sponsored-card){
  background:var(--f-surface)!important;
  color:var(--f-text)!important;
  border:var(--f-border-width) solid var(--f-line)!important;
  border-radius:var(--f-card-radius)!important;
  box-shadow:var(--f-shadow-soft)!important;
}
:where(.f254-suggestion-card header,.f254-reel-suggestion-card header,.f254-premium-video-card header,
.f254-premium-user-card header,.f254-group-card header,.f254-product-card header){background:transparent!important;color:var(--f-text)!important;border-color:var(--f-line)!important}

/* Semantic controls keep meaning but use administrator-selected semantic colors. */
:where(.f254-btn-danger,.is-danger,[data-tone="danger"]){color:var(--f-red)!important;border-color:color-mix(in srgb,var(--f-red) 38%,var(--f-line))!important}
:where(.f254-btn-danger:not(.f254-btn-ghost),.is-danger.is-active){background:var(--f-red)!important;color:#fff!important}
:where(.is-success,[data-tone="success"]){color:var(--f-green)!important;border-color:color-mix(in srgb,var(--f-green) 38%,var(--f-line))!important}
:where(.is-warning,[data-tone="warning"]){color:var(--f-amber)!important;border-color:color-mix(in srgb,var(--f-amber) 38%,var(--f-line))!important}

/* Tables, rows and list items. */
:where(.f254-table,.f254-table-wrap,table,.f254-list,.f254-result-list){background:var(--f-surface)!important;color:var(--f-text)!important;border-color:var(--f-line)!important}
:where(.f254-table th,table th){background:var(--f-surface-2)!important;color:var(--f-text)!important;border-color:var(--f-line)!important}
:where(.f254-table td,table td,.f254-list-item,.f254-result-item){background:var(--f-surface)!important;color:var(--f-text)!important;border-color:var(--f-line)!important}

/* Scrollable horizontal suggestion rails share strip colors without changing Story viewer media. */
:where(.f254-home-suggestions,.f254-reels-suggestions,.f254-premium-videos-strip,.f254-premium-users-strip,
.f254-groups-strip,.f254-products-strip,.f254-horizontal-rail,.f254-scroll-rail){background:var(--f-strip-bg)!important;border-color:var(--f-line)!important}


/* v13.2.8 administrator-controlled video play background. */
:where(.f254-social-play,.f254-reels-play-state,.f254-video-play,.f254-play-button,
.f254-video-overlay-play,.f254-home-reel-play,.f254-premium-video-play,.f254-sponsored-video-play,[data-video-play]){
  background:var(--f-video-play-bg,#0b1724)!important;color:#fff!important;
  border-color:color-mix(in srgb,#fff 24%,transparent)!important;
}
:where(.f254-social-play,.f254-reels-play-state,.f254-video-play,.f254-play-button,
.f254-video-overlay-play,.f254-home-reel-play,.f254-premium-video-play,.f254-sponsored-video-play,[data-video-play]) svg{
  color:inherit!important;stroke:currentColor!important;fill:currentColor;
}

/* v13.2.8 semantic appearance audit fallback.
   It lets page-specific tabs, pills, menus and icon wrappers obey the same
   light/dark settings while preserving their existing component structure. */
:where([class*="-tabs"] > button,[class*="-tabs"] > a,[class*="-tablist"] button,[class*="-tablist"] a,
button[class*="-tab"]:not([class*="-table"]),a[class*="-tab"]:not([class*="-table"]),[role="tab"]){
  background:var(--f-tab-bg)!important;color:var(--f-tab-text)!important;
  border-color:var(--f-line)!important;border-radius:var(--f-button-radius)!important;
}
:where([class*="-tabs"] > button.is-active,[class*="-tabs"] > a.is-active,[class*="-tablist"] button.is-active,
[class*="-tablist"] a.is-active,button[class*="-tab"].is-active,a[class*="-tab"].is-active,
[role="tab"][aria-selected="true"]){
  background:var(--f-tab-active-bg)!important;color:var(--f-tab-active-text)!important;
  border-color:color-mix(in srgb,var(--f-tab-active-text) 38%,var(--f-line))!important;
}
:where([class*="-pill"],[class*="-chip"],[class*="-status"]){
  background:var(--f-pill-bg)!important;color:var(--f-pill-text)!important;
  border-color:var(--f-line)!important;border-radius:var(--f-pill-radius)!important;
}
:where([class*="-pill"].is-active,[class*="-chip"].is-active,[class*="-chip"].is-selected,
[class*="-status"].is-active,[class*="-status"].is-selected){
  background:var(--f-pill-active-bg)!important;color:var(--f-pill-active-text)!important;
  border-color:var(--f-pill-active-bg)!important;
}
:where([class*="-sidebar"]){background:var(--f-sidebar-bg)!important;color:var(--f-text)!important;border-color:var(--f-line)!important}
:where([class*="-menu"]:not([class*="-menu-item"]),[class*="-dropdown"],[class*="-popover"],[role="menu"]){
  background:var(--f-menu-bg)!important;color:var(--f-text)!important;border-color:var(--f-line)!important;
}
:where(article[class*="-card"],section[class*="-card"],li[class*="-card"],div[class*="-card"]:not([class*="-card-"])){
  color:var(--f-text)!important;border-color:var(--f-line)!important;
}
:where([class*="-icon"] svg,[class*="_icon"] svg,[data-icon] svg):not(.f254-brand-mark):not(.f254-logo-mark){
  width:var(--f-icon-size)!important;height:var(--f-icon-size)!important;
  color:inherit;stroke:currentColor;stroke-width:var(--f-svg-stroke-width)!important;
}
:where([class*="-sidebar"] a svg,[class*="-sidebar"] button svg,[class*="-menu"] a svg,[class*="-menu"] button svg,
[class*="-nav"] a svg,[class*="-nav"] button svg){width:var(--f-nav-icon-size)!important;height:var(--f-nav-icon-size)!important}
:where(button[class*="-btn"] svg,a[class*="-btn"] svg,button[class*="-button"] svg,a[class*="-button"] svg){
  width:var(--f-button-icon-size)!important;height:var(--f-button-icon-size)!important;
}
:where([class*="feed"] [class*="action"] svg,[class*="reel"] [class*="action"] svg,
button[class*="feed-action"] svg,button[class*="reel-action"] svg){
  width:var(--f-feed-icon-size)!important;height:var(--f-feed-icon-size)!important;
  stroke-width:var(--f-feed-svg-stroke-width)!important;
}
:where([class*="-nav"] a,[class*="-nav"] button,[class*="-sidebar"] a,[class*="-sidebar"] button,
[class*="-menu"] a,[class*="-menu"] button){color:var(--f-icon-muted)!important}
:where([class*="-nav"] a.is-active,[class*="-nav"] button.is-active,[class*="-sidebar"] a.is-active,
[class*="-sidebar"] button.is-active,[class*="-menu"] a.is-active,[class*="-menu"] button.is-active){color:var(--f-primary)!important}


/* =========================================================
   Fans254 v13.2.8 — readable responsive defaults and feed spacing.
   Loaded last. It preserves borders and makes spacing one SQL-backed system.
   ========================================================= */
:where(.f254-social-user-line strong,.f254-social-repost-head strong,.f254-home-suggestion-name,
.f254-home-reel-copy strong,.f254-premium-video-copy strong,.f254-premium-user-copy strong,
.f254-group-card h3,.f254-product-card h3,.f254-marketplace-card h3){
  font-size:var(--f-type-name-size)!important;
  font-weight:var(--f-type-label-weight)!important;
}
:where(.f254-social-handle,.f254-home-suggestion-handle,.f254-home-reel-copy small,
.f254-premium-video-copy small,.f254-premium-user-copy small){
  font-size:var(--f-type-username-size)!important;
  font-weight:var(--f-type-username-weight)!important;
}
:where(.f254-social-post-body,.f254-social-repost-quote,.f254-sponsored-copy,
.f254-group-post-body,.f254-marketplace-description){
  font-size:var(--f-type-feed-body-size)!important;
  line-height:var(--f-type-body-line)!important;
}
:where(.f254-social-mobile-header,.f254-social-desktop-header,.f254-home-subheader,
.f254-mobile-subheader,.f254-social-bottom-nav,.f254-bottom-nav){
  font-size:var(--f-type-nav-size)!important;
  font-weight:var(--f-type-nav-weight)!important;
}
:where(.f254-social-more,.f254-icon-btn,.f254-header-button,.f254-social-close){
  min-width:44px!important;
  min-height:44px!important;
}
:where(.f254-btn,.f254-social-btn,.f254-follow-button,.f254-promote-button,
.f254-group-primary-action,.f254-marketplace-btn){
  min-height:42px;
}

/* One feed-gap token for Home and Profile. Inline PHP values remain fallback only. */
.f254-page-home .is-home-ui,
.f254-page-profile{
  --f254-home-feed-gap:var(--f-feed-gap)!important;
  --f254-horizontal-mobile-margin-top:var(--f-horizontal-margin-top)!important;
  --f254-horizontal-mobile-margin-bottom:var(--f-horizontal-margin-bottom)!important;
  --f254-horizontal-tablet-margin-top:var(--f-horizontal-margin-top)!important;
  --f254-horizontal-tablet-margin-bottom:var(--f-horizontal-margin-bottom)!important;
}
.f254-page-home .is-home-ui .f254-social-feed,
.f254-page-profile .f254-social-profile-post-stream{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  align-content:start!important;
  gap:var(--f-feed-gap)!important;
  row-gap:var(--f-feed-gap)!important;
}
.f254-page-home .is-home-ui .f254-social-feed > *,
.f254-page-profile .f254-social-profile-post-stream > *{
  box-sizing:border-box!important;
  margin-top:0!important;
  margin-bottom:0!important;
}
.f254-page-home .is-home-ui .f254-social-feed > .f254-social-post,
.f254-page-profile .f254-social-profile-post-stream > .f254-social-post{
  border:var(--f-border-width) solid var(--f-line)!important;
  border-radius:var(--f-card-radius)!important;
}

/* Horizontal modules use direct margins; no negative calculations or hidden gaps. */
:is(.f254-page-home,.f254-page-profile) :is(
  .f254-home-suggestions.is-inline,
  .f254-home-reel-suggestions.is-inline,
  .f254-premium-videos.is-inline,
  .f254-premium-users.is-inline,
  .f254-home-group-suggestions.is-inline,
  .f254-marketplace-suggestions.is-inline,
  [data-discovery-sequence],
  [data-premium-sequence]
){
  margin-top:var(--f-horizontal-margin-top)!important;
  margin-bottom:var(--f-horizontal-margin-bottom)!important;
  border:var(--f-border-width) solid var(--f-line)!important;
}

@media(max-width:767px){
  .f254-page-home .is-home-ui .f254-social-feed,
  .f254-page-profile .f254-social-profile-post-stream{
    gap:var(--f-feed-gap)!important;
    row-gap:var(--f-feed-gap)!important;
  }
  .f254-page-home .is-home-ui .f254-social-feed{padding-top:0!important}
  /* Override legacy 8px background separators while keeping real Appearance borders. */
  .f254-page-home .is-home-ui .f254-social-feed > .f254-social-post,
  .f254-page-home .is-home-ui .f254-social-feed > .f254-social-inline-trending,
  .f254-page-home .is-home-ui .f254-social-feed > .f254-sponsored-feed,
  .f254-page-profile .f254-social-profile-post-stream > .f254-social-post{
    margin-block:0!important;
    border-width:var(--f-border-width)!important;
    border-style:solid!important;
    border-color:var(--f-line)!important;
  }
  .f254-page-home .is-home-ui.is-home-mobile-edge .f254-social-post,
  .f254-page-home .is-home-ui.is-home-mobile-edge .f254-social-inline-trending,
  .f254-page-home .is-home-ui.is-home-mobile-edge .f254-home-suggestions.is-inline,
  .f254-page-home .is-home-ui.is-home-mobile-edge .f254-home-reel-suggestions.is-inline,
  .f254-page-home .is-home-ui.is-home-mobile-edge .f254-premium-videos.is-inline,
  .f254-page-home .is-home-ui.is-home-mobile-edge .f254-premium-users.is-inline,
  .f254-page-home .is-home-ui.is-home-mobile-edge .f254-sponsored-feed{
    border-inline:var(--f-border-width) solid var(--f-line)!important;
  }
}

@media(min-width:768px) and (max-width:1199px){
  .f254-page-home .is-home-ui .f254-social-feed,
  .f254-page-profile .f254-social-profile-post-stream{
    gap:var(--f-feed-gap)!important;
    row-gap:var(--f-feed-gap)!important;
  }
}

/* v13.2.8: SVG general, navigation, button and feed-action sizes plus stroke weights are independent per mobile, tablet and desktop. */

/* v13.2.10 — edge-aligned Home feed and physical repost side-border removal. */
.f254-page-home .is-home-ui .f254-social-feed{
  padding:0!important;
}

/* Keep Admin-controlled top/bottom borders, but never draw left/right borders
   around repost cards or their embedded original content. */
.f254-social-post.f254-social-repost,
.f254-social-repost-original>.f254-social-post,
.f254-social-repost-original>.f254-social-post>.f254-social-post-head,
.f254-social-repost-original>.f254-social-post>.f254-social-post-body,
.f254-social-repost-original>.f254-social-post>.f254-social-post-media,
.f254-social-repost-original>.f254-social-post>.f254-social-feed-reel-preview{
  border-left:0!important;
  border-right:0!important;
  border-inline-start:0!important;
  border-inline-end:0!important;
}

/* =========================================================
   Fans254 v13.2.12 corrective UI overrides
   ========================================================= */

/* Reposts: remove every physical/inline side rule from the repost shell,
   embedded original header/body/media and any generated edge decoration.
   Top and bottom separators remain controlled by Appearance. */
html body .f254-social-app [data-repost-record],
html body .f254-social-app [data-repost-record] > .f254-social-repost-original,
html body .f254-social-app [data-repost-record] .f254-social-repost-original > .f254-social-post,
html body .f254-social-app [data-repost-record] .f254-social-repost-original > .f254-social-post > .f254-social-post-head,
html body .f254-social-app [data-repost-record] .f254-social-repost-original > .f254-social-post > .f254-social-post-body,
html body .f254-social-app [data-repost-record] .f254-social-repost-original > .f254-social-post > .f254-social-post-media,
html body .f254-social-app [data-repost-record] .f254-social-repost-original > .f254-social-post > .f254-social-feed-reel-preview{
  border-left-width:0!important;
  border-right-width:0!important;
  border-inline-width:0!important;
  border-inline-start-width:0!important;
  border-inline-end-width:0!important;
  outline-left:0!important;
  outline-right:0!important;
  box-shadow:none!important;
}
html body .f254-social-app [data-repost-record]::before,
html body .f254-social-app [data-repost-record]::after,
html body .f254-social-app [data-repost-record] .f254-social-repost-original::before,
html body .f254-social-app [data-repost-record] .f254-social-repost-original::after{
  display:none!important;
  content:none!important;
}

/* Feed actions: active state changes the SVG only. It never paints a pill
   background and never recolors the numerical count. */
.f254-social-actions .f254-social-action.is-active{
  background:transparent!important;
  box-shadow:none!important;
}
.f254-social-actions .f254-social-action.is-active svg{
  color:var(--f-feed-icon-active)!important;
  stroke:currentColor!important;
}
.f254-social-actions .f254-social-action.is-active > span,
.f254-social-actions .f254-social-action.is-active [data-count]{
  color:var(--f-feed-icon)!important;
}

/* Reel feed tabs are text/underline controls over media, not surface cards. */
.f254-reels-app .f254-reels-tabs > button,
.f254-reels-app .f254-reels-tabs > button.is-active{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.f254-reels-app .f254-reels-tabs > button{color:rgba(255,255,255,.76)!important}
.f254-reels-app .f254-reels-tabs > button.is-active{color:#fff!important}

/* Reel creator identity and caption must remain visible over every light or
   dark video regardless of the selected global Appearance text colors. */
.f254-reels-app .f254-reels-content,
.f254-reels-app .f254-reels-content a,
.f254-reels-app .f254-reels-author-line,
.f254-reels-app .f254-reels-author-line a,
.f254-reels-app .f254-reels-author-line strong,
.f254-reels-app .f254-reels-author-line small,
.f254-reels-app .f254-reels-caption,
.f254-reels-app .f254-reels-audio,
.f254-reels-app .f254-reels-hashtags{
  opacity:1!important;
  visibility:visible!important;
  color:#fff!important;
  text-shadow:0 1px 5px rgba(0,0,0,.88)!important;
}
.f254-reels-app .f254-reels-author-line small{color:rgba(255,255,255,.86)!important}
.f254-reels-app .f254-reels-content{z-index:12!important}


/* Fans254 v13.2.14 Poll bindings — no duplicate settings; shared Appearance is authoritative. */
:where(.f254-feed-poll,.f254-post-poll-builder,.f254-poll-admin-preview){
  background:var(--f-surface)!important;
  color:var(--f-text)!important;
  border:var(--f-border-width) solid var(--f-line)!important;
  border-radius:var(--f-card-radius)!important;
  box-shadow:var(--f-shadow-soft)!important;
}
:where(.f254-feed-poll>header,.f254-post-poll-builder>header,.f254-poll-admin-preview>header){background:transparent!important;color:var(--f-text)!important;border-color:var(--f-line)!important}
:where(.f254-feed-poll-option,.f254-post-poll-option-fields>label,.f254-post-poll-add,.f254-post-create-tool,.f254-poll-admin-preview>div>span){
  background:var(--f-button-bg,var(--f-surface,#fff))!important;
  color:var(--f-button-text,var(--f-text,#101828))!important;
  border-color:var(--f-line)!important;
  border-radius:var(--f-button-radius)!important;
  box-shadow:var(--f-shadow-soft)!important;
}
:where(.f254-feed-poll-option.is-selected,.f254-post-create-tool.is-active){
  background:var(--f-button-active-bg,var(--f-primary,var(--f-blue,#1688f5)))!important;
  color:var(--f-button-active-text,#fff)!important;
  border-color:var(--f-button-active-bg,var(--f-primary,var(--f-blue,#1688f5)))!important;
}
.f254-feed-poll-option>i{background:color-mix(in srgb,var(--f-primary) 15%,transparent)!important}
:where(.f254-feed-poll>header>span,.f254-post-poll-builder>header>span,.f254-poll-admin-preview>header>span){background:var(--f-pill-bg)!important;color:var(--f-icon)!important;border-radius:var(--f-button-radius)!important}
:where(.f254-feed-poll>header>b,.f254-feed-poll>footer>b){background:var(--f-pill-active-bg)!important;color:var(--f-pill-active-text)!important;border-radius:var(--f-pill-radius)!important}
:where(.f254-feed-poll input,.f254-feed-poll select,.f254-post-poll-builder input,.f254-post-poll-builder select){background:var(--f-input-bg)!important;color:var(--f-text)!important;border-color:var(--f-line)!important;border-radius:var(--f-input-radius)!important}
:where(.f254-feed-poll svg,.f254-post-poll-builder svg,.f254-post-create-tool svg,.f254-poll-admin-preview svg){stroke-width:var(--f-svg-stroke-width)!important}

/* Fans254 v13.3.6 — final Appearance-layer corrections. */
.f254-page-profile .f254-social-profile-tab,
.f254-page-profile .f254-social-profile-tab.is-active{
  background:transparent!important;
  border-color:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.f254-page-home .f254-home-suggestions.is-inline .f254-home-suggestion-card{
  background:var(--f-surface)!important;
  color:var(--f-text)!important;
  border:var(--f-border-width) solid var(--f-line)!important;
  border-radius:var(--f-card-radius)!important;
  box-shadow:var(--f-shadow-soft)!important;
}
.f254-page-home .f254-home-suggestions.is-inline .f254-home-suggestion-new{
  background:var(--f-blue-soft)!important;
  color:var(--f-blue)!important;
  border-color:color-mix(in srgb,var(--f-blue) 34%,var(--f-line))!important;
}
.f254-page-home .f254-home-suggestions.is-inline .f254-home-suggestion-follow.is-following,
.f254-page-home .f254-home-suggestions.is-inline .f254-home-suggestion-follow.is-requested{
  background:var(--f-surface-2)!important;
  color:var(--f-text)!important;
  border-color:var(--f-line)!important;
}

/* Fans254 v13.3.56 — semantic engagement feedback survives appearance overrides. */
.f254-social-actions .f254-social-action.is-like.is-active,
.f254-social-actions .f254-social-action.is-like.is-active>span,
.f254-social-actions .f254-social-action.is-like.is-active [data-count]{color:#e94462!important;background:transparent!important}
.f254-social-actions .f254-social-action.is-comment.is-active,
.f254-social-actions .f254-social-action.is-comment.is-active>span,
.f254-social-actions .f254-social-action.is-comment.is-active [data-count]{color:#7c3aed!important;background:transparent!important}
.f254-social-actions .f254-social-action.is-repost.is-active,
.f254-social-actions .f254-social-action.is-repost.is-active>span,
.f254-social-actions .f254-social-action.is-repost.is-active [data-count]{color:#16a34a!important;background:transparent!important}
.f254-social-actions .f254-social-action.is-save.is-active,
.f254-social-actions .f254-social-action.is-save.is-active>span,
.f254-social-actions .f254-social-action.is-save.is-active [data-count]{color:#149cff!important;background:transparent!important}
.f254-social-actions .f254-social-action.is-active .f254-icon{stroke:currentColor!important}
.f254-social-actions .f254-social-action.is-like.is-active .f254-icon,
.f254-social-actions .f254-social-action.is-save.is-active .f254-icon{fill:color-mix(in srgb,currentColor 16%,transparent)!important}


/* Fans254 v13.7.4 — header name and logo color controls. */
.f254-social-wordmark,
.f254-social-header-brand,
.f254-social-brand,
.f254-mobile-sidebar-brand,
.f254-sidebar-brand,
.f254-brand{
  color:var(--f-header-name-color,var(--f-link,var(--f-blue)))!important;
}
.f254-social-wordmark>span,
.f254-social-header-brand>span,
.f254-social-brand>span,
.f254-mobile-sidebar-brand>span,
.f254-sidebar-brand>span,
.f254-brand>span{
  color:var(--f-header-name-color,var(--f-link,var(--f-blue)))!important;
}
.f254-social-brand-mark,
.f254-social-header-logo,
.f254-social-wordmark-logo,
.f254-mobile-sidebar-logo,
.f254-site-logo,
.f254-site-logo-mask,
.brand-mark{
  color:var(--f-header-logo-color,var(--f-link,var(--f-blue)))!important;
  fill:currentColor!important;
  stroke:currentColor!important;
}
.f254-site-logo-mask{
  background-color:var(--f-header-logo-color,var(--f-link,var(--f-blue)))!important;
}

/* Fans254 v13.8.0 — administrator brand, Create and horizontal suggestion colors. */
:where(.f254-social-create-nav,.f254-social-desktop-nav [data-tablet-sidebar-item="create"],.f254-story-card__create-button){
  background:var(--f-create-button-bg,var(--f-primary))!important;
  border-color:var(--f-create-button-bg,var(--f-primary))!important;
  color:var(--f-create-button-icon,#fff)!important;
}
:where(.f254-social-create-nav,.f254-social-desktop-nav [data-tablet-sidebar-item="create"],.f254-story-card__create-button) svg{
  color:var(--f-create-button-icon,#fff)!important;
  stroke:currentColor!important;
}
:where(
  .f254-home-suggestions.is-inline .f254-home-suggestion-follow:not(.is-following):not(.is-requested),
  .f254-premium-users.is-inline .f254-premium-user-follow:not(.is-following):not(.is-requested),
  .f254-home-group-suggestions.is-inline .f254-group-action:not(.is-secondary),
  #stories-strip .f254-story-person-follow:not(.is-following):not(.is-requested),
  .f254-ui20-inline .f254-ui20-user-card .f254-ui20-btn:not(.is-secondary):not(.is-requested),
  .f254-ui20-inline .f254-ui20-premium-copy .f254-ui20-btn:not(.is-secondary):not(.is-requested)
){
  background:var(--f-horizontal-button-bg,var(--f-primary))!important;
  border-color:var(--f-horizontal-button-bg,var(--f-primary))!important;
  color:var(--f-horizontal-button-text,#fff)!important;
}
:where(
  .f254-home-suggestions.is-inline .f254-home-suggestion-follow:not(.is-following):not(.is-requested),
  .f254-premium-users.is-inline .f254-premium-user-follow:not(.is-following):not(.is-requested),
  .f254-home-group-suggestions.is-inline .f254-group-action:not(.is-secondary),
  #stories-strip .f254-story-person-follow:not(.is-following):not(.is-requested),
  .f254-ui20-inline .f254-ui20-user-card .f254-ui20-btn:not(.is-secondary):not(.is-requested),
  .f254-ui20-inline .f254-ui20-premium-copy .f254-ui20-btn:not(.is-secondary):not(.is-requested)
) :is(svg,span){color:inherit!important}

@media(prefers-reduced-motion:reduce){
  .f254-home-subheader__item .f254-subheader-icon-fill{animation:none!important}
}

/* Fans254 v13.8.1 — exact Create and suggestion token binding after legacy component rules. */
html body .f254-social-app .f254-social-bottom-nav>button.f254-social-create-nav,
html body .f254-social-app .f254-social-bottom-nav>.f254-social-create-nav,
html body .f254-social-app .f254-social-desktop-nav [data-tablet-sidebar-item="create"],
html body .f254-page-home #stories-strip .f254-story-card__create-button{
  background-color:var(--f-create-button-bg,var(--f-primary))!important;
  background-image:none!important;border-color:var(--f-create-button-bg,var(--f-primary))!important;
  color:var(--f-create-button-icon,#fff)!important;opacity:1!important;
}
html body .f254-social-app .f254-social-bottom-nav>.f254-social-create-nav :is(svg,use,path,line,polyline,circle),
html body .f254-social-app .f254-social-desktop-nav [data-tablet-sidebar-item="create"] :is(svg,use,path,line,polyline,circle),
html body .f254-page-home #stories-strip .f254-story-card__create-button :is(svg,use,path,line,polyline,circle){
  color:var(--f-create-button-icon,#fff)!important;stroke:currentColor!important;fill:none!important;
}
html body .f254-page-home :is(.f254-home-suggestions.is-inline .f254-home-suggestion-follow,#stories-strip .f254-story-person-follow):not(.is-following):not(.is-requested){
  background-color:var(--f-horizontal-button-bg,var(--f-primary))!important;
  background-image:none!important;border-color:var(--f-horizontal-button-bg,var(--f-primary))!important;
  color:var(--f-horizontal-button-text,#fff)!important;
}