/* =========================================================================
   PrivacySafe Social — Dark Theme
   Palette (warm gray tones with bright highlights):
     - Warm dark neutrals (warm near-black) + ivory text (#FAF9F5)
     - Green  #45DA64  : links, post-body links, success, hover state on buttons
     - Orange #FB521F  : primary buttons, menus, identity/header links, default highlight
     - Clay   #C6613F  : alternate accent (footer/utility links, timestamps, sparkline)
     - Sage   #5FA56B  : muted-green counterpart to the clay accent
   ========================================================================= */


/* =========================================================================
   1. COLOR TOKENS
   ========================================================================= */

:root,
html,
body,
[data-color-scheme="dark"],
[data-color-scheme="auto"],
[data-theme="mastodon"],
.theme-default {
  color-scheme: dark !important;

  /* Charcoal neutrals */
  --color-white: #FAF9F5 !important;
  --color-black: #000000 !important;

  --color-grey-50: #FAF9F5 !important;
  --color-grey-100: #FAF9F5 !important;
  --color-grey-200: #E5E3DB !important;
  --color-grey-300: #C2C0B6 !important;
  --color-grey-400: #A6A49B !important;
  --color-grey-500: #87857C !important;
  --color-grey-600: #4A4A45 !important;
  --color-grey-700: #383734 !important;
  --color-grey-800: #30302E !important;
  --color-grey-900: #262624 !important;
  --color-grey-950: #20201D !important;

  /* Mastodon's indigo/purple -> PrivacySafe green */
  --color-indigo-50: #EFFBF1 !important;
  --color-indigo-100: #D9FFE2 !important;
  --color-indigo-200: #B7FFC7 !important;
  --color-indigo-300: #7CF293 !important;
  --color-indigo-400: #45DA64 !important;
  --color-indigo-500: #45DA64 !important;
  --color-indigo-600: #35B84F !important;
  --color-indigo-700: #2A943F !important;
  --color-indigo-800: #207333 !important;
  --color-indigo-900: #185828 !important;
  --color-indigo-950: #0F3519 !important;

  /* Mastodon's "red" primary-action ramp -> PrivacySafe orange */
  --color-red-50: #FFF3EF !important;
  --color-red-100: #FFE2D8 !important;
  --color-red-200: #FFC2AE !important;
  --color-red-300: #FF9878 !important;
  --color-red-400: #FF7042 !important;
  --color-red-500: #FB521F !important;
  --color-red-600: #DD3D10 !important;
  --color-red-700: #B82F0D !important;
  --color-red-800: #90260E !important;
  --color-red-900: #6F210F !important;
  --color-red-950: #3B1006 !important;

  /* Success / highlight green */
  --color-green-50: #F0FDF4 !important;
  --color-green-100: #DCFCE7 !important;
  --color-green-200: #B9F8CF !important;
  --color-green-300: #7BF1A8 !important;
  --color-green-400: #45DA64 !important;
  --color-green-500: #45DA64 !important;
  --color-green-600: #35B84F !important;
  --color-green-700: #2A943F !important;
  --color-green-800: #207333 !important;
  --color-green-900: #185828 !important;
  --color-green-950: #0F3519 !important;

  /* Warnings: warm, no blue */
  --color-yellow-50: #FFFBEB !important;
  --color-yellow-100: #FEF3C6 !important;
  --color-yellow-200: #FEE685 !important;
  --color-yellow-300: #FFD230 !important;
  --color-yellow-400: #FFC857 !important;
  --color-yellow-500: #FE9A00 !important;
  --color-yellow-600: #E17100 !important;
  --color-yellow-700: #BB4D00 !important;
  --color-yellow-800: #973C00 !important;
  --color-yellow-900: #7B3306 !important;
  --color-yellow-950: #461901 !important;
}

/* Semantic / compiled token names */
:root,
html,
body,
[data-color-scheme="dark"],
[data-color-scheme="auto"],
.theme-default {
  /* Text */
  --color-text-primary: #FAF9F5 !important;
  --color-text-secondary: #C2C0B6 !important;
  --color-text-tertiary: #A6A49B !important;
  --color-text-inverted: #20201D !important;

  --color-text-brand: #45DA64 !important;
  --color-text-brand-soft: #7CF293 !important;
  --color-text-on-brand-base: #20201D !important;
  --color-text-brand-on-inverted: #207333 !important;

  --color-text-error: #FF9878 !important;
  --color-text-on-error-base: #FAF9F5 !important;
  --color-text-warning: #FFC857 !important;
  --color-text-on-warning-base: #20201D !important;
  --color-text-success: #45DA64 !important;
  --color-text-on-success-base: #20201D !important;
  --color-text-disabled: #4A4A45 !important;
  --color-text-on-disabled: #C2C0B6 !important;

  --color-text-bookmark-highlight: #FB521F !important;
  --color-text-favourite-highlight: #FFC857 !important;
  --color-text-on-media: #FAF9F5 !important;

  /* Links: green, never blue */
  --color-text-status-links: #45DA64 !important;
  --color-link: #45DA64 !important;
  --color-hashtag: #45DA64 !important;
  --color-mention: #45DA64 !important;

  /* Backgrounds */
  --color-bg-primary: #20201D !important;
  --color-bg-secondary: #262624 !important;
  --color-bg-tertiary: #30302E !important;
  --color-bg-inverted: #FAF9F5 !important;
  --color-bg-overlay-base: rgba(25, 25, 25, 0.6) !important;
  --color-bg-overlay-highlight: rgba(235, 235, 235, 0.05) !important;
  --color-bg-overlay: #000000 !important;
  --color-bg-media-base: #000000 !important;
  --color-bg-media: rgba(0, 0, 0, 0.65) !important;
  --color-bg-disabled: #383734 !important;

  /* Primary action: orange default, green hover */
  --color-bg-brand-base: #FB521F !important;
  --color-bg-brand-base-hover: #45DA64 !important;
  --color-bg-brand-soft: #185828 !important;
  --color-bg-brand-softest: #0F3519 !important;

  --color-bg-error-base: #B82F0D !important;
  --color-bg-error-base-hover: #90260E !important;
  --color-bg-error-soft: #6F210F !important;
  --color-bg-error-softest: #3B1006 !important;

  --color-bg-warning-base: #BB4D00 !important;
  --color-bg-warning-soft: #7B3306 !important;
  --color-bg-warning-softest: #461901 !important;

  --color-bg-success-base: #35B84F !important;
  --color-bg-success-soft: #185828 !important;
  --color-bg-success-softest: #0F3519 !important;

  /* Borders */
  --color-border-primary: #4A4A45 !important;
  --color-border-brand: #45DA64 !important;
  --color-border-brand-soft: #207333 !important;
  --color-border-error: #FF9878 !important;
  --color-border-media: rgba(235, 235, 235, 0.15) !important;
  --color-border-error-soft: rgba(255, 152, 120, 0.5) !important;
  --color-border-warning-soft: rgba(255, 200, 87, 0.5) !important;
  --color-border-success-soft: #207333 !important;

  /* Shadows */
  --shadow-strength-primary: 80% !important;
  --color-shadow-primary: rgba(0, 0, 0, 0.8) !important;
  --dropdown-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8) !important;
  --overlay-icon-shadow: drop-shadow(0 0 8px rgba(0, 0, 0, 0.8)) !important;

  /* Graphs */
  --color-graph-primary-stroke: #45DA64 !important;
  --color-graph-primary-fill: #0F3519 !important;
  --color-graph-warning-stroke: #FFC857 !important;
  --color-graph-warning-fill: #461901 !important;
  --color-graph-disabled-stroke: #4A4A45 !important;
  --color-graph-disabled-fill: #383734 !important;

  /* Rich text */
  --rich-text-container-color: #2A1A12 !important;
  --rich-text-text-color: #FFD5C3 !important;
  --rich-text-decorations-color: #7A3A24 !important;

  /* Legacy compiled variable names */
  --color-bg: #20201D !important;
  --color-bg-75: #20201Dbf !important;
  --color-bg-90: #20201De6 !important;
  --color-fg: #FAF9F5 !important;
  --color-border: #4A4A45 !important;
  --color-dim: #C2C0B6 !important;
  --color-accent: #45DA64 !important;
  --color-accent-dark: #45DA64 !important;
  --color-accent-dark-50: rgba(69, 218, 100, 0.5) !important;
  --color-green: #45DA64 !important;
  --color-red: #FB521F !important;
  --color-red-75: #FB521Fbf !important;
  --color-light-text: #FAF9F5 !important;
  --color-mud: rgba(58, 58, 58, 0.5) !important;
  --color-arsenic: #30302E !important;
  --color-black-coral: #4A4A45 !important;
  --color-dark: #20201D !important;
  --color-thread-line: #4A4A45 !important;
  --color-topaz: #FAF9F5 !important;
  --color-light-purple: #C2C0B6 !important;
  --color-lighter-purple: #C2C0B6 !important;
  --color-dark-electric-blue: #C2C0B6 !important;
  --color-button-text: #FAF9F5 !important;
  --color-ghost-button-text: #FAF9F5 !important;
  --color-verified: #45DA64 !important;
  --color-destructive: #FF5A5F !important;
  --color-light-fuchsia-pink: #FF5A5F !important;
  --color-bg-compose-form: rgba(58, 58, 58, 0.4) !important;
  --color-bg-compose-form-focus: rgba(58, 58, 58, 0.8) !important;
  --color-outer-space: #4A4A45 !important;
}


/* =========================================================================
   2. BASE SURFACES
   Fallback coverage for compiled builds that ignore some tokens.
   ========================================================================= */

body,
body.app-body,
#mastodon,
.app-holder,
.ui,
.columns-area,
.columns-area__panels,
.column,
.scrollable,
.drawer,
.navigation-panel,
.compose-panel,
.column-header,
.status,
.status__wrapper,
.notification,
.notification-group,
.conversation,
.account,
.detailed-status,
.getting-started,
.trends,
.trends__item,
.empty-column-indicator,
.load-more,
.load-gap,
.modal-root__modal,
.dropdown-menu,
.dropdown-menu__container {
  background-color: #20201D !important;
  border-color: #4A4A45 !important;
  color: #FAF9F5 !important;
}


/* =========================================================================
   3. GENERAL INPUTS (non-compose)
   The compose box has its own rules in section 9.
   ========================================================================= */

input,
textarea,
select,
.search__input,
.spoiler-input__input,
.setting-text,
.input-copy {
  background-color: #30302E !important;
  border-color: transparent !important;
  color: #FAF9F5 !important;
}

input:hover,
textarea:hover,
select:hover,
.search__input:hover,
.spoiler-input__input:hover {
  background-color: #383734 !important;
}

input:focus,
textarea:focus,
select:focus,
.search__input:focus,
.spoiler-input__input:focus,
.setting-text:focus,
.input-copy:focus {
  background-color: #30302E !important;
  border-color: #FB521F !important;
  box-shadow: 0 0 0 2px rgba(251, 82, 31, 0.25) !important;
  color: #FAF9F5 !important;
  outline-color: #FB521F !important;
}

input::placeholder,
textarea::placeholder,
.search__input::placeholder {
  color: #C2C0B6 !important;
  opacity: 1 !important;
}


/* =========================================================================
   4. LINKS
   Default + post-body links are green; identity/header links (section 8) orange.
   ========================================================================= */

a,
.status-link,
.link,
.link-footer a,
.search-results__hashtag,
.account__header__fields a,
.account__header__bio a,
.reply-indicator__content a,
.trends__item a,
.status__content a,
.status__content a.unhandled-link {
  color: #45DA64 !important;
}

a:hover,
a:focus,
.status-link:hover,
.status-link:focus,
.status__content a:hover,
.status__content a:focus,
.status__content a.unhandled-link:hover,
.status__content a.unhandled-link:focus,
.reply-indicator__content a:hover,
.reply-indicator__content a:focus {
  color: #7CF293 !important;
}


/* =========================================================================
   5. BUTTONS
   Real buttons only: orange pill, green on hover/focus.
   Nav links, icon buttons, status-action buttons and dropdown items excluded
   (handled in section 6).
   ========================================================================= */

.button,
button.button,
input[type="button"],
input[type="submit"],
.compose-form__publish-button-wrapper .button,
.compose-form__submit .button,
.simple_form .button,
.simple_form button[type="submit"],
.simple_form input[type="submit"],
.public-layout .button,
.public-layout button[type="submit"],
.public-layout input[type="submit"],
.account__header__account-note button,
.account__header__extra__links .button,
.confirmation-modal__action-bar .button,
.mute-modal__action-bar .button,
.block-modal__action-bar .button,
.report-dialog-modal .button,
.actions .button,
.actions input[type="button"],
.actions input[type="submit"] {
  border-radius: 999px !important;
  min-height: 42px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #FB521F !important;
  border-color: #FB521F !important;
  color: #FAF9F5 !important;
  box-shadow: none !important;
  filter: none !important;
  text-decoration: none !important;
}

