@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-user-drag: none;
  user-drag: none;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  cursor: crosshair;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* 防止浏览器原生拖拽干扰画板移动 */
img,
svg {
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* 电影暗角 + 颗粒 */
.vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0, 0, 0, .45) 100%);
  will-change: background;
}

.grain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: .06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: g .5s steps(2) infinite;
}

@keyframes g {
  50% {
    transform: translate(-3px, 2px);
  }
}

/* ===== UI ===== */
.ui {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 36px 44px;
  opacity: 0;
  transition: opacity 1.2s .3s;
}

.ui.show {
  opacity: 1;
}

header {
  display: flex;
  justify-content: center;
  letter-spacing: .55em;
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
  transition: opacity .8s ease;
}

.center {
  text-align: center;
  position: relative;
}

.hero-content {
  transition: opacity .8s ease, transform .8s ease;
}

.hero-content.hide {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

.center h1 {
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 200;
  letter-spacing: .5em;
  text-indent: .5em;
  mix-blend-mode: screen;
  text-shadow: 0 0 30px rgba(120, 180, 255, .5);
}

.center p {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: .4em;
  color: rgba(255, 255, 255, .35);
}

/* 登录/注册表单 */
.auth-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(380px, 70vw);
  height: 520px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
  perspective: 1200px;
}

.auth-form.show {
  opacity: 1;
  pointer-events: auto;
}

.form-panel {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
  opacity: 0;
  transition:
    opacity .75s cubic-bezier(.22, .61, .36, 1),
    transform .75s cubic-bezier(.22, .61, .36, 1);
  transform-origin: center center;
  pointer-events: none;
  will-change: transform, opacity;
}

.form-panel.from-right {
  transform: translateX(55%) translateY(-50%) scale(.94);
  opacity: 0;
}

.form-panel.from-left {
  transform: translateX(-55%) translateY(-50%) scale(.94);
  opacity: 0;
}

.form-panel.active {
  opacity: 1;
  transform: translateX(0) translateY(-50%) scale(1);
  pointer-events: auto;
  transition-delay: .1s;
}

.form-panel.exit-left {
  opacity: 0;
  transform: translateX(-70%) translateY(-50%) scale(.9);
}

.form-panel.exit-right {
  opacity: 0;
  transform: translateX(70%) translateY(-50%) scale(.9);
}

.form-panel .form-title,
.form-panel .input-wrap,
.form-panel .submit-btn {
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
    transform .6s cubic-bezier(.22, .61, .36, 1);
}

.form-panel.from-right .form-title,
.form-panel.from-left .form-title,
.form-panel.from-right .input-wrap,
.form-panel.from-left .input-wrap,
.form-panel.from-right .submit-btn,
.form-panel.from-left .submit-btn {
  opacity: 0;
  transform: translateY(12px);
}

.form-panel.active .form-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .12s;
}

.form-panel.active .input-wrap:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .18s;
}

.form-panel.active .input-wrap:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .24s;
}

.form-panel.active .input-wrap:nth-child(4) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .30s;
}

.form-panel.active .input-wrap:nth-child(5) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .36s;
}

.form-panel.active .input-wrap:nth-child(6) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .42s;
}

.form-panel.active .input-wrap:nth-child(7) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .48s;
}

.form-panel.active .submit-btn {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .54s;
}

.form-title {
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 200;
  letter-spacing: .45em;
  text-indent: .45em;
  margin-bottom: 22px;
  mix-blend-mode: screen;
}

.input-wrap {
  margin-bottom: 12px;
}

.auth-input {
  width: 100%;
  padding: 13px 24px;
  background: rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50px;
  color: #fff;
  font-size: 13px;
  font-weight: 200;
  letter-spacing: .25em;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  outline: none;
  transition: .4s;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
  text-indent: .25em;
}

.auth-input::placeholder {
  color: rgba(255, 255, 255, .5);
  letter-spacing: .25em;
  font-weight: 200;
  text-indent: .25em;
}

.auth-input:focus {
  border-color: rgba(255, 255, 255, 1);
  background: rgba(0, 0, 0, .40);
}

.submit-btn {
  margin-top: 18px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .15);
  color: #fff;
  cursor: pointer;
  transition: .4s;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: inline-grid;
  place-items: center;
}

.submit-btn:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .3);
  transform: scale(1.08);
}

.play-icon {
  width: 20px;
  height: 20px;
  fill: #fff;
  margin-left: 2px;
}

.play-icon polygon {
  fill: rgba(255, 255, 255, .85);
}

/* 验证码行 */
.code-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.code-input {
  flex: 1;
}

.send-code-btn {
  padding: 0 16px;
  height: 44px;
  border-radius: 50px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .5);
  color: rgba(255, 255, 255, .8);
  font-size: 11px;
  letter-spacing: .2em;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  cursor: pointer;
  transition: .4s;
  white-space: nowrap;
  flex-shrink: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.send-code-btn:hover {
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .8);
  color: #fff;
}

.send-code-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
}

.arrow {
  pointer-events: auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: transparent;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: .35s;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.arrow svg {
  width: 18px;
  height: 18px;
  display: block;
  stroke: currentColor;
  fill: none;
}

.arrow:hover {
  border-color: #fff;
  box-shadow: 0 0 24px rgba(140, 190, 255, .45);
  transform: scale(1.1);
}

.scene-name {
  min-width: 220px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .45em;
  text-indent: .45em;
  color: rgba(255, 255, 255, .7);
  transition: opacity .4s;
}

.hint {
  position: fixed;
  bottom: 110px;
  width: 100%;
  text-align: center;
  font-size: 10px;
  letter-spacing: .35em;
  color: rgba(255, 255, 255, .22);
  transition: opacity .8s ease;
}

/* 画质切换 */
.quality-toggle {
  position: fixed;
  top: 32px;
  left: 36px;
  z-index: 6;
  pointer-events: auto;
}

.quality-toggle button {
  padding: 8px 20px;
  background: transparent;
  color: rgba(255, 255, 255, .45);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 20px;
  font-size: 10px;
  letter-spacing: .25em;
  cursor: pointer;
  transition: .3s;
}

.quality-toggle button:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .4);
}

/* 移动端适配 */
@media (max-width:768px) {
  .quality-toggle {
    display: none;
  }

  .bottom {
    gap: 26px;
  }

  .arrow {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }

  .scene-name {
    min-width: auto;
    font-size: 10px;
    letter-spacing: .35em;
    text-indent: .35em;
  }

  .hint {
    bottom: 90px;
  }

  .form-title {
    margin-bottom: 28px;
    letter-spacing: .35em;
    text-indent: .35em;
  }

  .auth-input {
    padding: 12px 24px;
    font-size: 11px;
  }

  .submit-btn {
    width: 56px;
    height: 56px;
    margin-top: 20px;
  }

  .play-icon {
    width: 18px;
    height: 18px;
  }

  .command-container {
    width: 92vw;
    bottom: 20px;
    gap: 8px;
  }

  .command-box {
    padding: 4px 4px 4px 4px;
  }

  .prompt {
    font-size: 13px;
    min-height: 32px;
  }

  .gen-btn {
    width: 32px;
    height: 32px;
  }

  .model-chip {
    width: 32px;
    height: 32px;
  }

  .param-item.chip {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grain {
    animation: none;
  }
}

:root {
  --ox: 50%;
  --oy: 50%;
}

body.studio #glcanvas,
body.studio .vignette,
body.studio .grain,
body.studio .quality-toggle {
  display: none;
}

body.studio {
  cursor: default;
}

#loginLayer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.submit-btn {
  position: relative;
  transition: background .4s, border-color .4s, box-shadow .4s;
  will-change: transform;
}

.submit-btn::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(150, 195, 255, .95), transparent 42%);
  opacity: 0;
  transition: opacity .4s;
  animation: ringspin 2.4s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}

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

.submit-btn:hover::before {
  opacity: 1;
}

.submit-btn.charging::before {
  opacity: 1;
  animation: ringspin .5s linear infinite;
}

.submit-btn.charging {
  animation: charge .45s ease-out forwards;
  border-color: rgba(150, 195, 255, .7);
}

@keyframes charge {
  0% {
    box-shadow: 0 0 8px rgba(120, 180, 255, .4);
  }

  50% {
    box-shadow: 0 0 48px 8px rgba(150, 195, 255, .8);
  }

  100% {
    box-shadow: 0 0 100px 26px rgba(150, 195, 255, 0);
  }
}

.play-icon {
  position: relative;
  z-index: 1;
  margin-left: 0;
}

.send-code-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .8);
  color: #fff;
}

.transition-mask {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .6);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  background: radial-gradient(circle at center, transparent 0%, transparent 40%, rgba(11, 11, 13, 0) 100%);
  will-change: transform, opacity, background;
}

.transition-mask.filling {
  background: radial-gradient(circle at center, rgba(11, 11, 13, 1) 0%, rgba(11, 11, 13, 1) 55%, rgba(11, 11, 13, 0) 100%);
}

.form-panel.exit-up .form-title,
.form-panel.exit-up .input-wrap,
.form-panel.exit-up .submit-btn {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity .5s cubic-bezier(.77, 0, .18, 1), transform .5s cubic-bezier(.77, 0, .18, 1);
}

.form-panel.exit-up .form-title {
  transition-delay: .05s;
}

.form-panel.exit-up .input-wrap:nth-child(2) {
  transition-delay: .1s;
}

.form-panel.exit-up .input-wrap:nth-child(3) {
  transition-delay: .15s;
}

.form-panel.exit-up .input-wrap:nth-child(4) {
  transition-delay: .2s;
}

.form-panel.exit-up .input-wrap:nth-child(5) {
  transition-delay: .25s;
}

.form-panel.exit-up .input-wrap:nth-child(6) {
  transition-delay: .3s;
}

.form-panel.exit-up .input-wrap:nth-child(7) {
  transition-delay: .35s;
}

.form-panel.exit-up .submit-btn {
  transition-delay: .4s;
}

.submit-btn.loading .play-icon {
  opacity: 0;
}

.submit-btn.loading::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .2);
  border-top-color: rgba(255, 255, 255, .9);
  animation: btn-spin .8s linear infinite;
}

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

#studioView.enter .topbar {
  animation: fadeDown .7s cubic-bezier(.16, 1, .3, 1) .2s both;
}

#studioView.enter .command {
  animation: barRise .85s cubic-bezier(.2, .8, .2, 1) .12s both;
}

#studioView.enter .empty-hint {
  animation: fadeUp .7s ease .38s both;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes barRise {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(34px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 28px;
  pointer-events: none;
}

.logo-mini,
.avatar-btn,
.icon-btn {
  pointer-events: auto;
}

.logo-mini {
  font-size: 14px;
  letter-spacing: .34em;
  font-weight: 500;
}

.logo-mini span {
  color: rgba(255, 255, 255, .35);
  font-size: 11px;
  letter-spacing: .28em;
  margin-left: 9px;
}

.top-actions {
  display: flex;
  gap: 12px;
  position: relative;
  margin-right: 12px;
  align-items: center;
}

.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
  color: rgba(255, 255, 255, .6);
  font-size: 14px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .25s;
}

.icon-btn:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .07);
}

/* 顶部透明无边框按钮自定义样式 (系统设置 & 文件管理) */
#headerSettingsBtn,
#headerFileBtn {
  width: 28px;
  height: 28px;
  border: none !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.45) !important;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.22s ease;
  pointer-events: auto !important;
}

#headerSettingsBtn svg,
#headerFileBtn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
  transform-origin: center;
}

#headerSettingsBtn:hover,
#headerFileBtn:hover {
  color: #fff !important;
  transform: scale(1.08);
}

#headerSettingsBtn:hover svg {
  transform: rotate(30deg);
  /* 悬停时齿轮微微旋转，增强细节�?*/
}

#headerSettingsBtn.active,
#headerFileBtn.active {
  color: #6aa6ff !important;
}

/* ======= 头像按钮 ======= */
.avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .6);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all .3s ease;
  padding: 0;
  position: relative;
}

.avatar-btn svg {
  width: 18px;
  height: 18px;
}

.avatar-btn:hover {
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
  background: rgba(255, 255, 255, .1);
  transform: scale(1.06);
}

.avatar-btn.active {
  border-color: rgba(106, 166, 255, .5);
  color: #fff;
  background: rgba(106, 166, 255, .12);
}

/* ======= 个人信息面板（向左平移，舒适留白） ======= */
.profile-panel {
  position: absolute;
  top: 48px;
  right: 18px;
  z-index: 60;
  width: 240px;
  background: rgba(18, 18, 24, .94);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, .04) inset;
  padding: 20px 16px 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(.98);
  transform-origin: 90% top;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.22s linear;
  font-family: "Microsoft YaHei Light", "Microsoft YaHei", sans-serif;
  font-weight: 300;
}

.profile-panel * {
  pointer-events: none;
}

.profile-panel.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.profile-panel.open * {
  pointer-events: auto;
}

.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(106, 166, 255, .18), rgba(139, 115, 255, .18));
  border: 1.5px solid rgba(255, 255, 255, .12);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .7);
}

.profile-avatar svg {
  width: 24px;
  height: 24px;
}

.profile-name {
  font-size: 14px;
  color: #fff;
  font-weight: 400;
  letter-spacing: .08em;
  margin-top: 4px;
}

.profile-email {
  font-size: 11px;
  color: rgba(255, 255, 255, .35);
  letter-spacing: .04em;
}

.profile-divider {
  height: 1px;
  background: rgba(255, 255, 255, .06);
  margin: 12px 0;
}

.profile-stats {
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.profile-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-value {
  font-size: 16px;
  color: #fff;
  font-weight: 400;
  letter-spacing: .04em;
}

.stat-label {
  font-size: 10px;
  color: rgba(255, 255, 255, .35);
  letter-spacing: .1em;
}

.profile-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, .65);
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 300;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .2s ease;
  text-align: left;
  width: 100%;
}

.profile-menu-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.profile-menu-item:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.profile-logout {
  color: rgba(255, 120, 120, .65);
}

.profile-logout:hover {
  background: rgba(255, 120, 120, .08);
  color: rgba(255, 140, 140, .9);
}

.empty-hint {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: grid;
  place-items: center;
  text-align: center;
  color: rgba(255, 255, 255, .2);
  font-size: 13px;
  letter-spacing: .22em;
  pointer-events: none;
  transition: opacity .5s;
}

.empty-hint.gone {
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
}

.command {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 94vw;
}

.prompt {
  flex: 1;
  min-width: 210px;
  background: transparent;
  border: none;
  outline: none;
  color: #EDEDF0;
  font-size: 14px;
  padding: 10px 6px;
  font-family: inherit;
}

.prompt::placeholder {
  color: rgba(255, 255, 255, .35);
}

.chip {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 13px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .82);
  font-size: 12.5px;
  cursor: pointer;
  transition: .2s;
  white-space: nowrap;
  font-family: inherit;
}

.chip:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .2);
  color: #fff;
}

.chip span:not(.model-logo) {
  line-height: 1;
  display: flex;
  align-items: center;
  transform: translateY(1px);
}

.chip .chip-key {
  color: rgba(255, 255, 255, .4);
  font-size: 11px;
}

.chip .chevron {
  font-size: 9px;
  color: rgba(255, 255, 255, .4);
  transition: transform .2s;
}

.chip.open .chevron {
  transform: rotate(180deg);
}

.chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9FB6E8;
  box-shadow: 0 0 0 3px rgba(159, 182, 232, .16);
}

.model-chip .chip-label {
  font-weight: 500;
}

.model-chip {
  padding: 0;
  width: 42px;
  justify-content: center;
}

.model-logo {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #EDEDF0;
  flex-shrink: 0;
}

.model-logo svg {
  width: 20px;
  height: 20px;
  display: block;
}

.pi-lead {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pi-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: #EDEDF0;
  flex-shrink: 0;
}

.pi-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.pi-credits {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #E8C069;
  font-family: ui-monospace, "SF Mono", monospace;
  flex-shrink: 0;
}

.coin {
  width: 13px;
  height: 13px;
  display: block;
}

.gen-btn {
  position: relative;
  overflow: hidden;
  height: 38px;
  padding: 0 20px;
  border-radius: 11px;
  background: #EDEDF0;
  color: #0B0B0D;
  border: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s;
  font-family: inherit;
}

.gen-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255, 255, 255, .14);
}

.gen-btn .gen-arrow {
  transition: transform .25s;
}

.gen-btn:hover:not(:disabled) .gen-arrow {
  transform: translateX(3px);
}

.gen-btn:disabled {
  cursor: default;
  color: rgba(11, 11, 13, .85);
}

.gen-btn .gen-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, #9FB6E8, #C9B8D8);
  z-index: 0;
  transition: width .1s linear;
}

.gen-label,
.gen-arrow {
  position: relative;
  z-index: 1;
}

.popover {
  position: fixed !important;
  z-index: 10000 !important;
  min-width: 158px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(24, 24, 28, .97);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(6px) scale(.98);
  visibility: hidden;
  pointer-events: none;
  max-height: calc(100vh - 32px) !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.2s linear;
  font-family: "Microsoft YaHei", sans-serif;
  letter-spacing: 1px;
}

.popover * {
  pointer-events: none;
}

.popover.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
}

.popover.open * {
  pointer-events: auto;
}

.pop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 12px;
  border-radius: 9px;
  cursor: pointer;
  transition: .15s;
}

.pop-item:hover {
  background: rgba(255, 255, 255, .06);
}

.pop-item.active {
  background: rgba(159, 182, 232, .12);
}

.pi-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.pi-name {
  font-size: 13px;
  color: #EDEDF0;
}

.pi-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, .4);
}

.pop-check {
  color: #9FB6E8;
  font-size: 12px;
  opacity: 0;
  flex-shrink: 0;
}

.pop-item.active .pop-check {
  opacity: 1;
}

/* ===== Chat Model Popup Item ===== */
.chat-pop-model-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 6px 10px !important;
  margin-bottom: 2px !important;
  border-radius: 9px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

.chat-pop-model-item:last-child {
  margin-bottom: 0 !important;
}

.chat-pop-model-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.chat-pop-model-item.active {
  background: rgba(159, 182, 232, 0.12) !important;
  border: 1px solid rgba(159, 182, 232, 0.25) !important;
}

.cpm-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.cpm-icon {
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #6aa6ff !important;
}

.cpm-name {
  font-size: 13px !important;
  font-weight: 400 !important;
  font-family: "Microsoft YaHei", "微软雅黑", -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: #EDEDF0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
}

.cpm-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  text-align: right !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

.cpm-rates-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  text-align: right !important;
  gap: 1px !important;
}

.cpm-rate-row {
  font-size: 10.5px !important;
  font-weight: 400 !important;
  font-family: "Microsoft YaHei", "微软雅黑", -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: #f59e0b !important;
  white-space: nowrap !important;
  line-height: 1.25 !important;
}

.cpm-rate-row.free {
  color: #10b981 !important;
  font-weight: bold !important;
}

.cpm-check-wrap {
  width: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.cpm-check {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #9FB6E8 !important;
}

/* ===== 左侧工具�?�?极简重设�?===== */
.left-tools {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  width: 44px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.lt-section-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.18);
  margin-bottom: 6px;
  user-select: none;
  text-indent: 0.18em;
}

.lt-divider {
  width: 20px;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 6px 0;
  border-radius: 1px;
}

.lt-section-label {
  display: none;
}

.lt-title {
  display: none;
}

.lt-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: grab;
  transition: color 0.2s ease, background 0.2s ease;
  font-family: inherit;
  position: relative;
}

.lt-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.06);
}

.lt-btn:active {
  cursor: grabbing;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(0.94);
}

.lt-ico {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.more-item-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.12s ease;
  background: none;
  border-radius: 0;
}

.lt-more-item:hover .more-item-icon {
  color: #fff;
}

.more-item-icon svg {
  width: 17px;
  height: 17px;
}

/* 仅专属放大【多图上传】图标 (Multi-Upload Icon Only) */
.lt-more-item[data-add="multi_upload"] .more-item-icon svg,
.node-multi-upload-card .nh-ico svg,
.wqm-item[data-type="multi_upload"] svg {
  transform: scale(1.3) !important;
}

/* 确保 LLM 大模型图标恢复标准尺寸 */
.lt-btn[data-add="chat"] .lt-ico svg,
.node-chat-card .nh-ico svg,
.wqm-item[data-type="chat"] svg {
  transform: none !important;
  width: 17px !important;
  height: 17px !important;
}

/* 批量/顺序运行工作流按钮 (黑色主题纯白按钮，亮色主题与底部发送按钮 #3b82f6 一致) */
.lt-btn.lt-batch-run-btn {
  background: #ffffff !important;
  color: #0f172a !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.35) !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  margin-top: 2px !important;
  cursor: pointer !important;
}

.lt-btn.lt-batch-run-btn svg {
  width: 14px !important;
  height: 14px !important;
  transform: translateX(1px) !important;
  fill: #0f172a !important;
  color: #0f172a !important;
}

.lt-btn.lt-batch-run-btn:hover {
  background: #ffffff !important;
  color: #0284c7 !important;
  transform: scale(1.1) !important;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.65), 0 0 0 2px rgba(56, 189, 248, 0.5) !important;
}

.lt-btn.lt-batch-run-btn:active {
  transform: scale(0.94) !important;
}

/* 亮色画布主题模式下：使用宝蓝色按钮与底部发送按钮完全一致 */
.light-canvas .lt-btn.lt-batch-run-btn {
  background: #3b82f6 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 12px rgba(59, 130, 246, 0.45) !important;
}

.light-canvas .lt-btn.lt-batch-run-btn svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}

.light-canvas .lt-btn.lt-batch-run-btn:hover {
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 5px 20px rgba(59, 130, 246, 0.65), 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}

.lt-btn.lt-batch-run-btn.is-running {
  background: linear-gradient(135deg, #38bdf8, #0284c7) !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.75) !important;
  animation: rxBatchPulse 1.2s infinite ease-in-out !important;
}

.lt-btn.lt-batch-run-btn.is-running svg {
  animation: rxaiSpin 1s linear infinite !important;
}

@keyframes rxBatchPulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
  }

  50% {
    transform: scale(1.08);
    box-shadow: 0 0 22px rgba(56, 189, 248, 0.9);
  }
}

/* 更多板块浮动展开面板样式 (右键极简菜单风格) */
.lt-more-panel {
  position: absolute;
  left: 48px;
  top: 178px;
  width: auto;
  min-width: 140px;
  background: rgba(14, 16, 22, 0.88);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  padding: 5px;
  box-shadow: 0 0 0 0.3px rgba(255, 255, 255, 0.06) inset,
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 999999;
  opacity: 0;
  transform: translateX(-6px) scale(0.94);
  pointer-events: none;
  transition: opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1), transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.lt-more-panel.open {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.lt-more-header {
  display: none !important;
}

.lt-more-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lt-more-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5.5px 11px;
  border-radius: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  user-select: none;
  color: rgba(255, 255, 255, 0.82);
}

.lt-more-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.lt-more-item:active {
  background: rgba(255, 255, 255, 0.13);
  transform: scale(0.98);
}

.more-item-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.12s ease;
  background: none;
  border-radius: 0;
}

.lt-more-item:hover .more-item-icon {
  color: #fff;
}

.more-item-icon svg {
  width: 17px;
  height: 17px;
}

