:root {
  --aguilera-cyan: #70d1f4;
  --aguilera-violet: #a658ff;
  --aguilera-night: #070b14;
  --color-text: #e8eef8 !important;
  --color-secondary: #c5d0e4 !important;
  --primary-text-color: #e8eef8 !important;
  --secondary-text-color: #c5d0e4 !important;
  --color-border: rgba(232, 238, 248, 0.18) !important;
}
html {
  background: #070b14 !important;
  color-scheme: dark;
}
body {
  background: transparent !important;
  --brand-color: #70d1f4;
  --background-color: transparent;
  --background-color-tint: rgba(7, 11, 20, 0.55);
}
/* Readable light text over dark animated background */
body,
body.app-body,
.app-holder,
.public-layout,
.about,
.about__section,
.about__section__body,
.about-body,
.about__meta,
.about__header,
.landing,
.ui,
.compose-panel,
.prose,
.e-content,
.status__content,
h1, h2, h3, h4, h5, h6, p, li, label, dt, dd {
  color: #e8eef8 !important;
}
.prose *,
.about__section__body *,
.e-content *,
.status__content * {
  color: #e8eef8 !important;
}
/* Left column server banner — hide intro so hero sits 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: simple logo+title via /custom (center uses site thumbnail) */
.server-banner__hero, a:has(> .server-banner__hero) { aspect-ratio: 3 / 1 !important; height: auto !important; max-height: none !important; overflow: visible !important; }
  .server-banner__hero {
    background-image: url('/custom/left-banner.png') !important;
    background-size: 100% 100% !important;
  background-position: 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);
}
.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;
}
.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;
}
.compose-panel .search {
  margin-bottom: 8px !important;
}
.compose-panel .server-banner {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.about a,
.about__section a,
.about__meta a,
.about__mail,
.prose a,
.e-content a,
.server-banner a {
  color: #70d1f4 !important;
}
.about a:hover,
.prose a:hover,
.server-banner a:hover {
  color: #a658ff !important;
}
/* Hide link-footer rows (About / Directory / Privacy + Mastodon links) */
.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;
}
/* Keep UI above portal canvas */
#mastodon,
.app-holder,
.public-layout,
.ui,
.columns-area__panels,
.columns-area,
header,
nav,
main,
footer {
  position: relative;
  z-index: 1;
}
.app-holder,
.ui,
.columns-area__panels,
.columns-area__panels__pane__inner,
.column,
.public-layout,
.public-layout .container,
.landing-page,
.about-body,
.about__meta,
#mastodon {
  background: transparent !important;
}
.column > .scrollable,
.getting-started,
.getting-started__wrapper,
.drawer__inner,
.drawer__inner__mastodon,
.about__section,
.search-results__header,
.account-card,
.directory__card {
  background: rgba(7, 11, 20, 0.72) !important;
}
/* Right column readability over animated network */
.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;
}

.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;
}
.navigation-panel__sign-in-banner,
.sign-in-banner {
  background: rgba(7, 11, 20, 0.45) !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;
}
.navigation-panel .account__avatar,
.navigation-panel .account__avatar img {
  filter: none !important;
}
.column-header,
.tabs-bar__wrapper,
.account__header__bar,
.search,
.compose-form,
.detailed-status,
.status,
.account {
  backdrop-filter: blur(6px);
}



