/* ============================================================
   显影 · AI 创作工作台
   设计：浅色工作台 —— 雾白背景 + 自动化蓝色强调
   ============================================================ */

:root {
  --bg:        #eef3fb;
  --bg-2:      #f8fbff;
  --panel:     #ffffff;
  --panel-2:   #f5f9ff;
  --line:      #d8e3f2;
  --line-soft: #e6eef8;
  --text:      #1f2a44;
  --muted:     #5d6b82;
  --faint:     #8795aa;
  --amber:     #2f62d3;
  --amber-hi:  #155bd5;
  --amber-soft: rgba(47, 98, 211, .12);
  --jade:      #19835f;
  --red:       #c33f4c;

  --font-display: "Chakra Petch", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r-card: 12px;
  --r-ctl: 8px;
  --shadow: 0 12px 32px rgba(42, 68, 98, .14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* 显式覆盖带 display 的类，保证 hidden 属性始终生效 */
[hidden] { display: none !important; }

html { color-scheme: light; }

body {
  background:
    linear-gradient(180deg, rgba(248, 251, 254, .76), rgba(242, 246, 250, .9)),
    url("../images/hl-aigen-bg-v2.png") center top / cover no-repeat fixed,
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
}

.mono { font-family: var(--font-mono); }

svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; cursor: pointer; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }

::selection { background: rgba(47, 98, 211, .2); }

/* ---------------- 顶栏 ---------------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 50;
margin-top: 30px;

}

.brand { display: flex; align-items: center; gap: 10px; min-width: 190px; }

.brand-mark {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  color: var(--amber);
}
.brand-mark svg { width: 20px; height: 20px; }

.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text strong { font-family: var(--font-display); font-size: 16px; letter-spacing: .14em; }
.brand-text small {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--faint);
}

.safelight {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px 2px rgba(47, 98, 211, .32);
  animation: safelight-pulse 2.6s ease-in-out infinite;
  margin-left: 2px;
}
@keyframes safelight-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* 模式切换 */

.mode-switch {
  position: relative;
  display: flex;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
  margin-inline: auto;
  gap: 2px;
  overflow-x: auto;
}

.mode-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  border-radius: 7px;
  background: linear-gradient(160deg, rgba(47, 98, 211, .16), rgba(47, 98, 211, .06));
  border: 1px solid rgba(47, 98, 211, .38);
  transition: transform .28s cubic-bezier(.55, .1, .2, 1.2);
  display: none;
}

.mode-btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 22px;
  border-radius: 7px;
  color: var(--muted);
  font-weight: 500;
  transition: color .2s;
  white-space: nowrap;
}
.mode-btn svg { width: 16px; height: 16px; }
.mode-btn.is-active { color: var(--amber-hi); background: var(--amber-soft); border: 1px solid rgba(47, 98, 211, .28); }
.mode-btn:not(.is-active):hover { color: var(--text); }

/* 顶栏右侧 */

.topbar-right { display: flex; align-items: center; gap: 14px; min-width: 190px; margin-left: auto; justify-content: flex-end; }
.btn-top-action { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: rgba(255,255,255,.7); font-size: 12px; white-space: nowrap; }
.btn-top-action:hover { color: var(--amber-hi); border-color: rgba(47,98,211,.4); background: var(--amber-soft); }
.btn-top-action svg { width: 14px; height: 14px; }
.top-task-badge { min-width: 17px; padding: 1px 4px; border-radius: 999px; color: #fff; background: var(--amber); font: 600 10px var(--font-mono); text-align: center; }

.studio-nav {
  max-width: 1440px;
  margin: 14px auto 0;
  padding: 0 22px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  display: flex;
  justify-content: center;
}
.studio-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.76);
  color: var(--muted);
  white-space: nowrap;
  transition: all .15s;
}
.studio-nav-btn svg { width: 15px; height: 15px; }
.studio-nav-btn:hover, .studio-nav-btn.is-active { color: var(--amber-hi); border-color: rgba(47,98,211,.4); background: var(--amber-soft); }

/* 模型选择器 */

.model-picker { position: relative; }

.mp-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  transition: border-color .2s, background .2s;
  min-width: 200px;
  text-align: left;
}
.mp-btn:hover, .mp-btn[aria-expanded="true"] { border-color: rgba(47, 98, 211, .48); background: var(--panel-2); }

.mp-icon { color: var(--amber); width: 17px; height: 17px; }

.mp-current { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
.mp-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-tag { font-size: 10.5px; color: var(--faint); letter-spacing: .06em; }

.mp-caret { width: 14px; height: 14px; color: var(--faint); transition: transform .2s; }
.mp-btn[aria-expanded="true"] .mp-caret { transform: rotate(180deg); }

.mp-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 296px;
  max-height: 380px;
  overflow-y: auto;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 60;
}

.mp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  text-align: left;
  transition: background .15s;
}
.mp-item:hover { background: rgba(38, 54, 74, .055); }
.mp-item.is-selected { background: var(--amber-soft); }

