/* Aguilera Lab — portal network background (CSP-safe external stylesheet) */

:root {
  --aguilera-cyan: #70d1f4;
  --aguilera-violet: #a658ff;
  --aguilera-night: #070b14;
  --aguilera-text: #e8eef8;
  --aguilera-muted: #c5d0e4;
  --color-text: #e8eef8 !important;
  --color-secondary: #c5d0e4 !important;
  --primary-text-color: #e8eef8 !important;
  --secondary-text-color: #c5d0e4 !important;
  --highlight-text-color: #70d1f4 !important;
  --darker-text-color: #c5d0e4 !important;
  --darkest-text-color: #e8eef8 !important;
}

html {
  background-color: #070b14 !important;
  color-scheme: dark;
}

body {
  background: transparent !important;
  color: #e8eef8 !important;
}

/* Force readable light text over dark canvas (theme-system / mastodon-light defaults to black) */
body.app-body,
.app-holder,
.public-layout,
.about,
.about__section,
.about__section *,
.about__section__body,
.about__section__body *,
.about-body,
.about__meta,
.about__meta *,
.about__header,
.about__header *,
.landing,
.ui,
.compose-panel,
.prose,
.prose *,
.e-content,
.e-content *,
.status__content,
.status__content *,
h1, h2, h3, h4, h5, h6, p, li, label, dt, dd, small, strong, span, time {
  color: #e8eef8 !important;
}

/* Light dialogs/modals must stay dark text (override global light colors).
   Mastodon 4.3 logout uses .safety-action-modal (NOT .confirmation-modal) — exclude it. */
.modal-root__modal:not(.confirmation-modal):not(.safety-action-modal),
.interaction-modal,
.copypaste-modal,
.report-modal,
.actions-modal,
.list-editor,
.list-adder,
.dropdown-menu,
.dropdown-menu__container,
[role='menu'] {
  color: #17181c !important;
}
.interaction-modal h1,
.interaction-modal h2,
.interaction-modal h3,
.interaction-modal p,
.interaction-modal span,
.interaction-modal strong,
.interaction-modal small,
.interaction-modal bdi,
.interaction-modal__lead,
.interaction-modal__lead *,
.dropdown-menu,
.dropdown-menu *,
.dropdown-menu__item,
.dropdown-menu__item a,
.dropdown-menu__item button,
[role='menu'],
[role='menu'] * {
  color: #17181c !important;
}
.interaction-modal a {
  color: #5856f2 !important;
}
.interaction-modal .button,
.interaction-modal .button * {
  color: #070b14 !important;
}
.modal-root {
  z-index: 200000 !important;
}
.dropdown-menu {
  z-index: 200001 !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
}

/* Mastodon 4.3 confirmation (logout etc.) = .safety-action-modal — FORCE light text */
.safety-action-modal,
.modal-root__modal.safety-action-modal,
.modal-root .safety-action-modal,
.confirmation-modal,
.modal-root .confirmation-modal {
  color: #e8eef8 !important;
  -webkit-text-fill-color: #e8eef8 !important;
}

.safety-action-modal__top,
.safety-action-modal__bottom,
.safety-action-modal__confirmation,
.safety-action-modal__actions,
.modal-root__modal.safety-action-modal .safety-action-modal__top,
.modal-root__modal.safety-action-modal .safety-action-modal__bottom {
  background: rgba(7, 11, 20, 0.96) !important;
  background-color: rgba(7, 11, 20, 0.96) !important;
  border-color: rgba(232, 238, 248, 0.18) !important;
  color: #e8eef8 !important;
}