.more-item-title {
  font-size: 13px;
  font-weight: 400;
  color: inherit;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.more-item-desc,
.more-item-tag {
  display: none !important;
}

/* 多图上传卡片 (Multi-Upload Node Card) 高奢极简去框化重构 */
.node.node-multi-upload-card {
  width: 320px !important;
  min-height: auto !important;
  height: auto !important;
  background: rgba(22, 22, 26, 0.92) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}

.multi-upload-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.multi-upload-dropzone {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-style: solid !important;
  border-radius: 8px !important;
  padding: 22px 14px;
  text-align: center;
  background: transparent !important;
  background-color: transparent !important;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: none !important;
}

.multi-upload-dropzone:hover {
  border-color: rgba(99, 102, 241, 0.4) !important;
  background: transparent !important;
  background-color: transparent !important;
  transform: translateY(-1px);
}

/* ==================== 提示词变量板块 极简适配 (Dark & Light) ==================== */
.node-prompt-var .prompt-var-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  height: calc(100% - 36px);
  box-sizing: border-box;
}

.node-prompt-var .var-prompt-ta {
  flex: 1;
  width: 100%;
  resize: none;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  padding: 10px;
  color: #EDEDF0;
  font-size: 12px;
  line-height: 1.45;
  outline: none;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.node-prompt-var .var-prompt-ta::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.node-prompt-var .var-name-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  padding: 8px 10px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.node-prompt-var .var-name-label {
  font-size: 13px;
  font-weight: 500;
  color: #006cff;
  white-space: nowrap;
  flex-shrink: 0;
}

.node-prompt-var .var-name-input {
  flex: 1;
  width: 100%;
  background: transparent;
  border: none;
  color: #006cff;
  font-size: 12px;
  font-weight: 400 !important;
  outline: none;
}

.node-prompt-var .var-name-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.node-prompt-var .var-name-input,
.node-prompt-var .var-name-input:focus,
.node-prompt-var .var-name-input:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.node-prompt-var .var-prompt-ta,
.node-prompt-var .var-prompt-ta:focus,
.node-prompt-var .var-prompt-ta:active,
.node-prompt-var .var-name-box,
.node-prompt-var .var-name-box:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

.node-prompt-var .var-prompt-ta:focus,
.node-prompt-var .var-name-box:focus-within {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ---------- 亮色模式 (Light Canvas) 完美适配 ---------- */
.light-canvas .node-prompt-var .var-prompt-ta,
.light-canvas .node-prompt-var .var-name-box {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(203, 213, 225, 0.85) !important;
}

.light-canvas .node-prompt-var .var-prompt-ta {
  color: #0f172a !important;
}

.light-canvas .node-prompt-var .var-prompt-ta::placeholder {
  color: rgba(15, 23, 42, 0.35) !important;
}

.light-canvas .node-prompt-var .var-name-label {
  color: #006cff !important;
}

.light-canvas .node-prompt-var .var-name-input {
  color: #006cff !important;
}

.light-canvas .node-prompt-var .var-name-input::placeholder {
  color: rgba(15, 23, 42, 0.35) !important;
}

.light-canvas .node-prompt-var .var-prompt-ta:focus,
.light-canvas .node-prompt-var .var-name-box:focus-within {
  border-color: rgba(203, 213, 225, 0.85) !important;
  outline: none !important;
  box-shadow: none !important;
}

.multi-upload-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 2px;
  box-sizing: border-box;
}

.multi-upload-grid:empty {
  display: none !important;
}

.multi-thumb-item {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.multi-thumb-item:hover {
  border-color: rgba(99, 102, 241, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.25);
}

.multi-thumb-item.active-running {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 2px #10b981,
    0 0 6px rgba(16, 185, 129, 0.85),
    0 0 12px rgba(16, 185, 129, 0.45),
    inset 0 0 10px rgba(16, 185, 129, 0.35) !important;
  animation: subtle-glow-pulse 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
  z-index: 10;
}

.multi-thumb-item.active-running .multi-thumb-index {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
}

@keyframes rxaiSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* 批量多图依次运行加载遮罩与雷达流光动画 */
.multi-thumb-spinner-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(1.5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  animation: fadeIn 0.2s ease forwards;
}

.multi-thumb-spinner {
  width: 22px;
  height: 22px;
  box-sizing: border-box !important;
  aspect-ratio: 1 / 1 !important;
  border: 2.5px solid rgba(16, 185, 129, 0.25) !important;
  border-top-color: #10b981 !important;
  border-right-color: #34d399 !important;
  border-radius: 50% !important;
  animation: rxaiSpin 0.75s linear infinite !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.6) !important;
  flex-shrink: 0 !important;
}

@keyframes subtle-glow-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 2px #10b981,
      0 0 6px rgba(16, 185, 129, 0.8),
      0 0 12px rgba(16, 185, 129, 0.4),
      inset 0 0 8px rgba(16, 185, 129, 0.3);
    border-color: #10b981;
  }

  50% {
    box-shadow: 0 0 0 2px #34d399,
      0 0 10px rgba(52, 211, 153, 0.95),
      0 0 16px rgba(52, 211, 153, 0.55),
      inset 0 0 12px rgba(52, 211, 153, 0.45);
    border-color: #34d399;
  }
}

.multi-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.multi-thumb-index {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.78) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  color: #ffffff !important;
  font-size: 9px;
  font-weight: 500;
  font-family: 'Outfit', -apple-system, sans-serif;
  border: none !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 1px 4px rgba(0, 0, 0, 0.35) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1 !important;
  z-index: 4;
  pointer-events: none;
  user-select: none;
}

.multi-thumb-del {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  background: rgba(239, 68, 68, 0.85);
  color: #fff;
  font-size: 10px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.multi-thumb-item:hover .multi-thumb-del {
  opacity: 1;
}

.multi-upload-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  padding-top: 6px;
  font-family: 'Outfit', 'PingFang SC', sans-serif;
}

.multi-count-label {
  color: #818cf8;
  font-weight: 600;
}

.multi-upload-clear-btn {
  background: transparent;
  border: 1px solid transparent;
  color: rgba(248, 113, 113, 0.75);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: 'Outfit', 'PingFang SC', sans-serif;
}

.multi-upload-clear-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* ================= 输出画廊卡片 (Output Gallery Node Card) 高奢极简去框化重构 ================= */
.node.node-gallery-card,
.node.node-doc-library-card {
  min-height: auto !important;
  height: auto !important;
  background: rgba(22, 22, 26, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.node.node-gallery-card .node-head,
.node.node-doc-library-card .node-head {
  border-top-left-radius: 9px !important;
  border-top-right-radius: 9px !important;
}

/* ================= 板块选中微描边与柔和轮廓 (对齐 AI对话 的纯净微光描边) ================= */
.node.selected,
.node-doc-library-card.selected,
.node-gallery-card.selected,
.node-multi-upload-card.selected {
  border-color: rgba(255, 255, 255, 0.38) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gallery-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 彻底取消黑色矩形方框容器 (No Box Outer Frame) - 极简高奢按钮阵列 */
.gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
}

/* 按钮微雕：微胶囊主按钮、通透玻璃次按钮、幽灵警示按钮 */
.gallery-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  padding: 5.5px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
  font-family: 'Outfit', 'PingFang SC', sans-serif;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.gallery-btn svg {
  flex-shrink: 0;
  pointer-events: none;
}

/* 打包下载 ZIP: 主高亮渐变胶囊 */
.gallery-btn-zip {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 12px rgba(99, 102, 241, 0.35) !important;
  font-weight: 600 !important;
  border: 1px solid transparent !important;
}

.gallery-btn-zip:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 16px rgba(99, 102, 241, 0.5) !important;
}

/* 单独下载: 无框次级玻璃胶囊 */
.gallery-btn-dl-all {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.gallery-btn-dl-all:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* 清空: 幽灵警示按钮 */
.gallery-btn-clear {
  background: transparent !important;
  color: rgba(248, 113, 113, 0.75) !important;
  border: 1px solid transparent !important;
  padding: 5.5px 8px !important;
}

.gallery-btn-clear:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  transform: translateY(-1px) !important;
}

.gallery-info-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  padding: 0 2px;
  font-family: 'Outfit', 'PingFang SC', sans-serif;
}

.gallery-count-label {
  color: #818cf8;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.gallery-drop-tip {
  color: rgba(255, 255, 255, 0.4);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  padding: 2px;
  box-sizing: border-box;
}

/* 彻底统一 4 大板块内部矩形：1px 超细实线描边 + 统一背景矩形颜色 + 8px 圆角 */
.gallery-grid:empty,
.gallery-grid.is-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  background-color: rgba(255, 255, 255, 0.025) !important;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  gap: 6px;
  box-shadow: none !important;
}

.gallery-thumb-item {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-thumb-item:hover {
  border-color: rgba(99, 102, 241, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.25);
}

.gallery-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-thumb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.gallery-thumb-item:hover .gallery-thumb-overlay {
  opacity: 1;
}

.gallery-action-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.gallery-action-btn:hover {
  background: #6366f1;
  border-color: #6366f1;
  transform: scale(1.15);
}

.gallery-action-btn.del-btn:hover {
  background: #ef4444;
  border-color: #ef4444;
}

.gallery-thumb-index {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.78) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  color: #ffffff !important;
  font-size: 9px;
  font-weight: 500;
  font-family: 'Outfit', -apple-system, sans-serif;
  border: none !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 1px 4px rgba(0, 0, 0, 0.35) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1 !important;
  z-index: 4;
  pointer-events: none;
  user-select: none;
}

/* 输出画廊卡片 (Light Theme 亮色主题高奢适配) */
.light-canvas .node.node-gallery-card {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.03) !important;
  border-radius: 16px !important;
}

.light-canvas .node.node-gallery-card .node-head {
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 10px 14px !important;
}

.light-canvas .node.node-gallery-card .node-title {
  color: #0f172a !important;
  font-weight: 600 !important;
}

.light-canvas .node.node-gallery-card .node-close {
  color: #94a3b8 !important;
}

.light-canvas .node.node-gallery-card .node-close:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.light-canvas .gallery-toolbar {
  background: transparent !important;
  border: none !important;
}

.light-canvas .gallery-btn-zip {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  border: none !important;
}

.light-canvas .gallery-btn-dl-all {
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.light-canvas .gallery-btn-dl-all:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

.light-canvas .gallery-btn-clear {
  background: transparent !important;
  color: #ef4444 !important;
  border: none !important;
}

.light-canvas .gallery-btn-clear:hover {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

.light-canvas .gallery-count-label {
  color: #4f46e5 !important;
  font-weight: 600 !important;
}

.light-canvas .gallery-drop-tip {
  color: #64748b !important;
}

.light-canvas .gallery-grid:empty,
.light-canvas .gallery-grid.is-empty {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 8px !important;
  color: #64748b !important;
  box-shadow: none !important;
}

.light-canvas .gallery-grid.is-empty svg {
  stroke: #6366f1 !important;
}

.light-canvas .gallery-thumb-item {
  border: 1px solid #cbd5e1 !important;
  background: #0f172a !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

.light-canvas .gallery-thumb-item:hover {
  border-color: #6366f1 !important;
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.18) !important;
}

/* 正在运行节点的轮廓高亮提示 (贴合卡片 16px 圆角，精致细边框 + 外发光) */
.node.node-running-active,
.node-running-active .chat-main-card,
.node-running-active .draw-main-card,
.chat-main-card.node-running-active,
.draw-main-card.node-running-active {
  border-radius: 16px !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 1.5px rgba(56, 189, 248, 0.9), 0 0 14px rgba(56, 189, 248, 0.6), 0 0 28px rgba(56, 189, 248, 0.35) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.light-canvas .node.node-running-active,
.light-canvas .node-running-active .chat-main-card,
.light-canvas .node-running-active .draw-main-card,
.light-canvas .chat-main-card.node-running-active,
.light-canvas .draw-main-card.node-running-active {
  border-radius: 16px !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 1.5px rgba(2, 132, 199, 0.85), 0 0 14px rgba(2, 132, 199, 0.5), 0 0 26px rgba(2, 132, 199, 0.25) !important;
}

/* AI 对话节点未返回文案时的流光 Loader 动画 */
.chat-card-loading {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 36px 16px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.light-canvas .chat-card-loading {
  color: rgba(15, 23, 42, 0.75) !important;
}

.chat-loading-spinner {
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid rgba(56, 189, 248, 0.2) !important;
  border-top-color: #38bdf8 !important;
  border-right-color: #38bdf8 !important;
  border-radius: 50% !important;
  animation: rxaiSpin 0.75s linear infinite !important;
  flex-shrink: 0 !important;
}

.lt-ico svg {
  width: 18px;
  height: 18px;
  display: block;
}

.lt-label {
  display: none;
}

/* Tooltip */
.lt-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: rgba(20, 20, 26, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.88);
  font-size: 11px;
  font-family: inherit;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 100;
}

.lt-btn:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* 禁用左侧核心 4 个主功能按钮的小名称 Tooltip 弹窗（仅保留富文本简介弹窗） */
.lt-btn[data-add="upload"]::after,
.lt-btn[data-add="prompt"]::after,
.lt-btn[data-add="draw"]::after,
.lt-btn[data-add="chat"]::after {
  display: none !important;
}


/* ================= 工作室画布背�?================= */
/* ================= 工作室画布背景 (全新极简光影) ================= */
.board {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  --mx1: -1000px;
  --my1: -1000px;
  --mx2: -1000px;
  --my2: -1000px;
  --glow: 0;

  background-color: #030408;
  /* removed old radial grid */
  background-size: 32px 32px;
  background-position: center center;

  --tracker-color: 140, 190, 255;
  --tracker-bg: 106, 166, 255;
}

.board.fx-pink {
  --tracker-color: 255, 105, 180;
  --tracker-bg: 255, 105, 180;
}

/* 鼠标极度柔和底光 - 仅照亮背景，无网格切割感 */


/* 移除原有的漫反射底光和 Atmosphere */
.board::after {
  display: none;
}

/* Atmosphere glow removed for performance optimization */

/* Touch devices now support the glow through pointerdown events, so we no longer hide the glow effect */

.world {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.wire-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.wire {
  fill: none;
  stroke: rgba(159, 182, 232, .8);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: none !important;
  pointer-events: stroke;
  cursor: pointer;
}

.wire[data-type="image"] {
  stroke: rgba(95, 176, 166, .85);
}

.wire:hover {
  stroke-width: 3.2;
}

.wire-temp {
  stroke: rgba(106, 166, 255, .9) !important;
  stroke-width: 2px !important;
  stroke-dasharray: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: .9;
  pointer-events: none;
}

/* 拉线松手快捷创建菜单 */
.wire-quick-menu {
  position: fixed;
  z-index: 999999;
  background: rgba(24, 24, 28, .92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, .06) inset;
  opacity: 0;
  transform: scale(.92);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}

.wire-quick-menu.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.wire-quick-menu .wqm-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 10px;
  border-radius: 7px;
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.wire-quick-menu .wqm-item:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.wire-quick-menu .wqm-item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}


.node {
  position: absolute;
  z-index: 2;
  width: 180px;
  border-radius: 10px;
  overflow: visible;
  background: rgba(22, 22, 26, 0.92);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.node:not(.node-draw-card):not(.node-chat-card) {
  min-height: 180px;
  display: flex;
  flex-direction: column;
}

/* AI对话Skill设置 & 提示词节点 尺寸与滚动条强约束 (禁止长文本向下扩展边框，滚动条由内部 textarea 承载) */
.node.node-prompt,
.node.node-chat-skill {
  max-height: none;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.node.node-prompt .node-body,
.node.node-chat-skill .node-body {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}

.node.node-prompt .node-ta,
.node.node-chat-skill .node-ta {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  box-sizing: border-box !important;
}

.node.has-image-node:not(.node-draw-card) {
  min-height: auto;
}

.node.selected {
  border-color: rgba(255, 255, 255, .25);
  box-shadow: none !important;
}

/* 彻底统一 4 大板块内部背景矩形：1px 超细实线描边 + 统一背景矩形颜色 + 8px 圆角 */
.dropzone,
.dropzone:not(.has-image),
.multi-upload-dropzone,
.node .dropzone,
.node .dropzone:not(.has-image) {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-style: solid !important;
  border-radius: 8px !important;
  padding: 22px 14px;
  background: rgba(255, 255, 255, 0.025) !important;
  background-color: rgba(255, 255, 255, 0.025) !important;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  min-height: 120px;
  box-shadow: none !important;
}

.dropzone:has(.dz-img) {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

.dropzone.has-image {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  min-height: auto;
  flex: none;
  width: 100%;
  height: auto;
}

.dropzone:not(.has-image):hover {
  border-color: rgba(99, 102, 241, 0.6) !important;
  background: transparent !important;
  background-color: transparent !important;
  transform: translateY(-1px);
}

.dz-img-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.dz-img {
  width: 100%;
  height: 100%;
  min-height: 160px;
  max-height: 380px;
  object-fit: cover;
  border-radius: 6px !important;
  display: block;
  border: none !important;
}

.node.dragging {
  box-shadow: none !important;
  border-color: rgba(255, 255, 255, .24);
}

/* ====== 框选蓝色选区 ====== */
#marqueeSelect {
  position: fixed;
  z-index: 300;
  pointer-events: none;
  border: 1.5px solid rgba(106, 166, 255, 0.85);
  background: rgba(106, 166, 255, 0.06);
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(106, 166, 255, 0.25) inset;
  display: none;
  transition: border-color 0.12s ease;
}

#marqueeSelect.active {
  display: block;
  animation: marquee-in 0.1s ease-out;
}

@keyframes marquee-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.node-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  cursor: grab;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.node.dragging .node-head {
  cursor: grabbing;
}

.nh-ico {
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, .7);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.nh-ico svg {
  width: 14px;
  height: 14px;
}

/* 彻底隐藏节点 Header 的输出接口状态指示灯 */
.nh-ico.node-status-dot,
.node-status-dot,
.status-dot,
.rx-status-dot {
  display: none !important;
}

@keyframes dotPulseRed {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 5px rgba(239, 68, 68, 0.7), 0 0 10px rgba(239, 68, 68, 0.3);
  }

  50% {
    transform: scale(1.18);
    box-shadow: 0 0 9px rgba(239, 68, 68, 0.9), 0 0 16px rgba(239, 68, 68, 0.5);
  }
}

@keyframes dotPulseGreen {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 5px rgba(16, 185, 129, 0.7), 0 0 10px rgba(16, 185, 129, 0.3);
  }

  50% {
    transform: scale(1.18);
    box-shadow: 0 0 9px rgba(16, 185, 129, 0.9), 0 0 16px rgba(16, 185, 129, 0.5);
  }
}

.node-title {
  flex: 1;
  font-size: 11.5px;
  letter-spacing: .03em;
  color: #EDEDF0;
}

.node-close {
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent;
  color: rgba(255, 255, 255, .4);
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  transition: .15s;
  text-align: center !important;
  vertical-align: middle !important;
}

.node-close svg {
  display: block !important;
  margin: auto !important;
}

.node-close:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.node-resize-handle {
  position: absolute;
  z-index: 20;
}

.edge-r {
  top: 0;
  right: -4px;
  width: 10px;
  height: 100%;
  cursor: ew-resize;
}

.edge-b {
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 10px;
  cursor: ns-resize;
}

.edge-br {
  bottom: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  z-index: 21;
}

.node-body,
.prompt-var-body {
  padding: 9px;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 全局端口 100% 360° 同心圆规范 (彻底清除 WebKit Outline 变形 Bug) */
.port {
  position: absolute;
  width: 9px !important;
  height: 9px !important;
  min-width: 9px !important;
  max-width: 9px !important;
  min-height: 9px !important;
  max-height: 9px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  background: #10b981;
  box-shadow: 0 0 0 1.5px #0e1016 !important;
  cursor: crosshair;
  z-index: 25;
  overflow: visible !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease;
  transform-origin: center center;
  -webkit-font-smoothing: antialiased;
}

.port.out {
  right: 0;
  transform: translate(50%, -50%);
}

.port.in {
  left: 0;
  transform: translate(-50%, -50%);
}

.port[data-type="image"] {
  background: #10b981;
}

.port[data-type="prompt"],
.port[data-type="var"] {
  background: #6366f1;
}

.port.out:hover {
  transform: translate(50%, -50%) scale(1.15) !important;
}

.port.in:hover {
  transform: translate(-50%, -50%) scale(1.15) !important;
}

.port[data-type="prompt"].out:hover,
.port[data-type="var"].out:hover {
  transform: translate(50%, -50%) scale(1.15) !important;
}

.port[data-type="prompt"].in:hover,
.port[data-type="var"].in:hover {
  transform: translate(-50%, -50%) scale(1.15) !important;
}

.port.linked {
  box-shadow: 0 0 0 1.5px #0e1016, 0 0 0 4px rgba(16, 185, 129, 0.4) !important;
}

.port[data-type="prompt"].linked,
.port[data-type="var"].linked {
  box-shadow: 0 0 0 1.5px #0e1016, 0 0 0 4px rgba(99, 102, 241, 0.4) !important;
}

.port::after {
  content: attr(data-title);
  position: absolute;
  font-family: "Microsoft YaHei Light", "Microsoft YaHei", sans-serif;
  font-weight: 300;
  color: #fff;
  font-size: 11.5px;
  white-space: nowrap;
  pointer-events: none;
  background: transparent;
  top: 50%;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity .25s ease, transform .25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.port.in::after {
  right: 100%;
  margin-right: 10px;
  transform: translateY(-50%) translateX(8px);
}

.port.out::after {
  left: 100%;
  margin-left: 10px;
  transform: translateY(-50%) translateX(-8px);
}

.port:hover::after,
.node.selected .port::after {
  opacity: 1;
}

.port.in:hover::after,
.node.selected .port.in::after {
  transform: translateY(-50%) translateX(0);
}

.port.out:hover::after,
.node.selected .port.out::after {
  transform: translateY(-50%) translateX(0);
}

.light-canvas .port::after {
  color: #1a1a2e;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9), 0 0 4px #fff;
  font-weight: 500;
}

.dropzone {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-style: solid !important;
  border-radius: 8px;
  padding: 22px 14px;
  background: transparent !important;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.dropzone:has(.dz-img) {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

.dropzone.has-image {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

.dropzone:not(.has-image):hover {
  border-color: rgba(99, 102, 241, .35);
  background: rgba(99, 102, 241, .06);
  transform: translateY(-1px);
}

.dz-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.dropzone.has-image .dz-btns {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 14, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  padding: 0;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: none;
  border: none;
  transform: none;
}

.dropzone.has-image:not(:hover) .dz-btns {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
}

.dropzone.has-image:hover .dz-btns {
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.dz-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.dropzone.has-image .dz-btn {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
}

.dz-btn:hover {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.4);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.25);
}

.dropzone.has-image .dz-btn:hover {
  background: rgba(99, 102, 241, 0.3);
  border-color: rgba(99, 102, 241, 0.5);
}

.dz-btn:active {
  transform: translateY(0) scale(0.96);
}

/* Photoshop 官方品牌专用高奢切角按钮 (消除双重方块嵌套) */
.dz-btn.dz-ps-btn {
  background: #001e36 !important;
  border: 1px solid rgba(49, 168, 255, 0.35) !important;
  color: #31a8ff !important;
  box-shadow: 0 1px 4px rgba(0, 24, 45, 0.15) !important;
}

.dz-btn.dz-ps-btn .ps-ico-text {
  font-family: 'Outfit', -apple-system, sans-serif;
  font-size: 18.5px;
  font-weight: 800;
  color: #31a8ff !important;
  letter-spacing: -0.6px;
  line-height: 1;
  display: block;
}

.dz-btn.dz-ps-btn:hover {
  background: #002848 !important;
  border-color: #31a8ff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(49, 168, 255, 0.2) !important;
}

.dz-btn.dz-ps-btn:hover .ps-ico-text {
  color: #58bbff !important;
}

/* 单图上传卡片按钮 Hover 专向微雕 (彻底消除删除按钮的紫色背景) */
.dz-btn.dz-img-btn:hover,
.dropzone.has-image .dz-btn.dz-img-btn:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

.dz-btn.dz-del-btn {
  color: rgba(248, 113, 113, 0.85);
}

.dz-btn.dz-del-btn:hover,
.dropzone.has-image .dz-btn.dz-del-btn:hover,
.light-canvas .dz-btn.dz-del-btn:hover {
  background: rgba(239, 68, 68, 0.22) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  color: #f87171 !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3) !important;
  transform: translateY(-2px) !important;
}

.dz-btn.dz-del-btn svg,
.dropzone.has-image .dz-btn.dz-del-btn svg {
  stroke: #f87171 !important;
}

.dz-btn svg {
  width: 18px;
  height: 18px;
  transition: all .25s;
}

.dropzone.has-image .dz-btn svg {
  width: 18px;
  height: 18px;
}

.dz-ico {
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, .6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropzone.has-image .dz-ico {
  width: 18px;
  height: 18px;
}

.dz-ico svg {
  width: 18px;
  height: 18px;
}

.dz-btn::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(15, 15, 18, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 100;
}

.dz-btn:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.dz-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.node-ta,
div.node-ta,
textarea.node-ta,
.node-ta[contenteditable="true"],
.var-prompt-ta {
  width: 100% !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  resize: none;
  border-radius: 8px !important;
  padding: 8px 9px;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: rgba(255, 255, 255, .025) !important;
  background-color: rgba(255, 255, 255, .025) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  color: #EDEDF0;
  font-size: 11.5px;
  font-family: inherit;
  outline: none;
  transition: .2s;
  word-break: break-word !important;
  white-space: pre-wrap !important;
}

.node-ta::-webkit-scrollbar,
.var-prompt-ta::-webkit-scrollbar {
  width: 6px;
}

.node-ta::-webkit-scrollbar-track,
.var-prompt-ta::-webkit-scrollbar-track {
  background: transparent;
  margin-top: 6px;
  margin-bottom: 6px;
}

.node-ta::-webkit-scrollbar-thumb,
.var-prompt-ta::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 9999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}

.node-ta::-webkit-scrollbar-thumb:hover,
.var-prompt-ta::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid transparent;
  background-clip: padding-box;
}

.node-ta:focus {
  border-color: rgba(159, 182, 232, .5);
  background: rgba(255, 255, 255, .06);
}

.node-ta::placeholder {
  color: rgba(255, 255, 255, .35);
}

.node-gen {
  height: 30px;
  border-radius: 9px;
  background: #EDEDF0;
  color: #0B0B0D;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  font-family: inherit;
  transition: .2s;
}

.node-gen:hover:not(:disabled) {
  box-shadow: 0 6px 18px rgba(255, 255, 255, .14);
}

.node-gen:disabled {
  color: rgba(11, 11, 13, .55);
  cursor: default;
}

.node-result {
  border-radius: 10px;
  overflow: hidden;
}

.node-result:empty {
  display: none;
}

.card {
  position: absolute;
  z-index: 2;
  will-change: transform;
}

.card-sway.in {
  animation: cardIn .6s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: scale(.92) translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.card-sway.settled {
  animation: sway 1.7s cubic-bezier(.36, .07, .19, .97);
}

@keyframes sway {
  0% {
    transform: rotate(0);
  }

  18% {
    transform: rotate(-1.7deg);
  }

  42% {
    transform: rotate(1.1deg);
  }

  68% {
    transform: rotate(-.5deg);
  }

  100% {
    transform: rotate(0);
  }
}

.card-inner {
  position: relative;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.4, .08, .2, 1), width .3s cubic-bezier(.4, 0, .2, 1), height .3s cubic-bezier(.4, 0, .2, 1);
  cursor: grab;
}

.card-inner.flipped {
  transform: rotateY(180deg);
}

.card-inner.grabbing {
  cursor: grabbing;
}

.card-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.card-back {
  background: #141416;
  transition: opacity 0s;
}

.card-inner.flipped .card-back {
  opacity: 0;
  transition-delay: 0.5s;
}

.card-front {
  transform: rotateY(180deg);
}

.shimmer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(110deg, transparent 20%,
      rgba(255, 255, 255, .05) 44%, rgba(255, 255, 255, .11) 50%, rgba(255, 255, 255, .05) 56%, transparent 80%);
  background-size: 220% 100%;
  animation: shine 1.5s linear infinite;
}

@keyframes shine {
  to {
    background-position: -220% 0;
  }
}

.card-progress {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 36px;
  height: 5px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}

.card-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.4);
  border-radius: 9999px;
  transition: width 0.15s linear;
}

.card-status {
  position: absolute;
  left: 16px;
  bottom: 15px;
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .55);
  font-family: ui-monospace, "SF Mono", monospace;
}

.card-status b {
  color: #fff;
  font-weight: 600;
}

.card-grain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .07;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.card-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent);
  opacity: 0;
  transition: opacity .3s;
}