.mp-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.mp-item-name { font-weight: 600; font-size: 13px; }
.mp-item-vendor { font-size: 11px; color: var(--faint); }

.mp-item-tag {
  font-size: 10.5px;
  color: var(--amber);
  border: 1px solid rgba(47, 98, 211, .35);
  border-radius: 20px;
  padding: 1px 8px;
  white-space: nowrap;
}

.mp-item-cost {
  font-size: 10.5px;
  color: var(--amber-hi);
  white-space: nowrap;
}

.mp-item-check { width: 15px; height: 15px; color: var(--amber); opacity: 0; }
.mp-item.is-selected .mp-item-check { opacity: 1; }

/* 连接状态 */

.conn {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 5px 12px;
  background: var(--panel);
  white-space: nowrap;
}
.conn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.conn.is-mock .conn-dot { background: var(--amber); box-shadow: 0 0 6px rgba(47, 98, 211, .4); }
.conn.is-real .conn-dot { background: var(--jade); box-shadow: 0 0 6px rgba(25, 131, 95, .38); }
.conn.is-error .conn-dot { background: var(--red); }

/* ---------------- 主体布局 ---------------- */

.workbench {
  display: grid;
  grid-template-columns: 372px minmax(0, 1fr);
  gap: 18px;
  max-width: 1440px;
  margin: 0 auto;
  padding-top: 18px;
  padding-bottom: 20px;
  align-items: start;
}

.workbench-subnav { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 9px 14px; border: 1px solid var(--line-soft); border-radius: var(--r-card); background: rgba(255,255,255,.82); box-shadow: 0 8px 24px rgba(42,68,98,.06); }
.workbench-subnav-title { color: var(--text); font: 600 15px var(--font-display); letter-spacing: .04em; white-space: nowrap; }
.workbench-subnav .mode-switch { margin: 0; }

.controls { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 76px; }
.stagecol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* 卡片 */

.hl-aigen-card {
  background: linear-gradient(175deg, rgba(255, 255, 255, .95), rgba(248, 251, 254, .92));
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  padding: 16px;
  box-shadow: 0 8px 24px rgba(42, 68, 98, .07);
  backdrop-filter: blur(12px);
}

.hl-aigen-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.hl-aigen-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
}
.hl-aigen-card-title::before {
  content: "";
  width: 10px; height: 2.5px;
  background: var(--amber);
  border-radius: 2px;
  flex: none;
}
.hl-aigen-card-title em { font-style: normal; font-size: 9.5px; letter-spacing: .24em; color: var(--faint); margin-top: 2px; }
.title-icon { width: 15px; height: 15px; color: var(--muted); }

.hl-aigen-card-note { font-size: 11px; color: var(--faint); }

/* 提示词 */

.prompt-input {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.65;
  padding: 11px 12px;
  resize: vertical;
  transition: border-color .2s;
}
.prompt-input:focus { outline: none; border-color: rgba(47, 98, 211, .55); }
.prompt-input::placeholder { color: var(--faint); }

.prompt-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 7px;
}
.prompt-count { font-size: 11px; color: var(--faint); }

.examples { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }

.example-chip {
  font-size: 11.5px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 20px;
  padding: 4px 11px;
  transition: color .15s, border-color .15s, background .15s;
}
.example-chip:hover { color: var(--amber-hi); border-color: rgba(47, 98, 211, .5); background: var(--amber-soft); }

/* 负向提示词 */

.negative { margin-top: 12px; border-top: 1px solid var(--line-soft); padding-top: 10px; }

.neg-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12.5px;
  padding: 3px 0;
  transition: color .15s;
}
.neg-toggle:hover { color: var(--text); }
.neg-caret { width: 14px; height: 14px; transition: transform .2s; }
.neg-toggle[aria-expanded="true"] .neg-caret { transform: rotate(180deg); }
.neg-state { font-size: 11px; color: var(--faint); margin-left: auto; }
.neg-input { margin-top: 9px; }

/* 参数区 */

.param-block { display: flex; flex-direction: column; gap: 13px; }
.compact-input { min-height: 74px; resize: vertical; }
.text-input {
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  padding: 8px 10px;
  background: var(--bg-2);
  color: var(--text);
  font: inherit;
}
.text-input:focus { outline: none; border-color: rgba(47,98,211,.55); }

.param-row { display: flex; flex-direction: column; gap: 7px; }
.param-row + .param-row { margin-top: 0; }
.param-block + .seed-row { margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 13px; }

.param-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .04em;
}
.param-label output { color: var(--amber-hi); font-size: 12px; }
.label-sub { color: var(--faint); font-size: 11px; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }

.chip {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  padding: 5px 12px;
  background: var(--bg-2);
  transition: all .15s;
  white-space: nowrap;
}
.chip:hover { border-color: var(--faint); color: var(--text); }
.chip.is-active {
  color: var(--amber-hi);
  border-color: rgba(47, 98, 211, .55);
  background: var(--amber-soft);
}

