/* Supplied LOGO-4 artwork; light and dark variants use the original PNGs. */
.mofang-home .mofang-brand,
.design-sidebar .workspace-brand,
.admin-nav .admin-logo {
  --mofang-symbol: url('/assets/mofang-symbol-white.png');
  --mofang-wordmark: url('/assets/mofang-wordmark-white.png');
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  gap: 14px;
  width: 160px;
  height: 48px;
  padding: 0;
}
.mofang-home .mofang-brand::before,
.design-sidebar .workspace-brand::before,
.admin-nav .admin-logo::before {
  content: '';
  flex: 0 0 40px;
  width: 40px;
  height: 44px;
  background: var(--mofang-symbol) center / contain no-repeat;
}
.mofang-home .mofang-brand::after,
.design-sidebar .workspace-brand::after,
.admin-nav .admin-logo::after {
  content: '';
  flex: 0 0 102px;
  width: 102px;
  height: 41px;
  background: var(--mofang-wordmark) center / contain no-repeat;
}
.mofang-home .mofang-brand > svg,
.design-sidebar .workspace-brand > svg,
.admin-nav .admin-logo > svg {
  display: none;
}
/* Keep the existing name available to assistive technology. */
.mofang-home .mofang-brand > span,
.design-sidebar .workspace-brand > span,
.admin-nav .admin-logo > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}
.theme-light .workspace-brand {
  --mofang-symbol: url('/assets/mofang-symbol-black.png');
  --mofang-wordmark: url('/assets/mofang-wordmark-black.png');
}
.design-login__panel form::before {
  content: '';
  display: block;
  width: 172px;
  height: 50px;
  margin: 0 auto 32px;
  background:
    url('/assets/mofang-symbol-white.png') left center / 44px 48px no-repeat,
    url('/assets/mofang-wordmark-white.png') right center / 112px 44px no-repeat;
}
@media (max-width: 720px) {
  .mofang-nav .mofang-brand {
    gap: 10px;
    width: 132px;
    height: 40px;
  }
  .mofang-nav .mofang-brand::before {
    flex-basis: 32px;
    width: 32px;
    height: 35px;
  }
  .mofang-nav .mofang-brand::after {
    flex-basis: 90px;
    width: 90px;
    height: 36px;
  }
  .design-login__panel form::before { margin-bottom: 24px; }
}