.card-inner:hover .card-bar {
  opacity: 1;
}

.card-prompt {
  font-size: 11px;
  color: rgba(255, 255, 255, .85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 62%;
}

.card-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.card-tools button {
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(0, 0, 0, .3);
  color: #fff;
  font-size: 12px;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  cursor: pointer;
  transition: .2s;
  text-align: center !important;
  vertical-align: middle !important;
}

.card-tools button:hover {
  background: rgba(255, 255, 255, .16);
}

.card-tools button svg,
.card-tools button i,
.card-tools button span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transform: translateY(1px);
}

.card-tools .regen-btn svg {
  width: 12px !important;
  height: 12px !important;
  transform: translateY(1px) !important;
}

.card-tools .regen-btn.is-generate {
  background: rgba(106, 166, 255, 0.18);
  border-color: rgba(106, 166, 255, 0.4);
  color: #8ab4ff;
}

.card-tools .regen-btn.is-generate:hover {
  background: rgba(106, 166, 255, 0.28);
}

/* ===== Error Tools inside Card Back ===== */
.error-tools {
  position: absolute;
  top: 12px;
  right: 12px;
  display: none;
  gap: 6px;
  z-index: 10;
}

.card-inner.is-error .error-tools {
  display: flex;
}

.error-tools button {
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 12px;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  text-align: center !important;
  vertical-align: middle !important;
}

.error-tools button svg {
  display: block !important;
  margin: auto !important;
}

.error-tools button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.error-tools button:active {
  transform: scale(0.95);
}

/* ================= AI 绘图卡片及图片卡片右键菜�?================= */
#cardContextMenu,
#imageContextMenu {
  position: fixed;
  z-index: 999999;
  min-width: 192px;
  padding: 5px;
  border-radius: 14px;
  background: rgba(14, 16, 22, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 0 0 0.3px rgba(255, 255, 255, 0.06) inset,
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.25);
  display: none;
  opacity: 0;
  transform: scale(0.94) translateY(-4px);
  transform-origin: top left;
  transition: opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

#cardContextMenu.visible,
#imageContextMenu.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.ctx-section-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.28);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px 3px;
  font-family: ui-monospace, "SF Mono", monospace;
  user-select: none;
}

.ctx-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin: 4px 6px;
}

.ctx-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 12px;
  border-radius: 9px;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 0.02em;
  transition: background 0.12s ease, color 0.12s ease;
  user-select: none;
}

.ctx-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.ctx-item:active {
  background: rgba(255, 255, 255, 0.13);
  transform: scale(0.98);
}

.ctx-item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.12s ease;
}

.ctx-item:hover svg {
  color: rgba(159, 182, 232, 0.9);
}

.ctx-item.ctx-danger {
  color: rgba(255, 113, 128, 0.8);
}

.ctx-item.ctx-danger:hover {
  background: rgba(255, 113, 128, 0.1);
  color: rgba(255, 130, 140, 1);
}

.ctx-item.ctx-danger svg {
  color: rgba(255, 113, 128, 0.55);
}

.ctx-item.ctx-danger:hover svg {
  color: rgba(255, 130, 140, 0.85);
}

/* 成功反馈闪烁 */
@keyframes ctxFeedback {
  0% {
    background: rgba(106, 166, 255, 0.22);
    color: #a8c8ff;
  }

  100% {
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
  }
}

.ctx-item.ctx-feedback {
  animation: ctxFeedback 0.55s ease forwards;
}

a:focus-visible,
button:focus-visible,
input:not(.auth-input):focus-visible {
  outline: 2px solid rgba(150, 195, 255, .9);
  outline-offset: 3px;
}

/* ==================== 黑色高级简约后台管理系�?==================== */
:root {
  --bg: #000000;
  --bg-soft: #070910;
  --panel: rgba(15, 17, 26, 0.82);
  --panel-solid: #0f111a;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --text: #eef1f8;
  --muted: #8b91a1;
  --muted-soft: #555b69;
  --blue: #6aa6ff;
  --cyan: #72f0df;
  --green: #36d399;
  --yellow: #f7bd55;
  --red: #ff7180;
}

.admin-dashboard-container {
  max-width: 1200px;
  margin: 90px auto 40px auto;
  padding: 0 24px;
  animation: pageIn 0.3s ease both;
  font-family: inherit;
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dashboard-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  backdrop-filter: blur(14px);
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}

.panel-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.1em;
}

.admin-search-input {
  width: 220px;
  height: 36px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.admin-search-input:focus {
  border-color: var(--blue);
}

/* User status bar in topbar */
.user-status-bar {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-email-display {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.05em;
}

/* Table styling */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.user-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.user-table th {
  padding: 14px 24px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.01);
}

.user-table td {
  padding: 16px 24px;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.15s;
}

.user-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* Status Badge */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.online {
  color: var(--green);
}

.status-badge.offline {
  color: var(--muted);
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-badge.online .status-dot {
  box-shadow: 0 0 8px var(--green);
}

/* Buttons in admin panel */
.admin-btn {
  height: 32px;
  padding: 0 14px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  font-weight: 500;
}

.admin-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
}

.admin-btn.primary {
  background: linear-gradient(135deg, var(--blue), #4a8dfa);
  border-color: transparent;
  color: #000;
  font-weight: 600;
}

.admin-btn.primary:hover {
  opacity: 0.9;
  box-shadow: 0 0 12px rgba(106, 166, 255, 0.25);
}

.admin-btn.danger {
  background: rgba(255, 113, 128, 0.05);
  border-color: rgba(255, 113, 128, 0.2);
  color: var(--red);
}

.admin-btn.danger:hover {
  background: rgba(255, 113, 128, 0.12);
  border-color: var(--red);
}

.btn-group {
  display: flex;
  gap: 8px;
}

/* Modals Base */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  position: relative;
  background: var(--panel-solid, rgba(22, 22, 26, 0.95));
  border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  box-shadow: 0 13px 30px rgba(0, 0, 0, 0.25);
  transform: translateY(20px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}

.modal.active .modal-content {
  transform: translateY(0) scale(1);
}

/* Modals Overlay */
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: -1;
}

.admin-modal {
  width: min(440px, 90vw);
  background: var(--panel-solid);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 13px 30px rgba(0, 0, 0, 0.42);
  display: flex;
  flex-direction: column;
  animation: modalScaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScaleIn {
  from {
    transform: scale(0.96) translateY(10px);
  }

  to {
    transform: scale(1) translateY(0);
  }
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin: 0;
  letter-spacing: 0.05em;
}

.close-modal-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}

.close-modal-btn:hover {
  color: var(--text);
}

.modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal-field label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.admin-input,
.admin-select {
  height: 38px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  font-family: inherit;
}

.admin-input:focus,
.admin-select:focus {
  border-color: var(--blue);
}

.admin-select option {
  background: var(--panel-solid);
  color: var(--text);
}

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Details Modal Grid layout */
.details-modal {
  width: min(520px, 90vw);
}

.modal-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.field-label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}

.field-value-text {
  font-size: 12px;
  color: var(--text);
  font-family: ui-monospace, "SF Mono", monospace;
}

.actions-row {
  justify-content: space-between !important;
}

.left-actions {
  display: flex;
  gap: 8px;
}

.right-actions {
  display: flex;
  gap: 8px;
}

/* Mobile responsive fixes */
@media (max-width: 760px) {
  .admin-dashboard-container {
    margin-top: 80px;
    padding: 0 12px;
  }

  .panel-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .admin-search-input {
    width: 100%;
  }

  .user-table th,
  .user-table td {
    padding: 12px 14px;
  }

  .details-modal .modal-field-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .actions-row {
    flex-direction: column;
    gap: 12px;
  }

  .left-actions,
  .right-actions {
    width: 100%;
    justify-content: space-between;
  }

  .left-actions button,
  .right-actions button {
    flex: 1;
  }
}





/* ================= Studio View ================= */
#studioView {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #06080f;
  display: flex;
  flex-direction: column;
  z-index: 10;
}

#studioView.hidden {
  display: none;
}

#studioView.enter {
  animation: studioFadeIn .5s ease forwards;
}

@keyframes studioFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  height: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .02);
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}

.logo-mini {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #fff;
}

.logo-mini span {
  color: rgba(255, 255, 255, .35);
  font-weight: 400;
  margin-left: 6px;
}

.user-status-bar {
  display: flex;
  align-items: center;
  gap: 14px;
}

.user-email-display {
  font-size: 13px;
  color: rgba(255, 255, 255, .45);
  letter-spacing: .04em;
}

.icon-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .55);
  width: 34px;
  height: 34px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: border-color .2s, color .2s, background .2s;
}

.icon-btn:hover {
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
  background: rgba(255, 255, 255, .07);
}

.studio-welcome {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-card {
  text-align: center;
  padding: 52px 48px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 24px;
  backdrop-filter: blur(20px);
  min-width: 320px;
  animation: cardIn .6s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.welcome-icon {
  font-size: 36px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #a78bfa, #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.welcome-title {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: .04em;
}

.welcome-email {
  font-size: 14px;
  color: rgba(255, 255, 255, .4);
  margin: 0 0 28px;
  letter-spacing: .02em;
}

.welcome-credits {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(167, 139, 250, .1);
  border: 1px solid rgba(167, 139, 250, .25);
  border-radius: 12px;
  padding: 10px 22px;
  margin-bottom: 24px;
}

.credits-label {
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
  letter-spacing: .05em;
}

.credits-value {
  font-size: 22px;
  font-weight: 700;
  color: #a78bfa;
  letter-spacing: .02em;
}

.welcome-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, .2);
  margin: 0;
  letter-spacing: .06em;
}


/* ===== Input Error Highlight ===== */
.auth-input.input-error {
  border-color: rgba(255, 80, 80, 0.9) !important;
  box-shadow: 0 0 0 1px rgba(255, 60, 60, 0.3), 0 0 18px rgba(255, 60, 60, 0.45), inset 0 0 8px rgba(255, 60, 60, 0.1) !important;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.input-wrap {
  position: relative;
}

.input-error-tip {
  display: none;
}

/* ===== Toast Notification (黑金极简·高奢微光琉璃提示框) ===== */
.rx-toast {
  position: fixed;
  top: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(-16px) scale(0.94);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  background: rgba(18, 18, 24, 0.85);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  color: #f1f5f9;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  z-index: 999999;
  max-width: min(720px, 92vw);
  width: max-content;
  box-sizing: border-box;
  white-space: nowrap;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

/* 矢量图标容器 */
.rx-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.rx-toast-icon svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* 文本区域 */
.rx-toast-text {
  line-height: 1.4;
  color: #f8fafc;
}

/* 各种状态主题色彩与气泡微光 */
.rx-toast.rx-toast-info {
  border-color: rgba(56, 189, 248, 0.28);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.45), 0 0 14px rgba(56, 189, 248, 0.15);
}

.rx-toast.rx-toast-info .rx-toast-icon {
  color: #38bdf8;
}

.rx-toast.rx-toast-success {
  border-color: rgba(54, 211, 153, 0.28);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.45), 0 0 14px rgba(54, 211, 153, 0.15);
}

.rx-toast.rx-toast-success .rx-toast-icon {
  color: #36d399;
}

.rx-toast.rx-toast-warning {
  border-color: rgba(247, 189, 85, 0.28);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.45), 0 0 14px rgba(247, 189, 85, 0.15);
}

.rx-toast.rx-toast-warning .rx-toast-icon {
  color: #f7bd55;
}

.rx-toast.rx-toast-error {
  border-color: rgba(255, 113, 128, 0.32);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.45), 0 0 14px rgba(255, 113, 128, 0.2);
}

.rx-toast.rx-toast-error .rx-toast-icon {
  color: #ff7180;
}

/* 显隐动画 */
.rx-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* 亮色画布主题模式适配 (Light Theme Adaptive Style) */
.light-canvas .rx-toast,
body:has(.light-canvas) .rx-toast {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.light-canvas .rx-toast .rx-toast-text,
body:has(.light-canvas) .rx-toast .rx-toast-text {
  color: #0f172a !important;
}

/* ================= 黑色高级简约后台系�?(Skill.md 规范) ================= */
:root {
  --admin-bg: #000000;
  --admin-bg-soft: #05070c;
  --admin-panel: rgba(15, 17, 26, 0.85);
  --admin-panel-solid: #0f111a;
  --admin-line: rgba(255, 255, 255, 0.08);
  --admin-line-strong: rgba(255, 255, 255, 0.15);
  --admin-text: #eef1f8;
  --admin-muted: #8b91a1;
  --admin-muted-soft: #555b69;
  --admin-blue: #6aa6ff;
  --admin-cyan: #72f0df;
  --admin-green: #36d399;
  --admin-yellow: #f7bd55;
  --admin-red: #ff7180;
}

#studioView {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: #050508;
  color: var(--admin-text);
  overflow: hidden;
  font-family: -apple-system, "PingFang SC", "Helvetica Neue", "Inter", Arial, sans-serif;
}

#studioView.hidden {
  display: none;
}

.app-layout {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 60% 0%, rgba(106, 166, 255, 0.08), transparent 35%),
    linear-gradient(180deg, #05070c 0%, #000000 100%);
}

/* Sidebar (Skill.md 7.1) */
.admin-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: rgba(7, 9, 16, 0.95);
  border-right: 1px solid var(--admin-line);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(16px);
  z-index: 20;
}

.sidebar-brand {
  height: 64px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--admin-line);
}

.brand-symbol {
  font-size: 18px;
  color: var(--admin-cyan);
}

.brand-text {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
}

.brand-text span {
  font-size: 10px;
  color: var(--admin-muted);
  font-weight: 400;
  margin-left: 4px;
}

.sidebar-nav {
  flex: 1;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--admin-muted);
  font-size: 13.5px;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.nav-item:hover {
  color: var(--admin-text);
  background: rgba(255, 255, 255, 0.03);
}

.nav-item.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.055);
  border-color: var(--admin-line);
  box-shadow: inset 3px 0 0 var(--admin-blue);
}

.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--admin-line);
}

.admin-profile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.03);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--admin-line);
}

.admin-email {
  font-size: 12px;
  color: var(--admin-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 130px;
}

.admin-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(106, 166, 255, 0.15);
  color: var(--admin-blue);
  letter-spacing: 0.05em;
}

/* Main Area (Skill.md 5.1) */
.admin-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100vh;
}

.admin-topbar {
  height: 64px;
  padding: 0 28px;
  border-bottom: 1px solid var(--admin-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(7, 9, 16, 0.6);
  backdrop-filter: blur(12px);
  flex-shrink: 0;
}

.topbar-left .page-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--admin-text);
  letter-spacing: 0.02em;
}

.topbar-left .page-subtitle {
  font-size: 11.5px;
  color: var(--admin-muted);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 12px;
  width: 15px;
  height: 15px;
  color: var(--admin-muted);
  pointer-events: none;
}

.admin-search-input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--admin-line);
  padding: 8px 14px 8px 34px;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  width: 240px;
  outline: none;
  transition: all 0.2s ease;
}

.admin-search-input:focus {
  border-color: rgba(106, 166, 255, 0.5);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 2px rgba(106, 166, 255, 0.15);
}

/* Content Body */
.admin-content {
  flex: 1;
  padding: 24px 28px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Metrics Grid (Skill.md 6.1 - 注册用户信息统计) */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.metric-card {
  background: var(--admin-panel);
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  padding: 18px 20px;
  backdrop-filter: blur(14px);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.metric-card:hover {
  border-color: var(--admin-line-strong);
  transform: translateY(-2px);
}

.metric-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.metric-title {
  font-size: 12.5px;
  color: var(--admin-muted);
  font-weight: 500;
}

.metric-badge {
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid currentColor;
}

.metric-badge.blue {
  color: var(--admin-blue);
  border-color: rgba(106, 166, 255, 0.3);
  background: rgba(106, 166, 255, 0.08);
}

.metric-badge.green {
  color: var(--admin-green);
  border-color: rgba(54, 211, 153, 0.3);
  background: rgba(54, 211, 153, 0.08);
}

.metric-badge.yellow {
  color: var(--admin-yellow);
  border-color: rgba(247, 189, 85, 0.3);
  background: rgba(247, 189, 85, 0.08);
}

.metric-badge.cyan {
  color: var(--admin-cyan);
  border-color: rgba(114, 240, 223, 0.3);
  background: rgba(114, 240, 223, 0.08);
}

.metric-value {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  font-family: ui-monospace, "SF Mono", monospace;
}

.metric-value.green {
  color: var(--admin-green);
}

.metric-value.yellow {
  color: var(--admin-yellow);
}

.metric-value.cyan {
  color: var(--admin-cyan);
}

.metric-desc {
  font-size: 11px;
  color: var(--admin-muted-soft);
}

/* Admin Table Panel (Skill.md 7.4, 7.6) */
.admin-panel {
  background: var(--admin-panel);
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.panel-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--admin-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.panel-title {
  font-size: 14.5px;
  font-weight: 600;
  margin: 0;
  color: var(--admin-text);
}

.count-tag {
  font-size: 11px;
  color: var(--admin-muted);
  background: rgba(255, 255, 255, 0.04);
  padding: 3px 8px;
  border-radius: 99px;
  border: 1px solid var(--admin-line);
}

.table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  min-width: 650px;
}

.admin-table th {
  background: rgba(255, 255, 255, 0.02);
  padding: 14px 20px;
  font-size: 12px;
  color: var(--admin-muted);
  font-weight: 500;
  border-bottom: 1px solid var(--admin-line);
}

.admin-table td {
  padding: 14px 20px;
  font-size: 13.5px;
  color: var(--admin-text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.admin-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.025);
}

/* Status Badges (Skill.md 7.7) */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.status-badge.online {
  color: var(--admin-green);
  background: rgba(54, 211, 153, 0.08);
  border-color: rgba(54, 211, 153, 0.25);
}

.status-badge.offline {
  color: var(--admin-muted);
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--admin-line);
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Buttons (Skill.md 7.5) */
.btn {
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--admin-line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--admin-text);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--admin-line-strong);
}

.btn:active {
  transform: scale(0.97);
}

.btn-sm {
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--admin-blue), var(--admin-cyan));
  border-color: transparent;
  color: #02050a;
  font-weight: 600;
}