.safety-action-modal h1,
.safety-action-modal h2,
.safety-action-modal p,
.safety-action-modal span,
.safety-action-modal strong,
.safety-action-modal small,
.safety-action-modal bdi,
.safety-action-modal__confirmation,
.safety-action-modal__confirmation *,
.safety-action-modal__header,
.safety-action-modal__header *,
.safety-action-modal__actions,
.modal-root__modal.safety-action-modal h1,
.modal-root__modal.safety-action-modal p,
.modal-root__modal.safety-action-modal span,
.modal-root__modal.safety-action-modal strong,
.modal-root .safety-action-modal h1,
.modal-root .safety-action-modal p,
.modal-root .safety-action-modal span,
.modal-root .safety-action-modal strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Annuler = .link-button inside safety-action-modal */
.safety-action-modal .link-button,
.safety-action-modal button.link-button,
.safety-action-modal a:not(.button),
.modal-root__modal.safety-action-modal .link-button,
.modal-root .safety-action-modal .link-button {
  color: #e8eef8 !important;
  -webkit-text-fill-color: #e8eef8 !important;
  background: transparent !important;
  background-color: transparent !important;
  opacity: 1 !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

.safety-action-modal .link-button:hover,
.safety-action-modal button.link-button:hover {
  color: #70d1f4 !important;
  -webkit-text-fill-color: #70d1f4 !important;
}

/* Primary confirm button */
.safety-action-modal .button,
.safety-action-modal .button *,
.safety-action-modal__actions .button,
.safety-action-modal__actions .button *,
.modal-root__modal.safety-action-modal .button,
.modal-root__modal.safety-action-modal .button * {
  color: #070b14 !important;
  -webkit-text-fill-color: #070b14 !important;
  background: #70d1f4 !important;
  background-color: #70d1f4 !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  opacity: 1 !important;
}

/* SAFETY-ACTION FINAL — beat any residual dialog * { color:#17181c } */
.modal-root__modal.safety-action-modal,
.modal-root__modal.safety-action-modal *:not(.button):not(button.button),
.safety-action-modal,
.safety-action-modal h1,
.safety-action-modal p,
.safety-action-modal .link-button {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.safety-action-modal .link-button:hover {
  color: #70d1f4 !important;
  -webkit-text-fill-color: #70d1f4 !important;
}
.modal-root__modal.safety-action-modal .button,
.modal-root__modal.safety-action-modal .button *,
.safety-action-modal .button,
.safety-action-modal .button * {
  color: #070b14 !important;
  -webkit-text-fill-color: #070b14 !important;
  background: #70d1f4 !important;
  background-color: #70d1f4 !important;
}

.about__section a,
.about__meta a,
.about__mail,
.prose a,
.e-content a,
.server-banner a {
  color: #70d1f4 !important;
}

/* Left column: drop intro text so hero sits just under search */
.server-banner__introduction {
  display: none !important;
}

.server-banner__hero,
a:has(> .server-banner__hero) {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

/* Left brand image: 900×300 (3:1) — match aspect so logo+title are not cropped.
   Mastodon default .server-banner__hero uses aspect-ratio:1.9 + object-fit:cover. */
.server-banner__hero,
a:has(> .server-banner__hero) {
  aspect-ratio: 3 / 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  object-fit: contain !important;
}
.server-banner__hero {
  background-image: url('/custom/left-banner.png') !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #070b14 !important;
}
.server-banner__hero img,
.server-banner__hero .image__preview,
.server-banner__hero canvas {
  opacity: 0 !important;
  visibility: hidden !important;
}

.server-banner,
.server-banner__description,
.server-banner__description *,
.server-banner__meta,
.server-banner__meta h4,
.server-banner__number,
.server-banner__number-label,
.compose-panel .server-banner,
.compose-panel .server-banner__description {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 12px rgba(7, 11, 20, 0.9);
}

/* Account names in banner/meta must stay light (theme-system often forces near-black) */
.server-banner .account,
.server-banner .account__display-name,
.server-banner .display-name,
.server-banner .display-name__html,
.server-banner .display-name__account,
.server-banner .display-name b,
.server-banner .display-name strong,
.about__meta .account,
.about__meta .account__display-name,
.about__meta .display-name,
.about__meta .display-name__html,
.about__meta .display-name b,
.about__meta .display-name strong,
.about__header,
.about__header h1,
.about__header p,
.about .prose,
.about .prose *,
.about__section__body,
.about__section__body * {
  color: #ffffff !important;
}

.server-banner .display-name__account,
.about__meta .display-name__account,
.about__mail {
  color: #70d1f4 !important;
}

/* Readable plate behind description over animated canvas */
.server-banner__description {
  padding: 10px 12px !important;
  border-radius: 8px;
  background: rgba(7, 11, 20, 0.72) !important;
}

.server-banner__meta {
  padding: 8px 10px !important;
  border-radius: 8px;
  background: rgba(7, 11, 20, 0.55) !important;
}

/* Tighten gap under search so hero sits close */
.compose-panel .search {
  margin-bottom: 8px !important;
}
.compose-panel .server-banner {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Hide footer link rows (instance + Mastodon) — keep app chrome working */
.link-footer,
.getting-started__footer {
  display: none !important;
}

/* About: hide "Serveurs modérés" (3rd about__section = 5th div child) */
.scrollable.about > .about__section:nth-of-type(5),
.about > .about__section:nth-of-type(5) {
  display: none !important;
}

/* About: hide Mastodon gGmbH trademark line */
.about__footer {
  display: none !important;
}

/* Solid-enough panels so UI stays readable over the animated canvas */
.column > .scrollable,
.getting-started,
.getting-started__wrapper,
.drawer__inner,
.drawer__inner__mastodon,
.about__section,
.about__meta,
.search-results__header,
.account-card,
.directory__card,
.landing-page__forms,
.public-layout .header,
.account__section-headline,
.empty-column-indicator,
.scrollable {
  background: rgba(7, 11, 20, 0.82) !important;
}

/* ===== Profile page contrast (beat mastodon-light #000 / #292938) ===== */
.column-back-button,
.column-back-button span,
.column-back-button .icon,
.column-back-button svg,
.column-back-button svg path {
  color: #e8eef8 !important;
  fill: #e8eef8 !important;
}
.column-back-button:hover,
.column-back-button:hover span {
  color: #70d1f4 !important;
}

.account__header__tabs__name h1,
.account__header__tabs__name h1 span,
.account__header__tabs__name .display-name__html {
  color: #ffffff !important;
}
.account__header__tabs__name h1 small,
.account__header__tabs__name h1 small span,
.account__header__tabs__name h1 small .invisible {
  color: #e8eef8 !important;
}

.account__header__extra__links,
.account__header__extra__links a,
.account__header__extra__links a span,
.account__header__extra__links a strong,
.account__header__extra__links a strong span {
  color: #e8eef8 !important;
}
.account__header__extra__links a:hover,
.account__header__extra__links a:hover span,
.account__header__extra__links a:hover strong {
  color: #70d1f4 !important;
}

.account__header__fields,
.account__header__fields dt,
.account__header__fields dd,
.account__header__fields a,
.account__header__bio,
.account__header__bio p,
.account__header__bio span {
  color: #e8eef8 !important;
}

.account-role,
.account-role__domain,
.account__header__badges .account-role {
  color: #70d1f4 !important;
  border-color: rgba(112, 209, 244, 0.45) !important;
}

.account__domain-pill {
  color: #70d1f4 !important;
}

/* Profile banner: extend into avatar overlap — no black gap under image */
.account__header {
  background: transparent !important;
  overflow: visible !important;
}
.account__header__image {
  background: transparent !important;
  border-bottom: 0 !important;
  overflow: hidden !important;
  height: 300px !important;
  max-height: none !important;
  aspect-ratio: unset !important;
  line-height: 0 !important;
  font-size: 0 !important;
}
.account__header__image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  /* Keep left logo+wordmark visible when column is taller than 3:1 */
  object-position: left center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  vertical-align: top !important;
}
.account__header__bar {
  background: transparent !important;
  border-top: 0 !important;
  margin-top: 0 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
/* Pull avatar/tabs up so banner bottom ~ mid-avatar */
.account__header__tabs {
  margin-top: -110px !important;
  padding-top: 10px !important;
}
.account__header__extra,
.account__header__bio,
.account__header__tabs__name {
  position: relative;
  z-index: 1;
}

/* Profile action buttons — high contrast glass pills */
.account__header__tabs__buttons {
  position: relative;
  z-index: 5;
  gap: 8px !important;
}
.account__header__tabs__buttons .icon-button,
.account__header__tabs__buttons .copyable {
  color: #e8eef8 !important;
  background: rgba(7, 11, 20, 0.72) !important;
  border: 1px solid rgba(232, 238, 248, 0.42) !important;
  border-radius: 999px !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.account__header__tabs__buttons .icon-button .icon,
.account__header__tabs__buttons .icon-button svg,
.account__header__tabs__buttons .icon-button svg path,
.account__header__tabs__buttons .copyable svg,
.account__header__tabs__buttons .copyable svg path {
  color: #e8eef8 !important;
  fill: #e8eef8 !important;
  opacity: 1 !important;
}
.account__header__tabs__buttons .icon-button:hover,
.account__header__tabs__buttons .copyable:hover {
  background: rgba(112, 209, 244, 0.22) !important;
  border-color: rgba(112, 209, 244, 0.7) !important;
  color: #70d1f4 !important;
}
/* Disabled Mastodon menu (empty for logged-out) — keep clickable via JS helper */
.account__header__tabs__buttons .icon-button.disabled,
.account__header__tabs__buttons .icon-button[disabled] {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Profile tabs: inactive light, active brand cyan */
.account__section-headline a,
.account__section-headline button,
.notification__filter-bar a,
.notification__filter-bar button {
  color: #c5d0e4 !important;
}
.account__section-headline a.active,
.account__section-headline button.active,
.notification__filter-bar a.active,
.notification__filter-bar button.active {
  color: #70d1f4 !important;
}

/* ===== Explore / timelines / statuses — light text on glass panels ===== */
.status,
.status *,
.status__wrapper,
.status__wrapper *,
.status__info,
.status__info *,
.status__content,
.status__content *,
.status__content p,
.status__content span,
.e-content,
.e-content *,
.status__display-name,
.status__display-name *,
.display-name,
.display-name__html,
.display-name__account,
.display-name b,
.display-name strong,
.status__relative-time,
.status__info__relative-time,
time.time-ago,
.status-card,
.status-card *,
.detailed-status,
.detailed-status *,
.detailed-status__display-name,
.detailed-status__meta,
.detailed-status__meta *,
.account,
.account .display-name__html,
.account .display-name__account,
.load-more,
.empty-column-indicator,
.empty-column-indicator *,
.scrollable > div,
.explore__search-header,
.trends__item,
.trends__item *,
.story,
.story *,
.dismissable-banner,
.dismissable-banner *,
.dismissable-banner__message,
.dismissable-banner__action,
.regeneration-indicator,
.regeneration-indicator * {
  color: #e8eef8 !important;
}

.display-name__account,
.status .display-name__account,
.account .display-name__account {
  color: #c5d0e4 !important;
}

.status .icon-button,
.status .icon-button .icon,
.status .icon-button svg,
.status__action-bar .icon-button,
.status__action-bar .icon-button svg,
.status__action-bar .icon-button svg path,
.detailed-status__action-bar .icon-button,
.detailed-status__action-bar .icon-button svg {
  color: #c5d0e4 !important;
  fill: #c5d0e4 !important;
}
.status .icon-button:hover,
.status .icon-button:hover svg,
.status__action-bar .icon-button:hover {
  color: #70d1f4 !important;
  fill: #70d1f4 !important;
}

.status__content a,
.e-content a,
.status-card a,
.detailed-status a {
  color: #70d1f4 !important;
}

/* After global link styles: keep inactive profile tabs muted */
.account__section-headline a:not(.active),
.account__section-headline button:not(.active),
.notification__filter-bar a:not(.active),
.notification__filter-bar button:not(.active) {
  color: #c5d0e4 !important;
}
.account__section-headline a.active,
.account__section-headline button.active,
.notification__filter-bar a.active,
.notification__filter-bar button.active {
  color: #70d1f4 !important;
}

/* Right column: dark glass panel + light logo/links over animated network */
.columns-area__panels__pane--right .columns-area__panels__pane__inner,
.columns-area__panels__pane:last-child .columns-area__panels__pane__inner {
  background: transparent !important;
}

.navigation-panel {
  padding: 14px 12px !important;
  border-radius: 14px;
  background: rgba(7, 11, 20, 0.9) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(232, 238, 248, 0.14);
  box-sizing: border-box;
}

/* Mastodon logo: dark glass pill + white pastille + wordmark */
.navigation-panel__logo {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}
.navigation-panel__logo .column-link--logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 48px !important;
  padding: 6px 16px 6px 6px !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  background: rgba(7, 11, 20, 0.72) !important;
  border: 1px solid rgba(232, 238, 248, 0.18) !important;
  box-shadow:
    0 0 0 1px rgba(112, 209, 244, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.35) !important;
  overflow: visible !important;
  text-decoration: none !important;
}
.navigation-panel__logo .column-link--logo svg,
.navigation-panel__logo .logo,
.navigation-panel__logo svg.logo--wordmark {
  display: none !important;
}
.navigation-panel__logo .column-link--logo::before {
  content: "" !important;
  display: block !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #ffffff url("/custom/mastodon-logo.svg") center / 22px no-repeat !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 0 1px rgba(232, 238, 248, 0.12) !important;
}
.navigation-panel__logo .column-link--logo::after {
  content: "Mastodon" !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  color: #e8eef8 !important;
  -webkit-text-fill-color: #e8eef8 !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.navigation-panel__logo .aguilera-mastodon-wordmark {
  color: #e8eef8 !important;
  -webkit-text-fill-color: #e8eef8 !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

/* ===== About page: square (1:1) center branding — full image, no crop ===== */
.about__header__hero {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  max-width: min(100%, 520px) !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: hidden !important;
  background: #070b14 !important;
  border-radius: 12px !important;
  line-height: 0 !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.about__header__hero img {
  display: block !important;
  position: relative !important;
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  border-radius: 12px !important;
}
.about__header__hero .image__preview {
  display: none !important;
}

.navigation-panel .column-link,
.navigation-panel .column-link span,
.navigation-panel .column-link__icon,
.navigation-panel .icon,
.navigation-panel .column-link svg {
  color: #e8eef8 !important;
  fill: #e8eef8 !important;
}

.navigation-panel .column-link:hover,
.navigation-panel .column-link:focus,
.navigation-panel .column-link.active {
  color: #70d1f4 !important;
}

/* Classic→advanced interface banner (pale by default) → dark glass */
.navigation-panel__banner,
.switch-to-advanced {
  background: rgba(7, 11, 20, 0.88) !important;
  background-color: rgba(7, 11, 20, 0.88) !important;
  color: #e8eef8 !important;
  border: 1px solid rgba(112, 209, 244, 0.22) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(10px);
}

.switch-to-advanced,
.switch-to-advanced * {
  color: #e8eef8 !important;
}

.switch-to-advanced__toggle,
.switch-to-advanced a,
.navigation-panel__banner a {
  color: #70d1f4 !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

.switch-to-advanced__toggle:hover,
.switch-to-advanced a:hover,
.navigation-panel__banner a:hover {
  color: #a658ff !important;
}

.navigation-panel__sign-in-banner,
.sign-in-banner {
  background: rgba(7, 11, 20, 0.55) !important;
  border-radius: 10px;
  padding: 12px !important;
}

.sign-in-banner p,
.sign-in-banner p *,
.navigation-panel__sign-in-banner p,
.navigation-panel__sign-in-banner p * {
  color: #e8eef8 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* Do not invert account avatars (Gravatar) if present in nav */
.navigation-panel .account__avatar,
.navigation-panel .account__avatar img {
  filter: none !important;
}

.column-header,
.tabs-bar__wrapper,
.search {
  background: rgba(7, 11, 20, 0.88) !important;
}

/* ===== Left compose / search: dark glass (not white mastodon-light) ===== */
.compose-panel,
.compose-panel > *,
.drawer__inner,
.columns-area__panels__pane--start .columns-area__panels__pane__inner {
  background: transparent !important;
}

.compose-form,
.compose-form__highlightable,
.compose-form .compose-form__autosuggest-wrapper,
.compose-form__buttons-wrapper,
.compose-form__footer,
.search,
.search__input,
.compose-panel .search {
  background: rgba(7, 11, 20, 0.88) !important;
  color: #e8eef8 !important;
  border-color: rgba(232, 238, 248, 0.16) !important;
  box-shadow: none !important;
}

.compose-form {
  border-radius: 14px !important;
  border: 1px solid rgba(232, 238, 248, 0.14) !important;
  overflow: hidden !important;
  backdrop-filter: blur(12px);
}

.compose-form__highlightable,
.compose-form .autosuggest-textarea,
.compose-form .autosuggest-textarea__textarea,
.compose-form textarea,
.compose-form input[type="text"],
.compose-form .compose-form__poll-wrapper input {
  background: transparent !important;
  background-color: transparent !important;
  color: #e8eef8 !important;
  -webkit-text-fill-color: #e8eef8 !important;
  caret-color: #70d1f4 !important;
}

.search__input {
  background: rgba(7, 11, 20, 0.88) !important;
  background-color: rgba(7, 11, 20, 0.88) !important;
  color: #e8eef8 !important;
  -webkit-text-fill-color: #e8eef8 !important;
  caret-color: #70d1f4 !important;
  border: 1px solid rgba(232, 238, 248, 0.16) !important;
  border-radius: 10px !important;
}

.compose-form .autosuggest-textarea__textarea::placeholder,
.compose-form textarea::placeholder,
.search__input::placeholder,
.compose-form .spoiler-input__input::placeholder {
  color: rgba(232, 238, 248, 0.45) !important;
  -webkit-text-fill-color: rgba(232, 238, 248, 0.45) !important;
  opacity: 1 !important;
}

.compose-form__buttons-wrapper,
.compose-form__publish,
.compose-form__publish-button-wrapper {
  background: rgba(7, 11, 20, 0.92) !important;
  border-top: 1px solid rgba(232, 238, 248, 0.1) !important;
}

.compose-form .icon-button,
.compose-form .icon-button .icon,
.compose-form .icon-button svg,
.compose-form .icon-button svg path,
.compose-form .dropdown-button,
.compose-form .dropdown-button *,
.compose-form .character-counter,
.compose-form .privacy-dropdown__value,
.compose-form .privacy-dropdown__value * {
  color: #c5d0e4 !important;
  fill: #c5d0e4 !important;
}

.compose-form .icon-button:hover,
.compose-form .icon-button.active,
.compose-form .icon-button.active svg,
.compose-form .icon-button.active svg path {
  color: #70d1f4 !important;
  fill: #70d1f4 !important;
}

/* Keep Publier as brand cyan pill with dark label */
.compose-form__publish-button-wrapper .button,
.compose-form .button.button--block,
.compose-form button.button {
  background: #70d1f4 !important;
  background-color: #70d1f4 !important;
  color: #070b14 !important;
  -webkit-text-fill-color: #070b14 !important;
  border-radius: 999px !important;
}

.compose-form .account__avatar,
.compose-form .account__avatar img {
  filter: none !important;
}

.search .fa,
.search .icon,
.search svg {
  color: #c5d0e4 !important;
  fill: #c5d0e4 !important;
}

/* Buttons — solid brand, pill shape (include Devise .btn — not only .button) */
.button,
.button-alternative-2,
button.button,
a.button,
.btn,
button.btn,
.simple_form button,
.simple_form .btn,
.simple_form .button,
.actions button,
.actions .btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: none !important;
  background: #70d1f4 !important;
  background-color: #70d1f4 !important;
  color: #070b14 !important;
  -webkit-text-fill-color: #070b14 !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.button span,
.button *,
.button-alternative-2 span,
.button-alternative-2 *,
button.button span,
button.button *,
a.button span,
a.button *,
.btn span,
.btn *,
.simple_form button span,
.simple_form button * {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  border-radius: 0 !important;
}
.button:hover,
.button-alternative-2:hover,
button.button:hover,
a.button:hover,
.btn:hover,
button.btn:hover,
.simple_form button:hover,
.actions button:hover {
  background-image: none !important;
  background: #5bc4ea !important;
  background-color: #5bc4ea !important;
  filter: none !important;
  color: #070b14 !important;
  -webkit-text-fill-color: #070b14 !important;
}

.button.button-secondary,
.button-tertiary,
a.button.button-secondary,
a.button.button-tertiary,
.button.button--block.button-tertiary,
.sign-in-banner .button.button-tertiary,
.sign-in-banner a.button.button-tertiary,
.navigation-panel__sign-in-banner .button.button-tertiary {
  background-image: none !important;
  background: rgba(11, 18, 32, 0.92) !important;
  background-color: rgba(11, 18, 32, 0.92) !important;
  /* Must override .button { -webkit-text-fill-color:#070b14 } or label stays invisible on dark */
  color: #e8eef8 !important;
  -webkit-text-fill-color: #e8eef8 !important;
  border: 1px solid rgba(232, 238, 248, 0.45) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.button.button-secondary span,
.button.button-secondary *,
.button-tertiary span,
.button-tertiary *,
a.button.button-secondary span,
a.button.button-secondary *,
a.button.button-tertiary span,
a.button.button-tertiary *,
.sign-in-banner .button.button-tertiary,
.sign-in-banner .button.button-tertiary * {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  color: #e8eef8 !important;
  -webkit-text-fill-color: #e8eef8 !important;
}
.button.button-secondary:hover,
.button-tertiary:hover,
a.button.button-secondary:hover,
a.button.button-tertiary:hover,
.sign-in-banner .button.button-tertiary:hover,
.button.button-secondary:focus,
.button-tertiary:focus,
a.button.button-secondary:focus,
a.button.button-tertiary:focus {
  background: rgba(20, 30, 48, 0.96) !important;
  background-color: rgba(20, 30, 48, 0.96) !important;
  border-color: rgba(112, 209, 244, 0.55) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Fixed behind UI — must not occupy document flow */
#aguilera-scene {
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
}

#aguilera-scene canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

#aguilera-scene .aguilera-aurora {
  position: absolute;
  inset: -25%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 45% at 18% 28%, rgba(112, 209, 244, 0.42), transparent 58%),
    radial-gradient(ellipse 48% 50% at 82% 22%, rgba(166, 88, 255, 0.4), transparent 58%),
    radial-gradient(ellipse 55% 42% at 50% 90%, rgba(100, 140, 255, 0.28), transparent 62%);
  filter: blur(10px);
  animation: aguilera-aurora 12s ease-in-out infinite alternate;
}

#aguilera-scene .aguilera-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Keep light — heavy vignette made UI text unreadable over the canvas */
  background: linear-gradient(
    180deg,
    rgba(7, 11, 20, 0.08) 0%,
    rgba(7, 11, 20, 0.18) 50%,
    rgba(7, 11, 20, 0.45) 100%
  );
}

/* Keep Mastodon chrome above the fixed background (do not trap modals/dropdowns) */
#aguilera-scene {
  z-index: 0 !important;
}
#mastodon,
.app-holder,
.public-layout,
.ui,
.admin-wrapper,
body.admin .content-wrapper,
body.admin .content {
  position: relative;
  z-index: 1;
}

/* Settings/admin: never cover Save with the floating apps control */
body.admin #aguilera-apps,
body.admin #aguilera-scene {
  display: none !important;
}

/* Auth lead hidden without inline style (CSP) */
.aguilera-auth-lead-hidden {
  display: none !important;
}

/* Public profile ⋯ menu — CSS-only positioning (CSP blocks element.style) */
.aguilera-menu-host {
  position: relative !important;
}
.aguilera-public-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 200001 !important;
  min-width: 220px !important;
  padding: 6px 0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
}
.aguilera-public-menu__item {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding: 10px 14px !important;
  border: 0 !important;
  background: transparent !important;
  color: #17181c !important;
  -webkit-text-fill-color: #17181c !important;
  font: 500 14px/1.3 inherit !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  min-height: 0 !important;
}
.aguilera-public-menu__item:hover,
.aguilera-public-menu__item:focus-visible {
  background: rgba(112, 209, 244, 0.15) !important;
}

/* Floating Mastodon apps download (replaces footer "Get the app" link) */
#aguilera-apps {
  position: fixed !important;
  right: 18px;
  bottom: 18px;
  z-index: 9999 !important;
  width: 52px;
  height: 52px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(11, 18, 32, 0.92);
  border: 1px solid rgba(112, 209, 244, 0.45);
  box-shadow:
    0 0 0 1px rgba(166, 88, 255, 0.15),
    0 10px 28px rgba(0, 0, 0, 0.45);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  pointer-events: auto !important;
}

#aguilera-apps:hover,
#aguilera-apps:focus-visible {
  transform: translateY(-2px) scale(1.04);
  border-color: rgba(166, 88, 255, 0.7);
  box-shadow:
    0 0 0 1px rgba(112, 209, 244, 0.25),
    0 14px 32px rgba(0, 0, 0, 0.5);
  outline: none;
}

#aguilera-apps img {
  width: 28px;
  height: 28px;
  display: block;
  pointer-events: none;
}

@keyframes aguilera-aurora {
  0% {
    transform: translate3d(-3%, -2%, 0) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translate3d(3%, 3%, 0) scale(1.12);
    opacity: 1;
  }
  100% {
    transform: translate3d(2%, -3%, 0) scale(1.06);
    opacity: 0.95;
  }
}

@media (prefers-reduced-motion: reduce) {
  #aguilera-scene .aguilera-aurora {
    animation: none !important;
  }
  #aguilera-scene canvas {
    display: none !important;
  }
  #aguilera-apps {
    transition: none !important;
  }
}

