/* =============================================================================
   surafel - shared component layer
   -----------------------------------------------------------------------------
   Every page in the product is assembled from the same handful of primitives
   (timeline shell, btn-custom, form-control, modal, sidebar, tabs, list items).
   Restyling them here is what carries one visual language across all screens.

   Sections
      1. Base + typography
      2. Buttons
      3. Forms
      4. App shell + timeline surfaces
      5. Tabs and segmented navs
      6. Left sidebar
      7. Right sidebar
      8. Mobile bottom navbar
      9. Post cards
     10. User / hashtag list items
     11. Modals and popups
     12. Dropdowns and context menus
     13. Alerts, toasts, badges
     14. Tables
     15. Skeletons and loaders
     16. Scrollbars, selection, focus
============================================================================= */

/* ---------------------------------------------------------------------------
   1. Base + typography
--------------------------------------------------------------------------- */

body {
	font-family: var(--sf-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "cv02", "cv03", "cv04", "cv11";
	background-color: var(--cl-primary-bg-color);
	color: var(--cl-primary-text-color);
}

body h1, body h2, body h3, body h4, body h5, body h6 {
	font-family: var(--sf-font);
	letter-spacing: -0.02em;
	color: var(--cl-primary-text-color);
}

body h1 { font-weight: 800; }
body h2, body h3 { font-weight: 700; }

body a {
	transition: color var(--sf-dur-fast) var(--sf-ease);
}

body a:not([class]),
body .publication-text a,
body .post-data a[href^="/"],
body .info-value a {
	color: var(--sf-accent-text);
}

body a:not([class]):hover,
body .publication-text a:hover {
	color: var(--sf-accent-hover);
	text-decoration: none;
}

/* Section headings shared by settings, wallet, premium, affiliates, ads. */
body .section-title,
body .um-section-title,
body div.timeline-header h1,
body div.timeline-header h2 {
	letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------------
   2. Buttons

   Stock `.main-inline` was hardcoded to near-black (#14171a) with only five of
   the six skins overriding it, so the primary action never picked up the accent
   on the default theme. Everything below is accent-driven instead.
--------------------------------------------------------------------------- */

body button.btn-custom,
body div.btn-custom,
body a.btn-custom {
	border-radius: var(--sf-radius-pill);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.15;
	transition:
		background-color var(--sf-dur-fast) var(--sf-ease),
		border-color var(--sf-dur-fast) var(--sf-ease),
		color var(--sf-dur-fast) var(--sf-ease),
		box-shadow var(--sf-dur) var(--sf-ease),
		transform var(--sf-dur-fast) var(--sf-ease);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	white-space: nowrap;
}

body button.btn-custom:active:not([disabled]),
body div.btn-custom:active:not([disabled]) {
	transform: translateY(1px);
}

body button.btn-custom[disabled],
body div.btn-custom[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
	box-shadow: none;
}

/* --- Primary --------------------------------------------------------------
   `!important` is required here: the compiled per-skin rules
   (body[data-skin=green] button.btn-custom.main-inline { ... !important })
   would otherwise pin the fill to a fixed hex.
-------------------------------------------------------------------------- */

body[data-skin] button.btn-custom.main-inline,
body[data-skin] div.btn-custom.main-inline,
body[data-skin] a.btn-custom.main-inline {
	background-color: var(--sf-accent) !important;
	background-image: none !important;
	border: 1px solid var(--sf-accent) !important;
	color: var(--sf-on-accent) !important;
	box-shadow: var(--sf-accent-glow);
}

body[data-skin] button.btn-custom.main-inline:not([disabled]):hover,
body[data-skin] button.btn-custom.main-inline:not([disabled]):focus-visible,
body[data-skin] div.btn-custom.main-inline:not([disabled]):hover,
body[data-skin] a.btn-custom.main-inline:not([disabled]):hover {
	background-color: var(--sf-accent-hover) !important;
	border-color: var(--sf-accent-hover) !important;
	box-shadow: var(--sf-accent-glow-lg);
}

body[data-skin] button.btn-custom.main-inline:not([disabled]):active,
body[data-skin] div.btn-custom.main-inline:not([disabled]):active {
	background-color: var(--sf-accent-active) !important;
	border-color: var(--sf-accent-active) !important;
}

/* --- Outline -------------------------------------------------------------- */

body[data-skin] button.btn-custom.main-outline:not(.post-schedule-btn),
body[data-skin] div.btn-custom.main-outline:not(.post-schedule-btn),
body[data-skin] a.btn-custom.main-outline:not(.post-schedule-btn) {
	background: transparent !important;
	border: 1px solid var(--sf-accent-line-strong) !important;
	color: var(--sf-accent-text) !important;
	box-shadow: none;
}

body[data-skin] button.btn-custom.main-outline:not(.post-schedule-btn):not([disabled]):hover,
body[data-skin] div.btn-custom.main-outline:not(.post-schedule-btn):not([disabled]):hover,
body[data-skin] a.btn-custom.main-outline:not(.post-schedule-btn):not([disabled]):hover {
	background: var(--sf-accent-subtle) !important;
	border-color: var(--sf-accent) !important;
	color: var(--sf-accent-text) !important;
}

/* Icon-only composer actions (schedule) are chromeless by design: the accent
   reads through the glyph and a soft disc on hover, never a rectangle. */
body[data-skin] .post-schedule-btn,
body[data-skin] button.btn-custom.post-schedule-btn,
body[data-skin] button.cl-mc__pill.post-schedule-btn {
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--cl-secondary-text-color) !important;
	border-radius: var(--sf-radius-pill) !important;
	transition: background-color var(--sf-dur-fast) var(--sf-ease), color var(--sf-dur-fast) var(--sf-ease);
}

body[data-skin] .post-schedule-btn:not([disabled]):hover,
body[data-skin] .post-schedule-btn:not(:disabled):hover,
body[data-skin] .post-schedule-btn.is-active {
	background: var(--sf-accent-subtle) !important;
	color: var(--sf-accent-text) !important;
}

body[data-skin] .post-schedule-btn svg path {
	fill: currentColor;
}

body[data-skin] .post-schedule-btn:focus:not(:focus-visible) {
	background: transparent !important;
	box-shadow: none !important;
}

/* --- Neutral / secondary -------------------------------------------------- */

body button.btn-custom.main-gray,
body div.btn-custom.main-gray,
body button.btn-custom.main-grey,
body div.btn-custom.main-grey {
	background-color: var(--cl-secondary-bg-color);
	border: 1px solid var(--cl-primary-border-color);
	color: var(--cl-primary-text-color);
	box-shadow: none;
}

body button.btn-custom.main-gray:not([disabled]):hover,
body div.btn-custom.main-gray:not([disabled]):hover,
body button.btn-custom.main-grey:not([disabled]):hover,
body div.btn-custom.main-grey:not([disabled]):hover {
	background-color: var(--cl-event-hover-bg);
	border-color: var(--cl-secondary-border-color);
	color: var(--cl-primary-text-color);
}

/* --- Solid dark ----------------------------------------------------------- */

body button.btn-custom.main-black,
body div.btn-custom.main-black {
	background-color: var(--cl-primary-text-color);
	border: 1px solid var(--cl-primary-text-color);
	color: var(--cl-primary-bg-color);
}

body button.btn-custom.main-black:not([disabled]):hover,
body div.btn-custom.main-black:not([disabled]):hover {
	background-color: color-mix(in srgb, var(--cl-primary-text-color) 84%, var(--cl-primary-bg-color));
}

/* --- White (used on accent / media backdrops) ----------------------------- */

body button.btn-custom.main-white,
body div.btn-custom.main-white {
	background-color: #ffffff;
	border: 1px solid #ffffff;
	color: #0f172a;
}

body button.btn-custom.main-white-outline,
body div.btn-custom.main-white-outline {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.55);
	color: #ffffff;
}

/* --- Semantic ------------------------------------------------------------- */

body button.btn-custom.main-red,
body div.btn-custom.main-red {
	background: var(--cl-danger-color);
	border: 1px solid var(--cl-danger-color);
	color: #ffffff;
	box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--cl-danger-color) 55%, transparent);
}