/* Profile: beat mastodon-light black text */
.column-back-button,
.column-back-button span,
.column-back-button svg,
.column-back-button svg path {
  color: #e8eef8 !important;
  fill: #e8eef8 !important;
}
.account__header__tabs__name h1,
.account__header__tabs__name h1 span { color: #ffffff !important; }
.account__header__tabs__name h1 small,
.account__header__tabs__name h1 small span { 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-role, .account-role__domain { color: #70d1f4 !important; }


.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,
.column-link--active,
.tabs-bar__link.active { color: #70d1f4 !important; }
/* Statuses / explore */
.status, .status *, .status__content, .status__content *,
.display-name__html, .display-name__account, .detailed-status, .detailed-status *,
.empty-column-indicator, .empty-column-indicator *,
small, strong { color: #e8eef8 !important; }
.display-name__account { color: #c5d0e4 !important; }
.status .icon-button, .status .icon-button svg { color: #c5d0e4 !important; fill: #c5d0e4 !important; }
.landing .hero-welcome,
.hero-welcome,
.public-layout .header,
.about-header {
  background:
    radial-gradient(ellipse 50% 45% at 18% 28%, rgba(112, 209, 244, 0.18), transparent 58%),
    radial-gradient(ellipse 48% 50% at 82% 22%, rgba(166, 88, 255, 0.16), transparent 58%),
    transparent !important;
}
a { color: #70d1f4 !important; }
a:hover { color: #a658ff !important; }
/* Keep inactive profile tabs muted after global link color */
.account__section-headline a:not(.active),
.account__section-headline button:not(.active) { color: #c5d0e4 !important; }
.account__section-headline a.active,
.account__section-headline button.active { color: #70d1f4 !important; }

.dismissable-banner, .dismissable-banner *, .dismissable-banner__message { color: #e8eef8 !important; }




/* About hero full image + Mastodon logo pill */


.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; 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;
}
.navigation-panel__logo .column-link--logo svg,
.navigation-panel__logo .logo { display: none !important; filter: 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;
}
.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; font-size: 1.05rem !important; font-weight: 700 !important;
}

.about__header__hero {
  aspect-ratio: 1 / 1 !important; width: 100% !important; max-width: min(100%, 520px) !important;
  height: auto !important; max-height: none !important; margin-left: auto !important; margin-right: auto !important;
  overflow: hidden !important; background: #070b14 !important; border-radius: 12px !important; line-height: 0 !important;
}
.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; border-radius: 12px !important;
}




/* Solid pill buttons — override any leftover gradients */
.button, .button-alternative-2, button.button, a.button {
  background-image: none !important;
  background: #70d1f4 !important;
  background-color: #70d1f4 !important;
  color: #070b14 !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.button span, .button *, button.button *, a.button * {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  color: inherit !important;
}
.button.button-secondary, .button-tertiary,
a.button.button-secondary, a.button.button-tertiary {
  background-image: none !important;
  background: rgba(11, 18, 32, 0.92) !important;
  color: #e8eef8 !important;
  border: 1px solid rgba(232, 238, 248, 0.32) !important;
  border-radius: 999px !important;
}
.button.button-secondary *, .button-tertiary *,
a.button.button-secondary *, a.button.button-tertiary * {
  background: transparent !important;
  background-image: none !important;
  color: #e8eef8 !important;
}

/* Profile banner overlap — no black gap */





.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;
}
.account__header__image img {
  width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center 35% !important;
}
.account__header__bar {
  background: transparent !important; border-top: 0 !important; margin-top: 0 !important; backdrop-filter: none !important;
}
.account__header__tabs { margin-top: -110px !important; padding-top: 10px !important; }

/* Modals/dropdowns: dark text on light surfaces */
.interaction-modal, .dropdown-menu, [role=menu] { color: #17181c !important; }
/* modal-root generic text removed — see confirmation-modal */
.interaction-modal h3, .interaction-modal p, .interaction-modal span, .interaction-modal strong, .interaction-modal bdi,
.dropdown-menu, .dropdown-menu *, [role=menu] *, .interaction-modal, .interaction-modal * { color: #17181c !important; }
.modal-root a, .interaction-modal a { color: #5856f2 !important; }
.modal-root { z-index: 200000 !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; opacity: 1 !important; pointer-events: auto !important;
}
.account__header__tabs__buttons .icon-button svg, .account__header__tabs__buttons .icon-button svg path { fill: #e8eef8 !important; color: #e8eef8 !important; }
.account__header__tabs__buttons .icon-button.disabled, .account__header__tabs__buttons .icon-button[disabled] {
  opacity: 1 !important; pointer-events: auto !important; cursor: pointer !important;
}

/* Auth login .btn (Devise) — must stay visible on dark canvas */
.btn, button.btn, .simple_form button, .actions button, #new_user button {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #70d1f4 !important;
  background-color: #70d1f4 !important;
  color: #070b14 !important;
  -webkit-text-fill-color: #070b14 !important;
  border: 0 !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  display: block !important;
  min-height: 44px !important;
}
.form-footer a { color: #70d1f4 !important; }
.simple_form .title, .simple_form .lead, .simple_form label { color: #e8eef8 !important; }

/* Compose dark glass */
.compose-form, .compose-form__highlightable, .compose-form__buttons-wrapper, .search, .search__input {
  background: rgba(7,11,20,0.88) !important; color: #e8eef8 !important;
}
.compose-form .autosuggest-textarea__textarea, .compose-form textarea, .search__input {
  background: transparent !important; color: #e8eef8 !important; -webkit-text-fill-color: #e8eef8 !important;
}
.compose-form__publish-button-wrapper .button, .compose-form .button {
  background: #70d1f4 !important; color: #070b14 !important; -webkit-text-fill-color: #070b14 !important;
}

/* Classic interface banner → 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;
}
.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;
}




/* Mastodon 4.3 logout = .safety-action-modal (NOT .confirmation-modal) */
.modal-root__modal:not(.safety-action-modal):not(.confirmation-modal) { /* light-modal host only */ }
.safety-action-modal,
.modal-root__modal.safety-action-modal,
.safety-action-modal__top,
.safety-action-modal__bottom,
.safety-action-modal__confirmation,
.safety-action-modal__confirmation *,
.safety-action-modal h1,
.safety-action-modal p,
.safety-action-modal span,
.safety-action-modal strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.safety-action-modal__top,
.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;
}
.safety-action-modal .link-button,
.safety-action-modal button.link-button {
  color: #e8eef8 !important;
  -webkit-text-fill-color: #e8eef8 !important;
  background: transparent !important;
  text-decoration: underline !important;
}
.safety-action-modal .button,
.safety-action-modal .button * {
  color: #070b14 !important;
  -webkit-text-fill-color: #070b14 !important;
  background: #70d1f4 !important;
  background-color: #70d1f4 !important;
}

/* SAFETY-ACTION FINAL */
.modal-root__modal.safety-action-modal,
.modal-root__modal.safety-action-modal *,
.safety-action-modal,
.safety-action-modal *:not(.button):not(.button *) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.safety-action-modal .link-button,
.safety-action-modal button.link-button {
  color: #e8eef8 !important;
  -webkit-text-fill-color: #e8eef8 !important;
}
.safety-action-modal .button,
.safety-action-modal .button * {
  color: #070b14 !important;
  -webkit-text-fill-color: #070b14 !important;
  background: #70d1f4 !important;
  background-color: #70d1f4 !important;
}