@media (max-width: 640px) {
  #aguilera-apps {
    right: 12px;
    bottom: 12px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }
  #aguilera-apps img {
    width: 24px;
    height: 24px;
  }
}

/* ===== Auth / Devise login — keep submit + footer visible on dark canvas ===== */
.container-alt,
.form-container,
.simple_form,
#new_user,
.actions,
.form-footer {
  position: relative !important;
  z-index: 2 !important;
}

.simple_form .title,
.simple_form h1.title,
.simple_form .lead,
.simple_form label,
.simple_form .hint,
.form-footer,
.form-footer li,
.form-footer a {
  color: #e8eef8 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.form-footer a {
  color: #70d1f4 !important;
  text-decoration: underline !important;
}

.form-footer a:hover {
  color: #ffffff !important;
}

#new_user .actions,
.simple_form .actions {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-top: 16px !important;
}

#new_user button.btn,
#new_user button[type="submit"],
.simple_form button.btn,
.simple_form button[type="submit"],
.actions .btn,
.actions button[type="submit"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: block !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 12px 22px !important;
  margin: 0 0 12px !important;
  background: #70d1f4 !important;
  background-color: #70d1f4 !important;
  background-image: none !important;
  color: #070b14 !important;
  -webkit-text-fill-color: #070b14 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 24px rgba(7, 11, 20, 0.45) !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  position: relative !important;
  z-index: 3 !important;
}