body button.btn-custom.main-red:not([disabled]):hover,
body div.btn-custom.main-red:not([disabled]):hover {
	background: color-mix(in srgb, var(--cl-danger-color) 88%, #000000);
	border-color: color-mix(in srgb, var(--cl-danger-color) 88%, #000000);
}

body button.btn-custom.main-green,
body div.btn-custom.main-green {
	background-color: var(--cl-success-color);
	border: 1px solid var(--cl-success-color);
	color: #ffffff;
}

/* --- Sizes ---------------------------------------------------------------- */

body button.btn-custom.lg, body div.btn-custom.lg { padding: 14px 32px; font-size: var(--sf-text-base); }
body button.btn-custom.md, body div.btn-custom.md { padding: 10px 22px; font-size: var(--sf-text-sm); }
body button.btn-custom.sm, body div.btn-custom.sm { padding: 7px 15px; font-size: var(--sf-text-xs); }

/* --- Icon buttons --------------------------------------------------------- */

body button.btn-custom-icon,
body div.btn-custom-icon {
	border-radius: var(--sf-radius-pill);
	transition:
		background-color var(--sf-dur-fast) var(--sf-ease),
		color var(--sf-dur-fast) var(--sf-ease),
		transform var(--sf-dur-fast) var(--sf-ease);
}

body button.btn-custom-icon:hover,
body button.btn-custom-icon:focus,
body div.btn-custom-icon:hover {
	background: var(--sf-accent-subtle);
}

body button.btn-custom-icon:hover svg path,
body button.btn-custom-icon:focus svg path,
body div.btn-custom-icon:hover svg path {
	fill: var(--sf-accent-text);
}

/* --- OAuth buttons keep their brand identity ------------------------------
   Declared after the primary rule and at higher specificity so the accent
   override above does not flatten Google / Facebook / Discord colours.
-------------------------------------------------------------------------- */

body[data-skin] a.social-login-btn button.btn-custom.main-inline {
	box-shadow: var(--sf-shadow-xs);
	border-radius: var(--sf-radius-sm) !important;
	font-weight: 600 !important;
}

body[data-skin] a.social-login-btn.google button.btn-custom.main-inline {
	background: #ffffff !important;
	border: 1px solid var(--cl-secondary-border-color) !important;
	color: #1f2933 !important;
}
body[data-skin] a.social-login-btn.facebook button.btn-custom.main-inline {
	background: #1877f2 !important; border-color: #1877f2 !important; color: #fff !important;
}
body[data-skin] a.social-login-btn.twitter button.btn-custom.main-inline {
	background: #1d9bf0 !important; border-color: #1d9bf0 !important; color: #fff !important;
}
body[data-skin] a.social-login-btn.linkedin button.btn-custom.main-inline {
	background: #0a66c2 !important; border-color: #0a66c2 !important; color: #fff !important;
}
body[data-skin] a.social-login-btn.discord button.btn-custom.main-inline {
	background: #5865f2 !important; border-color: #5865f2 !important; color: #fff !important;
}
body[data-skin] a.social-login-btn.vkontakte button.btn-custom.main-inline {
	background: #0077ff !important; border-color: #0077ff !important; color: #fff !important;
}
body[data-skin] a.social-login-btn.instagram button.btn-custom.main-inline {
	background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) !important;
	border-color: transparent !important; color: #fff !important;
}

body[data-skin] a.social-login-btn button.btn-custom.main-inline:hover {
	filter: brightness(0.96);
	box-shadow: var(--sf-shadow-sm);
}

/* Bootstrap buttons used by cpanel / claim portal / staff console. */
body .btn-primary {
	background-color: var(--sf-accent);
	border-color: var(--sf-accent);
	color: var(--sf-on-accent);
}
body .btn-primary:hover, body .btn-primary:focus, body .btn-primary:active {
	background-color: var(--sf-accent-hover);
	border-color: var(--sf-accent-hover);
	color: var(--sf-on-accent);
}
body .btn-outline-primary {
	color: var(--sf-accent-text);
	border-color: var(--sf-accent-line-strong);
}
body .btn-outline-primary:hover, body .btn-outline-primary:focus {
	background-color: var(--sf-accent);
	border-color: var(--sf-accent);
	color: var(--sf-on-accent);
}
body .btn-link { color: var(--sf-accent-text); }

/* ---------------------------------------------------------------------------
   3. Forms
--------------------------------------------------------------------------- */

body form div.form-group input.form-control,
body form div.form-group select.form-control,
body form div.form-group textarea.form-control,
body div.modal.account-category-force-modal select.form-control {
	border-radius: var(--sf-radius-sm);
	border: 1px solid var(--cl-primary-border-color);
	background-color: var(--cl-primary-bg-color);
	color: var(--cl-primary-text-color);
	font-size: var(--sf-text-base);
	transition:
		border-color var(--sf-dur-fast) var(--sf-ease),
		box-shadow var(--sf-dur-fast) var(--sf-ease),
		background-color var(--sf-dur-fast) var(--sf-ease);
}

body form div.form-group input.form-control:hover:not(:focus),
body form div.form-group select.form-control:hover:not(:focus),
body form div.form-group textarea.form-control:hover:not(:focus) {
	border-color: var(--cl-secondary-border-color);
}

body form div.form-group input.form-control:focus,
body form div.form-group select.form-control:focus,
body form div.form-group textarea.form-control:focus,
body .form-control:focus,
body div.modal.account-category-force-modal select.form-control:focus {
	border-color: var(--sf-accent);
	box-shadow: var(--sf-accent-ring);
	outline: 0;
}

body form div.form-group input.form-control::placeholder,
body form div.form-group textarea.form-control::placeholder,
body .form-control::placeholder {
	color: var(--cl-input-placeholder-color);
}

body .input-label,
body label.input-label,
body .cl-form-group > label,
body .lim-label,
body .cad-field > label,
body .st-filter-form label {
	font-size: var(--sf-text-sm);
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--cl-tertiary-text-color);
	margin-bottom: 6px;
	display: block;
}

body .form-info-label,
body .field-hint,
body .cad-dir-label {
	font-size: var(--sf-text-xs);
	color: var(--cl-secondary-text-color);
	line-height: 1.5;
}

body .invalid-feedback,
body .invalid-main-feedback {
	color: var(--cl-danger-color);
	font-size: var(--sf-text-xs);
	font-weight: 500;
	margin-top: 6px;
}

body .form-control.is-invalid,
body form div.form-group input.form-control.is-invalid {
	border-color: var(--cl-danger-color);
}

/* Password reveal control sits flush inside the field. */
body div.password-ctrl button.password-ctrl:hover svg path {
	fill: var(--sf-accent-text);
}

/* Checkboxes and radios follow the accent. */
body input[type="checkbox"],
body input[type="radio"] {
	accent-color: var(--sf-accent);
}

body .form-check-input:checked {
	background-color: var(--sf-accent);
	border-color: var(--sf-accent);
}

body .form-check-input:focus {
	border-color: var(--sf-accent);
	box-shadow: var(--sf-accent-ring);
}

/* Toggle switches used across settings, cpanel, frames and premium. */
body .cl-switch input:checked + span,
body .cl-switch input:checked ~ .slider,
body .st-switch input:checked + span,
body .plk-toggle.is-on,
body .fs-switch.is-on,
body .acp-frames-switch.is-on,
body .srf-monet-toggle-group input:checked + label {
	background-color: var(--sf-accent);
	border-color: var(--sf-accent);
}

/* Search inputs (explore, chats, sidebar, recipients, connections). */
body .timeline-searchbar input,
body .sidebar-searchbar input,
body .keyword-input,
body .searchbar-input,
body .recipients-search-input,
body .home-right-search input {
	border-radius: var(--sf-radius-pill);
	transition: border-color var(--sf-dur-fast) var(--sf-ease), box-shadow var(--sf-dur-fast) var(--sf-ease);
}

body .timeline-searchbar input:focus,
body .sidebar-searchbar input:focus,
body .keyword-input:focus,
body .searchbar-input:focus,
body .recipients-search-input:focus,
body .home-right-search input:focus {
	border-color: var(--sf-accent);
	box-shadow: var(--sf-accent-ring);
}

/* Vue dropdown selects. */
body .vue-dropdown-select .dropdown-menu,
body .vue-dropdown-multiselect .dropdown-menu {
	border-radius: var(--sf-radius-sm);
	border: 1px solid var(--cl-primary-border-color);
	box-shadow: var(--sf-shadow-lg);
	padding: 6px;
}

/* Material glyphs open with a full-canvas `fill="none"` spacer path. A bare
   `path` selector repaints that one too, and a CSS fill outranks the
   presentation attribute, so the spacer turns into a solid block covering the
   glyph behind it. Leave anything already declared as unpainted alone. */
body .select-check-mark svg path:not([fill="none"]),
body .options-li .active-color svg path:not([fill="none"]) {
	fill: var(--sf-accent);
}

/* ---------------------------------------------------------------------------
   4. App shell + timeline surfaces

   `timeline-container` is the page body for nearly every route, and
   `timeline-header` is its title bar.
--------------------------------------------------------------------------- */

body main.main-content-container div.main-content-container-inner div.timeline-container-wrapper {
	border-left: 1px solid var(--cl-primary-border-color);
	border-right: 1px solid var(--cl-primary-border-color);
	background: var(--cl-primary-bg-color);
}

body div.timeline-container div.timeline-header {
	background: var(--cl-primary-bg-color-opacity);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--cl-primary-border-color);
	box-shadow: none;
}

