/* Fans254 SQL-backed typography layer. Loaded last so it applies consistently without duplicating component CSS. */
:root {
  --f-font-primary: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-font-heading: var(--f-font-primary);
  --f-font-ui: var(--f-font-primary);
  --f-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --f-font-admin: var(--f-font-primary);
  --f-font-auth: var(--f-font-primary);
  --f-font-social: var(--f-font-primary);
  --f-font-messages: var(--f-font-primary);
  --f-font-reels: var(--f-font-primary);
  --f-font-brand: var(--f-font-heading);
  --f-type-base-size: 15px;
  --f-type-component-scale: 1;
  --f-type-body-weight: 400;
  --f-type-heading-weight: 700;
  --f-type-button-weight: 600;
  --f-type-label-weight: 600;
  --f-type-nav-weight: 600;
  --f-type-username-weight: 400;
  --f-type-muted-weight: 400;
  --f-type-metric-weight: 700;
  --f-type-input-weight: 400;
  --f-type-body-line: 1.5;
  --f-type-heading-line: 1.14;
  --f-type-body-spacing: 0em;
  --f-type-heading-spacing: -.03em;
  --f-type-button-spacing: 0em;
  --f-type-username-spacing: 0em;
  --f-type-nav-size: 14px;
  --f-type-button-size: 14px;
  --f-type-input-size: 16px;
  --f-type-label-size: 13px;
  --f-type-username-size: 13px;
  --f-type-metadata-size: 12px;
  --f-type-feed-body-size: 15px;
  --f-type-comment-size: 14px;
  --f-type-message-size: 15px;
  --f-type-reel-caption-size: 14px;
  --f-type-admin-table-size: 13px;
  --f-type-metric-size: 26px;
  --f-type-modal-title-size: 20px;
  --f-type-header-size: 21px;
  --f-type-name-size: 15px;
}
html, body { font-family: var(--f-font-primary); font-size: var(--f-type-base-size); font-weight: var(--f-type-body-weight); line-height: var(--f-type-body-line); letter-spacing: var(--f-type-body-spacing); }
body, p, li, dd, dt, blockquote { font-family: inherit; }
h1,h2,h3,h4,h5,h6,
.f254-title,.f254-section-title,.f254-page-title,.f254-auth-title,.f254-v2-title,
.f254-social-profile-name,.f254-social-sheet-title,.f254-modal-title {
  font-family: var(--f-font-heading);
  font-weight: var(--f-type-heading-weight);
  line-height: var(--f-type-heading-line);
  letter-spacing: var(--f-type-heading-spacing);
}
button,.f254-btn,.f254-nav-link,.f254-bottom-link,.f254-settings-tab,
.f254-social-desktop-nav a,.f254-social-desktop-nav button,.f254-social-bottom-nav a,.f254-social-bottom-nav button {
  font-family: var(--f-font-ui);
  font-size: var(--f-type-button-size);
  font-weight: var(--f-type-button-weight);
  letter-spacing: var(--f-type-button-spacing);
}
input,select,textarea,.f254-input,.f254-select,.f254-textarea {
  font-family: var(--f-font-ui);
  font-size: var(--f-type-input-size);
  font-weight: var(--f-type-input-weight);
}
label,.f254-label,.f254-table th,.f254-social-tab,.f254-social-profile-tab {
  font-family: var(--f-font-ui);
  font-size: var(--f-type-label-size);
  font-weight: var(--f-type-label-weight);
}
nav,.f254-sidebar-nav,.f254-social-desktop-nav,.f254-social-bottom-nav,.f254-bottom-nav {
  font-family: var(--f-font-ui);
  font-size: var(--f-type-nav-size);
  font-weight: var(--f-type-nav-weight);
}
code,pre,kbd,samp,.f254-cron-command { font-family: var(--f-font-mono); }
.f254-caption,.f254-small,.f254-help,.f254-faint,.f254-muted,
.f254-social-meta,.f254-social-post-time,.f254-social-username,
.f254-message-time,.f254-notification-time {
  font-size: var(--f-type-metadata-size);
  font-weight: var(--f-type-muted-weight);
}
.f254-user-handle,.f254-social-username,[class*="username"],[class*="handle"] {
  font-size: var(--f-type-username-size);
  font-weight: var(--f-type-username-weight);
  letter-spacing: var(--f-type-username-spacing);
}
.f254-social-post-body,.f254-social-caption,.f254-social-post-copy { font-size: var(--f-type-feed-body-size); }
.f254-social-comment,.f254-comment-body,.f254-notification-copy { font-size: var(--f-type-comment-size); }
.f254-message-bubble,.f254-chat-message,.f254-message-copy { font-size: var(--f-type-message-size); }
.f254-reels-caption,.f254-reels-copy,.f254-reel-caption { font-size: var(--f-type-reel-caption-size); }
.f254-table td,.f254-table th { font-size: var(--f-type-admin-table-size); }
.f254-metric-value { font-size: var(--f-type-metric-size); font-weight: var(--f-type-metric-weight); }
.f254-modal-head h2,.f254-social-sheet-title { font-size: var(--f-type-modal-title-size); }
.f254-admin { font-family: var(--f-font-admin); }
.f254-v2-page,.f254-v2-onboard,.f254-auth-shell,.f254-install-shell { font-family: var(--f-font-auth); }
.f254-social-app,.f254-social-shell { font-family: var(--f-font-social); }
.f254-messenger-app,.f254-message-app,.f254-chat-shell { font-family: var(--f-font-messages); }
.f254-reels-app,.f254-reels-card { font-family: var(--f-font-reels); }
.f254-font-preview {
  min-height: 150px;
  padding: 20px;
  border: 1px solid var(--f-line);
  border-radius: 14px;
  background: var(--f-surface);
  overflow: hidden;
}
.f254-font-preview h3 { margin: 0 0 8px; }
.f254-font-preview p { margin: 0 0 12px; color: var(--f-muted); }
.f254-font-library { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; max-height: 560px; overflow: auto; padding-right: 4px; }
.f254-font-library-item { min-width: 0; padding: 12px; border: 1px solid var(--f-line); border-radius: 12px; background: var(--f-surface); }
.f254-font-library-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f254-font-library-item small { color: var(--f-faint); }
@media(max-width:900px){.f254-font-library{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.f254-font-library{grid-template-columns:1fr}.f254-font-preview{padding:16px}}

/* v13.2.5 complete typography coverage: one token layer, no duplicate component rules. */
:root{
  --f-type-tab-size:15px;
  --f-type-pill-size:13px;
  --f-type-step-size:14px;
  --f-type-menu-size:15px;
  --f-type-sidebar-size:15px;
  --f-type-card-title-size:18px;
  --f-type-modal-body-size:16px;
  --f-type-feed-action-size:14px;
  --f-type-header-size:22px;
  --f-type-name-size:17px;
}

/* Pages, cards and feature shells inherit their intended family. */
:where(body,.f254-page,.f254-shell,.f254-card,.f254-panel,.f254-wallet-page,.f254-marketplace-page,.f254-purchases-page,.f254-notifications-page){font-family:var(--f-font-primary)!important}
:where(.f254-admin,.f254-admin-shell,.f254-admin-content,.f254-admin-sidebar){font-family:var(--f-font-admin)!important}
:where(.f254-social-app,.f254-social-shell,.f254-social-post,.f254-social-repost,.f254-story-card,.f254-group-post,.f254-marketplace-card){font-family:var(--f-font-social)!important}
:where(.f254-reels-app,.f254-reels-card,.f254-reels-suggestion-card){font-family:var(--f-font-reels)!important}
:where(.f254-messenger-app,.f254-message-app,.f254-chat-shell,.f254-message-modal){font-family:var(--f-font-messages)!important}
:where(.f254-v2-page,.f254-v2-onboard,.f254-auth-shell,.f254-install-shell,.f254-verification-page,.f254-group-create-page){font-family:var(--f-font-auth)!important}

/* Titles everywhere, including card and popup titles. */
:where(h1,h2,h3,h4,h5,h6,.f254-title,.f254-section-title,.f254-page-title,.f254-card-title,.f254-panel-title,
.f254-social-profile-name,.f254-modal-title,.f254-social-sheet-title,.f254-popup-title){
  font-family:var(--f-font-heading)!important;
  font-weight:var(--f-type-heading-weight)!important;
  line-height:var(--f-type-heading-line)!important;
  letter-spacing:var(--f-type-heading-spacing)!important;
}
:where(.f254-card-head h2,.f254-card-head h3,.f254-card-title,.f254-panel-title){font-size:var(--f-type-card-title-size)!important}

/* Buttons, button words and button-contained labels use one UI token. */
:where(button,.f254-btn,.f254-social-btn,.f254-icon-btn,.f254-header-button,.f254-social-header-pill,
.f254-group-primary-action,.f254-bottom-action,.f254-follow-button,.f254-promote-button,
button span,.f254-btn span,.f254-social-btn span,.f254-header-button span){
  font-family:var(--f-font-ui)!important;
  font-size:var(--f-type-button-size)!important;
  font-weight:var(--f-type-button-weight)!important;
  letter-spacing:var(--f-type-button-spacing)!important;
}

/* Tabs are not generic buttons: they have a dedicated size. */
:where(.f254-settings-tab,.f254-social-tab,.f254-social-profile-tab,.f254-tab,.f254-filter-tab,[role="tab"]){
  font-family:var(--f-font-ui)!important;
  font-size:var(--f-type-tab-size)!important;
  font-weight:var(--f-type-label-weight)!important;
  letter-spacing:var(--f-type-button-spacing)!important;
}

/* Pills, statuses and badges. */
: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){
  font-family:var(--f-font-ui)!important;
  font-size:var(--f-type-pill-size)!important;
  font-weight:var(--f-type-label-weight)!important;
}

