:root {
    --primary-color: #1d0427; 
    --secondary-color: #13ed9a;
    --dropdown-border-color: #320640;
    --dropdown-background-color: rgba(29,4,39,.9);
    --modal-background-color: rgba(29,4,39,.7);
    --modal-background-variant-color: rgba(46,7,48,.7);
    --modal-border-color: #320640;
    --background-border-color: #320640;
    --background-color: #1d0427; 
    --background-color-tint: rgba(29,4,39,.9);
    --surface-background-color: #260635;
    --surface-variant-background-color: #320640;
    --surface-variant-active-background-color: #3b0659;
    --on-surface-color: rgba(46,7,48,.5);
    --media-outline-color: rgba(46,7,48,.5);
    --error-background-color: #b51f3b;
    --error-active-background-color: #ce2442;
}

body {
    background: var(--background-color);
    font-family: monospace;
}

.scrollbar-thumb {
    background-color: #7b7a92;
}

a:focus {
    outline: 2px solid var(--secondary-color);
}

.app-holder noscript,.error-boundary {
    color: #ce3b63;
}

.app-holder noscript a,.error-boundary a {
    color: var(--secondary-color);
}

.app-holder noscript__footer,.error-boundary__footer {
    color: #7b7a92;
}

.app-holder noscript__footer a,.error-boundary__footer a {
    color: #7b7a92;
}

.app-holder noscript button,.error-boundary button {
    color: #7b7a92;
}

.app-holder noscript button.copied,.error-boundary button.copied {
    color: var(--secondary-color);
}

.flash-message {
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
}

.flash-message.notice {
    background: rgba(19,237,154,.25);
    border: 1px solid rgba(19,237,154,.5);
    color: var(--secondary-color);
}

.flash-message.warning {
    background: rgba(214,159,12,.25);
    border: 1px solid rgba(214,159,12,.5);
    color: #d69f0c;
}

.flash-message.alert {
    background: rgba(202,52,74,.1);
    border: 1px solid rgba(202,52,74,.5);
    color: #ca344a;
}

.compose-form__highlightable {
    background: #2a092e; 
    border-color: #3c0735; 
}

.compose-form__highlightable.active {
    border-color: var(--secondary-color);
}

.compose-form__warning {
    background: #7a7a99; 
    color: var(--primary-color);
}

.compose-form__warning strong {
    color: var(--primary-color);
}

.compose-form__warning a {
    color: #7b7a92; 
}

.compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input {
    background: var(--primary-color); 
    color: #d0bfe4; 
}

.compose-form .spoiler-input__input {
    background: rgba(121,100,255,.1); 
    color: #b0a1ff;
}

.compose-form__actions .icon-button:.active {
    background: var(--primary-color); 
    color: var(--secondary-color);
}

.compose-form__upload__warning .icon-button.active {
    color: #ffbc3e; 
}

.compose-form__sensitive-button input[type=checkbox] {
    border-color: var(--secondary-color);
}

.compose-form__buttons .icon-button {
    color: var(--secondary-color);
}

.compose-form__poll__select__label {
    color: var(--secondary-color); 
}

.dropdown-button {
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
}

.dropdown-button.active {
    background: #4f3cb2;
    border-color: #4f3cb2;
    color: #fff;
}

.search__input {
    background: #2a092e;
}

.button {
    background: var(--secondary-color); 
    color: var(--primary-color); 
    transition: background 0.3s ease, color 0.3s ease; 
}

.button:hover {
    background: var(--primary-color); 
    color: var(--secondary-color); 
}

.account__header__tabs__buttons .icon-button {
    border: 1px solid var(--secondary-color);
}

.icon-button {
    color: var(--secondary-color); 
}

.icon-with-badge__badge {
    background: var(--secondary-color); 
    color: var(--primary-color); 
}

.account__action-bar__tab.active {
    border-bottom: 4px solid var(--secondary-color);
}

.account__action-bar {
    border-bottom: 1px solid #320640;
    border-top: 1px solid #320640;
}

.account__action-bar__tab {
    border-inline-start: 1px solid #320640;
}

.about__section.active .about__section__title {
    border-radius: 10px 10px 0 0;
}

.about__meta {
    border: 1px solid var(--background-border-color);
}

.about__section__title {
    border-radius: 10px;
    color: var(--secondary-color);
    font-family: monospace;
}

.about__header h1 {
    font-size: 16px;
    color: var(--secondary-color);
    margin-bottom: 0px;
    font-family: monospace;
}

.about__header p {
    color: #ffffff;
}

.account__domain-pill {
    background: var(--secondary-color);
    color: var(--primary-color);
}

.account__header__tabs__name h1 small span {
    color: var(--secondary-color);
}