.btn-primary:hover {
  opacity: 0.92;
  box-shadow: 0 0 12px rgba(106, 166, 255, 0.3);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
}

.btn-danger {
  background: rgba(255, 113, 128, 0.15);
  border-color: rgba(255, 113, 128, 0.35);
  color: var(--admin-red);
}

.btn-danger:hover {
  background: rgba(255, 113, 128, 0.25);
}

.btn-danger-outline {
  background: transparent;
  border-color: rgba(255, 113, 128, 0.3);
  color: var(--admin-red);
}

.btn-danger-outline:hover {
  background: rgba(255, 113, 128, 0.1);
}

.table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Modals (Skill.md - 弹窗规范) */
.admin-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.admin-modal-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.admin-modal {
  background: #0d0f17;
  border: 1px solid var(--admin-line-strong);
  border-radius: 14px;
  width: 440px;
  max-width: 92vw;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38);
  transform: translateY(0) scale(1);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.admin-modal-overlay.hidden .admin-modal {
  transform: translateY(16px) scale(0.96);
}

.admin-modal.modal-lg {
  width: 580px;
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--admin-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.02);
}

.modal-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--admin-line);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  background: rgba(255, 255, 255, 0.01);
}

.form-group {
  margin-bottom: 16px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-size: 12px;
  color: var(--admin-muted);
  margin-bottom: 6px;
}

.admin-input,
.admin-select {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--admin-line);
  padding: 9px 12px;
  border-radius: 8px;
  color: #fff;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease;
}

.admin-select option {
  background: #0d0f17;
  color: #fff;
}

.admin-input:focus,
.admin-select:focus {
  border-color: rgba(106, 166, 255, 0.5);
  box-shadow: 0 0 0 2px rgba(106, 166, 255, 0.15);
}

.admin-input.highlight-val {
  color: var(--admin-yellow);
  font-family: ui-monospace, "SF Mono", monospace;
  font-weight: 600;
}

.form-row {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
}

.form-row .form-group {
  flex: 1;
  margin-bottom: 0;
}

.info-meta-row {
  display: flex;
  gap: 16px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--admin-line);
  margin-bottom: 16px;
}

.info-meta-item {
  flex: 1;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}

.meta-label {
  color: var(--admin-muted);
}

.meta-val {
  color: var(--admin-text);
}

.danger-box {
  background: rgba(255, 113, 128, 0.04);
  border: 1px solid rgba(255, 113, 128, 0.15);
  padding: 14px;
  border-radius: 10px;
}

.danger-box-title {
  font-size: 11.5px;
  color: var(--admin-red);
  font-weight: 600;
  margin-bottom: 10px;
}

.danger-box-btns {
  display: flex;
  gap: 10px;
}

/* Mobile Tabbar (Skill.md 7.3) */
.mobile-tabbar {
  display: none;
}

/* Responsive (Skill.md 12 - 响应式断�? */
@media (max-width: 1080px) {
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .admin-sidebar {
    display: none;
  }

  .admin-main {
    height: calc(100vh - 66px);
  }

  .admin-topbar {
    padding: 0 16px;
  }

  .topbar-left .page-subtitle {
    display: none;
  }

  .admin-search-input {
    width: 140px;
  }

  .admin-content {
    padding: 16px;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .metric-card {
    padding: 14px;
  }

  .metric-value {
    font-size: 20px;
  }

  /* Skill.md Mobile Tabbar */
  .mobile-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: 60px;
    padding: 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(5, 7, 12, 0.95);
    border-top: 1px solid var(--admin-line);
    backdrop-filter: blur(20px);
    z-index: 100;
  }

  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--admin-muted);
    font-size: 11px;
    cursor: pointer;
  }

  .tab-item.active {
    color: var(--admin-cyan);
  }

  .tab-item svg {
    width: 18px;
    height: 18px;
  }
}

.node-float-panel {
  position: absolute;
  left: 50%;
  top: 40px;
  transform: translateX(-50%) translateY(0);
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  width: 270px;
  box-sizing: border-box;
  background: rgba(18, 18, 26, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  opacity: 0;
  pointer-events: none;
  transition: top 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
}

.node-float-panel .chip {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0.3px;
  transition: all 0.2s ease;
}

.node-float-panel .chip:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
}

.node.selected .node-float-panel {
  opacity: 1;
  pointer-events: auto;
  top: calc(100% + 10px);
  transform: translateX(-50%) translateY(0);
}




/* ================= 换行胶囊提示词输入框 + 极简无框参数�?(根据草图设计) ================= */
.command {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(840px, 92vw);
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 收缩/展开按钮 */
.collapse-cmd-btn {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.collapse-cmd-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.collapse-cmd-btn svg {
  width: 12px;
  height: 12px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 面板收缩状�?*/
.command.collapsed {
  gap: 0;
}

.command.collapsed .collapse-cmd-btn {
  top: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: #fff;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.command.collapsed .collapse-cmd-btn svg {
  transform: rotate(180deg);
  width: 20px;
  height: 20px;
}

.command.collapsed .command-capsule {
  width: 52px;
  padding: 0;
  justify-content: center;
  cursor: pointer;
}

.command.collapsed .command-capsule:hover {
  background: rgba(14, 16, 22, 0.8);
  border-color: rgba(255, 255, 255, 0.3);
}

.command.collapsed .command-capsule>* {
  opacity: 0;
  pointer-events: none;
  width: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.command {
  pointer-events: none !important;
}

.command.collapsed .command-params,
.command.collapsed .global-thumbnails {
  opacity: 0;
  pointer-events: none !important;
  transform: translateY(10px);
  height: 0;
  margin: 0;
}

.command-capsule {
  pointer-events: auto !important;
}

/* 图片上传缩略图区域与删除按钮 */
.global-thumbnails {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 8px 4px 8px !important;
  box-sizing: border-box;
  overflow: visible !important;
  pointer-events: none !important;
}

.global-thumbnails:empty {
  display: none !important;
  padding: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

.global-thumbnails>*,
.command-params>*,
.collapse-cmd-btn {
  pointer-events: auto !important;
}

.global-thumb {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.global-thumb:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.22);
}

.global-thumb-remove {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.9);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s ease, background 0.18s ease;
  z-index: 10;
  font-family: system-ui, -apple-system, sans-serif;
  user-select: none;
}

.global-thumb-remove:hover {
  transform: scale(1.15);
  background: #ef4444;
}

.global-thumb-index {
  position: absolute;
  bottom: 2px;
  left: 2px;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.78) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  color: #ffffff !important;
  font-size: 9px;
  font-weight: 500;
  font-family: 'Outfit', -apple-system, sans-serif;
  border: none !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 1px 4px rgba(0, 0, 0, 0.35) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1 !important;
  z-index: 4;
  pointer-events: none;
  user-select: none;
}

.global-thumb-add {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.global-thumb-add:hover {
  border-color: rgba(99, 102, 241, 0.4);
  background: rgba(99, 102, 241, 0.06);
  color: #ffffff;
}

.global-thumb-add svg {
  width: 18px;
  height: 18px;
}

.light-canvas .global-thumb {
  border: 1.2px solid rgba(226, 232, 240, 0.9) !important;
  background-color: #ffffff !important;
  border-radius: 6px !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06) !important;
}

.light-canvas .global-thumb-index {
  background: rgba(15, 23, 42, 0.75) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.light-canvas .global-thumb-add {
  border: 1.5px dashed #cbd5e1 !important;
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #475569 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease !important;
}

.light-canvas .global-thumb-add:hover {
  border-color: #6366f1 !important;
  background: #eef2ff !important;
  color: #4f46e5 !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15) !important;
}

/* 胶囊主框?*/
.command-capsule {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 5px 6px;
  background: rgba(14, 16, 22, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 26px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-sizing: border-box;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

/* 模型 LOGO 按钮 (左侧黑按?白标? */
.model-chip {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-bottom: 1px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  transform-origin: center center;
}

.model-chip:hover {
  transform: scale(1.08);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.model-chip:active {
  transform: scale(0.95);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.model-logo {
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  color: #ffffff;
  letter-spacing: -0.02em;
  font-family: -apple-system, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.model-logo svg {
  width: 20px;
  height: 20px;
  color: #ffffff;
}

/* 多行文本输入?(支持 Shift + Enter 换行 + 自定义优雅细滚动? */
.command-capsule textarea.prompt {
  flex: 1;
  height: 24px;
  min-height: 24px;
  max-height: 140px;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 13.5px;
  line-height: 22px;
  padding: 1px 6px;
  font-family: inherit;
  resize: none;
  overflow-y: auto;
  box-sizing: border-box;
  margin: 0;
  display: block;
}

.command-capsule textarea.prompt::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* 自定义极简暗色滚动�?*/
.command-capsule textarea.prompt::-webkit-scrollbar {
  width: 4px;
}

.command-capsule textarea.prompt::-webkit-scrollbar-track {
  background: transparent;
}

.command-capsule textarea.prompt::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
}

.command-capsule textarea.prompt::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* 右侧发送按�?(放大醒目箭头图标) */
.command-capsule .gen-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-bottom: 1px;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease;
}

.command-capsule .gen-btn:hover {
  transform: scale(1.05);
}

.command-capsule .gen-arrow {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: #000000;
  margin-top: -2px;
  margin-left: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.command-capsule .gen-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: rgba(106, 166, 255, 0.4);
  transition: width 0.1s linear;
}

/* 底部小字参数（无需边框加框�?*/
.command-params {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-left: 16px;
}

.param-chip {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  transition: color 0.18s ease;
}

.param-chip:hover {
  color: #ffffff;
}

.param-name {
  color: rgba(255, 255, 255, 0.5);
}

.node.node-draw-card {
  background: transparent;
  border: none;
  box-shadow: none;
  width: auto;
  border-radius: 16px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: width .3s cubic-bezier(.4, 0, .2, 1), height .3s cubic-bezier(.4, 0, .2, 1);
}

.node.node-draw-card.dragging {
  box-shadow: none;
  border-color: transparent;
}

.node-draw-card .card-inner {
  cursor: grab;
}

.node-draw-card.dragging .card-inner {
  cursor: grabbing;
}

.draw-play-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s, transform 0.2s;
}

.node-draw-card .card-inner:hover .draw-play-btn {
  opacity: 1;
}

.draw-play-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

.draw-play-btn svg {
  width: 14px;
  height: 14px;
}

.draw-play-btn:disabled {
  opacity: 0 !important;
  pointer-events: none;
}

/* --- Override Fixes --- */
.model-logo,
.model-logo svg {
  flex-shrink: 0 !important;
}

/* ======= 设置弹窗（双向平滑渐显渐隐出入场�?======= */
.settings-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.25s linear;
}

.settings-modal-overlay * {
  pointer-events: none;
}

.settings-modal-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.settings-modal-overlay.open * {
  pointer-events: auto;
}

.settings-modal {
  width: 400px;
  max-width: 90vw;
  background: rgba(20, 20, 28, .92);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  padding: 24px 30px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, .05) inset;
  transform: translateY(14px) scale(.96);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  font-family: "Microsoft YaHei Light", "Microsoft YaHei", sans-serif;
  font-weight: 300;
}

.settings-modal-overlay.open .settings-modal {
  transform: translateY(0) scale(1);
}

.settings-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .5);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: .2s;
}

.settings-close:hover {
  background: rgba(255, 255, 255, .15);
  color: #fff;
}

.settings-header {
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  letter-spacing: .05em;
  margin-bottom: 24px;
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-label {
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
}

.avatar-upload-area {
  display: flex;
  align-items: center;
  gap: 16px;
}

.avatar-preview {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(106, 166, 255, .18), rgba(139, 115, 255, .18));
  border: 1px solid rgba(255, 255, 255, .15);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .6);
}

.avatar-preview svg {
  width: 26px;
  height: 26px;
}

.settings-btn-secondary {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: .2s;
  font-family: inherit;
  font-weight: 300;
}

.settings-btn-secondary:hover {
  background: rgba(255, 255, 255, .12);
}

.settings-divider {
  height: 1px;
  background: rgba(255, 255, 255, .06);
  margin: 20px 0;
}

.settings-input-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(0, 0, 0, .3);
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: .2s;
  font-family: inherit;
  font-weight: 300;
}

.settings-input:focus {
  border-color: rgba(106, 166, 255, .5);
  background: rgba(0, 0, 0, .5);
}

.settings-input::placeholder {
  color: rgba(255, 255, 255, .3);
}

/* ======= 顶部设置下拉菜单位置与高级质感升�?======= */
.header-settings-panel {
  right: 64px !important;
  width: 145px !important;
  padding: 5px !important;
  background: rgba(15, 15, 22, 0.96) !important;
  /* 更深邃的背景�?*/
  border: 1px solid rgba(106, 166, 255, 0.16) !important;
  /* 微弱蓝色发光边缘 */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.38), 0 0 8px rgba(106, 166, 255, 0.05) !important;
}

/* 升级版设置菜单项 */
.header-settings-panel .profile-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  letter-spacing: 0.12em;
  /* 调整文字字间距，显著提升高级�?*/
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  border: none;
  text-align: left;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
}

.header-settings-panel .profile-menu-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 3px;
  background: #6aa6ff;
  border-radius: 2px;
  opacity: 0;
  transform: scaleY(0.4);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-settings-panel .profile-menu-item:hover {
  background: rgba(106, 166, 255, 0.08) !important;
  color: #fff !important;
}

.header-settings-panel .profile-menu-item:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

.header-settings-panel .profile-menu-item svg {
  width: 14.5px;
  height: 14.5px;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.25s ease, transform 0.25s ease;
  flex-shrink: 0;
}

.header-settings-panel .profile-menu-item:hover svg {
  color: #6aa6ff;
  transform: scale(1.05);
}

/* ======= 快捷键设置弹窗样式简约美�?======= */
.hotkey-modal {
  width: 380px !important;
  border-radius: 20px !important;
  background: rgba(20, 20, 28, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
}

.hotkey-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 14px 18px;
  margin-top: 4px;
}

.hotkey-title {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
  letter-spacing: 0.06em;
}

.hotkey-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hotkey-select-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #6aa6ff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  user-select: none;
}

.hotkey-select-custom:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(106, 166, 255, 0.3);
}

.hotkey-select-custom .chevron {
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.2s ease;
}

.hotkey-select-custom.open .chevron {
  transform: rotate(180deg);
  color: #6aa6ff;
}

.hotkey-plus {
  color: rgba(255, 255, 255, 0.3);
  font-size: 13px;
  font-weight: 400;
}

.hotkey-badge.fixed {
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.hotkey-footer {
  margin-top: 24px;
}

.settings-btn-primary {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #6aa6ff, #8b73ff);
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  transition: .2s;
  margin-top: 16px;
  opacity: .9;
  font-family: inherit;
  letter-spacing: .08em;
}

.settings-btn-primary:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(106, 166, 255, .3);
}

.settings-btn-primary:active {
  transform: translateY(1px);
}

/* ==================================
   画布样式设置弹窗 (Theme Modal)
   ================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.theme-modal-container {
  width: 800px;
  height: 500px;
  background: rgba(22, 22, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.show .theme-modal-container {
  transform: scale(1) translateY(0);
}

.tm-header {
  height: 54px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.2);
}

.tm-title {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.5px;
}

.tm-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 18px;
  cursor: pointer;
  transition: 0.2s;
}

.tm-close:hover {
  color: #fff;
  transform: rotate(90deg);
}

.tm-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 左侧边栏 */
.tm-sidebar {
  width: 200px;
  background: rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  gap: 6px;
}

.tm-tab {
  background: transparent;
  border: none;
  text-align: left;
  padding: 12px 16px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s;
  position: relative;
  overflow: hidden;
}

.tm-tab:hover {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.9);
}

.tm-tab.active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 500;
}

.tm-tab.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 3px;
  background: #6aa6ff;
  border-radius: 0 4px 4px 0;
}

/* 右侧内容�?*/
.tm-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  position: relative;
}

.tm-pane {
  display: none;
}

.tm-pane.active {
  display: block;
  animation: paneFadeIn 0.3s ease forwards;
}

@keyframes paneFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.theme-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.theme-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.theme-card.active {
  background: rgba(106, 166, 255, 0.1);
  border-color: #6aa6ff;
  box-shadow: 0 0 0 1px #6aa6ff, 0 8px 24px rgba(106, 166, 255, 0.2);
}

.tc-preview {
  height: 100px;
  border-radius: 8px;
  background: #000;
  margin-bottom: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.tc-name {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 2px;
}

.tc-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

/* ====== 连线效果预览 (9�?FX 卡片�? ====== */
.theme-grid-fx {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
}

.fx-prev {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.fx-lbl {
  font-size: 8px;
  fill: rgba(255, 255, 255, 0.3);
  font-family: inherit;
}

.fx-idle {
  fill: none;
  stroke: rgba(114, 240, 223, 0.35);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.fx-run {
  fill: none;
  stroke: url(#fx-grad);
  stroke-width: 2;
  stroke-linecap: round;
}

/* --- 预览动画 (卡片内始终播�? --- */
.prev-stream {
  stroke-dasharray: 4 8;
  animation: fx-stream 1s linear infinite;
}

.prev-comet {
  stroke-dasharray: 14 86;
  stroke-width: 2.5;
  animation: fx-comet 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.prev-packet {
  stroke-dasharray: 8 5 2 5 14 5 2 11;
  animation: fx-packet 2.2s linear infinite;
}

.prev-charge {
  stroke-dasharray: 100;
  animation: prev-charge 2s ease-out infinite;
}

.prev-para-slow {
  stroke: rgba(106, 166, 255, 0.5);
  stroke-width: 2.5;
  stroke-dasharray: 10 14;
  animation: fx-para 2.4s linear infinite;
}

.prev-para-fast {
  stroke: rgba(114, 240, 223, 0.9);
  stroke-width: 1.8;
  stroke-dasharray: 3 9;
  animation: fx-para 0.9s linear infinite;
}

.prev-breath {
  animation: fx-breath 2.6s ease-in-out infinite;
}

.prev-echo {
  stroke: rgba(54, 211, 153, 0.9);
  stroke-dasharray: 100;
  animation: prev-echo 2.5s ease-in-out infinite;
}

/* FX-7 涟漪端点 */
.prev-rpl-out {
  transform-origin: 44px 44px;
  animation: prev-ripple 1.4s ease-out infinite;
}

.prev-rpl-out2 {
  transform-origin: 44px 44px;
  animation: prev-ripple 1.4s ease-out 0.7s infinite;
}

.prev-rpl-in {
  transform-origin: 186px 44px;
  animation: prev-ripple 1.4s ease-out infinite reverse;
}

/* FX-8 光珠 */
.prev-courier-dot {
  fill: #eaf6ff;
  filter: drop-shadow(0 0 4px rgba(114, 240, 223, 0.9));
}

/* --- 预览专用关键�?--- */
@keyframes prev-charge {
  0% {
    stroke-dashoffset: 100;
    opacity: 1;
  }

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

  60% {
    stroke-dashoffset: 0;
    opacity: 0.5;
  }

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

@keyframes prev-ripple {
  from {
    transform: scale(1);
    opacity: 0.8;
  }

  to {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes prev-echo {
  0% {
    stroke-dashoffset: -100;
    opacity: 0;
  }

  10% {
    opacity: 0.9;
  }

  40% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

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

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

/* 背景模式预览 */
.preview-bg-dot {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 8%, transparent 8%);
  background-size: 10px 10px;
}

.preview-bg-grid {
  background: linear-gradient(rgba(255, 255, 255, 0.05) 6.6%, transparent 6.6%), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 6.6%, transparent 6.6%);
  background-size: 15px 15px;
}

.preview-bg-blank {
  background: #0d0d10;
}

/* 光效模式预览 */
.preview-light-vignette {
  background: radial-gradient(circle at center, transparent 30%, rgba(0, 0, 0, 0.8) 120%);
}

.preview-light-cyber {
  background: radial-gradient(circle at top right, rgba(106, 166, 255, 0.4), transparent 60%), radial-gradient(circle at bottom left, rgba(114, 240, 223, 0.3), transparent 60%);
}

.preview-light-none {
  background: #16161a;
}

/* 全局生效的附加样�?*/
.studio-vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.5s ease;
  will-change: background;
}

/* 画布背景覆盖 */
#board {
  background-color: #050508 !important;
}

#board.bg-grid,
#board.bg-dot {
  background-color: #050508 !important;
  background-size: 30px 30px;
}

#board.bg-blank {
  background-image: none;
  background-color: #0b0b0e !important;
}

/* ====== 白色画布背景 ====== */
#board.bg-dot-light,
#board.bg-grid-light,
.light-canvas #board,
.light-canvas #studioView,
html.light-canvas,
body.light-canvas {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color-scheme: only light !important;
  forced-color-adjust: none !important;
  -webkit-forced-color-adjust: none !important;
}

.light-canvas #glcanvas,
.light-canvas canvas {
  display: none !important;
  opacity: 0 !important;
}


/* ====== 白色画布全局亮色主题 ====== */

/* 隐藏暗角与光�?*/
.light-canvas .vignette,
.light-canvas .studio-vignette,
.light-canvas .grain {
  opacity: 0 !important;
  pointer-events: none;
}

/* 顶部�?*/
.light-canvas .topbar {
  background: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

.light-canvas .logo-mini {
  color: #1a1a2e;
}

.light-canvas .logo-mini span {
  color: rgba(0, 0, 0, 0.35);
}

.light-canvas .icon-btn {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.03);
  color: rgba(0, 0, 0, 0.5);
}

.light-canvas .icon-btn:hover {
  color: #1a1a2e;
  border-color: rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.06);
}

.light-canvas #headerSettingsBtn,
.light-canvas #headerFileBtn {
  color: rgba(0, 0, 0, 0.4) !important;
}

/* 文本框 (亮色模式 - 纯简 1px 细线框，彻底移除淡蓝底色) */
.light-canvas .node-ta {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 8px !important;
  color: #0f172a !important;
}

.light-canvas #headerSettingsBtn:hover,
.light-canvas #headerFileBtn:hover {
  color: #1a1a2e !important;
}

.light-canvas .avatar-btn {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.5);
}

.light-canvas .avatar-btn:hover {
  border-color: rgba(0, 0, 0, 0.25);
  color: #1a1a2e;
  background: rgba(0, 0, 0, 0.08);
}

/* 左侧工具�?*/
.light-canvas .left-tools {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.08);
}

.light-canvas .lt-btn {
  color: rgba(0, 0, 0, 0.4);
}

.light-canvas .lt-btn:hover {
  color: rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.05);
}

.light-canvas .lt-btn:active {
  color: #1a1a2e;
  background: rgba(0, 0, 0, 0.08);
}

.light-canvas .lt-divider {
  background: rgba(0, 0, 0, 0.08);
}