body div.timeline-container div.timeline-header h1,
body div.timeline-container div.timeline-header h2,
body div.timeline-header .lp h1 {
	font-size: var(--sf-text-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
}

body div.timeline-header div.go-back,
body div.timeline-header div.go-forward,
body div.timeline-header div.go-options {
	border-radius: var(--sf-radius-pill);
	transition: background-color var(--sf-dur-fast) var(--sf-ease);
}

body div.timeline-header div.go-back:hover,
body div.timeline-header div.go-forward:hover,
body div.timeline-header div.go-options:hover {
	background: var(--sf-accent-subtle);
}

body div.timeline-header div.go-back:hover svg path,
body div.timeline-header div.go-forward:hover svg path,
body div.timeline-header div.go-options:hover svg path {
	fill: var(--sf-accent-text);
}

/* Generic empty / placeholder state shared by ~30 routes. */
body div.timeline-placeholder,
body .content-empty,
body .cad-dir-empty,
body .um-empty,
body .wallet-tx-empty,
body .fs-sr,
body .conv-empty-state,
body .cl-msg-empty-state,
body .thread-empty-state {
	color: var(--cl-secondary-text-color);
}

body div.timeline-placeholder svg path,
body .content-empty svg path {
	fill: var(--cl-secondary-text-color);
}

body div.timeline-placeholder h3,
body div.timeline-placeholder h4,
body .content-empty h3 {
	color: var(--cl-primary-text-color);
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* Panels used by settings, wallet, premium, affiliates, subscriptions. */
body .settings-form,
body .profile-settings,
body .subs-page-card,
body .sf-hub-card,
body .sf-hub-detail-card,
body .plk-panel,
body .lim-card,
body .lim-pane,
body .st-panel,
body .cad-settings-card,
body .cp-pro-panel,
body .home-right-card,
body .fs-hero,
body .plk-hero,
body .wallet-tx-summary,
body .um-stat-card,
body .discover-manager-card {
	border-radius: var(--sf-radius-md);
	border-color: var(--cl-primary-border-color);
}

/* ---------------------------------------------------------------------------
   5. Tabs and segmented navs

   `timeline-navbar` + `tab-link` back the Discover/Following switch on home,
   the profile tabs, explore, notifications, connections and settings.
--------------------------------------------------------------------------- */

body div.timeline-container div.timeline-navbar {
	background-color: var(--cl-primary-bg-color-opacity);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--cl-primary-border-color);
}

body .timeline-navbar .timeline-navbar__item a.tab-link,
body .tab-container a.tab-link,
body .explore-page-tabs a.tab-link,
body .profile-page-tabs a.tab-link,
body .cl-bookmarks-tabs a.tab-link {
	position: relative;
	color: var(--cl-secondary-text-color);
	font-weight: 600;
	letter-spacing: -0.01em;
	border-bottom: none;
	transition: color var(--sf-dur-fast) var(--sf-ease), background-color var(--sf-dur-fast) var(--sf-ease);
}

body .timeline-navbar .timeline-navbar__item a.tab-link:hover,
body .tab-container a.tab-link:hover,
body .explore-page-tabs a.tab-link:hover {
	color: var(--cl-primary-text-color);
	background: var(--sf-accent-wash);
}

body .timeline-navbar .timeline-navbar__item a.tab-link.active,
body .tab-container a.tab-link.active,
body .explore-page-tabs a.tab-link.active,
body .profile-page-tabs a.tab-link.active,
body .cl-bookmarks-tabs a.tab-link.active {
	color: var(--sf-accent-text);
	font-weight: 700;
}

/* Accent underline for the active tab. */
body .timeline-navbar .timeline-navbar__item a.tab-link.active:after,
body .tab-container a.tab-link.active:after,
body .explore-page-tabs a.tab-link.active:after,
body .profile-page-tabs a.tab-link.active:after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 34px;
	max-width: 70%;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--sf-accent);
}

/* Pill style segmented controls (frames shop modes, premium request panes). */
body .fs-mode-tabs .fs-btn.is-active,
body .plk-request-step.is-active,
body .cl-gift2__tab.is-active,
body .st-navlink.is-active,
body .cad-nav a.is-active {
	background: var(--sf-accent-subtle);
	border-color: var(--sf-accent-line);
	color: var(--sf-accent-text);
}

/* ---------------------------------------------------------------------------
   6. Left sidebar
--------------------------------------------------------------------------- */

/* The rail is pinned with native sticky rather than the StickySidebar script
   (its init is skipped for this sidebar in main/scripts). The script measures
   height once and then walks the rail down the page in its unbottom state, so
   expanding "More" left a growing gap above the profile card. Capping the rail
   to the viewport and letting it scroll internally keeps the nav reachable
   without ever moving it. */
@media (min-width: 1200px) {
	body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner {
		position: sticky;
		top: 0;
		max-height: 100vh;
		max-height: 100dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: none;
		will-change: auto;
		/* Hidden rather than slim: a visible bar carves a gutter out of the rail
		   the moment "More" expands, shunting every row sideways. The drawer
		   already scrolls this way on mobile. */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	body div.left-sb-container div.sidebar__inner::-webkit-scrollbar {
		display: none;
	}
}

body div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group div.sidebar__nav-item {
	position: relative;
	border-radius: var(--sf-radius-pill);
	padding-left: 6px;
	padding-right: 14px;
	margin-bottom: 2px;
	cursor: pointer;
	transition: background-color var(--sf-dur-fast) var(--sf-ease), color var(--sf-dur-fast) var(--sf-ease);
}

/* The markup only wraps the label in the <a>, so the icon and the empty space
   beside a short label were dead. Stretching the real anchor over the row keeps
   href behaviour intact — SPA routing, target=_blank, middle-click and tab
   focus all still work — while making the whole row the hit target. */
body div.left-sb-container div.sidebar__nav div.sidebar__nav-group div.sidebar__nav-item > span.text > a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Long labels ("Profile access requests") overflowed the fixed 50px row. */
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group div.sidebar__nav-item {
	height: auto;
	min-height: 46px;
}

body div.left-sb-container div.sidebar__nav div.sidebar__nav-group div.sidebar__nav-item > span.icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 30px;
}

body div.left-sb-container div.sidebar__nav div.sidebar__nav-group div.sidebar__nav-item > span.text {
	flex: 1 1 auto;
	min-width: 0;
	margin-left: 12px;
	padding: 6px 0;
}

/* Balances have no upper bound, so the whole row stays on one line and the
   amount clips to an ellipsis rather than wrapping the row open. The base rule
   paints it a literal `green` and carries a 9-class selector, so match its
   depth to also bring the colour back under the theme. */
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group div.sidebar__nav-item[data-navitem="wallet"] > span.text > a {
	display: block;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group div.sidebar__nav-item[data-navitem="wallet"] span.text > a b.wallet {
	display: inline;
	font-size: inherit;
	font-weight: 600;
	color: var(--cl-secondary-text-color);
}

body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group div.sidebar__nav-item[data-navitem="wallet"].active span.text > a b.wallet {
	color: var(--sf-accent-text);
}

body div.left-sb-container div.sidebar__nav div.sidebar__nav-group div.sidebar__nav-item:hover {
	background: var(--sf-accent-wash);
}

body div.left-sb-container div.sidebar__nav div.sidebar__nav-group div.sidebar__nav-item:hover > span.text > a {
	color: var(--cl-primary-text-color);
}

body div.left-sb-container div.sidebar__nav div.sidebar__nav-group div.sidebar__nav-item:hover > span.icon svg path {
	fill: var(--cl-primary-text-color);
}

body div.left-sb-container div.sidebar__nav div.sidebar__nav-group div.sidebar__nav-item:active {
	background: var(--sf-accent-subtle);
}

body div.left-sb-container div.sidebar__nav div.sidebar__nav-group div.sidebar__nav-item.active {
	background: var(--sf-accent-subtle);
}

body div.left-sb-container div.sidebar__nav div.sidebar__nav-group div.sidebar__nav-item.active > span.text > a {
	color: var(--sf-accent-text);
	font-weight: 700;
}

body div.left-sb-container div.sidebar__nav div.sidebar__nav-group div.sidebar__nav-item.active > span.icon svg path {
	fill: var(--sf-accent);
}

body div.left-sb-container div.sidebar__nav div.sidebar__nav-group div.sidebar__nav-item > span.text > a {
	display: block;
	font-size: var(--sf-text-base);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.35;
	transition: color var(--sf-dur-fast) var(--sf-ease);
}

/* Dividers ran from the icon column (margin-left: 37px), which left a ragged
   left edge once the rows became pills. Inset them evenly instead. The base
   rule carries a 7-class selector, so match it to win on load order. */
body main.main-content-container div.main-content-container-inner div.left-sb-container div.sidebar__inner div.sidebar__nav div.sidebar__nav-group div.sidebar__nav-item-devider {
	border-bottom-color: var(--cl-primary-border-color);
	opacity: 0.55;
	margin: 10px 12px;
}

/* Logged-out sign-in box in the left rail. It kept the stock flat border while
   every other card moved to the raised surface, so it read as unfinished. */
body div.left-sb-container div.sidebar__inner div.guest-welcome {
	border-radius: var(--sf-radius-md);
	border: 1px solid var(--cl-primary-border-color);
	background: var(--sf-surface-raised);
	box-shadow: var(--sf-shadow-sm);
	padding: 20px 18px;
	margin-top: 4px;
}

body div.left-sb-container div.guest-welcome div.form-group {
	margin-bottom: 14px;
}

body div.left-sb-container div.guest-welcome div.form-group:last-child {
	margin-bottom: 0;
}

body div.left-sb-container div.guest-welcome div.form-cta-link a,
body div.left-sb-container div.guest-welcome div.form-group div.form-cta-link a {
	color: var(--sf-accent-text);
	font-weight: 600;
}

/* Unread count pills.
   The compiled sheets paint these from --cl-danger-color and, in the mobile
   navbar, from a hardcoded #f91155, so neither tracked the chosen accent.
   !important is required to beat those long descendant chains. */
body .info-indicators:not(:empty) {
	background: var(--sf-accent) !important;
	background-color: var(--sf-accent) !important;
	color: var(--sf-on-accent) !important;
	border-color: color-mix(in srgb, var(--sf-on-accent) 30%, transparent) !important;
	font-weight: 700 !important;
}

/* Pulse ring behind the pill, previously keyed to the danger ramp. */
body .info-indicators:not(:empty)::before {
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--sf-accent) 45%, transparent);
}

/* Hot Topics trend badges. The tiers shipped as fixed indigo/cyan gradients;
   they now read as intensity steps of the accent. --hot keeps its fire ramp
   because that colour is the signal, not decoration. */
body .htag-trend-score {
	background: var(--sf-accent-gradient);
	color: var(--sf-on-accent);
	box-shadow: var(--sf-accent-glow);
}

body .htag-trend-score--warm {
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--sf-accent) 82%, #ffffff) 0%,
		var(--sf-accent) 100%);
	box-shadow: var(--sf-accent-glow);
}