/* Wizard and verification steps. */
:where(.f254-step,.f254-step-number,.f254-step-label,.f254-v2-step-dot,.f254-verification-step,
.f254-group-create-step,.f254-progress-step){
  font-family:var(--f-font-ui)!important;
  font-size:var(--f-type-step-size)!important;
  font-weight:var(--f-type-label-weight)!important;
}

/* Sidebars, menus and shortcut rows. */
:where(.f254-sidebar,.f254-sidebar-nav,.f254-social-desktop-nav,.f254-social-bottom-nav,.f254-bottom-nav,
.f254-mobile-sidebar,.f254-tablet-sidebar,.f254-menu,.f254-dropdown,.f254-popover,.f254-more-popup,
.f254-context-menu,[role="menu"],[role="menuitem"]){
  font-family:var(--f-font-ui)!important;
  font-size:var(--f-type-sidebar-size)!important;
  font-weight:var(--f-type-nav-weight)!important;
}
:where(.f254-menu a,.f254-menu button,.f254-dropdown a,.f254-dropdown button,.f254-popover a,.f254-popover button,
.f254-social-side-action){font-size:var(--f-type-menu-size)!important}

/* Inputs, labels and helpers. */
:where(input,select,textarea,.f254-input,.f254-select,.f254-textarea,[contenteditable="true"]){
  font-family:var(--f-font-ui)!important;
  font-size:var(--f-type-input-size)!important;
  font-weight:var(--f-type-input-weight)!important;
}
:where(label,.f254-label,.f254-field>span,.f254-table th){font-family:var(--f-font-ui)!important;font-size:var(--f-type-label-size)!important;font-weight:var(--f-type-label-weight)!important}
:where(.f254-caption,.f254-subtitle,.f254-help,.f254-small,.f254-muted,.f254-faint,small,[class*="metadata"],[class*="-meta"],[class*="-time"]){font-size:var(--f-type-metadata-size)!important;font-weight:var(--f-type-muted-weight)!important}