.light-canvas .lt-btn::after {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.75);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* 节点卡片 (Light Mode 亮色高奢白晶去洗白重构) */
.light-canvas .node:not(.node-draw-card):not(.node-chat-card) {
  background: #ffffff !important;
  border: 1px solid rgba(203, 213, 225, 0.85) !important;
  box-shadow: 0 10px 30px -4px rgba(15, 23, 42, 0.1), 0 4px 12px -2px rgba(15, 23, 42, 0.05) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.light-canvas .node.node-draw-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.light-canvas .node.selected {
  border-color: #6366f1 !important;
  box-shadow: 0 12px 32px -4px rgba(99, 102, 241, 0.2), 0 0 0 2px rgba(99, 102, 241, 0.25) !important;
}

.light-canvas .node.dragging {
  box-shadow: 0 20px 40px -6px rgba(15, 23, 42, 0.15) !important;
  border-color: #6366f1 !important;
}

.light-canvas .node-head {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

.light-canvas .nh-ico {
  color: rgba(0, 0, 0, 0.55);
}

.light-canvas .node-title {
  color: #1a1a2e;
}

.light-canvas .node-close {
  color: rgba(0, 0, 0, 0.35);
}

.light-canvas .node-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1a1a2e;
}

/* 文本�?*/
.light-canvas .node-ta {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: #1a1a2e;
}

.light-canvas .node-ta:focus {
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(0, 0, 0, 0.02);
}

.light-canvas .node-ta::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

/* Dropzone (Light Mode 亮色画布高奢对齐 - 彻底消除背景色块) */
.light-canvas .node {
  border-radius: 10px !important;
}

.light-canvas .dropzone,
.light-canvas .dropzone:not(.has-image),
.light-canvas .multi-upload-dropzone,
.light-canvas .node .dropzone,
.light-canvas .node .dropzone:not(.has-image),
.light-canvas .gallery-grid:empty,
.light-canvas .gallery-grid.is-empty {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-style: solid !important;
  border-radius: 8px !important;
  padding: 22px 14px !important;
  box-shadow: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.light-canvas .dropzone.has-image,
.light-canvas .dropzone:has(.dz-img) {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

.light-canvas .dropzone:not(.has-image):hover {
  border-color: rgba(99, 102, 241, 0.6) !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

.light-canvas .dz-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  color: #0f172a !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.light-canvas .dz-btn:hover {
  background: rgba(241, 245, 249, 0.95) !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
}

.light-canvas .dz-btn.dz-del-btn:hover {
  background: rgba(254, 226, 226, 0.95) !important;
  border-color: #f87171 !important;
  color: #dc2626 !important;
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.15) !important;
}

.light-canvas .dz-btn.dz-ps-btn {
  background: #001e36 !important;
  border: 1px solid #001e36 !important;
  color: #31a8ff !important;
  box-shadow: 0 1px 4px rgba(0, 24, 45, 0.12) !important;
}

.light-canvas .dz-btn.dz-ps-btn .ps-ico-text {
  color: #31a8ff !important;
}

.light-canvas .dz-btn.dz-ps-btn:hover {
  background: #002848 !important;
  border-color: #31a8ff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(49, 168, 255, 0.18) !important;
}

.light-canvas .dz-btn.dz-ps-btn:hover .ps-ico-text {
  color: #58bbff !important;
}

.light-canvas .dz-btn::after {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.08);
  color: #1a1a2e;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.light-canvas .dz-ico {
  color: rgba(0, 0, 0, 0.4);
}

/* 亮色模式【输出画廊】高奢按钮精修 */
.light-canvas .gallery-btn-zip {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.28) !important;
  border: none !important;
}

.light-canvas .gallery-btn-zip:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
  box-shadow: 0 5px 14px rgba(99, 102, 241, 0.4) !important;
  transform: translateY(-1px) !important;
}

.light-canvas .gallery-btn-dl-all {
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1.5px 4px rgba(15, 23, 42, 0.06) !important;
}

.light-canvas .gallery-btn-dl-all:hover {
  background: rgba(241, 245, 249, 0.95) !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08) !important;
}

.light-canvas .gallery-btn-clear {
  background: transparent !important;
  color: #ef4444 !important;
  border: 1px solid transparent !important;
}

.light-canvas .gallery-btn-clear:hover {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #dc2626 !important;
  transform: translateY(-1px) !important;
}

/* 亮色画布卡片进度条 */
.light-canvas .card-progress {
  background: rgba(0, 0, 0, 0.08);
}

.light-canvas .card-progress span {
  background: linear-gradient(90deg, #2563eb, #7c3aed);
}

.light-canvas .card-status {
  color: rgba(0, 0, 0, 0.6);
}

.light-canvas .card-status b {
  color: #1a1a2e;
}

.light-canvas .shimmer {
  background-image: linear-gradient(110deg, transparent 20%, rgba(0, 0, 0, 0.02) 44%, rgba(0, 0, 0, 0.06) 50%, rgba(0, 0, 0, 0.02) 56%, transparent 80%);
}

/* 端口 (Light Mode 白色画布 360° 同心圆) */
.light-canvas .port {
  border: none !important;
  outline: none !important;
  box-shadow: 0 0 0 1.5px #ffffff, 0 1.5px 5px rgba(15, 23, 42, 0.15) !important;
}

.light-canvas .port.out:hover {
  transform: translate(50%, -50%) scale(1.15) !important;
}

.light-canvas .port.in:hover {
  transform: translate(-50%, -50%) scale(1.15) !important;
}

.light-canvas .port[data-type="prompt"].out:hover {
  transform: translate(50%, -50%) scale(1.15) !important;
}

.light-canvas .port[data-type="prompt"].in:hover {
  transform: translate(-50%, -50%) scale(1.15) !important;
}

.light-canvas .port.linked {
  box-shadow: 0 0 0 1.5px #ffffff, 0 0 0 4px rgba(16, 185, 129, 0.4), 0 1.5px 5px rgba(15, 23, 42, 0.15) !important;
}

.light-canvas .port[data-type="prompt"].linked {
  box-shadow: 0 0 0 1.5px #ffffff, 0 0 0 4px rgba(99, 102, 241, 0.4), 0 1.5px 5px rgba(15, 23, 42, 0.15) !important;
}

.light-canvas .port::after {
  color: #1a1a2e;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}

/* 连接�?*/
.light-canvas .wire {
  stroke: rgba(59, 130, 246, 0.5);
}

.light-canvas .wire[data-type="image"] {
  stroke: rgba(16, 163, 127, 0.55);
}

.light-canvas .wire:hover {
  stroke-width: 3.4;
}

.light-canvas .wire-temp {
  opacity: 0.6;
}

/* 节点生成按钮 */
.light-canvas .node-gen {
  background: #1a1a2e;
  color: #fff;
}

.light-canvas .node-gen:hover:not(:disabled) {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* 底部命令�?*/
.light-canvas .command-capsule {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.light-canvas .model-chip {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.1);
  color: #1a1a2e;
  box-shadow: none;
}

.light-canvas .model-chip:hover {
  background: rgba(0, 0, 0, 0.05);
}

.light-canvas .model-logo svg.mono-svg,
.light-canvas img.mono-img {
  filter: brightness(0) opacity(0.8);
}

.light-canvas .prompt,
.light-canvas .command-capsule textarea.prompt {
  color: #1a1a2e;
}

.light-canvas .prompt::placeholder,
.light-canvas .command-capsule textarea.prompt::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

/* 浮动控制面板 (选定节点底部) */
.light-canvas .node-float-panel {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body:has(.light-canvas) .popover {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body:has(.light-canvas) .pop-item {
  color: rgba(0, 0, 0, 0.75);
}

body:has(.light-canvas) .pop-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

body:has(.light-canvas) .pop-item.active {
  background: rgba(59, 130, 246, 0.08);
}

body:has(.light-canvas) .pi-name {
  color: #1a1a2e;
}

body:has(.light-canvas) .pi-desc {
  color: rgba(0, 0, 0, 0.4);
}

body:has(.light-canvas) .pi-icon svg {
  filter: brightness(0) opacity(0.8);
}

.light-canvas .gen-btn {
  background: #3b82f6;
  color: #fff;
}

.light-canvas .gen-btn:hover:not(:disabled) {
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
  transform: translateY(-1px);
}

.light-canvas .gen-arrow {
  color: #fff;
}

.light-canvas .chip {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.7);
}

.light-canvas .chip:hover {
  background: rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.18);
  color: #1a1a2e;
}

.light-canvas .chip .chip-key {
  color: rgba(0, 0, 0, 0.35);
}

.light-canvas .chip .chevron {
  color: rgba(0, 0, 0, 0.35);
}

.light-canvas .chip-dot {
  background: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* 参数面板 */
.light-canvas .param-chip {
  background: transparent;
  border-color: transparent;
  color: #1a1a2e;
}

.light-canvas .param-chip:hover {
  background: transparent;
  color: #1a1a2e;
  transform: scale(1.05);
}

.light-canvas .param-name {
  color: rgba(0, 0, 0, 0.45);
}

/* 空提�?*/
.light-canvas .empty-hint {
  color: rgba(0, 0, 0, 0.2);
}

/* 弹出菜单 */
.light-canvas .popover {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  padding: 8px !important;
  border-radius: 16px !important;
}

.light-canvas .chat-pop-model-item {
  background: transparent !important;
  border: 1px solid transparent !important;
}

.light-canvas .chat-pop-model-item:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

.light-canvas .chat-pop-model-item.active {
  background: rgba(99, 102, 241, 0.1) !important;
  border: 1px solid rgba(99, 102, 241, 0.25) !important;
}

.light-canvas .cpm-icon {
  background: transparent !important;
  border: none !important;
  color: #334155 !important;
}

.light-canvas .chat-pop-model-item.active .cpm-icon {
  background: transparent !important;
  border: none !important;
  color: #6366f1 !important;
}

.light-canvas .cpm-name {
  color: #1e293b !important;
  font-weight: 400 !important;
  font-family: "Microsoft YaHei", "微软雅黑", -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.light-canvas .cpm-rate-row {
  color: #d97706 !important;
  font-weight: 400 !important;
  font-family: "Microsoft YaHei", "微软雅黑", -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.light-canvas .cpm-rate-row.free {
  color: #10b981 !important;
  font-weight: bold !important;
}

.light-canvas .cpm-check {
  color: #6366f1 !important;
}

/* 右键菜单 */
.light-canvas #cardContextMenu,
.light-canvas #imageContextMenu {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.light-canvas .ctx-item {
  color: rgba(0, 0, 0, 0.75);
}

.light-canvas .ctx-item:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #1a1a2e;
}

.light-canvas .ctx-item svg {
  color: rgba(0, 0, 0, 0.4);
}

.light-canvas .ctx-item:hover svg {
  color: rgba(59, 130, 246, 0.75);
}

.light-canvas .ctx-section-label {
  color: rgba(0, 0, 0, 0.3);
}

.light-canvas .ctx-divider {
  background: rgba(0, 0, 0, 0.06);
}

/* 对齐工具�?*/
.light-canvas .align-toolbar {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.light-canvas .align-toolbar button {
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.08);
}

.light-canvas .align-toolbar button:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1a1a2e;
}

/* 拉线快捷菜单 */
.light-canvas .wire-quick-menu {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.light-canvas .wire-quick-menu .wqm-item {
  color: rgba(0, 0, 0, 0.7);
}

.light-canvas .wire-quick-menu .wqm-item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1a1a2e;
}

/* 更多板块浮动展开面板亮色适配 */
.light-canvas .lt-more-panel {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.05) inset,
    0 10px 30px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
}

.light-canvas .lt-more-item {
  color: #1f2937 !important;
}

.light-canvas .lt-more-item:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #000000 !important;
}

.light-canvas .more-item-icon svg {
  color: #4b5563 !important;
  stroke: #4b5563 !important;
}

.light-canvas .lt-more-item:hover .more-item-icon svg {
  color: #2563eb !important;
  stroke: #2563eb !important;
}

.light-canvas .more-item-title {
  color: #111827 !important;
}

/* 多图上传卡片 (Light Theme 亮色主题精细化高奢适配) */
.light-canvas .node.node-multi-upload-card {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.03) !important;
  border-radius: 10px !important;
}

.light-canvas .node.node-multi-upload-card .node-head {
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 10px 14px !important;
}

.light-canvas .node.node-multi-upload-card .nh-ico.disconnected {
  background: #cbd5e1 !important;
  box-shadow: 0 0 0 2px rgba(203, 213, 225, 0.3) !important;
}

.light-canvas .node.node-multi-upload-card .nh-ico.connected {
  background: #10b981 !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4) !important;
}

.light-canvas .node.node-multi-upload-card .node-title {
  color: #0f172a !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
}

.light-canvas .node.node-multi-upload-card .node-close {
  color: #94a3b8 !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.light-canvas .node.node-multi-upload-card .node-close:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

/* 拖拽上传区域 (全量对齐单图上传与输出画廊：1px 极细实线，统一背景矩形颜色) */
.light-canvas .multi-upload-dropzone {
  background: rgba(0, 0, 0, 0.025) !important;
  background-color: rgba(0, 0, 0, 0.025) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-style: solid !important;
  border-radius: 8px !important;
  padding: 22px 14px !important;
  box-shadow: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.light-canvas .multi-upload-dropzone:hover {
  border-color: rgba(99, 102, 241, 0.4) !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

.light-canvas .multi-upload-dropzone svg {
  stroke: #4f46e5 !important;
  filter: drop-shadow(0 2px 6px rgba(79, 70, 229, 0.2)) !important;
  transition: transform 0.2s ease !important;
}

.light-canvas .multi-upload-dropzone:hover svg {
  transform: translateY(-2px) scale(1.05) !important;
}

.light-canvas .multi-upload-dropzone span:not(.multi-upload-limit-tag) {
  color: #0f172a !important;
  font-weight: 650 !important;
}

.light-canvas .multi-upload-limit-tag {
  color: #64748b !important;
  font-size: 11.5px !important;
}

/* 缩略图网格与序号 */
.multi-thumb-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: inherit !important;
}

.light-canvas .node.node-gallery-card,
.light-canvas .node.node-multi-upload-card {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.03) !important;
  border-radius: 10px !important;
}

.light-canvas .multi-upload-dropzone {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-style: solid !important;
  border-radius: 8px !important;
  padding: 22px 14px !important;
  box-shadow: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.light-canvas .multi-thumb-item,
.light-canvas .gallery-thumb-item {
  border: 1.2px solid rgba(226, 232, 240, 0.9) !important;
  background: #ffffff !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.light-canvas .multi-thumb-item:hover,
.light-canvas .gallery-thumb-item:hover {
  border-color: #6366f1 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.18) !important;
}

.light-canvas .multi-thumb-item.active-running {
  border-color: #6366f1 !important;
  outline: 2.5px solid #6366f1 !important;
  outline-offset: -1px !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3), 0 4px 14px rgba(99, 102, 241, 0.25) !important;
}

.light-canvas .multi-thumb-index,
.light-canvas .gallery-thumb-index,
.light-canvas .global-thumb-index {
  background: rgba(15, 23, 42, 0.82) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 0 0 1.2px rgba(255, 255, 255, 0.9), 0 2px 6px rgba(15, 23, 42, 0.25) !important;
}

/* 底部操作与计数 */
.light-canvas .multi-upload-foot {
  color: #64748b !important;
  border-top: 1px solid #f1f5f9 !important;
  padding-top: 10px !important;
}

.light-canvas .multi-count-label {
  color: #334155 !important;
  font-weight: 500 !important;
}

.light-canvas .multi-upload-clear-btn {
  color: #f43f5e !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.light-canvas .multi-upload-clear-btn:hover {
  background: #fff1f2 !important;
  color: #e11d48 !important;
}

/* 历史侧边�?*/
.light-canvas .history-sidebar {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.05);
}

.light-canvas .hs-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

.light-canvas .hs-header h3 {
  color: #1a1a2e;
}

/* 历史记录卡片亮色适配 */
.light-canvas .hs-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.light-canvas .hs-card:hover {
  background: #fcfcfd;
  border-color: rgba(0, 0, 0, 0.15);
}

.light-canvas .hs-model {
  color: #3b82f6;
}

.light-canvas .hs-time {
  color: rgba(0, 0, 0, 0.4);
}

.light-canvas .hs-prompt {
  color: rgba(0, 0, 0, 0.75);
}

.light-canvas .hs-result {
  background: rgba(0, 0, 0, 0.04);
}

.light-canvas .hs-status {
  color: rgba(0, 0, 0, 0.5);
}

.light-canvas .hs-card.failed .hs-result {
  background: rgba(239, 68, 68, 0.08);
}

.light-canvas .hs-card.failed .hs-status {
  color: #ef4444;
}

.light-canvas .hs-btn {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.light-canvas .hs-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #1a1a2e;
  border-color: rgba(0, 0, 0, 0.15);
}

.light-canvas .hs-title {
  color: #1a1a2e;
}

.light-canvas .hs-close {
  color: rgba(0, 0, 0, 0.4);
}

.light-canvas .hs-close:hover {
  color: #1a1a2e;
}

/* 个人信息面板及下拉菜�?*/
.light-canvas .profile-panel {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.light-canvas .profile-name,
.light-canvas .stat-value {
  color: #1a1a2e;
}

.light-canvas .profile-email,
.light-canvas .stat-label {
  color: rgba(0, 0, 0, 0.45);
}

.light-canvas .profile-divider {
  background: rgba(0, 0, 0, 0.06);
}

.light-canvas .profile-avatar {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 115, 255, 0.1));
  border-color: rgba(0, 0, 0, 0.1);
  color: #3b82f6;
}

.light-canvas .profile-menu-item {
  color: rgba(0, 0, 0, 0.7);
}

.light-canvas .profile-menu-item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1a1a2e;
}

.light-canvas .profile-menu-item.logout {
  color: #ef4444;
}

.light-canvas .profile-menu-item.logout:hover {
  background: rgba(239, 68, 68, 0.08);
}

/* 下拉菜单特例，因为原代码使用�?!important */
.light-canvas .header-settings-panel {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

.light-canvas .header-settings-panel .profile-menu-item {
  color: rgba(0, 0, 0, 0.75) !important;
}

.light-canvas .header-settings-panel .profile-menu-item svg {
  color: rgba(0, 0, 0, 0.55) !important;
}

.light-canvas .header-settings-panel .profile-menu-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #1a1a2e !important;
}

.light-canvas .header-settings-panel .profile-menu-item:hover svg {
  color: #3b82f6 !important;
}

.light-canvas .profile-logout {
  color: rgba(220, 38, 38, 0.8);
}

.light-canvas .profile-logout:hover {
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
}

/* 卡片面板 (生成�? */
.light-canvas .card-face {
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.light-canvas .card-back {
  background: #f0f0f2;
}

.light-canvas .card-status {
  color: rgba(0, 0, 0, 0.5);
}

.light-canvas .card-status b {
  color: #1a1a2e;
}

/* AI绘画节点(空图�? 的亮色适配 */
.light-canvas .card-front:not([style*="url"]) {
  background: #f0f0f2 !important;
}

.light-canvas .card-front:not([style*="url"]) .card-bar {
  background: transparent;
}

.light-canvas .card-front:not([style*="url"]) .card-prompt {
  color: rgba(0, 0, 0, 0.8);
}

/* ===== 提示词框内变量芯片 (Rectangular Chip Badge in Prompt Box) ===== */
.blue-var-tag,
.var-tag-blue {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.14) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  border-radius: 6px !important;
  padding: 2px 7px !important;
  margin: 0 3px !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.4 !important;
  vertical-align: middle !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  user-select: none !important;
}

.light-canvas .blue-var-tag,
.light-canvas .var-tag-blue {
  color: #0284c7 !important;
  background: rgba(2, 132, 199, 0.1) !important;
  border-color: rgba(2, 132, 199, 0.3) !important;
}

div.node-ta[contenteditable="true"]:empty:before {
  content: attr(placeholder);
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  display: inline-block;
}

.light-canvas div.node-ta[contenteditable="true"]:empty:before {
  color: rgba(0, 0, 0, 0.35);
}

.light-canvas .card-front:not([style*="url"]) .card-tools button {
  color: rgba(0, 0, 0, 0.65);
  background: rgba(0, 0, 0, 0.06);
}

.light-canvas .card-front:not([style*="url"]) .card-tools button:hover {
  color: #1a1a2e;
  background: rgba(0, 0, 0, 0.12);
}

/* 框?*/
.light-canvas #marqueeSelect {
  border-color: rgba(59, 130, 246, 0.8);
  background: rgba(59, 130, 246, 0.06);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2) inset;
}

/* 折叠按钮 */
.light-canvas .collapse-cmd-btn {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.4);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.light-canvas .collapse-cmd-btn:hover {
  background: rgba(255, 255, 255, 0.95);
  color: #1a1a2e;
  border-color: rgba(0, 0, 0, 0.2);
}

.light-canvas .command.collapsed .collapse-cmd-btn {
  color: rgba(0, 0, 0, 0.45);
}

.light-canvas .command.collapsed .collapse-cmd-btn:hover {
  color: #1a1a2e;
}

/* 真实连线样式：精致极细实线 (1.3px) */
.wire,
.wire .link-base {
  fill: none;
  stroke: rgba(129, 140, 248, 0.85) !important;
  stroke-width: 1.3px !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: none !important;
  filter: none !important;
  transition: stroke 0.3s ease, opacity 0.3s ease;
}

.wire[data-type="prompt"],
.wire[data-type="prompt"] .link-base,
.wire[data-type="var"],
.wire[data-type="var"] .link-base {
  stroke: #818cf8 !important;
}

.wire[data-type="image"],
.wire[data-type="image"] .link-base {
  stroke: #10b981 !important;
}

.wire:hover,
.wire:hover .link-base {
  stroke: #a78bfa !important;
  stroke-width: 2px !important;
  filter: none !important;
}

/* ===== 动态光子流光层 ===== */
.wire .link-flow {
  display: block !important;
  fill: none;
  opacity: 0;
  stroke-width: 2px !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* ===== 节点运行/加载激活状态 (is-active 科技光子流) ===== */
.wire.is-active .link-base {
  opacity: 0.55;
}

.wire.is-active[data-type="prompt"] .link-base,
.wire.is-active[data-type="var"] .link-base {
  stroke: #818cf8 !important;
}

.wire.is-active[data-type="image"] .link-base {
  stroke: #10b981 !important;
}

.wire.is-active .link-flow {
  opacity: 1;
  stroke: #818cf8 !important;
  stroke-width: 2.2px !important;
  stroke-dasharray: 24 120 !important;
  animation: fiber-photon-flow 1.1s linear infinite !important;
  filter: drop-shadow(0 0 3px rgba(129, 140, 248, 0.85)) !important;
}

/* 提示词/变量类型连线运行时的紫光子脉冲 */
.wire.is-active[data-type="prompt"] .link-flow,
.wire.is-active[data-type="var"] .link-flow {
  stroke: #a78bfa !important;
  filter: drop-shadow(0 0 3px rgba(167, 139, 250, 0.85)) !important;
}

/* ===== @ 提示词变量自动补全菜单 ===== */
.var-autocomplete-menu {
  position: fixed;
  z-index: 999999;
  background: rgba(18, 18, 24, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 12px rgba(99, 102, 241, 0.2);
  min-width: 220px;
  max-width: 320px;
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.var-autocomplete-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: transparent;
  border: none;
  color: #fff;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.var-autocomplete-item:hover,
.var-autocomplete-item.selected {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.5);
}

.var-autocomplete-item .var-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(99, 102, 241, 0.25);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.4);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.var-autocomplete-item .var-preview {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  text-align: right;
}

/* 图片类型连线运行时的绿光子脉冲 */
.wire.is-active[data-type="image"] .link-flow {
  stroke: #34d399 !important;
  filter: drop-shadow(0 0 3px rgba(52, 211, 153, 0.85)) !important;
}

@keyframes fiber-photon-flow {
  0% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -144;
  }
}