.button:hover,
.button:focus,
button.button:hover,
button.button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
.compose-form__publish-button-wrapper .button:hover,
.compose-form__publish-button-wrapper .button:focus,
.compose-form__submit .button:hover,
.compose-form__submit .button:focus,
.simple_form .button:hover,
.simple_form .button:focus,
.simple_form button[type="submit"]:hover,
.simple_form button[type="submit"]:focus,
.simple_form input[type="submit"]:hover,
.simple_form input[type="submit"]:focus,
.public-layout .button:hover,
.public-layout .button:focus,
.public-layout button[type="submit"]:hover,
.public-layout button[type="submit"]:focus,
.public-layout input[type="submit"]:hover,
.public-layout input[type="submit"]:focus,
.account__header__account-note button:hover,
.account__header__account-note button:focus,
.account__header__extra__links .button:hover,
.account__header__extra__links .button:focus,
.confirmation-modal__action-bar .button:hover,
.confirmation-modal__action-bar .button:focus,
.mute-modal__action-bar .button:hover,
.mute-modal__action-bar .button:focus,
.block-modal__action-bar .button:hover,
.block-modal__action-bar .button:focus,
.report-dialog-modal .button:hover,
.report-dialog-modal .button:focus,
.actions .button:hover,
.actions .button:focus,
.actions input[type="button"]:hover,
.actions input[type="button"]:focus,
.actions input[type="submit"]:hover,
.actions input[type="submit"]:focus {
  background-color: #45DA64 !important;
  border-color: #45DA64 !important;
  color: #20201D !important;
  box-shadow: 0 0 0 3px rgba(69, 218, 100, 0.25) !important;
  filter: none !important;
  text-decoration: none !important;
}


/* =========================================================================
   6. NAVIGATION, ICON BUTTONS, DROPDOWN ITEMS
   Stay transparent; never become orange blocks. Excluded from pill styling.
   ========================================================================= */

.navigation-panel a,
.navigation-panel button:not(.button),
.column-link,
.tabs-bar__link,
.mobile-menu a,
.mobile-menu button:not(.button),
.icon-button,
.status__action-bar-button,
.detailed-status__button,
.dropdown-menu__item,
.privacy-dropdown__value,
.language-dropdown__value {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #FAF9F5 !important;
}

.icon-button,
.status__action-bar-button,
.detailed-status__button,
.navigation-panel button:not(.button),
.mobile-menu button:not(.button),
.dropdown-menu__item {
  border-radius: inherit !important;
  min-height: initial !important;
  padding-left: initial !important;
  padding-right: initial !important;
}

.navigation-panel a.active,
.navigation-panel a[aria-current="page"],
.column-link.active,
.tabs-bar__link.active,
.mobile-menu a.active,
.mobile-menu a[aria-current="page"] {
  color: #FB521F !important;
}

.navigation-panel a:hover,
.navigation-panel a:focus,
.navigation-panel button:not(.button):hover,
.navigation-panel button:not(.button):focus,
.column-link:hover,
.column-link:focus,
.tabs-bar__link:hover,
.tabs-bar__link:focus,
.mobile-menu a:hover,
.mobile-menu a:focus,
.icon-button:hover,
.icon-button:focus,
.status__action-bar-button:hover,
.status__action-bar-button:focus,
.detailed-status__button:hover,
.detailed-status__button:focus,
.dropdown-menu__item:hover,
.dropdown-menu__item:focus {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #45DA64 !important;
}


/* =========================================================================
   7. TABS
   Default orange, green on hover/active/selected/current.
   ========================================================================= */

.account__section-headline a,
.account__section-headline button,
.account__section-headline [role="tab"],
.profile__tabs a,
.profile__tabs button,
.profile__tabs [role="tab"],
.tab-bar__link,
.tabs-bar__link,
.tab-list__link,
[role="tablist"] [role="tab"],
.explore__tabs a,
.explore__tabs button,
.explore__tabs [role="tab"],
.explore__links a,
.explore__links button,
.explore__links [role="tab"],
.trends__tabs a,
.trends__tabs button,
.trends__tabs [role="tab"],
.column-header__tabs a,
.column-header__tabs button,
.column-header__tabs [role="tab"] {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #FB521F !important;
  text-decoration: none !important;
}

