:root {
  --fr-bg: #000;
  --fr-panel: #0a0f12;
  --fr-hover: #101a20;
  --fr-input: #05090b;
  --fr-border: #203943;

  --fr-accent: #43bce0;
  --fr-text: #9be8ff;
  --fr-bio: #b5eeff;
  --fr-muted: #82b7c7;

  --fr-font: ui-monospace, "SFMono-Regular", "SF Mono", Menlo,
             Monaco, Consolas, "Liberation Mono", monospace;

  color-scheme: dark;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

html,
body,
.ui,
.app-body,
.columns-area,
.status__content,
.compose-form,
.navigation-panel,
.column,
.drawer,
button,
input,
textarea,
select {
  font-family: var(--fr-font) !important;
  font-size: 14px !important;
}

.status__content {
  line-height: 1.65 !important;
}


/* =========================================================
   GLOBAL TEXT COLOR
   ========================================================= */

/*
   Normal UI text.
   Specific muted/accent rules below override this where needed.
*/
html,
body,
body * {
  color: var(--fr-text) !important;
}


/* =========================================================
   MAIN BACKGROUNDS
   ========================================================= */

html,
body,
.app-body,
.ui,
.columns-area,
.columns-area__panels,
.column,
.scrollable,
.account,
.account__header,
.status,
.status__wrapper,
.detailed-status,
.notification {
  background-color: var(--fr-bg) !important;
}


/* =========================================================
   PANELS
   ========================================================= */

.navigation-panel,
.compose-panel,
.drawer,
.drawer__inner,
.column-header,
.column-back-button,
.tabs-bar,
.account__section-headline,
.link-footer,
.getting-started,
.card,
.trends__item,
.setting-toggle,
.rules-list,
.endorsements-widget,
.follow-recommendations {
  background-color: var(--fr-panel) !important;
  color: var(--fr-text) !important;
  border-color: var(--fr-border) !important;
  box-shadow: none !important;
}


/* =========================================================
   TIMELINE TEXT
   ========================================================= */

.status__content,
.status__content p,
.status__content span,
.display-name__html,
.account__display-name,
.notification__message,
.detailed-status__display-name,
.detailed-status__meta {
  color: var(--fr-text) !important;
}


/* =========================================================
   MUTED / SECONDARY TEXT
   ========================================================= */

.status__relative-time,
.display-name__account,
.muted,
.hint,
.help,
.form__appendix,
.fields-group__description,
.setting-text,
.setting-toggle__label {
  color: var(--fr-muted) !important;
  opacity: 1 !important;
}

.status__relative-time *,
.display-name__account *,
.muted *,
.hint *,
.help *,
.form__appendix *,
.fields-group__description *,
.setting-text *,
.setting-toggle__label * {
  color: var(--fr-muted) !important;
  opacity: 1 !important;
}


/* Mastodon generated CSS-module descriptions */
[class*="description"],
[class*="description"] *,
[class*="hint"],
[class*="hint"] * {
  color: var(--fr-muted) !important;
  opacity: 1 !important;
}


/* =========================================================
   LINKS
   ========================================================= */

a,
.status__content a,
.simple_form a,
.dropdown-menu a,
.modal-root a {
  color: var(--fr-accent) !important;
}

a:hover,
.status__content a:hover,
.simple_form a:hover,
.dropdown-menu a:hover,
.modal-root a:hover {
  color: var(--fr-text) !important;
}


/* =========================================================
   PROFILE
   ========================================================= */

[class*="comp_account_bio__bio"],
[class*="comp_account_bio__bio"] p,
[class*="comp_account_bio__bio"] span {
  color: var(--fr-bio) !important;
  opacity: 1 !important;
  font-family: var(--fr-font) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

[class*="comp_account_bio__bio"] a,
[class*="comp_account_bio__bio"] a span {
  color: var(--fr-accent) !important;
  text-decoration: underline !important;
}

[class*="comp_account_header__displayNameWrapper"],
[class*="comp_account_header__displayNameWrapper"] *,
[class*="comp_number_fields__list"],
[class*="comp_number_fields__list"] * {
  color: var(--fr-text) !important;
  opacity: 1 !important;
}


/* =========================================================
   ROLE LABELS
   ========================================================= */

.account__header__roles,
.account-role,
.account-badge,
.roles-list__item {
  background: var(--fr-panel) !important;
  color: var(--fr-accent) !important;
  border: 1px solid var(--fr-border) !important;
  box-shadow: none !important;
}


/* =========================================================
   COMPOSER
   ========================================================= */

.compose-form,
.compose-form__highlightable,
.compose-form__dropdowns,
.compose-form__footer,
.compose-form__actions,
.compose-form__buttons,
.compose-form__submit,
.compose-form__publish,
.compose-form__warning,
.compose-form__modifiers {
  background: var(--fr-bg) !important;
  color: var(--fr-text) !important;
  border-color: var(--fr-border) !important;
  box-shadow: none !important;
}

.compose-form textarea,
.compose-form input,
.compose-form__input,
.autosuggest-textarea,
.autosuggest-textarea__textarea,
.search__input,
input,
textarea,
select {
  background: var(--fr-input) !important;
  color: var(--fr-text) !important;
  border-color: var(--fr-border) !important;
  box-shadow: none !important;
}

.compose-form textarea,
.autosuggest-textarea__textarea {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--fr-muted) !important;
  opacity: 1 !important;
}


/* =========================================================
   BUTTONS / ACTIONS
   ========================================================= */

.button,
.button-secondary,
.text-btn,
.compose-form__publish button,
.compose-form__submit button,
.compose-form__dropdowns button,
.compose-form__buttons button,
.column-link,
.drawer__tab,
.tabs-bar__link,
.navigation-panel a,
.dropdown-menu__item,
.privacy-dropdown__option {
  background: var(--fr-panel) !important;
  color: var(--fr-accent) !important;
  border-color: var(--fr-border) !important;
  box-shadow: none !important;
}

.button:hover,
.button-secondary:hover,
.text-btn:hover,
.column-link:hover,
.drawer__tab:hover,
.tabs-bar__link:hover,
.dropdown-menu__item:hover,
.privacy-dropdown__option:hover {
  background: var(--fr-hover) !important;
  color: var(--fr-text) !important;
}

.icon-button {
  color: var(--fr-accent) !important;
}

.icon-button:hover,
.icon-button.active,
.tabs-bar__link.active,
.column-link.active {
  color: var(--fr-text) !important;
}


/* =========================================================
   SETTINGS / PREFERENCES
   ========================================================= */

.simple_form,
.simple_form p,
.simple_form li,
.simple_form label,
.simple_form legend,
.simple_form span,
.settings,
.settings *,
.fields-group,
.fields-group *,
.input,
.input *,
label,
legend,
fieldset,
fieldset *,
.setting-toggle,
.setting-toggle *,
.rules-list,
.rules-list * {
  color: var(--fr-text) !important;
}


/* Re-apply muted helper text after broad settings rule */
.simple_form .hint,
.simple_form .hint *,
.form__appendix,
.form__appendix *,
.fields-group__description,
.fields-group__description *,
.setting-text,
.setting-text *,
[class*="description"],
[class*="description"] *,
[class*="hint"],
[class*="hint"] * {
  color: var(--fr-muted) !important;
  opacity: 1 !important;
}


/* =========================================================
   MENUS / DROPDOWNS / MODALS
   ========================================================= */

.navigation-panel *,
.column-header *,
.drawer *,
.dropdown-menu,
.dropdown-menu *,
.modal-root,
.modal-root *,
.modal-root__container,
.modal-root__container *,
.dialog-modal,
.dialog-modal *,
.confirmation-modal,
.confirmation-modal *,
.report-modal,
.report-modal *,
.actions-modal,
.actions-modal *,
.tabs-bar *,
.account__section-headline *,
.card * {
  color: var(--fr-text) !important;
}


/* Menu and modal links stay accent-colored */
.dropdown-menu a,
.dropdown-menu a *,
.modal-root a,
.modal-root a *,
.navigation-panel a {
  color: var(--fr-accent) !important;
}


/* =========================================================
   FORM CONTROLS
   ========================================================= */

input,
textarea,
select,
option,
button {
  color: var(--fr-text) !important;
}

option {
  background: var(--fr-input) !important;
}


/* =========================================================
   HEADINGS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 *,
strong,
b {
  color: var(--fr-text) !important;
}


/* =========================================================
   NOTICES / INFO PANELS
   ========================================================= */

.dismissable-banner,
.dismissable-banner__message,
.explanation-box,
.info-panel,
.notice,
.notice__message,
.server-banner,
.information-badge,
.announcements__item {
  background: var(--fr-panel) !important;
  color: var(--fr-text) !important;
  border-color: var(--fr-border) !important;
  box-shadow: none !important;
}

.dismissable-banner *,
.explanation-box *,
.info-panel *,
.notice *,
.server-banner *,
.information-badge * {
  color: var(--fr-text) !important;
}

.dismissable-banner a,
.explanation-box a,
.info-panel a,
.notice a {
  color: var(--fr-accent) !important;
}


/* =========================================================
   TABLES / ADMIN / SETTINGS LISTS
   ========================================================= */

table,
thead,
tbody,
tfoot,
tr,
th,
td,
table *,
thead *,
tbody *,
tfoot *,
tr *,
th *,
td * {
  color: var(--fr-text) !important;
}

th,
thead {
  border-color: var(--fr-border) !important;
}

td,
tr {
  border-color: var(--fr-border) !important;
}


/* =========================================================
   CHECKBOX / RADIO LABELS
   ========================================================= */

.checkbox,
.checkbox *,
.radio_button,
.radio_button *,
.boolean,
.boolean *,
label.checkbox,
label.radio_button {
  color: var(--fr-text) !important;
}


/* =========================================================
   FLASH / ALERT / WARNING TEXT
   ========================================================= */

.flash-message,
.flash-message *,
.alert,
.alert *,
.warning,
.warning *,
.error,
.error * {
  color: var(--fr-text) !important;
}


/* =========================================================
   SELECTION / FOCUS
   ========================================================= */

::selection {
  background: rgba(67, 188, 224, .84);
  color: #000 !important;
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--fr-accent) !important;
  outline-offset: 2px;
}


/* =========================================================
   FINAL MASTODON TEXT SAFETY NET
   ========================================================= */

/*
   Mastodon 4.7 React/CSS-module components can use generated
   class names. These rules catch common textual components
   without touching SVG paths/icons.
*/

[class*="label"],
[class*="label"] span