/* Usernames and handles stay thin and distinct. */
:where(.f254-user-handle,.f254-social-username,.f254-social-handle,[class*="username"],[class*="handle"]){
  font-family:var(--f-font-social)!important;
  font-size:var(--f-type-username-size)!important;
  font-weight:var(--f-type-username-weight)!important;
  letter-spacing:var(--f-type-username-spacing)!important;
}

/* Feed copy, comments, messages, Reels and feed action counters are separate. */
:where(.f254-social-post-body,.f254-social-caption,.f254-social-post-copy,.f254-social-repost-quote){font-family:var(--f-font-social)!important;font-size:var(--f-type-feed-body-size)!important}
:where(.f254-social-comment,.f254-comment-body,.f254-notification-copy,.f254-story-reply){font-size:var(--f-type-comment-size)!important}
:where(.f254-message-bubble,.f254-chat-message,.f254-message-copy){font-family:var(--f-font-messages)!important;font-size:var(--f-type-message-size)!important}
:where(.f254-reels-caption,.f254-reels-copy,.f254-reel-caption){font-family:var(--f-font-reels)!important;font-size:var(--f-type-reel-caption-size)!important}
:where(.f254-social-action,.f254-social-action span,.f254-reels-action-count,.f254-feed-action){font-family:var(--f-font-ui)!important;font-size:var(--f-type-feed-action-size)!important;font-weight:var(--f-type-label-weight)!important}

