dotfiles-violet-chaton/INSTALL/themes/violet-chaton.theme.css

@charset "UTF-8";
/**
 * @name Violet Chaton
 * @description Thème Discord cohérent avec le ricing Violet Chaton (COSMIC DE) de tetardtek.
 *              Palette extraite de violet-chaton.ron. Transparence optionnelle par zone.
 * @author tetardtek
 * @version 1.0.0
 * @source https://github.com/tetardtek/violet-chaton-discord-theme
 * @invite
 */
:root,
.theme-dark {
  --background-primary: #38234b;
  --background-secondary: #341c4a;
  --background-secondary-alt: #341c4a;
  --background-tertiary: #2d1a3e;
  --background-floating: #2d1a3e;
  --background-accent: #3d2454;
  --channeltextarea-background: #341c4a;
  --background-nested-floating: #2d1a3e;
  --modal-background: #341c4a;
  --input-background: #341c4a;
  --deprecated-card-bg: #3d2454;
  --deprecated-panel-overlay: rgba(27, 13, 40, 0.5);
  --deprecated-store-bg: #341c4a;
  --background-surface-high: #3d2454;
  --background-surface-higher: #38234b;
  --background-surface-overlay: rgba(45, 26, 62, 0.9);
  --background-modifier-hover: rgba(255, 121, 198, 0.08);
  --background-modifier-active: rgba(255, 121, 198, 0.12);
  --background-modifier-selected: rgba(255, 121, 198, 0.15);
  --background-modifier-accent: rgba(255, 121, 198, 0.05);
  --background-mentioned: rgba(255, 121, 198, 0.05);
  --background-mentioned-hover: rgba(255, 121, 198, 0.08);
  --background-message-hover: rgba(255, 121, 198, 0.03);
  --background-message-automod-highlight: rgba(249, 226, 175, 0.06);
  --text-normal: #f8f8f2;
  --text-default: #f8f8f2;
  --text-strong: #f8f8f2;
  --text-subtle: #9399b2;
  --text-muted: #7f849c;
  --text-link: #8be9fd;
  --text-link-low-saturation: #8be9fd;
  --text-positive: #a6e3a1;
  --text-warning: #f9e2af;
  --text-danger: #f38ba8;
  --text-brand: #e79cfe;
  --header-primary: #f8f8f2;
  --header-secondary: #a6adc8;
  --channels-default: #a6adc8;
  --channel-icon: #7f849c;
  --interactive-normal: #a6adc8;
  --interactive-hover: #ff79c6;
  --interactive-active: #ff79c6;
  --interactive-muted: #6c7086;
  --interactive-text-active: #f8f8f2;
  --interactive-icon-default: #a6adc8;
  --icon-strong: #f8f8f2;
  --icon-default: #a6adc8;
  --icon-muted: #7f849c;
  --scrollbar-auto-thumb: #7f849c;
  --scrollbar-auto-track: #2d1a3e;
  --scrollbar-thin-thumb: #7f849c;
  --scrollbar-thin-track: transparent;
  --brand-experiment: #e79cfe;
  --brand-experiment-560: #e79cfe;
  --button-danger-background: #f38ba8;
  --button-danger-background-hover: #f7b0c4;
  --button-danger-background-active: #f17497;
  --button-secondary-background: #3d2454;
  --button-secondary-background-hover: rgba(255, 121, 198, 0.1);
  --button-secondary-background-active: rgba(255, 121, 198, 0.15);
  --button-outline-danger-background-hover: rgba(243, 139, 168, 0.1);
  --button-outline-danger-border: #f38ba8;
  --button-outline-danger-text: #f38ba8;
  --button-outline-brand-background-hover: rgba(231, 156, 254, 0.1);
  --button-outline-brand-border: #e79cfe;
  --button-outline-brand-text: #e79cfe;
  --control-brand-foreground: #e79cfe;
  --control-brand-foreground-new: #e79cfe;
  --status-positive-background: rgba(166, 227, 161, 0.15);
  --status-warning-background: rgba(249, 226, 175, 0.15);
  --status-danger-background: rgba(243, 139, 168, 0.15);
  --status-positive-text: #a6e3a1;
  --status-warning-text: #f9e2af;
  --status-danger-text: #f38ba8;
  --info-help-background: rgba(139, 233, 253, 0.08);
  --info-help-foreground: #8be9fd;
  --info-warning-background: rgba(249, 226, 175, 0.08);
  --info-warning-foreground: #f9e2af;
  --info-danger-background: rgba(243, 139, 168, 0.08);
  --info-danger-foreground: #f38ba8;
  --info-positive-background: rgba(166, 227, 161, 0.08);
  --info-positive-foreground: #a6e3a1;
  --mention-background: rgba(255, 121, 198, 0.1);
  --mention-foreground: #ff79c6;
  --profile-gradient-primary-color: #341c4a;
  --profile-gradient-secondary-color: #2d1a3e;
  --profile-gradient-overlay-color: rgba(27, 13, 40, 0.6);
  --separator-color: rgba(255, 121, 198, 0.12);
  --focus-primary: rgba(255, 121, 198, 0.5);
}

[class*=guilds],
nav[class*=guilds],
[class*=guildsList],
[class*=listItem] {
  background-color: #261537;
}

[class*=wrapper-] [class*=listItem],
[class*=blobContainer],
[class*=scroller-][class*=guilds] {
  background-color: #261537;
}

[class*=guilds] [class*=wrapper-]:not([class*=selected]) [class*=icon] {
  background-color: #341c4a;
  color: #a6adc8;
  transition: background-color 0.15s ease, color 0.15s ease;
}
[class*=guilds] [class*=wrapper-]:not([class*=selected]) [class*=icon]:hover {
  background-color: rgba(255, 121, 198, 0.15);
  color: #ff79c6;
}

[class*=guilds] [class*=selected] [class*=icon] {
  background-color: #e79cfe;
  color: #1b0d28;
}

[class*=wrapper_cc5dd2],
[class*=listItemWrapper__91816] {
  background-color: transparent !important;
}

[class*=wrapper__6e9f8]:not([class*=selected__]) {
  background-color: #341c4a !important;
  transition: background-color 0.15s ease;
}
[class*=wrapper__6e9f8]:not([class*=selected__]):hover {
  background-color: rgba(255, 121, 198, 0.15) !important;
}

[class*=wrapper__6e9f8][class*=selected__] {
  background-color: #e79cfe !important;
}

[class*=childWrapper__6e9f8] svg {
  color: #a6adc8;
  transition: color 0.15s ease;
}

[class*=wrapper__6e9f8]:hover [class*=childWrapper__6e9f8] svg {
  color: #ff79c6 !important;
}

[class*=wrapper__6e9f8][class*=selected__] [class*=childWrapper__6e9f8] svg {
  color: #1b0d28 !important;
}

[class*=guildName__],
[class*=guildTooltip__],
[class*=nameTooltip__],
[class*=layerContainer] [class*=layer-] [class*=content_] > span {
  background-color: #261537 !important;
  border: 1px solid rgba(255, 121, 198, 0.15) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 16px rgba(27, 13, 40, 0.5) !important;
  color: #f8f8f2 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 6px 10px !important;
}

[class*=pill] [class*=item] {
  background-color: #ff79c6;
}

[class*=listItemWrapper] [class*=separator] {
  background-color: rgba(255, 121, 198, 0.2);
}

[class*=sidebar],
nav[class*=sidebar],
[class*=privateChannels],
[class*=container-] > [class*=sidebar] {
  background-color: #341c4a;
}

[class*=header-][class*=sidebar],
[class*=header-][class*=container] {
  background-color: #2d1a3e;
  border-bottom: 1px solid rgba(255, 121, 198, 0.12);
}
[class*=header-][class*=sidebar] [class*=headerText],
[class*=header-][class*=sidebar] [class*=name-],
[class*=header-][class*=container] [class*=headerText],
[class*=header-][class*=container] [class*=name-] {
  color: #f8f8f2;
  font-weight: 600;
}