/* 数量步进器 */

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--bg-2);
  overflow: hidden;
  align-self: flex-start;
}
.stepper button {
  width: 32px; height: 30px;
  color: var(--muted);
  font-size: 15px;
  transition: background .15s, color .15s;
}
.stepper button:hover:not(:disabled) { background: var(--panel-2); color: var(--amber-hi); }
.stepper button:disabled { opacity: .35; cursor: not-allowed; }
.stepper span { min-width: 34px; text-align: center; font-size: 13px; }

/* 滑杆 */

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--amber) var(--fill, 50%), var(--line) var(--fill, 50%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--amber-hi);
  border: 2px solid var(--bg);
  margin-top: -5px;
  box-shadow: 0 0 0 3px rgba(47, 98, 211, .16);
  transition: transform .15s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--amber); }
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--amber-hi);
  border: 2px solid var(--bg);
}

/* 种子 */

.seed-group { display: flex; align-items: center; gap: 8px; }

#seed {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  color: var(--text);
  font-size: 12.5px;
  padding: 6px 10px;
  min-width: 0;
  transition: border-color .2s;
}
#seed:focus { outline: none; border-color: rgba(47, 98, 211, .55); }

.btn-icon {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--bg-2);
  color: var(--muted);
  transition: all .15s;
}
.btn-icon:hover { color: var(--amber-hi); border-color: rgba(47, 98, 211, .5); background: var(--amber-soft); }
.btn-icon svg { width: 16px; height: 16px; }

.seed-lock {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.seed-lock input { accent-color: var(--amber); cursor: pointer; }

/* 首帧上传 */

.frame-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px dashed var(--line);
  border-radius: var(--r-ctl);
  background: var(--bg-2);
  padding: 10px 12px;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
  min-height: 44px;
}
.frame-drop:hover { border-color: rgba(47, 98, 211, .5); color: var(--text); }
.frame-drop.has-frame { border-style: solid; border-color: rgba(47, 98, 211, .4); }
.frame-drop svg { width: 16px; height: 16px; }
.frame-drop-text { font-size: 12.5px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame-drop-thumb {
  width: 34px; height: 34px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.frame-clear {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: var(--faint);
  transition: all .15s;
}
.frame-clear:hover { color: var(--red); background: rgba(195, 63, 76, .1); }
.frame-clear svg { width: 13px; height: 13px; }

/* 生成按钮 */

.generate-wrap { display: flex; flex-direction: column; gap: 8px; }
.generate-cost { display: flex; align-items: baseline; gap: 5px; min-height: 24px; color: var(--muted); font-size: 12px; }
.generate-cost strong { color: var(--amber-hi); font: 600 18px var(--font-mono); }
.generate-cost em { font-style: normal; color: var(--faint); }
.generate-cost small { margin-left: auto; color: var(--faint); }
.btn-prompt-assist { padding: 5px 8px; }
.btn-prompt-assist svg { width: 13px; height: 13px; }

.btn-generate {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #ffffff;
  background: linear-gradient(160deg, #5d8deb, var(--amber) 55%, #155bd5);
  box-shadow: 0 6px 22px rgba(47, 98, 211, .24), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .12s, box-shadow .2s, filter .2s;
  overflow: hidden;
}
.btn-generate:hover:not(:disabled) { filter: brightness(1.04); box-shadow: 0 8px 28px rgba(47, 98, 211, .34), inset 0 1px 0 rgba(255,255,255,.5); }
.btn-generate:active:not(:disabled) { transform: translateY(1px); }
.btn-generate:disabled { filter: saturate(.55) brightness(.82); cursor: wait; }

.btn-generate .gen-icon { width: 18px; height: 18px; stroke-width: 2; }
.btn-generate .gen-kbd {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .8);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 5px;
  padding: 2px 6px;
  font-weight: 500;
}
.btn-generate.is-running .gen-kbd { display: none; }
.btn-generate.is-running::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: gen-sheen 1.4s ease-in-out infinite;
}
@keyframes gen-sheen { to { transform: translateX(100%); } }

.generate-hint { font-size: 11.5px; color: var(--faint); text-align: center; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  padding: 6px 12px;
  background: var(--bg-2);
  transition: all .15s;
}
.btn-ghost svg { width: 14px; height: 14px; }
.btn-ghost:hover { color: var(--text); border-color: var(--faint); background: var(--panel-2); }
.btn-danger-ghost:hover { color: var(--red); border-color: rgba(195, 63, 76, .45); background: rgba(195, 63, 76, .08); }

/* ---------------- 显影台 ---------------- */

.hl-aigen-stage-card { display: flex; flex-direction: column; padding-bottom: 14px; }

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

.stage-status {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .16em;
  padding: 3px 11px;
  border-radius: 20px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--bg-2);
  transition: all .25s;
}
.stage-status[data-state="running"] { color: var(--amber-hi); border-color: rgba(47, 98, 211, .5); background: var(--amber-soft); }
.stage-status[data-state="done"] { color: var(--jade); border-color: rgba(25, 131, 95, .38); background: rgba(25, 131, 95, .08); }
.stage-status[data-state="error"] { color: var(--red); border-color: rgba(195, 63, 76, .45); background: rgba(195, 63, 76, .08); }