/* Modal and popup content. */
:where(.f254-modal-body,.f254-social-sheet-body,.f254-popup-body,.f254-dialog-body){font-size:var(--f-type-modal-body-size)!important}
:where(.f254-modal-head h2,.f254-social-sheet-head h2,.f254-popup-title){font-size:var(--f-type-modal-title-size)!important}

/* Metrics and admin tables. */
:where(.f254-metric-value,.f254-kpi-value,[class*="metric-value"]){font-family:var(--f-font-heading)!important;font-size:var(--f-type-metric-size)!important;font-weight:var(--f-type-metric-weight)!important}
:where(.f254-table td,.f254-table th,.f254-admin table td,.f254-admin table th){font-size:var(--f-type-admin-table-size)!important}


/* v13.2.8 readable defaults and full frontend coverage. */
:where(.f254-social-mobile-header strong,.f254-social-desktop-header h1,.f254-page-head h1,
.f254-profile-header h1,.f254-reels-header h1,.f254-notifications-mobile-header h1,
.f254-messenger-header h1,.f254-wallet-header h1,.f254-marketplace-header h1){
  font-family:var(--f-font-heading)!important;
  font-size:var(--f-type-header-size)!important;
  font-weight:var(--f-type-heading-weight)!important;
  line-height:var(--f-type-heading-line)!important;
}
:where(.f254-social-name,.f254-social-post-name,.f254-social-author-name,.f254-user-name,
.f254-user-cell strong,.f254-story-card__name,.f254-story-card__create-panel strong,
.f254-home-suggestion-name,.f254-home-reel-copy strong,.f254-premium-video-copy strong,
.f254-premium-user-copy strong,.f254-group-card strong,.f254-product-card strong,
.f254-marketplace-card strong,.f254-notification-copy strong,.f254-message-thread-name){
  font-family:var(--f-font-social)!important;
  font-size:var(--f-type-name-size)!important;
  font-weight:var(--f-type-label-weight)!important;
  line-height:1.28!important;
}
:where(.f254-social-post-header,.f254-social-repost-header,.f254-card-head,.f254-panel-head,
.f254-home-suggestions-head,.f254-home-reel-suggestions-head,.f254-premium-videos-head,
.f254-premium-users-head,.f254-marketplace-suggestions>header,.f254-home-group-head){font-family:var(--f-font-social)!important}
:where(.f254-social-actions,.f254-reels-actions,.f254-bottom-nav,.f254-social-bottom-nav,
.f254-home-subheader,.f254-settings-tabs,.f254-tabs,.f254-profile-tabs){font-family:var(--f-font-ui)!important}
:where(.f254-social-action,.f254-reels-action,.f254-feed-action){min-height:44px}
:where(.f254-btn,.f254-social-btn,.f254-follow-button,.f254-promote-button,
.f254-settings-tab,.f254-tab,.f254-pill,.f254-chip,.f254-step-pill){min-height:38px}
@media(max-width:759px){:where(.f254-btn,.f254-social-btn,.f254-follow-button,.f254-promote-button,
.f254-settings-tab,.f254-tab,.f254-pill,.f254-chip,.f254-step-pill){min-height:42px}}

