.zy-symbol {
  overflow: visible;
  fill: none;
  color: var(--logo-ink, currentColor);
  --logo-tip: color-mix(in srgb, currentColor 84%, white);
}

.zy-symbol path {
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.zy-symbol .trace-base {
  opacity: 0.15;
}

.zy-symbol .trace-main {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: zy-trace-outline 3.2s linear infinite;
}

.zy-symbol .trace-main.lower {
  animation-name: zy-trace-lower;
}

.zy-symbol .trace-main.left {
  animation-name: zy-trace-left;
}

.zy-symbol .trace-main.right {
  animation-name: zy-trace-right;
}

.zy-symbol .trace-glow {
  opacity: 0.18;
  filter: blur(0.75px);
}

.zy-symbol .trace-tip {
  stroke: var(--logo-tip, #fff7e5);
  stroke-width: 1.45;
  stroke-dasharray: 0.045 0.955;
  stroke-dashoffset: 1;
  opacity: 0;
  animation: zy-trace-tip 3.2s linear infinite;
}

.zy-symbol .trace-tip.lower {
  animation-name: zy-trace-tip-lower;
}

.zy-symbol .trace-form {
  transform-origin: 52px 52px;
  animation: zy-trace-breathe 3.2s linear infinite;
}

.zy-logo-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 3px;
  color: var(--logo-ink, currentColor);
}

.zy-logo-dots i {
  display: block;
  width: 2px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  animation: zy-logo-dot 1.6s ease-in-out infinite;
}

.zy-logo-dots i:nth-child(2) {
  animation-delay: 0.16s;
}

.zy-logo-dots i:nth-child(3) {
  animation-delay: 0.32s;
}

.zy-logo-loading {
  display: inline-flex;
  align-items: center;
  color: var(--logo-ink, currentColor);
}

.zy-logo-loading--button,
.zy-logo-loading--inline {
  display: inline-grid;
  flex: none;
  place-items: center;
}

.zy-logo-loading--page {
  flex-direction: column;
  justify-content: center;
}

.zy-logo-loading__label {
  color: currentColor;
}

.zy-logo-loading--page .zy-logo-loading__label {
  margin-top: 20px;
  font-family: 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  font-size: 9px;
  line-height: 15px;
  letter-spacing: 0.38em;
  text-indent: 0.38em;
  opacity: 0.72;
}

.zy-logo-loading--page .zy-logo-dots {
  margin-top: 12px;
}

.zy-logo-loading__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.zy-logo-loading--export {
  width: min(295px, calc(100vw - 32px));
  gap: 15px;
  padding: 20px;
  border: 1px solid var(--el-border-color, rgb(223 210 180 / 13%));
  border-radius: 11px;
  background: var(--el-bg-color, #1e1f21);
  color: var(--el-text-color-primary, #d9d3c6);
  box-shadow: 0 12px 28px rgb(0 0 0 / 18%);
}

.zy-logo-loading__symbol-box {
  display: grid;
  flex: none;
  width: 40px;
  height: 40px;
  place-items: center;
}

.zy-logo-loading__copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 8px;
}

.zy-logo-loading__copy > span {
  font-size: 12px;
  line-height: 16px;
}

.zy-logo-loading__copy > small {
  color: var(--el-text-color-secondary, #8e8b83);
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
}

.zy-logo-loading--node {
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

.zy-logo-loading--node .zy-logo-loading__label {
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.zy-logo-loading__detail {
  color: var(--el-text-color-secondary, #8e8b83);
  font-size: 12px;
  line-height: 16px;
}

.zy-app-boot {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ebe2cd;
  background: #111111;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
}

html[data-appearance='light'] .zy-app-boot {
  color: #8c692c;
  background: #f3f0e9;
}

.zy-app-boot .zy-symbol {
  width: 76px;
  height: 76px;
}

.zy-app-boot-label {
  margin-top: 20px;
  color: currentColor;
  font-family: 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  font-size: 9px;
  line-height: 15px;
  letter-spacing: 0.38em;
  text-indent: 0.38em;
  opacity: 0.72;
}

.zy-app-boot .zy-logo-dots {
  margin-top: 12px;
}

.el-loading-spinner .circular {
  width: 42px;
  height: 42px;
  margin-bottom: 6px;
  color: #a38a59;
  /* Element Plus 默认会让整个 SVG 旋转；中游网 Logo 只做内部描边动画。 */
  animation: none !important;
}

html.dark .el-loading-spinner .circular,
html[data-appearance="dark"] .el-loading-spinner .circular,
.data-center-dark-shell .el-loading-spinner .circular,
.task-detail-dark-shell .el-loading-spinner .circular,
.creator-wallet-dark-shell .el-loading-spinner .circular,
.settings-page .el-loading-spinner .circular {
  color: #ebe2cd;
}

.el-loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.el-loading-spinner .el-loading-text {
  margin: 3px 0 0;
  color: #8c8578;
  font-size: 13px;
  letter-spacing: 0.4px;
}

html.dark .el-loading-spinner .el-loading-text,
html[data-appearance="dark"] .el-loading-spinner .el-loading-text,
.data-center-dark-shell .el-loading-spinner .el-loading-text,
.data-works-dark-shell .el-loading-spinner .el-loading-text,
.task-detail-dark-shell .el-loading-spinner .el-loading-text,
.creator-wallet-dark-shell .el-loading-spinner .el-loading-text,
.settings-page .el-loading-spinner .el-loading-text {
  color: #b7b2a6;
}

/* 按钮内的 v-loading：保持局部尺寸，不撑破按钮。 */
.el-button .el-loading-mask .el-loading-spinner .circular {
  width: 18px;
  height: 18px;
  margin-bottom: 0;
}

.el-button .el-loading-mask .el-loading-spinner .el-loading-text {
  margin-top: 2px;
  font-size: 11px;
}

/* Element 的 el-button :loading 图标：保留 Logo 自身描边，取消整圈旋转。 */
.el-icon.is-loading:has(.zy-symbol) {
  animation: none;
}

.el-icon .zy-symbol {
  width: 1em;
  height: 1em;
}

@keyframes zy-trace-outline {
  0%,
  4% {
    stroke-dashoffset: 1;
    opacity: 0;
  }

  7% {
    opacity: 1;
  }

  36%,
  75% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  95%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes zy-trace-lower {
  0%,
  10% {
    stroke-dashoffset: 1;
    opacity: 0;
  }

  13% {
    opacity: 1;
  }

  42%,
  75% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  95%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes zy-trace-left {
  0%,
  32% {
    stroke-dashoffset: 1;
    opacity: 0;
  }

  35% {
    opacity: 1;
  }

  45%,
  75% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  95%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes zy-trace-right {
  0%,
  38% {
    stroke-dashoffset: 1;
    opacity: 0;
  }

  41% {
    opacity: 1;
  }

  49%,
  75% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  95%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes zy-trace-tip {
  0%,
  4% {
    stroke-dashoffset: 1;
    opacity: 0;
  }

  8% {
    opacity: 0.9;
  }

  33% {
    opacity: 0.9;
  }

  36% {
    stroke-dashoffset: 0;
    opacity: 0;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes zy-trace-tip-lower {
  0%,
  10% {
    stroke-dashoffset: 1;
    opacity: 0;
  }

  14% {
    opacity: 0.9;
  }

  39% {
    opacity: 0.9;
  }

  42% {
    stroke-dashoffset: 0;
    opacity: 0;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes zy-trace-breathe {
  0%,
  40% {
    transform: scale(1);
  }

  51% {
    transform: scale(1.025);
  }

  64%,
  100% {
    transform: scale(1);
  }
}

@keyframes zy-logo-dot {
  0%,
  70%,
  100% {
    opacity: 0.2;
  }

  35% {
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zy-symbol .trace-form,
  .zy-symbol .trace-main {
    animation: none;
  }

  .zy-symbol .trace-main {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  .zy-symbol .trace-tip,
  .zy-symbol .trace-glow {
    display: none;
  }

  .zy-logo-dots i {
    animation: none;
    opacity: 0.5;
  }
}