body .htag-trend-score--rising {
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--sf-accent) 58%, #ffffff) 0%,
		color-mix(in srgb, var(--sf-accent) 90%, #ffffff) 100%);
	box-shadow: var(--sf-accent-glow);
}

/* Restated after the accent tiers above, which would otherwise outrank it. */
body .htag-trend-score--hot {
	background: linear-gradient(135deg, #fb923c 0%, #ef4444 55%, #ec4899 100%);
	color: #fff;
	box-shadow: 0 6px 18px rgba(239, 68, 68, 0.32);
}

body .htag-trend-score--sm {
	box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--sf-accent) 55%, transparent);
}

body .htag-trend-score--sm.htag-trend-score--hot {
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.28);
}

body .sidebar__newpost-action {
	padding: 10px 0 0 0;
}

/* Compose button. */
body .sidebar-newpost-btn,
body .home-left-newpost-btn {
	background: var(--sf-accent);
	color: var(--sf-on-accent);
	border-radius: var(--sf-radius-pill);
	box-shadow: var(--sf-accent-glow);
	font-weight: 700;
	letter-spacing: -0.01em;
	transition: background-color var(--sf-dur-fast) var(--sf-ease), box-shadow var(--sf-dur) var(--sf-ease), transform var(--sf-dur-fast) var(--sf-ease);
}

body .sidebar-newpost-btn:hover,
body .sidebar-newpost-btn:focus,
body .home-left-newpost-btn:hover {
	background: var(--sf-accent-hover);
	box-shadow: var(--sf-accent-glow-lg);
	transform: translateY(-1px);
	color: var(--sf-on-accent);
}

/* The "me" shortcut reads as a card at the top of the rail rather than the
   glowing outline it used to carry. */
body div.left-sb-container div.sidebar__nav div.sidebar__nav-group div.sidebar__nav-item--me {
	border: 1px solid var(--cl-primary-border-color);
	border-radius: var(--sf-radius-md);
	padding: 4px 12px 4px 6px;
	margin-bottom: 12px;
	background: var(--cl-secondary-bg-color);
	transition: border-color var(--sf-dur-fast) var(--sf-ease), background-color var(--sf-dur-fast) var(--sf-ease);
}

body div.left-sb-container div.sidebar__nav div.sidebar__nav-group div.sidebar__nav-item--me:hover {
	border-color: var(--sf-accent-line);
	background: var(--sf-accent-wash);
}

body div.left-sb-container div.sidebar__nav div.sidebar__nav-group div.sidebar__nav-item--me > span.text > a {
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
   7. Right sidebar
--------------------------------------------------------------------------- */

/* These blocks had no card behind them, so their children carry no inset.
   Adding the surface means the card has to supply the padding itself. */
body div.right-sb-container div.right-sidebar div.sidebar-content {
	border-radius: var(--sf-radius-md);
	border: 1px solid var(--cl-primary-border-color);
	background: var(--cl-secondary-bg-color);
	padding: 16px;
	overflow: hidden;
}

body div.right-sb-container div.right-sidebar div.sidebar-content + div.sidebar-content {
	margin-top: 16px;
}

body div.right-sb-container div.sidebar-content div.sidebar-content__header,
body .home-right-card__head {
	font-weight: 700;
	letter-spacing: -0.02em;
	font-size: var(--sf-text-lg);
}

body div.right-sb-container div.sidebar-users div.sidebar-users__item,
body div.right-sb-container div.sidebar-hashtags div.sidebar-hashtags__item,
body .home-right-trending__item {
	border-radius: var(--sf-radius-sm);
	transition: background-color var(--sf-dur-fast) var(--sf-ease);
}

body div.right-sb-container div.sidebar-users div.sidebar-users__item:hover,
body div.right-sb-container div.sidebar-hashtags div.sidebar-hashtags__item:hover,
body .home-right-trending__item:hover {
	background: var(--sf-accent-wash);
}

body .sidebar-content__footer a,
body .home-right-links a,
body .right-sidebar a.view-all {
	color: var(--sf-accent-text);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   8. Mobile bottom navbar
--------------------------------------------------------------------------- */

body div.mobile-bottom-navbar,
body .home-mobile-bottom-navbar {
	background: var(--cl-primary-bg-color-opacity);
	backdrop-filter: saturate(180%) blur(18px);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	border-top: 1px solid var(--cl-primary-border-color);
	box-shadow: 0 -1px 0 var(--sf-hairline);
}

body div.mobile-bottom-navbar div.navbar-ctrl.active svg path,
body div.mobile-bottom-navbar a.active svg path,
body .home-mobile-bottom-navbar .is-active svg path {
	fill: var(--sf-accent);
}

body div.mobile-bottom-navbar div.navbar-ctrl {
	border-radius: var(--sf-radius-sm);
	transition: background-color var(--sf-dur-fast) var(--sf-ease);
}

body div.mobile-bottom-navbar div.navbar-ctrl:active {
	background: var(--sf-accent-subtle);
}

/* Floating action buttons on home. */

body .homepage-pubbox-fab svg path,
body .cl-bold-refresh-fab svg path {
	fill: currentColor;
}

/* The base rule in home/content.phtml pairs an accent fill with a #fff arrow.
   Repainting the fill as a neutral surface here leaves that arrow white on
   near-white, so the glyph has to be re-anchored along with the background. */
body .homepage-backtop-fab,
body .profile-backtop-fab {
	border-radius: var(--sf-radius-pill);
	background: var(--cl-secondary-bg-color);
	border: 1px solid var(--cl-secondary-border-color);
	box-shadow: var(--sf-shadow-md);
	color: var(--cl-primary-text-color);
}

body .homepage-backtop-fab > span,
body .profile-backtop-fab > span {
	color: inherit;
}

body .homepage-backtop-fab:hover,
body .homepage-backtop-fab:focus,
body .profile-backtop-fab:hover,
body .profile-backtop-fab:focus {
	background: var(--cl-event-hover-bg);
	color: var(--cl-primary-text-color);
}

/* Profile has no inline style block of its own, so the twin carries its full
   layout here. `z-index` matches the compose FAB so the modal backdrop still
   covers it. */
body .profile-backtop-fab {
	position: fixed;
	left: 18px;
	bottom: 24px;
	width: var(--cl-primary-avatar-size, 40px);
	height: var(--cl-primary-avatar-size, 40px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	z-index: 400;
	transition: transform var(--sf-dur-fast) var(--sf-ease);
}

/* `body .profile-backtop-fab { display: inline-flex }` is more specific
   than Bootstrap `.d-none`, so the control was visible on first paint. */
body .profile-backtop-fab.d-none {
	display: none !important;
}

body .profile-backtop-fab:hover,
body .profile-backtop-fab:focus {
	transform: translateY(-2px);
}

@media (max-width: 1199.98px) {
	body .profile-backtop-fab {
		bottom: calc(72px + env(safe-area-inset-bottom, 0px));
	}
}

/* ---------------------------------------------------------------------------
   9. Post cards
--------------------------------------------------------------------------- */

body div.timeline-posts-container div.timeline-posts-ls div.post-list-item {
	border-bottom: 1px solid var(--cl-primary-border-color);
	transition: background-color var(--sf-dur-fast) var(--sf-ease);
}

body div.timeline-posts-container div.timeline-posts-ls div.post-list-item:hover {
	background-color: var(--sf-accent-wash);
}

body div.post-list-item div.post-username a,
body .user-name-holder a {
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--cl-primary-text-color);
}

body div.post-list-item div.post-username a:hover,
body .user-name-holder a:hover {
	color: var(--sf-accent-text);
}

body .publication-text {
	font-size: var(--sf-text-base);
	line-height: 1.55;
	letter-spacing: -0.005em;
}

body .publication-image img,
body .publication-images-collage,
body .image-collage-item img,
body .publication-video,
body .publication-media,
body .fbox-media img {
	border-radius: var(--sf-radius-md);
}

/* Profile / list avatars are wrapped in `a.fbox-media` so they can open the
   lightbox. The rule above is for post media and was rounding those photos
   into a 16px tile inside the circle — white gaps with no frame, a square
   plate behind the ring with one. */
body .fbox-media .cl-avatar-framed img,
body .profile-avatar img,
body .cl-avatar-framed img {
	border-radius: 50% !important;
}

body .publication-repost,
body .publication-quote-embed,
body .publication-og-data,
body .publication-poll,
body .publication-document,
body .publication-audio,
body .publication-funding {
	border-radius: var(--sf-radius-md);
	border: 1px solid var(--cl-primary-border-color);
	transition: border-color var(--sf-dur-fast) var(--sf-ease), background-color var(--sf-dur-fast) var(--sf-ease);
}

body .publication-repost:hover,
body .publication-quote-embed:hover,
body .publication-og-data:hover {
	border-color: var(--sf-accent-line);
	background: var(--sf-accent-wash);
}

/* Post action row. */
body .post-publication-actions div.ctrls-item,
body .post-publication-actions div.stats-item {
	border-radius: var(--sf-radius-pill);
	transition: background-color var(--sf-dur-fast) var(--sf-ease), color var(--sf-dur-fast) var(--sf-ease);
}

body .post-publication-actions div.ctrls-item:hover {
	background: var(--sf-accent-subtle);
	color: var(--sf-accent-text);
}

body .post-publication-actions div.ctrls-item:hover svg path {
	fill: var(--sf-accent);
}

body .post-publication-actions div.ctrls-item:not(.liked):hover .post-like-glyph--outline svg path {
	fill: none !important;
	stroke: var(--sf-accent) !important;
}

/* Hollow heart until it is liked, solid red after. Do not use `display:
   contents` — Android WebView drops the SVG and paints a grey square. */
body .post-like-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

body .post-like-glyph--filled,
body .ctrls-item.liked .post-like-glyph--outline {
	display: none !important;
}

body .ctrls-item.liked .post-like-glyph--filled {
	display: inline-flex !important;
}

body .ctrls-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}

body .post-data-layout__controls button.ctrls-item[onclick^="SMsurat.like_post"]:not(.liked) {
	color: var(--cl-secondary-text-color);
}

body .ctrls-item:not(.liked) .post-like-glyph--outline svg path,
body .post-data-layout__controls button.ctrls-item[onclick^="SMsurat.like_post"]:not(.liked) span.ctrls-item__icon svg path,
body .post-data-layout__controls button.ctrls-item[onclick^="SMsurat.like_post"]:not(.liked) span.ctrls-item__icon .post-like-glyph--outline svg path,
.cl-reel-viewer__comments-list.timeline-posts-ls.thread-replys div.post-list-item div.post-data-layout__controls button.ctrls-item[onclick^="SMsurat.like_post"]:not(.liked) span.ctrls-item__icon svg path,
.cl-reel-comments-modal__list.timeline-posts-ls.thread-replys div.post-list-item div.post-data-layout__controls button.ctrls-item[onclick^="SMsurat.like_post"]:not(.liked) span.ctrls-item__icon svg path {
	fill: none !important;
	stroke: var(--cl-secondary-text-color) !important;
	stroke-width: 1.7 !important;
}

/* master.styles.css paints the liked heart and its count with
   `var(--cl-primary-color) !important` from selector chains fifteen classes
   deep, so it wins on specificity no matter what is written here. Re-pointing
   the variable on the button itself makes those same rules resolve to red,
   because a custom property is read where it is applied, not where it is set.
   Everything inside a liked like button is the heart or its count, so nothing
   else in the subtree is affected. */
body .ctrls-item.liked {
	--cl-primary-color: #ff3040;
}

body .ctrls-item.liked svg path,
body .post-publication-actions .liked svg path,
body .ctrls-item.liked .post-like-glyph svg path,
body .post-data-layout__controls button.ctrls-item[onclick^="SMsurat.like_post"].liked span.ctrls-item__icon svg path,
body .post-data-layout__controls button.ctrls-item.liked span.num,
.cl-reel-viewer__comments-list.timeline-posts-ls.thread-replys div.post-list-item div.post-data-layout__controls button.ctrls-item[onclick^="SMsurat.like_post"].liked span.ctrls-item__icon svg path,
.cl-reel-comments-modal__list.timeline-posts-ls.thread-replys div.post-list-item div.post-data-layout__controls button.ctrls-item[onclick^="SMsurat.like_post"].liked span.ctrls-item__icon svg path,
.cl-reel-viewer__comments-list.timeline-posts-ls.thread-replys div.post-list-item div.post-data-layout__controls button.ctrls-item.liked span.ctrls-item__icon svg path,
.cl-reel-comments-modal__list.timeline-posts-ls.thread-replys div.post-list-item div.post-data-layout__controls button.ctrls-item.liked span.ctrls-item__icon svg path {
	fill: #ff3040 !important;
	stroke: none !important;
}

body .post-data-layout__controls button.ctrls-item.liked span.num,
.cl-reel-viewer__comments-list.timeline-posts-ls.thread-replys div.post-list-item div.post-data-layout__controls button.ctrls-item.liked span.num,
.cl-reel-comments-modal__list.timeline-posts-ls.thread-replys div.post-list-item div.post-data-layout__controls button.ctrls-item.liked span.num {
	color: #ff3040 !important;
}

body .ctrls-item.liked:hover .post-like-glyph svg path,
body .ctrls-item.liked:hover svg path {
	fill: #ff3040 !important;
}

body .sfs-bookmark-toggle {
	line-height: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

body .sfs-bookmark-icon svg {
	vertical-align: middle;
	display: inline-block;
	color: var(--cl-secondary-text-color);
}

/* Exactly one of the two glyphs may ever be in flow. */
body .sfs-bookmark-icon .sfs-bookmark-filled,
body .sfs-bookmark-toggle.sfs-bookmarked .sfs-bookmark-empty {
	display: none !important;
}

body .sfs-bookmark-toggle.sfs-bookmarked .sfs-bookmark-filled {
	display: block !important;
	color: var(--sf-accent);
	fill: var(--sf-accent);
}

body .sfs-bookmark-toggle.sfs-bookmarked svg path,
body .sfs-bookmark-filled svg path {
	fill: var(--sf-accent);
}

body .sfs-bookmark-toggle:active .sfs-bookmark-icon svg {
	transform: scale(0.94);
}

/* --- Glyph family paint ----------------------------------------------------
   The action glyphs (heart outline, bubble, reply, repost, bookmark outline,
   share) are stroked, so they take their colour from `currentColor`. Sheets
   written for the old solid glyphs recolour with `fill` alone, which leaves the
   stroke inheriting a colour from further up the tree. Anchor `color` on the
   wrappers those sheets target so both models land on the same value. The
   solid glyphs — filled heart, filled bookmark — stay fill-based precisely so
   the existing `fill` overrides keep driving their liked/saved colours.
-------------------------------------------------------------------------- */

body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) span.ctrls-item__icon,
body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) div.ctrls-item__icon,
body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) a.ctrls-item__icon,
body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) span.sfs-bookmark-icon,
body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) .post-like-glyph,
body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) .reply-ctrl-icon {
	color: var(--cl-secondary-text-color);
}