/* v13.2.8 semantic audit fallback.
   Feature styles use many page-specific class names. These selectors map those
   names to the same administrator tokens without creating duplicate controls. */
: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"]){
  font-family:var(--f-font-ui)!important;
  font-size:var(--f-type-tab-size)!important;
  font-weight:var(--f-type-label-weight)!important;
}
:where([class*="-pill"],[class*="-chip"],[class*="-badge"],[class*="-status"]){
  font-family:var(--f-font-ui)!important;
  font-size:var(--f-type-pill-size)!important;
  font-weight:var(--f-type-label-weight)!important;
}
:where([class*="-step"]:not([class*="-stepper"]):not([class*="-steps-wrap"])){ 
  font-family:var(--f-font-ui)!important;
  font-size:var(--f-type-step-size)!important;
  font-weight:var(--f-type-label-weight)!important;
}
:where([class*="-sidebar"] a,[class*="-sidebar"] button,[class*="-menu"] a,[class*="-menu"] button,
[class*="-nav"] a,[class*="-nav"] button){
  font-family:var(--f-font-ui)!important;
  font-size:var(--f-type-sidebar-size)!important;
  font-weight:var(--f-type-nav-weight)!important;
}
:where(button[class*="-btn"],a[class*="-btn"],button[class*="-button"],a[class*="-button"],
[role="button"][class*="-action"]){
  font-family:var(--f-font-ui)!important;
  font-size:var(--f-type-button-size)!important;
  font-weight:var(--f-type-button-weight)!important;
}
:where([class*="-name"]:not([class*="username"]),[class*="-author"] strong,[class*="-user"] > strong){
  font-family:var(--f-font-social)!important;
  font-size:var(--f-type-name-size)!important;
  font-weight:var(--f-type-label-weight)!important;
}
:where([class*="-title"]:not([class*="-subtitle"]),[class*="-heading"]){
  font-family:var(--f-font-heading)!important;
  font-weight:var(--f-type-heading-weight)!important;
  line-height:var(--f-type-heading-line)!important;
}
:where([class*="-card-title"],[class*="-panel-title"],[class*="-section-title"]){font-size:var(--f-type-card-title-size)!important}
:where([class*="-modal"] [class*="-body"],[class*="-popup"] [class*="-body"],[class*="-sheet"] [class*="-body"],
[class*="-dialog"] [class*="-body"]){font-size:var(--f-type-modal-body-size)!important}
:where([class*="-modal"] h1,[class*="-modal"] h2,[class*="-popup"] h1,[class*="-popup"] h2,
[class*="-sheet"] h1,[class*="-sheet"] h2,[class*="-dialog"] h1,[class*="-dialog"] h2){font-size:var(--f-type-modal-title-size)!important}
:where(button[class*="-action"],a[class*="-action"],[class*="-actions"] > button,[class*="-actions"] > a){
  font-size:var(--f-type-feed-action-size)!important;
  font-weight:var(--f-type-label-weight)!important;
}

/* v13.2.8: every font size and font weight variable is emitted independently for mobile, tablet and desktop by the SQL-backed typography engine. No device scale multiplier is used. */