#new_user button.btn:hover,
#new_user button[type="submit"]:hover,
.simple_form button.btn:hover,
.actions .btn:hover {
  background: #5bc4ea !important;
  background-color: #5bc4ea !important;
  color: #070b14 !important;
  -webkit-text-fill-color: #070b14 !important;
}

/* Inputs readable on dark auth pages */
.simple_form input[type="email"],
.simple_form input[type="password"],
.simple_form input[type="text"],
.simple_form input.string,
.simple_form input.password {
  background: rgba(7, 11, 20, 0.82) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(232, 238, 248, 0.35) !important;
  border-radius: 10px !important;
  caret-color: #70d1f4 !important;
}

/* ===== Auth brand: Aguilera Lab instead of Mastodon wordmark ===== */
.logo-container {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 1.25rem !important;
}

.logo-container > h1[hidden],
.logo-container .logo.logo--wordmark,
.logo-container svg.logo {
  display: none !important;
}

.aguilera-auth-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-decoration: none !important;
  color: #ffffff !important;
  padding: 4px 0 !important;
}

.aguilera-auth-brand:hover,
.aguilera-auth-brand:focus-visible {
  text-decoration: none !important;
  color: #ffffff !important;
  opacity: 0.95 !important;
}

.aguilera-auth-brand__logo {
  width: 48px !important;
  height: 48px !important;
  display: block !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

.aguilera-auth-brand__text {
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.15 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45) !important;
}

#new_user h1.title,
.simple_form h1.title {
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  color: #e8eef8 !important;
  margin-bottom: 1.25rem !important;
}

#new_user p.lead[hidden],
.simple_form p.lead[hidden] {
  display: none !important;
}