/* FRWHL Terminal — Mastodon 4.7.x | Replace the entire Custom CSS */
: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: inherit into descendants, without replacing icon fonts */
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;
}
.status__content { line-height: 1.65; }

/* Black main surfaces */
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;
}

/* Dark 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 and navigation text */
.status__content, .status__content p, .display-name__html,
.account__display-name, .notification__message {
  color: var(--fr-text) !important;
}
.status__relative-time, .display-name__account, .muted {
  color: var(--fr-muted) !important;
}
a, .status__content a { color: var(--fr-accent) !important; }
a:hover, .status__content a:hover { color: var(--fr-text) !important; }
.status, .notification, .detailed-status { border-color: var(--fr-border) !important; }

/* Mastodon 4.7 CSS Modules — verified profile selectors */
[class*="comp_account_bio__bio"],
[class*="comp_account_bio__bio"] p,
[class*="comp_account_bio__bio"] span {
  color: var(--fr-bio) !important;
  -webkit-text-fill-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;
  -webkit-text-fill-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;
  -webkit-text-fill-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: eliminate bright backgrounds */
.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 {
  -webkit-text-fill-color: var(--fr-text) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
input::placeholder, textarea::placeholder {
  color: var(--fr-muted) !important;
  opacity: 1 !important;
}

/* Buttons, menus, 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 {
  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;
}

/* Notices and 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;
}

/* Selection and keyboard focus */
::selection { background: rgba(67,188,224,.84); color: #000; }
:where(a,button,input,textarea,select):focus-visible {
  outline: 2px solid var(--fr-accent) !important;
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .status__content, .compose-form textarea,
  [class*="comp_account_bio__bio"] { font-size: 14px !important; }
}