/* The reel rail sits over video and hardcodes white `fill` values. */
.cl-reel-viewer__rail-actions .ctrls-item span.ctrls-item__icon,
.cl-reel-viewer__rail-actions .ctrls-item div.ctrls-item__icon,
.cl-reel-viewer__rail-actions .sfs-bookmark-icon,
.cl-reel-viewer__rail-btn--desk .ctrls-item__icon,
.cl-reel-viewer__rail-btn--desk .cl-reel-viewer__rail-ico {
	color: rgba(255, 255, 255, 0.92);
}

/* --- Post action row rhythm ------------------------------------------------
   Two problems stack up here. Box sizes arrive from several sheets (40/35
   targets, 22/16 glyphs, a 48px gift button, a 19px bookmark nudged up 2px),
   and `space-between` equalises the gap between *boxes* — but only some boxes
   carry a counter, so the glyphs land at irregular intervals (~86, 57, 57, 43,
   65, 35px apart on a phone).

   Fix: one target size and one glyph size per breakpoint, then put the counted
   actions on equal-width cells with the glyph pinned to the cell's left edge.
   Each glyph then sits at a fixed multiple of the cell width on every screen.

   `--sf-ctrl-cell` caps how far the cells stretch. A full post row never
   reaches the cap, so it always fills the width evenly; a sparse comment row
   stays a compact cluster instead of flinging two icons apart.
   The reel rail is the vertical variant and keeps its own metrics.
-------------------------------------------------------------------------- */

body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) {
	--sf-ctrl-box: 38px;
	--sf-ctrl-glyph: 21px;
	--sf-ctrl-cell: 33%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0;
}

body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) button.ctrls-item,
body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) a.sfs-bookmark-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	flex: 1 1 0;
	min-width: 0;
	max-width: var(--sf-ctrl-cell);
	min-height: var(--sf-ctrl-box) !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* The wrappers the reply and views buttons nest inside have to inherit the
   cell, otherwise their glyph re-centres and breaks the interval. */
body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) .ctrls-item__inner,
body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) a.ctrls-item__inner-link {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	flex: 1 1 auto;
	min-width: 0;
}

body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) div.post-scheduled-pending {
	flex: 1 1 auto;
	min-width: 0;
}

/* Bookmark and the overflow menu carry no count, so they take their natural
   width as a pair at the right edge while the counted actions divide the rest.
   This is the arrangement X uses: even intervals across the counted actions,
   then the two utilities tucked together on the right. */
body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) a.sfs-bookmark-toggle,
body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) button.ctrls-item.dropup,
body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) button.ctrls-item.dropleft {
	flex: 0 0 auto;
	justify-content: center;
}

/* Only bites on a sparse row, where the capped cells leave slack to absorb. */
body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) > *:last-child {
	margin-left: auto !important;
}

body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) > a.sfs-bookmark-toggle {
	margin-left: auto !important;
}

body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) > a.sfs-bookmark-toggle ~ * {
	margin-left: 0 !important;
}

/* One target box for every action, including the gift button (48/44 elsewhere)
   and the bookmark anchor, which is not a `.ctrls-item__icon` at all. */
body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) span.ctrls-item__icon,
body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) div.ctrls-item__icon,
body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) a.ctrls-item__icon,
body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) span.sfs-bookmark-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--sf-ctrl-box) !important;
	height: var(--sf-ctrl-box) !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50%;
	line-height: 0;
}

/* Size only. The bookmark and the heart each ship two glyphs in the markup and
   rely on `display: none` to show one; a `display` here out-specifies that and
   both render side by side. */
body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) .ctrls-item__icon svg,
body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) .sfs-bookmark-icon svg,
body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) .post-like-glyph svg,
body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) img.post-like-custom {
	width: var(--sf-ctrl-glyph) !important;
	height: var(--sf-ctrl-glyph) !important;
}

body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) .custom-eye-svg-icon19 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

/* A counter that outgrows its cell clips instead of running into the next
   glyph, so the interval survives even a six-figure like count. */