/* 拖拽时的临时拉线：精致极细实线 (1.3px) */
.wire-temp,
.wire-temp .link-base {
  stroke: rgba(106, 166, 255, 0.85) !important;
  stroke-width: 1.3px !important;
  stroke-dasharray: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 0.9 !important;
  pointer-events: none !important;
  animation: none !important;
  filter: none !important;
}

.wire-temp .link-flow {
  display: none !important;
}

/* ====== 极致稳定干净拖拽 (No offset, No blue borders) ====== */
.port.port-source-active {
  box-shadow: none !important;
}

.port.port-compatible {
  box-shadow: none !important;
  animation: none !important;
}

.port.port-magnet-snapped {
  box-shadow: none !important;
}

.port.port-incompatible {
  opacity: 0.5 !important;
}

.wire-cursor-head {
  fill: #6aa6ff;
  stroke: #ffffff;
  stroke-width: 1px;
  filter: none !important;
}

.wire-temp.is-snapped .wire-cursor-head {
  fill: #6aa6ff;
  r: 4px;
  filter: none !important;
}

/* ====== 新增：高级感传输动效 (fx-advanced) ====== */
/* 默认隐藏流光�?*/
.link-flow {
  opacity: 0;
}

/* 静态状�?*/
.wire[data-fx="fx-advanced"] .link-base {
  opacity: 0.6;
  transition: opacity 0.4s ease;
}

.wire[data-fx="fx-advanced"]:hover .link-base {
  opacity: 0.85;
}

.wire[data-fx="fx-advanced"] .link-flow {
  opacity: 0;
  stroke-width: 3px;
  transition: opacity 0.4s ease;
}

/* 激活状�?*/
.wire.is-active[data-fx="fx-advanced"] .link-base {
  opacity: 1;
}

.wire.is-active[data-fx="fx-advanced"] .link-flow {
  opacity: 1;
  stroke-width: 3.5px;
  mix-blend-mode: plus-lighter;
  filter: saturate(300%) brightness(2.5) hue-rotate(-15deg) drop-shadow(0 0 4px currentColor);
  animation: flow-intro 0.8s ease-out forwards, flow-loop 1.6s ease-in-out 0.8s infinite;
}

@keyframes flow-intro {
  0% {
    stroke-dasharray: 100 100;
    stroke-dashoffset: 100;
  }

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

@keyframes flow-loop {
  0% {
    stroke-dasharray: 14 86;
    stroke-dashoffset: 100;
  }

  100% {
    stroke-dasharray: 14 86;
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wire.is-active[data-fx="fx-advanced"] .link-flow {
    animation: none !important;
    stroke-dasharray: none !important;
  }
}

/* ================= 对齐工具�?================= */
.align-toolbar {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px) scale(0.95);
  background: rgba(40, 40, 48, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 4px;
  gap: 2px;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.align-toolbar.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

.align-toolbar button {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}

.align-toolbar button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.align-toolbar button:active {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(0.95);
}

.align-toolbar button svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.align-toolbar .divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 4px;
}

/* ================= 高级参数面板 ================= */
.advanced-panel {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 360px;
  max-height: 420px;
  background: rgba(18, 18, 24, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: 100;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.advanced-panel:not(.hidden) {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.adv-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.adv-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.adv-panel-close {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
}

.adv-panel-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.adv-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
}

.adv-param-group {
  margin-bottom: 16px;
}

.adv-param-group:last-child {
  margin-bottom: 0;
}

.adv-param-title {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.adv-param-type {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(106, 166, 255, 0.15);
  color: #6aa6ff;
  font-weight: 500;
}

.adv-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.adv-option {
  padding: 6px 12px;
  font-size: 12.5px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all .15s ease;
  user-select: none;
}

.adv-option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.adv-option.active {
  background: rgba(106, 166, 255, 0.15);
  border-color: rgba(106, 166, 255, 0.4);
  color: #6aa6ff;
}

.adv-option-credits {
  font-size: 11px;
  opacity: 0.7;
  margin-left: 4px;
}

/* ================= 管理�?API 调试面板 ================= */
.admin-api-log-btn {
  position: absolute;
  right: 40px;
  bottom: 40px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(20, 20, 28, 0.85);
  border: 1px solid rgba(106, 166, 255, 0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 99;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: all 0.2s;
  backdrop-filter: blur(10px);
}

.admin-api-log-btn.hidden {
  display: none !important;
}

.admin-api-log-btn:hover {
  background: rgba(106, 166, 255, 0.15);
  transform: scale(1.05);
}

/* 白色/明亮模式下：右下角测试/调试按钮自动变为白色背景中性风 */
.light-canvas .admin-api-log-btn,
body.light-canvas .admin-api-log-btn,
body:has(.light-canvas) .admin-api-log-btn {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.14) !important;
  color: #1a1a2e !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.light-canvas .admin-api-log-btn:hover,
body.light-canvas .admin-api-log-btn:hover,
body:has(.light-canvas) .admin-api-log-btn:hover {
  background: #f8fafc !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: #2563eb !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
}

.admin-api-log-panel {
  user-select: text !important;
  -webkit-user-select: text !important;
  position: absolute;
  right: 40px;
  bottom: 84px;
  width: 340px;
  max-height: 400px;
  background: rgba(15, 15, 22, 0.95);
  border: 1px solid rgba(106, 166, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(16px);
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: opacity 0.2s, transform 0.2s;
}

.admin-api-log-panel.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
}

.api-log-header {
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
}

.api-log-header button {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.api-log-header button:hover {
  color: #fff;
}

#apiLogContent {
  margin: 0;
  padding: 14px;
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  white-space: pre-wrap;
  word-break: break-all;
  overflow-y: auto;
}

/* ================= 内存操作日志与撤回/重做面板样式 ================= */
.action-log-trigger-btn {
  position: fixed !important;
  right: 40px !important;
  bottom: 40px !important;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(20, 20, 28, 0.88);
  border: 1px solid rgba(114, 240, 223, 0.35);
  color: #72f0df;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 0 10px rgba(114, 240, 223, 0.2);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.action-log-trigger-btn:hover {
  background: rgba(114, 240, 223, 0.15);
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(114, 240, 223, 0.35);
}

.action-log-panel {
  user-select: text !important;
  -webkit-user-select: text !important;
  position: fixed !important;
  right: 40px !important;
  bottom: 86px !important;
  width: 360px;
  max-width: calc(100vw - 40px);
  max-height: 520px;
  background: rgba(14, 15, 22, 0.95);
  border: 1px solid rgba(114, 240, 223, 0.25);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 10000 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.action-log-panel.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(0.96);
}

.action-log-header {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.action-log-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.action-log-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.action-log-badge-count {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(114, 240, 223, 0.12);
  color: #72f0df;
  border: 1px solid rgba(114, 240, 223, 0.25);
}
.action-log-header-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}
.action-log-hdr-btn {
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.action-log-hdr-btn:hover:not(:disabled) {
  background: rgba(114, 240, 223, 0.2);
  border-color: rgba(114, 240, 223, 0.4);
  color: #72f0df;
}
.action-log-hdr-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.action-log-close-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}
.action-log-close-btn:hover {
  color: #fff;
}
.action-log-subnote {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.4);
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.action-log-body {
  padding: 10px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 380px;
}
.action-log-empty {
  text-align: center;
  padding: 30px 10px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  line-height: 1.6;
}
.action-log-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background 0.2s;
}
.action-log-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
.action-log-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.action-log-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid;
  letter-spacing: 0.3px;
}
.action-log-time {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.35);
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.action-log-card-title {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  word-break: break-all;
}
.action-log-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}
.action-log-sub-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.7);
  font-size: 10.5px;
  padding: 3px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.18s;
}
.action-log-sub-btn:hover {
  background: rgba(114, 240, 223, 0.15);
  color: #72f0df;
  border-color: rgba(114, 240, 223, 0.3);
}
.action-log-json-wrap {
  display: none;
  margin-top: 4px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.action-log-json-wrap.open {
  display: block;
}
.action-log-json {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10.5px;
  color: rgba(114, 240, 223, 0.85);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 140px;
  overflow-y: auto;
}

/* Card PS Auto Import Switch (Normal Rectangular Sliding Switch with Custom Uploaded Icon) */
.auto-ps-switch {
  display: inline-flex;
  align-items: center;
  position: absolute;
  top: -24px;
  right: 0;
  width: 36px;
  height: 20px;
  cursor: pointer;
  user-select: none;
  z-index: 30 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    right 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease,
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Vertical Mode (竖版: 按钮移动到右侧且顶部对齐) */
.auto-ps-switch.is-vertical {
  top: 0;
  bottom: auto;
  right: -24px;
  width: 20px;
  height: 36px;
}

/* Invisible hover bridge for switch */
.auto-ps-switch:after {
  content: "";
  position: absolute;
  inset: -6px;
  background: transparent;
  pointer-events: auto;
  z-index: -1;
}

/* Show switch when hovering over the card or when checked */
.node:hover .auto-ps-switch,
.node-draw-card .card-inner:hover .auto-ps-switch,
.auto-ps-switch.is-checked {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.auto-ps-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.auto-ps-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 6px;
  box-shadow: none !important;
}

.auto-ps-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  top: 2px;
  background-color: transparent;
  background-image: url('/assets/adobe-photoshop-beta-icon-free-png.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s, opacity 0.2s;
  border-radius: 2px;
  box-shadow: none !important;
  filter: grayscale(0.8) contrast(0.8);
  opacity: 0.75;
}

/* Horizontal Checked State: Move Right */
.auto-ps-switch input:checked+.auto-ps-slider {
  background-color: #3b82f6;
  border-color: #2563eb;
}

.auto-ps-switch:not(.is-vertical) input:checked+.auto-ps-slider:before {
  transform: translateX(16px);
  filter: none;
  opacity: 1;
}

/* Vertical Checked State: Move Down */
.auto-ps-switch.is-vertical input:checked+.auto-ps-slider:before {
  transform: translateY(16px);
  filter: none;
  opacity: 1;
}

/* Hover effects */
.auto-ps-switch:hover .auto-ps-slider {
  background-color: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.2);
}

.auto-ps-switch:hover input:checked+.auto-ps-slider {
  background-color: #2563eb;
  border-color: #1d4ed8;
}

/* Light mode overrides (.light-canvas) */
.light-canvas .auto-ps-slider {
  background-color: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: none !important;
}

.light-canvas .auto-ps-slider:before {
  background-color: transparent;
  box-shadow: none !important;
}

.light-canvas .auto-ps-switch input:checked+.auto-ps-slider {
  background-color: #3b82f6;
  border-color: #2563eb;
}

.light-canvas .auto-ps-switch:hover .auto-ps-slider {
  background-color: rgba(0, 0, 0, 0.14);
}

.light-canvas .auto-ps-switch:hover input:checked+.auto-ps-slider {
  background-color: #2563eb;
  border-color: #1d4ed8;
}

/* AI Node Reference Images */
.node-thumbnails {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  pointer-events: none;
  z-index: 20 !important;
}

.thumbs-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
  position: relative;
}

/* Invisible hover bridge for thumbnails */
.thumbs-list:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 10px;
  background: transparent;
  pointer-events: auto;
  z-index: -1;
}

.mini-thumb {
  pointer-events: auto;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background-color: #111115;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.25s ease;
}

.mini-thumb-index {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-family: sans-serif;
  font-size: 9px;
  padding: 1px 3px;
  border-radius: 4px;
  transform: scale(0.85) translate(10%, 10%);
  transform-origin: bottom right;
  line-height: 1;
}

/* Global Chat Upload Elements */
.global-thumb-add {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.2s;
}

.global-thumb-add svg {
  width: 24px;
  height: 24px;
}

.global-thumb-add:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}

/* Light mode overrides for Global Chat Upload Elements */
.light-canvas .global-thumb-add {
  background-color: rgba(0, 0, 0, 0.03);
  border: 1px dashed rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.4);
}

.light-canvas .global-thumb-add:hover {
  background-color: rgba(0, 0, 0, 0.06);
  color: #000;
  border-color: rgba(0, 0, 0, 0.4);
}

.global-thumbnails {
  position: absolute;
  bottom: calc(100% + 15px);
  left: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap-reverse;
  max-width: calc(100% - 40px);
}

.global-thumb {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

/* =========================================
   消耗历史弹窗样式 (History Modal)
   ========================================= */
.modal-close {
  background: transparent;
  border: none;
  color: var(--muted, #8b91a1);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.history-modal-content {
  width: 920px;
  max-width: 92vw;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: #14151e !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65) !important;
  overflow: hidden;
  font-family: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', sans-serif !important;
  font-weight: 400 !important;
}

.history-modal-content .modal-header {
  padding: 18px 24px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.history-modal-content .modal-header h3 {
  font-size: 15px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0.02em;
  margin: 0;
  font-family: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', sans-serif;
}

.history-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.history-modal-content *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.history-modal-content *::-webkit-scrollbar-track {
  background: transparent;
}

.history-modal-content *::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.history-modal-content *::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

.history-table-container {
  padding: 0 20px 16px;
  overflow-x: auto;
}

.history-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  text-align: left;
  font-family: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', sans-serif;
  font-weight: 400;
}

.history-table th {
  padding: 12px 14px;
  font-weight: 400;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: #14151e;
  z-index: 2;
  font-family: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', sans-serif;
}

.history-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
  white-space: nowrap;
  font-family: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', sans-serif;
  font-weight: 400;
}

.history-table tbody tr {
  transition: background 0.15s ease;
}

.history-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.035);
}

/* 经典高质感胶囊状态标签 */
.status-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  font-family: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', sans-serif;
}

.status-success {
  background: rgba(46, 213, 115, 0.15);
  color: #2ed573;
  border: 1px solid rgba(46, 213, 115, 0.3);
}

.status-failed {
  background: rgba(255, 71, 87, 0.15);
  color: #ff4757;
  border: 1px solid rgba(255, 71, 87, 0.3);
}

.status-processing {
  background: rgba(30, 144, 255, 0.15);
  color: #1e90ff;
  border: 1px solid rgba(30, 144, 255, 0.3);
}

.status-pending {
  background: rgba(255, 165, 2, 0.15);
  color: #ffa502;
  border: 1px solid rgba(255, 165, 2, 0.3);
}

/* 列样式定义 (全表微软雅黑 Regular，仅模型保留原字体) */
.history-table .col-id {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  font-family: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', sans-serif;
  font-weight: 400;
}

/* 模型名称：保留原有字体与权重 */
.history-table .col-model {
  color: #ffffff;
  font-weight: 600;
  font-size: 13px;
}

/* 输入与输出：Token使用绿色，非Token使用 "-" */
.history-table .col-tokens {
  font-family: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', sans-serif;
  font-size: 12.5px;
  font-weight: 400;
}

.history-table .col-tokens .token-green {
  color: #2ed573;
  font-family: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', sans-serif;
  font-weight: 400;
}

.history-table .col-tokens .text-muted {
  font-family: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 400;
}

.history-table .col-cost {
  font-family: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', sans-serif;
  font-size: 12.5px;
  font-weight: 400;
}

.history-table .col-cost.cost-active {
  color: #ff6b81;
}

.history-table .col-cost.cost-zero {
  color: rgba(255, 255, 255, 0.35);
}

/* 剩余积分：金色字体 */
.history-table .col-balance {
  font-family: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', sans-serif;
  font-size: 12.5px;
  color: #fbbf24;
  font-weight: 400;
}

.history-table .col-time {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  font-family: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', sans-serif;
  font-weight: 400;
}

/* ================= 左侧历史记录侧边�?================= */
.history-sidebar {
  position: absolute;
  left: -320px;
  top: 0;
  bottom: 0;
  width: 320px;
  background: rgba(18, 18, 24, 0.94);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.25);
}

.history-sidebar.open {
  left: 0;
}

.hs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hs-title {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.04em;
}

.hs-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s ease;
}

.hs-close:hover {
  color: #fff;
}

.hs-close svg {
  width: 18px;
  height: 18px;
}

.hs-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hs-body::-webkit-scrollbar {
  width: 4px;
}

.hs-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

/* 历史记录卡片 */
.hs-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.hs-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

.hs-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.hs-model {
  font-size: 11px;
  color: #6aa6ff;
  font-family: ui-monospace, "SF Mono", monospace;
  background: rgba(106, 166, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.hs-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
}

.hs-prompt {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hs-inputs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.hs-input-img {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: transform 0.2s;
}

.hs-input-img:hover {
  transform: scale(1.05);
}

.hs-input-more {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.hs-result {
  width: 100%;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
  min-height: 100px;
}

.hs-result img {
  width: 100%;
  height: auto;
  display: block;
}

.hs-status {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.4);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.hs-card.failed .hs-status {
  color: #ff7180;
}

.hs-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.hs-btn {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  padding: 6px 0;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s;
}

.hs-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* ================= NEW GRID LIGHT SKILL ================= */
.board {
  --bg-color: #030408;
  --grid-color-rgb: 255, 255, 255;
  --grid-bright-color-rgb: 255, 255, 255;
  --light-color: 56, 189, 248;
  /* Default Cyan */
  --grid-size: 32px;
  --light-radius: 260px;
  /* Elegant smaller radius */
  --light-opacity: 0;
}

/* Light/Dark Color variants by theme class */
.board.fx-hover {
  --light-color: 56, 189, 248;
  /* Gorgeous electric cyan */
}

.board.fx-pink {
  --light-color: 244, 63, 142;
  /* Premium neon pink / rose */
}

/* Light Canvas variables */
.light-canvas .board,
.light-canvas #board {
  --bg-color: #ffffff;
  --grid-color-rgb: 0, 0, 0;
  --grid-bright-color-rgb: 0, 0, 0;
  background-color: #ffffff !important;
  background: #ffffff !important;
}

.grid-light__base,
.grid-light__bright {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(var(--grid-color-rgb), 0.12) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  pointer-events: none;
  z-index: 0;
}

.grid-light__bright,
.grid-light__glow-core,
.grid-light__glow-halo {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Light canvas themes handle glowing differently */
.light-canvas .grid-light__glow-core {
  mix-blend-mode: multiply;
  /* Multiplies color, looks like a dark lens/focus shadow */
  background: radial-gradient(circle var(--light-radius) at var(--mx) var(--my), rgba(var(--light-color), 0.06) 0%, rgba(var(--light-color), 0.02) 40%, rgba(var(--light-color), 0) 75%);
}

.light-canvas .grid-light__glow-halo {
  mix-blend-mode: multiply;
  background: radial-gradient(circle calc(var(--light-radius) * 1.5) at var(--mx) var(--my), rgba(var(--light-color), 0.02) 0%, rgba(var(--light-color), 0) 75%);
  filter: blur(16px);
}

#board.bg-blank .grid-light__base,
#board.bg-blank .grid-light__bright {
  background-image: none;
}

/* Hide light completely if set to none */
#board.fx-none .grid-light__bright,
#board.fx-none .grid-light__glow-core,
#board.fx-none .grid-light__glow-halo {
  opacity: 0 !important;
}

/* Adapt grid-light backgrounds to board classes */
#board.bg-dot .grid-light__base,
#board.bg-dot-light .grid-light__base {
  background-image: radial-gradient(circle, rgba(var(--grid-color-rgb), 0.12) 1px, transparent 1px);
}

#board.bg-dot .grid-light__bright,
#board.bg-dot-light .grid-light__bright {
  background-image: radial-gradient(circle, rgba(var(--grid-bright-color-rgb), 0.5) 1.1px, transparent 1.1px);
}

#board.bg-grid .grid-light__base,
#board.bg-grid-light .grid-light__base {
  background-image: linear-gradient(rgba(var(--grid-color-rgb), 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--grid-color-rgb), 0.05) 1px, transparent 1px);
}

#board.bg-grid .grid-light__bright,
#board.bg-grid-light .grid-light__bright {
  background-image: linear-gradient(rgba(var(--grid-bright-color-rgb), 0.35) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--grid-bright-color-rgb), 0.35) 1px, transparent 1px);
}


/* ==================================
   画布样式设置弹窗手机自适应 (Mobile Settings Modal)
   ================================== */
@media (max-width: 768px) {
  .theme-modal-container {
    width: calc(100% - 24px) !important;
    height: 75vh !important;
    max-height: 580px !important;
    max-width: 460px !important;
  }

  .tm-body {
    flex-direction: column !important;
  }

  .tm-sidebar {
    width: 100% !important;
    flex-direction: row !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding: 8px 12px !important;
    gap: 8px !important;
    scrollbar-width: none;
    /* Hide scrollbars in Firefox */
  }

  .tm-sidebar::-webkit-scrollbar {
    display: none;
    /* Hide scrollbars in Chrome/Safari */
  }

  .tm-tab {
    padding: 6px 12px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  .tm-tab.active::before {
    display: none !important;
  }

  .tm-tab.active {
    background: #3b82f6 !important;
    color: #fff !important;
  }

  .tm-content {
    padding: 16px !important;
  }

  .theme-grid,
  .theme-grid-fx {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .theme-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 12px !important;
  }

  .tc-preview {
    width: 90px !important;
    height: 54px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }

  .tc-name {
    font-size: 13px !important;
    margin-bottom: 0 !important;
  }

  .tc-desc {
    font-size: 11px !important;
  }

  .settings-modal {
    width: calc(100% - 32px) !important;
    max-width: 400px !important;
    padding: 20px 20px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
  }

  .settings-modal .settings-btn-primary,
  .settings-modal .settings-btn-secondary {
    white-space: nowrap !important;
    height: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

.hotkey-input-record {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #6aa6ff;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  width: 140px;
  text-align: center;
  outline: none;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.05em;
  font-family: inherit;
}

.hotkey-input-record:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(106, 166, 255, 0.3);
}

.hotkey-input-record:focus,
.hotkey-input-record.recording {
  border-color: #6aa6ff;
  box-shadow: 0 0 0 2px rgba(106, 166, 255, 0.2);
  color: #fff;
}

.hotkey-input-record::placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 300;
}

/* AI Model Mono SVG Theme Adaptive Filters */
.adapt-theme-svg {
  filter: brightness(0) invert(1);
}

body.light-canvas .adapt-theme-svg {
  filter: brightness(0);
}

/* Loading Dots Animation and Glow Effects */
@keyframes loading-dots {
  0% {
    content: "";
  }

  25% {
    content: ".";
  }

  50% {
    content: "..";
  }

  75% {
    content: "...";
  }

  100% {
    content: "";
  }
}

.status-dots::after {
  content: "";
  display: inline-block;
  width: 14px;
  text-align: left;
  animation: loading-dots 1.5s infinite steps(1);
}

.card-status b {
  font-family: ui-monospace, "SF Mono", monospace;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

/* ========================================================
   AI 对话板块 (Chat Node Card) 与悬浮面板 CSS 样式
   ======================================================== */
.node.node-chat-card,
.node.node-chat-card.selected,
.node.node-chat-card.dragging,
.light-canvas .node.node-chat-card,
.light-canvas .node.node-chat-card.selected,
.light-canvas .node.node-chat-card.dragging {
  background: transparent !important;
  border: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  color: #fff !important;
  position: absolute !important;
  overflow: visible !important;
  /* 改为 visible 允许端口与浮动设置栏溢出显示 */
  box-shadow: none !important;
  outline: none !important;
}

.chat-main-card {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 16px !important;
  background: rgba(20, 20, 28, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.node.selected .chat-main-card {
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: none !important;
}

.node-chat-card .chat-card-body {
  position: relative !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.95) !important;
  border-radius: 16px 16px 0 0 !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.node-chat-card .card-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: transparent !important;
  border-radius: 0 0 16px 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 10;
}

.node-chat-card .card-bar * {
  pointer-events: auto;
}

.node-chat-card:hover .card-bar {
  opacity: 1 !important;
}

.node-chat-card .card-prompt {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 62%;
}

.chat-placeholder-text {
  color: rgba(255, 255, 255, 0.2) !important;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.6px;
  user-select: none;
  transform: translateY(16px);
}

/* AI 对话加载动画 (AI Chat Loading & Typing Indicators) */
.chat-card-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  width: 100%;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.5px;
  user-select: none;
  min-height: 50px;
}

.chat-loading-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(56, 189, 248, 0.2);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: rxaiSpin 0.8s linear infinite;
  display: inline-block;
}

.rx-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  min-height: 20px;
}