.account__section-headline a *,
.account__section-headline button *,
.account__section-headline [role="tab"] *,
.profile__tabs a *,
.profile__tabs button *,
.profile__tabs [role="tab"] *,
.tab-bar__link *,
.tabs-bar__link *,
.tab-list__link *,
[role="tablist"] [role="tab"] *,
.explore__tabs a *,
.explore__tabs button *,
.explore__tabs [role="tab"] *,
.explore__links a *,
.explore__links button *,
.explore__links [role="tab"] *,
.trends__tabs a *,
.trends__tabs button *,
.trends__tabs [role="tab"] *,
.column-header__tabs a *,
.column-header__tabs button *,
.column-header__tabs [role="tab"] * {
  color: #FB521F !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.account__section-headline a:hover,
.account__section-headline a:focus,
.account__section-headline a:active,
.account__section-headline a.active,
.account__section-headline a[aria-current="page"],
.account__section-headline a[aria-selected="true"],
.account__section-headline button:hover,
.account__section-headline button:focus,
.account__section-headline button:active,
.account__section-headline button.active,
.account__section-headline button[aria-current="page"],
.account__section-headline button[aria-selected="true"],
.account__section-headline [role="tab"]:hover,
.account__section-headline [role="tab"]:focus,
.account__section-headline [role="tab"]:active,
.account__section-headline [role="tab"].active,
.account__section-headline [role="tab"][aria-current="page"],
.account__section-headline [role="tab"][aria-selected="true"],
.profile__tabs a:hover,
.profile__tabs a:focus,
.profile__tabs a:active,
.profile__tabs a.active,
.profile__tabs a[aria-current="page"],
.profile__tabs a[aria-selected="true"],
.profile__tabs button:hover,
.profile__tabs button:focus,
.profile__tabs button:active,
.profile__tabs button.active,
.profile__tabs button[aria-current="page"],
.profile__tabs button[aria-selected="true"],
.profile__tabs [role="tab"]:hover,
.profile__tabs [role="tab"]:focus,
.profile__tabs [role="tab"]:active,
.profile__tabs [role="tab"].active,
.profile__tabs [role="tab"][aria-current="page"],
.profile__tabs [role="tab"][aria-selected="true"],
.tab-bar__link:hover,
.tab-bar__link:focus,
.tab-bar__link:active,
.tab-bar__link.active,
.tab-bar__link[aria-current="page"],
.tab-bar__link[aria-selected="true"],
.tabs-bar__link:hover,
.tabs-bar__link:focus,
.tabs-bar__link:active,
.tabs-bar__link.active,
.tabs-bar__link[aria-current="page"],
.tabs-bar__link[aria-selected="true"],
.tab-list__link:hover,
.tab-list__link:focus,
.tab-list__link:active,
.tab-list__link.active,
.tab-list__link[aria-current="page"],
.tab-list__link[aria-selected="true"],
[role="tablist"] [role="tab"]:hover,
[role="tablist"] [role="tab"]:focus,
[role="tablist"] [role="tab"]:active,
[role="tablist"] [role="tab"].active,
[role="tablist"] [role="tab"][aria-current="page"],
[role="tablist"] [role="tab"][aria-selected="true"],
.explore__tabs a:hover,
.explore__tabs a:focus,
.explore__tabs a.active,
.explore__tabs a[aria-selected="true"],
.explore__tabs button:hover,
.explore__tabs button:focus,
.explore__tabs button.active,
.explore__tabs button[aria-selected="true"],
.explore__links a:hover,
.explore__links a:focus,
.explore__links a.active,
.explore__links a[aria-selected="true"],
.explore__links button:hover,
.explore__links button:focus,
.explore__links button.active,
.explore__links button[aria-selected="true"],
.trends__tabs a:hover,
.trends__tabs a:focus,
.trends__tabs a.active,
.trends__tabs a[aria-selected="true"],
.trends__tabs button:hover,
.trends__tabs button:focus,
.trends__tabs button.active,
.trends__tabs button[aria-selected="true"],
.column-header__tabs a:hover,
.column-header__tabs a:focus,
.column-header__tabs a.active,
.column-header__tabs a[aria-selected="true"],
.column-header__tabs button:hover,
.column-header__tabs button:focus,
.column-header__tabs button.active,
.column-header__tabs button[aria-selected="true"] {
  background-color: transparent !important;
  border-bottom-color: #45DA64 !important;
  color: #45DA64 !important;
  box-shadow: inset 0 -3px 0 #45DA64 !important;
  text-decoration: none !important;
}


/* =========================================================================
   8. STATUS / NOTIFICATION / SIDEBAR IDENTITY LINKS  (orange)
   Display names, account handles, relative-time, boost/notification headers,
   and the signed-in account in the sidebar. Post-BODY links stay green (sec 4).
   ========================================================================= */

.status__prepend a,
.status__prepend a span,
.status__prepend .display-name,
.status__prepend .display-name strong,
.status__prepend .display-name__account,
.status__prepend .status__display-name,
.status__prepend .status__display-name strong,
.status__prepend .status__display-name span,
.status__prepend .notification__display-name,
.status__prepend .notification__display-name strong,
.status__prepend .notification__display-name span,
.status__prepend .account__display-name,
.status__prepend .account__display-name strong,
.status__prepend .account__display-name span,
.notification__message a,
.notification__message a span,
.notification__message .display-name,
.notification__message .display-name strong,
.notification__message .display-name__account,
.notification__message .status__display-name,
.notification__message .status__display-name strong,
.notification__message .status__display-name span,
.notification__message .notification__display-name,
.notification__message .notification__display-name strong,
.notification__message .notification__display-name span,
.notification__message .account__display-name,
.notification__message .account__display-name strong,
.notification__message .account__display-name span,
.status .status__info a,
.status .status__info a span,
.status .status__info .display-name,
.status .status__info .display-name strong,
.status .status__info .display-name__account,
.status .status__info .status__display-name,
.status .status__info .status__display-name strong,
.status .status__info .status__display-name span,
.status .status__info .account__display-name,
.status .status__info .account__display-name strong,
.status .status__info .account__display-name span,
.status .status__relative-time,
.status .status__relative-time a,
.status .status__relative-time span,
.status .status__visibility-icon,
.status .status__visibility-icon .icon,
.status .display-name,
.status .display-name strong,
.status .display-name__account,
.status .account__display-name,
.status .account__display-name strong,
.status .account__display-name span,
.notification .display-name,
.notification .display-name strong,
.notification .display-name__account,
.notification .account__display-name,
.notification .account__display-name strong,
.notification .account__display-name span,
.notification .status__relative-time,
.notification .status__relative-time a,
.notification .status__relative-time span,
.navigation-panel .account a,
.navigation-panel .account a span,
.navigation-panel .account__display-name,
.navigation-panel .account__display-name strong,
.navigation-panel .display-name,
.navigation-panel .display-name strong,
.navigation-panel .display-name__account,
.navigation-panel .account__acct,
.navigation-panel .account__username,
.navigation-panel .account__name,
.drawer .account a,
.drawer .account a span,
.drawer .account__display-name,
.drawer .account__display-name strong,
.drawer .display-name,
.drawer .display-name strong,
.drawer .display-name__account,
.drawer .account__acct,
.drawer .account__username,
.drawer .account__name,
.compose-panel .account a,
.compose-panel .account a span,
.compose-panel .account__display-name,
.compose-panel .account__display-name strong,
.compose-panel .display-name,
.compose-panel .display-name strong,
.compose-panel .display-name__account,
.compose-panel .account__acct,
.compose-panel .account__username,
.compose-panel .account__name,
.drawer__inner__mastodon .account a,
.drawer__inner__mastodon .account a span,
.drawer__inner__mastodon .account__display-name,
.drawer__inner__mastodon .account__display-name strong,
.drawer__inner__mastodon .display-name,
.drawer__inner__mastodon .display-name strong,
.drawer__inner__mastodon .display-name__account,
.drawer__inner__mastodon .account__acct,
.drawer__inner__mastodon .account__username,
.drawer__inner__mastodon .account__name {
  color: #FB521F !important;
  text-decoration-color: #FB521F !important;
}

.status__prepend a:hover,
.status__prepend a:focus,
.status__prepend a:hover span,
.status__prepend a:focus span,
.status__prepend .display-name:hover,
.status__prepend .display-name:focus,
.notification__message a:hover,
.notification__message a:focus,
.notification__message a:hover span,
.notification__message a:focus span,
.status .status__info a:hover,
.status .status__info a:focus,
.status .status__info a:hover span,
.status .status__info a:focus span,
.status .status__relative-time:hover,
.status .status__relative-time:focus,
.status .status__relative-time a:hover,
.status .status__relative-time a:focus,
.notification .status__relative-time:hover,
.notification .status__relative-time:focus,
.notification .status__relative-time a:hover,
.notification .status__relative-time a:focus,
.navigation-panel .account a:hover,
.navigation-panel .account a:focus,
.navigation-panel .account a:hover span,
.navigation-panel .account a:focus span,
.drawer .account a:hover,
.drawer .account a:focus,
.compose-panel .account a:hover,
.compose-panel .account a:focus,
.drawer__inner__mastodon .account a:hover,
.drawer__inner__mastodon .account a:focus {
  color: #FF8A5C !important;
  text-decoration-color: #FF8A5C !important;
}


/* =========================================================================
   9. COMPOSE BOX
   Final resolved intent (this used to be defined ~4 contradictory times):
     - Only .compose-form__highlightable carries the grey panel (#30302E).
     - The form shell, wrappers, toolbars and the textarea itself are transparent.
     - Focus border on the highlightable / textarea is orange.
     - Privacy/language pills are green outline on transparent.
     - The Post button is the only orange block; green on hover.
   ========================================================================= */

/* Transparent shell + controls */
form.compose-form,
.compose-form,
.compose-form__autosuggest-wrapper,
.compose-form__modifiers,
.compose-form__buttons-wrapper,
.compose-form__actions,
.compose-form__buttons,
.compose-form__footer,
.compose-form__publish,
.compose-form textarea,
.compose-form input:not([type="submit"]):not([type="button"]),
.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* The single grey panel */
.compose-form__highlightable {
  background-color: #30302E !important;
  color: #FAF9F5 !important;
}

/* Readable text + placeholders inside the grey panel */
.compose-form textarea,
.compose-form input:not([type="submit"]):not([type="button"]),
.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input {
  color: #FAF9F5 !important;
}

.compose-form textarea::placeholder,
.compose-form input::placeholder,
.compose-form .autosuggest-textarea__textarea::placeholder,
.compose-form .spoiler-input__input::placeholder {
  color: #C2C0B6 !important;
  opacity: 1 !important;
}

/* Orange focus border (Mastodon draws this on the wrapper, not the textarea) */
.compose-form textarea:focus,
.compose-form input:not([type="submit"]):not([type="button"]):focus,
.compose-form .autosuggest-textarea__textarea:focus,
.compose-form .spoiler-input__input:focus,
.compose-form__highlightable:focus,
.compose-form__highlightable:focus-within {
  border-color: #FB521F !important;
  outline-color: #FB521F !important;
  box-shadow: 0 0 0 2px rgba(251, 82, 31, 0.25) !important;
}

/* Privacy / language pills */
.compose-form .privacy-dropdown__value,
.compose-form .language-dropdown__value {
  background-color: transparent !important;
  border-color: #45DA64 !important;
  color: #45DA64 !important;
}

/* Post button (compact pill, orange -> green) */
.compose-form .button,
.compose-form button.button,
.compose-form input[type="submit"],
.compose-form .compose-form__publish-button-wrapper .button,
.compose-form .compose-form__submit .button {
  background-color: #FB521F !important;
  border-color: #FB521F !important;
  color: #FAF9F5 !important;
  min-height: 34px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

.compose-form .button:hover,
.compose-form .button:focus,
.compose-form button.button:hover,
.compose-form button.button:focus,
.compose-form input[type="submit"]:hover,
.compose-form input[type="submit"]:focus,
.compose-form .compose-form__publish-button-wrapper .button:hover,
.compose-form .compose-form__publish-button-wrapper .button:focus,
.compose-form .compose-form__submit .button:hover,
.compose-form .compose-form__submit .button:focus {
  background-color: #45DA64 !important;
  border-color: #45DA64 !important;
  color: #20201D !important;
}


/* =========================================================================
   10. ICONS
   Let SVG icons follow text color so the brand recoloring applies.
   ========================================================================= */

.icon,
.icon-button,
.status__action-bar-button,
.status__action-bar-button .icon,
.detailed-status__button,
.detailed-status__button .icon,
svg:not(.logo):not(.logo--wordmark) {
  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

:focus-visible {
  outline-color: #45DA64 !important;
}


/* =========================================================================
   11. SEARCH (pill)
   ========================================================================= */

.search,
.search__input,
input[type="search"],
input[role="searchbox"],
input[aria-label="Search"],
input[aria-label="Search or paste URL"],
input[placeholder="Search"],
input[placeholder="Search or paste URL"],
input[placeholder*="Search" i] {
  border-radius: 999px !important;
}

.search {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.search__input,
input[type="search"],
input[role="searchbox"],
input[aria-label="Search"],
input[aria-label="Search or paste URL"],
input[placeholder="Search"],
input[placeholder="Search or paste URL"],
input[placeholder*="Search" i] {
  background-color: #30302E !important;
  border-color: transparent !important;
  color: #FAF9F5 !important;
  min-height: 42px !important;
  padding-left: 48px !important; /* clear the left magnifier icon inside the pill */
  padding-right: 18px !important;
  text-indent: 0 !important;
}

.search__input:hover,
input[type="search"]:hover,
input[role="searchbox"]:hover,
input[aria-label="Search"]:hover,
input[aria-label="Search or paste URL"]:hover,
input[placeholder*="Search" i]:hover {
  background-color: #383734 !important;
}

.search__input:focus,
input[type="search"]:focus,
input[role="searchbox"]:focus,
input[aria-label="Search"]:focus,
input[aria-label="Search or paste URL"]:focus,
input[placeholder*="Search" i]:focus {
  background-color: #30302E !important;
  border-color: #FB521F !important;
  box-shadow: 0 0 0 2px rgba(251, 82, 31, 0.25) !important;
  color: #FAF9F5 !important;
  outline-color: #FB521F !important;
}

.search__input::placeholder,
input[type="search"]::placeholder,
input[role="searchbox"]::placeholder,
input[aria-label="Search"]::placeholder,
input[aria-label="Search or paste URL"]::placeholder,
input[placeholder*="Search" i]::placeholder {
  color: #C2C0B6 !important;
  opacity: 1 !important;
}

.search__icon,
.search__icon .icon,
.search__icon-wrapper,
.search__icon-wrapper .icon,
.search svg:not(.logo):not(.logo--wordmark) {
  color: #FAF9F5 !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Keep the magnifier clear of the rounded pill corner (only affects it if
   Mastodon positions the icon from the left edge). */
.search__icon,
.search__icon-wrapper {
  left: 12px !important;
  right: auto !important;
}


/* =========================================================================
   12. LOGO REPLACEMENT
   Define the PrivacySafe SVG once, hide Mastodon's logo, paint ours on the
   visible wrapper containers only.
   ========================================================================= */

:root,
html,
body {
  --logo: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg width="244" height="66" fill="none" version="1.1" viewBox="0 0 244 66" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="linearGradient5186"><stop stop-color="%23ef2008" offset="0"/><stop stop-color="%23ff6428" offset="1"/></linearGradient><linearGradient id="linearGradient2995-8" x1="122.06" x2="344.74" y1="131.14" y2="130.72" gradientTransform="matrix(.32482 0 0 .32482 -30.146 -9.4532)" gradientUnits="userSpaceOnUse" xlink:href="%23linearGradient1884"/><linearGradient id="linearGradient1884"><stop stop-color="%23157ee9" offset="0"/><stop stop-color="%233ecc78" offset="1"/></linearGradient><linearGradient id="linearGradient2720-0" x1="162.26" x2="258.85" y1="131.29" y2="131.29" gradientTransform="matrix(.1547 .26795 -.26795 .1547 40.701 -43.64)" gradientUnits="userSpaceOnUse" xlink:href="%23linearGradient5186"/><linearGradient id="linearGradient3944" x1="177.47" x2="1418.8" y1="85.938" y2="85.938" gradientTransform="matrix(.090055 0 0 .090192 52.91 9.3665)" gradientUnits="userSpaceOnUse" xlink:href="%23linearGradient5186"/><linearGradient id="linearGradient14810" x1="90.814" x2="267.72" y1="313.46" y2="313.46" gradientTransform="matrix(.70667 0 0 .70201 4.2758 -177.44)" gradientUnits="userSpaceOnUse" xlink:href="%23linearGradient1884"/><linearGradient id="linearGradient14812" x1="90.814" x2="267.72" y1="313.46" y2="313.46" gradientTransform="matrix(.70667 0 0 .70201 4.0259 -177.44)" gradientUnits="userSpaceOnUse" xlink:href="%23linearGradient1884"/><linearGradient id="linearGradient14816" x1="90.814" x2="267.72" y1="313.46" y2="313.46" gradientTransform="matrix(.70667 0 0 .70201 4.6869 -177.44)" gradientUnits="userSpaceOnUse" xlink:href="%23linearGradient1884"/><linearGradient id="linearGradient14818" x1="90.814" x2="267.72" y1="313.46" y2="313.46" gradientTransform="matrix(.70667 0 0 .70201 5.2787 -177.44)" gradientUnits="userSpaceOnUse" xlink:href="%23linearGradient1884"/><linearGradient id="linearGradient14820" x1="90.814" x2="267.72" y1="313.46" y2="313.46" gradientTransform="matrix(.70667 0 0 .70201 5.342 -177.44)" gradientUnits="userSpaceOnUse" xlink:href="%23linearGradient1884"/></defs><symbol id="logo-symbol-wordmark" transform="translate(-95.942 -19.271)"><path d="m60.754 14.403c-0.9396-6.984-7.0266-12.488-14.242-13.554-1.2174-0.18021-5.8298-0.83607-16.514-0.83607h-0.0798c-10.688 0-12.98 0.65585-14.198 0.83607-7.0147 1.037-13.421 5.9825-14.975 13.049-0.74757 3.4802-0.82735 7.3385-0.68847 10.878 0.19797 5.0755 0.23638 10.142 0.69734 15.197 0.31867 3.3577 0.87458 6.6886 1.6636 9.9678 1.4774 6.0563 7.458 11.096 13.317 13.152 6.2733 2.1443 13.02 2.5003 19.484 1.0281 0.7111-0.1654 1.4134-0.3574 2.1068-0.5761 1.5719-0.4992 3.4128-1.0576 4.7661-2.0384 0.0186-0.0138 0.0338-0.0316 0.0445-0.052 0.0108-0.0205 0.0168-0.0431 0.0176-0.0662v-4.8982c-4e-4 -0.0216-0.0055-0.0428-0.0151-0.0622-0.0096-0.0193-0.0234-0.0363-0.0404-0.0496s-0.0368-0.0226-0.0579-0.0273c-0.021-0.0047-0.0429-0.0046-0.0639 2e-4 -4.1416 0.9892-8.3856 1.485-12.644 1.4772-7.3279 0-9.2988-3.4772-9.8631-4.9248-0.4537-1.2511-0.7418-2.5562-0.8569-3.882-0.0012-0.0222 0.0029-0.0445 0.0119-0.0649 9e-3 -0.0203 0.0227-0.0383 0.04-0.0524s0.0376-0.024 0.0594-0.0287c0.0218-0.0048 0.0444-0.0043 0.066 0.0013 4.0725 0.9824 8.2473 1.4782 12.437 1.4771 1.0075 0 2.0122 0 3.0198-0.0266 4.2135-0.1182 8.6546-0.3338 12.8-1.1433 0.1034-0.0207 0.2069-0.0384 0.2955-0.065 6.539-1.2556 12.762-5.1966 13.394-15.176 0.0236-0.3929 0.0827-4.1153 0.0827-4.523 0.0029-1.3856 0.4462-9.829-0.065-15.017z" fill="url(%23paint0_linear_89_11)"/><path d="m12.344 18.303c0-2.0366 1.6335-3.684 3.6528-3.684s3.6527 1.6474 3.6527 3.684-1.6334 3.684-3.6527 3.684-3.6528-1.6474-3.6528-3.684z" fill="currentColor"/><path d="m66.148 21.468v16.915h-6.6496v-16.41c0-3.4635-1.4405-5.2147-4.3345-5.2147-3.1897 0-4.7975 2.0885-4.7975 6.2006v8.9896h-6.5981v-8.9896c0-4.1251-1.5949-6.2006-4.7975-6.2006-2.8811 0-4.3345 1.7512-4.3345 5.2147v16.41h-6.6367v-16.915c0-3.4505 0.8746-6.2005 2.6238-8.2371 1.8136-2.0366 4.1801-3.0744 7.1127-3.0744 3.3955 0 5.9807 1.3232 7.6785 3.9565l1.6592 2.8019 1.6592-2.8019c1.6977-2.6333 4.2701-3.9565 7.6785-3.9565 2.9325 0 5.2991 1.0378 7.1127 3.0744 1.7492 2.0366 2.6238 4.7736 2.6238 8.2371zm22.881 8.4058c1.3762-1.4658 2.0322-3.2948 2.0322-5.513s-0.656-4.0602-2.0322-5.4612c-1.3248-1.4658-2.9968-2.1663-5.029-2.1663s-3.7042 0.7005-5.029 2.1663c-1.3248 1.401-1.9807 3.243-1.9807 5.4612s0.6559 4.0602 1.9807 5.513c1.3248 1.401 2.9968 2.1145 5.029 2.1145s3.7042-0.7005 5.029-2.1145zm2.0322-19.043h6.5467v27.059h-6.5467v-3.1911c-1.9808 2.6463-4.7203 3.9564-8.2831 3.9564-3.5627 0-6.3023-1.349-8.7332-4.1121-2.3923-2.763-3.6013-6.1746-3.6013-10.17s1.2218-7.3551 3.6013-10.118c2.4437-2.763 5.3377-4.1639 8.7332-4.1639 3.3956 0 6.3023 1.2972 8.2831 3.9434v-3.204zm28.592 13.037c1.929 1.4659 2.894 3.5154 2.842 6.1098 0 2.763-0.964 4.9294-2.945 6.4341-1.981 1.4658-4.373 2.2182-7.267 2.2182-5.235 0-8.785-2.1663-10.663-6.4341l5.685-3.4116c0.759 2.322 2.431 3.5154 4.978 3.5154 2.341 0 3.498-0.7524 3.498-2.322 0-1.1415-1.517-2.1663-4.617-2.9706-1.17-0.3242-2.135-0.6485-2.894-0.921-1.067-0.428-1.981-0.921-2.739-1.5177-1.878-1.4658-2.843-3.4116-2.843-5.9022 0-2.6463 0.913-4.7607 2.74-6.2784 1.877-1.5696 4.167-2.322 6.906-2.322 4.374 0 7.563 1.8939 9.647 5.7336l-5.582 3.243c-0.81-1.842-2.187-2.763-4.065-2.763-1.98 0-2.945 0.7523-2.945 2.2182 0 1.1415 1.518 2.1663 4.618 2.9705 2.392 0.5449 4.27 1.3491 5.633 2.3869zm20.823-6.3303h-5.736v11.26c0 1.3491 0.514 2.1663 1.479 2.5425 0.707 0.2724 2.135 0.3243 4.27 0.2205v6.3303c-4.411 0.5448-7.614 0.1038-9.492-1.3491-1.878-1.401-2.791-4.0083-2.791-7.7313v-11.273h-4.412v-6.7064h4.412v-5.4612l6.547-2.1144v7.5756h5.736v6.7064h-0.013zm20.875 12.181c1.325-1.401 1.981-3.1911 1.981-5.3574s-0.656-3.9435-1.981-5.3574c-1.325-1.401-2.945-2.1145-4.926-2.1145s-3.601 0.7005-4.926 2.1145c-1.273 1.4658-1.929 3.243-1.929 5.3574s0.656 3.8916 1.929 5.3574c1.325 1.4009 2.945 2.1144 4.926 2.1144s3.601-0.7005 4.926-2.1144zm-14.469 4.8126c-2.586-2.7631-3.859-6.1098-3.859-10.17s1.273-7.3551 3.859-10.118c2.585-2.763 5.787-4.164 9.543-4.164s6.958 1.401 9.544 4.164c2.585 2.763 3.91 6.1746 3.91 10.118s-1.325 7.4069-3.91 10.17c-2.586 2.763-5.737 4.1121-9.544 4.1121s-6.958-1.3491-9.543-4.1121zm44.888-4.657c1.324-1.4658 1.98-3.2948 1.98-5.513s-0.656-4.0602-1.98-5.4612c-1.325-1.4658-2.997-2.1663-5.029-2.1663-2.033 0-3.705 0.7005-5.081 2.1663-1.325 1.401-1.981 3.243-1.981 5.4612s0.656 4.0602 1.981 5.513c1.376 1.401 3.1 2.1145 5.081 2.1145 1.98 0 3.704-0.7005 5.029-2.1145zm1.98-29.874h6.547v37.891h-6.547v-3.1911c-1.929 2.6463-4.669 3.9564-8.231 3.9564-3.563 0-6.341-1.349-8.785-4.1121-2.392-2.763-3.601-6.1746-3.601-10.17s1.222-7.3551 3.601-10.118c2.431-2.763 5.376-4.1639 8.785-4.1639 3.408 0 6.302 1.2972 8.231 3.9434v-14.036zm29.557 29.706c1.325-1.401 1.981-3.1911 1.981-5.3574s-0.656-3.9435-1.981-5.3574c-1.325-1.401-2.945-2.1144-4.926-2.1144s-3.602 0.7005-4.926 2.1144c-1.274 1.4658-1.93 3.243-1.93 5.3574s0.656 3.8916 1.93 5.3574c1.324 1.401 2.945 2.1144 4.926 2.1144s3.601-0.7005 4.926-2.1144zm-14.47 4.8126c-2.585-2.763-3.858-6.1098-3.858-10.17s1.273-7.3551 3.858-10.118c2.586-2.763 5.788-4.164 9.544-4.164 3.755 0 6.958 1.401 9.543 4.164 2.586 2.763 3.91 6.1746 3.91 10.118s-1.324 7.407-3.91 10.17c-2.585 2.763-5.736 4.1121-9.543 4.1121s-6.958-1.3491-9.544-4.1121zm51.332-13.257v16.617h-6.547v-15.748c0-1.7901-0.45-3.1392-1.376-4.164-0.862-0.921-2.083-1.401-3.653-1.401-3.704 0-5.582 2.2182-5.582 6.7065v14.606h-6.546v-27.046h6.546v3.0354c1.569-2.5425 4.065-3.7878 7.563-3.7878 2.791 0 5.081 0.9729 6.856 2.9706 1.826 1.9976 2.739 4.7088 2.739 8.2242" fill="currentColor"/><defs><linearGradient id="paint0_linear_89_11" x1="30.5" x2="30.5" y1=".013" y2="65.013" gradientUnits="userSpaceOnUse"><stop stop-color="%236364FF" offset="0"/><stop stop-color="%23563ACC" offset="1"/></linearGradient></defs></symbol><path d="m60.09 47.261 1.2665-2.1966-6.9262-3.9995-0.37164 0.65477c-0.16516 0.29095-0.33798 0.57751-0.51885 0.85895l-0.42417 0.65919zm4.1216-12.85 1.67e-4 -2.5384-8.0536-2.2e-4 0.04086 0.78513c0.0088 0.17144 0.01457 0.3432 0.01845 0.51483-0.0057 0.14823-0.01271 0.29624-0.02208 0.44429l-0.05043 0.79428zm-11.921 20.648-4.0145-6.9596-0.65414 0.40154c-0.28669 0.176-0.57826 0.34388-0.87442 0.50343l-0.67663 0.365 4.0205 6.9613zm-12.853 4.1262-4.9e-4 -8.0706-0.78196 0.03738c-0.13979 0.0067-0.27986 0.01163-0.41978 0.01504-0.17927-0.0062-0.3587-0.01496-0.53771-0.02656l-0.79105-0.05091-0.0033 0.79436-2.2e-4 0.0015 1.35e-4 7.3zm21.39-37.661-1.2663-2.1964-0.64712 0.37326-5.8084 3.3531 0.40179 0.65371c0.17454 0.28416 0.34114 0.57339 0.49972 0.86676l0.36509 0.67549zm-12.592-3.2729 4.0553-7.0271-2.1995-1.2727-0.37336 0.64789-3.6713 6.36 0.66579 0.36785c0.29363 0.16222 0.58281 0.33282 0.86671 0.51155zm-17.956 31.099-0.64804-0.37309c-0.29122-0.16743-0.57719-0.34322-0.85844-0.52688l-0.60937-0.47314-0.59703 0.98758-3.5167 6.0929 2.1995 1.2727zm9.1583-34.083 1.92e-4 -8.1697-2.5343-1.423e-4 -2.9e-5 0.7468-1.5e-4 7.4076 0.78462-0.03997c0.17932-0.0091 0.35886-0.01474 0.53836-0.01842 0.13877 0.0058 0.27736 0.01317 0.41595 0.02223zm-16.148 27.926-0.3982-0.65279c-0.17325-0.2842-0.33833-0.57342-0.49551-0.86681l-0.3642-0.67908-0.6675 0.38503-6.3804 3.6844 1.2663 2.1964zm-2.9937-8.7826-0.03625-0.7819c-0.0069-0.14736-0.01187-0.29468-0.01504-0.44218 0.0064-0.17301 0.01501-0.34624 0.02635-0.51898l0.05232-0.79554-8.1947 1.43e-4 -3e-5 0.74681-1.39e-4 1.7916zm10.034-17.389-4.0804-7.0699-0.64699 0.37386-1.5523 0.89838 4.0804 7.0699 0.65445-0.40312c0.28541-0.17594 0.57547-0.34383 0.87026-0.50354zm-6.9854 6.0956-7.0935-4.0954-0.37363 0.64715-0.89346 1.5491 7.0546 4.074 0.37065-0.65829c0.16351-0.29112 0.33523-0.57746 0.51524-0.8587z" color="%23000000" fill="url(%23linearGradient2995-8)" stroke-linecap="round" style="-inkscape-stroke:none"/><path d="m51.037 25.616a14.942 14.942 60 0 0-18.81-6.2476l2.5089 4.3456a9.9616 9.9616 60 0 1 11.987 4.3925 9.9616 9.9616 60 0 1-2.188 12.581l2.5072 4.3427a14.942 14.942 60 0 0 3.9944-19.414zm-21.722-4.5829a14.942 14.942 60 0 0-4.1594 19.525 14.942 14.942 60 0 0 18.989 6.1605l-2.499-4.3284a9.9616 9.9616 60 0 1-12.177-4.3226 9.9616 9.9616 60 0 1 2.3489-12.699z" fill="url(%23linearGradient2720-0)" stroke-width="4"/><g fill="url(%23linearGradient3944)"><path d="m68.892 10.215h2.6781v13.805h-2.6781zm1.0831 6.8632h3.6233v2.3272h-3.6233zm3.6233 0q1.0043 0 1.7132-0.1775 0.7286-0.19722 1.1028-0.67055 0.39384-0.49305 0.39384-1.42 0-0.92693-0.39384-1.4003-0.37415-0.49305-1.1028-0.67054-0.70891-0.19722-1.7132-0.19722v-2.3272q1.8117 0 3.1507 0.4536 1.3587 0.43388 2.107 1.4397 0.74829 1.0058 0.74829 2.7019 0 1.6566-0.74829 2.6822-0.7483 1.0255-2.107 1.4791-1.3391 0.43388-3.1507 0.43388zm-3.6233-6.8632h3.6233v2.3272h-3.6233z"/><path d="m81.101 10.215h2.6781v13.805h-2.6781zm1.0831 6.666h3.6824v2.3272h-3.6824zm3.6824 0q1.0043 0 1.7132-0.19722 0.7286-0.19722 1.1028-0.67055 0.39384-0.47333 0.39384-1.3016 0-0.84804-0.39384-1.3016-0.37415-0.47333-1.1028-0.67054-0.70891-0.19722-1.7132-0.19722v-2.3272q1.792 0 3.131 0.43388 1.3587 0.41416 2.107 1.4003 0.76799 0.9861 0.76799 2.6625 0 1.6566-0.76799 2.6625-0.7483 0.9861-2.107 1.42-1.3391 0.41416-3.131 0.41416zm-3.6824-6.666h3.6824v2.3272h-3.6824zm3.9581 7.4352h2.6781l3.0916 6.3702h-3.0523z"/><path d="m93.763 10.215h2.6781v13.805h-2.6781z"/><path d="m102.11 24.02-4.2141-13.805h2.7372l4.0368 13.805zm3.7808 0h-2.56l4.0565-13.805h2.7569z"/><path d="m113.53 10.215h2.56l-4.0368 13.805h-2.7372zm3.7809 0 4.2535 13.805h-2.7569l-4.0565-13.805zm-5.6122 8.5002h7.4239v2.3272h-7.4239z"/><path d="m134.98 18.399q-0.13785 1.775-0.90583 3.1161-0.7483 1.3411-2.107 2.0905-1.3391 0.72971-3.2886 0.72971-2.1858 0-3.7218-0.96638-1.5163-0.9861-2.304-2.623t-0.78768-3.6486q0-1.4791 0.43322-2.7808 0.45292-1.3214 1.3194-2.3075 0.86645-0.9861 2.1267-1.5383 1.28-0.57194 2.9341-0.57194 2.7766 0 4.3322 1.4791 1.5754 1.4594 1.8904 3.9444h-2.8553q-0.0985-0.67055-0.33476-1.203-0.2363-0.55221-0.64983-0.94665-0.39384-0.39444-0.9846-0.61138t-1.3981-0.21694q-1.3981 0-2.304 0.69027-0.88614 0.67055-1.2997 1.7553t-0.41353 2.3075 0.41353 2.3272q0.41353 1.0847 1.2997 1.775 0.90583 0.67055 2.304 0.67055 0.88614 0 1.5163-0.25638t1.0437-0.70999q0.43323-0.47333 0.64984-1.1044 0.21661-0.6311 0.27569-1.4003z"/><path d="m139.72 20.155-4.7261-9.9398h2.7569l3.3082 7.2182h-0.70891l3.2886-7.2182h2.7569l-4.7261 9.9398zm-0.37415-2.9188h2.6978v6.7843h-2.6978z"/><path d="m149.57 19.622q0.0788 0.69027 0.47261 1.203 0.39383 0.51277 1.024 0.78888 0.64984 0.25638 1.4572 0.25638 1.0831 0 1.8117-0.37472 0.74829-0.39444 0.74829-1.203 0-0.57194-0.45291-0.88749-0.43323-0.33527-1.1815-0.53249-0.7286-0.21694-1.5951-0.39444-0.86644-0.19722-1.7526-0.47333-0.86645-0.29583-1.595-0.76916-0.7286-0.47333-1.1815-1.2622-0.43321-0.78888-0.43321-2.0116 0-1.1833 0.68921-2.0905 0.68922-0.92693 1.9101-1.4397 1.2406-0.53249 2.8356-0.53249 1.5163 0 2.7175 0.61138 1.2012 0.61138 1.9101 1.6764t0.70891 2.4061h-2.8356q-0.0788-1.065-0.72861-1.6566-0.63014-0.59166-1.8707-0.59166-1.2406 0-1.8904 0.4536-0.64984 0.4536-0.64984 1.1636 0 0.6311 0.43322 0.9861 0.45292 0.33527 1.1815 0.57194 0.72859 0.21694 1.595 0.39444 0.88614 0.1775 1.7526 0.4536 0.86644 0.25638 1.595 0.72971 0.74829 0.4536 1.1815 1.2228 0.45292 0.76916 0.45292 1.9722 0 1.913-1.4375 2.978-1.4375 1.065-4.0368 1.065-1.595 0-2.8553-0.61138-1.2603-0.61138-2.0086-1.6764-0.7483-1.065-0.80738-2.4258z"/><path d="m162.82 10.215h2.56l-4.0369 13.805h-2.7372zm3.7808 0 4.2535 13.805h-2.7569l-4.0565-13.805zm-5.6122 8.5002h7.4239v2.3272h-7.4239z"/><path d="m172.29 10.215h2.6781v13.805h-2.6781zm2.56 6.0941h6.0454v2.3272h-6.0454zm-1.4769-6.0941h8.31v2.3469h-8.31z"/><path d="m183.26 24.02v-13.805h9.5506v2.3469h-6.8725v3.3527h6.0848v2.3272h-6.0848v3.4316h6.9513v2.3469z"/></g><g><path d="m72.211 47.178q0.14461 1.5443 0.97609 2.6576 0.86764 1.0774 2.2414 1.6879 1.4099 0.57462 3.1452 0.57462 2.5306 0 4.0851-0.96966 1.5907-0.96966 1.5907-2.7294 0-1.2211-0.86764-1.9034-0.86764-0.68236-2.3137-1.0774-1.4099-0.39505-3.109-0.71827-1.6991-0.35914-3.4344-0.7901-1.6991-0.46688-3.1452-1.257-1.4099-0.82601-2.2776-2.1907-0.86764-1.4006-0.86764-3.5914 0-2.083 1.2292-3.7709 1.2653-1.6879 3.5067-2.6576 2.2414-0.96966 5.242-0.96966 2.7475 0 4.9528 1.1133 2.2414 1.0774 3.5429 3.0167 1.3015 1.9034 1.3015 4.4174h-4.2297q-0.14461-2.3344-1.5545-3.5914-1.3738-1.2929-4.1936-1.2929-2.7837 0-4.2297 1.0415-1.4461 1.0056-1.4461 2.6935 0 1.2929 0.86764 2.0471 0.86764 0.71827 2.3137 1.1492 1.4461 0.43096 3.1452 0.75418 1.6991 0.28731 3.3983 0.71827t3.1452 1.2211 2.3137 2.1548q0.86764 1.3288 0.86764 3.4836 0 3.4836-2.6752 5.4229-2.6391 1.9393-7.3749 1.9393-2.9283 0-5.2781-1.1133-2.3137-1.1492-3.6875-3.0886-1.3376-1.9393-1.4461-4.3814z" fill="url(%23linearGradient14810)"/><path d="m103.12 55.761q-4.0128 0-6.8327-1.7598-2.7837-1.7957-4.2297-4.7765t-1.4461-6.644q0-2.6935 0.79534-5.0638 0.83149-2.4062 2.4222-4.2019 1.5907-1.7957 3.9044-2.8013 2.3499-1.0415 5.3866-1.0415 3.0006 0 5.3143 1.0415 2.3498 1.0056 3.9405 2.8013 1.5907 1.7957 2.386 4.2019 0.83148 2.3703 0.83148 5.0638 0 3.6632-1.4461 6.644-1.4461 2.9808-4.2298 4.7765-2.7837 1.7598-6.7965 1.7598zm0-3.6632q2.8198 0 4.6636-1.3288 1.8437-1.3647 2.7475-3.5195 0.90379-2.1548 0.90379-4.6688 0-2.478-0.90379-4.6328-0.90379-2.1548-2.7475-3.4836-1.8437-1.3288-4.6636-1.3288-2.8198 0-4.6997 1.3288-1.8437 1.3288-2.7837 3.4836-0.90379 2.1548-0.90379 4.6328 0 2.5139 0.90379 4.6688 0.93994 2.1548 2.7837 3.5195 1.8799 1.3288 4.6997 1.3288z" fill="url(%23linearGradient14812)"/><path d="m142.13 44.951q-0.25306 3.2322-1.663 5.6743-1.3738 2.4421-3.8682 3.8068-2.4583 1.3288-6.0373 1.3288-4.0128 0-6.8327-1.7598-2.7837-1.7957-4.2297-4.7765t-1.4461-6.644q0-2.6935 0.79534-5.0638 0.83149-2.4062 2.4222-4.2019 1.5907-1.7957 3.9044-2.8013 2.3499-1.0415 5.3866-1.0415 5.0974 0 7.9534 2.6935 2.8921 2.6576 3.4706 7.1827h-4.2298q-0.18075-1.2211-0.65072-2.3344-0.46997-1.1133-1.3015-1.9752-0.83148-0.89784-2.133-1.4006-1.2653-0.50279-3.109-0.50279-2.8198 0-4.6997 1.3288-1.8799 1.3288-2.7837 3.4836-0.90379 2.1548-0.90379 4.6328 0 2.5139 0.9038 4.6688 0.9038 2.1548 2.7837 3.5195 1.8799 1.3288 4.6997 1.3288 1.9883 0 3.326-0.57462 1.3738-0.61053 2.2414-1.6161 0.86763-1.0056 1.3014-2.2626 0.43382-1.2929 0.54228-2.6935z" fill="url(%23linearGradient14810)"/><path d="m145.65 30.047h3.9767v25.139h-3.9767z" fill="url(%23linearGradient14816)"/><path d="m161.17 30.047h3.7959l-7.8088 25.139h-4.1574zm5.4227 0 8.351 25.139h-4.1574l-7.9895-25.139zm-9.6163 15.874h13.629v3.4477h-13.629z" fill="url(%23linearGradient14818)"/><path d="m177.79 30.047h3.9767v25.139h-3.9767zm3.109 21.692h12.111v3.4477h-12.111z" fill="url(%23linearGradient14820)"/></g></svg>') !important;
}

/* Hide Mastodon's logo assets (logo-specific only, not general icons). */
.logo-resources,
.logo-resources *,
svg.logo.logo--wordmark,
svg.logo.logo--icon,
svg.logo--wordmark,
svg.logo--icon,
.logo--wordmark,
.logo--icon,
.logo-container svg.logo,
.logo-container svg.logo--wordmark,
.logo-container svg.logo--icon,
.logo-container img[alt="Mastodon"],
.logo-container [title="Mastodon"],
.brand__logo svg.logo,
.brand__logo svg.logo--wordmark,
.brand__logo svg.logo--icon,
.brand__logo img[alt="Mastodon"],
.brand__logo [title="Mastodon"],
.navigation-panel__logo svg.logo,
.navigation-panel__logo svg.logo--wordmark,
.navigation-panel__logo svg.logo--icon,
.navigation-panel__logo img[alt="Mastodon"],
.navigation-panel__logo [title="Mastodon"],
.compose-panel__logo svg.logo,
.compose-panel__logo svg.logo--wordmark,
.compose-panel__logo svg.logo--icon,
.compose-panel__logo img[alt="Mastodon"],
.compose-panel__logo [title="Mastodon"],
.mobile-header__logo svg.logo,
.mobile-header__logo svg.logo--wordmark,
.mobile-header__logo svg.logo--icon,
.mobile-header__logo img[alt="Mastodon"],
.mobile-header__logo [title="Mastodon"],
.drawer__inner__mastodon svg.logo,
.drawer__inner__mastodon svg.logo--wordmark,
.drawer__inner__mastodon svg.logo--icon,
.drawer__inner__mastodon img[alt="Mastodon"],
.drawer__inner__mastodon [title="Mastodon"],
use[href="#logo-symbol-wordmark"],
use[xlink\:href="#logo-symbol-wordmark"],
use[href="#logo-symbol-icon"],
use[xlink\:href="#logo-symbol-icon"] {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  max-width: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  width: 0 !important;
}

/* Prevent double-rendering on nested logo descendants. */
.logo-container *,
.brand__logo *,
.navigation-panel__logo *,
.compose-panel__logo *,
.mobile-header__logo *,
.drawer__inner__mastodon * {
  background-image: none !important;
}

/* Paint the PrivacySafe logo on the visible wrapper containers only. */
.logo-container,
.brand__logo,
.navigation-panel__logo,
.compose-panel__logo,
.mobile-header__logo {
  background-image: var(--logo) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  display: block !important;
  min-height: 44px !important;
  min-width: 160px !important;
}

/* Drawer logo holder, only when it actually holds a Mastodon logo. */
.drawer__inner__mastodon:has(svg.logo),
.drawer__inner__mastodon:has(.logo--wordmark),
.drawer__inner__mastodon:has(img[alt="Mastodon"]),
.drawer__inner__mastodon:has([title="Mastodon"]) {
  background-image: var(--logo) !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  min-height: 44px !important;
}

/* Public / sign-in logo: larger, centered. */
.public-layout .logo-container,
.public-layout .brand__logo,
body:not(.app-body) .logo-container,
body:not(.app-body) .brand__logo {
  background-position: center center !important;
  min-height: 82px !important;
  min-width: min(300px, 82vw) !important;
  width: min(300px, 82vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* App / sidebar logos: compact. */
body.app-body .logo-container,
body.app-body .brand__logo,
body.app-body .navigation-panel__logo,
body.app-body .compose-panel__logo,
body.app-body .mobile-header__logo {
  background-position: left center !important;
  min-height: 44px !important;
  min-width: 160px !important;
  width: 160px !important;
}

/* Give an empty logo link a visible box for the background. */
.logo-container a,
.brand__logo a,
.navigation-panel__logo a,
.compose-panel__logo a,
.mobile-header__logo a {
  display: block !important;
  height: 44px !important;
  min-height: 44px !important;
  min-width: 160px !important;
  width: 160px !important;
}

.public-layout .logo-container a,
.public-layout .brand__logo a,
body:not(.app-body) .logo-container a,
body:not(.app-body) .brand__logo a {
  height: 82px !important;
  min-height: 82px !important;
  min-width: min(300px, 82vw) !important;
  width: min(300px, 82vw) !important;
}


/* =========================================================================
   13. FOOTER
   Utility links blue; cleaned to "Mastodon: Shortcuts · Source · vX" (smaller).
   ========================================================================= */

._ui_components_link_footer__list a,
._ui_components_link_footer__list a span,
._ui_components_link_footer__list a:visited,
.link-footer ._ui_components_link_footer__list a,
.link-footer ._ui_components_link_footer__list a span,
.link-footer ._ui_components_link_footer__list a:visited,
section ._ui_components_link_footer__list a,
section ._ui_components_link_footer__list a span,
section ._ui_components_link_footer__list a:visited {
  color: #C6613F !important;
  text-decoration-color: #C6613F !important;
}

._ui_components_link_footer__list a:hover,
._ui_components_link_footer__list a:focus,
._ui_components_link_footer__list a:hover span,
._ui_components_link_footer__list a:focus span,
.link-footer ._ui_components_link_footer__list a:hover,
.link-footer ._ui_components_link_footer__list a:focus,
section ._ui_components_link_footer__list a:hover,
section ._ui_components_link_footer__list a:focus {
  color: #C6613F !important;
  text-decoration-color: #C6613F !important;
  text-decoration-line: underline !important;
  text-decoration-style: dotted !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}

._ui_components_link_footer__heading,
._ui_components_link_footer__version,
.link-footer ._ui_components_link_footer__heading,
.link-footer ._ui_components_link_footer__version {
  color: #FAF9F5 !important;
}

/* The Mastodon footer line layout + relabeling. */
footer._ui_components_link_footer__wrapper {
  margin-top: auto !important;
  padding: 16px 0 0 0 !important;
}

footer._ui_components_link_footer__wrapper section {
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
}

footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) {
  color: #FAF9F5 !important;
  display: block !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__heading {
  color: #FAF9F5 !important;
  display: inline !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  padding: 0 !important;
}

footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__heading::after {
  content: " " !important;
  display: inline !important;
}

footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__list,
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__list li {
  display: inline !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide About + Get the app in the Mastodon footer. */
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__list li:has(a[href="https://joinmastodon.org"]),
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__list li:has(a[href="https://joinmastodon.org/apps"]) {
  display: none !important;
}

/* Clear Mastodon's default separators in this section. */
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__list li::before,
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__list li::after,
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__list a::before,
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__list a::after {
  content: none !important;
  display: none !important;
}

/* Relabel: Keyboard shortcuts -> Shortcuts */
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) a[href="/keyboard-shortcuts"] {
  color: transparent !important;
  display: inline !important;
  font-size: 0 !important;
  text-decoration: none !important;
}

footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) a[href="/keyboard-shortcuts"]::after {
  color: #C6613F !important;
  content: "Shortcuts" !important;
  display: inline !important;
  font-size: 12px !important;
  text-decoration: underline !important;
  text-decoration-color: #C6613F !important;
}

/* Relabel: View source code -> Source */
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) a[href="https://github.com/mastodon/mastodon"] {
  color: transparent !important;
  display: inline !important;
  font-size: 0 !important;
  text-decoration: none !important;
}

footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) a[href="https://github.com/mastodon/mastodon"]::after {
  color: #C6613F !important;
  content: "Source" !important;
  display: inline !important;
  font-size: 12px !important;
  text-decoration: underline !important;
  text-decoration-color: #C6613F !important;
  margin-right: 0 !important;
}

footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) ._ui_components_link_footer__version {
  color: #FAF9F5 !important;
  display: inline !important;
  font-size: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Separators before Source and before the version. */
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__list li:has(a[href="https://github.com/mastodon/mastodon"])::before,
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__list li:has(._ui_components_link_footer__version)::before,
footer._ui_components_link_footer__wrapper section:has(a[href="/keyboard-shortcuts"]) > ._ui_components_link_footer__list li._ui_components_link_footer__version::before {
  color: #FAF9F5 !important;
  content: " · " !important;
  display: inline !important;
  font-size: 12px !important;
}


/* =========================================================================
   14. COMPOSE PANEL LAYOUT
   Full-height column so the footer sits at the bottom, composer stays visible.
   ========================================================================= */

.columns-area__panels__pane:has(.compose-panel),
.columns-area__panels__pane__inner:has(.compose-panel) {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

.compose-panel {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

.compose-panel > form.search,
.compose-panel > form.compose-form {
  flex: 0 0 auto !important;
}

/* The account header (NavigationBar: avatar + display name + @handle) sits
   between the search field and the compose box. It was the one flex child not
   pinned, so on shorter viewports the column squeezed it and the margin under
   the handle collapsed. Pin it and restore the gap above the compose box. */
.compose-panel .navigation-bar {
  flex: 0 0 auto !important;
}

.compose-panel .compose-form__highlightable {
  margin-top: 12px !important;
}

/* Keep the composer visible (a prior version of this file accidentally hid it). */
.compose-panel > form.compose-form,
form.compose-form[role="region"][aria-label="New Post"] {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  opacity: 1 !important;
  overflow: visible !important;
  pointer-events: auto !important;
  position: static !important;
  visibility: visible !important;
  width: auto !important;
}

.compose-panel > footer._ui_components_link_footer__wrapper,
.compose-panel > [class*="link_footer"]:has(._ui_components_link_footer__heading),
.compose-panel > [class*="LinkFooter"]:has(._ui_components_link_footer__heading) {
  flex: 0 0 auto !important;
  margin-top: auto !important;
  width: 100% !important;
}

footer._ui_components_link_footer__wrapper {
  align-self: stretch !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
}


/* =========================================================================
   15. DESKTOP: HIDE THE SIDEBAR "NEW POST" LINK ONLY
   The link is a nested .column-link (href="/publish"), not a direct child of
   .navigation-panel, so the old "> a" rule never matched. Match it as a
   descendant and by its href. Scoping to .navigation-panel keeps the actual
   composer (form.compose-form aria-label="New Post" in .compose-panel) safe.
   Mobile (<=760px) is untouched by the media query, so the link stays there.
   ========================================================================= */

@media screen and (min-width: 761px) {
  .navigation-panel a[href="/publish"],
  .navigation-panel a[href$="/publish"],
  .navigation-panel a[href="/compose"],
  .navigation-panel a[href$="/compose"],
  .navigation-panel .column-link[href$="/publish"],
  .navigation-panel .column-link[href$="/compose"],
  .navigation-panel li:has(> a[href$="/publish"]),
  .navigation-panel li:has(> a[href$="/compose"]) {
    display: none !important;
  }
}


/* =========================================================================
   16. MOBILE BOTTOM NAVIGATION  (orange -> green)
   ========================================================================= */

@media screen and (max-width: 760px) {
  .ui__navigation-bar a,
  .ui__navigation-bar button:not(.button),
  .ui__navigation-bar .column-link,
  .ui__navigation-bar .tabs-bar__link,
  .bottom-navigation a,
  .bottom-navigation button:not(.button),
  .bottom-navigation .column-link,
  .bottom-navigation .tabs-bar__link,
  .navigation-bar a,
  .navigation-bar button:not(.button),
  .navigation-bar .column-link,
  .navigation-bar .tabs-bar__link {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #FB521F !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  .ui__navigation-bar a .icon,
  .ui__navigation-bar a svg,
  .bottom-navigation a .icon,
  .bottom-navigation a svg,
  .navigation-bar a .icon,
  .navigation-bar a svg {
    color: #FB521F !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  .ui__navigation-bar a:hover,
  .ui__navigation-bar a:focus,
  .ui__navigation-bar a:active,
  .ui__navigation-bar a.active,
  .ui__navigation-bar a[aria-current="page"],
  .bottom-navigation a:hover,
  .bottom-navigation a:focus,
  .bottom-navigation a:active,
  .bottom-navigation a.active,
  .bottom-navigation a[aria-current="page"],
  .navigation-bar a:hover,
  .navigation-bar a:focus,
  .navigation-bar a:active,
  .navigation-bar a.active,
  .navigation-bar a[aria-current="page"] {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #45DA64 !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  .ui__navigation-bar a:hover .icon,
  .ui__navigation-bar a.active .icon,
  .ui__navigation-bar a[aria-current="page"] .icon,
  .ui__navigation-bar a:hover svg,
  .ui__navigation-bar a.active svg,
  .ui__navigation-bar a[aria-current="page"] svg,
  .bottom-navigation a:hover .icon,
  .bottom-navigation a.active .icon,
  .bottom-navigation a[aria-current="page"] .icon,
  .navigation-bar a:hover .icon,
  .navigation-bar a.active .icon,
  .navigation-bar a[aria-current="page"] .icon,
  .navigation-bar a:hover svg,
  .navigation-bar a.active svg,
  .navigation-bar a[aria-current="page"] svg {
    color: #45DA64 !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }
}


/* =========================================================================
   17. PRIVACY DROPDOWN LABELS (compose visibility menu)
   Hide Mastodon's text, supply clearer wording.
   ========================================================================= */

.dropdown-button__label {
  text-transform: capitalize !important;
}

.privacy-dropdown__dropdown ul li .privacy-dropdown__option__content,
.privacy-dropdown__dropdown ul li .privacy-dropdown__option__additional {
  display: none !important;
}

.privacy-dropdown__dropdown ul li:nth-of-type(1) .privacy-dropdown__option__icon::after {
  color: #FAF9F5 !important;
  content: "Public: Anyone in the World" !important;
  font-weight: 400 !important;
  padding-left: 6px !important;
}

.privacy-dropdown__dropdown ul li:nth-of-type(2) .privacy-dropdown__option__icon::after {
  color: #FAF9F5 !important;
  content: "Quiet Public: Not in Search or Trends" !important;
  font-weight: 400 !important;
  padding-left: 6px !important;
}

.privacy-dropdown__dropdown ul li:nth-of-type(3) .privacy-dropdown__option__icon::after {
  color: #FAF9F5 !important;
  content: "Followers: Only Your Followers" !important;
  font-weight: 400 !important;
  padding-left: 6px !important;
}

.privacy-dropdown__dropdown ul li:nth-of-type(4) .privacy-dropdown__option__icon::after {
  color: #FAF9F5 !important;
  content: "Specific People: Users @ Mentioned" !important;
  font-weight: 400 !important;
  padding-left: 6px !important;
}


/* =========================================================================
   18. DIRECT MESSAGES (a.k.a. "Private mentions")
   - "Direct Message (...)" wording on DM post headers
   - Column title + nav item renamed
   - Nav coloring: neutral default, green hover, orange when active
   ========================================================================= */

.status__wrapper-direct .status__prepend > span {
  text-transform: capitalize !important;
}

.status__wrapper-direct .status__prepend > span::before {
  content: "Direct Message (" !important;
}

.status__wrapper-direct .status__prepend > span::after {
  content: ")" !important;
}

/* Column title: hide the original text, keep the icon, insert replacement. */
html:has(meta[name="initialPath"][content="/conversations"]) .column-header__title,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header__title *,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header h1,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header h1 *,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header h2,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header h2 *,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header button,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header button > span:not(.icon):not(.icon-wrapper),
html:has(meta[name="initialPath"][content="/conversations"]) .column-header [class*="title"],
.column-header:has(.icon-at) .column-header__title,
.column-header__title:has(.icon-at),
.column-header__title:has([class*="alternate_email"]),
.column-header__title:has([href*="/conversations"]),
.column-header button[aria-label="Private mentions"],
.column-header button[title="Private mentions"],
.column-header a[aria-label="Private mentions"],
.column-header a[title="Private mentions"] {
  font-size: 0 !important;
}

.column-header:has(.icon-at) .column-header__title .icon,
.column-header:has(.icon-at) .column-header__title svg,
.column-header__title:has(.icon-at) .icon,
.column-header__title:has(.icon-at) svg,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header .icon,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header svg,
.column-header button[aria-label="Private mentions"] .icon,
.column-header button[aria-label="Private mentions"] svg,
.column-header a[aria-label="Private mentions"] .icon,
.column-header a[aria-label="Private mentions"] svg {
  font-size: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
  width: 24px !important;
}

html:has(meta[name="initialPath"][content="/conversations"]) .column-header__title::after,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header h1::after,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header h2::after,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header button::after,
html:has(meta[name="initialPath"][content="/conversations"]) .column-header [class*="title"]::after,
.column-header:has(.icon-at) .column-header__title::after,
.column-header__title:has(.icon-at)::after,
.column-header__title:has([class*="alternate_email"])::after,
.column-header button[aria-label="Private mentions"]::after,
.column-header button[title="Private mentions"]::after,
.column-header a[aria-label="Private mentions"]::after,
.column-header a[title="Private mentions"]::after {
  color: #FAF9F5 !important;
  content: "Direct Messages (aka Private mentions)" !important;
  display: inline-block !important;
  font-size: 16px !important;
  line-height: 24px !important;
  margin-left: 8px !important;
  vertical-align: middle !important;
}

/* Nav item label. */
.navigation-panel a[href="/conversations"] span:not(.icon):not(.icon-wrapper),
.navigation-panel a[href*="/conversations"] span:not(.icon):not(.icon-wrapper),
.navigation-panel a[aria-label="Private mentions"] span:not(.icon):not(.icon-wrapper),
.navigation-panel a[title="Private mentions"] span:not(.icon):not(.icon-wrapper),
.drawer a[href="/conversations"] span:not(.icon):not(.icon-wrapper),
.drawer a[href*="/conversations"] span:not(.icon):not(.icon-wrapper),
.drawer a[aria-label="Private mentions"] span:not(.icon):not(.icon-wrapper),
.drawer a[title="Private mentions"] span:not(.icon):not(.icon-wrapper),
.mobile-menu a[href="/conversations"] span:not(.icon):not(.icon-wrapper),
.mobile-menu a[href*="/conversations"] span:not(.icon):not(.icon-wrapper),
.mobile-menu a[aria-label="Private mentions"] span:not(.icon):not(.icon-wrapper),
.mobile-menu a[title="Private mentions"] span:not(.icon):not(.icon-wrapper) {
  font-size: 0 !important;
}

.navigation-panel a[href="/conversations"] span:not(.icon):not(.icon-wrapper)::after,
.navigation-panel a[href*="/conversations"] span:not(.icon):not(.icon-wrapper)::after,
.navigation-panel a[aria-label="Private mentions"] span:not(.icon):not(.icon-wrapper)::after,
.navigation-panel a[title="Private mentions"] span:not(.icon):not(.icon-wrapper)::after,
.drawer a[href="/conversations"] span:not(.icon):not(.icon-wrapper)::after,
.drawer a[href*="/conversations"] span:not(.icon):not(.icon-wrapper)::after,
.drawer a[aria-label="Private mentions"] span:not(.icon):not(.icon-wrapper)::after,
.drawer a[title="Private mentions"] span:not(.icon):not(.icon-wrapper)::after,
.mobile-menu a[href="/conversations"] span:not(.icon):not(.icon-wrapper)::after,
.mobile-menu a[href*="/conversations"] span:not(.icon):not(.icon-wrapper)::after,
.mobile-menu a[aria-label="Private mentions"] span:not(.icon):not(.icon-wrapper)::after,
.mobile-menu a[title="Private mentions"] span:not(.icon):not(.icon-wrapper)::after {
  color: inherit !important;
  content: "Direct Messages" !important;
  font-size: 16px !important;
}

/* Nav coloring: behave like the other side-menu links. */
.navigation-panel a[href="/conversations"],
.navigation-panel a[href*="/conversations"],
.navigation-panel a[aria-label="Private mentions"],
.navigation-panel a[title="Private mentions"],
.drawer a[href="/conversations"],
.drawer a[href*="/conversations"],
.drawer a[aria-label="Private mentions"],
.drawer a[title="Private mentions"],
.mobile-menu a[href="/conversations"],
.mobile-menu a[href*="/conversations"],
.mobile-menu a[aria-label="Private mentions"],
.mobile-menu a[title="Private mentions"] {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #FAF9F5 !important;
}

.navigation-panel a[href="/conversations"] *,
.navigation-panel a[href*="/conversations"] *,
.drawer a[href="/conversations"] *,
.drawer a[href*="/conversations"] *,
.mobile-menu a[href="/conversations"] *,
.mobile-menu a[href*="/conversations"] * {
  color: #FAF9F5 !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.navigation-panel a[href="/conversations"]:hover,
.navigation-panel a[href="/conversations"]:focus,
.navigation-panel a[href*="/conversations"]:hover,
.navigation-panel a[href*="/conversations"]:focus,
.drawer a[href="/conversations"]:hover,
.drawer a[href="/conversations"]:focus,
.drawer a[href*="/conversations"]:hover,
.drawer a[href*="/conversations"]:focus,
.mobile-menu a[href="/conversations"]:hover,
.mobile-menu a[href="/conversations"]:focus,
.mobile-menu a[href*="/conversations"]:hover,
.mobile-menu a[href*="/conversations"]:focus {
  color: #45DA64 !important;
}

.navigation-panel a[href="/conversations"]:hover *,
.navigation-panel a[href="/conversations"]:focus *,
.navigation-panel a[href*="/conversations"]:hover *,
.navigation-panel a[href*="/conversations"]:focus *,
.drawer a[href="/conversations"]:hover *,
.drawer a[href="/conversations"]:focus *,
.mobile-menu a[href="/conversations"]:hover *,
.mobile-menu a[href="/conversations"]:focus * {
  color: #45DA64 !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.navigation-panel a[href="/conversations"].active,
.navigation-panel a[href="/conversations"][aria-current="page"],
.navigation-panel a[href*="/conversations"].active,
.navigation-panel a[href*="/conversations"][aria-current="page"],
.drawer a[href="/conversations"].active,
.drawer a[href="/conversations"][aria-current="page"],
.drawer a[href*="/conversations"].active,
.drawer a[href*="/conversations"][aria-current="page"],
.mobile-menu a[href="/conversations"].active,
.mobile-menu a[href="/conversations"][aria-current="page"],
.mobile-menu a[href*="/conversations"].active,
.mobile-menu a[href*="/conversations"][aria-current="page"] {
  color: #FB521F !important;
}

.navigation-panel a[href="/conversations"].active *,
.navigation-panel a[href="/conversations"][aria-current="page"] *,
.navigation-panel a[href*="/conversations"].active *,
.navigation-panel a[href*="/conversations"][aria-current="page"] *,
.drawer a[href="/conversations"].active *,
.drawer a[href*="/conversations"].active *,
.mobile-menu a[href="/conversations"].active *,
.mobile-menu a[href*="/conversations"].active * {
  color: #FB521F !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}


/* =========================================================================
   19. PRIVATE MENTIONS WARNING BANNER
   Targets Mastodon's real container (.follow_requests-unlocked_explanation).
   ========================================================================= */

.follow_requests-unlocked_explanation {
  background-color: #262624 !important;
  border: 1px solid #4A4A45 !important;
  border-left: 4px solid #FB521F !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: #FAF9F5 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  padding: 14px 16px !important;
}

/* Hide the original warning text (keep the Learn more link). */
.follow_requests-unlocked_explanation > span {
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.follow_requests-unlocked_explanation > span > span {
  display: none !important;
  font-size: 0 !important;
}

.follow_requests-unlocked_explanation::after,
.follow_requests-unlocked_explanation span::after,
.follow_requests-unlocked_explanation a::before,
.follow_requests-unlocked_explanation a::after {
  content: none !important;
  display: none !important;
}

.follow_requests-unlocked_explanation::before {
  color: #FB521F !important;
  content: "WARNING:" !important;
  display: inline !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  margin-right: 4px !important;
}

.follow_requests-unlocked_explanation > span::before {
  color: #FAF9F5 !important;
  content: 'Do not share sensitive information. Direct Messages (DMs) are called "Private Mentions" on Mastodon servers. DMs are not public but are NOT end-to-end encrypted. ' !important;
  display: inline !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.follow_requests-unlocked_explanation a,
.follow_requests-unlocked_explanation a:visited,
.follow_requests-unlocked_explanation a span {
  color: #C6613F !important;
  display: inline !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  text-decoration: underline !important;
  text-decoration-color: #C6613F !important;
}

/* Never let conversation/status cards render this banner. */
.conversation .follow_requests-unlocked_explanation,
.status .follow_requests-unlocked_explanation,
.status__wrapper .follow_requests-unlocked_explanation,
.item-list article .follow_requests-unlocked_explanation {
  display: none !important;
}


/* =========================================================================
   20. IDENTITY + SPARKLINE COLOR REFINEMENTS
   These intentionally override the orange identity rules in section 8.
   Each selector is prefixed with #mastodon (the app root id) so its ID-level
   specificity wins over section 8's class-only selectors regardless of order.
   ========================================================================= */

/* --- Display NAME (real name) = mustard, distinct from the orange handles ---
   The @handle, boosts label, etc. stay orange; only the bold name turns mustard. */
#mastodon .display-name__html,
#mastodon strong.display-name__html,
#mastodon .display-name strong,
#mastodon .display-name > bdi,
#mastodon .display-name__html * {
  color: #FAF9F5 !important;            /* mustard / goldenrod */
  text-decoration-color: #FAF9F5 !important;
}

#mastodon a:hover .display-name__html,
#mastodon a:focus .display-name__html,
#mastodon a:hover .display-name strong,
#mastodon a:focus .display-name strong,
#mastodon .display-name:hover .display-name__html,
#mastodon .display-name:focus .display-name__html {
  color: #E5E3DB !important;            /* lighter mustard on hover */
  text-decoration-color: #E5E3DB !important;
}

/* --- Post timestamp + visibility icon = footer light blue (#C6613F) --- */
#mastodon .status__relative-time,
#mastodon .status__relative-time a,
#mastodon .status__relative-time span,
#mastodon .status__relative-time time,
#mastodon .status__visibility-icon,
#mastodon .status__visibility-icon .icon,
#mastodon .status__visibility-icon svg,
#mastodon .notification .status__relative-time,
#mastodon .notification .status__relative-time a,
#mastodon .notification .status__relative-time span {
  color: #C6613F !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

#mastodon .status__relative-time:hover,
#mastodon .status__relative-time:focus,
#mastodon .status__relative-time a:hover,
#mastodon .status__relative-time a:focus,
#mastodon .notification .status__relative-time:hover,
#mastodon .notification .status__relative-time a:hover {
  color: #D97757 !important;            /* slightly lighter blue on hover */
}

/* --- Trending sparkline: bright green line with a translucent gray area fill
   underneath (matching the admin dashboard sparklines). Mastodon renders these
   as an SVG area path (carries fill-opacity) plus a stroked line path. The area
   path defaults to fill:none here, so we paint it gray; the gradient stops are
   set gray too in case a <linearGradient> is ever used. --- */
#mastodon .trends__item__sparkline path,
#mastodon .trends__item__sparkline polyline {
  stroke: #45DA64 !important;           /* green line on every stroked path */
}

/* Area path (the one with fill-opacity): translucent warm gray fill. */
#mastodon .trends__item__sparkline svg path[style*="fill-opacity"] {
  fill: #87857C !important;
  fill-opacity: 0.18 !important;
  stroke: none !important;
}

#mastodon .trends__item__sparkline linearGradient stop:first-child,
#mastodon .trends__item__sparkline defs stop:first-child,
#mastodon .trends__item__sparkline stop[offset="0"],
#mastodon .trends__item__sparkline stop:not([offset="1"]) {
  stop-color: #87857C !important;
  stop-opacity: 0.30 !important;
}

#mastodon .trends__item__sparkline linearGradient stop:last-child,
#mastodon .trends__item__sparkline defs stop:last-child,
#mastodon .trends__item__sparkline stop[offset="1"] {
  stop-color: #87857C !important;
  stop-opacity: 0.05 !important;
}


/* =========================================================================
   21. ADMIN / SETTINGS BACKEND PAGES (body.admin / .admin-wrapper)
   These server-rendered pages share the theme but have their own chrome.
   ========================================================================= */

/* Left sidebar menu links: footer light blue instead of the default green.
   (.admin-wrapper .sidebar beats the bare `a { color }` rule by specificity.) */
.admin-wrapper .sidebar nav a,
.admin-wrapper .sidebar nav a .icon,
.admin-wrapper .sidebar nav a svg {
  color: #C6613F !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.admin-wrapper .sidebar nav a:hover,
.admin-wrapper .sidebar nav a:focus {
  color: #D97757 !important;
}

/* The current page stays distinct (white) against the blue list. */
.admin-wrapper .sidebar nav a.selected,
.admin-wrapper .sidebar nav .selected > a,
.admin-wrapper .sidebar nav a.selected .icon,
.admin-wrapper .sidebar nav a.selected svg {
  color: #FAF9F5 !important;
}

/* Dashboard quick-access buttons: keep the orange fill, force white text/icons. */
.admin-wrapper .dashboard__quick-access,
.admin-wrapper .dashboard__quick-access span,
.admin-wrapper .dashboard__quick-access strong,
.admin-wrapper .dashboard__quick-access .icon,
.admin-wrapper .dashboard__quick-access svg {
  color: #FAF9F5 !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Settings content tabs (Branding / About / Registrations / ...): the selected
   tab has an orange fill and needs white text/icon; the rest stay blue links.
   Also force white text on the orange .btn action buttons (e.g. "Save changes"). */
.admin-wrapper .content__heading__tabs a.selected,
.admin-wrapper .content__heading__tabs a.selected .icon,
.admin-wrapper .content__heading__tabs a.selected svg,
.admin-wrapper .btn,
.admin-wrapper button.btn,
.admin-wrapper .button,
.admin-wrapper button.button {
  color: #FAF9F5 !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}


/* =========================================================================
   22. LOGGED-OUT SIGN-IN BANNER (public right-column promo)
   Hide the promotional copy and render the two auth links as themed pill
   buttons: Create account = primary orange, Login = secondary outline.
   ========================================================================= */

/* Hide the heading + paragraph copy, keep the two link buttons.
   NOTE: the plain selector is kept on its OWN rule so a browser that doesn't
   understand :has() can't invalidate the whole group and leave the text showing. */
.sign-in-banner p {
  display: none !important;
}

/* :has() fallback in case the container class ever differs: matches whatever
   element directly holds an auth button, then hides its paragraphs. */
:has(> a[href="/auth/sign_up"].button) > p,
:has(> a[href="/auth/sign_in"].button) > p {
  display: none !important;
}

/* Both links: full-width stacked pills (section 5 already gives them the pill
   shape/size; here we set block width and spacing). */
.sign-in-banner .button,
.sign-in-banner a[href="/auth/sign_up"],
.sign-in-banner a[href="/auth/sign_in"] {
  display: flex !important;
  width: 100% !important;
  margin-top: 10px !important;
}

/* Primary — Create account: orange, green on hover. */
.sign-in-banner a[href="/auth/sign_up"],
.sign-in-banner .button:not(.button-secondary) {
  background-color: #FB521F !important;
  border: 1px solid #FB521F !important;
  color: #FAF9F5 !important;
}

.sign-in-banner a[href="/auth/sign_up"]:hover,
.sign-in-banner a[href="/auth/sign_up"]:focus,
.sign-in-banner .button:not(.button-secondary):hover,
.sign-in-banner .button:not(.button-secondary):focus {
  background-color: #45DA64 !important;
  border-color: #45DA64 !important;
  color: #20201D !important;
}

/* Secondary — Login: transparent outline pill, green outline on hover. */
.sign-in-banner .button-secondary,
.sign-in-banner a[href="/auth/sign_in"] {
  background-color: transparent !important;
  border: 1px solid #4A4A45 !important;
  color: #FAF9F5 !important;
  box-shadow: none !important;
}

.sign-in-banner .button-secondary:hover,
.sign-in-banner .button-secondary:focus,
.sign-in-banner a[href="/auth/sign_in"]:hover,
.sign-in-banner a[href="/auth/sign_in"]:focus {
  background-color: transparent !important;
  border-color: #45DA64 !important;
  color: #45DA64 !important;
  box-shadow: none !important;
}

/* Hide the "<server> is one of the many independent Mastodon servers..." blurb
   in the logged-out left panel (server banner). */
.server-banner__introduction {
  display: none !important;
}


/* =========================================================================
   23. CENTER TIMELINE COLUMN
   Remove the thin left/right divider borders around the main column and give
   it a flat #1A1916 background. Applies on every page that uses the central
   column (home, notifications, profiles, lists, etc.). The inner surfaces
   (scrollable, statuses, headers, empty/loading states) are all painted so the
   whole column reads as one solid #1A1916 rather than letting Mastodon's own
   surface variables show through on certain pages.
   ========================================================================= */
.columns-area__panels__main,
.columns-area__panels__pane--main,
.columns-area__panels__main .columns-area,
.columns-area__panels__main .column,
.columns-area__panels__main .column > .scrollable,
.columns-area__panels__main .scrollable,
.columns-area__panels__main .scrollable__append,
.columns-area__panels__main .item-list,
.columns-area__panels__main .column-back-button,
.columns-area__panels__main .account__section-headline,
.columns-area__panels__main .notification,
.columns-area__panels__main .status,
.columns-area__panels__main .status__wrapper,
.columns-area__panels__main article,
.columns-area__panels__main .regeneration-indicator,
.columns-area__panels__main .empty-column-indicator,
.columns-area__panels__main .load-more {
  background-color: #1A1916 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
}

/* Belt-and-suspenders: drop any side border/shadow on the main pane wrapper. */
.columns-area__panels__main {
  border: 0 !important;
}


/* Relabel the settings sidebar back-link from "Back to Mastodon" to
   "Back to Timeline" (keeps the chevron icon, which is an SVG and so is
   unaffected by the font-size:0 used to drop the original text). */
.admin-wrapper .sidebar nav li#web > a,
body.admin .sidebar li#web > a,
.sidebar nav li#web > a {
  font-size: 0 !important;
}
.admin-wrapper .sidebar nav li#web > a .icon,
.admin-wrapper .sidebar nav li#web > a svg,
body.admin .sidebar li#web > a .icon,
body.admin .sidebar li#web > a svg,
.sidebar nav li#web > a .icon,
.sidebar nav li#web > a svg {
  font-size: initial !important;
}
.admin-wrapper .sidebar nav li#web > a::after,
body.admin .sidebar li#web > a::after,
.sidebar nav li#web > a::after {
  content: "Back to Timeline";
  font-size: 14px !important;
  margin-left: 6px;
  vertical-align: middle;
}

/* Settings/preferences backend: paint the main content panel #1A1916 to match
   the timeline column. Inputs/selects keep their own surface colors. */
body.admin .content-wrapper,
body.admin .content,
.admin-wrapper .content-wrapper,
.admin-wrapper .content {
  background-color: #1A1916 !important;
}

/* =========================================================================
   24. AUTOFILL FIELDS
   Browsers paint autofilled inputs with their own yellow background, which
   turns into an ugly olive on the dark theme. background-color is ignored on
   autofilled fields, so override via an inset box-shadow filling the field
   with the normal input grey, and force the text/caret colors.
   ========================================================================= */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #30302E inset !important;
  box-shadow: 0 0 0 1000px #30302E inset !important;
  -webkit-text-fill-color: #FAF9F5 !important;
  caret-color: #FAF9F5 !important;
  border-color: #4A4A45 !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

/* Keep the orange focus ring when an autofilled field is focused. */
input:-webkit-autofill:focus {
  border-color: #FB521F !important;
}


/* =========================================================================
   25. ALTERNATE ACCENT VARIABLES + DEFAULTS
   The bright orange (#FB521F) and green (#45DA64) remain the primary accents
   for buttons, menus and default highlights. These expose the clay orange
   as the alternate accent, plus a muted-green counterpart to it, for any spot
   where a softer accent reads better than the bright pair.
   ========================================================================= */
:root,
html,
body {
  --color-accent-clay: #C6613F !important;          /* clay (alternate accent) */
  --color-accent-clay-hover: #D97757 !important;
  --color-accent-sage: #5FA56B !important;            /* muted sage — green counterpart to the clay */
  --color-accent-sage-hover: #74B97F !important;
}

/* Text selection: bright brand orange highlight by default. */
::selection {
  background-color: rgba(251, 82, 31, 0.30) !important;
  color: #FAF9F5 !important;
}


/* =========================================================================
   26. CONTENT-WARNING / SPOILER BOXES
   Mastodon renders these (CW panels, "Long thread/N … Show more", filtered
   posts) with the brand-green "soft" background, which looks off in this warm
   theme. Give them a neutral warm surface + border with ivory text, and
   make the expand action the bright orange -> green (action, not a flat link).
   ========================================================================= */
.content-warning,
.status__content__spoiler-cw,
.status__wrapper--filtered,
.filtered-status {
  background-color: #262624 !important;
  border: 1px solid #4A4A45 !important;
  border-radius: 8px !important;
  color: #FAF9F5 !important;
}

.content-warning p,
.content-warning span,
.status__content__spoiler-cw p,
.status__content__spoiler-cw span {
  color: #FAF9F5 !important;
}

/* "Show more" / expand action inside these boxes: bright orange, green hover. */
.content-warning .link-button,
.status__content__spoiler-cw .link-button,
.status__wrapper--filtered .link-button,
.filtered-status .link-button {
  color: #FB521F !important;
}

.content-warning .link-button:hover,
.content-warning .link-button:focus,
.status__content__spoiler-cw .link-button:hover,
.status__content__spoiler-cw .link-button:focus,
.status__wrapper--filtered .link-button:hover,
.filtered-status .link-button:focus {
  color: #45DA64 !important;
}

/* Quoted-post boxes (the "Quoted a post by @user" bar and the quote container)
   also default to the brand-green soft fill — neutralize to the warm surface. */
.status__quote-author-button,
.status__quote,
.status__quoted,
.quoted-status,
.status__quote-author-button a {
  background-color: #262624 !important;
  border-color: #4A4A45 !important;
  color: #FAF9F5 !important;
}

.status__quote-author-button,
.status__quote,
.status__quoted,
.quoted-status {
  border: 1px solid #4A4A45 !important;
  border-radius: 8px !important;
}


/* =========================================================================
   27. ADMIN DASHBOARD SPARKLINES + CARD HOVER
   The dashboard counter cards flood brand-green on hover/focus, and the
   sparkline SVGs inherit the link's green currentColor (via section 10). Give
   the cards a warm neutral surface with a clay accent on hover, and recolor the
   graph line + area fill to clay. Scoped to the admin backend.
   ========================================================================= */
.admin-wrapper .dashboard__item,
.admin-wrapper .sparkline,
.admin-wrapper a.sparkline {
  background-color: #1A1916 !important;
  border: 1px solid #4A4A45 !important;
  border-radius: 8px !important;
  color: #FAF9F5 !important;
}

/* Hover/focus: subtle warm lift + clay accent border, NOT a green flood. */
.admin-wrapper a.sparkline:hover,
.admin-wrapper a.sparkline:focus,
.admin-wrapper .dashboard__item:hover,
.admin-wrapper .dashboard__item:focus-within {
  background-color: #262624 !important;
  border-color: #C6613F !important;
}

/* Sparkline graph: clay line + faint clay area (beats the section-10 svg rule).
   The area path carries fill-opacity; the line path carries fill:none. */
.admin-wrapper .sparkline__graph svg path[style*="fill-opacity"] {
  fill: #87857C !important;
  fill-opacity: 0.18 !important;
  stroke: none !important;
}

.admin-wrapper .sparkline__graph svg path[style*="fill: none"],
.admin-wrapper .sparkline__graph svg path[style*="fill:none"] {
  stroke: #45DA64 !important;
  fill: none !important;
}

/* Keep the big total readable; leave the +/- change chips to their semantics. */
.admin-wrapper .sparkline__value__total {
  color: #FAF9F5 !important;
}


/* =========================================================================
   28. DM THREAD LINE + SAVE/FLASH MESSAGES
   ========================================================================= */

/* Private-mentions / conversations page: the tall vertical thread line renders
   in brand green. Mute the brand border/thread tokens to gray within that
   column, and force any direct-wrapper left border to the muted gray. */
html:has(meta[name="initialPath"][content="/conversations"]) .columns-area__panels__main {
  --color-border-brand: #4A4A45 !important;
  --color-border-brand-soft: #4A4A45 !important;
  --color-thread-line: #4A4A45 !important;
}

html:has(meta[name="initialPath"][content="/conversations"]) .status__wrapper,
html:has(meta[name="initialPath"][content="/conversations"]) .status__wrapper-direct,
html:has(meta[name="initialPath"][content="/conversations"]) .conversation,
html:has(meta[name="initialPath"][content="/conversations"]) .item-list > article {
  border-left-color: #4A4A45 !important;
  border-inline-start-color: #4A4A45 !important;
}

/* Status thread connector line, wherever it appears, follows the gray token. */
.status__line,
.status__wrapper .status__line {
  background-color: #4A4A45 !important;
  border-color: #4A4A45 !important;
}

/* Save / flash messages: replace the flat brand-green fill with a warm neutral
   surface and a subtle sage success accent (clay for errors). */
.flash-message,
.flash-message.notice,
.admin-wrapper .flash-message,
.admin-wrapper .flash-message.notice {
  background-color: #1A1916 !important;
  border: 1px solid #4A4A45 !important;
  border-left: 4px solid #5FA56B !important;   /* sage = success */
  border-radius: 8px !important;
  color: #FAF9F5 !important;
  box-shadow: none !important;
}

.flash-message.notice strong,
.admin-wrapper .flash-message.notice strong {
  color: #5FA56B !important;
}

/* Error/alert flashes: warm surface with a clay accent instead. */
.flash-message.alert,
.admin-wrapper .flash-message.alert {
  background-color: #1A1916 !important;
  border: 1px solid #4A4A45 !important;
  border-left: 4px solid #C6613F !important;   /* clay = error */
  color: #FAF9F5 !important;
}

.flash-message.alert strong,
.admin-wrapper .flash-message.alert strong {
  color: #C6613F !important;
}


/* =========================================================================
   29. CALLOUT / INFO BOXES (settings "callout" asides)
   The settings info callout renders with a brand-green fill. Give it the warm
   neutral surface with a clay info accent, ivory text, and a clay
   highlight on its link/icon (matching the Claude clay buttons).
   ========================================================================= */
.callout,
aside.callout,
.admin-wrapper .callout,
.admin-wrapper aside.callout {
  background-color: #1A1916 !important;
  border: 1px solid #4A4A45 !important;
  border-left: 4px solid #C6613F !important;
  border-radius: 8px !important;
  color: #FAF9F5 !important;
  box-shadow: none !important;
}

.callout .title,
.callout p,
.callout .body,
.admin-wrapper .callout .title,
.admin-wrapper .callout p {
  color: #FAF9F5 !important;
}

.callout > .icon,
.callout > svg,
.admin-wrapper .callout > .icon,
.admin-wrapper .callout > svg {
  color: #C6613F !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.callout a,
.admin-wrapper .callout a {
  color: #C6613F !important;
}

.callout a:hover,
.callout a:focus,
.admin-wrapper .callout a:hover,
.admin-wrapper .callout a:focus {
  color: #D97757 !important;
}


/* =========================================================================
   30. HIDE MASTODON MASCOT / EMPTY-STATE ILLUSTRATIONS
   The empty-state panels (Collections, prepared home feed, etc.) show the
   Mastodon elephant illustration. Hide just the illustration image/figure;
   keep the heading, description, and any action button (its icon is nested in
   a <button>, so a direct-child svg rule won't touch it).
   ========================================================================= */
.empty-column-indicator img,
.empty-column-indicator picture,
.empty-column-indicator > svg,
.empty-column-indicator__figure,
.regeneration-indicator__figure,
.regeneration-indicator img,
.regeneration-indicator picture,
.regeneration-indicator > svg {
  display: none !important;
}


/* =========================================================================
   31. ABOUT PAGE — TRANSPARENT ADMIN ACCOUNT CARD
   The base surface rule (section 2) paints every .account with the panel
   color, which makes the "Administered by" account on the About page look
   like a boxed card. Make it transparent there only. Scope is the about-page
   -only .about / .about__meta containers (NOT initialPath, which would leak
   to .account elsewhere after in-app navigation).
   ========================================================================= */
.about .account,
.about .account__wrapper,
.about__meta .account,
.about__meta .account__wrapper,
.about__meta__column .account,
.about__meta__column .account__wrapper {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}