body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) span.num {
	flex: 0 1 auto;
	min-width: 0;
	margin-left: 1px !important;
	padding-right: 2px;
	overflow: hidden;
	white-space: nowrap;
	font-size: 13px;
	line-height: 1;
	text-align: left;
	font-variant-numeric: tabular-nums;
}

/* A count of zero carries no information and breaks the rhythm, because the
   icons next to it are the only ones with nothing after them. PHP renders the
   span empty; `is-zero-count` covers counters that JS drops back to zero. */
body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) span.num:empty,
body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) span.num.is-zero-count {
	display: none !important;
}

/* Gift moved out of the row and into the menu, where its total trails the
   label. */
body .dropdown-icons .dropdown-item .dropdown-item-count {
	margin-left: auto;
	padding-left: 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--cl-secondary-text-color);
	font-variant-numeric: tabular-nums;
}

body .dropdown-icons .dropdown-item .dropdown-item-count:empty,
body .dropdown-icons .dropdown-item .dropdown-item-count.is-zero-count {
	display: none;
}

@media (max-width: 1199.98px) {
	body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) {
		--sf-ctrl-box: 34px;
		--sf-ctrl-glyph: 19px;
	}

	body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) span.num {
		font-size: 12px;
	}
}

@media (max-width: 400px) {
	body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) {
		--sf-ctrl-box: 30px;
		--sf-ctrl-glyph: 18px;
	}

	body div.post-data-layout__controls:not(.cl-reel-viewer__rail-actions) span.num {
		font-size: 11px;
	}
}

/* Poll bars. */
body .poll-option-bar .bar-slider,
body .progress-line > span,
body .funding-progress__bar,
body .srf-premium-progress-fill,
body .plk-progress > span,
body .subs-progress-fill {
	background: var(--sf-accent-gradient);
	border-radius: var(--sf-radius-pill);
}

/* Verified badge + category chips. */
body .verified-badge svg path {
	fill: var(--sf-accent);
}

body .post-category,
body .alert-badge,
body .lim-badge,
body .st-badge,
body .acp-frames-badge,
body .wallet-tx-badge,
body .um-method-pill,
body .plk-check,
body .fs-chip {
	border-radius: var(--sf-radius-pill);
	font-weight: 600;
	font-size: var(--sf-text-xs);
	letter-spacing: -0.005em;
}

/* Publish box. */
body div.timeline-pubbox,
body .pubbox-input,
body .cl-comment-composer__card,
body .thread-inline-composer,
body .conv-compose {
	border-radius: var(--sf-radius-md);
	transition: border-color var(--sf-dur-fast) var(--sf-ease), box-shadow var(--sf-dur-fast) var(--sf-ease);
}

/* No focus ring on composers: the New post modal focuses its textarea on open,
   so any :focus/:focus-within highlight reads as a stray border around the box. */
body div.timeline-pubbox:focus-within,
body div.timeline-pubbox-container--modal div.timeline-pubbox {
	border-color: var(--cl-primary-border-color);
	box-shadow: none;
}

body .cl-cc-tool:hover,
body .pubbox-ctrl-item:hover,
body .cl-cc-toolbar button:hover {
	background: var(--sf-accent-subtle);
}

body .cl-cc-tool:hover svg path,
body .cl-cc-toolbar button:hover svg path {
	fill: var(--sf-accent);
}

body .thread-inline-composer__avatar--reply-icon {
	background: var(--sf-accent-subtle) !important;
	color: var(--sf-accent) !important;
}

body .thread-reply-form-icon svg path {
	fill: var(--sf-accent) !important;
}

body .cl-cc-submit,
body .cl-cf__submit,
body.cl-app-thread .thread-inline-composer__submit,
body div.timeline-pubbox-container--modal form.form button.cl-mc__pill.main-inline {
	background: var(--sf-accent) !important;
	background-image: none !important;
	border-color: var(--sf-accent) !important;
	color: var(--sf-on-accent) !important;
}

body .cl-cc-submit:hover:not(:disabled),
body .cl-cf__submit:hover:not(:disabled),
body.cl-app-thread .thread-inline-composer__submit:hover:not(:disabled),
body div.timeline-pubbox-container--modal form.form button.cl-mc__pill.main-inline:hover:not(:disabled) {
	background: var(--sf-accent-hover) !important;
	border-color: var(--sf-accent-hover) !important;
	color: var(--sf-on-accent) !important;
}

body div.modal.share-post-modal div.raw-link div.link-input {
	overflow: hidden;
}

body div.modal.share-post-modal div.raw-link div.link-input input {
	padding-right: 56px;
}

body .share-inbox {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--cl-primary-border-color);
}

body .share-inbox__title {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cl-primary-text-color);
}

body .share-inbox__search {
	display: block;
	margin: 0 0 10px;
}

body .share-inbox__search input {
	width: 100%;
	height: 40px;
	border: none;
	border-radius: 5em;
	background: var(--cl-input-bg-color, var(--cl-secondary-bg-color));
	color: var(--cl-primary-text-color);
	font-size: 14px;
	padding: 0 16px;
	outline: none;
	box-shadow: none;
}

body .share-inbox__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: 320px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

body .share-inbox__peer {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	border: none;
	border-radius: var(--sf-radius-sm, 10px);
	background: transparent;
	text-align: left;
	cursor: pointer;
	color: var(--cl-primary-text-color);
}

body .share-inbox__peer:hover,
body .share-inbox__peer:focus-visible {
	background: var(--sf-accent-subtle);
}

body .share-inbox__peer:disabled {
	opacity: 0.55;
	cursor: default;
}

body .share-inbox__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

body .share-inbox__meta {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

body .share-inbox__name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
}

body .share-inbox__user {
	font-size: 12px;
	color: var(--cl-secondary-text-color);
}

body .share-inbox__empty,
body .share-inbox__status {
	margin: 0;
	padding: 8px 2px;
	font-size: 13px;
	color: var(--cl-secondary-text-color);
}

/* ---------------------------------------------------------------------------
   10. User / hashtag list items
--------------------------------------------------------------------------- */

body div.timeline-users-container div.timeline-user-ls div.user-list-item,
body div.timeline-hashtags-container div.timeline-hashtags-ls div.hashtag-list-item,
body .explore-unified-ls > * {
	transition: background-color var(--sf-dur-fast) var(--sf-ease);
}

body div.timeline-users-container div.timeline-user-ls div.user-list-item:hover,
body div.timeline-hashtags-container div.timeline-hashtags-ls div.hashtag-list-item:hover {
	background: var(--sf-accent-wash);
}

body .hashtag-data h3,
body .hashtag-data .name {
	font-weight: 700;
	letter-spacing: -0.01em;
}

body .hashtag-list-item:hover .hashtag-data h3 {
	color: var(--sf-accent-text);
}

/* Avatars get a consistent ring treatment. */
body .user-avatar img,
body .avatar-holder img,
body .cl-user-avatar,
body .c-avatar img,
body .s-avatar img {
	border-radius: 50%;
}

/* Profile frames are circular art, so the photo underneath has to be a circle
   too or the ring floats over square corners. The component takes its shape
   from whatever holder it lands in (`border-radius: inherit`), and those vary —
   the right rail rounds to 10px, a few rails set no radius at all. Scoped to
   avatars that actually carry a frame so unframed ones keep the holder's shape.
   The holder chains run up to thirteen classes deep, hence !important. */
body .cl-avatar-framed:has(> .cl-avatar-framed__frame),
body .cl-avatar-framed:has(> .cl-avatar-framed__frame) > .cl-avatar-framed__photo,
body .cl-avatar-framed:has(> .cl-avatar-framed__frame) > .cl-avatar-framed__photo img {
	border-radius: 50% !important;
}

/* Sidebar "me" avatar: the nav icon column is 30px and `.avatar-bottom12 img`
   still forces 34px + a 5px left margin, so the ring sat off-centre and the
   pill clipped the top and bottom into an ellipse. One 40px square, photo and
   frame sharing it, nothing clipping the ring. */
body div.left-sb-container div.sidebar__nav div.sidebar__nav-group div.sidebar__nav-item.sidebar__nav-item--me {
	overflow: visible;
	height: auto;
	min-height: 52px;
	align-items: center;
}

body div.left-sb-container div.sidebar__nav div.sidebar__nav-group div.sidebar__nav-item.sidebar__nav-item--me > span.icon.avatar-bottom12 {
	width: 40px;
	min-width: 40px;
	height: 40px;
	flex: 0 0 40px;
	overflow: visible;
	margin: 0;
}

body div.left-sb-container div.sidebar__nav-item--me span.icon.avatar-bottom12 .cl-avatar-framed,
body div.left-sb-container div.sidebar__nav-item--me span.icon.avatar-bottom12 .cl-avatar-framed.cl-user-avatar {
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	min-height: 40px !important;
	margin: 0 !important;
	border-radius: 50% !important;
	overflow: visible;
	flex-shrink: 0;
}

body div.left-sb-container div.sidebar__nav-item--me .cl-avatar-framed__photo,
body div.left-sb-container div.sidebar__nav-item--me .cl-avatar-framed__frame {
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}

body div.left-sb-container div.sidebar__nav-item--me .cl-avatar-framed img,
body div.left-sb-container div.sidebar__nav-item--me .avatar-bottom12 img {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	max-width: none !important;
	max-height: none !important;
	box-shadow: none !important;
}

body div.left-sb-container div.sidebar__nav-item--me .cl-avatar-framed__photo {
	border-radius: 50%;
	overflow: hidden;
}