.rx-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
  display: inline-block;
  animation: rxTypingPulse 1.4s infinite ease-in-out both;
}

.rx-typing i:nth-child(1) {
  animation-delay: -0.32s;
}

.rx-typing i:nth-child(2) {
  animation-delay: -0.16s;
}

.rx-typing i:nth-child(3) {
  animation-delay: 0s;
}

.chat-loading-text {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 400;
  letter-spacing: 0.8px;
  user-select: none;
}

@keyframes rxTypingPulse {

  0%,
  80%,
  100% {
    transform: scale(0.6);
    opacity: 0.35;
  }

  40% {
    transform: scale(1.2);
    opacity: 1;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.85);
  }
}

.light-canvas .chat-card-loading,
.light-canvas .chat-loading-text {
  color: rgba(0, 0, 0, 0.45) !important;
}

.light-canvas .node-chat-card .chat-placeholder-text,
.light-canvas .chat-placeholder-text {
  color: #b0b5c0 !important;
  opacity: 0.65 !important;
}

.draw-card-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.draw-card-placeholder .chat-placeholder-text {
  transform: none !important;
}

.card-front[style*="url"] .draw-card-placeholder {
  display: none !important;
}

.node-chat-card .chat-card-body::-webkit-scrollbar {
  width: 4px;
}

.node-chat-card .chat-card-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.node-chat-card .chat-card-body::-webkit-scrollbar-track {
  background: transparent;
}

/* 浮动设置面板单行与拖拽条 - 修正过大圆角 */
.node-chat-float-panel {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 40px !important;
  transform: translateY(0) !important;
  margin-top: 0 !important;
  z-index: 1 !important;
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100% !important;
  min-width: 100% !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
  background: rgba(22, 22, 30, 0.95) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22) !important;
  transition: top 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
}

.node.selected .node-chat-float-panel {
  opacity: 1 !important;
  pointer-events: auto !important;
  top: calc(100% + 14px) !important;
  transform: translateY(0) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22) !important;
}

/* AI 绘图板块 (Draw Node Card) 主卡片与悬浮设置面板 - 1:1 对齐 AI 对话板块 */
.node.node-draw-card,
.node.node-draw-card.selected,
.node.node-draw-card.dragging,
.light-canvas .node.node-draw-card,
.light-canvas .node.node-draw-card.selected,
.light-canvas .node.node-draw-card.dragging {
  background: transparent !important;
  border: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  position: absolute !important;
  overflow: visible !important;
  box-shadow: none !important;
  outline: none !important;
}

.draw-main-card {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 16px !important;
  background: transparent !important;
  border: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  box-shadow: none !important;
}

.light-canvas .draw-main-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.node.selected .card-face {
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: none !important;
}

.light-canvas .node.selected .card-face {
  border-color: rgba(0, 0, 0, 0.2) !important;
  box-shadow: none !important;
}

.node.selected {
  z-index: 100;
}

.node-draw-float-panel,
.node-chat-float-panel,
.node-float-panel {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: 40px !important;
  transform: translateY(-4px) scale(0.98) !important;
  margin-top: 0 !important;
  z-index: 10 !important;
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 8px !important;
  width: max-content !important;
  min-width: 100% !important;
  max-width: 500px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
  background: rgba(20, 22, 30, 0.88) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
  transition: top 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), width 0.22s ease !important;
}

.node.selected .node-draw-float-panel,
.node.selected .node-chat-float-panel,
.node.selected .node-float-panel {
  opacity: 1 !important;
  pointer-events: auto !important;
  top: calc(100% + 14px) !important;
  transform: translateY(0) scale(1) !important;
}

.light-canvas .node-draw-float-panel,
.light-canvas .node.selected .node-draw-float-panel,
.light-canvas .node-chat-float-panel,
.light-canvas .node.selected .node-chat-float-panel,
.light-canvas .node-var-float-panel,
.light-canvas .node.selected .node-var-float-panel,
.light-canvas .node-float-panel,
.light-canvas .node.selected .node-float-panel {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

/* 提示词变量专属 悬浮面板 (居中对齐卡片下方、紧凑包覆内容) */
.node-var-float-panel {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(-4px) scale(0.98) !important;
  width: fit-content !important;
  min-width: auto !important;
  max-width: none !important;
  padding: 5px 8px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(18, 18, 24, 0.82) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

.node.selected .node-var-float-panel {
  opacity: 1 !important;
  pointer-events: auto !important;
  top: calc(100% + 12px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

.node-var-float-panel .var-action-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: rgba(255, 255, 255, 0.65) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  transition: all 0.2s ease !important;
}

.node-var-float-panel .var-action-btn:hover {
  color: #38bdf8 !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ========================================================
   提示词板块专属 底部悬浮控制条 (内嵌卡片底部、极限圆角胶囊、微型圆形按钮)
   ======================================================== */
.node-prompt-float-panel {
  position: absolute !important;
  bottom: 15px !important;
  top: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(4px) scale(0.92) !important;
  width: fit-content !important;
  min-width: auto !important;
  max-width: none !important;
  padding: 3px 3px !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  background: rgba(24, 24, 34, 0.58) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.38), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  z-index: 25 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  outline: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.node.selected .node-prompt-float-panel,
.node:hover .node-prompt-float-panel {
  opacity: 1 !important;
  pointer-events: auto !important;
  bottom: 15px !important;
  top: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
  background: rgba(24, 24, 34, 0.58) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.38), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  outline: none !important;
}

.node-prompt-float-panel .prompt-panel-row {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.node-prompt-float-panel .var-action-btn {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: rgba(255, 255, 255, 0.65) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  transition: all 0.18s ease !important;
}

.node-prompt-float-panel .var-action-btn:hover {
  color: #38bdf8 !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border-radius: 50% !important;
}

.node-prompt-float-panel .var-action-btn:active {
  transform: scale(0.92) !important;
}

.node-prompt-float-panel .var-action-btn:focus,
.node-prompt-float-panel .var-action-btn:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 荧光蓝 简约文本按钮与卡片左上角外部 Tag 样式 */
.node-var-float-panel .var-name-chip-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: #38bdf8 !important;
  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 2px 4px !important;
  white-space: nowrap !important;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.2s ease !important;
}

.node-var-float-panel .var-name-chip-btn:hover {
  color: #7dd3fc !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.6) !important;
  background: transparent !important;
}

.var-top-tag {
  position: absolute !important;
  bottom: 100% !important;
  left: 0 !important;
  margin-bottom: 6px !important;
  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif !important;
  font-weight: 400 !important;
  font-size: 12.5px !important;
  color: #38bdf8 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  letter-spacing: 0.01em;
}

.var-top-tag:hover {
  color: #7dd3fc !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.5) !important;
}

.light-canvas .node-var-float-panel .var-name-chip-btn {
  color: #0095ff !important;
  background: transparent !important;
  border: none !important;
}

.light-canvas .node-var-float-panel .var-name-chip-btn:hover {
  color: #38bdf8 !important;
  text-shadow: none !important;
}

.light-canvas .node-var-float-panel .var-action-btn {
  color: rgba(15, 23, 42, 0.65) !important;
}

.light-canvas .node-var-float-panel .var-action-btn:hover {
  color: #0284c7 !important;
  background: rgba(0, 0, 0, 0.05) !important;
}

.light-canvas .node-var-float-panel .var-divider {
  background: rgba(0, 0, 0, 0.12) !important;
}

.chat-panel-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.slider-chip-wrap {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 2px 2px !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: none !important;
  width: 100%;
  box-sizing: border-box;
}

.chat-temp-slider,
.node-chat-temp-slider,
.chat-len-slider,
.node-chat-maxtokens-slider {
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.15);
  height: 4px !important;
  border-radius: 2px !important;
  outline: none !important;
  width: 100%;
  margin: 0;
  cursor: pointer;
  touch-action: none;
  box-sizing: border-box;
}

/* 锁定滑动轨道的高度，防止活跃或缩放时变粗 */
.chat-temp-slider:active,
.node-chat-temp-slider:active,
.chat-len-slider:active,
.node-chat-maxtokens-slider:active,
.chat-temp-slider:focus,
.node-chat-temp-slider:focus,
.chat-len-slider:focus,
.node-chat-maxtokens-slider:focus {
  height: 4px !important;
  outline: none !important;
}

.chat-temp-slider::-webkit-slider-thumb,
.node-chat-temp-slider::-webkit-slider-thumb,
.chat-len-slider::-webkit-slider-thumb,
.node-chat-maxtokens-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #3b82f6 !important;
  cursor: pointer;
  transition: transform 0.12s ease;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
  border: none !important;
}

/* 锁定拖拽时的宽高，防止变形为椭圆 */
.chat-temp-slider::-webkit-slider-thumb:active,
.node-chat-temp-slider::-webkit-slider-thumb:active,
.chat-len-slider::-webkit-slider-thumb:active,
.node-chat-maxtokens-slider::-webkit-slider-thumb:active,
.chat-temp-slider::-webkit-slider-thumb:focus,
.node-chat-temp-slider::-webkit-slider-thumb:focus,
.chat-len-slider::-webkit-slider-thumb:focus,
.node-chat-maxtokens-slider::-webkit-slider-thumb:focus {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  transform: scale(1.3) !important;
}

.chat-temp-slider::-webkit-slider-thumb:hover,
.node-chat-temp-slider::-webkit-slider-thumb:hover,
.chat-len-slider::-webkit-slider-thumb:hover,
.node-chat-maxtokens-slider::-webkit-slider-thumb:hover {
  transform: scale(1.3);
}

.node-chat-search-chip {
  color: rgba(255, 255, 255, 0.45) !important;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative;
  overflow: visible !important;
  user-select: none;
}

.node-chat-search-chip:hover {
  transform: translateY(-1px) scale(1.04);
}

.node-chat-search-chip:active {
  transform: scale(0.90) !important;
  transition: transform 0.08s ease !important;
}

.node-chat-search-chip svg {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.node-chat-search-chip:hover svg {
  transform: rotate(20deg) scale(1.12);
}

.node-chat-search-chip:not(.active):hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.node-chat-search-chip.active,
.node-chat-search-chip.active:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.55), 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
}

.node-chat-search-chip.active svg {
  transform: scale(1.1);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}

/* 联网搜索按钮 Hover Tooltip 浮层样式 (与侧边栏 .lt-btn::after 保持 100% 一致) */
.node-chat-search-chip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(20, 20, 26, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 400;
  font-family: inherit;
  letter-spacing: 0.03em;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
}

.node-chat-search-chip:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* AI Chat 节点右上角联网搜索指示角标 (带平移动画) */
@keyframes slideInSearchBadge {
  0% {
    opacity: 0;
    transform: translateY(-12px) scale(0.75);
  }

  65% {
    opacity: 1;
    transform: translateY(2px) scale(1.04);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slideOutSearchBadge {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-10px) scale(0.75);
  }
}

.node-chat-search-badge {
  position: absolute;
  top: -24px;
  right: 0;
  height: 20px;
  padding: 0 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(59, 130, 246, 0.38);
  color: #3b82f6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 30 !important;
  cursor: pointer;
  user-select: none;
  pointer-events: auto !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: slideInSearchBadge 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.node-chat-search-badge:hover {
  transform: translateY(-2px) scale(1.06);
  background: #3b82f6;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.45);
}

.node-chat-search-badge:active {
  transform: scale(0.92) !important;
}

.node-chat-search-badge.is-leaving {
  animation: slideOutSearchBadge 0.22s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.node-chat-search-badge::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(20, 20, 26, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 400;
  font-family: inherit;
  letter-spacing: 0.03em;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
}

.node-chat-search-badge:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* AI Chat 节点右上角 联网搜索网站 LOGO 飞入流光列表 */
.node-web-sites-container {
  position: absolute;
  top: -24px;
  right: 0;
  height: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  z-index: 35 !important;
  pointer-events: auto !important;
}

@keyframes flyInFavicon {
  0% {
    opacity: 0;
    transform: translate(-140px, 28px) scale(0.3) rotate(-25deg);
    filter: blur(4px);
  }

  65% {
    opacity: 1;
    transform: translate(3px, -2px) scale(1.18) rotate(5deg);
    filter: blur(0px);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
    filter: blur(0px);
  }
}

@keyframes flyOutFavicon {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-80px, 20px) scale(0.3);
  }
}

.search-site-favicon {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(30, 30, 38, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  animation: flyInFavicon 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.search-site-favicon img {
  width: 13px;
  height: 13px;
  object-fit: contain;
  border-radius: 2px;
  display: block;
}

.search-site-favicon:hover {
  transform: translateY(-3px) scale(1.22) !important;
  background: #3b82f6 !important;
  border-color: #60a5fa !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.5) !important;
  z-index: 50;
}

.search-site-favicon:active {
  transform: scale(0.92) !important;
}

/* Sidebar-style Tooltip for Favicons */
.search-site-favicon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(20, 20, 26, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 400;
  font-family: inherit;
  letter-spacing: 0.03em;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
}

.search-site-favicon:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ========================================================
   白色画布主题适配 (Light Theme Adaptive Styles)
   ======================================================== */
.light-canvas .node-chat-card {
  background: transparent !important;
  border: none !important;
  color: #1a1a2e !important;
  box-shadow: none !important;
}

.light-canvas .chat-main-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #1a1a2e !important;
  box-shadow: none !important;
}

.light-canvas .node.selected .chat-main-card {
  border-color: rgba(0, 0, 0, 0.2) !important;
  box-shadow: none !important;
}

.light-canvas .node-chat-card .card-bar {
  background: transparent !important;
  border-radius: 0 0 16px 16px !important;
}

.light-canvas .node-chat-card .card-prompt {
  color: rgba(0, 0, 0, 0.8) !important;
  text-shadow: none !important;
}

.light-canvas .node-chat-card .chat-card-body {
  background: #ffffff !important;
  color: #1a1a2e !important;
}

.light-canvas .node-chat-card .chat-response-content:not(:has(.chat-placeholder-text)),
.light-canvas .node-chat-card .chat-response-content *:not(.chat-placeholder-text) {
  color: #1a1a2e !important;
}

.light-canvas .node-chat-card .node-close {
  color: rgba(0, 0, 0, 0.35) !important;
}

/* AI 对话头部按钮样式 - 关联主绘图卡片按钮样式保持一致 */
.node-chat-card .card-tools button {
  width: 26px !important;
  height: 26px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: rgba(0, 0, 0, 0.3) !important;
  color: #fff !important;
  font-size: 12px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: .2s !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.node-chat-card .card-tools button:hover {
  background: rgba(255, 255, 255, 0.16) !important;
}

.node-chat-card .card-tools button svg {
  width: 12px !important;
  height: 12px !important;
  display: block !important;
  flex-shrink: 0 !important;
  transform: translateY(1px) !important;
}

.node-chat-card .card-tools .regen-btn svg {
  transform: translateY(1px) !important;
}

/* 白色主题自适应 */
.light-canvas .node-chat-card .card-tools button {
  background: rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: rgba(0, 0, 0, 0.65) !important;
}

.light-canvas .node-chat-card .card-tools button:hover {
  background: rgba(0, 0, 0, 0.12) !important;
  color: #1a1a2e !important;
}

.light-canvas .node-chat-float-panel,
.light-canvas .node-draw-float-panel,
.light-canvas .node-float-panel {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

.light-canvas .node-float-panel .chip,
.light-canvas .node-draw-float-panel .chip,
.light-canvas .node-chat-float-panel .chip {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #1e293b !important;
}

.light-canvas .node-float-panel .chip .val,
.light-canvas .node-draw-float-panel .chip .val,
.light-canvas .node-chat-float-panel .chip .val {
  color: #0f172a !important;
}

.light-canvas .node-float-panel .chip:hover,
.light-canvas .node-draw-float-panel .chip:hover,
.light-canvas .node-chat-float-panel .chip:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(37, 99, 235, 0.4) !important;
}

.light-canvas .slider-chip-wrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.light-canvas .slider-chip-wrap span {
  color: rgba(0, 0, 0, 0.6) !important;
}

.light-canvas .slider-chip-wrap b {
  color: #2563eb !important;
}

.light-canvas .chat-temp-slider,
.light-canvas .chat-len-slider {
  background: rgba(0, 0, 0, 0.1) !important;
}

.light-canvas .chat-temp-slider::-webkit-slider-thumb,
.light-canvas .chat-len-slider::-webkit-slider-thumb {
  background: #2563eb !important;
}

.light-canvas .node-chat-search-chip {
  color: rgba(0, 0, 0, 0.45) !important;
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.light-canvas .node-chat-search-chip:hover {
  transform: translateY(-1px) scale(1.04);
}

.light-canvas .node-chat-search-chip:active {
  transform: scale(0.90) !important;
  transition: transform 0.08s ease !important;
}

.light-canvas .node-chat-search-chip:not(.active):hover {
  color: #0f172a !important;
  background: rgba(0, 0, 0, 0.07) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.light-canvas .node-chat-search-chip.active,
.light-canvas .node-chat-search-chip.active:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.45), 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

.light-canvas .node-chat-search-chip::after {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #0f172a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* ========================================================
   Vibe Coding 现代节点 Card & Float Panel 深度增强样式
   ======================================================== */

/* 1. 运行中流光光环 (Vibe Executing Gradient Stream) */
@keyframes vibeBorderGlow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.node.vibe-executing {
  position: relative !important;
}

.node.vibe-executing::after {
  content: '' !important;
  position: absolute !important;
  inset: -2px !important;
  border-radius: 18px !important;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6) !important;
  background-size: 300% 300% !important;
  animation: vibeBorderGlow 2s ease infinite !important;
  z-index: -1 !important;
  opacity: 0.85 !important;
  filter: blur(4px) !important;
}

/* 2. 控制条 Chip 精细微动与边框 Glow */
.node-float-panel .chip {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
}

.node-float-panel .chip:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.node-float-panel .chip:active {
  transform: translateY(0) scale(0.98) !important;
}

/* 3. 增强模型下拉菜单与 Popover 物理微弹效果 */
.popover {
  border-radius: 16px !important;
  padding: 8px !important;
  background: rgba(18, 20, 28, 0.94) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
}

.light-canvas .popover {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

.pop-item {
  border-radius: 10px !important;
  padding: 8px 12px !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pop-item:hover {
  transform: translateX(2px) !important;
}

.pop-item.active {
  background: rgba(59, 130, 246, 0.14) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.light-canvas .pop-item.active {
  background: rgba(59, 130, 246, 0.1) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
}

/* 4. 参考卡片美化.html - AI 生图控制面板美化样式 */
.node-draw-float-panel .node-model-chip {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.node-draw-float-panel .node-model-chip:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(59, 130, 246, 0.45) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.light-canvas .node-draw-float-panel .node-model-chip {
  background: #f8f9fa !important;
  border: 1.5px solid #e1e4e8 !important;
}

.light-canvas .node-draw-float-panel .node-model-chip:hover {
  background: #f3f4f6 !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.light-canvas .node-draw-float-panel .model-name {
  color: #1a1a1a !important;
}

.node-draw-float-panel .model-name {
  color: #ededf0 !important;
}

.node-model-chip .model-details {
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

.node-model-chip .model-price {
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* 5. 尺寸、比例、图片质量三款参数按钮: 全换为细字体 (font-weight: 400) + 精确居中 + 控制条整体自适应拉长 */
.node-size-chip,
.node-ratio-chip,
.node-adv-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 32px !important;
  padding: 0 10px !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: center !important;
  box-sizing: border-box !important;
  border-radius: 9px !important;
  flex: 1 0 auto !important;
  white-space: nowrap !important;
}

.node-size-chip *,
.node-ratio-chip *,
.node-adv-chip * {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
}

.node-size-chip .val,
.node-ratio-chip .val,
.node-adv-chip .val {
  font-weight: 400 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
}

.light-canvas .node-size-chip .val,
.light-canvas .node-ratio-chip .val,
.light-canvas .node-adv-chip .val {
  font-weight: 400 !important;
  color: #1a1a1a !important;
  white-space: nowrap !important;
}

.node-size-chip .chevron,
.node-ratio-chip .chevron,
.node-adv-chip .chevron {
  font-size: 10px !important;
  line-height: 1 !important;
  margin-left: 2px !important;
  opacity: 0.6 !important;
  flex-shrink: 0 !important;
}

/* ================= 悬浮功能简介与微型动态演示浮窗 (Hover Tooltip & Live Motion Preview) ================= */
.node-preview-popover {
  position: fixed;
  z-index: 999999;
  width: 250px;
  background: rgba(18, 20, 29, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  transform: translateX(8px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  font-family: 'Outfit', 'PingFang SC', -apple-system, sans-serif;
}

.node-preview-popover.visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* 动效演示舞台区 (Live Motion Stage) - 放在最上方（标题上方） */
.npp-stage {
  width: 100%;
  height: 90px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.light-canvas .npp-stage {
  background: linear-gradient(135deg, rgba(241, 245, 249, 0.95), rgba(226, 232, 240, 0.9)) !important;
  border-color: rgba(203, 213, 225, 0.9) !important;
}

.light-canvas .pipeline-node {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(203, 213, 225, 0.85) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

.light-canvas .p-label {
  color: #334155 !important;
}

.npp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.npp-icon {
  display: none !important;
}

.npp-title {
  font-size: 13.5px;
  font-weight: 650;
  color: #f8fafc;
  letter-spacing: 0.02em;
}

.npp-tags {
  display: flex;
  gap: 5px;
  margin-bottom: 6px;
}

.npp-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.npp-desc {
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 2px;
}

/* 1. 多图上传管线传输新交互动效 (multi_upload) */
.demo-multi-pipeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  position: relative;
}

.pipeline-node {
  width: 66px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.p-node-header {
  display: flex;
  align-items: center;
  gap: 4px;
}

.p-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.p-dot.blue {
  background: #6366f1;
  box-shadow: 0 0 6px #6366f1;
}

.p-dot.purple {
  background: #a855f7;
  box-shadow: 0 0 6px #a855f7;
}

.p-label {
  font-size: 9px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.p-stack {
  position: relative;
  height: 32px;
  width: 100%;
}

.p-card {
  position: absolute;
  width: 28px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid rgba(99, 102, 241, 0.3);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(168, 85, 247, 0.15));
}

.p-card.c3 {
  top: 0;
  left: 12px;
  opacity: 0.5;
  transform: scale(0.88);
}

.p-card.c2 {
  top: 3px;
  left: 6px;
  opacity: 0.75;
  transform: scale(0.94);
}

.p-card.c1 {
  top: 6px;
  left: 0;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.45), rgba(168, 85, 247, 0.35));
  border-color: rgba(99, 102, 241, 0.6);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 1px;
}

.p-badge {
  font-size: 7px;
  font-weight: 700;
  background: #6366f1;
  color: #fff;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  line-height: 1;
}

.p-canvas {
  height: 32px;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(99, 102, 241, 0.12));
  border: 1px dashed rgba(168, 85, 247, 0.4);
  display: grid;
  place-items: center;
  animation: pCanvasPulse 2.4s infinite ease-in-out;
}

.p-canvas-spark {
  width: 15px;
  height: 15px;
  color: #c084fc;
  display: grid;
  place-items: center;
}

.p-canvas-spark svg {
  width: 14px;
  height: 14px;
  color: #c084fc;
  stroke: #c084fc;
}

@keyframes pCanvasPulse {

  0%,
  100% {
    border-color: rgba(168, 85, 247, 0.3);
    box-shadow: none;
  }

  50% {
    border-color: rgba(236, 72, 153, 0.8);
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.4);
  }
}

/* 连线区域与沿线依次移动的图片组 */
.pipeline-wire-box {
  flex: 1;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pipeline-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wire-packet {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  offset-path: path("M 10 24 C 45 4, 75 44, 110 24");
  offset-rotate: 0deg;
  opacity: 0;
  animation: wirePacketMove 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.wire-packet svg {
  width: 10px;
  height: 10px;
  stroke: #ffffff;
  fill: none;
}

.packet-1 {
  animation-delay: 0s;
}

.packet-2 {
  animation-delay: 0.7s;
}

.packet-3 {
  animation-delay: 1.4s;
}

@keyframes wirePacketMove {
  0% {
    offset-distance: 0%;
    opacity: 0;
    transform: scale(0.6);
  }

  10% {
    opacity: 1;
    transform: scale(1);
  }

  85% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    offset-distance: 100%;
    opacity: 0;
    transform: scale(0.5);
  }
}

/* 2. 单图上传微动效 (upload) */
.demo-upload-box {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  border: 1.5px dashed rgba(99, 102, 241, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: uploadPulse 2.5s ease-in-out infinite;
}

.demo-upload-icon {
  color: #6366f1;
  animation: uploadFloat 2.5s ease-in-out infinite;
}

.demo-ps-badge {
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #001e36;
  border: 1px solid #31a8ff;
  color: #31a8ff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 30, 54, 0.4);
}

@keyframes uploadPulse {

  0%,
  100% {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(99, 102, 241, 0.04);
  }

  50% {
    border-color: rgba(99, 102, 241, 0.8);
    background: rgba(99, 102, 241, 0.12);
  }
}

@keyframes uploadFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

/* 3. 提示词微动效 (prompt) */
.demo-prompt-box {
  width: 80%;
  height: 52px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  padding: 8px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.demo-prompt-line {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.15);
}

.demo-prompt-line:nth-child(1) {
  width: 70%;
  animation: typingLine1 3s ease-in-out infinite;
}

.demo-prompt-line:nth-child(2) {
  width: 45%;
  animation: typingLine2 3s ease-in-out infinite;
}

.demo-cursor {
  position: absolute;
  right: 12px;
  bottom: 8px;
  width: 2px;
  height: 12px;
  background: #6366f1;
  animation: cursorBlink 0.8s infinite;
}

@keyframes typingLine1 {

  0%,
  100% {
    width: 40%;
  }

  50% {
    width: 85%;
  }
}

@keyframes typingLine2 {

  0%,
  100% {
    width: 20%;
  }

  50% {
    width: 60%;
  }
}

@keyframes cursorBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* 4. 输出画廊 ZIP 打包管线传输新交互动效 (gallery) */
.demo-gallery-pipeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  position: relative;
}

.gallery-src {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(59, 130, 246, 0.3)) !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
}

.p-src-img {
  width: 15px;
  height: 15px;
  color: #c084fc;
  display: grid;
  place-items: center;
}

.p-src-img svg {
  width: 14px;
  height: 14px;
  color: #c084fc;
  stroke: #c084fc;
}

@keyframes pSrcImgPulse {

  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.7;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

.gal-packet {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(135deg, #3b82f6, #10b981);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  offset-path: path("M 10 24 C 45 4, 75 44, 110 24");
  offset-rotate: 0deg;
  opacity: 0;
  animation: galWirePacketMove 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.gal-packet svg {
  width: 10px;
  height: 10px;
  stroke: #ffffff;
  fill: none;
}

.gal-packet.packet-1 {
  animation-delay: 0s;
}

.gal-packet.packet-2 {
  animation-delay: 0.6s;
}

.gal-packet.packet-3 {
  animation-delay: 1.2s;
}

@keyframes galWirePacketMove {
  0% {
    offset-distance: 0%;
    opacity: 0;
    transform: scale(0.6);
  }

  10% {
    opacity: 1;
    transform: scale(1);
  }

  80% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    offset-distance: 100%;
    opacity: 0;
    transform: scale(0.5);
  }
}

.p-dot.green {
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

.p-zip-box {
  height: 32px;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(59, 130, 246, 0.12));
  border: 1px solid rgba(16, 185, 129, 0.4);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  animation: pZipPulse 2.5s infinite ease-in-out;
}

.zip-badge {
  font-size: 10px;
  font-weight: 850;
  color: #10b981;
  letter-spacing: 0.08em;
}

@keyframes pZipPulse {

  0%,
  100% {
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: none;
  }

  50% {
    border-color: rgba(52, 211, 153, 0.8);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
  }
}

/* 5. AI 绘图微动效 (draw) */
.demo-draw-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 85%;
}

.demo-node-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.demo-node-dot.p {
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid #6366f1;
  color: #818cf8;
}

.demo-node-dot.i {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid #10b981;
  color: #34d399;
}

.demo-draw-center {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, #6366f1, #10b981);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.5);
  animation: drawEnginePulse 2s ease-in-out infinite;
}

@keyframes drawEnginePulse {

  0%,
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
  }

  50% {
    transform: scale(1.1);
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.7);
  }
}

/* 6. LLM 对话微动效 (chat) */
.demo-chat-flow {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 80%;
}

.demo-chat-bubble {
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 10px;
}

.demo-chat-bubble.u {
  align-self: flex-end;
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(99, 102, 241, 0.4);
  color: #c7d2fe;
}

.demo-chat-bubble.ai {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  display: flex;
  gap: 3px;
  align-items: center;
}

.demo-chat-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #a78bfa;
  animation: chatDotPulse 1.2s infinite ease-in-out;
}

.demo-chat-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.demo-chat-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes chatDotPulse {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* 亮色模式适配 */
.light-canvas .node-preview-popover {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04);
}

.light-canvas .npp-title {
  color: #0f172a;
}

.light-canvas .npp-tag {
  background: rgba(241, 245, 249, 0.9);
  color: #475569;
  border-color: #cbd5e1;
}

.light-canvas .npp-desc {
  color: #475569;
}

.light-canvas .npp-stage {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.light-canvas .demo-prompt-box {
  background: #ffffff;
  border-color: #cbd5e1;
}

.light-canvas .demo-prompt-line {
  background: #cbd5e1;
}

.light-canvas .demo-chat-bubble.ai {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #334155;
}

/* ================= 输出画廊 (Output Gallery Node) ================= */
.node-gallery-card {
  position: absolute;
  min-width: 360px;
  background: var(--node-bg, #181824);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4);
  overflow: visible !important;
  box-sizing: border-box;
}

.node-gallery-card .node-head {
  border-top-left-radius: 13px;
  border-top-right-radius: 13px;
}

.gallery-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Outfit', sans-serif;
}

.gallery-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gallery-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Outfit', sans-serif;
}

.gallery-btn-zip {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
  font-weight: 600;
}

.gallery-btn-zip:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
  transform: translateY(-1px);
}

.gallery-btn-dl-all {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9);
}

.gallery-btn-dl-all:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* 输出画廊学习输出文库的【清空】按钮位置：右对齐 + 无框红色警示文字 */
.gallery-btn-clear {
  color: #ef4444 !important;
  background: transparent !important;
  border: none !important;
  margin-left: auto !important;
  padding: 6px 8px !important;
  font-weight: 500 !important;
}

.gallery-btn-clear:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #f87171 !important;
  border-radius: 6px !important;
}

.gallery-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  padding: 2px 2px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Outfit', sans-serif;
}

.gallery-count-label {
  font-weight: 700;
  color: #6366f1;
  font-size: 11.5px;
}

.gallery-drop-tip {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.45);
}

/* ================= 输出文库 (Doc Library Node) ================= */
.node-doc-library-card {
  position: absolute;
  min-width: 450px;
  background: rgba(22, 22, 26, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4);
  overflow: visible !important;
  box-sizing: border-box;
}

.node-doc-library-card .node-head {
  border-top-left-radius: 9px !important;
  border-top-right-radius: 9px !important;
}

.doc-library-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Outfit', sans-serif;
}

