: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(29,4,39,.15);
    --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;
}
/* === custom role colors === */
.account-role {
    position: relative;
    margin-top: 2px !important;
    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: var(--secondary-color);
    }

    /* 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="34"] {
        --color-role-border: hsl(187deg 98% 48%);
        --color-role-border-shine: var(--secondary-color);
    }
}

@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));
}