body div.left-sb-container div.sidebar__nav-item--me .cl-avatar-framed__photo img {
	border-radius: 50% !important;
	object-fit: cover !important;
}

body div.left-sb-container div.sidebar__nav-item--me .cl-avatar-framed__frame img {
	border-radius: 0 !important;
	object-fit: contain !important;
}

body div.left-sb-container div.sidebar__nav-item--me .cl-avatar-story-ring__inner {
	overflow: visible;
}

/* ---------------------------------------------------------------------------
   11. Modals and popups

   Applies to every dialog in the product: display settings, report post,
   report profile, claim profile, cookie alert, subscription form, story
   composer/viewer, edit post, likes list, donate, gift, thread preview,
   pubbox, wallet dialogs, frames shop, premium likes, cpanel tickets.
--------------------------------------------------------------------------- */

body div.modal div.modal-content {
	background: var(--sf-surface-raised);
	border: 1px solid var(--cl-primary-border-color);
	border-radius: var(--sf-radius-lg);
	box-shadow: var(--sf-shadow-xl);
}

/* Corners are rounded per-slot rather than clipped on the shell, so dropdowns
   and pickers opened inside a dialog are not cut off. */
body div.modal div.modal-content div.modal-header,
body div.modal div.modal-content .modal-header {
	border-bottom: 1px solid var(--cl-primary-border-color);
	background: var(--sf-accent-wash);
	padding: 16px 20px;
	border-top-left-radius: calc(var(--sf-radius-lg) - 1px);
	border-top-right-radius: calc(var(--sf-radius-lg) - 1px);
}

body div.modal div.modal-content div.modal-header h5.modal-title,
body div.modal div.modal-content .modal-title {
	font-size: var(--sf-text-lg);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--cl-primary-text-color);
	margin: 0;
}

body div.modal div.modal-content div.modal-body {
	padding: 20px;
}

body div.modal div.modal-content div.modal-footer,
body div.modal div.modal-content .modal-footer {
	border-top: 1px solid var(--cl-primary-border-color);
	background: var(--cl-secondary-bg-color);
	padding: 14px 20px;
	gap: 10px;
	border-bottom-left-radius: calc(var(--sf-radius-lg) - 1px);
	border-bottom-right-radius: calc(var(--sf-radius-lg) - 1px);
}

body div.modal .dismiss-modal,
body div.modal .cad-modal-dismiss,
body div.modal .fs-modal-dismiss,
body div.modal .lim-modal-close,
body div.modal .acp-sl-modal-dismiss,
body .srf-close-btn {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--sf-radius-pill);
	cursor: pointer;
	transition: background-color var(--sf-dur-fast) var(--sf-ease), transform var(--sf-dur-fast) var(--sf-ease);
}

body div.modal .dismiss-modal:hover,
body div.modal .cad-modal-dismiss:hover,
body div.modal .fs-modal-dismiss:hover,
body .srf-close-btn:hover {
	background: var(--sf-accent-subtle);
	transform: rotate(90deg);
}

body div.modal .dismiss-modal:hover svg path {
	fill: var(--sf-accent);
}

body div.modal-backdrop,
body .modal-backdrop.show {
	background-color: var(--cl-modal-backdrop);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity: 1;
}

/* Entry motion. Transform only - opacity stays owned by Bootstrap's .fade on
   the modal itself, so a dialog can never be left invisible if some caller
   shows it without going through Bootstrap. */
body div.modal.fade div.modal-dialog {
	transition: transform var(--sf-dur-slow) var(--sf-ease-out);
	transform: translateY(14px) scale(0.985);
}

body div.modal.fade.show div.modal-dialog {
	transform: none;
}

/* Display settings picker. */
body div.display-settings-modal div.display-settings__header h4 {
	font-size: var(--sf-text-lg);
	font-weight: 700;
	letter-spacing: -0.02em;
}

body div.display-settings-modal div.display-settings__header p {
	color: var(--cl-secondary-text-color);
	font-size: var(--sf-text-sm);
	line-height: 1.55;
}

body div.display-settings-modal div.display-settings__group-title {
	font-size: var(--sf-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cl-secondary-text-color);
	margin-bottom: 10px;
}

body div.display-settings-modal div.options-li {
	position: relative;
	border-radius: var(--sf-radius-sm);
	border: 1px solid var(--cl-primary-border-color);
	background: var(--cl-primary-bg-color);
	padding: 12px 6px;
	cursor: pointer;
	transition:
		border-color var(--sf-dur-fast) var(--sf-ease),
		background-color var(--sf-dur-fast) var(--sf-ease),
		transform var(--sf-dur-fast) var(--sf-ease);
}

body div.display-settings-modal div.options-li:hover {
	border-color: var(--sf-accent-line);
	background: var(--sf-accent-wash);
	transform: translateY(-2px);
}

body div.display-settings-modal div.options-li .name b {
	font-size: var(--sf-text-xs);
	font-weight: 600;
	letter-spacing: -0.005em;
}

/* The currently applied swatch. */
body div.display-settings-modal div.options-li:has(> span.active-color) {
	border-color: var(--sf-accent);
	background: var(--sf-accent-subtle);
	box-shadow: var(--sf-accent-ring);
}