.account__header__tabs__name h1 {
    color: var(--secondary-color);
}
.button.button-tertiary {
  border: 1px solid #13ed9a;
  color: #13ed9a;
}
.button.button-tertiary:hover {
  background-color: #1d0427;
  color: #13ed9a;
}
.rules-list li::before {
  background: #13ed9a;
  color: #1d0427;
} 
.prose a {
  color: #13ed9a;
}
.account__section-headline a.active::before, .account__section-headline button.active::before, .notification__filter-bar a.active::before, .notification__filter-bar button.active::before {
  background: #13ed9a;
}
.radio-button__input.checked::before {
  background: #13ed9a;
}
.column-link.active {
  color: #13ed9a;
}
.privacy-dropdown__option.active, .privacy-dropdown__option:focus {
  background: #2a092e;
}
.dropdown-button.active {
  background: #13ed9a;
  border-color: #1d0427;
  color: #1d0427;
}
.reactions-bar {
  display: none;
}
.edit-indicator__content a.unhandled-link, .reply-indicator__content a.unhandled-link, .status__content a.unhandled-link {
  color: #13ed9a;
}
.announcements {
  background: #2a092e;
}
.announcements__item__content a.unhandled-link {
  color: #13ed9a;
}
.announcements__mastodon {
  display: none;
}
.column-header__button.active, .column-header__button.active:hover {
  color: #13ed9a;
}
.account__header__bio .account__header__fields a {
  color: #13ed9a;
}
.icon-button.active:active, .icon-button.active:focus, .icon-button.active:hover {
  color: #13ed9a;
}
/* === custom role colors === */
.account-role {
  position: relative;
  margin-top: 2px !important;
  /* Start a new stacking context */
  z-index: 1;

  --color-role-bg: hsl(225deg 10% 30%);
  --color-role-border: hsl(227deg 16% 76%);
  --color-role-bg-shine: hsl(227deg 16% 54%);
  --color-role-border-shine: hsl(227deg 16% 10%);

  color: color-mix(in srgb, white, var(--color-role-border));

  /* moderator */
  &[data-account-role-id="1"] {
    --color-role-border: hsl(149.12deg 34% 60.78%);
    --color-role-border-shine: hsl(240deg 100% 69%);
  }

  /* owner */
  &[data-account-role-id="3"] {
    --color-role-border: hsl(330deg 100% 50%);
    --color-role-border-shine: hsl(254deg 100% 65%);
  }

  /* supporter */
  &[data-account-role-id="4"] {
    --color-role-border: hsl(157.16, 85.83%, 50.2%);
    --color-role-border-shine: hsl(58deg 100% 47%);
  }
  /* mk1 */
  &[data-account-role-id="38"] {
    --color-role-border: hsl(120 100% 72.4%);
    --color-role-border-shine: hsl(120 100% 90%);
  }
  /* mk2 */
  &[data-account-role-id="40"] {
    --color-role-border: hsl(251 97.4% 69.4%);
    --color-role-border-shine: hsl(251 97.4% 81%);
  }
  /* mk3 */
  &[data-account-role-id="39"] {
    --color-role-border: hsl(350 98.7% 69.8%);
    --color-role-border-shine: hsl(350 98.7% 82%);
  }
}

@keyframes shine {
  0%   { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

.account-role::before,
.account-role::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  background-size: 300% 100%;
  animation: shine 5000ms infinite;
  background-position: -100% 50%;
}

/* border */
.account-role::before {
  z-index: -2;
  inset: -1px;
  background-image:
    linear-gradient(60deg,
      transparent 0%,
      transparent 40%,
      color-mix(in srgb, var(--color-role-border-shine) 40%, transparent) 50%,
      transparent 60%,
      transparent 100%
    ),
    linear-gradient(var(--color-role-border), var(--color-role-border));
}
/* background */
.account-role::after {
  z-index: -1;
  inset: 0px;
  background-image:
    linear-gradient(60deg,
      transparent 0%,
      transparent 45%,
      color-mix(in srgb, var(--color-role-bg-shine) 20%, transparent) 55%,
      transparent 65%,
      transparent 100%
    ),
    linear-gradient(var(--color-role-bg), var(--color-role-bg));
}
@supports selector(:has(a, b)) {
    :where( .status__content, .status__content .e-content, .status__content .status__content__text, :not(.reply-indicator__display-name)>.display-name, .status__display-name, .status__info>span, label.poll__option, .conversation__content__names, .detailed-status__display-name, .detailed-status__display-name strong, .conversation__content__info, .conversation__content, .status__prepend>span, .notification__message>span, .account__display-name strong, .account .account__display-name, .account__header__tabs__name h1, .account__header__content, .account__header__fields dd, .account__header__fields dt, .reply-indicator, .reply-indicator__content, .status__content, .picture-in-picture__header__account, .picture-in-picture__header .display-name span, .picture-in-picture__header .display-name strong ):has(img.emojione:hover) {
        overflow: revert;
    }

    :not( .reply-indicator__header strong, .emoji-button, .reactions-bar__item__emoji )>img.emojione {
        transition: transform 200ms, opacity 200ms;
    }

    :not( .reply-indicator__header strong, .emoji-button, .reactions-bar__item__emoji )>img.emojione:hover {
        transform: scale(5);
        opacity: 1;
        z-index: 2;
        position: relative;
    }
}