.stage-progress { height: 2.5px; background: var(--line-soft); border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
.stage-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--amber), var(--amber-hi));
  transition: width .25s linear;
}

.stage {
  position: relative;
  min-height: 430px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(47, 98, 211, .07), transparent 70%),
    rgba(238, 243, 251, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.stage-empty, .stage-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 30px;
}
.stage-empty svg, .stage-error svg { width: 42px; height: 42px; color: var(--faint); stroke-width: 1.4; margin-bottom: 4px; }
.stage-error svg { color: var(--red); }
.empty-title, .error-title { font-size: 15px; font-weight: 600; }
.empty-sub, .error-sub { font-size: 12.5px; color: var(--muted); max-width: 300px; }

.stage-running { text-align: center; z-index: 2; }
.running-pct {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  color: var(--amber-hi);
  text-shadow: 0 0 26px rgba(255, 178, 36, .4);
  line-height: 1.1;
}
.running-phase { margin-top: 6px; font-size: 13px; color: var(--muted); letter-spacing: .2em; }

/* 显影光束：生成中的签名动效 */
.stage[data-state="running"]::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 90px;
  left: -10%;
  background: linear-gradient(90deg, transparent, rgba(47, 98, 211, .08), rgba(93, 141, 235, .2), rgba(47, 98, 211, .08), transparent);
  animation: beam-sweep 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
  z-index: 1;
}
@keyframes beam-sweep { to { left: 110%; } }

.stage-result { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 14px; }
.stage-result img, .stage-result video, .stage-result audio {
  max-width: 100%;
  max-height: 560px;
  border-radius: 8px;
  box-shadow: 0 14px 44px rgba(42, 68, 98, .18), 0 0 0 1px var(--line);
  background: #ffffff;
}
.stage-result audio { width: min(520px, 90%); }

.demo-note {
  position: absolute;
  left: 12px; bottom: 12px;
  z-index: 3;
  font-size: 11px;
  color: var(--amber-hi);
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(47, 98, 211, .35);
  border-radius: 6px;
  padding: 4px 10px;
  backdrop-filter: blur(4px);
}

.stage-meta {
  margin-top: 11px;
  font-size: 11.5px;
  color: var(--faint);
  letter-spacing: .03em;
  min-height: 18px;
  word-break: break-all;
}

.stage-actions { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }

/* ---------------- 历史 ---------------- */

.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
}

.history-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--bg-2);
  cursor: pointer;
  padding: 0;
  transition: border-color .15s, transform .15s;
}
.history-item:hover { border-color: var(--faint); transform: translateY(-2px); }
.history-item.is-current { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.history-item-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.history-item video { background: #e9eff5; }
.history-audio-media { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--amber-hi); background: linear-gradient(145deg, rgba(47,98,211,.12), rgba(255,255,255,.88)); }
.history-audio-media svg { width: 34px; height: 34px; }
.history-audio-media small { color: var(--muted); font-size: 11px; }
.history-item-play {
  position: absolute;
  left: 50%; top: 50%;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  color: var(--amber);
  pointer-events: none;
}
.history-item-play svg { width: 17px; height: 17px; margin-left: 2px; }

.history-item-type {
  position: absolute;
  top: 6px; left: 6px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, .88);
  color: var(--amber);
  backdrop-filter: blur(3px);
}
.history-item-type svg { width: 12px; height: 12px; }

.history-item-del {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, .88);
  color: var(--faint);
  opacity: 0;
  transition: opacity .15s, color .15s;
}
.history-item:hover .history-item-del, .history-item-del:focus-visible { opacity: 1; }
.history-item-del:hover { color: var(--red); }
.history-item-del svg { width: 12px; height: 12px; }

.history-empty { font-size: 12.5px; color: var(--faint); text-align: center; padding: 22px 0 10px; }