body div.display-settings-modal span.active-color {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--sf-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

body div.display-settings-modal span.active-color svg {
	width: 11px;
	height: 11px;
}

body div.display-settings-modal span.active-color svg path:not([fill="none"]) {
	fill: var(--sf-on-accent);
}

/* Confirm dialogs. */
body .confirm-dialog-like-pubbox div.modal-content,
body .confirm-actions-modal div.modal-content,
body .lim-action-confirm-modal div.modal-content {
	max-width: 420px;
	border-radius: var(--sf-radius-lg);
}

/* Cookie consent. */
body div.cookie-alert {
	border-radius: var(--sf-radius-lg);
	border: 1px solid var(--cl-primary-border-color);
	background: var(--sf-surface-raised);
	box-shadow: var(--sf-shadow-xl);
}

body div.cookie-alert div.cookie-message {
	font-size: var(--sf-text-sm);
	line-height: 1.55;
	color: var(--cl-tertiary-text-color);
}

/* Report / claim dialogs. */
body div.report-modal div.report-reasons div.reason,
body .claim-profile-modal .method {
	border-radius: var(--sf-radius-sm);
	border: 1px solid var(--cl-primary-border-color);
	transition: border-color var(--sf-dur-fast) var(--sf-ease), background-color var(--sf-dur-fast) var(--sf-ease);
	cursor: pointer;
}

body div.report-modal div.report-reasons div.reason:hover,
body div.report-modal div.report-reasons div.reason.active,
body .claim-profile-modal .method:hover {
	border-color: var(--sf-accent-line-strong);
	background: var(--sf-accent-subtle);
}

/* Subscription / premium package cards. */
body .srf-pkg-item,
body .duration-option,
body .cl-gift-pf-plan,
body .plk-preset-btn {
	border-radius: var(--sf-radius-md);
	border: 1px solid var(--cl-primary-border-color);
	transition: border-color var(--sf-dur-fast) var(--sf-ease), background-color var(--sf-dur-fast) var(--sf-ease), transform var(--sf-dur-fast) var(--sf-ease);
}

body .srf-pkg-item:hover,
body .duration-option:hover,
body .plk-preset-btn:hover {
	border-color: var(--sf-accent-line);
	transform: translateY(-2px);
}

body .srf-pkg-item.active,
body .duration-option.active,
body .cl-gift-pf-plan.is-selected,
body .plk-preset-btn.is-active {
	border-color: var(--sf-accent);
	background: var(--sf-accent-subtle);
	box-shadow: var(--sf-accent-ring);
}

body .srf-pkg-discount,
body .plk-more,
body .fs-detail-share__copy.is-copied {
	color: var(--sf-accent-text);
	font-weight: 700;
}

/* Story composer / viewer chrome. */
body .cl-story-composer,
body .cl-story-reply-composer,
body .cl-story-split-modal .modal-content,
body .cl-story-upload-cancel-modal .modal-content,
body .cl-story-delete-confirm .modal-content {
	border-radius: var(--sf-radius-lg);
}

body .cl-story-viewer__reply-btn--send,
body .cl-story-page__create-icon {
	background: var(--sf-accent);
	color: var(--sf-on-accent);
}

body .cl-story-reply-limit-ring circle:last-child {
	stroke: var(--sf-accent);
}

/* ---------------------------------------------------------------------------
   12. Dropdowns and context menus
--------------------------------------------------------------------------- */

body div.dropdown-menu,
body .chat-list-ctx-menu,
body .fs-frames-dropdown-menu,
body .acp-users-dropdown,
body .post-category-dropdown {
	border-radius: var(--sf-radius-md);
	border: 1px solid var(--cl-primary-border-color);
	background: var(--sf-surface-raised);
	box-shadow: var(--sf-shadow-lg);
	padding: 6px;
	overflow: hidden;
}

/* The compiled sheet only colours items nested under .dropdown/.dropup/etc.
   Menus that JS detaches to <body> miss that rule and fall back to Bootstrap's
   near-black, which disappears on a dark background. Set it unconditionally. */
body div.dropdown-menu a.dropdown-item,
body div.dropdown-menu .dropdown-item,
body .chat-list-ctx-menu > *,
body .fs-frames-dd-item {
	color: var(--cl-primary-text-color);
	border-radius: var(--sf-radius-xs);
	font-size: var(--sf-text-sm);
	font-weight: 500;
	padding: 9px 12px;
	transition: background-color var(--sf-dur-fast) var(--sf-ease), color var(--sf-dur-fast) var(--sf-ease);
}

body div.dropdown-menu a.dropdown-item.col-red,
body div.dropdown-menu .dropdown-item.col-red {
	color: var(--cl-danger-color);
}

body div.dropdown-menu a.dropdown-item:hover,
body div.dropdown-menu .dropdown-item:hover,
body .chat-list-ctx-menu > *:hover,
body .fs-frames-dd-item:hover {
	background: var(--sf-accent-subtle);
	color: var(--sf-accent-text);
}

body div.dropdown-menu a.dropdown-item.active,
body div.dropdown-menu .dropdown-item.active {
	background: var(--sf-accent);
	color: var(--sf-on-accent);
}

body div.dropdown-menu a.dropdown-item.col-red:hover,
body div.dropdown-menu .dropdown-item.col-red:hover {
	background: color-mix(in srgb, var(--cl-danger-color) 12%, var(--cl-primary-bg-color));
	color: var(--cl-danger-color);
}

/* The compiled sheet forces every `.dropdown-item.active` to the neutral hover
   background with `!important`, but the rule above anchors the label to
   `--sf-on-accent`, which is white. The two combine into white text on a
   near-white row, so the selected entry reads as the faintest item in the list
   instead of the clearest. Re-assert the accent at the same weight. */
body .dropdown div.dropdown-menu a.dropdown-item.active,
body .dropup div.dropdown-menu a.dropdown-item.active,
body .dropleft div.dropdown-menu a.dropdown-item.active,
body .dropright div.dropdown-menu a.dropdown-item.active {
	background: var(--sf-accent) !important;
	color: var(--sf-on-accent);
}

/* --- Sidebar language picker ----------------------------------------------
   The footer row is already drawn as a bordered, full-width box, but the
   toggle inside it is a plain inline <a>. Only the label itself opened the
   menu, so every click on the surrounding padding fell through to the box and
   did nothing. Stretching a transparent overlay across the control hands the
   whole box to the toggle; a click on a pseudo-element is dispatched to its
   host, so Bootstrap's `data-toggle` binding still fires. `::after` is left
   alone because it carries the caret.
-------------------------------------------------------------------------- */

body .main-footer ul.footer-nav li.footer-nav-item--language.dropdown > a.footer-lang-toggle.dropdown-toggle {
	display: block;
	width: 100%;
	cursor: pointer;
}

body .main-footer ul.footer-nav li.footer-nav-item--language.dropdown > a.footer-lang-toggle.dropdown-toggle::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* ---------------------------------------------------------------------------
   13. Alerts, toasts, badges
--------------------------------------------------------------------------- */

body div.timeline-alert,
body .inline-alertbox,
body .fs-sell-alert,
body .cad-dir-alert,
body .cad-settings-alert,
body .ps-alert,
body .subscription-alert,
body .thread-reply-alert,
body .plk-modal-notice {
	border-radius: var(--sf-radius-md);
	border: 1px solid var(--cl-primary-border-color);
	font-size: var(--sf-text-sm);
	line-height: 1.55;
}

body div.timeline-alert.timeline-alert_info,
body .inline-alertbox.info,
body .alert-info {
	background: var(--sf-accent-subtle);
	border-color: var(--sf-accent-line);
	color: var(--cl-primary-text-color);
}

body .alert-danger,
body .inline-alertbox.danger {
	background: color-mix(in srgb, var(--cl-danger-color) 10%, var(--cl-primary-bg-color));
	border-color: color-mix(in srgb, var(--cl-danger-color) 30%, var(--cl-primary-border-color));
	color: var(--cl-primary-text-color);
}

body .alert-warning,
body .inline-alertbox.warning {
	background: color-mix(in srgb, var(--cl-warning-color) 12%, var(--cl-primary-bg-color));
	border-color: color-mix(in srgb, var(--cl-warning-color) 32%, var(--cl-primary-border-color));
	color: var(--cl-primary-text-color);
}

body .alert-success,
body .inline-alertbox.success {
	background: color-mix(in srgb, var(--cl-success-color) 10%, var(--cl-primary-bg-color));
	border-color: color-mix(in srgb, var(--cl-success-color) 30%, var(--cl-primary-border-color));
	color: var(--cl-primary-text-color);
}

/* jQuery toast. */
body .jq-toast-single {
	border-radius: var(--sf-radius-md);
	box-shadow: var(--sf-shadow-lg);
	font-family: var(--sf-font);
	font-size: var(--sf-text-sm);
	padding: 14px 18px;
	border: none;
}

/* Icon toasts reserve 56px on the left. The rule above was flattening
   that padding so the checkmark sat on the first letter. */
body .jq-toast-single.jq-has-icon {
	padding: 14px 18px 14px 52px;
	background-repeat: no-repeat;
	background-position: 16px center;
}

body .plk-toast,
body .fs-toast {
	border-radius: var(--sf-radius-md);
	box-shadow: var(--sf-shadow-lg);
}

/* Global upload progress. */
body .cl-global-media-progress__inner {
	border-radius: var(--sf-radius-md);
	border: 1px solid var(--cl-primary-border-color);
	background: var(--sf-surface-raised);
	box-shadow: var(--sf-shadow-lg);
}

body .cl-global-media-progress__fill {
	background: var(--sf-accent-gradient);
}

/* ---------------------------------------------------------------------------
   14. Tables (wallet, cpanel, staff console, claim portal, frames)
--------------------------------------------------------------------------- */

body .wallet-tx-table,
body .st-table,
body .lim-table,
body .acp-frames-table,
body .acp-users-data-table,
body .discover-manager-data-table,
body .cad-dir-table,
body .regular-table,
body .cp-pro-table {
	font-size: var(--sf-text-sm);
	border-collapse: separate;
	border-spacing: 0;
}

body .wallet-tx-table thead th,
body .st-table thead th,
body .lim-table thead th,
body .acp-frames-table thead th,
body .acp-users-data-table thead th,
body .discover-manager-data-table thead th,
body .cad-dir-table thead th,
body .cp-pro-table thead th {
	font-size: var(--sf-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--cl-secondary-text-color);
	background: var(--cl-secondary-bg-color);
	border-bottom: 1px solid var(--cl-primary-border-color);
	white-space: nowrap;
}

body .wallet-tx-table tbody tr,
body .st-table tbody tr,
body .lim-table tbody tr,
body .acp-users-data-table tbody tr,
body .discover-manager-data-table tbody tr {
	transition: background-color var(--sf-dur-fast) var(--sf-ease);
}

body .wallet-tx-table tbody tr:hover,
body .st-table tbody tr:hover,
body .lim-table tbody tr:hover,
body .acp-users-data-table tbody tr:hover,
body .discover-manager-data-table tbody tr:hover {
	background: var(--sf-accent-wash);
}

body .wallet-tx-table-wrap,
body .st-table-wrap,
body .lim-table-wrap,
body .acp-frames-table-wrap,
body .acp-users-table-shell,
body .discover-manager-table-shell {
	border-radius: var(--sf-radius-md);
	border: 1px solid var(--cl-primary-border-color);
	overflow: hidden;
}

/* Pagers. */
body .wallet-tx-pager .is-active,
body .acp-pager .is-active,
body .fs-pager .is-active,
body .lim-pager .is-active,
body .sf-hub-pager__cur,
body .acp-invite-pager .is-active {
	background: var(--sf-accent);
	color: var(--sf-on-accent);
	border-color: var(--sf-accent);
}

/* ---------------------------------------------------------------------------
   15. Skeletons and loaders
--------------------------------------------------------------------------- */

body .skel,
body .skel-line, body .skel-avatar-lg, body .skel-circle, body .skel-media,
body .skel-cover, body .skel-button, body .skel-chip, body .skel-input,
body .skel-search, body .skel-section-title, body .skel-tabs,
body .home-tab-skeleton .skel,
body .notifs-skeleton-list .skel {
	background: var(--sf-skeleton);
	border-radius: var(--sf-radius-xs);
	position: relative;
	overflow: hidden;
}

body .spa-skeleton-shimmer,
body .skel:after {
	background: linear-gradient(90deg, transparent, var(--sf-skeleton-shine), transparent);
}

body div.timeline-data-loader svg path,
body .waitMe_progress_elem1 {
	fill: var(--sf-accent);
	background-color: var(--sf-accent);
}

body div.main-preloader-holder {
	background: var(--cl-primary-bg-color);
}

body .explore-ptr .explore-ptr__spinner,
body .cl-mobile-tab-ptr svg path {
	fill: var(--sf-accent);
}

/* ---------------------------------------------------------------------------
   16. Scrollbars, selection, focus
--------------------------------------------------------------------------- */

body ::selection {
	background: color-mix(in srgb, var(--sf-accent) 26%, transparent);
	color: var(--cl-primary-text-color);
}

body * {
	scrollbar-color: var(--cl-secondary-border-color) transparent;
	scrollbar-width: thin;
}

body ::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

body ::-webkit-scrollbar-track {
	background: transparent;
}

body ::-webkit-scrollbar-thumb {
	background: var(--cl-secondary-border-color);
	border-radius: var(--sf-radius-pill);
	border: 3px solid var(--cl-primary-bg-color);
}

body ::-webkit-scrollbar-thumb:hover {
	background: var(--cl-secondary-text-color);
}

/* Visible keyboard focus everywhere, without showing on mouse clicks. */
body a:focus-visible,
body button:focus-visible,
body [role="button"]:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body .tab-link:focus-visible,
body .sidebar__nav-item:focus-visible {
	outline: 2px solid var(--sf-accent);
	outline-offset: 2px;
	border-radius: var(--sf-radius-xs);
}