.zcool-top-nav {
  --zcool-top-nav-height: 56px;
  --zcool-top-nav-bg: var(--system-background-primary, #fff);
  --zcool-top-nav-fg: var(--system-content-primary, rgba(0, 0, 0, 0.9));
  --zcool-top-nav-muted: var(--system-content-secondary, rgba(0, 0, 0, 0.7));
  --zcool-top-nav-soft-bg: var(--system-background-search, var(--system-background-tertiary, #f5f5f4));
  --zcool-top-nav-border: var(--system-stroke-input, var(--system-stroke-secondary, rgba(0, 0, 0, 0.05)));
  --zcool-top-nav-brand: var(--zcool-top-nav-theme-brand, var(--zcool-runtime-button-bg, var(--system-background-brand, #ff5e3b)));
  --zcool-top-nav-brand-hover: var(--zcool-top-nav-theme-brand-hover, var(--zcool-runtime-button-bg-hover, var(--system-background-brandHover, #ff815e)));
  --zcool-top-nav-brand-content: var(--zcool-top-nav-theme-brand-content, var(--zcool-runtime-button-content, var(--zcool-runtime-brand-content, #fff)));
  --zcool-top-nav-primary: #ff7300;
  --zcool-top-nav-dark: #222;
  --zcool-top-nav-dark-hover: #38352e;
  width: 100%;
  min-width: 1024px;
  height: var(--zcool-top-nav-height);
  position: relative;
  z-index: 1050;
  background: var(--zcool-top-nav-bg);
  color: var(--zcool-top-nav-fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.zcool-top-nav--header-new {
  --zcool-top-nav-bg: var(--system-background-bar, #fff);
  --zcool-top-nav-soft-bg: var(--system-background-search, #f5f5f4);
  --zcool-top-nav-border: var(--system-stroke-input, rgba(0, 0, 0, 0.05));
  min-width: 0;
  z-index: 1050;
  background: var(--zcool-top-nav-bg);
  backdrop-filter: blur(50px);
}

.zcool-top-nav *,
.zcool-top-nav *::before,
.zcool-top-nav *::after {
  box-sizing: border-box;
}

.zcool-top-nav a {
  color: inherit;
  text-decoration: none;
}

.zcool-top-nav__inner {
  height: var(--zcool-top-nav-height);
  margin: 0 30px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.zcool-top-nav--header-new .zcool-top-nav__inner {
  margin: 0;
  padding: 8px 30px;
  justify-content: space-between;
  gap: 24px;
}

.zcool-top-nav__main {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-shrink: 0;
  min-width: 0;
}

.zcool-top-nav__logo {
  width: 120px;
  height: 20px;
  display: block;
  color: var(--zcool-top-nav-fg);
  line-height: 0;
}

.zcool-top-nav__logo:hover {
  color: var(--system-content-primary, #000);
}

.zcool-top-nav__logo-icon {
  width: 120px;
  height: 20px;
  display: block;
}

.zcool-top-nav__logo-mark {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
}

.zcool-top-nav__menu {
  height: var(--zcool-top-nav-height);
  display: flex;
  align-items: center;
}

.zcool-top-nav__tab {
  height: var(--zcool-top-nav-height);
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--zcool-top-nav-muted);
  font-size: 14px;
  line-height: var(--zcool-top-nav-height);
  white-space: nowrap;
  transition: color 160ms ease-out, font-weight 160ms ease-out;
}

.zcool-top-nav__tab:hover {
  color: var(--zcool-top-nav-fg);
  font-weight: 500;
}

.zcool-top-nav__dropdown {
  position: relative;
  height: var(--zcool-top-nav-height);
  display: flex;
  align-items: center;
}

.zcool-top-nav__dropdown:hover .zcool-top-nav__drop-menu,
.zcool-top-nav__dropdown.zcool-top-nav__hover-dropdown--open .zcool-top-nav__drop-menu,
.zcool-top-nav__dropdown:focus-within .zcool-top-nav__drop-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.zcool-top-nav__dropdown.zcool-top-nav__hover-dropdown--closed:hover .zcool-top-nav__drop-menu,
.zcool-top-nav__dropdown.zcool-top-nav__hover-dropdown--closed:focus-within .zcool-top-nav__drop-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
}

.zcool-top-nav__drop-menu {
  position: absolute;
  top: 48px;
  left: 0;
  z-index: 1050;
  width: 184px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--zcool-top-nav-bg);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 160ms ease-out, transform 160ms ease-out, visibility 160ms ease-out;
}

.zcool-top-nav__drop-item {
  height: 40px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  color: rgba(0, 0, 0, 0.7);
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
}

.zcool-top-nav__drop-item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.9);
}

.zcool-top-nav__drop-item--disabled {
  color: rgba(0, 0, 0, 0.35);
  cursor: default;
}

.zcool-top-nav__drop-icon {
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
  fill: currentColor;
  stroke: none;
  color: currentColor;
  line-height: 0;
}

.zcool-top-nav__drop-icon[data-zcool-icon-delivery='css-mask'] {
  background-color: currentColor;
  mask-image: var(--zcool-sidebar-icon-mask);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-image: var(--zcool-sidebar-icon-mask);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.zcool-top-nav__drop-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.zcool-top-nav__drop-badge {
  height: 16px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 999px;
  background: #ff1a25;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
}

.zcool-top-nav__drop-tip {
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 50%;
  background: #ff4d4f;
}

.zcool-top-nav__right {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
}

.zcool-top-nav--header-new .zcool-top-nav__right {
  width: 100%;
  flex: 1;
  gap: 20px;
}

.zcool-top-nav__tools {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.zcool-top-nav--header-new .zcool-top-nav__tools {
  flex: 1 1 auto;
  justify-content: flex-start;
  gap: 20px;
}

.zcool-top-nav__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
  color: #888;
}

.zcool-top-nav--header-new .zcool-top-nav__actions {
  flex-shrink: 0;
}

.zcool-top-nav__search {
  position: relative;
  flex: 1;
  max-width: 540px;
  min-width: 172px;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  background: #f5f5f4;
  border: 1px solid var(--zcool-top-nav-border);
  border-radius: 8px;
  transition: border-color 160ms ease-out;
}

.zcool-top-nav__search:hover {
  border-color: #222222;
}

.zcool-top-nav--header-new .zcool-top-nav__search {
  width: clamp(220px, 36vw, 460px);
  max-width: 460px;
  min-width: 180px;
  height: 40px;
  flex: 1 1 clamp(220px, 36vw, 460px);
  padding: 0 12px 0 16px;
  z-index: 1050;
  border-radius: 999px;
}

.zcool-top-nav--header-new .zcool-top-nav__search:hover {
  border-color: #ff5e3b;
}

.zcool-top-nav__search-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #888;
  transition: color 160ms ease-out;
}

.zcool-top-nav__search-camera,
.zcool-top-nav__search-submit {
  width: 20px;
  height: 20px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: #888;
  cursor: pointer;
  line-height: 0;
}

.zcool-top-nav__search-camera:hover .zcool-top-nav__search-icon,
.zcool-top-nav__search-submit:hover .zcool-top-nav__search-icon {
  color: rgba(0, 0, 0, 0.6);
}

.zcool-top-nav__search-input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--zcool-top-nav-fg);
  font: inherit;
  font-size: 14px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zcool-top-nav__search-input::placeholder {
  color: #bbb;
}

.zcool-top-nav-search__clear,
.zcool-top-nav-search__clear-recent,
.zcool-top-nav-search__close {
  padding: 0;
  border: 0;
  background: transparent;
  color: #888;
  cursor: pointer;
  line-height: 0;
  transition: color 150ms ease-out;
}

.zcool-top-nav-search__clear {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.zcool-top-nav-search__clear-recent {
  width: 24px;
  height: 24px;
  padding: 2px 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 6px;
}

.zcool-top-nav-search__clear-recent-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.zcool-top-nav-search__close {
  color: #222;
}

.zcool-top-nav-search__clear:hover {
  color: rgba(0, 0, 0, 0.6);
}

.zcool-top-nav-search__clear-recent:hover {
  color: #555;
}

.zcool-top-nav-search__close:hover {
  color: #222;
}

.zcool-top-nav-search__camera-wrap {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.zcool-top-nav-search__dropdown {
  position: absolute;
  top: calc(100% + 9px);
  right: auto;
  left: -1px;
  z-index: 1050;
  width: calc(100% + 2px);
  box-sizing: border-box;
  min-height: 72px;
  max-height: 640px;
  overflow: hidden auto;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.zcool-top-nav-search__dropdown--idle {
  padding: 20px 0 20px 24px;
}

.zcool-top-nav-search__dropdown--with-collections {
  width: 540px;
  max-width: none;
}

.zcool-top-nav-search__dropdown--predict {
  max-height: none;
  overflow: visible;
  padding: 8px 0 0;
}

.zcool-top-nav-search__module {
  margin-bottom: 20px;
}

.zcool-top-nav-search__module:last-of-type {
  margin-bottom: 0;
}

.zcool-top-nav-search__module-header {
  margin-bottom: 12px;
  padding-right: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #222;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

.zcool-top-nav-search__word-list {
  display: flex;
  flex-wrap: wrap;
}

.zcool-top-nav-search__word-item {
  max-width: 95.6%;
  margin: 0 12px 12px 0;
  padding: 6px 16px;
  display: inline-block;
  overflow: hidden;
  border-radius: 18px;
  background: #f2f2f2;
  color: #555;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zcool-top-nav-search__word-item:hover {
  background: #e5e5e5;
  color: #555;
}

.zcool-top-nav-search__predict-title {
  margin: 20px 0 8px;
  padding-left: 24px;
  color: #222;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

.zcool-top-nav-search__predict-item {
  height: 44px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #555;
  font-size: 14px;
  line-height: 44px;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 150ms ease-out, background-color 150ms ease-out;
}

.zcool-top-nav-search__predict-item:hover {
  background: #f2f2f2;
  color: #555;
}

.zcool-top-nav-search__predict-item .hightlight {
  color: #ff471a;
  font-weight: 400;
}

.zcool-top-nav-search__predict-item:hover .hightlight {
  color: #ff471a;
}

.zcool-top-nav-search__designer-avatar {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.zcool-top-nav-search__check-all {
  width: 100%;
  height: 58px;
  display: block;
  color: #222;
  font-size: 14px;
  line-height: 58px;
  text-align: center;
}

.zcool-top-nav-search__check-all:hover {
  color: #ff5e3b;
}

.zcool-top-nav-search__hot-collections {
  display: flex;
  gap: 20px;
  padding-right: 24px;
}

.zcool-top-nav-search__collection-card {
  width: 150px;
  flex-shrink: 0;
  color: #555;
}

.zcool-top-nav-search__collection-cover {
  position: relative;
  width: 150px;
  height: 116px;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  border-radius: 8px;
  background: #f2f2f2;
}

.zcool-top-nav-search__collection-cover:hover {
  opacity: 0.8;
  transition: all 0.1s linear;
}

.zcool-top-nav-search__collection-image-cell {
  width: 75px;
  height: 58px;
  display: block;
  overflow: hidden;
  flex: 0 0 75px;
}

.zcool-top-nav-search__collection-image-cell img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.zcool-top-nav-search__collection-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03));
}

.zcool-top-nav-search__collection-name {
  margin-top: 8px;
  overflow: hidden;
  color: #555;
  font-size: 14px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.zcool-top-nav-search__collection-name:hover {
  color: #ff7a45;
}

.zcool-top-nav-search__upload-layer {
  position: absolute;
  top: calc(100% + 9px);
  right: auto;
  left: -1px;
  z-index: 1050;
  width: 540px;
  height: 280px;
  padding: 20px 30px 30px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  cursor: auto;
}

.zcool-top-nav--header-new .zcool-top-nav__drop-menu,
.zcool-top-nav--header-new .zcool-top-nav-search__dropdown,
.zcool-top-nav--header-new .zcool-top-nav-search__upload-layer,
.zcool-top-nav--header-new .zcool-top-nav__message-panel,
.zcool-top-nav--header-new .zcool-top-nav__publish-menu,
.zcool-top-nav--header-new .zcool-top-nav__user-panel {
  z-index: 1050;
}

.zcool-top-nav-search__upload-header {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}

.zcool-top-nav-search__upload-field {
  height: 192px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed #d9d9d9;
  border-radius: 12px;
  text-align: center;
}

.zcool-top-nav-search__upload-button {
  width: 88px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: var(--zcool-top-nav-brand);
  color: var(--zcool-top-nav-brand-content);
  cursor: pointer;
}

.zcool-top-nav-search__upload-button:hover {
  background: var(--zcool-top-nav-brand-hover);
}

.zcool-top-nav-search__upload-tip {
  margin-top: 16px;
  display: block;
  color: #bbb;
  font-size: 12px;
  line-height: 16px;
}

.zcool-top-nav-search__upload-message {
  display: inline-flex;
  align-items: center;
  color: #555;
  font-size: 14px;
  line-height: 20px;
}

.zcool-top-nav-search__upload-retry {
  color: #d36b00;
  cursor: pointer;
}

.zcool-top-nav-search__hidden-file-input {
  display: none;
}

.zcool-top-nav-search__spinner {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  color: #FF5E3B;
  animation: zcoolTopNavSearchSpin 1.75s linear infinite;
}

@keyframes zcoolTopNavSearchSpin {
  to {
    transform: rotate(360deg);
  }
}

.zcool-top-nav__pro {
  width: 114px;
  height: 32px;
  padding: 7px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--zcool-top-nav-dark);
  color: #ffbe7c;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  transition: background-color 160ms ease-out;
}

.zcool-top-nav__pro:hover {
  background: var(--zcool-top-nav-dark-hover);
}

.zcool-top-nav__pro--loading {
  background: transparent;
}

.zcool-top-nav__pro--loading:hover {
  background: transparent;
}

.zcool-top-nav .zcool-top-nav__pro {
  color: #ffbe7c;
}

.zcool-top-nav--header-new .zcool-top-nav__pro {
  width: 114px;
  height: 32px;
  margin-left: auto;
}

.zcool-top-nav__pro--image {
  padding: 0;
  position: relative;
  overflow: hidden;
  background: transparent;
}

.zcool-top-nav__pro-image {
  width: 114px;
  height: 32px;
  display: block;
  border-radius: 8px;
  object-fit: contain;
}

.zcool-top-nav__pro-image--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 160ms ease-out;
}

.zcool-top-nav__pro--image:hover .zcool-top-nav__pro-image--hover {
  opacity: 1;
}

.zcool-top-nav__pro-icon {
  width: 20px;
  height: 20px;
}

.zcool-top-nav__publish-icon,
.zcool-top-nav__message-icon {
  width: 28px;
  height: 28px;
}

.zcool-top-nav__publish-icon {
  color: rgba(0, 0, 0, 0.7);
}

.zcool-top-nav__account {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.zcool-top-nav__account[data-state="logged-in"] {
  gap: 20px;
}

.zcool-top-nav--header-new .zcool-top-nav__account[data-state="logged-in"] {
  gap: 20px;
}

.zcool-top-nav__account[data-state="logged-in"] .zcool-top-nav__publish {
  margin-right: 4px;
}

.zcool-top-nav__account[data-state="logged-out"] {
  gap: 24px;
}

.zcool-top-nav--header-new .zcool-top-nav__account[data-state="logged-out"] {
  gap: 20px;
}

.zcool-top-nav__auth {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.zcool-top-nav--header-new .zcool-top-nav__auth {
  height: 40px;
}

.zcool-top-nav__login,
.zcool-top-nav__register,
.zcool-top-nav__text-button {
  box-sizing: border-box;
  display: flex;
  width: 76px;
  height: 36px;
  padding: 2px 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: var(--radius-10, 10px);
  background: transparent;
  color: var(--zcool-top-nav-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}

.zcool-top-nav .zcool-top-nav__login {
  color: var(--system-content-buttonSecondary, #191919);
}

.zcool-top-nav .zcool-top-nav__login:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--system-content-buttonSecondary, #191919);
}

.zcool-top-nav__text-button:hover {
  background: rgba(0, 0, 0, 0.05);
}

.zcool-top-nav--header-new .zcool-top-nav__login {
  color: var(--system-content-buttonSecondary, #191919);
}

.zcool-top-nav .zcool-top-nav__register {
  background: var(--system-background-buttonPrimaryAccent, #FF5E3B);
  color: #fff;
  font-weight: 500;
}

.zcool-top-nav .zcool-top-nav__register:hover {
  background: var(--zcool-top-nav-brand-hover);
  color: #fff;
}

.zcool-top-nav--header-new .zcool-top-nav__register:hover {
  background: var(--zcool-top-nav-brand-hover);
}

.zcool-top-nav__publish,
.zcool-top-nav__message {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.7);
  line-height: 0;
  position: relative;
  transition: color 160ms ease-out;
}

.zcool-top-nav .zcool-top-nav__publish,
.zcool-top-nav .zcool-top-nav__message {
  color: rgba(0, 0, 0, 0.7);
}

.zcool-top-nav__publish {
  padding: 0;
}

.zcool-top-nav__publish-dropdown,
.zcool-top-nav__message-dropdown {
  position: relative;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.zcool-top-nav__publish-dropdown {
  width: 28px;
}

.zcool-top-nav__message-dropdown {
  width: 32px;
}

.zcool-top-nav__publish-dropdown::after,
.zcool-top-nav__message-dropdown::after {
  content: "";
  position: absolute;
  top: 32px;
  right: 0;
  width: 32px;
  height: 8px;
}

.zcool-top-nav__publish-dropdown::after {
  width: 28px;
}

.zcool-top-nav__message-dropdown::after {
  height: 4px;
}

.zcool-top-nav--header-new .zcool-top-nav__publish {
  color: rgba(0, 0, 0, 0.7);
}

.zcool-top-nav--header-new .zcool-top-nav__publish:hover {
  color: rgba(0, 0, 0, 0.9);
}

.zcool-top-nav__publish-dropdown:hover .zcool-top-nav__publish-menu,
.zcool-top-nav__publish-dropdown.zcool-top-nav__hover-dropdown--open .zcool-top-nav__publish-menu,
.zcool-top-nav__publish-dropdown:focus-within .zcool-top-nav__publish-menu,
.zcool-top-nav__message-dropdown--open .zcool-top-nav__message-panel,
.zcool-top-nav__message-dropdown:hover .zcool-top-nav__message-panel,
.zcool-top-nav__message-dropdown:focus-within .zcool-top-nav__message-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.zcool-top-nav__publish-dropdown.zcool-top-nav__hover-dropdown--closed:hover .zcool-top-nav__publish-menu,
.zcool-top-nav__publish-dropdown.zcool-top-nav__hover-dropdown--closed:focus-within .zcool-top-nav__publish-menu,
.zcool-top-nav__message-dropdown--closed:hover .zcool-top-nav__message-panel,
.zcool-top-nav__message-dropdown--closed:focus-within .zcool-top-nav__message-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
}

.zcool-top-nav--header-new .zcool-top-nav__message {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: transparent;
  color: rgba(0, 0, 0, 0.7);
}

.zcool-top-nav--header-new .zcool-top-nav__message:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.9);
}

.zcool-top-nav--header-new .zcool-top-nav__message-icon {
  width: 28px;
  height: 28px;
}

.zcool-top-nav__message-panel {
  position: absolute;
  top: 36px;
  right: 0;
  z-index: 1050;
  width: 300px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  color: #222;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 160ms ease-out, transform 160ms ease-out, visibility 160ms ease-out;
}

.zcool-top-nav__message-panel-title {
  margin: 0 30px;
  padding: 16px 0;
  border-bottom: 1px solid #e5e5e5;
  color: #222;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.zcool-top-nav__message-list {
  height: 227px;
  padding: 8px 14px;
  overflow-y: auto;
}

.zcool-top-nav__message-empty {
  padding-top: 40px;
  color: #888;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.zcool-top-nav__message-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #888;
  cursor: pointer;
  line-height: 0;
}

.zcool-top-nav__message-clear:hover {
  color: #222;
}

.zcool-top-nav__message-clear-icon {
  display: block;
  width: 16px;
  height: 16px;
}

.zcool-top-nav__message-count {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff4d4f;
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  line-height: 16px;
  position: absolute;
  top: -3px;
  left: 15px;
  text-align: center;
  white-space: nowrap;
}

.zcool-top-nav__message-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4d4f;
  position: absolute;
  top: 1px;
  right: 1px;
}

.zcool-top-nav__message-item {
  padding: 9px 16px;
  border-radius: 8px;
  display: block;
  color: #222;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  word-break: break-all;
}

.zcool-top-nav__message-item:hover {
  background: #f7f7f7;
  color: #222;
}

.zcool-top-nav__message-item-type {
  margin-right: 4px;
  font-weight: 500;
}

.zcool-top-nav__message-item-text {
  color: #222;
}

.zcool-top-nav__message-all {
  padding: 12px 0;
  display: block;
  color: #222;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.zcool-top-nav__message-all:hover {
  color: #ff5e3b;
}

.zcool-top-nav__publish-menu {
  position: absolute;
  top: 40px;
  right: 0;
  z-index: 1050;
  width: 393px;
  padding: 20px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 160ms ease-out, transform 160ms ease-out, visibility 160ms ease-out;
}

.zcool-top-nav__publish-menu-columns {
  display: flex;
}

.zcool-top-nav__publish-menu-column {
  width: 160px;
  min-width: 0;
}

.zcool-top-nav__publish-menu-column--designer {
  width: 172px;
  margin-right: 20px;
  padding-right: 12px;
  border-right: 1px solid #ededed;
}

.zcool-top-nav__publish-menu-column--business {
  width: 160px;
}

.zcool-top-nav__publish-menu-group--spaced {
  margin-top: 36px;
}

.zcool-top-nav__publish-menu-title {
  display: block;
  color: #888;
  font-size: 12px;
  line-height: 16px;
}

.zcool-top-nav__publish-menu-item {
  height: 40px;
  margin-top: 12px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border-radius: 8px;
  background-repeat: no-repeat;
  background-position: 140px center;
  color: rgba(0, 0, 0, 0.7);
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}

.zcool-top-nav__publish-menu-item:hover {
  background-color: var(--zcool-top-nav-publish-menu-hover-bg, rgba(0, 0, 0, 0.05));
  background-image: var(--zcool-top-nav-publish-menu-arrow);
  color: rgba(0, 0, 0, 0.9);
}

.zcool-top-nav__publish-menu-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--zcool-top-nav-publish-menu-icon-bg, #f5f5f5);
}

.zcool-top-nav__publish-menu-icon img {
  width: 40px;
  height: 40px;
  min-width: 40px;
  max-width: 40px;
  min-height: 40px;
  max-height: 40px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

.zcool-top-nav__publish-menu-text {
  color: inherit;
}

.zcool-top-nav__publish-menu-beta {
  height: 18px;
  margin-left: 6px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #222;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
}

.zcool-top-nav__publish-ad-list {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.zcool-top-nav__publish-ad-list--empty {
  display: none;
}

.zcool-top-nav__publish-ad-card {
  width: 160px;
  height: 120px;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 8px;
  background: transparent;
}

.zcool-top-nav__publish-ad-card--empty {
  display: none;
}

.zcool-top-nav__publish-ad-card > div,
.zcool-top-nav__publish-ad-card .z-ad-image-box,
.zcool-top-nav__publish-ad-card .z-ad-image-box a {
  width: 160px;
  height: 120px;
  display: block;
}

.zcool-top-nav__publish-ad-card img,
.zcool-top-nav__publish-ad-card .z-ad-image-box img {
  width: 160px;
  height: 120px;
  display: block;
  object-fit: cover;
}

.zcool-top-nav__publish span {
  display: none;
}

.zcool-top-nav__publish-menu-item span {
  display: inline-flex;
}

.zcool-top-nav__publish:hover,
.zcool-top-nav__message:hover,
.zcool-top-nav .zcool-top-nav__publish-dropdown:hover .zcool-top-nav__publish,
.zcool-top-nav .zcool-top-nav__publish-dropdown:focus-within .zcool-top-nav__publish,
.zcool-top-nav .zcool-top-nav__message-dropdown:hover .zcool-top-nav__message,
.zcool-top-nav .zcool-top-nav__message-dropdown:focus-within .zcool-top-nav__message,
.zcool-top-nav .zcool-top-nav__message-dropdown--open .zcool-top-nav__message {
  color: rgba(0, 0, 0, 0.9);
}

.zcool-top-nav .zcool-top-nav__publish .zcool-top-nav__publish-icon,
.zcool-top-nav .zcool-top-nav__publish .zcool-top-nav__publish-icon path {
  color: rgba(0, 0, 0, 0.7);
}

.zcool-top-nav .zcool-top-nav__publish:hover .zcool-top-nav__publish-icon,
.zcool-top-nav .zcool-top-nav__publish:hover .zcool-top-nav__publish-icon path,
.zcool-top-nav .zcool-top-nav__publish-dropdown:hover .zcool-top-nav__publish-icon,
.zcool-top-nav .zcool-top-nav__publish-dropdown:hover .zcool-top-nav__publish-icon path,
.zcool-top-nav .zcool-top-nav__publish-dropdown:focus-within .zcool-top-nav__publish-icon,
.zcool-top-nav .zcool-top-nav__publish-dropdown:focus-within .zcool-top-nav__publish-icon path {
  color: rgba(0, 0, 0, 0.9);
}

.zcool-top-nav__avatar,
.zcool-top-nav__avatar-fallback {
  width: 32px;
  height: 32px;
  display: block;
  flex-shrink: 0;
  border-radius: 50%;
}

.zcool-top-nav__avatar {
  object-fit: cover;
}

.zcool-top-nav__avatar--large,
.zcool-top-nav__avatar-fallback--large {
  width: 40px;
  height: 40px;
}

.zcool-top-nav__avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #222;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.zcool-top-nav__avatar-dropdown {
  position: relative;
  height: 32px;
  display: flex;
  align-items: center;
}

.zcool-top-nav__avatar-dropdown::after {
  content: "";
  position: absolute;
  top: 32px;
  right: 0;
  width: 32px;
  height: 8px;
}

.zcool-top-nav__avatar-dropdown:hover .zcool-top-nav__user-panel,
.zcool-top-nav__avatar-dropdown.zcool-top-nav__hover-dropdown--open .zcool-top-nav__user-panel,
.zcool-top-nav__avatar-dropdown:focus-within .zcool-top-nav__user-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.zcool-top-nav__avatar-dropdown.zcool-top-nav__hover-dropdown--closed:hover .zcool-top-nav__user-panel,
.zcool-top-nav__avatar-dropdown.zcool-top-nav__hover-dropdown--closed:focus-within .zcool-top-nav__user-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
}

.zcool-top-nav__avatar-trigger {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.zcool-top-nav__user-panel {
  position: absolute;
  top: 40px;
  right: 0;
  z-index: 1050;
  width: 276px;
  padding: 20px 20px 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 160ms ease-out, transform 160ms ease-out, visibility 160ms ease-out;
}

.zcool-top-nav__user-profile {
  width: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.zcool-top-nav__user-meta {
  min-width: 0;
  margin-left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.zcool-top-nav__user-name {
  max-width: 184px;
  overflow: hidden;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zcool-top-nav__user-subtitle {
  max-width: 184px;
  overflow: hidden;
  color: #888;
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zcool-top-nav__user-pro-card {
  width: 236px;
  margin-top: 20px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid #ffbe7c;
  border-radius: 8px;
  background: #fff7e8;
}

.zcool-top-nav__user-pro-row {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.zcool-top-nav__user-pro-title,
.zcool-top-nav__user-points {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #a65f28;
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
}

.zcool-top-nav__user-pro-title {
  font-weight: 400;
}

.zcool-top-nav__user-pro-title img {
  width: 20px;
  height: 20px;
  display: block;
}

.zcool-top-nav .zcool-top-nav__user-pro-button,
.zcool-top-nav .zcool-top-nav__user-points-button {
  width: 64px;
  height: 24px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  cursor: pointer;
}

.zcool-top-nav .zcool-top-nav__user-pro-button {
  border: 1px solid #222;
  background: #222;
  color: #ffd9a7;
}

.zcool-top-nav .zcool-top-nav__user-pro-button:hover {
  background: var(--zcool-top-nav-dark-hover);
  color: #ffd9a7;
}

.zcool-top-nav .zcool-top-nav__user-points-button {
  border: 1px solid #ffbe7c;
  background: transparent;
  color: #a65f28;
}

.zcool-top-nav .zcool-top-nav__user-points-button:hover {
  border-color: #a65f28;
  color: #a65f28;
}

.zcool-top-nav__user-pro-divider {
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
}

.zcool-top-nav__user-points {
  font-weight: 600;
  text-align: center;
}

.zcool-top-nav__user-points-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  max-width: 20px;
  min-height: 20px;
  max-height: 20px;
  display: block;
  flex-shrink: 0;
}

.zcool-top-nav__user-menu-grid {
  margin-top: 20px;
  padding: 0 6px;
  display: grid;
  grid-template-columns: repeat(3, 48px);
  justify-content: space-between;
  row-gap: 20px;
}

.zcool-top-nav__user-menu-item {
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.zcool-top-nav__user-menu-item:hover {
  color: #ff7300;
}

.zcool-top-nav__user-menu-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--zcool-top-nav-user-menu-icon-bg, #f5f5f5);
  border-radius: 50%;
}

.zcool-top-nav__user-menu-item:hover .zcool-top-nav__user-menu-icon {
  background: var(
    --zcool-top-nav-user-menu-icon-hover-bg,
    var(--zcool-top-nav-user-menu-icon-bg, #f5f5f5)
  );
}

.zcool-top-nav__user-menu-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.zcool-top-nav__user-menu-text {
  max-width: 72px;
  overflow: hidden;
  color: #555;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zcool-top-nav__style-switch-module {
  width: 100%;
  height: 36px;
  margin-top: 20px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.05);
}

.zcool-top-nav__style-switch-module--old {
  background: rgba(255, 94, 59, 0.1);
}

.zcool-top-nav__style-switch-label {
  color: rgba(0, 0, 0, 0.7);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

.zcool-top-nav__style-switch {
  position: relative;
  width: 64px;
  height: 20px;
  padding: 2px;
  display: flex;
  align-items: center;
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.05);
}

.zcool-top-nav__style-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 30px;
  height: 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.zcool-top-nav__style-switch--old .zcool-top-nav__style-switch-thumb {
  transform: translateX(30px);
}

.zcool-top-nav__style-switch--old {
  background: #ff5e3b;
}

.zcool-top-nav__style-switch-option {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.zcool-top-nav__style-switch-option[data-style-mode='new']:not(.zcool-top-nav__style-switch-option--active) {
  color: rgba(255, 255, 255, 0.8);
}

.zcool-top-nav__style-switch-option[data-style-mode='new']:not(.zcool-top-nav__style-switch-option--active):hover {
  color: rgb(255, 255, 255);
}

.zcool-top-nav__style-switch-option[data-style-mode='old']:not(.zcool-top-nav__style-switch-option--active) {
  color: rgba(0, 0, 0, 0.5);
}

.zcool-top-nav__style-switch-option[data-style-mode='old']:not(.zcool-top-nav__style-switch-option--active):hover {
  color: rgba(0, 0, 0, 0.7);
}

.zcool-top-nav__style-switch-option--active {
  border: 0.5px solid rgba(0, 0, 0, 0.05);
  background: #fff;
  color: rgba(0, 0, 0, 0.7);
  font-weight: 500;
}

.zcool-top-nav__user-divider {
  width: 224px;
  height: 1px;
  margin: 20px auto 0;
  background: #ededed;
}

.zcool-top-nav__logout {
  width: 100%;
  height: 18px;
  margin-top: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #222;
  font: inherit;
  font-size: 14px;
  line-height: 18px;
  cursor: pointer;
}

.zcool-top-nav__logout:hover {
  color: #ff5e3b;
}

@media (max-width: 1359px) {
  .zcool-top-nav__tab {
    padding: 0 14px;
  }

  .zcool-top-nav__right,
  .zcool-top-nav__actions {
    gap: 24px;
  }
}

@media (max-width: 1180px) {
  .zcool-top-nav--header-new .zcool-top-nav__inner {
    padding: 8px 16px;
    gap: 16px;
  }

  .zcool-top-nav--header-new .zcool-top-nav__right {
    gap: 16px;
  }

  .zcool-top-nav--header-new .zcool-top-nav__tools {
    gap: 8px;
  }

  .zcool-top-nav--header-new .zcool-top-nav__search {
    width: clamp(180px, 34vw, 420px);
    max-width: 420px;
    min-width: 180px;
    flex-basis: clamp(180px, 34vw, 420px);
  }
}