/* ---------------- 扩展工作空间 ---------------- */
.studio-panel {
  max-width: 1440px;
  margin: 18px auto 28px;
}
.studio-panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}
.studio-panel-head h2 { font-size: 24px; letter-spacing: .02em; margin-top: 2px; }
.studio-panel-head p { color: var(--muted); font-size: 13px; margin-top: 4px;max-width: 360px; }
.studio-kicker { color: var(--amber-hi); font: 600 10px var(--font-display); letter-spacing: .2em; }
.studio-panel-status { color: var(--faint); font-size: 12px; }
.studio-head-actions { display: flex; align-items: center; gap: 8px; min-width: 360px; }
.studio-head-actions .text-input { max-width: 220px; }
.tool-layout, .drama-layout, .canvas-layout { display: grid; gap: 14px; }
.tool-layout { grid-template-columns: 250px minmax(0, 1fr); }
.tool-catalog, .tool-editor, .scene-list, .scene-editor, .canvas-palette, .canvas-board, .canvas-inspector {
  background: rgba(255,255,255,.9);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  box-shadow: 0 8px 24px rgba(42,68,98,.07);
}
.tool-catalog { padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.tool-card { padding: 11px 12px; border: 1px solid transparent; border-radius: 9px; text-align: left; background: transparent; color: var(--muted); }
.tool-card:hover, .tool-card.is-active { border-color: rgba(47,98,211,.35); background: var(--amber-soft); color: var(--text); }
.tool-card strong, .tool-card small { display: block; }
.tool-card strong { font-size: 13px; }
.tool-card small { color: var(--faint); margin-top: 3px; line-height: 1.45; }
.tool-editor { padding: 20px; min-height: 380px; }
.tool-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tool-editor-head h3 { font-size: 20px; }
.tool-editor-head p { color: var(--muted); margin: 5px 0 14px; }
.tool-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; color: var(--amber-hi); font-size: 12px; white-space: nowrap; }
.tool-meta span { padding: 4px 8px; border-radius: 999px; background: var(--amber-soft); }
.tool-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 0 0 12px; }
.tool-option { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.tool-option select, .tool-option input { width: 100%; }
.voice-translate-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.voice-translate-controls .text-input { width: auto; min-width: 110px; }
.audio-advanced-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.audio-advanced-controls label { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
.audio-advanced-controls .text-input { width: 78px; padding: 7px 8px; }
.audio-advanced-controls small { color: var(--faint); }
.language-arrow { color: var(--faint); }
.check-line { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
.tool-upload { min-height: 108px; display: flex; align-items: center; justify-content: center; gap: 9px; position: relative; border: 1px dashed var(--line); border-radius: 10px; background: var(--bg-2); color: var(--muted); cursor: pointer; margin-bottom: 12px; }
.tool-upload:hover { border-color: rgba(47,98,211,.5); color: var(--text); }
.tool-upload.has-image { border-style: solid; }
.tool-upload img { max-height: 88px; max-width: 160px; object-fit: contain; border-radius: 7px; }
.tool-upload button { position: absolute; right: 8px; top: 8px; color: var(--faint); }
.tool-actions { margin-top: 12px; max-width: 250px; }
.tool-result { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.tool-result img, .tool-result video, .tool-result audio { max-width: 100%; border-radius: 8px; }
.project-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; }
.project-toolbar { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.project-toolbar .search-input { max-width: 300px; }
.project-status-filter { width: auto; min-width: 118px; }
.project-card { min-width: 170px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.84); text-align: left; }
.project-card:hover, .project-card.is-active { border-color: rgba(47,98,211,.5); background: var(--amber-soft); }
.project-card strong, .project-card small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-card small { color: var(--faint); margin-top: 4px; }
.drama-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 112px auto; align-items: start; gap: 9px; margin-bottom: 12px; }
.drama-overview .prompt-input { min-height: 68px; }
.drama-overview .btn-ghost { min-height: 42px; }
.project-state-field { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.project-state-field .text-input { width: 100%; }
.drama-layout { grid-template-columns: 250px minmax(0,1fr); }
.scene-list { padding: 12px; }
.subhead { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; margin-bottom: 9px; }
.scene-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px; border-radius: 8px; text-align: left; color: var(--muted); }
.scene-item:hover, .scene-item.is-active { color: var(--text); background: var(--amber-soft); }
.scene-item small { color: var(--faint); }
.scene-editor { padding: 18px; }
.scene-editor-head { display: flex; justify-content: space-between; color: var(--faint); margin-bottom: 12px; }
.scene-fields { display: grid; gap: 9px; }
.duration-field { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.duration-field .text-input { width: 90px; }
.scene-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.scene-media { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.scene-media img, .scene-media video { max-width: 48%; max-height: 220px; border-radius: 8px; box-shadow: 0 4px 14px rgba(42,68,98,.12); }
.scene-media audio { width: 100%; }
.canvas-layout { grid-template-columns: 160px minmax(0,1fr) 260px; min-height: 460px; }
.canvas-palette, .canvas-inspector { padding: 12px; }
.palette-btn { display: flex; align-items: center; gap: 7px; width: 100%; padding: 10px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); text-align: left; }
.palette-btn:hover { color: var(--amber-hi); background: var(--amber-soft); border-color: rgba(47,98,211,.3); }
.palette-btn svg { width: 15px; height: 15px; }
.canvas-board { position: relative; min-height: 460px; min-width: 720px; overflow: auto; padding: 18px; background: radial-gradient(circle at 10% 10%, rgba(47,98,211,.08) 1px, transparent 1px) 0 0/22px 22px, rgba(248,251,255,.9); }
.canvas-edges { position: absolute; left: 0; top: 0; z-index: 1; min-width: 720px; min-height: 460px; overflow: visible; color: var(--amber); pointer-events: none; }
.canvas-edge { fill: none; stroke: var(--amber); stroke-width: 2.2; opacity: .76; pointer-events: stroke; cursor: pointer; marker-end: url(#canvasArrow); }
.canvas-edge:hover { stroke: var(--amber-hi); stroke-width: 3; opacity: 1; }
.canvas-edge.is-preview { stroke-dasharray: 7 6; opacity: .52; pointer-events: none; marker-end: none; }
.canvas-empty { color: var(--faint); text-align: center; padding-top: 180px; }
.canvas-node { position: absolute; z-index: 2; width: 210px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.96); box-shadow: 0 8px 18px rgba(42,68,98,.1); cursor: grab; user-select: none; }
.canvas-node.is-dragging { cursor: grabbing; opacity: .9; z-index: 3; }
.canvas-node:hover, .canvas-node.is-active { border-color: rgba(47,98,211,.55); box-shadow: 0 0 0 2px rgba(47,98,211,.12); }
.canvas-node small, .canvas-node strong { display: block; }
.canvas-node small { color: var(--amber-hi); font-size: 10px; text-transform: uppercase; }
.canvas-node strong { margin: 4px 0; }
.canvas-node p { color: var(--muted); font-size: 12px; max-height: 52px; overflow: hidden; }
.canvas-node img, .canvas-node video { width: 100%; max-height: 130px; object-fit: cover; border-radius: 6px; margin-top: 8px; }
.canvas-node audio { width: 100%; margin-top: 8px; }
.canvas-port { position: absolute; z-index: 4; width: 12px; height: 12px; padding: 0; border: 2px solid var(--panel); border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 1px var(--line), 0 2px 7px rgba(47,98,211,.28); cursor: crosshair; touch-action: none; }
.canvas-port-in { left: -7px; top: 50%; transform: translateY(-50%); }
.canvas-port-out { right: -7px; top: 50%; transform: translateY(-50%); }
.canvas-port:hover { background: var(--amber-hi); box-shadow: 0 0 0 3px var(--amber-soft); transform: translateY(-50%) scale(1.2); }
body.is-canvas-connecting .canvas-port-in { box-shadow: 0 0 0 3px var(--amber-soft); }
.canvas-inspector { display: flex; flex-direction: column; gap: 9px; }
.canvas-inspector .btn-generate { margin-top: auto; }
.canvas-delete-node { justify-content: center; }

/* 模板、作品库、任务中心 */
.library-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 14px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.78); }
.filter-chip:hover, .filter-chip.is-active { color: var(--amber-hi); border-color: rgba(47,98,211,.42); background: var(--amber-soft); }
.search-input { min-width: 220px; flex: 1 1 220px; }
.library-sort { width: auto; min-width: 112px; }
.template-toolbar .search-input { max-width: 360px; margin-left: auto; }
.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.template-card, .library-card, .project-library-card { border: 1px solid var(--line-soft); border-radius: var(--r-card); background: rgba(255,255,255,.92); box-shadow: 0 8px 24px rgba(42,68,98,.07); overflow: hidden; }
.template-card { display: flex; flex-direction: column; }
.template-cover { width: 100%; height: 126px; display: grid; place-items: center; object-fit: cover; color: rgba(255,255,255,.88); background: linear-gradient(135deg, #2f62d3, #85b7ff); }
.template-cover[data-mode="video"] { background: linear-gradient(135deg, #3158a9, #56b7d8); }
.template-cover[data-mode="music"] { background: linear-gradient(135deg, #5362cb, #b187df); }
.template-cover[data-mode="voice"] { background: linear-gradient(135deg, #2c79a4, #59c9c1); }
.template-cover svg { width: 38px; height: 38px; opacity: .9; }
.template-body, .template-card-body, .library-card-body, .project-library-card { padding: 14px; }
.template-topline, .template-card-top, .library-card-topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mode-pill { padding: 3px 8px; border-radius: 999px; color: var(--amber-hi); background: var(--amber-soft); font-size: 11px; }
.template-body h3, .library-card h3, .project-library-card h3 { font-size: 15px; margin-top: 8px; }
.template-body p, .library-card p, .project-library-card p { color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 6px; }
.template-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.template-tags span { color: var(--faint); font-size: 11px; }
.template-actions, .template-card-actions, .library-card-actions { display: flex; gap: 8px; margin-top: 12px; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.library-grid.is-list { grid-template-columns: 1fr; }
.library-grid.is-list .library-card { display: grid; grid-template-columns: 190px minmax(0,1fr); }
.library-grid.is-list .library-card-media { height: 100%; min-height: 150px; }
.library-card-media { height: 170px; display: grid; place-items: center; background: var(--panel-2); overflow: hidden; }
.library-card-media img, .library-card-media video { width: 100%; height: 100%; object-fit: cover; }
.library-card-media audio { width: calc(100% - 28px); }
.library-audio { display: grid; place-items: center; gap: 7px; color: var(--amber-hi); }
.library-audio svg { width: 32px; height: 32px; }
.library-audio audio { width: min(220px, 100%); }
.library-card-meta { display: flex; gap: 8px; color: var(--faint); font-size: 11px; margin-top: 8px; }
.library-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.project-library-card { min-height: 130px; }
.project-library-card .project-type { color: var(--amber-hi); font-size: 11px; }
.library-empty { color: var(--faint); text-align: center; padding: 34px 0; }
.task-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.task-stat { padding: 14px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(255,255,255,.88); text-align: left; }
.task-stat:hover, .task-stat.is-active { border-color: rgba(47,98,211,.42); background: var(--amber-soft); }
.task-stat strong, .task-stat span { display: block; }
.task-stat strong { color: var(--text); font: 600 22px var(--font-mono); }
.task-stat span { color: var(--muted); font-size: 12px; margin-top: 4px; }
.task-list { display: grid; gap: 9px; }
.task-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(255,255,255,.9); }
.task-row-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--amber-hi); background: var(--amber-soft); }
.task-row-icon.is-success { color: var(--jade); background: rgba(25,131,95,.1); }
.task-row-icon.is-error { color: var(--red); background: rgba(195,63,76,.1); }
.task-row-head { display: flex; align-items: center; gap: 8px; }
.task-status { padding: 2px 7px; border-radius: 999px; background: var(--amber-soft); color: var(--amber-hi); font-size: 11px; }
.task-status.is-success { color: var(--jade); background: rgba(25,131,95,.1); }
.task-status.is-error { color: var(--red); background: rgba(195,63,76,.1); }
.task-row-main p { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.task-row-main small { display: block; color: var(--faint); margin-top: 4px; }
.task-error-message { display: block; color: var(--red); font-size: 12px; margin-top: 5px; }
.task-row-actions { display: flex; justify-content: flex-end; }

/* ---------------- Toast ---------------- */

.toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  z-index: 100;
  max-width: min(360px, calc(100vw - 40px));
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 12.5px;
  box-shadow: var(--shadow);
  animation: toast-in .25s cubic-bezier(.2, .9, .3, 1.2);
}
.toast.is-leaving { animation: toast-out .25s forwards; }
.toast svg { width: 15px; height: 15px; margin-top: 2px; color: var(--amber); }
.toast.toast-error { border-left-color: var(--red); }
.toast.toast-error svg { color: var(--red); }
.toast.toast-success { border-left-color: var(--jade); }
.toast.toast-success svg { color: var(--jade); }

@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(20px); } }

/* ---------------- 滚动条 ---------------- */

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--faint); }

/* ---------------- 响应式 ---------------- */

@media (max-width: 980px) {
  .workbench { grid-template-columns: 1fr; }
  .controls { position: static; }
  .topbar { flex-wrap: wrap; gap: 12px; }
  .mode-switch { order: 3; margin-inline: 0; width: 100%; }
  .mode-btn { flex: 1; justify-content: center; }
  .topbar-right { min-width: 0; margin-left: auto; }
  .workbench-subnav { align-items: stretch; flex-direction: column; gap: 8px; }
  .workbench-subnav .mode-switch { width: 100%; }
  .workbench-subnav .mode-btn { flex: 1; justify-content: center; }
  .brand { min-width: 0; }
  .stage { min-height: 320px; }
  .studio-panel-head { align-items: flex-start; flex-direction: column; }
  .project-toolbar { align-items: stretch; flex-wrap: wrap; }
  .project-toolbar .search-input { max-width: none; flex: 1 1 220px; }
  .studio-head-actions { min-width: 0; width: 100%; }
  .tool-editor-head { flex-direction: column; }
  .tool-meta { justify-content: flex-start; }
  .drama-overview { grid-template-columns: 1fr; }
  .canvas-layout { grid-template-columns: 1fr; }
  .canvas-palette { display: flex; gap: 8px; overflow-x: auto; }
  .palette-btn { width: auto; white-space: nowrap; }
}

@media (max-width: 560px) {
  .mp-btn { min-width: 0; }
  .mp-name { max-width: 92px; }
  .conn-text { display: none; }
  .btn-generate .gen-kbd { display: none; }
  .studio-panel { padding: 0 12px; }
  .studio-nav { padding: 0 12px; }
  .btn-top-action span:not(.top-task-badge) { display: none; }
  .tool-layout, .drama-layout { grid-template-columns: 1fr; }
  .studio-head-actions { flex-wrap: wrap; }
  .studio-head-actions .text-input { max-width: none; flex: 1 1 100%; }
  .scene-media img, .scene-media video { max-width: 100%; }
  .template-toolbar .search-input { margin-left: 0; max-width: none; }
  .library-toolbar { align-items: stretch; }
  .library-toolbar .filter-chips, .library-toolbar .search-input, .library-toolbar .library-sort, .library-toolbar > .btn-ghost { width: 100%; }
  .task-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-row { grid-template-columns: 34px minmax(0, 1fr); }
  .task-row-actions { grid-column: 2; justify-content: flex-start; }
  .library-grid.is-list .library-card { grid-template-columns: 1fr; }
  .library-grid.is-list .library-card-media { min-height: 170px; }
}

@media (min-width: 981px) {
  .studio-nav { position: static; left: auto; right: auto; width: calc(100% - 36px); max-width: none; margin: 14px 18px 0; padding: 0; flex-direction: row; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
  .studio-nav-btn { width: auto; justify-content: center; }
  .topbar, .workbench, .studio-panel { width: calc(100% - 36px); max-width: none !important; margin-left: 18px; margin-right: 18px; }
  .topbar { border-radius: 0 0 12px 12px; }
  .workbench { grid-template-columns: 372px minmax(0, 1fr); gap: 14px; }
}

html.is-dim { color-scheme: dark; }
body.is-dim {
  --bg: #0d1526;
  --bg-2: #131f34;
  --panel: #18283f;
  --panel-2: #20334e;
  --line: #3b5575;
  --line-soft: #293e5b;
  --text: #eef5ff;
  --muted: #b4c3d8;
  --faint: #8499b7;
  --amber: #6f9dff;
  --amber-hi: #9ebdff;
  --amber-soft: rgba(105, 151, 255, .17);
  --jade: #55d0a1;
  --red: #ff7f91;
  --shadow: 0 18px 44px rgba(0, 0, 0, .32);
  background:
    radial-gradient(900px 480px at 88% -8%, rgba(47, 98, 211, .22), transparent 65%),
    linear-gradient(180deg, rgba(13, 21, 38, .78), rgba(11, 17, 29, .96)),
    url("../images/hl-aigen-bg-v2.png") center top / cover no-repeat fixed,
    var(--bg);
}

body.is-dim .topbar,
body.is-dim .hl-aigen-card,
body.is-dim .tool-catalog,
body.is-dim .tool-editor,
body.is-dim .scene-list,
body.is-dim .scene-editor,
body.is-dim .canvas-palette,
body.is-dim .canvas-board,
body.is-dim .canvas-inspector,
body.is-dim .template-card,
body.is-dim .library-card,
body.is-dim .project-library-card,
body.is-dim .task-row,
body.is-dim .task-stat {
  background: var(--panel);
  border-color: var(--line-soft);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .2);
}

body.is-dim .topbar {
  background: rgba(16, 27, 46, .88);
  border-color: var(--line);
}
body.is-dim .studio-nav-btn,
body.is-dim .btn-top-action,
body.is-dim .mode-switch,
body.is-dim .mp-btn,
body.is-dim .conn {
  background: var(--panel);
  border-color: var(--line);
}
body.is-dim .studio-nav-btn:hover,
body.is-dim .studio-nav-btn.is-active,
body.is-dim .btn-top-action:hover,
body.is-dim .mp-btn:hover,
body.is-dim .mp-btn[aria-expanded="true"] {
  background: var(--amber-soft);
  border-color: rgba(111, 157, 255, .58);
}
body.is-dim .mp-panel { background: var(--panel-2); border-color: var(--line); }
body.is-dim .mp-item:hover { background: rgba(111, 157, 255, .1); }
body.is-dim .workbench-subnav {
  background: rgba(24, 40, 63, .9);
  border-color: var(--line-soft);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}
body.is-dim .hl-aigen-card {
  background: linear-gradient(175deg, rgba(28, 45, 70, .98), rgba(20, 34, 56, .96));
}
body.is-dim .mode-btn.is-active,
body.is-dim .chip.is-active { border-color: rgba(111, 157, 255, .58); }
body.is-dim .stepper button:hover:not(:disabled),
body.is-dim .btn-ghost:hover { background: rgba(111, 157, 255, .12); }
body.is-dim .stage {
  border-color: var(--line);
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(77, 130, 235, .18), transparent 70%),
    rgba(13, 22, 39, .82);
}
body.is-dim .stage-result img,
body.is-dim .stage-result video,
body.is-dim .stage-result audio { background: var(--panel-2); box-shadow: 0 16px 48px rgba(0, 0, 0, .36), 0 0 0 1px var(--line); }
body.is-dim .demo-note { background: rgba(20, 34, 56, .92); border-color: rgba(111, 157, 255, .48); }
body.is-dim .history-item-play,
body.is-dim .history-item-type { background: rgba(24, 40, 63, .92); }
body.is-dim .history-audio-media { background: linear-gradient(145deg, rgba(67, 108, 190, .24), rgba(20, 34, 56, .92)); }
body.is-dim .canvas-board { background: radial-gradient(circle at 10% 10%, rgba(111, 157, 255, .16) 1px, transparent 1px) 0 0/22px 22px, rgba(13, 22, 39, .86); }
body.is-dim .canvas-node { background: rgba(24, 40, 63, .96); box-shadow: 0 10px 24px rgba(0, 0, 0, .28); }
body.is-dim .template-card,
body.is-dim .library-card,
body.is-dim .project-library-card,
body.is-dim .task-row,
body.is-dim .task-stat { background: rgba(24, 40, 63, .94); }
body.is-dim .task-row:hover,
body.is-dim .project-card:hover,
body.is-dim .project-card.is-active { background: rgba(111, 157, 255, .12); }

/* ---------------- 动效偏好 ---------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .stage[data-state="running"]::before { display: none; }
}