@font-face {
  font-family: "Manrope";
  src: url("/forticia-brand/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-family-sans: "Manrope", "Inter", system-ui, -apple-system, sans-serif;
  --ft-bg: #030304;
  --ft-ink: #f6f4f6;
  --ft-ink-2: #b9b6bd;
  --ft-ink-3: #84828a;
  --ft-pink: #d303fc;
  --ft-pink-soft: #e58cff;
  --ft-line: rgba(246, 244, 246, 0.08);
  --ft-line-2: rgba(246, 244, 246, 0.16);
  --ft-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body,
html {
  font-family: var(--font-family-sans) !important;
  background-color: var(--ft-bg) !important;
  color: var(--ft-ink) !important;
}

.LoadingScreen {
  --background-color: var(--ft-bg) !important;
  background: radial-gradient(60% 50% at 50% 40%, rgba(211, 3, 252, 0.14), transparent 70%), var(--ft-bg) !important;
}

.LoadingScreen__background {
  opacity: 0 !important;
}

.LoadingAnimation__spinner-container circle {
  stroke: var(--ft-pink) !important;
}

.LoadingAnimation__compass circle {
  fill: var(--ft-pink) !important;
}

.header-footer-route,
.get-app {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background: var(--ft-bg) !important;
  font-family: var(--font-family-sans) !important;
}

.header-footer-route::before,
.get-app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 56% at 78% 52%, rgba(211, 3, 252, 0.2), transparent 70%),
    radial-gradient(36% 40% at 8% 0%, rgba(211, 3, 252, 0.08), transparent 70%),
    linear-gradient(rgba(246, 244, 246, 0.035) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(90deg, rgba(246, 244, 246, 0.035) 1px, transparent 1px) 0 0 / 72px 72px;
  -webkit-mask-image: radial-gradient(90% 90% at 72% 50%, #000 30%, rgba(0, 0, 0, 0.55) 100%);
  mask-image: radial-gradient(90% 90% at 72% 50%, #000 30%, rgba(0, 0, 0, 0.55) 100%);
}

.header-footer-route-container {
  background: transparent !important;
  min-height: 100vh;
  display: flex !important;
  flex-direction: column;
}

.hfroute-header {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  width: min(1240px, calc(100% - clamp(40px, 8vw, 112px)));
  margin: 0 auto !important;
  align-self: center;
  padding: clamp(20px, 3vw, 32px) 0 0 !important;
  height: auto !important;
}

.hfroute-header .header-main {
  padding: 0 !important;
}

.hfroute-header .header-main > div {
  display: flex;
  align-items: center;
}

.hfroute-header .freeBadge,
.hfroute-header .header-logo-link + .header-logo-link {
  display: none !important;
}

.hfroute-header .header-logo-link {
  display: inline-block !important;
  width: 167px;
  height: 22px;
  background: url("/forticia-brand/logo.svg") left center / contain no-repeat;
  color: transparent !important;
  font-size: 0 !important;
}

.hfroute-header .header-logo-link svg {
  display: none !important;
}

.login-body {
  flex: 1;
  background: transparent !important;
  width: 100%;
  font-family: var(--font-family-sans) !important;
}

.login-body-content {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
  width: min(1240px, calc(100% - clamp(40px, 8vw, 112px)));
  margin: 0 auto !important;
  padding: clamp(32px, 6vw, 72px) 0 !important;
  min-height: calc(100vh - 160px);
  max-width: none !important;
}

.login-body-message {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  align-items: flex-start !important;
  animation: ft-rise 0.8s var(--ft-ease) both;
}

.login-body-message::before {
  content: "Forticia Chat";
  display: block;
  margin-bottom: 20px;
  color: var(--ft-pink-soft);
  font-size: 13.5px;
  font-weight: 500;
}

.login-body-message .login-body-custom-branding-image {
  display: none !important;
}

.login-body-message .login-body-custom-branding-markdown,
.login-body-message .login-body-custom-branding-markdown p {
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.login-body-message .login-body-custom-branding-markdown p::before {
  content: "Conversations,";
  display: block;
  font-size: clamp(42px, 5.6vw, 77px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--ft-ink);
}

.login-body-message .login-body-custom-branding-markdown p::after {
  content: "on the record.";
  display: block;
  font-size: clamp(42px, 5.6vw, 77px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--ft-pink);
}

.login-body-message::after {
  content: "Private messaging for the Forticia team: channels, threads and files in one place.";
  display: block;
  max-width: 44ch;
  margin-top: 22px;
  color: var(--ft-ink-2);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.7;
}

.login-body-action {
  width: auto !important;
  margin: 0 !important;
  justify-self: end;
  width: min(440px, 100%) !important;
}

.login-body-card {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  padding: clamp(24px, 3.4vw, 40px) !important;
  border: 1px solid rgba(246, 244, 246, 0.15) !important;
  border-radius: 28px !important;
  background: rgba(24, 13, 36, 0.56) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  backdrop-filter: blur(28px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(246, 244, 246, 0.04), 0 32px 72px -18px rgba(0, 0, 0, 0.88), 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  animation: ft-rise 0.8s 0.1s var(--ft-ease) both;
}

.login-body-card-content {
  padding: 0 !important;
  margin: 0 !important;
}

.login-body-card .login-body-custom-branding-markdown {
  display: none !important;
}

.login-body-card-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-align: left !important;
}

.login-body-card-title::before {
  content: "Sign in";
  display: block;
  font-size: 28px !important;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ft-ink);
}

.login-body-card-title::after {
  content: "Use the account an administrator or workspace lead set up for you.";
  display: block;
  margin-top: 12px;
  font-size: 14px !important;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
  color: var(--ft-ink-2);
}

.login-body-card-form {
  display: flex !important;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px !important;
  padding: 0 !important;
}

.login-body-card-form-input,
.login-body-card-form .Input_container {
  margin: 0 !important;
}

.login-body input.form-control,
.login-body .Input_wrapper input,
.login-body .Input {
  height: 40px !important;
  box-sizing: border-box;
  padding: 0 12px !important;
  border: 1px solid var(--ft-line-2) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(246, 244, 246, 0.012)), #070509 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35) !important;
  color: var(--ft-ink) !important;
  font-family: var(--font-family-sans) !important;
  font-size: 14px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-body input.form-control::placeholder {
  color: var(--ft-ink-3) !important;
}

.login-body input.form-control:focus {
  border-color: rgba(211, 3, 252, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(211, 3, 252, 0.2) !important;
  outline: none !important;
}

.login-body .Input_fieldset,
.login-body .Input_fieldset:focus-within {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.login-body .Input_legend {
  display: none !important;
}

.login-body .Input_wrapper {
  position: relative;
  width: 100% !important;
  margin: 0 !important;
}

.login-body .Input_container {
  width: 100% !important;
}

.login-body .password-input-with-toggle input {
  padding-right: 44px !important;
}

.login-body .password-input-toggle {
  position: absolute !important;
  top: 50% !important;
  right: 6px !important;
  transform: translateY(-50%);
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ft-ink-3) !important;
  border-radius: 999px !important;
}

.login-body .Input_fieldset.password-input {
  position: relative;
}

.login-body .password-input-toggle:hover {
  color: var(--ft-pink-soft) !important;
  background: rgba(211, 3, 252, 0.1) !important;
}

.login-body-card-form-link {
  margin: -4px 0 0 !important;
  padding: 0 !important;
  text-align: left !important;
  font-size: 12px !important;
}

.login-body-card-form-link a,
.login-body-alternate-link a {
  color: var(--ft-pink-soft) !important;
  text-underline-offset: 3px;
  text-decoration: none !important;
}

.login-body-card-form-link a:hover,
.login-body-alternate-link a:hover {
  text-decoration: underline !important;
}

.login-body button[type="submit"],
.login-body .btn-primary {
  width: 100%;
  height: 44px !important;
  padding: 0 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #e04dff 0%, #d303fc 55%, #bd02e0 100%) !important;
  color: #0d0014 !important;
  font-family: var(--font-family-sans) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 24px -10px rgba(211, 3, 252, 0.7) !important;
  transition: box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.login-body button[type="submit"]:hover,
.login-body .btn-primary:hover {
  background: linear-gradient(180deg, #ea72ff 0%, #de2bff 55%, #c80aee 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 32px -8px rgba(211, 3, 252, 0.85) !important;
}

.login-body button[type="submit"]:active,
.login-body .btn-primary:active {
  transform: translateY(1px);
}

.login-body-card-form-divider,
.login-body .divider {
  border-color: var(--ft-line) !important;
}

.login-body-card-form-divider-label {
  background: transparent !important;
  color: var(--ft-ink-3) !important;
  font-size: 12px !important;
  text-transform: none !important;
}

.login-body .error-text,
.login-body .Input___error,
.login-body .has-error {
  color: #ee7a86 !important;
}

.hfroute-footer {
  background: transparent !important;
  border: 0 !important;
  width: min(1240px, calc(100% - clamp(40px, 8vw, 112px)));
  margin: 0 auto !important;
  align-self: center;
  padding: 0 0 24px !important;
  justify-content: flex-start !important;
  gap: 18px;
}

.hfroute-footer .footer-copyright {
  font-size: 0 !important;
  color: var(--ft-ink-3) !important;
}

.hfroute-footer .footer-copyright::after {
  content: "© 2026 Forticia";
  font-size: 12px;
}

.hfroute-footer .footer-link {
  display: none !important;
}

.get-app__header {
  width: min(1240px, calc(100% - clamp(40px, 8vw, 112px)));
  margin: 0 auto !important;
  padding: clamp(20px, 3vw, 32px) 0 0;
  display: flex;
  align-items: center;
}

.get-app__custom-logo,
.get-app__custom-site-name {
  display: none !important;
}

.get-app__header::before {
  content: "";
  display: block;
  width: 167px;
  height: 22px;
  background: url("/forticia-brand/logo.svg") left center / contain no-repeat;
}

.get-app__dialog {
  background: transparent !important;
  min-height: calc(100vh - 100px);
  align-items: center;
}

.get-app__graphic {
  display: none !important;
}

.get-app__dialog-body {
  max-width: 480px;
  margin: 0 auto;
  padding: clamp(24px, 3.4vw, 40px) !important;
  border: 1px solid rgba(246, 244, 246, 0.15);
  border-radius: 28px;
  background: rgba(24, 13, 36, 0.56);
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  backdrop-filter: blur(28px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 32px 72px -18px rgba(0, 0, 0, 0.88), 0 4px 14px rgba(0, 0, 0, 0.35);
  text-align: left;
}

.get-app__launching h1 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ft-ink);
}

.get-app__alternative,
.get-app__preference,
.get-app__download-link {
  color: var(--ft-ink-2) !important;
  font-size: 14px;
}

.get-app__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0;
}

.get-app__buttons .btn {
  width: 100%;
  height: 44px;
  border-radius: 999px !important;
  font-weight: 700;
}

.get-app__buttons .btn-primary {
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: linear-gradient(180deg, #e04dff 0%, #d303fc 55%, #bd02e0 100%) !important;
  color: #0d0014 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 24px -10px rgba(211, 3, 252, 0.7);
}

.get-app__buttons .btn-tertiary {
  border: 1px solid var(--ft-line-2) !important;
  background: linear-gradient(180deg, rgba(246, 244, 246, 0.09), rgba(246, 244, 246, 0.025)) !important;
  color: var(--ft-ink) !important;
}

.get-app__download-link a {
  color: var(--ft-pink-soft) !important;
}

@media (max-width: 880px) {
  .login-body-content {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 32px;
    min-height: 0;
  }

  .login-body-action {
    justify-self: stretch;
    width: 100% !important;
  }

  .login-body-card {
    border-radius: 24px !important;
  }

  .login-body-message .login-body-custom-branding-markdown p::before,
  .login-body-message .login-body-custom-branding-markdown p::after {
    font-size: clamp(35px, 11vw, 48px);
  }
}

@keyframes ft-rise {
  from { opacity: 0; transform: translateY(16px); }
}

@media (prefers-reduced-motion: reduce) {
  .login-body-message,
  .login-body-card {
    animation: none !important;
  }
}

.header-footer-route .hfroute-header,
.header-footer-route .hfroute-footer {
  box-sizing: border-box !important;
  width: min(1240px, calc(100% - clamp(40px, 8vw, 112px))) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.login-body .login-body-card-form-input,
.login-body .Input_container,
.login-body .Input_fieldset,
.login-body .Input_wrapper {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

.login-body .login-body-card-form-password-input {
  position: relative;
}

.login-body .Input_wrapper input {
  width: 100% !important;
}

.get-app__alternative span,
.get-app__alternative,
.get-app__preference span,
.get-app__preference {
  color: var(--ft-ink-2) !important;
}

.get-app__checkbox {
  accent-color: #d303fc;
}

.get-app__buttons .btn,
.get-app__buttons a {
  margin: 0 !important;
  box-sizing: border-box;
}

#initialPageLoadingAnimation,
.LoadingAnimation {
  position: relative;
  width: 72px !important;
  height: 72px !important;
  display: grid !important;
  place-items: center;
  color: transparent !important;
}

#initialPageLoadingAnimation svg,
.LoadingAnimation svg {
  display: none !important;
}

#initialPageLoadingAnimation::before,
.LoadingAnimation::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(246, 244, 246, 0.1);
  border-top-color: #d303fc;
  border-right-color: rgba(211, 3, 252, 0.4);
  animation: ft-spin 1.1s linear infinite;
  filter: drop-shadow(0 0 10px rgba(211, 3, 252, 0.55));
}

#initialPageLoadingAnimation::after,
.LoadingAnimation::after {
  content: "";
  width: 34px;
  height: 34px;
  background: url("/forticia-brand/logo-icon.svg") center / contain no-repeat;
  animation: ft-pulse 1.8s ease-in-out infinite;
}

.LoadingScreen {
  display: grid;
  place-items: center;
}

@keyframes ft-spin {
  to { transform: rotate(360deg); }
}

@keyframes ft-pulse {
  50% { opacity: 0.45; transform: scale(0.92); }
}

.login-body .AlertBanner {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  margin: 20px 0 0 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(238, 122, 134, 0.34) !important;
  border-radius: 16px !important;
  background: rgba(238, 122, 134, 0.1) !important;
  box-shadow: none !important;
  animation: ft-shake 0.4s var(--ft-ease);
}

.login-body .AlertBanner__icon {
  flex: none;
  display: grid;
  place-items: center;
  margin-top: 1px;
  color: #ee7a86 !important;
  fill: #ee7a86 !important;
}

.login-body .AlertBanner__icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor !important;
}

.login-body .AlertBanner__body {
  flex: 1;
  min-width: 0;
}

.login-body .AlertBanner__title {
  color: #f6c9ce !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.login-body .AlertBanner__closeButton {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--ft-ink-3) !important;
}

.login-body .AlertBanner__closeButton:hover {
  color: var(--ft-ink) !important;
  background: rgba(246, 244, 246, 0.08) !important;
}

.login-body .AlertBanner__closeButton svg {
  fill: currentColor !important;
}

.login-body .Input_fieldset___error input.form-control {
  border-color: rgba(238, 122, 134, 0.55) !important;
}

.login-body .Input_fieldset___error input.form-control:focus {
  box-shadow: 0 0 0 3px rgba(238, 122, 134, 0.2) !important;
}

.login-body input:-webkit-autofill,
.login-body input:-webkit-autofill:hover,
.login-body input:-webkit-autofill:focus,
.login-body input:-webkit-autofill:active {
  -webkit-text-fill-color: #f6f4f6 !important;
  caret-color: #f6f4f6;
  -webkit-box-shadow: 0 0 0 1000px #0c0712 inset !important;
  box-shadow: 0 0 0 1000px #0c0712 inset !important;
  border: 1px solid var(--ft-line-2) !important;
  transition: background-color 9999s ease-in-out 0s;
}

@keyframes ft-shake {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

:root {
  --center-channel-bg: #070509 !important;
  --center-channel-bg-rgb: 7, 5, 9 !important;
  --center-channel-color: #f6f4f6 !important;
  --center-channel-color-rgb: 246, 244, 246 !important;
  --sidebar-bg: #050307 !important;
  --sidebar-bg-rgb: 5, 3, 7 !important;
  --sidebar-text: #b9b6bd !important;
  --sidebar-text-rgb: 185, 182, 189 !important;
  --sidebar-unread-text: #f6f4f6 !important;
  --sidebar-unread-text-rgb: 246, 244, 246 !important;
  --sidebar-text-hover-bg: rgba(246, 244, 246, 0.06) !important;
  --sidebar-text-hover-bg-rgb: 40, 36, 44 !important;
  --sidebar-text-active-border: #d303fc !important;
  --sidebar-text-active-border-rgb: 211, 3, 252 !important;
  --sidebar-text-active-color: #f6f4f6 !important;
  --sidebar-text-active-color-rgb: 246, 244, 246 !important;
  --sidebar-header-bg: #030304 !important;
  --sidebar-header-bg-rgb: 3, 3, 4 !important;
  --sidebar-teambar-bg: #030304 !important;
  --sidebar-teambar-bg-rgb: 3, 3, 4 !important;
  --sidebar-header-text-color: #f6f4f6 !important;
  --sidebar-header-text-color-rgb: 246, 244, 246 !important;
  --link-color: #e58cff !important;
  --link-color-rgb: 229, 140, 255 !important;
  --button-bg: #d303fc !important;
  --button-bg-rgb: 211, 3, 252 !important;
  --button-color: #0d0014 !important;
  --button-color-rgb: 13, 0, 20 !important;
  --mention-bg: #d303fc !important;
  --mention-bg-rgb: 211, 3, 252 !important;
  --mention-color: #0d0014 !important;
  --mention-color-rgb: 13, 0, 20 !important;
  --mention-highlight-bg: rgba(211, 3, 252, 0.22) !important;
  --mention-highlight-link: #e58cff !important;
  --new-message-separator: #e58cff !important;
  --new-message-separator-rgb: 229, 140, 255 !important;
  --online-indicator: #5ec9a0 !important;
  --online-indicator-rgb: 94, 201, 160 !important;
  --away-indicator: #d8b46c !important;
  --away-indicator-rgb: 216, 180, 108 !important;
  --dnd-indicator: #ee7a86 !important;
  --dnd-indicator-rgb: 238, 122, 134 !important;
  --error-text: #ee7a86 !important;
  --error-text-color-rgb: 238, 122, 134 !important;
}

#root,
#channel_view,
.app__content,
#app-content,
.main-wrapper {
  background: var(--ft-bg) !important;
}

#global-header,
[class*="GlobalHeaderContainer"] {
  background: rgba(5, 3, 7, 0.78) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid var(--ft-line) !important;
  box-shadow: none !important;
}

[class*="ProductBrandingFreeEditionContainer"] {
  display: none !important;
}

#product_switch_menu {
  width: auto !important;
  gap: 12px;
}

#product_switch_menu::after {
  content: "";
  display: block;
  width: 118px;
  height: 16px;
  background: url("/forticia-brand/logo.svg") left center / contain no-repeat;
}

#userAccountMenuButton,
[class*="NewSearchContainer"] {
  border-radius: 999px !important;
}

[class*="NewSearchContainer"] {
  background: rgba(246, 244, 246, 0.05) !important;
  border: 1px solid var(--ft-line) !important;
  color: var(--ft-ink-3) !important;
}

.HeaderIconButton {
  border-radius: 999px !important;
  transition: background-color 0.2s var(--ft-ease);
}

.HeaderIconButton:hover {
  background: rgba(246, 244, 246, 0.08) !important;
}

#SidebarContainer,
.sidebar--left {
  background: linear-gradient(180deg, #060409, #040306) !important;
  border-right: 1px solid var(--ft-line) !important;
}

.sidebarHeaderContainer {
  background: transparent !important;
}

#sidebarTeamMenuButton {
  color: var(--ft-ink) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

.SidebarChannelNavigator_jumpToButton,
#SidebarChannelNavigatorButton {
  background: rgba(246, 244, 246, 0.05) !important;
  border: 1px solid var(--ft-line) !important;
  border-radius: 999px !important;
  color: var(--ft-ink-3) !important;
}

.SidebarLink,
.SidebarChannel .SidebarLink {
  border-radius: 12px !important;
  margin: 1px 8px !important;
  transition: background-color 0.2s var(--ft-ease), color 0.2s var(--ft-ease);
}

.SidebarLink.active {
  background: linear-gradient(90deg, rgba(211, 3, 252, 0.2), rgba(211, 3, 252, 0.05)) !important;
  box-shadow: inset 2px 0 0 #d303fc;
  color: var(--ft-ink) !important;
}

.SidebarChannelGroupHeader_text,
.SidebarChannelGroupHeader .SidebarChannelGroupHeader_groupButton {
  color: var(--ft-ink-3) !important;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none !important;
}

.badge,
.badge-notify {
  background: #d303fc !important;
  color: #0d0014 !important;
  border-radius: 999px !important;
  font-weight: 700;
}

.channel-header {
  background: transparent !important;
  border-bottom: 1px solid var(--ft-line) !important;
}

#channel_view,
#app-content {
  background: transparent !important;
}

#channel_view::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(50% 36% at 85% 0%, rgba(211, 3, 252, 0.08), transparent 70%);
}

.post-list__dynamic,
.post-list-holder-by-time,
.post-list__table {
  background: transparent !important;
}

.post {
  border-radius: 12px;
  transition: background-color 0.18s var(--ft-ease);
}

.post:hover,
.post.post--hovered {
  background: rgba(246, 244, 246, 0.035) !important;
}

.post.post--highlight,
.post.post--pinned-or-flagged {
  background: rgba(211, 3, 252, 0.08) !important;
}

.post__body a,
.markdown__link,
a.theme {
  color: #e58cff !important;
}

.mention--highlight,
.mention-link,
.mention--highlight a {
  color: #e58cff !important;
  background: rgba(211, 3, 252, 0.18) !important;
  border-radius: 6px;
}

.markdown__table th,
.markdown__table td {
  border-color: var(--ft-line) !important;
}

.post-code,
.hljs {
  background: #0c0712 !important;
  border: 1px solid var(--ft-line) !important;
  border-radius: 14px !important;
}

blockquote,
.markdown blockquote {
  border-left: 3px solid #d303fc !important;
  background: rgba(211, 3, 252, 0.06) !important;
  border-radius: 0 12px 12px 0;
}

.date-separator .separator__text,
.new-separator .separator__text {
  background: var(--ft-bg) !important;
  color: var(--ft-ink-3) !important;
  border-radius: 999px;
}

.post-create__container,
.AdvancedTextEditor__ctr {
  background: transparent !important;
}

.AdvancedTextEditor {
  border-radius: 20px !important;
  background: rgba(246, 244, 246, 0.04) !important;
  border: 1px solid var(--ft-line-2) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.AdvancedTextEditor:focus-within {
  border-color: rgba(211, 3, 252, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(211, 3, 252, 0.18) !important;
}

#post_textbox,
.custom-textarea {
  background: transparent !important;
  color: var(--ft-ink) !important;
  font-family: var(--font-family-sans) !important;
}

.btn,
button.btn {
  border-radius: 999px !important;
  font-family: var(--font-family-sans) !important;
  font-weight: 700 !important;
}

.btn.btn-primary,
.btn-primary {
  background: linear-gradient(180deg, #e04dff 0%, #d303fc 55%, #bd02e0 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #0d0014 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 24px -10px rgba(211, 3, 252, 0.7) !important;
}

.btn.btn-tertiary,
.btn.btn-secondary,
.btn.btn-quaternary,
.btn-default,
.btn-cancel {
  border-radius: 999px !important;
}

.modal-content {
  background: rgba(20, 11, 31, 0.97) !important;
  border: 1px solid rgba(246, 244, 246, 0.15) !important;
  border-radius: 24px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 32px 72px -18px rgba(0, 0, 0, 0.9) !important;
  color: var(--ft-ink) !important;
}

.modal-backdrop,
.modal-backdrop.in {
  background: rgba(3, 3, 5, 0.7) !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.modal-header,
.modal-footer {
  background: transparent !important;
  border-color: var(--ft-line) !important;
}

.Menu__content,
.dropdown-menu,
[class*="MuiPopover-paper"],
[class*="MuiMenu-paper"],
.a11y__popup {
  background: rgba(20, 11, 31, 0.96) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  backdrop-filter: blur(28px) saturate(1.7);
  border: 1px solid rgba(246, 244, 246, 0.15) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 32px 72px -18px rgba(0, 0, 0, 0.9), 0 4px 14px rgba(0, 0, 0, 0.4) !important;
  color: var(--ft-ink) !important;
}

[class*="MuiMenuItem-root"],
.MenuItem,
.dropdown-menu > li > a {
  border-radius: 12px !important;
}

.tooltip-inner,
[class*="Tooltip"] {
  background: #14101c !important;
  border: 1px solid var(--ft-line-2) !important;
  border-radius: 10px !important;
  color: var(--ft-ink) !important;
}

.suggestion-list__content,
.emoji-picker,
.EmojiPicker {
  background: rgba(20, 11, 31, 0.96) !important;
  border: 1px solid rgba(246, 244, 246, 0.15) !important;
  border-radius: 18px !important;
}

.sidebar--right,
.sidebar--right__bg,
.sidebar--right .post-right__container {
  background: rgba(7, 5, 9, 0.9) !important;
  border-left: 1px solid var(--ft-line) !important;
}

.announcement-bar {
  background: linear-gradient(90deg, rgba(211, 3, 252, 0.28), rgba(138, 2, 169, 0.28)) !important;
  border-bottom: 1px solid rgba(211, 3, 252, 0.35);
  color: var(--ft-ink) !important;
}

.announcement-bar a,
.announcement-bar .btn {
  color: var(--ft-ink) !important;
}

#onboardingTaskList,
.onboarding-tasks,
.task-list-modal,
[class*="TaskList"] {
  background: rgba(20, 11, 31, 0.97) !important;
  border: 1px solid rgba(246, 244, 246, 0.15) !important;
  border-radius: 20px !important;
  color: var(--ft-ink) !important;
}

.admin-console__wrapper,
.admin-console,
.backstage-content,
.admin-console__content,
.wrapper--admin {
  background: var(--ft-bg) !important;
  color: var(--ft-ink) !important;
}

.admin-console .backstage-navbar,
.backstage-navbar,
.admin-console__header,
.backstage-header {
  background: rgba(5, 3, 7, 0.9) !important;
  border-bottom: 1px solid var(--ft-line) !important;
  color: var(--ft-ink) !important;
}

.admin-sidebar,
.admin-sidebar .nav-pills__container {
  background: #050307 !important;
  border-right: 1px solid var(--ft-line) !important;
}

.admin-console .panel,
.admin-console .banner,
.admin-console .form-group .well,
.admin-console__content .panel-body {
  background: rgba(246, 244, 246, 0.025) !important;
  border: 1px solid var(--ft-line) !important;
  border-radius: 18px !important;
  color: var(--ft-ink) !important;
}

.admin-console .form-control,
.form-control {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(246, 244, 246, 0.012)), #070509 !important;
  border: 1px solid var(--ft-line-2) !important;
  border-radius: 12px !important;
  color: var(--ft-ink) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

.form-control:focus {
  border-color: rgba(211, 3, 252, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(211, 3, 252, 0.2) !important;
}

.avatar-wrapper img,
.Avatar,
img.Avatar {
  border-radius: 50% !important;
}

::selection {
  background: rgba(211, 3, 252, 0.32);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}

.hljs {
  color: #e3e1e6 !important;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-type {
  color: #e58cff !important;
}

.hljs-string,
.hljs-attr,
.hljs-symbol,
.hljs-bullet {
  color: #84e0b8 !important;
}

.hljs-number,
.hljs-literal,
.hljs-title,
.hljs-section,
.hljs-function .hljs-title {
  color: #8aa4cf !important;
}

.hljs-comment,
.hljs-quote {
  color: #84828a !important;
}

.hljs-params,
.hljs-variable,
.hljs-name {
  color: #f6f4f6 !important;
}

.AdvancedTextEditor__body,
.AdvancedTextEditor__cell,
#advancedTextEditorCell,
.textarea-wrapper,
.AdvancedTextEditor .custom-textarea {
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  background: transparent !important;
}

.panel-card,
.admin-console__container,
.admin-console .alert,
.admin-console-save,
.DataGrid,
.DataGrid_search,
.DataGrid_row,
.DataGrid_footer,
.DataGrid_header,
.admin-console .header,
.admin-console__content .alert {
  background: rgba(246, 244, 246, 0.03) !important;
  border-color: var(--ft-line) !important;
  color: var(--ft-ink) !important;
}

.panel-card,
.admin-console__container,
.DataGrid {
  border: 1px solid var(--ft-line) !important;
  border-radius: 18px !important;
}

.admin-console-save {
  background: rgba(20, 11, 31, 0.92) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--ft-line-2) !important;
}

.admin-console table,
.admin-console th,
.admin-console td,
.admin-console tr,
.admin-console tbody,
.admin-console thead {
  background: transparent !important;
  color: var(--ft-ink) !important;
  border-color: var(--ft-line) !important;
}

.admin-console tr.clickable:hover,
.admin-console tr:hover td {
  background: rgba(246, 244, 246, 0.04) !important;
}

.admin-console .alert-warning {
  background: rgba(216, 180, 108, 0.12) !important;
  border: 1px solid rgba(216, 180, 108, 0.35) !important;
  border-radius: 14px !important;
  color: #d8b46c !important;
}

.admin-console .alert-danger,
.admin-console .alert-error {
  background: rgba(238, 122, 134, 0.12) !important;
  border: 1px solid rgba(238, 122, 134, 0.35) !important;
  color: #ee7a86 !important;
  border-radius: 14px !important;
}

.admin-console input[type="checkbox"],
.admin-console input[type="radio"] {
  accent-color: #d303fc;
}

.admin-console .help-text,
.admin-console .control-label {
  color: var(--ft-ink-2) !important;
}

.admin-sidebar .sidebar-section-title,
.admin-sidebar .category-title,
.admin-sidebar .sidebar-category {
  background: rgba(246, 244, 246, 0.05) !important;
  color: var(--ft-ink-2) !important;
}

.admin-sidebar li.active > a,
.admin-sidebar a.active {
  background: linear-gradient(90deg, rgba(211, 3, 252, 0.2), rgba(211, 3, 252, 0.04)) !important;
  color: var(--ft-ink) !important;
}

.color--link,
button.color--link,
a.color--link,
.style--none.color--link,
.modal a,
.GenericModal a {
  color: #e58cff !important;
}

.AdvancedTextEditor {
  margin: 0 24px 12px !important;
}

.channel-intro img,
.channel-intro svg[class*="llustration"],
.NoResultsIndicator img,
[class*="Illustration"] {
  filter: hue-rotate(65deg) saturate(1.15) brightness(0.95);
}

.nav-pills__container li > a.active,
.nav-pills__tab.active {
  background: linear-gradient(90deg, rgba(211, 3, 252, 0.2), rgba(211, 3, 252, 0.04)) !important;
  color: var(--ft-ink) !important;
}

.settings-modal .nav-pills > li.active > a,
.settings-modal .nav-pills > li > a:hover {
  background: rgba(211, 3, 252, 0.16) !important;
  color: var(--ft-ink) !important;
  border-radius: 12px !important;
}

.tour-tip,
[class*="TourTip"],
[class*="tourtip"] {
  background: rgba(20, 11, 31, 0.97) !important;
  border: 1px solid rgba(246, 244, 246, 0.15) !important;
  border-radius: 20px !important;
  color: var(--ft-ink) !important;
}

.GenericModal,
.modal-dialog,
.modal-dialog .modal-content .GenericModal {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.modal-body,
.GenericModal__body {
  background: transparent !important;
  color: var(--ft-ink) !important;
}