/* Fans254 v13.2.14 Poll bindings — independent device Typography remains authoritative. */
:where(.f254-feed-poll,.f254-post-poll-builder,.f254-post-create-tools,.f254-poll-admin-preview){font-family:var(--f-font-social)!important}
:where(.f254-feed-poll>header strong,.f254-post-poll-builder>header strong,.f254-poll-admin-preview>header strong){
  font-family:var(--f-font-heading)!important;
  font-size:var(--f-type-card-title-size)!important;
  font-weight:var(--f-type-heading-weight)!important;
  line-height:var(--f-type-heading-line)!important;
}
:where(.f254-feed-poll-option>span,.f254-poll-admin-preview>div b){font-size:var(--f-type-feed-body-size)!important;font-weight:var(--f-type-body-weight)!important}
:where(.f254-feed-poll>header small,.f254-feed-poll>footer,.f254-post-poll-builder>header small,.f254-poll-admin-preview small,.f254-poll-admin-preview footer){font-size:var(--f-type-metadata-size)!important;font-weight:var(--f-type-muted-weight)!important}
:where(.f254-feed-poll-option>strong,.f254-poll-admin-preview em){font-size:var(--f-type-label-size)!important;font-weight:var(--f-type-metric-weight)!important}
:where(.f254-post-create-tool,.f254-post-poll-add,.f254-feed-poll>footer>button){font-size:var(--f-type-button-size)!important;font-weight:var(--f-type-button-weight)!important}
:where(.f254-feed-poll svg,.f254-post-poll-builder svg,.f254-post-create-tool svg){width:var(--f-button-icon-size)!important;height:var(--f-button-icon-size)!important}

/* Fans254 v13.3.31 — global financial activity notice. */
.f254-transaction-toast-zone{position:fixed;z-index:2147483000;right:16px;top:max(16px,env(safe-area-inset-top));display:grid;gap:8px;pointer-events:none}.f254-transaction-toast{max-width:min(390px,calc(100vw - 28px));padding:12px 15px;border:1px solid var(--f-line);border-radius:13px;background:var(--f-popup-bg,var(--f-surface));color:var(--f-popup-text,var(--f-text));box-shadow:var(--f-shadow-popup,0 16px 42px rgba(0,0,0,.24));font-size:var(--f-type-body-size,13px);font-weight:650;line-height:1.4;animation:f254TransactionToastIn .2s ease both}@keyframes f254TransactionToastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}@media(max-width:760px){.f254-transaction-toast-zone{left:10px;right:10px;top:max(10px,env(safe-area-inset-top))}.f254-transaction-toast{max-width:none}}

/* v13.8.41 licensed TT Norms Pro installer */
.f254-tt-font-variable,.f254-tt-font-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.f254-tt-font-grid{max-height:560px;overflow:auto;padding-right:4px}
.f254-tt-font-slot{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;align-items:center;gap:9px;min-height:58px;padding:9px 10px;border:1px solid var(--f-line);border-radius:12px;background:var(--f-surface)}
.f254-tt-font-slot.is-installed{border-color:color-mix(in srgb,var(--f-success) 46%,var(--f-line));background:color-mix(in srgb,var(--f-success) 5%,var(--f-surface))}
.f254-tt-font-slot__state{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--f-surface-2);color:var(--f-muted)}
.f254-tt-font-slot.is-installed .f254-tt-font-slot__state{background:color-mix(in srgb,var(--f-success) 14%,var(--f-surface));color:var(--f-success)}
.f254-tt-font-slot__state svg{width:17px;height:17px}
.f254-tt-font-slot__copy{min-width:0;display:grid;gap:2px}
.f254-tt-font-slot__copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--f-font-heading);font-size:var(--f-type-label-size);font-weight:var(--f-type-heading-weight)}
.f254-tt-font-slot__copy small{color:var(--f-muted);font-size:var(--f-type-metadata-size)}
@media(max-width:820px){.f254-tt-font-variable,.f254-tt-font-grid{grid-template-columns:1fr}.f254-tt-font-grid{max-height:none}}
@media(max-width:520px){.f254-tt-font-slot{grid-template-columns:32px minmax(0,1fr) auto}.f254-tt-font-slot [data-tt-font-remove]{grid-column:3}.f254-tt-font-slot .f254-btn{padding-inline:9px}}