.doc-library-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.doc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Outfit', sans-serif;
}

/* 1. 一键复制：主视觉紫色/深蓝高亮渐变按钮 (对应输出画廊的 打包下载(ZIP) 按钮) */
.doc-btn-copy {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
  font-weight: 600;
}

.doc-btn-copy:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
  transform: translateY(-1px);
}

/* 2. TXT 导出：精致次级玻璃外框按钮 (对应输出画廊的 单独下载 按钮) */
.doc-btn-export {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9);
}

.doc-btn-export:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* 3. 清空：右对齐红色无边框警示按钮 */
.doc-btn-clear {
  color: #ef4444 !important;
  background: transparent !important;
  border: none !important;
  margin-left: auto !important;
  padding: 6px 8px !important;
  font-weight: 500 !important;
}

.doc-btn-clear:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #f87171 !important;
  border-radius: 6px !important;
}

/* 4. 信息状态栏 */
.doc-library-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  padding: 2px 2px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Outfit', sans-serif;
}

.doc-count-label {
  font-weight: 700;
  color: #6366f1;
  font-size: 11.5px;
}

.doc-drop-tip {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.45);
}

/* 5. 列表容器与空状态 */
.doc-library-list {
  min-height: 150px;
  max-height: 290px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.doc-library-list.is-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.4);
  padding: 36px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Outfit', sans-serif;
}

/* 6. 文案卡片条目 */
.doc-item-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 11px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.18s ease;
}

.doc-item-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(99, 102, 241, 0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.doc-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.doc-item-idx {
  font-weight: 800;
  color: #818cf8;
}

.doc-item-source {
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(165, 180, 252, 0.9);
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.25);
  padding: 2px 7px;
  border-radius: 5px;
}

.doc-item-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.doc-item-btn {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Outfit', sans-serif;
}

.doc-item-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.item-del-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.35);
}

.doc-item-text {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 140px;
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Outfit', sans-serif;
}

/* 亮色模式适配 (Light Theme) */
.light-canvas .node-gallery-card,
.light-canvas .node-doc-library-card {
  background: #ffffff !important;
  border-color: rgba(203, 213, 225, 0.9) !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08) !important;
}

.light-canvas .gallery-btn-zip,
.light-canvas .doc-btn-copy {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
}

.light-canvas .gallery-btn-dl-all,
.light-canvas .doc-btn-export {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

.light-canvas .gallery-btn-dl-all:hover,
.light-canvas .doc-btn-export:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.light-canvas .gallery-btn-clear,
.light-canvas .doc-btn-clear {
  color: #ef4444 !important;
}

.light-canvas .gallery-btn-clear:hover,
.light-canvas .doc-btn-clear:hover {
  background: rgba(239, 68, 68, 0.08) !important;
}

.light-canvas .gallery-count-label,
.light-canvas .doc-count-label {
  color: #4f46e5 !important;
}

.light-canvas .gallery-drop-tip,
.light-canvas .doc-drop-tip {
  color: #64748b !important;
}

.light-canvas .doc-library-list.is-empty {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}

.light-canvas .doc-item-card {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

.light-canvas .doc-item-card:hover {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
}

.light-canvas .doc-item-source {
  background: rgba(99, 102, 241, 0.08) !important;
  border-color: rgba(99, 102, 241, 0.2) !important;
  color: #4f46e5 !important;
}

.light-canvas .doc-item-text {
  color: #1e293b !important;
}

color: #1e293b;
}

.light-canvas .doc-library-info-bar {
  color: #64748b;
}

/* ==================== 统一弹窗与图三标准按钮样式 (System Modal & Uniform Buttons) ==================== */
.rx-unified-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 10, 16, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.rx-unified-modal-container {
  background: rgba(20, 20, 28, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  transform: scale(0.95);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.rx-unified-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.rx-unified-modal-header .modal-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #f8fafc;
}

.rx-unified-modal-header .modal-icon-symbol {
  color: #818cf8;
  font-size: 15px;
  font-weight: bold;
}

.rx-unified-modal-header .modal-close-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.rx-unified-modal-header .modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.rx-unified-modal-input-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(12, 12, 18, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 0 12px;
  height: 42px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rx-unified-modal-input-box:focus-within {
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: none !important;
}

.rx-unified-modal-input-box .input-prefix-symbol {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: bold;
}

.rx-unified-modal-input-box input {
  flex: 1;
  width: 100%;
  background: transparent;
  border: none;
  outline: none !important;
  box-shadow: none !important;
  color: #f8fafc;
  font-size: 13px;
  font-family: inherit;
  font-weight: 400;
}

.rx-unified-modal-input-box input:focus,
.rx-unified-modal-input-box input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.rx-unified-modal-textarea {
  width: 100%;
  height: 100%;
  background: rgba(12, 12, 18, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 14px;
  color: #f8fafc;
  font-size: 13.5px;
  line-height: 1.6;
  resize: none;
  outline: none !important;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rx-unified-modal-textarea:focus,
.rx-unified-modal-textarea:focus-visible {
  border-color: rgba(255, 255, 255, 0.22) !important;
  outline: none !important;
  box-shadow: none !important;
}

.rx-unified-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 15, 22, 0.4);
}

/* 图三风格：主高亮按钮 (Primary Button) */
.rx-btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  padding: 7px 18px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.rx-btn-primary:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5) !important;
  transform: translateY(-1px) !important;
}

/* 图三风格：次级玻璃按钮 (Secondary Button / Cancel Button) */
.rx-btn-secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  padding: 7px 16px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.rx-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

.modal-sub-tip {
  color: rgba(255, 255, 255, 0.6);
}

/* ==================== 提示词节点外部下方连线变量卡片 (Connected Var Chips) ==================== */
.node-connected-vars {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
  z-index: 15 !important;
  pointer-events: auto !important;
}

.connected-var-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  height: 18px !important;
  line-height: 1 !important;
  padding: 0 5px !important;
  border-radius: 3px !important;
  font-size: 10.5px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 500 !important;
  box-sizing: border-box !important;
  user-select: none !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #f8fafc !important;
  margin: 0 2px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  white-space: nowrap !important;
  cursor: grab;
  transition: all 0.18s ease;
}

.connected-var-chip:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

.connected-var-chip:active {
  cursor: grabbing;
  transform: scale(0.96);
}

.blue-var-tag,
.var-tag-blue {
  display: inline-block !important;
  vertical-align: baseline !important;
  line-height: 1.15 !important;
  padding: 2.5px 5px 1px 5px !important;
  border-radius: 3px !important;
  font-size: 11px !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  box-sizing: border-box !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #f8fafc !important;
  margin: 0 4px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  white-space: nowrap !important;
}

.connected-var-chip .chip-hash,
.blue-var-tag .chip-hash,
.var-tag-blue .chip-hash {
  color: #818cf8 !important;
  font-weight: bold !important;
  font-size: inherit !important;
  margin-right: 1px !important;
}

.connected-var-chip .chip-text,
.blue-var-tag .chip-text,
.var-tag-blue .chip-text {
  color: #f8fafc !important;
  font-weight: 500 !important;
  font-size: inherit !important;
}

/* ==================== 浅色/白色主题全面高质感美化 (Light Theme Optimization) ==================== */
.light-canvas .rx-unified-modal-overlay,
body.light-canvas .rx-unified-modal-overlay,
html.light-canvas .rx-unified-modal-overlay {
  background: rgba(15, 23, 42, 0.35) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.light-canvas .rx-unified-modal-container,
body.light-canvas .rx-unified-modal-container,
html.light-canvas .rx-unified-modal-container {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}

.light-canvas .rx-unified-modal-header,
body.light-canvas .rx-unified-modal-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: #ffffff !important;
}

.light-canvas .rx-unified-modal-header .modal-title-group,
body.light-canvas .rx-unified-modal-header .modal-title-group {
  color: #0f172a !important;
}

.light-canvas .rx-unified-modal-header .modal-icon-symbol,
body.light-canvas .rx-unified-modal-header .modal-icon-symbol {
  color: #6366f1 !important;
}

.light-canvas .rx-unified-modal-header .modal-title-group svg,
body.light-canvas .rx-unified-modal-header .modal-title-group svg {
  stroke: #6366f1 !important;
}

.light-canvas .rx-unified-modal-header .modal-close-btn,
body.light-canvas .rx-unified-modal-header .modal-close-btn {
  color: #64748b !important;
}

.light-canvas .rx-unified-modal-header .modal-close-btn:hover,
body.light-canvas .rx-unified-modal-header .modal-close-btn:hover {
  background: rgba(15, 23, 42, 0.06) !important;
  color: #0f172a !important;
}

.light-canvas .modal-sub-tip,
body.light-canvas .modal-sub-tip {
  color: #64748b !important;
}

.light-canvas .rx-unified-modal-input-box,
body.light-canvas .rx-unified-modal-input-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) inset !important;
}

.light-canvas .rx-unified-modal-input-box:focus-within,
body.light-canvas .rx-unified-modal-input-box:focus-within {
  background: #ffffff !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

.light-canvas .rx-unified-modal-input-box .input-prefix-symbol,
body.light-canvas .rx-unified-modal-input-box .input-prefix-symbol {
  color: #6366f1 !important;
}

.light-canvas .rx-unified-modal-input-box input,
body.light-canvas .rx-unified-modal-input-box input {
  color: #0f172a !important;
}

.light-canvas .rx-unified-modal-input-box input::placeholder,
body.light-canvas .rx-unified-modal-input-box input::placeholder {
  color: #94a3b8 !important;
}

.light-canvas .rx-unified-modal-textarea,
body.light-canvas .rx-unified-modal-textarea {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) inset !important;
}

.light-canvas .rx-unified-modal-textarea:focus,
body.light-canvas .rx-unified-modal-textarea:focus {
  background: #ffffff !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

.light-canvas .rx-unified-modal-textarea::placeholder,
body.light-canvas .rx-unified-modal-textarea::placeholder {
  color: #94a3b8 !important;
}

.light-canvas .rx-unified-modal-footer,
body.light-canvas .rx-unified-modal-footer {
  background: #f8fafc !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.light-canvas .rx-btn-secondary,
body.light-canvas .rx-btn-secondary {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.light-canvas .rx-btn-secondary:hover,
body.light-canvas .rx-btn-secondary:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

.light-canvas .rx-btn-primary,
body.light-canvas .rx-btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
}

.light-canvas .rx-btn-primary:hover,
body.light-canvas .rx-btn-primary:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45) !important;
  transform: translateY(-1px) !important;
}

/* 提示词卡片内 蓝色变量标签芯片在白色主题下的美化（字体、字号、字重与黑色主题严格保持一致） */
.light-canvas .blue-var-tag,
.light-canvas .var-tag-blue,
body.light-canvas .blue-var-tag,
body.light-canvas .var-tag-blue {
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  background: rgba(99, 102, 241, 0.1) !important;
  border: 1px solid rgba(99, 102, 241, 0.28) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.light-canvas .blue-var-tag .chip-hash,
.light-canvas .var-tag-blue .chip-hash,
body.light-canvas .blue-var-tag .chip-hash,
body.light-canvas .var-tag-blue .chip-hash {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: bold !important;
  color: #818cf8 !important;
}

.light-canvas .blue-var-tag .chip-text,
.light-canvas .var-tag-blue .chip-text,
body.light-canvas .blue-var-tag .chip-text,
body.light-canvas .var-tag-blue .chip-text {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 500 !important;
  color: #0f172a !important;
}

/* 提示词卡片下方 连线变量卡片在白色主题下的美化（字体、字号、字重与黑色主题严格保持一致） */
.light-canvas .node-connected-vars,
body.light-canvas .node-connected-vars {
  border-top-color: rgba(0, 0, 0, 0.06) !important;
}

.light-canvas .connected-var-chip,
body.light-canvas .connected-var-chip {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  background: rgba(99, 102, 241, 0.08) !important;
  border: 1px solid rgba(99, 102, 241, 0.22) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.light-canvas .connected-var-chip:hover,
body.light-canvas .connected-var-chip:hover {
  background: rgba(99, 102, 241, 0.16) !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
  box-shadow: 0 3px 8px rgba(99, 102, 241, 0.18) !important;
}

.light-canvas .connected-var-chip .chip-hash,
body.light-canvas .connected-var-chip .chip-hash {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: bold !important;
  color: #818cf8 !important;
}

.light-canvas .connected-var-chip .chip-text,
body.light-canvas .connected-var-chip .chip-text {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 500 !important;
  color: #0f172a !important;
}

/* 变量卡片顶部标签与悬浮控制条在白色主题下的美化（字体、字号、字重与黑色主题严格保持一致，色彩明亮透澈） */
.light-canvas .var-top-tag,
body.light-canvas .var-top-tag {
  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif !important;
  font-weight: 400 !important;
  font-size: 12.5px !important;
  color: #0095ff !important;
  letter-spacing: 0.01em;
}

.light-canvas .var-top-tag:hover,
body.light-canvas .var-top-tag:hover {
  color: #38bdf8 !important;
}

.light-canvas .node-float-panel,
.light-canvas .node-var-float-panel,
body.light-canvas .node-float-panel,
body.light-canvas .node-var-float-panel {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}

.light-canvas .node-prompt-float-panel,
body.light-canvas .node-prompt-float-panel,
.light-canvas .node .node-prompt-float-panel,
body.light-canvas .node .node-prompt-float-panel,
.light-canvas .node.selected .node-prompt-float-panel,
body.light-canvas .node.selected .node-prompt-float-panel,
.light-canvas .node:hover .node-prompt-float-panel,
body.light-canvas .node:hover .node-prompt-float-panel {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  outline: none !important;
}

.light-canvas .node-var-float-panel .var-name-chip-btn,
body.light-canvas .node-var-float-panel .var-name-chip-btn {
  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #0095ff !important;
}

.light-canvas .node-var-float-panel .var-name-chip-btn:hover,
body.light-canvas .node-var-float-panel .var-name-chip-btn:hover {
  color: #38bdf8 !important;
}

.light-canvas .node-var-float-panel .var-divider,
body.light-canvas .node-var-float-panel .var-divider {
  background: rgba(0, 0, 0, 0.1) !important;
}

.light-canvas .node-var-float-panel .var-action-btn,
body.light-canvas .node-var-float-panel .var-action-btn {
  color: #64748b !important;
}

.light-canvas .node-prompt-float-panel .var-action-btn,
body.light-canvas .node-prompt-float-panel .var-action-btn {
  color: #64748b !important;
  border-radius: 50% !important;
}

.light-canvas .node-var-float-panel .var-action-btn:hover,
body.light-canvas .node-var-float-panel .var-action-btn:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #0095ff !important;
}

.light-canvas .node-prompt-float-panel .var-action-btn:hover,
body.light-canvas .node-prompt-float-panel .var-action-btn:hover {
  background: rgba(0, 0, 0, 0.07) !important;
  color: #0095ff !important;
  border-radius: 50% !important;
}