[class*=containerDefault] [class*=name-],
[class*=categoryContainer] [class*=name-] {
  color: #9399b2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[class*=containerDefault] [class*=name-]:hover,
[class*=categoryContainer] [class*=name-]:hover {
  color: #f8f8f2;
}

[class*=channel-],
[class*=containerDefault][class*=channel] {
  border-radius: 4px;
  color: #a6adc8;
  transition: background-color 0.1s ease, color 0.1s ease;
}
[class*=channel-]:hover,
[class*=containerDefault][class*=channel]:hover {
  background-color: rgba(255, 121, 198, 0.08);
  color: #f8f8f2;
}
[class*=channel-][class*=modeSelected], [class*=channel-][aria-selected=true],
[class*=containerDefault][class*=channel][class*=modeSelected],
[class*=containerDefault][class*=channel][aria-selected=true] {
  background-color: rgba(255, 121, 198, 0.15);
  color: #ff79c6;
}
[class*=channel-][class*=modeSelected] [class*=name-], [class*=channel-][aria-selected=true] [class*=name-],
[class*=containerDefault][class*=channel][class*=modeSelected] [class*=name-],
[class*=containerDefault][class*=channel][aria-selected=true] [class*=name-] {
  color: #ff79c6;
}
[class*=channel-] [class*=numberBadge],
[class*=channel-] [class*=unread],
[class*=containerDefault][class*=channel] [class*=numberBadge],
[class*=containerDefault][class*=channel] [class*=unread] {
  background-color: #ff79c6;
  color: #1b0d28;
  font-weight: 700;
}

[class*=channel-] [class*=icon],
[class*=channel-] svg {
  color: #7f849c;
}

[class*=channel-]:hover [class*=icon],
[class*=channel-]:hover svg,
[class*=channel-][aria-selected=true] [class*=icon],
[class*=channel-][aria-selected=true] svg {
  color: #ff79c6;
}

[class*=unread] > [class*=containerDefault] {
  color: #f8f8f2;
  font-weight: 600;
}

[class*=chat-],
[class*=chatContent],
[class*=content-][class*=chat] {
  background-color: #38234b;
}

[class*=header-][class*=chat],
[class*=toolbar],
[class*=chatHeaderTitle] {
  background-color: #38234b;
  border-bottom: 1px solid rgba(255, 121, 198, 0.12);
}
[class*=header-][class*=chat] [class*=title-],
[class*=header-][class*=chat] [class*=headerText],
[class*=header-][class*=chat] h2,
[class*=toolbar] [class*=title-],
[class*=toolbar] [class*=headerText],
[class*=toolbar] h2,
[class*=chatHeaderTitle] [class*=title-],
[class*=chatHeaderTitle] [class*=headerText],
[class*=chatHeaderTitle] h2 {
  color: #f8f8f2;
  font-weight: 700;
}
[class*=header-][class*=chat] [class*=topic-],
[class*=toolbar] [class*=topic-],
[class*=chatHeaderTitle] [class*=topic-] {
  color: #9399b2;
  font-size: 13px;
}

[class*=message-],
[class*=messageListItem] {
  background-color: transparent;
  transition: background-color 0.1s ease;
}
[class*=message-]:hover,
[class*=messageListItem]:hover {
  background-color: rgba(255, 121, 198, 0.03);
}
[class*=message-][class*=mentioned],
[class*=messageListItem][class*=mentioned] {
  background-color: rgba(255, 121, 198, 0.06);
  border-left: 2px solid #ff79c6;
}

[class*=messageContent],
[class*=markup-] {
  color: #f8f8f2;
  font-size: 15px;
  line-height: 1.55;
}
[class*=messageContent] a,
[class*=markup-] a {
  color: #8be9fd;
  text-decoration: none;
}
[class*=messageContent] a:hover,
[class*=markup-] a:hover {
  text-decoration: underline;
  color: #bdf3fe;
}
[class*=messageContent] code,
[class*=markup-] code {
  background-color: #2d1a3e;
  border-radius: 3px;
  color: #ff79c6;
  font-size: 13.5px;
  padding: 0.1em 0.4em;
}
[class*=messageContent] pre,
[class*=markup-] pre {
  background-color: #261537 !important;
  border: 1px solid rgba(231, 156, 254, 0.2);
  border-radius: 6px;
}
[class*=messageContent] pre code,
[class*=markup-] pre code {
  background-color: transparent;
  color: #f8f8f2;
  padding: 0;
}
[class*=messageContent] blockquote,
[class*=markup-] blockquote {
  border-left: 4px solid #e79cfe;
  color: #a6adc8;
}

[class*=username-],
[class*=usernameInner] {
  font-weight: 600;
  transition: color 0.1s ease;
}
[class*=username-]:hover,
[class*=usernameInner]:hover {
  text-decoration: underline;
}

[class*=timestamp-] {
  color: #6c7086;
  font-size: 11px;
}

[class*=reaction-] {
  background-color: #2d1a3e;
  border: 1px solid rgba(255, 121, 198, 0.15);
  border-radius: 8px;
  color: #a6adc8;
  transition: background-color 0.1s ease, border-color 0.1s ease;
}
[class*=reaction-]:hover {
  background-color: rgba(255, 121, 198, 0.08);
  border-color: rgba(255, 121, 198, 0.4);
  color: #f8f8f2;
}
[class*=reaction-][class*=selected], [class*=reaction-][class*=reacted] {
  background-color: rgba(255, 121, 198, 0.12);
  border-color: rgba(255, 121, 198, 0.5);
  color: #ff79c6;
}

[class*=embed-],
[class*=embedWrapper] {
  background-color: #341c4a;
  border-left: 4px solid #e79cfe;
  border-radius: 0 4px 4px 0;
}
[class*=embed-] [class*=embedTitle],
[class*=embedWrapper] [class*=embedTitle] {
  color: #f8f8f2;
  font-weight: 600;
}
[class*=embed-] [class*=embedDescription],
[class*=embedWrapper] [class*=embedDescription] {
  color: #a6adc8;
}
[class*=embed-] [class*=embedFooter],
[class*=embedWrapper] [class*=embedFooter] {
  color: #7f849c;
}

[class*=channelTextArea],
[class*=textAreaSlate],
[class*=slateContainer] {
  background-color: #341c4a;
  border-radius: 8px;
  border: 1px solid rgba(255, 121, 198, 0.12);
  transition: border-color 0.15s ease;
}
[class*=channelTextArea]:focus-within,
[class*=textAreaSlate]:focus-within,
[class*=slateContainer]:focus-within {
  border-color: rgba(255, 121, 198, 0.35);
}

[class*=textArea-] {
  color: #f8f8f2;
}
[class*=textArea-]::placeholder,
[class*=textArea-] [data-slate-placeholder] {
  color: #7f849c;
}

[class*=buttons-][class*=channelTextArea] [class*=buttonContainer],
[class*=buttons-][class*=channelTextArea] button {
  color: #7f849c;
  transition: color 0.1s ease;
}
[class*=buttons-][class*=channelTextArea] [class*=buttonContainer]:hover,
[class*=buttons-][class*=channelTextArea] button:hover {
  color: #ff79c6;
}

[class*=toolbar-] {
  background-color: #2d1a3e;
  border: 1px solid rgba(255, 121, 198, 0.12);
  border-radius: 6px;
}
[class*=toolbar-] button {
  color: #a6adc8;
}
[class*=toolbar-] button:hover {
  background-color: rgba(255, 121, 198, 0.08);
  color: #ff79c6;
}
[class*=toolbar-] button[class*=active], [class*=toolbar-] button[aria-pressed=true] {
  background-color: rgba(255, 121, 198, 0.15);
  color: #ff79c6;
}

[class*=systemMessage-],
[class*=cozy][class*=systemMessage],
[class*=compact][class*=systemMessage] {
  color: #7f849c;
}
[class*=systemMessage-] [class*=systemMessageContent],
[class*=systemMessage-] [class*=markup-],
[class*=cozy][class*=systemMessage] [class*=systemMessageContent],
[class*=cozy][class*=systemMessage] [class*=markup-],
[class*=compact][class*=systemMessage] [class*=systemMessageContent],
[class*=compact][class*=systemMessage] [class*=markup-] {
  color: #9399b2;
}
[class*=systemMessage-] [class*=iconContainer],
[class*=systemMessage-] [class*=icon-][class*=system],
[class*=systemMessage-] svg,
[class*=cozy][class*=systemMessage] [class*=iconContainer],
[class*=cozy][class*=systemMessage] [class*=icon-][class*=system],
[class*=cozy][class*=systemMessage] svg,
[class*=compact][class*=systemMessage] [class*=iconContainer],
[class*=compact][class*=systemMessage] [class*=icon-][class*=system],
[class*=compact][class*=systemMessage] svg {
  color: #e79cfe;
}
[class*=systemMessage-] a,
[class*=cozy][class*=systemMessage] a,
[class*=compact][class*=systemMessage] a {
  color: #8be9fd;
}

[class*=newMessagesBar],
[class*=newMessageBar-] {
  background-color: rgba(231, 156, 254, 0.12);
  border: 1px solid rgba(231, 156, 254, 0.3);
  border-radius: 6px;
  color: #e79cfe;
}

[class*=divider__][class*=hasContent__] {
  background-color: transparent !important;
}
[class*=divider__][class*=hasContent__] [class*=content__] {
  background-color: #2d1a3e !important;
  color: #7f849c !important;
  border: 1px solid rgba(255, 121, 198, 0.15) !important;
  border-radius: 12px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
}

[class*=membersGroup] > [class*=members-] {
  background-color: #341c4a;
}

[class*=member-],
[class*=memberInner] {
  border-radius: 4px;
  color: #a6adc8;
  transition: background-color 0.1s ease, color 0.1s ease;
}
[class*=member-]:hover,
[class*=memberInner]:hover {
  background-color: rgba(255, 121, 198, 0.08);
  color: #f8f8f2;
}

[class*=roleHeader] {
  color: #7f849c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

[class*=titleBar],
[class*=titlebar],
.titleBar,
#titlebar {
  background-color: #2d1a3e;
  border-bottom: 1px solid rgba(255, 121, 198, 0.1);
  color: #f8f8f2;
}

[class*=winButton],
[class*=windowButton] {
  color: #a6adc8;
  border-radius: 4px;
  transition: background-color 0.1s ease, color 0.1s ease;
}
[class*=winButton]:hover,
[class*=windowButton]:hover {
  background-color: rgba(255, 121, 198, 0.12);
  color: #ff79c6;
}
[class*=winButton][class*=close]:hover, [class*=winButton][aria-label*=Close]:hover, [class*=winButton][aria-label*=Fermer]:hover,
[class*=windowButton][class*=close]:hover,
[class*=windowButton][aria-label*=Close]:hover,
[class*=windowButton][aria-label*=Fermer]:hover {
  background-color: rgba(243, 139, 168, 0.2);
  color: #f38ba8;
}

[class*=search-],
[class*=searchBar] {
  background-color: #261537;
  border: 1px solid rgba(255, 121, 198, 0.12);
  border-radius: 6px;
  color: #a6adc8;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
[class*=search-]:hover, [class*=search-]:focus-within,
[class*=searchBar]:hover,
[class*=searchBar]:focus-within {
  background-color: #2d1a3e;
  border-color: rgba(255, 121, 198, 0.3);
  color: #f8f8f2;
}
[class*=search-] input,
[class*=search-] [class*=searchInput],
[class*=searchBar] input,
[class*=searchBar] [class*=searchInput] {
  color: #f8f8f2;
}
[class*=search-] input::placeholder,
[class*=search-] [class*=searchInput]::placeholder,
[class*=searchBar] input::placeholder,
[class*=searchBar] [class*=searchInput]::placeholder {
  color: #7f849c;
}

[class*=toolbar] button,
[class*=iconWrapper],
[class*=icon-]:not([class*=channel]) {
  color: #a6adc8;
  transition: color 0.1s ease;
}
[class*=toolbar] button:hover,
[class*=iconWrapper]:hover,
[class*=icon-]:not([class*=channel]):hover {
  color: #ff79c6;
}
[class*=toolbar] button[class*=selected], [class*=toolbar] button[aria-selected=true], [class*=toolbar] button[class*=active],
[class*=iconWrapper][class*=selected],
[class*=iconWrapper][aria-selected=true],
[class*=iconWrapper][class*=active],
[class*=icon-]:not([class*=channel])[class*=selected],
[class*=icon-]:not([class*=channel])[aria-selected=true],
[class*=icon-]:not([class*=channel])[class*=active] {
  color: #ff79c6;
}

[class*=backdrop-],
[class*=layerContainer] > [class*=layer-]:not([class*=chat]) {
  background-color: rgba(27, 13, 40, 0.75);
  backdrop-filter: blur(4px);
}

[class*=modal-],
[class*=root-][class*=modal],
[class*=container-][class*=modal] {
  background-color: #341c4a;
  border: 1px solid rgba(255, 121, 198, 0.15);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(27, 13, 40, 0.6);
  color: #f8f8f2;
}

[class*=header-][class*=modal],
[class*=modalHeader] {
  background-color: #2d1a3e;
  border-bottom: 1px solid rgba(255, 121, 198, 0.12);
  border-radius: 10px 10px 0 0;
}
[class*=header-][class*=modal] [class*=title-],
[class*=header-][class*=modal] h1, [class*=header-][class*=modal] h2, [class*=header-][class*=modal] h3,
[class*=modalHeader] [class*=title-],
[class*=modalHeader] h1,
[class*=modalHeader] h2,
[class*=modalHeader] h3 {
  color: #f8f8f2;
  font-weight: 700;
}
[class*=header-][class*=modal] [class*=close-],
[class*=header-][class*=modal] [aria-label*=Close],
[class*=header-][class*=modal] [aria-label*=Fermer],
[class*=modalHeader] [class*=close-],
[class*=modalHeader] [aria-label*=Close],
[class*=modalHeader] [aria-label*=Fermer] {
  color: #7f849c;
}
[class*=header-][class*=modal] [class*=close-]:hover,
[class*=header-][class*=modal] [aria-label*=Close]:hover,
[class*=header-][class*=modal] [aria-label*=Fermer]:hover,
[class*=modalHeader] [class*=close-]:hover,
[class*=modalHeader] [aria-label*=Close]:hover,
[class*=modalHeader] [aria-label*=Fermer]:hover {
  background-color: rgba(243, 139, 168, 0.15);
  color: #f38ba8;
}

[class*=content-][class*=modal],
[class*=scrollerBase-][class*=modal] {
  color: #a6adc8;
}

[class*=footer-][class*=modal] {
  background-color: #2d1a3e;
  border-top: 1px solid rgba(255, 121, 198, 0.12);
  border-radius: 0 0 10px 10px;
}

button[class*=lookFilled][class*=colorBrand],
[class*=button-][class*=colorBrand] {
  background-color: #e79cfe;
  color: #1b0d28;
  font-weight: 600;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
button[class*=lookFilled][class*=colorBrand]:hover,
[class*=button-][class*=colorBrand]:hover {
  background-color: #f1c4fe;
}
button[class*=lookFilled][class*=colorBrand]:active,
[class*=button-][class*=colorBrand]:active {
  transform: scale(0.97);
}

button[class*=colorRed],
[class*=button-][class*=colorRed] {
  background-color: #f38ba8;
  color: #1b0d28;
}
button[class*=colorRed]:hover,
[class*=button-][class*=colorRed]:hover {
  background-color: #f7b0c4;
}

button[class*=lookOutlined],
[class*=button-][class*=lookOutlined] {
  border-color: rgba(255, 121, 198, 0.4);
  color: #a6adc8;
}
button[class*=lookOutlined]:hover,
[class*=button-][class*=lookOutlined]:hover {
  background-color: rgba(255, 121, 198, 0.08);
  border-color: #ff79c6;
  color: #ff79c6;
}

button[class*=lookLink],
[class*=button-][class*=lookLink] {
  color: #8be9fd;
}
button[class*=lookLink]:hover,
[class*=button-][class*=lookLink]:hover {
  color: #bdf3fe;
}

[class*=tooltip-],
[class*=tooltipContainer] {
  background-color: #261537;
  border: 1px solid rgba(255, 121, 198, 0.15);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(27, 13, 40, 0.5);
  color: #f8f8f2;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
}

[class*=tooltipPointer] {
  border-top-color: #261537 !important;
  border-bottom-color: #261537 !important;
}

[class*=menu-],
[class*=menu_],
[class*=contextMenu],
[class*=layerContainer] [class*=layer-] > [class*=container-] {
  background-color: #2d1a3e;
  border: 1px solid rgba(255, 121, 198, 0.15);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(27, 13, 40, 0.5);
  padding: 4px;
}

[class*=menuItem-],
[class*=item-][class*=menu],
[class*=labelContainer_] {
  border-radius: 4px;
  color: #a6adc8;
  transition: background-color 0.08s ease, color 0.08s ease;
}
[class*=menuItem-]:hover, [class*=menuItem-][class*=focused],
[class*=item-][class*=menu]:hover,
[class*=item-][class*=menu][class*=focused],
[class*=labelContainer_]:hover,
[class*=labelContainer_][class*=focused] {
  background-color: rgba(255, 121, 198, 0.12);
  color: #f8f8f2;
}
[class*=menuItem-][class*=danger], [class*=menuItem-][class*=colorDanger_],
[class*=item-][class*=menu][class*=danger],
[class*=item-][class*=menu][class*=colorDanger_],
[class*=labelContainer_][class*=danger],
[class*=labelContainer_][class*=colorDanger_] {
  color: #f38ba8;
}
[class*=menuItem-][class*=danger]:hover, [class*=menuItem-][class*=colorDanger_]:hover,
[class*=item-][class*=menu][class*=danger]:hover,
[class*=item-][class*=menu][class*=colorDanger_]:hover,
[class*=labelContainer_][class*=danger]:hover,
[class*=labelContainer_][class*=colorDanger_]:hover {
  background-color: rgba(243, 139, 168, 0.12);
  color: #f38ba8;
}

[class*=separator-][class*=menu],
[class*=separator_] {
  background-color: rgba(255, 121, 198, 0.12);
  height: 1px;
  margin: 4px 8px;
}

[class*=userPopout],
[class*=userProfile] {
  background-color: #341c4a;
  border: 1px solid rgba(255, 121, 198, 0.15);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(27, 13, 40, 0.6);
}

[class*=userPopout] [class*=banner],
[class*=userProfile] [class*=banner] {
  background-color: #2d1a3e;
}

[class*=headerSimple__] {
  background-color: #341c4a !important;
  border-bottom: 1px solid rgba(255, 121, 198, 0.08) !important;
}

[class*=body__][class*=inset_] {
  background-color: #341c4a !important;
  border-radius: 0 0 8px 8px !important;
}

[class*=voiceSection__] {
  background-color: #3d2454 !important;
  border: 1px solid rgba(255, 121, 198, 0.1) !important;
  border-radius: 8px !important;
  transition: background-color 0.1s ease, border-color 0.1s ease;
}
[class*=voiceSection__]:hover {
  background-color: rgba(255, 121, 198, 0.08) !important;
  border-color: rgba(255, 121, 198, 0.25) !important;
}

[class*=standardSidebarView] {
  background-color: #341c4a;
}

[class*=sidebar-][class*=settings],
[class*=side-][class*=settings],
[class*=sidebarRegion] {
  background-color: #341c4a;
}
[class*=sidebar-][class*=settings] [class*=item-],
[class*=sidebar-][class*=settings] [class*=side-]:not([class*=settings]):not([class*=Region]),
[class*=side-][class*=settings] [class*=item-],
[class*=side-][class*=settings] [class*=side-]:not([class*=settings]):not([class*=Region]),
[class*=sidebarRegion] [class*=item-],
[class*=sidebarRegion] [class*=side-]:not([class*=settings]):not([class*=Region]) {
  border-radius: 4px;
  color: #a6adc8;
  transition: background-color 0.1s ease, color 0.1s ease;
}
[class*=sidebar-][class*=settings] [class*=item-]:hover,
[class*=sidebar-][class*=settings] [class*=side-]:not([class*=settings]):not([class*=Region]):hover,
[class*=side-][class*=settings] [class*=item-]:hover,
[class*=side-][class*=settings] [class*=side-]:not([class*=settings]):not([class*=Region]):hover,
[class*=sidebarRegion] [class*=item-]:hover,
[class*=sidebarRegion] [class*=side-]:not([class*=settings]):not([class*=Region]):hover {
  background-color: rgba(255, 121, 198, 0.08);
  color: #f8f8f2;
}
[class*=sidebar-][class*=settings] [class*=item-][class*=selected], [class*=sidebar-][class*=settings] [class*=item-][aria-selected=true],
[class*=sidebar-][class*=settings] [class*=side-]:not([class*=settings]):not([class*=Region])[class*=selected],
[class*=sidebar-][class*=settings] [class*=side-]:not([class*=settings]):not([class*=Region])[aria-selected=true],
[class*=side-][class*=settings] [class*=item-][class*=selected],
[class*=side-][class*=settings] [class*=item-][aria-selected=true],
[class*=side-][class*=settings] [class*=side-]:not([class*=settings]):not([class*=Region])[class*=selected],
[class*=side-][class*=settings] [class*=side-]:not([class*=settings]):not([class*=Region])[aria-selected=true],
[class*=sidebarRegion] [class*=item-][class*=selected],
[class*=sidebarRegion] [class*=item-][aria-selected=true],
[class*=sidebarRegion] [class*=side-]:not([class*=settings]):not([class*=Region])[class*=selected],
[class*=sidebarRegion] [class*=side-]:not([class*=settings]):not([class*=Region])[aria-selected=true] {
  background-color: rgba(255, 121, 198, 0.15);
  color: #ff79c6;
}
[class*=sidebar-][class*=settings] [class*=header-],
[class*=side-][class*=settings] [class*=header-],
[class*=sidebarRegion] [class*=header-] {
  color: #7f849c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[class*=sidebar-][class*=settings] [class*=separator-],
[class*=side-][class*=settings] [class*=separator-],
[class*=sidebarRegion] [class*=separator-] {
  background-color: rgba(255, 121, 198, 0.12);
}

[class*=contentRegion],
[class*=contentColumn-],
[class*=children-][class*=settings] {
  background-color: #38234b;
  color: #f8f8f2;
}

[class*=contentRegionScroller],
[class*=customScroller-][class*=settings] {
  background-color: #38234b;
}

[class*=userInfoSection],
[class*=section-][class*=settings],
[class*=card-][class*=settings],
[class*=tableRow-],
[class*=fieldList-] {
  background-color: #341c4a;
  border: 1px solid rgba(255, 121, 198, 0.08);
  border-radius: 8px;
  color: #f8f8f2;
}

[class*=fieldTitle-],
[class*=title-][class*=field] {
  color: #f8f8f2;
  font-weight: 600;
}

[class*=details-][class*=field],
[class*=value-][class*=field] {
  color: #a6adc8;
}

[class*=editActionButton],
[class*=button-][class*=edit] {
  color: #8be9fd;
}
[class*=editActionButton]:hover,
[class*=button-][class*=edit]:hover {
  color: #bdf3fe;
}

[class*=sectionTitle-],
[class*=h5-][class*=eyebrow] {
  color: #7f849c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

[class*=divider-][class*=settings],
[class*=divider-][class*=Divider] {
  background-color: rgba(255, 121, 198, 0.1);
}

:has(> [data-settings-panel-scroller]) {
  background-color: #38234b !important;
}

[data-settings-panel-scroller],
[data-settings-panel-scroller] [class*=panel__],
[data-settings-panel-scroller] [class*=settingsPage_],
[data-settings-panel-scroller] [class*=tabbedSettingsContainer_],
[data-settings-panel-scroller] [class*=tabBarPanel_],
[data-settings-panel-scroller] [class*=tabPanel__] {
  background-color: #38234b !important;
  color: #f8f8f2;
}

[class*=contentHeader_e9e3ed] {
  background-color: #341c4a !important;
  border-bottom: 1px solid rgba(255, 121, 198, 0.12) !important;
}
[class*=contentHeader_e9e3ed] [class*=breadcrumbText__] {
  color: #f8f8f2 !important;
  font-weight: 600;
}

[class*=tabBar_f8303a] {
  border-bottom: 1px solid rgba(255, 121, 198, 0.12) !important;
  background-color: transparent !important;
}

[class*=tabBar_f8303a] [class*=tab_] {
  color: #a6adc8 !important;
  border-bottom: 2px solid transparent !important;
  transition: color 0.1s ease, border-color 0.1s ease;
}
[class*=tabBar_f8303a] [class*=tab_]:hover {
  color: #f8f8f2 !important;
}
[class*=tabBar_f8303a] [class*=tab_][class*=selected_] {
  color: #ff79c6 !important;
  border-bottom-color: #ff79c6 !important;
}

[class*=accountProfileCard__] {
  background-color: #341c4a !important;
  border: 1px solid rgba(255, 121, 198, 0.1) !important;
  border-radius: 8px !important;
}

[class*=card__73069],
[class*=cardPrimary__73069],
[class*=headingCard__] {
  background-color: #341c4a !important;
  border: 1px solid rgba(255, 121, 198, 0.1) !important;
  border-radius: 8px !important;
  color: #f8f8f2 !important;
}

[class*=faq__] {
  background-color: transparent !important;
}

[class*=faq__] [class*=heading__] {
  background-color: transparent !important;
  color: #f8f8f2 !important;
  margin-bottom: 12px;
}

[class*=faq__] [class*=list__] {
  background-color: #341c4a !important;
  border: 1px solid rgba(255, 121, 198, 0.1) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  list-style: none !important;
  padding: 0 !important;
}

[class*=faq__] [class*=listItem__] {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(255, 121, 198, 0.08) !important;
}
[class*=faq__] [class*=listItem__]:last-child {
  border-bottom: none !important;
}

[class*=faq__] [class*=questionWrapper__] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important;
  background-color: transparent !important;
  cursor: pointer;
  transition: background-color 0.1s ease;
  list-style: none !important;
}
[class*=faq__] [class*=questionWrapper__]:hover {
  background-color: rgba(255, 121, 198, 0.06) !important;
}

[class*=faq__] [class*=question__] {
  color: #f8f8f2 !important;
  background-color: transparent !important;
}

[class*=faq__] [class*=questionIcon__] {
  flex-shrink: 0;
  color: #7f849c !important;
  transition: color 0.1s ease, transform 0.2s ease;
}
[class*=faq__] [class*=questionIcon__] path {
  fill: #7f849c !important;
}

[class*=faq__] [class*=questionWrapper__]:hover [class*=questionIcon__] {
  color: #ff79c6 !important;
}
[class*=faq__] [class*=questionWrapper__]:hover [class*=questionIcon__] path {
  fill: #ff79c6 !important;
}

[class*=perkCardContainer_] {
  background-color: transparent !important;
}

[class*=perkCard_] {
  background-color: #341c4a !important;
  border: 1px solid rgba(255, 121, 198, 0.1) !important;
  border-radius: 8px !important;
}

[class*=perkCardHeading_] {
  background-color: transparent !important;
  color: #f8f8f2 !important;
}

[class*=perkCardDescription_] {
  color: #a6adc8 !important;
}

[class*=background__1fed1] {
  background-color: #38234b !important;
}

[class*=fieldList__] {
  background-color: #341c4a !important;
  border: 1px solid rgba(255, 121, 198, 0.1) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

[class*=field__1fed1] {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(255, 121, 198, 0.08) !important;
  padding: 12px 16px !important;
}
[class*=field__1fed1][class*=fieldSpacer__], [class*=field__1fed1]:last-child {
  border-bottom: none !important;
}

[class*=constrainedRow__1fed1],
[class*=usernameRow__1fed1],
[class*=usernameInnerRow__1fed1],
[class*=fieldButton__1fed1],
[class*=fieldButtonList__1fed1],
[class*=textRevealer__1fed1] {
  background-color: transparent !important;
}

[class*=fieldTitle__] {
  color: #f8f8f2 !important;
  font-weight: 600;
}

[class*=fieldset__] {
  background-color: #341c4a !important;
  border: 1px solid rgba(255, 121, 198, 0.1) !important;
  border-radius: 8px !important;
  padding: 16px !important;
}

[class*=legend__] {
  color: #f8f8f2 !important;
  font-weight: 600;
  padding: 0 6px;
}

[class*=container__5a838],
[class*=labelContainer__5a838],
[class*=control__5a838] {
  background-color: transparent !important;
}

[class*=label__5a838] {
  color: #f8f8f2 !important;
  font-weight: 500;
}

[class*=description__5a838] {
  color: #9399b2 !important;
  font-size: 13px;
}

[class*=container__5b321],
[class*=box_f8c98c],
[class*=featureCards__] {
  background-color: transparent !important;
}

[class*=container__8cc9a] {
  background-color: #341c4a !important;
  border: 1px solid rgba(255, 121, 198, 0.1) !important;
  border-radius: 8px !important;
}

[class*=header__8cc9a] {
  background-color: transparent !important;
}

[class*=circle__8cc9a] {
  background-color: rgba(231, 156, 254, 0.15) !important;
  border: 1px solid rgba(231, 156, 254, 0.3) !important;
  border-radius: 50% !important;
  color: #e79cfe !important;
}

[class*=row__0624f] {
  background-color: #341c4a !important;
  border: 1px solid rgba(255, 121, 198, 0.12) !important;
  border-radius: 8px !important;
  padding: 12px !important;
}

[class*=iconContainer__0624f] {
  background-color: transparent !important;
}

[class*=groupHeader__0624f] {
  color: #7f849c !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

[class*=divider__1de9c] {
  background-color: rgba(255, 121, 198, 0.1) !important;
  border: none !important;
  height: 1px !important;
}

[class*=textButton__][class*=primary__] {
  color: #8be9fd !important;
}
[class*=textButton__][class*=primary__]:hover {
  color: #bdf3fe !important;
}

[class*=textButton__][class*=secondary__] {
  color: #f38ba8 !important;
}
[class*=textButton__][class*=secondary__]:hover {
  color: #f7b0c4 !important;
}

[data-mana-component=button] {
  border-radius: 4px;
  font-weight: 500;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
[data-mana-component=button]:active {
  transform: scale(0.97);
}

[data-mana-component=button][class*=primary_] {
  background-color: #e79cfe !important;
  color: #1b0d28 !important;
}
[data-mana-component=button][class*=primary_]:hover {
  background-color: #f1c4fe !important;
}

[data-mana-component=button][class*=secondary_] {
  background-color: #3d2454 !important;
  color: #a6adc8 !important;
  border: 1px solid rgba(255, 121, 198, 0.2) !important;
}
[data-mana-component=button][class*=secondary_]:hover {
  background-color: rgba(255, 121, 198, 0.1) !important;
  color: #f8f8f2 !important;
  border-color: rgba(255, 121, 198, 0.4) !important;
}

[data-mana-component=button][class*=critical-primary_] {
  background-color: #f38ba8 !important;
  color: #1b0d28 !important;
}
[data-mana-component=button][class*=critical-primary_]:hover {
  background-color: #f7b0c4 !important;
}

[data-mana-component=button][class*=critical-secondary_] {
  background-color: transparent !important;
  color: #f38ba8 !important;
  border: 1px solid rgba(243, 139, 168, 0.4) !important;
}
[data-mana-component=button][class*=critical-secondary_]:hover {
  background-color: rgba(243, 139, 168, 0.1) !important;
  border-color: #f38ba8 !important;
}

[data-mana-component=button][class*=icon-only_] {
  background-color: transparent !important;
  color: #7f849c !important;
}
[data-mana-component=button][class*=icon-only_]:hover {
  background-color: rgba(255, 121, 198, 0.08) !important;
  color: #f8f8f2 !important;
}

[class*=overlay_c0bea0],
[class*=overlay_b32ca4] {
  background-color: transparent !important;
}

[class*=section_bf424d] {
  background-color: transparent !important;
}

[class*=headings_bf424d],
[class*=header_bf424d] {
  background-color: transparent !important;
}

[class*=popout_] {
  background-color: #2d1a3e !important;
  border: 1px solid rgba(255, 121, 198, 0.15) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(27, 13, 40, 0.5) !important;
}

[class*=popout_] [class*=option_] {
  border-radius: 4px !important;
  color: #a6adc8 !important;
  transition: background-color 0.08s ease, color 0.08s ease;
}
[class*=popout_] [class*=option_]:hover {
  background-color: rgba(255, 121, 198, 0.1) !important;
  color: #f8f8f2 !important;
}
[class*=popout_] [class*=option_][aria-selected=true] {
  background-color: rgba(255, 121, 198, 0.15) !important;
  color: #ff79c6 !important;
}

[class*=popout_] [class*=rowContainer_] {
  background-color: transparent !important;
}

[class*=selectedIcon_] {
  color: #e79cfe !important;
}
[class*=selectedIcon_] circle {
  fill: rgba(231, 156, 254, 0.15) !important;
}
[class*=selectedIcon_] path {
  fill: #e79cfe !important;
}

[class*=container__6b700] {
  background-color: transparent !important;
}

[class*=card__5cea9] {
  background-color: #341c4a !important;
  border: 1px solid rgba(255, 121, 198, 0.1) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

[class*=header__5cea9] {
  background-color: #2d1a3e !important;
  border-bottom: 1px solid rgba(255, 121, 198, 0.12) !important;
}

[class*=iconContainer__5cea9] {
  background-color: transparent !important;
  color: #7f849c !important;
}
[class*=iconContainer__5cea9] svg path {
  fill: #7f849c !important;
}

[class*=text__5cea9] {
  background-color: transparent !important;
}

[class*=usersList__5cea9] {
  background-color: transparent !important;
}

[class*=row__5cea9] {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(255, 121, 198, 0.08) !important;
  transition: background-color 0.1s ease;
}
[class*=row__5cea9]:last-child {
  border-bottom: none !important;
}
[class*=row__5cea9]:hover {
  background-color: rgba(255, 121, 198, 0.04) !important;
}

[class*=userInfo__5cea9] {
  background-color: transparent !important;
}

[class*=loadMoreContainer__5cea9] {
  background-color: transparent !important;
  border-top: 1px solid rgba(255, 121, 198, 0.08) !important;
}

[class*=loadMoreButton__5cea9] {
  background-color: transparent !important;
  color: #8be9fd !important;
  cursor: pointer;
  text-align: center;
  transition: color 0.1s ease;
}
[class*=loadMoreButton__5cea9]:hover {
  color: #bdf3fe !important;
}

* {
  scrollbar-color: #7f849c #2d1a3e;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #2d1a3e;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #7f849c;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a6adc8;
}

::-webkit-scrollbar-corner {
  background: #2d1a3e;
}

[class*=checkbox],
[class*=checkboxWrapper] {
  background-color: #341c4a;
  border: 2px solid rgba(255, 121, 198, 0.4);
  border-radius: 4px;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
[class*=checkbox]:hover,
[class*=checkboxWrapper]:hover {
  border-color: #ff79c6;
}
[class*=checkbox][aria-checked=true], [class*=checkbox][class*=checked],
[class*=checkboxWrapper][aria-checked=true],
[class*=checkboxWrapper][class*=checked] {
  background-color: #e79cfe;
  border-color: #e79cfe;
}
[class*=checkbox][aria-checked=true] svg, [class*=checkbox][aria-checked=true] path,
[class*=checkbox][aria-checked=true] [class*=checkboxIcon], [class*=checkbox][class*=checked] svg, [class*=checkbox][class*=checked] path,
[class*=checkbox][class*=checked] [class*=checkboxIcon],
[class*=checkboxWrapper][aria-checked=true] svg,
[class*=checkboxWrapper][aria-checked=true] path,
[class*=checkboxWrapper][aria-checked=true] [class*=checkboxIcon],
[class*=checkboxWrapper][class*=checked] svg,
[class*=checkboxWrapper][class*=checked] path,
[class*=checkboxWrapper][class*=checked] [class*=checkboxIcon] {
  color: #1b0d28;
  fill: #1b0d28;
}

[data-mana-component=checkbox] {
  background-color: #341c4a !important;
  border: 2px solid rgba(255, 121, 198, 0.4) !important;
  border-radius: 4px !important;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
[data-mana-component=checkbox] svg, [data-mana-component=checkbox] path {
  fill: transparent !important;
}
[data-mana-component=checkbox]:hover {
  border-color: #ff79c6 !important;
}

[aria-checked=true] [data-mana-component=checkbox],
[data-checked=true] [data-mana-component=checkbox],
[class*=checked_] [data-mana-component=checkbox],
[class*=enabled_] [data-mana-component=checkbox],
:has(> input:checked) [data-mana-component=checkbox],
label:has(input:checked) [data-mana-component=checkbox],
input:checked ~ [data-mana-component=checkbox] {
  background-color: #e79cfe !important;
  border-color: #e79cfe !important;
}
[aria-checked=true] [data-mana-component=checkbox] svg, [aria-checked=true] [data-mana-component=checkbox] path,
[data-checked=true] [data-mana-component=checkbox] svg,
[data-checked=true] [data-mana-component=checkbox] path,
[class*=checked_] [data-mana-component=checkbox] svg,
[class*=checked_] [data-mana-component=checkbox] path,
[class*=enabled_] [data-mana-component=checkbox] svg,
[class*=enabled_] [data-mana-component=checkbox] path,
:has(> input:checked) [data-mana-component=checkbox] svg,
:has(> input:checked) [data-mana-component=checkbox] path,
label:has(input:checked) [data-mana-component=checkbox] svg,
label:has(input:checked) [data-mana-component=checkbox] path,
input:checked ~ [data-mana-component=checkbox] svg,
input:checked ~ [data-mana-component=checkbox] path {
  fill: #1b0d28 !important;
  color: #1b0d28 !important;
}

[class*=outerRadioBase__] {
  fill: #341c4a !important;
  stroke: rgba(255, 121, 198, 0.4) !important;
  stroke-width: 2 !important;
}

[aria-checked=true] [class*=outerRadioFill__],
[data-checked=true] [class*=outerRadioFill__],
[class*=checked_] [class*=outerRadioFill__],
[class*=enabled_] [class*=outerRadioFill__],
:has(> input:checked) [class*=outerRadioFill__],
label:has(input:checked) [class*=outerRadioFill__],
input:checked ~ [class*=outerRadioFill__] {
  fill: #e79cfe !important;
}

[aria-checked=true] [class*=innerDotRadio__],
[data-checked=true] [class*=innerDotRadio__],
[class*=checked_] [class*=innerDotRadio__],
[class*=enabled_] [class*=innerDotRadio__],
:has(> input:checked) [class*=innerDotRadio__],
label:has(input:checked) [class*=innerDotRadio__],
input:checked ~ [class*=innerDotRadio__] {
  fill: #1b0d28 !important;
}

[data-mana-component=switch] {
  border: 1px solid rgba(255, 121, 198, 0.3) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

[data-mana-component=switch] [class*=thumb_] rect {
  fill: #f8f8f2 !important;
}

[aria-checked=true] [data-mana-component=switch],
[data-checked=true] [data-mana-component=switch],
[class*=checked_] [data-mana-component=switch],
[class*=enabled_] [data-mana-component=switch],
:has(> input:checked) [data-mana-component=switch],
label:has(input:checked) [data-mana-component=switch],
input:checked ~ [data-mana-component=switch] {
  background-color: #e79cfe !important;
  border-color: #e79cfe !important;
}
[aria-checked=true] [data-mana-component=switch] [class*=thumb_] rect,
[data-checked=true] [data-mana-component=switch] [class*=thumb_] rect,
[class*=checked_] [data-mana-component=switch] [class*=thumb_] rect,
[class*=enabled_] [data-mana-component=switch] [class*=thumb_] rect,
:has(> input:checked) [data-mana-component=switch] [class*=thumb_] rect,
label:has(input:checked) [data-mana-component=switch] [class*=thumb_] rect,
input:checked ~ [data-mana-component=switch] [class*=thumb_] rect {
  fill: #1b0d28 !important;
}

[class*=slider-]::-webkit-slider-thumb,
[class*=control-] [class*=slider]::-webkit-slider-thumb {
  background-color: #e79cfe;
}
[class*=slider-]::-moz-range-thumb,
[class*=control-] [class*=slider]::-moz-range-thumb {
  background-color: #e79cfe;
}

[class*=lookFilled][class*=colorGreen],
[class*=enabled-][class*=toggle] {
  background-color: #a6e3a1;
}

[class*=disabled-][class*=toggle] {
  background-color: #6c7086;
}

[class*=handle-][class*=toggle] {
  background-color: #1b0d28;
}

[class*=track_a562c8] {
  background-color: transparent !important;
  border: none !important;
}

[class*=bar_a562c8] {
  background-color: #2d1a3e !important;
  border-radius: 4px !important;
}

[class*=barFill_a562c8] {
  background-color: #e79cfe !important;
  border-radius: 4px !important;
}

[class*=grabber_a562c8] {
  background-color: #e79cfe !important;
  border: 2px solid #1b0d28 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 3px rgba(231, 156, 254, 0.35) !important;
  transition: box-shadow 0.15s ease !important;
}
[class*=grabber_a562c8]:hover {
  box-shadow: 0 0 0 5px rgba(231, 156, 254, 0.4) !important;
}

[class*=markValue_a562c8] {
  color: #7f849c !important;
  font-size: 11px !important;
}

[class*=markDash_a562c8] {
  background-color: rgba(255, 121, 198, 0.25) !important;
}

[class*=fixedContent__]::after,
[class*=searchBarContainer__]::after {
  display: none !important;
  background: none !important;
}

[class*=wrapper__72c38],
[class*=container__0f084] {
  background-color: #341c4a !important;
  border: 1px solid rgba(255, 121, 198, 0.15) !important;
  border-radius: 4px !important;
  color: #f8f8f2 !important;
  transition: border-color 0.15s ease !important;
}
[class*=wrapper__72c38]::after,
[class*=container__0f084]::after {
  display: none !important;
}
[class*=wrapper__72c38]:focus-within,
[class*=container__0f084]:focus-within {
  border-color: rgba(255, 121, 198, 0.4) !important;
}

[class*=input__0f084] {
  background-color: transparent !important;
  color: #f8f8f2 !important;
  border: none !important;
}
[class*=input__0f084]::placeholder {
  color: #7f849c !important;
}

[class*=icon__0f084] {
  color: #7f849c !important;
}
[class*=icon__0f084] svg path {
  fill: #7f849c !important;
}

input[class*=input-],
textarea[class*=input-],
[class*=input-]:not([class*=disabled]) {
  background-color: #341c4a;
  border: 1px solid rgba(255, 121, 198, 0.15);
  border-radius: 4px;
  color: #f8f8f2;
  transition: border-color 0.15s ease;
}
input[class*=input-]::placeholder,
textarea[class*=input-]::placeholder,
[class*=input-]:not([class*=disabled])::placeholder {
  color: #7f849c;
}
input[class*=input-]:focus,
textarea[class*=input-]:focus,
[class*=input-]:not([class*=disabled]):focus {
  border-color: rgba(255, 121, 198, 0.4);
  outline: none;
}
input[class*=input-][class*=error], input[class*=input-][aria-invalid=true],
textarea[class*=input-][class*=error],
textarea[class*=input-][aria-invalid=true],
[class*=input-]:not([class*=disabled])[class*=error],
[class*=input-]:not([class*=disabled])[aria-invalid=true] {
  border-color: rgba(243, 139, 168, 0.5);
}

[class*=numberBadge],
[class*=badge-] {
  background-color: #ff79c6;
  border-radius: 10px;
  color: #1b0d28;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 5px;
}

[class*=upperBadge],
[class*=lowerBadge] {
  background-color: #f38ba8;
}

[class*=divider-] [class*=content-],
[class*=hasContent] [class*=content-] {
  color: #6c7086;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
[class*=divider-]::before, [class*=divider-]::after,
[class*=hasContent]::before,
[class*=hasContent]::after {
  background-color: rgba(255, 121, 198, 0.12);
}

[class*=spinner-],
[class*=wanderingCubes],
circle[class*=spinner] {
  color: #e79cfe;
  stroke: #e79cfe;
}

::selection {
  background-color: rgba(231, 156, 254, 0.3);
  color: #f8f8f2;
}

:focus-visible {
  outline: 2px solid rgba(255, 121, 198, 0.5);
  outline-offset: 2px;
}

[class*=mention] {
  background-color: rgba(255, 121, 198, 0.12);
  border-radius: 3px;
  color: #ff79c6;
  font-weight: 500;
  padding: 0 2px;
  transition: background-color 0.1s ease;
}
[class*=mention]:hover {
  background-color: rgba(255, 121, 198, 0.25);
  color: #ff79c6;
}

[class*=statusOnline],
[class*=status-online] {
  background-color: #a6e3a1;
}

[class*=statusIdle],
[class*=status-idle] {
  background-color: #f9e2af;
}

[class*=statusDnd],
[class*=status-dnd] {
  background-color: #f38ba8;
}

[class*=statusOffline],
[class*=status-offline] {
  background-color: #6c7086;
}

[class*=panels-],
[class*=privateChannels] [class*=panelContainer] {
  background-color: #2d1a3e;
  border-top: 1px solid rgba(255, 121, 198, 0.1);
}
[class*=panels-] [class*=username-],
[class*=panels-] [class*=usernameContainer],
[class*=privateChannels] [class*=panelContainer] [class*=username-],
[class*=privateChannels] [class*=panelContainer] [class*=usernameContainer] {
  color: #f8f8f2;
  font-weight: 600;
}
[class*=panels-] button,
[class*=privateChannels] [class*=panelContainer] button {
  color: #7f849c;
  border-radius: 4px;
  transition: background-color 0.1s ease, color 0.1s ease;
}
[class*=panels-] button:hover,
[class*=privateChannels] [class*=panelContainer] button:hover {
  background-color: rgba(255, 121, 198, 0.1);
  color: #ff79c6;
}
[class*=panels-] button[class*=active], [class*=panels-] button[aria-pressed=true],
[class*=privateChannels] [class*=panelContainer] button[class*=active],
[class*=privateChannels] [class*=panelContainer] button[aria-pressed=true] {
  color: #f8f8f2;
}
[class*=panels-] button[class*=muted], [class*=panels-] button[class*=deafened],
[class*=privateChannels] [class*=panelContainer] button[class*=muted],
[class*=privateChannels] [class*=panelContainer] button[class*=deafened] {
  color: #f38ba8;
}

html,
body,
#app-mount {
  background-color: #1b0d28 !important;
}

[class*=bg__] {
  background-color: #38234b !important;
}

#app-mount > [class*=bar_] {
  background-color: #2d1a3e !important;
  border-bottom: 1px solid rgba(255, 121, 198, 0.1) !important;
}

[class*=base__] {
  background-color: #38234b !important;
}

nav[class*=container__] {
  background-color: #341c4a !important;
}

nav[class*=container__] > [class*=header_],
[class*=primaryInfo_],
[class*=guildDropdown_] {
  background-color: #341c4a !important;
}

[class*=headerEllipse],
[class*=headerGlass_] {
  background-color: transparent !important;
  opacity: 0 !important;
}

[class*=containerWithMargin__] {
  background-color: #3d2454 !important;
  border: 1px solid rgba(255, 121, 198, 0.12) !important;
  border-radius: 8px !important;
}

[class*=progressContainer__] {
  background-color: rgba(255, 121, 198, 0.1) !important;
  border-radius: 4px !important;
}

[class*=progress__] {
  background-color: #ff79c6 !important;
  border-radius: 4px !important;
}

[class*=sidebar__],
[class*=sidebarList__] {
  background-color: #341c4a !important;
}
[class*=sidebar__]::after,
[class*=sidebarList__]::after {
  background-color: #2d1a3e !important;
}

[class*=guilds__] {
  background-color: #261537 !important;
}

[class*=scrollerBase_]:not([class*=popout_]) {
  background-color: transparent !important;
}

[class*=containerDefault_] {
  background-color: transparent !important;
  border-radius: 4px !important;
}
[class*=containerDefault_]:hover {
  background-color: rgba(255, 121, 198, 0.08) !important;
}
[class*=containerDefault_][class*=selected_], [class*=containerDefault_][class*=modeSelected__] {
  background-color: rgba(255, 121, 198, 0.15) !important;
}

[class*=containerDefault_] [class*=name__] {
  color: #a6adc8 !important;
}

[class*=containerDefault_]:hover [class*=name__],
[class*=containerDefault_][class*=selected_] [class*=name__] {
  color: #ff79c6 !important;
}

[class*=containerDefault_] [class*=icon__] {
  color: #7f849c !important;
}

[class*=containerDefault_]:hover [class*=icon__],
[class*=containerDefault_][class*=selected_] [class*=icon__] {
  color: #ff79c6 !important;
}

[class*=themed__] {
  background-color: #38234b !important;
  border-bottom: 1px solid rgba(255, 121, 198, 0.1) !important;
}

[class*=titleWrapper_]::after,
[class*=children__]::after {
  background: #38234b !important;
  background-color: #38234b !important;
  border: none !important;
  box-shadow: none !important;
}

[class*=panels__] {
  background-color: #2d1a3e !important;
  border-top: 1px solid rgba(255, 121, 198, 0.1) !important;
}

[class*=friends__],
[class*=peopleList__],
[class*=peopleColumn__],
[class*=tabBody__] {
  background-color: #38234b !important;
}

[class*=nowPlayingColumn__],
[class*=friendsActivity__] {
  background-color: #341c4a !important;
  border-left: 1px solid rgba(255, 121, 198, 0.1) !important;
}

[class*=header__7d20c] {
  color: #7f849c !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

[class*=itemCard__7e549] {
  background-color: transparent !important;
}

[class*=outer_bf1984] {
  background-color: transparent !important;
  border-radius: 8px !important;
}

[class*=interactive_bf1984] {
  border-radius: 8px !important;
  transition: background-color 0.1s ease;
}
[class*=interactive_bf1984]:hover {
  background-color: rgba(255, 121, 198, 0.08) !important;
}

[class*=headerSimple__00943],
[class*=headerFull__00943],
[class*=header__00943] {
  background-color: transparent !important;
  border-bottom: none !important;
}

[class*=body__00943],
[class*=inset_bf1984],
[class*=section__00943] {
  background-color: transparent !important;
  border-radius: 0 !important;
}

[class*=textContent__00943] {
  background-color: transparent !important;
}

[class*=clickable__00943] {
  border-radius: 4px !important;
  transition: color 0.1s ease;
}
[class*=clickable__00943]:hover [class*=textContent__00943] {
  color: #ff79c6 !important;
}

[class*=headerIcon__00943] {
  border-radius: 4px !important;
}

[class*=activitySection__00943],
[class*=spotifySection__00943] {
  background-color: #3d2454 !important;
  border: 1px solid rgba(255, 121, 198, 0.1) !important;
  border-radius: 8px !important;
}

[class*=activitySectionAssets__00943],
[class*=activitySectionDetails__00943] {
  background-color: transparent !important;
}

[class*=largeImage__00943] {
  border-radius: 6px !important;
}

[class*=voiceSectionAssets__00943],
[class*=voiceSectionDetails__00943] {
  background-color: transparent !important;
}

[class*=voiceSectionIconWrapper__00943] {
  background-color: rgba(231, 156, 254, 0.15) !important;
  border-radius: 50% !important;
}

[class*=voiceSectionIcon__00943] {
  color: #e79cfe !important;
}

[class*=wrapper_e45a82],
[class*=partyMembers_e45a82] {
  background-color: transparent !important;
}

[class*=privateChannels__] {
  background-color: #341c4a !important;
}

[class*=chat__] {
  background-color: #38234b !important;
}

[class*=customTheme_],
[class*=content_f75fb0] {
  background-color: #38234b !important;
}

[class*=content_f75fb0]:has([class*=emptyStateContainer__]) {
  background: linear-gradient(to bottom, #1b0d28 0%, #38234b 100%) !important;
}

[class*=wrapper__33d12],
[class*=emptyStateContainer__65428] {
  background-color: transparent !important;
}

[class*=text__33d12] {
  color: #a6adc8 !important;
}

[class*=image__33d12] {
  background-color: transparent !important;
}

[class*=chatGradient__],
[class*=chatGradientBase__] {
  background: transparent !important;
  background-image: none !important;
}

[class*=channelBottomBarArea] {
  background-color: #38234b !important;
}

[class*=themedBackground] {
  background-color: #341c4a !important;
}

[class*=scrollableContainer] {
  background-color: #341c4a !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 121, 198, 0.12) !important;
}

[class*=channelTextArea_],
[class*=channelTextArea__] {
  background-color: transparent !important;
}

[class*=nowPlayingWidget],
[class*=activityPanel],
[class*=spotifyModal],
[class*=spotifyControls],
[class*=activity_] {
  background-color: #2d1a3e !important;
  border: 1px solid rgba(255, 121, 198, 0.12) !important;
  border-radius: 8px !important;
}

[class*=standardSidebarView__] {
  background-color: #341c4a !important;
}

[class*=sidebarRegion__] {
  background-color: #341c4a !important;
}

[class*=contentRegion__] {
  background-color: #38234b !important;
}

[class*=contentRegionScroller__] {
  background-color: #38234b !important;
}

[class*=addonCard],
[class*=pluginCard],
[class*=themeCard] {
  background-color: #341c4a !important;
  border: 1px solid rgba(255, 121, 198, 0.12) !important;
  border-radius: 8px !important;
  color: #f8f8f2 !important;
}
[class*=addonCard]:hover,
[class*=pluginCard]:hover,
[class*=themeCard]:hover {
  border-color: rgba(255, 121, 198, 0.3) !important;
  background-color: #3d2454 !important;
}

[class*=userInfoSection__],
[class*=tableRow__],
[class*=fieldList__] {
  background-color: #341c4a !important;
  border: 1px solid rgba(255, 121, 198, 0.08) !important;
  border-radius: 8px !important;
}

[class*=membersWrap_] {
  background-color: #341c4a !important;
}

[class*=membersWrap_] [class*=content_] {
  background-color: transparent !important;
}

[class*=openOnHover__] {
  background-color: #3d2454 !important;
  border: 1px solid rgba(255, 121, 198, 0.12) !important;
  border-radius: 8px !important;
  color: #f8f8f2 !important;
}

[class*=member__],
[class*=member_][class*=clickable__],
[class*=childContainer__],
[class*=memberInner__],
[class*=layout__] {
  background-color: transparent !important;
  border-radius: 4px !important;
  transition: background-color 0.1s ease;
}

[class*=member__]:hover,
[class*=member_][class*=clickable__]:hover {
  background-color: rgba(255, 121, 198, 0.08) !important;
}

[class*=member__][aria-selected=true],
[class*=member_][class*=clickable__][aria-selected=true] {
  background-color: rgba(255, 121, 198, 0.15) !important;
}

[class*=membersGroup_] {
  color: #7f849c !important;
  background-color: transparent !important;
}

.vc-shc-container {
  background-color: #38234b !important;
  color: #f8f8f2 !important;
}

.vc-shc-allowed-users-and-roles-container {
  background-color: #341c4a !important;
  border: 1px solid rgba(255, 121, 198, 0.12) !important;
  border-radius: 8px !important;
  padding: 8px !important;
  color: #f8f8f2 !important;
}

.vc-shc-container [class*=members__] {
  background-color: transparent !important;
}

.vc-shc-container [class*=role__] {
  background-color: rgba(255, 121, 198, 0.08) !important;
  border: 1px solid rgba(255, 121, 198, 0.12) !important;
  border-radius: 4px !important;
  color: #a6adc8 !important;
}

[class*=interactive__] {
  border-radius: 4px !important;
  transition: background-color 0.1s ease;
}
[class*=interactive__]:hover {
  background-color: rgba(255, 121, 198, 0.08) !important;
}
[class*=interactive__][class*=interactiveSelected__] {
  background-color: rgba(255, 121, 198, 0.15) !important;
  color: #ff79c6 !important;
}

[class*=listItemContents_] {
  background-color: transparent !important;
}

[class*=peopleListItem_],
[class*=friendRow_] {
  border-radius: 8px !important;
  transition: background-color 0.1s ease;
}
[class*=peopleListItem_]:hover,
[class*=friendRow_]:hover {
  background-color: rgba(255, 121, 198, 0.08) !important;
}
[class*=peopleListItem_]:hover [class*=listItemContents_],
[class*=friendRow_]:hover [class*=listItemContents_] {
  background-color: transparent !important;
}

[class*=actionButton_] {
  color: #7f849c !important;
  background-color: #3d2454 !important;
  border-radius: 50% !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}
[class*=actionButton_]:hover {
  color: #ff79c6 !important;
  background-color: rgba(255, 121, 198, 0.12) !important;
}
[class*=actionButton_]:focus, [class*=actionButton_]:focus-visible {
  outline: 2px solid rgba(255, 121, 198, 0.5) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
[class*=actionButton_] [class*=icon_] {
  color: inherit !important;
}

*:focus-visible {
  outline: 2px solid rgba(255, 121, 198, 0.5) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

[class*=tutorial__] {
  background-color: #341c4a !important;
  border: 1px solid rgba(255, 121, 198, 0.12) !important;
  border-radius: 8px !important;
  color: #f8f8f2 !important;
}

[class*=list_][class*=scrollerBase_],
[class*=list_][class*=scrollerBase_] > [class*=content_] {
  background-color: #38234b !important;
}

li[class*=card_],
[class*=headerRow_],
[class*=columnsSpan_],
[class*=emptyMainCard_],
[class*=tagsContainer_] {
  background-color: transparent !important;
}

[class*=mainCard_] {
  background-color: #341c4a !important;
  border: 1px solid rgba(255, 121, 198, 0.1) !important;
  border-radius: 8px !important;
  color: #f8f8f2 !important;
}
[class*=mainCard_]:hover {
  background-color: #3d2454 !important;
  border-color: rgba(255, 121, 198, 0.25) !important;
}

[class*=sortDropdown_] {
  background-color: #3d2454 !important;
  color: #a6adc8 !important;
  border: 1px solid rgba(255, 121, 198, 0.15) !important;
  border-radius: 6px !important;
}
[class*=sortDropdown_]:hover {
  background-color: rgba(255, 121, 198, 0.1) !important;
  color: #f8f8f2 !important;
}

[class*=container_d9be46],
[class*=collapsed_] {
  background-color: #341c4a !important;
  border-radius: 8px !important;
}

[class*=inline__56dee],
[class*=container__56dee] {
  background-color: #3d2454 !important;
  border-radius: 8px !important;
}

[class*=archivedDivider_] {
  color: #7f849c !important;
}

[class*=button_][class*=primary_] {
  background-color: #e79cfe !important;
  color: #1b0d28 !important;
  font-weight: 600 !important;
}
[class*=button_][class*=primary_]:hover {
  background-color: #f1c4fe !important;
}

[class*=button_][class*=secondary_] {
  background-color: #3d2454 !important;
  color: #a6adc8 !important;
  border: 1px solid rgba(255, 121, 198, 0.2) !important;
}
[class*=button_][class*=secondary_]:hover {
  background-color: rgba(255, 121, 198, 0.1) !important;
  color: #f8f8f2 !important;
  border-color: rgba(255, 121, 198, 0.4) !important;
}

[class*=reactionBtn_],
[class*=addReactButton_] {
  background-color: #3d2454 !important;
  color: #a6adc8 !important;
  border: 1px solid rgba(255, 121, 198, 0.15) !important;
  border-radius: 16px !important;
}
[class*=reactionBtn_]:hover,
[class*=addReactButton_]:hover {
  background-color: rgba(255, 121, 198, 0.1) !important;
  color: #ff79c6 !important;
  border-color: rgba(255, 121, 198, 0.35) !important;
}

div:has(> [class*=reactButtons__]),
[class*=reactButtons__],
[class*=buttons__] {
  background-color: transparent !important;
}

[class*=iconWrapper__] {
  background-color: transparent !important;
}

[class*=resizeHandle__] {
  background-color: #2d1a3e !important;
}
[class*=resizeHandle__]:hover {
  background-color: rgba(255, 121, 198, 0.25) !important;
}

div:has(> [class*=searchBarContainer_]) {
  background-color: #38234b !important;
}

[class*=searchBarContainer_] {
  background-color: transparent !important;
}

[class*=searchBarContainer_] [class*=wrapper__] {
  background-color: #341c4a !important;
  border: 1px solid rgba(255, 121, 198, 0.2) !important;
  border-radius: 8px !important;
}

[class*=header__32c75] {
  color: #f8f8f2 !important;
}

[class*=viewMore_] {
  color: #e79cfe !important;
}
[class*=viewMore_]:hover {
  color: #f3ceff !important;
}

[class*=container_cb32c7]:not([class*=rowContainer_]) {
  background-color: #341c4a !important;
  border: 1px solid rgba(255, 121, 198, 0.1) !important;
  border-radius: 8px !important;
}
[class*=container_cb32c7]:not([class*=rowContainer_]):hover {
  background-color: #3d2454 !important;
  border-color: rgba(255, 121, 198, 0.3) !important;
}

[class*=rowContainer_cb32c7] {
  background-color: transparent !important;
}
[class*=rowContainer_cb32c7]:hover {
  background-color: rgba(255, 121, 198, 0.06) !important;
  border-radius: 4px !important;
}

[class*=rowDivider_cb32c7] {
  background-color: rgba(255, 121, 198, 0.1) !important;
  height: 1px !important;
}

[class*=container__19cf2] {
  background-color: #3d2454 !important;
  border: 1px solid rgba(255, 121, 198, 0.12) !important;
  border-radius: 8px !important;
  color: #f8f8f2 !important;
}

section:has([class*=backButton_]) {
  background-color: #38234b !important;
}

section:has([class*=backButton_]) [class*=header_] {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(255, 121, 198, 0.1) !important;
}

[class*=backButton_],
[class*=clickable__][class*=backButton_] {
  background-color: transparent !important;
  color: #a6adc8 !important;
  border-radius: 4px !important;
}
[class*=backButton_] svg, [class*=backButton_] svg path,
[class*=clickable__][class*=backButton_] svg,
[class*=clickable__][class*=backButton_] svg path {
  fill: #a6adc8 !important;
  transition: fill 0.1s ease;
}
[class*=backButton_]:hover,
[class*=clickable__][class*=backButton_]:hover {
  background-color: rgba(255, 121, 198, 0.1) !important;
  color: #ff79c6 !important;
}
[class*=backButton_]:hover svg, [class*=backButton_]:hover svg path,
[class*=clickable__][class*=backButton_]:hover svg,
[class*=clickable__][class*=backButton_]:hover svg path {
  fill: #ff79c6 !important;
}

[class*=rows_] {
  background-color: transparent !important;
}

[class*=applicationStore__],
[class*=premiumPromo__],
[class*=nitroUpsell__],
[class*=storePage__] {
  background-color: #38234b !important;
}