/* ============ Node shell ============ */
.nd {
  --tint: var(--brand);
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 100%, #fff 3%) 0%, var(--bg-elevated) 120px),
    var(--bg-elevated);
  border: 0;
  box-shadow: 0 0 0 0.5px var(--separator-strong), inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-2);
  color: var(--label);
  transition: box-shadow var(--d) var(--ease), transform var(--d) var(--spring);
}
.react-flow__node:hover .nd {
  box-shadow: 0 0 0 0.5px var(--separator-strong), inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-3);
}
.react-flow__node.dragging .nd {
  transform: scale(1.012) rotate(-0.4deg);
  box-shadow: 0 0 0 0.5px var(--separator-strong), var(--shadow-4);
}
.nd.is-selected,
.react-flow__node:hover .nd.is-selected {
  box-shadow: 0 0 0 2px var(--brand), 0 0 0 6px color-mix(in srgb, var(--brand) 14%, transparent), var(--shadow-3);
}
.nd.is-fresh {
  animation: nd-reveal 1.6s var(--ease-out);
}
@keyframes nd-reveal {
  0% {
    opacity: 0;
    transform: scale(0.94);
    box-shadow: 0 0 0 0 var(--brand-line);
  }
  25% {
    opacity: 1;
    transform: scale(1);
  }
  60% {
    box-shadow: 0 0 0 8px transparent, 0 0 40px var(--brand-soft);
  }
}
.nd-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 10px;
}
/* 节点头部图标:对齐 updream 预演台的紧凑线稿(小号单色,不用大彩块) */
.nd-tile {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--label-2);
}
.nd-tile .icon {
  width: 14px;
  height: 14px;
  stroke-width: 1.8;
}
.nd-title-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.nd-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 12px/1.3 var(--font);
  letter-spacing: 0;
}
/* 笔状重命名:与 updream 一致常驻在名称右侧,低饱和小尺寸 */
.nd-title-edit {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--label-3);
  opacity: 1;
  cursor: pointer;
  transition: color var(--d-fast), background var(--d-fast);
}
.nd-head:hover .nd-title-edit,
.nd-title-edit:focus-visible {
  opacity: 1;
}
.nd-title-edit:hover {
  color: var(--label);
  background: var(--hover);
}
.nd-title-input {
  flex: 1;
  min-width: 0;
  height: 24px;
  padding: 0 6px;
  border-radius: 6px;
  border: 0;
  background: var(--fill-3);
  font: 600 13px/1 var(--font);
  box-shadow: var(--ring);
}
.nd-meta {
  font: var(--t-caption);
  color: var(--label-3);
  white-space: nowrap;
}
.nd-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-full);
  font: 650 10.5px/1 var(--font);
  animation: pop-in var(--d) var(--spring);
}
.nd-status .spinner {
  width: 10px;
  height: 10px;
  border-width: 1.5px;
}
.nd-status.is-running {
  background: var(--brand-soft);
  color: var(--brand);
}
.nd-status.is-error {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
}
.nd-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 12px;
  border-top: 0.5px solid var(--separator);
  font: var(--t-caption);
  color: var(--label-3);
}
.nd-foot--action {
  padding: 6px 8px 6px 12px;
}
.nd-ok {
  color: var(--green);
}
.nd-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 12px 10px;
  font: var(--t-footnote);
  color: var(--red);
}
.nd-cost {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font: 600 12px/1 var(--font);
  color: var(--label-2);
}
.nd-cost .icon {
  width: 13px;
  height: 13px;
  color: var(--brand);
}

/* ports */
.nd .nd-port {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2.5px solid var(--bg-elevated);
  background: var(--label-3);
  box-shadow: 0 0 0 0.5px var(--separator-strong), 0 1px 3px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity var(--d-fast), transform var(--d) var(--spring), background var(--d-fast), box-shadow var(--d);
  z-index: 2;
}
/* 透明命中扩展:拖线更容易点中(视觉尺寸不变) */
.nd .nd-port::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
}
.react-flow__node:hover .nd-port,
.nd.is-selected .nd-port,
.react-flow.connecting .nd-port--in,
.nd .nd-port.connectingto,
.nd .nd-port.connectingfrom {
  opacity: 1;
}
.nd .nd-port:hover {
  transform: scale(1.45);
  background: var(--tint);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tint) 22%, transparent), 0 1px 3px rgba(0, 0, 0, 0.25);
}
.nd .nd-port--out {
  background: var(--tint);
}
.nd .nd-port.react-flow__handle-left {
  left: -6px;
}
.nd .nd-port.react-flow__handle-right {
  right: -6px;
}
.nd .nd-port--top {
  top: 19px;
}
.nd .nd-port.valid,
.react-flow.connecting .nd-port--in.connectionindicator:hover {
  background: var(--green);
  transform: scale(1.4);
}
.react-flow.connecting .nd-port--in {
  background: var(--brand);
  animation: port-ping 1.2s var(--ease) infinite;
}
@keyframes port-ping {
  50% {
    box-shadow: 0 0 0 5px var(--brand-soft);
  }
}

/* textareas inside nodes */
.nd-textarea {
  width: 100%;
  border: 0;
  resize: none;
  background: transparent;
  font: var(--t-callout);
  line-height: 1.6;
  color: var(--label);
  overflow-y: auto;
}
.nd-textarea::placeholder {
  color: var(--label-4);
}

/* ============ Text ============ */
.nd-text {
  padding: 2px 14px 10px;
}
.nd-text-body {
  max-height: 340px;
  overflow: hidden;
  white-space: pre-wrap;
  font: var(--t-callout);
  line-height: 1.65;
  color: var(--label-2);
  -webkit-mask-image: linear-gradient(#000 80%, transparent);
  mask-image: linear-gradient(#000 80%, transparent);
}
.nd-text-empty {
  padding: 18px 0;
  font: var(--t-subhead);
  color: var(--label-4);
}
.nd-text.is-editing .nd-textarea {
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: var(--r-sm);
  background: var(--fill-4);
  width: calc(100% + 16px);
}
/* 富文本正文:markdown 渲染结果 */
.md-body {
  white-space: normal;
  overflow-y: auto;
  -webkit-mask-image: none;
  mask-image: none;
}
.md-body p {
  margin: 0 0 8px;
}
.md-body p:last-child {
  margin-bottom: 0;
}
.md-body h1, .md-body h2, .md-body h3, .md-body h4, .md-body h5, .md-body h6 {
  margin: 10px 0 6px;
  font: 650 13.5px/1.35 var(--font-display);
  color: var(--label);
}
.md-body h1 { font-size: 15px; }
.md-body img {
  display: block;
  max-width: 100%;
  border-radius: 8px;
  margin: 6px 0;
  background: var(--fill-3);
}
.md-body ul, .md-body ol {
  margin: 0 0 8px;
  padding-left: 18px;
}
.md-body li {
  margin: 2px 0;
}
.md-body blockquote {
  margin: 0 0 8px;
  padding: 2px 0 2px 10px;
  border-left: 2px solid var(--separator-strong);
  color: var(--label-3);
}
.md-body pre {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--fill-4);
  overflow-x: auto;
}
.md-body pre code {
  font: 500 11.5px/1.5 var(--font-mono, ui-monospace, monospace);
}
.md-body code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.92em;
}
.md-body a {
  color: var(--brand);
}
.md-body table {
  border-collapse: collapse;
  margin: 0 0 8px;
  font-size: 12px;
}
.md-body th, .md-body td {
  border: 0.5px solid var(--separator-strong);
  padding: 4px 8px;
}
.nd-text-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 0 16px;
}
/* 文本节点空态动作(与媒体节点「尝试」行同族) */
.nd-text-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 12px 0;
}
.nd-text-empty .nd-try {
  align-items: center;
}

/* ============ Media ============ */
.nd-shot-of {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: -2px 12px 6px;
  font: 500 11px/1 var(--font);
  color: var(--tint-storyboard);
}
.nd-media {
  position: relative;
  margin: 0 8px;
  overflow: hidden;
  border-radius: 15px;
  background: var(--fill-4);
  box-shadow: inset 0 0 0 0.5px var(--separator);
}
.nd-media img,
.nd-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  animation: develop 900ms var(--ease-out);
}
.nd-media audio {
  width: calc(100% - 16px);
  margin: 12px 8px;
}
.nd-media.is-empty {
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--tint) 10%, transparent), transparent 60%),
    var(--fill-4);
  border: 1px dashed var(--separator-strong);
}
.nd-media-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  text-align: center;
  font: var(--t-footnote);
  color: var(--label-3);
}
.nd--audio .nd-media-empty {
  position: static;
  min-height: 120px;
}
/* 空态快捷入口行:iOS 风格彩色小图标 + 文字 */
.nd-try {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.nd-try-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 6px 2px 2px;
  margin: 0 -6px;
  border-radius: 9px;
  font: 500 12.5px/1.4 var(--font);
  color: var(--label-2);
  transition: color var(--d-fast), background var(--d-fast);
}
.nd-try-row:hover {
  color: var(--label);
  background: color-mix(in srgb, var(--tint) 10%, transparent);
}
/* 彩色裸图标:duotone 线稿按动作着色,无底色 */
.nd-try-ico {
  display: grid;
  place-items: center;
  color: var(--tone);
}
.nd-try-ico .icon {
  width: 16px;
  height: 16px;
  stroke-width: 1.9;
}
.nd-try-ico[data-tone="blue"] {
  --tone: #5a9bff;
}
.nd-try-ico[data-tone="violet"] {
  --tone: #b678ff;
}
.nd-try-ico[data-tone="orange"] {
  --tone: #ffab52;
}
.nd-try-ico[data-tone="teal"] {
  --tone: #3fd6c2;
}
.nd-try-ico[data-tone="green"] {
  --tone: #57d16a;
}
.nd-media-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--tint) 14%, transparent);
  color: var(--tint);
  animation: float-y 5s var(--ease) infinite;
}
.nd-generation-failure { padding: 18px; display: grid; gap: 14px; border-top: 1px solid var(--separator); background: color-mix(in srgb, var(--red) 5%, var(--bg-elevated)); font: var(--t-footnote); }
.nd-failure-heading { display: flex; align-items: center; gap: 8px; color: var(--red); }
.nd-failure-detail summary { cursor: pointer; color: var(--label); }
.nd-failure-detail p { margin: 10px 0 0; padding: 10px; border-radius: 8px; background: var(--fill-4); max-height: 160px; overflow: auto; overflow-wrap: anywhere; white-space: pre-wrap; user-select: text; color: var(--label-2); }
.nd-failure-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--separator); color: var(--label-3); }
.nd-running {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(110deg, rgba(0, 0, 0, 0.55) 30%, rgba(40, 32, 18, 0.62) 50%, rgba(0, 0, 0, 0.55) 70%);
  background-size: 220% 100%;
  animation: shimmer 2.4s linear infinite;
  color: #fff;
  font: 500 12px/1.3 var(--font);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.nd-running .ring {
  --c: #f1d9a4;
}
.nd-running .ring .num {
  font: 600 11px/1 var(--font);
}
.nd-running .btn {
  --btn-fg: rgba(255, 255, 255, 0.85);
}
.nd-running .btn:hover {
  background: rgba(255, 255, 255, 0.14);
}
/* 模型专属进度主题(vibe-running,移植旧版):抽卡视频段(is-video)深紫底;
 * 巡游段(is-caro)Tiffany 蓝浅底,Q 版小人精灵图带着「正在 Vibe，xx%」
 * 从右往左匀速巡游,进度条紧贴贴纸下方。动效全走小面积重绘。 */
.vibe-running {
  gap: 8px;
  padding: 12px;
  animation: none;
  background-size: 100% 100%;
  background: linear-gradient(165deg, rgba(44, 32, 84, 0.82), rgba(16, 12, 34, 0.88));
}
.vibe-running.is-caro {
  gap: 6px;
  background: linear-gradient(165deg, #a9e9e3, #6fcbc3);
}
.vibe-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
}
.vibe-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
.vibe-maru {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 12px;
}
.vibe-maru-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: vibe-maru 7.5s linear infinite;
  will-change: transform;
}
.vibe-unit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 40px;
  flex: none;
}
/* 精灵图 3×3:background-size 300% 配合三档位取格,step-end 逐格切换;
 * 用 drop-shadow 跟随透明轮廓 */
.vibe-chibi {
  width: 108px;
  height: 108px;
  border-radius: 16px;
  background-color: transparent;
  background-size: 300% 300%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 5px 9px rgba(10, 80, 74, 0.3));
  animation: vibe-cells 9.9s step-end infinite, vibe-bounce 2.3s ease-in-out infinite;
  will-change: transform;
}
.vibe-spark {
  position: absolute;
  color: #ffe9b8;
  text-shadow: 0 0 10px rgba(255, 222, 140, 0.9);
  pointer-events: none;
  animation: vibe-twinkle 1.7s ease-in-out infinite;
}
.vibe-spark-a { top: 10px; left: 12px; font-size: 15px; }
.vibe-spark-b { bottom: 12px; right: 14px; font-size: 12px; animation-delay: 0.8s; }
.vibe-caption {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 0 12px rgba(178, 150, 255, 0.55);
  white-space: nowrap;
}
.vibe-pct { color: #e8cf9a; font-variant-numeric: tabular-nums; }
.is-caro .vibe-caption { color: #0e4a45; text-shadow: none; }
.is-caro .vibe-pct { color: #7a5c14; }
.is-caro .vibe-bar { width: calc(66.67% + 16px); background: rgba(10, 80, 74, 0.16); box-shadow: none; }
.is-caro .vibe-bar-fill { box-shadow: none; }
/* 迷妮曼思:浅粉奶油底;深玫瑰字保证可读 */
.vibe-running[data-vibe="minimax"].is-caro { background: linear-gradient(165deg, #fff1e9, #ffe3ec); }
.vibe-running[data-vibe="minimax"].is-caro .vibe-caption { color: #8a3a4d; }
.vibe-running[data-vibe="minimax"].is-caro .vibe-pct { color: #c2703e; }
.vibe-running[data-vibe="minimax"].is-caro .vibe-chibi { filter: drop-shadow(0 5px 9px rgba(200, 110, 120, 0.28)); }
.vibe-running[data-vibe="minimax"].is-caro .vibe-bar { background: rgba(160, 70, 90, 0.16); }
.vibe-running[data-vibe="minimax"].is-caro .vibe-bar-fill { box-shadow: none; }
/* 皇后:浅蓝紫底 */
.vibe-running[data-vibe="qwen"].is-caro { background: linear-gradient(165deg, #e7ecfd, #c9d4f6); }
.vibe-running[data-vibe="qwen"].is-caro .vibe-caption { color: #2c3a6b; }
.vibe-running[data-vibe="qwen"].is-caro .vibe-pct { color: #8a6d1f; }
.vibe-running[data-vibe="qwen"].is-caro .vibe-chibi { filter: drop-shadow(0 5px 9px rgba(44, 58, 107, 0.25)); }
.vibe-running[data-vibe="qwen"].is-caro .vibe-bar { background: rgba(44, 58, 107, 0.16); }
.vibe-running[data-vibe="qwen"].is-caro .vibe-bar-fill { box-shadow: none; }
.vibe-bar {
  width: 74%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}
.vibe-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #c9b6ff, #9f86ff, #e8cf9a, #c9a468);
  background-size: 300% 100%;
  box-shadow: 0 0 12px rgba(159, 134, 255, 0.7);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  animation: vibe-shimmer 1.8s linear infinite;
}
.vibe-stop {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  --btn-fg: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.28);
}
.is-caro .vibe-stop {
  --btn-fg: #0e4a45;
  background: rgba(255, 255, 255, 0.3);
}
.vibe-stop:hover {
  background: rgba(0, 0, 0, 0.4);
}
.is-caro .vibe-stop:hover {
  background: rgba(255, 255, 255, 0.45);
}
@keyframes vibe-maru {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes vibe-cells {
  0% { background-position: 0% 0%; }
  11.12% { background-position: 50% 0%; }
  22.23% { background-position: 100% 0%; }
  33.34% { background-position: 0% 50%; }
  44.45% { background-position: 50% 50%; }
  55.56% { background-position: 100% 50%; }
  66.67% { background-position: 0% 100%; }
  77.78% { background-position: 50% 100%; }
  88.89% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
@keyframes vibe-bounce {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-4px) rotate(1.2deg); }
}
@keyframes vibe-twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.7) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(18deg); }
}
@keyframes vibe-shimmer {
  from { background-position: 0% 50%; }
  to { background-position: 300% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .vibe-chibi, .vibe-spark, .vibe-bar-fill, .vibe-maru-track { animation: none; }
  .vibe-chibi { background-position: 50% 50%; }
}
.nd-caption {
  margin: 8px 12px 10px;
  font: var(--t-footnote);
  color: var(--label-3);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nd > .nd-media:last-child,
.nd > .nd-media:nth-last-child(3) {
  margin-bottom: 8px;
}

/* prompt bar (selected media node) */
.nd-prompt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px;
  padding: 9px;
  border-radius: 16px;
  background: var(--fill-4);
  box-shadow: inset 0 0 0 0.5px var(--separator);
  cursor: default;
  animation: rise-in var(--d) var(--spring);
}
.nd-prompt .nd-textarea {
  padding: 2px 4px;
}
.nd-prompt-bar {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nd-go {
  flex: none;
  padding: 0 8px;
  gap: 4px;
}
.nd-go-cost {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-left: 2px;
  padding-left: 6px;
  border-left: 1px solid color-mix(in srgb, var(--on-brand) 30%, transparent);
  font-weight: 600;
  opacity: 0.85;
}
.nd-go-cost .icon {
  width: 11px;
  height: 11px;
}
.nd-pill {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  max-width: 150px;
  padding: 0 8px;
  border-radius: var(--r-full);
  background: var(--bg-elevated);
  border: 0.5px solid var(--separator);
  font: 500 11.5px/1 var(--font);
  color: var(--label-2);
  white-space: nowrap;
}
.nd-pill span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.nd-pill .icon {
  width: 13px;
  height: 13px;
  flex: none;
}
.nd-pill:hover,
.nd-pill.is-on {
  color: var(--label);
  border-color: var(--separator-strong);
}
.nd-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.nd-ref {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 7px;
  background: var(--fill-3);
  color: var(--label-3);
  font: 600 11px/1 var(--font);
}
.nd-ref img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nd-ref b {
  position: absolute;
  right: 2px;
  bottom: 2px;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font: 600 9px/13px var(--font);
  text-align: center;
}
/* 引用条上的移除按钮:悬停引用块才浮现,悬停按钮变红示意删除 */
.nd-ref-x {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.nd-ref-x .icon {
  width: 10px;
  height: 10px;
}
.nd-ref:hover .nd-ref-x,
.nd-ref-x:focus-visible {
  opacity: 1;
}
.nd-ref-x:hover {
  background: rgba(202, 54, 46, 0.9);
}
.nd-ref--text {
  width: auto;
  padding: 0 7px;
  display: inline-flex;
  gap: 3px;
}

/* settings popover */
.nd-settings {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 6px 8px;
}
.nd-settings-label {
  font: 600 11.5px/1 var(--font);
  color: var(--label-3);
  margin-top: 4px;
}
/* 时长拖杆:旧版同款 range + 数值标签 */
.nd-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nd-slider-row input[type="range"] {
  flex: 1;
  height: 18px;
  margin: 0;
  accent-color: var(--brand);
  cursor: pointer;
}
.nd-slider-value {
  min-width: 40px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--fill-4);
  box-shadow: inset 0 0 0 0.5px var(--separator);
  font: 500 12px/1 var(--font);
  color: var(--label-2);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.nd-ratio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.nd-ratio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 56px;
  border-radius: var(--r-sm);
  background: var(--fill-4);
  font: 500 11.5px/1 var(--font);
  color: var(--label-2);
}
.nd-ratio i {
  display: block;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}
.nd-ratio:hover {
  background: var(--fill-3);
}
.nd-ratio.is-on {
  background: var(--brand-soft);
  color: var(--brand);
  box-shadow: inset 0 0 0 1.5px var(--brand-line);
}

/* ============ Cards ============ */
.nd-card {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px;
  padding: 2px 12px 10px;
}
.nd-card.is-scene {
  grid-template-columns: minmax(0, 1fr);
}
.nd-card-cover {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 14px;
  background:
    radial-gradient(120% 80% at 30% 0%, color-mix(in srgb, var(--tint) 26%, transparent), transparent 70%),
    var(--fill-4);
  box-shadow: inset 0 0 0 0.5px var(--separator), 0 6px 16px -8px rgba(0, 0, 0, 0.35);
}
/* 封面「查看大图」眼睛:常驻右下角(触屏也能点),悬停增亮 */
.nd-cover-eye {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px -2px rgba(30, 20, 60, 0.35);
  color: var(--label-2);
  cursor: zoom-in;
  opacity: 0.72;
  transition: color var(--d-fast), opacity var(--d-fast), transform var(--d) var(--spring);
}
.nd-card-cover:hover .nd-cover-eye,
.nd-cover-eye:focus-visible {
  opacity: 1;
}
.nd-cover-eye:hover {
  color: var(--tint);
  transform: translateY(-1px);
}
.nd-card.is-scene .nd-card-cover {
  aspect-ratio: 16 / 9;
}
.nd-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: develop 900ms var(--ease-out);
}
.nd-card-cover-empty {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--tint) 55%, transparent);
}
.nd-card-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.nd-card-name {
  font: 650 17px/1.25 var(--font-display);
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
}
input.nd-card-name {
  padding: 2px 6px;
  margin: -2px -6px;
  width: calc(100% + 12px);
  border-radius: 6px;
  background: var(--fill-4);
}
input.nd-card-name:focus {
  box-shadow: var(--ring);
}
.nd-card-detail {
  font: var(--t-footnote);
  color: var(--label-2);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
textarea.nd-card-detail {
  display: block;
  padding: 4px 6px;
  margin: 0 -6px;
  width: calc(100% + 12px);
  border-radius: 6px;
  background: var(--fill-4);
  font: var(--t-footnote);
  line-height: 1.55;
}
.nd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.nd-tag-input {
  width: 64px;
  height: 22px;
  padding: 0 6px;
  border: 1px dashed var(--separator-strong);
  border-radius: var(--r-full);
  background: transparent;
  font: 500 11.5px/1 var(--font);
}
.nd-tag-input:focus {
  border-style: solid;
  border-color: var(--brand);
  width: 96px;
}
.nd-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0 12px 14px;
}
.nd-slots.is-scene {
  grid-template-columns: repeat(2, 1fr);
}
.nd-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.nd-slot-face {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 11px;
  background: var(--fill-4);
  border: 1px dashed var(--separator-strong);
  transition: transform var(--d) var(--spring), box-shadow var(--d);
}
.nd-slot.is-wide .nd-slot-face {
  aspect-ratio: 16 / 9;
}
.nd-slot.is-filled .nd-slot-face {
  border: 0.5px solid var(--separator);
}
.nd-slot-face:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 0 0 2px var(--tint), 0 8px 18px -8px color-mix(in srgb, var(--tint) 70%, transparent);
}
.nd-slot.is-filled .nd-slot-face img {
  animation: develop 900ms var(--ease-out);
}
/* Freshly generated images "develop" like a print. */
@keyframes develop {
  from {
    filter: blur(10px) saturate(0.2) brightness(1.3);
    transform: scale(1.06);
  }
}
.nd-slot-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nd-slot-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--label-3);
}
.nd-slot-face:hover .nd-slot-state {
  color: var(--tint);
}
.nd-slot-label {
  font: 500 10.5px/1 var(--font);
  color: var(--label-3);
}
/* 槽位悬浮操作条:显式的 生成/上传 按钮,悬停槽位时浮现 */
.nd-slot-actions {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(4px);
  display: flex;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-fast), transform var(--d) var(--spring);
  z-index: 2;
}
.nd-slot:hover .nd-slot-actions,
.nd-slot:focus-within .nd-slot-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nd-slot-act {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: var(--bg-elevated);
  box-shadow: 0 2px 8px -2px rgba(30, 20, 60, 0.35);
  color: var(--label-2);
  cursor: pointer;
  transition: color var(--d-fast), transform var(--d) var(--spring);
}
.nd-slot-act:hover {
  color: var(--tint);
  transform: translateY(-1px);
}
.nd-slot-act:disabled {
  opacity: 0.5;
  cursor: default;
}
/* 卡片设定输入:展开按钮悬浮在右上角,悬停卡片时浮现;不透明底色,
 * 避免和输入框里的文字混在一起 */
.nd-card-detailwrap {
  position: relative;
}
.nd-card-detailwrap .gen-dock-expand {
  top: 8px;
  right: 8px;
  opacity: 0;
  background: var(--bg-elevated);
  box-shadow: 0 1px 6px -1px rgba(30, 20, 60, 0.28), 0 0 0 1px var(--separator);
  transition: opacity var(--d-fast), color var(--d-fast);
}
.nd-card-detailwrap:hover .gen-dock-expand,
.nd-card-detailwrap:focus-within .gen-dock-expand {
  opacity: 1;
}
textarea.nd-card-detail {
  resize: vertical;
  min-height: 0;
  padding-right: 28px;
}
.nd .nd-port--slot {
  width: 10px;
  height: 10px;
  bottom: -6px;
}
.nd .nd-port--slot.is-empty {
  visibility: hidden;
  pointer-events: none;
}

/* ============ Storyboard ============ */
.sb-timeline {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0 12px 8px;
}
.sb-seg {
  min-width: 18px;
  height: 22px;
  border-radius: 7px;
  background: var(--fill-3);
  font: 650 10.5px/22px var(--font-round);
  color: var(--label-3);
  transition: background var(--d-fast), color var(--d-fast), transform var(--d) var(--spring);
}
.sb-seg:hover {
  transform: translateY(-1px);
}
.sb-seg:hover {
  background: var(--fill-2);
  color: var(--label);
}
.sb-seg.is-linked {
  background: color-mix(in srgb, var(--tint-storyboard) 18%, transparent);
  color: var(--tint-storyboard);
}
.sb-seg.is-running {
  background: linear-gradient(90deg, var(--brand-soft), color-mix(in srgb, var(--brand) 30%, transparent), var(--brand-soft));
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
  color: var(--brand);
}
.sb-seg.is-done {
  background: color-mix(in srgb, var(--green) 20%, transparent);
  color: var(--green);
}
.sb-seg.is-active {
  box-shadow: 0 0 0 1.5px var(--tint-storyboard);
  color: var(--label);
}
.sb-total {
  margin-left: 6px;
  font: 600 11px/1 var(--font);
  color: var(--label-3);
}
.sb-rows {
  display: flex;
  flex-direction: column;
  border-top: 0.5px solid var(--separator);
}
.sb-row {
  position: relative;
  border-bottom: 0.5px solid var(--separator);
}
.sb-row.is-active {
  background: color-mix(in srgb, var(--tint-storyboard) 5%, transparent);
}
.sb-row-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 8px 12px;
  cursor: pointer;
}
.sb-row-main:hover {
  background: var(--hover);
}
.sb-num {
  width: 20px;
  flex: none;
  text-align: center;
  font: 650 13px/1 var(--font-display);
  color: var(--label-3);
}
.sb-row.is-active .sb-num {
  color: var(--tint-storyboard);
}
.sb-thumb {
  position: relative;
  width: 84px;
  height: 47px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  background: var(--fill-4);
  color: var(--label-4);
  box-shadow: inset 0 0 0 0.5px var(--separator);
}
.sb-thumb.is-empty {
  border: 1px dashed var(--separator-strong);
}
.sb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sb-thumb-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
}
.sb-thumb-badge {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
}
.sb-thumb-badge .icon {
  width: 11px;
  height: 11px;
  stroke-width: 2.4;
}
.sb-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sb-desc {
  font: var(--t-subhead);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sb-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.sb-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  padding: 0 6px;
  border-radius: 5px;
  background: var(--fill-4);
  font: 500 10.5px/1 var(--font);
  color: var(--label-2);
}
.sb-tag .icon {
  width: 11px;
  height: 11px;
}
.sb-cast {
  width: 20px;
  height: 20px;
  overflow: hidden;
  border-radius: 50%;
  border: 1.5px solid var(--bg-elevated);
  margin-left: -2px;
}
.sb-cast img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sb-act {
  flex: none;
}
.sb-progress {
  font: 600 12px/1 var(--font);
  color: var(--brand);
}
.nd .nd-port--row {
  top: 32px;
  right: -6px;
}
.sb-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 12px 12px 42px;
  cursor: default;
  animation: rise-in var(--d) var(--ease-out);
}
.sb-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sb-field > span {
  font: 600 10.5px/1 var(--font);
  color: var(--label-3);
}
.sb-field .nd-textarea {
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: var(--bg-elevated);
  border: 0.5px solid var(--separator-strong);
}
.sb-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sb-field--grow {
  flex: 1;
}
.sb-input {
  height: 30px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  border: 0.5px solid var(--separator-strong);
  background: var(--bg-elevated);
  font: var(--t-subhead);
}
.sb-input:focus,
.sb-field .nd-textarea:focus {
  border-color: var(--brand);
  box-shadow: var(--ring);
}
.sb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.sb-hint {
  font: var(--t-caption);
}
.sb-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 3px;
  border-radius: var(--r-sm);
  border: 0.5px solid var(--separator-strong);
  background: var(--bg-elevated);
  font: 600 12.5px/1 var(--font);
  align-self: flex-start;
}
.sb-stepper .num {
  min-width: 30px;
  text-align: center;
}
.sb-editor-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 4px;
}
.sb-danger {
  --btn-fg: var(--red);
}

/* ============ Screening ============ */
.scr-setup {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px 12px;
}
.scr-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;
  border-top: 0.5px solid var(--separator);
}
.scr-block h4 {
  font: 600 11.5px/1 var(--font);
  color: var(--label-3);
}
.scr-sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.scr-sources li {
  display: flex;
  align-items: center;
  gap: 6px;
  font: var(--t-subhead);
}
.scr-sources li span:nth-child(2) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scr-drop {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--separator-strong);
  font: var(--t-footnote);
  color: var(--label-3);
}
.scr-drop .icon {
  transform: rotate(180deg);
}
.scr-meter {
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--t-caption);
  color: var(--label-3);
}
.scr-meter .progress {
  flex: 1;
}
.scr-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.scr-seats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.scr-seat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 46px;
}
.scr-seat small {
  max-width: 46px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 10px/1 var(--font);
  color: var(--label-3);
}
.scr-seat.is-auto,
.scr-seat.is-add {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--fill-4);
  color: var(--label-4);
}
.scr-seat.is-add {
  border: 1px dashed var(--separator-strong);
  color: var(--label-2);
}
.scr-seat.is-add:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.scr-cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 10px;
  border-top: 0.5px solid var(--separator);
}
.scr-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
}
.scr-picker-list {
  max-height: 300px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.scr-persona {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  text-align: left;
}
.scr-persona:hover {
  background: var(--hover);
}
.scr-persona.is-on {
  background: var(--brand-soft);
}
.scr-persona-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.scr-persona-text strong {
  font: 500 13px/1.2 var(--font);
}
.scr-persona-text small {
  font: var(--t-caption);
  color: var(--label-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scr-persona-check {
  width: 16px;
  color: var(--brand);
}

/* theater */
.nd--screening.is-show {
  background: #121012;
  color: #f2f0ea;
  border-color: rgba(255, 255, 255, 0.08);
}
.nd--screening.is-show .nd-title {
  color: #f2f0ea;
}
/* 放映中节点(紧凑入口卡):放映本体在全屏放映厅里 */
.scr-live {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 10px 12px;
}
.scr-live-phase {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 12px/1 var(--font);
  color: rgba(255, 255, 255, 0.65);
}
.scr-live-phase .spinner {
  width: 12px;
  height: 12px;
  border-width: 1.5px;
}

/* 全屏放映厅(Theater.js):幕布遮挡的大银幕 → 放映按钮/试映准备中 → 揭幕后
   逐页放映剧本(成年人顺畅阅读速度,每页 2-3 行),观众反应以半透明弹幕分道
   飞过、互不遮挡、文本精简。 */
.th-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  background: radial-gradient(120% 90% at 50% 0%, #17141b 0%, #0a090d 55%, #060508 100%);
}
.th-room {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 2.6vh, 30px) clamp(16px, 3vw, 56px) 0;
}
.th-frame {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}
.th-screen {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 118%, rgba(220, 181, 109, 0.2), transparent 62%), #030304;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.055);
}
.th-screen-idle {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 14px/1 var(--font);
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.12em;
}

/* 分页正文:每页 2-3 行,居中排版 */
.th-page {
  max-width: min(74ch, 84%);
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.8vh, 24px);
  animation: th-page-in 0.55s var(--ease);
}
.th-line {
  font: 400 clamp(19px, 2.3vw, 33px) / 1.9 var(--font);
  color: rgba(244, 240, 230, 0.94);
  letter-spacing: 0.01em;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.th-line strong {
  font-weight: 600;
  color: #f0dcae;
}
.th-line--scene {
  font-size: 0.82em;
  letter-spacing: 0.2em;
  color: rgba(233, 207, 150, 0.88);
}
@keyframes th-page-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* 集标题卡 */
.th-epcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: th-page-in 0.6s var(--ease);
}
.th-epcard-eyebrow {
  font: 500 13px/1 var(--font);
  letter-spacing: 0.5em;
  color: rgba(233, 207, 150, 0.65);
}
.th-epcard-title {
  font: 600 clamp(24px, 3vw, 40px) / 1.3 var(--font);
  color: #f2e7cd;
}

/* 弹幕:半透明、分道排布互不遮挡、文本精简(引擎侧裁剪) */
.th-dm-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.th-dm {
  position: absolute;
  top: calc(4% + var(--lane) * 12.5%);
  left: 100%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: var(--r-full);
  background: rgba(10, 8, 12, 0.38);
  backdrop-filter: blur(2px);
  font: 500 clamp(13px, 1.05vw, 15px) / 1.4 var(--font);
  color: rgba(255, 255, 255, 0.82);
  opacity: 0.78;
  white-space: nowrap;
  animation: th-dm-fly var(--flight) linear forwards;
}
.th-dm em {
  font-style: normal;
}
.th-dm strong {
  font-weight: 600;
  color: rgba(233, 207, 150, 0.95);
}
.th-dm.is-walk {
  color: rgba(255, 190, 190, 0.9);
}
@keyframes th-dm-fly {
  to {
    transform: translateX(calc(-100vw - 100%));
  }
}

/* 幕布:开演前与散场时遮住银幕 */
.th-curtain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 10px;
  overflow: hidden;
}
.th-curtain-half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  background: repeating-linear-gradient(90deg, #4a0d12 0px, #6a141c 26px, #450a10 52px, #701822 78px, #4a0d12 104px);
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.55);
  transition: transform 1.05s cubic-bezier(0.6, 0.05, 0.3, 1);
}
.th-curtain-l {
  left: 0;
}
.th-curtain-r {
  right: 0;
}
.th-curtain.is-open .th-curtain-l {
  transform: translateX(-101%);
}
.th-curtain.is-open .th-curtain-r {
  transform: translateX(101%);
}
.th-valance {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(18px, 4vh, 42px);
  background: linear-gradient(#5c1017, #3a0a0e);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
  transition: opacity 0.8s var(--ease);
}
.th-curtain.is-open .th-valance {
  opacity: 0;
}

/* 放映按钮 + 试映准备中 */
.th-play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.th-play-btn {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.36));
  color: #f2e7cd;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.045), 0 12px 40px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s var(--ease), box-shadow 0.3s var(--ease);
}
.th-play-btn .icon {
  width: 30px;
  height: 30px;
}
.th-play-btn:hover {
  transform: scale(1.05);
}
.th-play-btn.is-waiting {
  cursor: default;
}
.th-play-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(233, 207, 150, 0.25);
  border-top-color: #e9cf96;
  animation: spin 1.1s linear infinite;
}
.th-play-label {
  font: 500 14px/1 var(--font);
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.22em;
}
.th-play-sub {
  font: var(--t-caption);
  color: rgba(255, 255, 255, 0.45);
}

/* 散场/中断卡片 */
.th-endcard {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  animation: th-page-in 0.6s var(--ease);
}
.th-end-label {
  font: 500 13px/1 var(--font);
  letter-spacing: 0.6em;
  color: rgba(233, 207, 150, 0.7);
}
.th-end-score {
  font: 600 clamp(44px, 5vw, 64px) / 1 var(--font);
  color: #f2e7cd;
}
.th-end-score small {
  font-size: 0.35em;
  color: rgba(255, 255, 255, 0.4);
  margin-left: 4px;
}
.th-end-note {
  font: var(--t-body);
  color: rgba(255, 255, 255, 0.6);
}
.th-end-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

/* 底栏:观众席 + 进度 + 速度/关闭 */
.th-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 4px 14px;
  min-height: 54px;
}
.th-house {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.th-seat {
  opacity: 0.9;
  transition: opacity 0.6s var(--ease), filter 0.6s var(--ease);
}
.th-seat.is-walked {
  opacity: 0.3;
  filter: grayscale(1);
}
.th-phase {
  flex: 1;
  text-align: center;
  font: 500 12.5px/1 var(--font);
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.08em;
}
.th-actions {
  display: flex;
  gap: 8px;
}
.th-btn {
  height: 30px;
  min-width: 30px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
  font: 600 12.5px/1 var(--font);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.th-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.scr-house {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.scr-house .scr-seat {
  width: auto;
  transition: opacity var(--d-slow), filter var(--d-slow);
}
.scr-house .scr-seat.is-walked {
  opacity: 0.35;
  filter: grayscale(1);
}
.scr-walk {
  position: absolute;
  right: -4px;
  bottom: -2px;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
}
.scr-walk .icon {
  width: 9px;
  height: 9px;
}

/* report */
.scr-report {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 2px 12px 12px;
}
.scr-report-head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.scr-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.scr-score strong {
  font: 700 20px/1 var(--font-display);
}
.scr-report-stats {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.scr-report-stats p {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px;
  border-radius: var(--r-sm);
  background: var(--fill-4);
}
.scr-report-stats strong {
  font: 650 17px/1 var(--font-display);
}
.scr-report-stats span {
  font: var(--t-caption);
  color: var(--label-3);
}
.scr-dims {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
}
.scr-dim {
  display: grid;
  grid-template-columns: 28px 1fr 26px;
  align-items: center;
  gap: 6px;
  font: var(--t-caption);
  color: var(--label-2);
}
.scr-dim .num {
  text-align: right;
}
.scr-summary {
  font: var(--t-footnote);
  color: var(--label-2);
  line-height: 1.6;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--fill-4);
}
.scr-fixes h4 {
  font: 600 11.5px/1 var(--font);
  color: var(--label-3);
  margin-bottom: 6px;
}
.scr-fixes ol {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font: var(--t-footnote);
  line-height: 1.5;
}
.scr-fixes li small {
  margin-left: 6px;
}
.scr-report-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
  border-top: 0.5px solid var(--separator);
}

/* ============ Mention 提示词引用（@ 素材） ============ */
.mention-box { position: relative; }
/* 镜像层复用 .nd-textarea 的全部排版变量，显示正文与 chip；textarea 只保留光标 */
.mention-mirror {
  position: absolute;
  inset: 0;
  color: var(--label);
  caret-color: transparent;
  pointer-events: none;
  overflow: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
  z-index: 0;
}
.mention-mirror::placeholder { color: transparent; }
/* textarea 文字透明（chip 由镜像层渲染）；caret 保持可见 */
.mention-input {
  position: relative;
  z-index: 1;
  background: transparent;
  color: transparent;
  caret-color: var(--label);
}
.mention-input::placeholder { color: var(--label-4); }
.mention-input::selection { background: color-mix(in srgb, var(--brand) 30%, transparent); }
/* 中文输入法合成期：显示原文字、藏镜像，避免候选文字不可见 */
.mention-box.is-composing .mention-input { color: var(--label); }
.mention-box.is-composing .mention-mirror { visibility: hidden; }
.mention-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 16px;
  padding: 0 4px 0 1px;
  border-radius: 999px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  vertical-align: -4px;
  overflow: hidden;
  white-space: nowrap;
}
.mention-pill-name {
  font-size: 10px;
  line-height: 1;
  font-weight: 500;
  color: var(--label);
  overflow: hidden;
  text-overflow: ellipsis;
}
.mention-ava {
  border-radius: 999px;
  object-fit: cover;
  flex: none;
  display: block;
  background: var(--fill-2);
}
.mention-ava--ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--label-3);
}

/* 引用参考下拉 */
.mention-menu { display: flex; flex-direction: column; gap: 6px; }
.mention-menu-title { margin: 0; font-size: 12px; font-weight: 600; color: var(--label); }
.mention-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.mention-tab {
  border: 1px solid var(--separator);
  background: transparent;
  color: var(--label-2);
  border-radius: 999px;
  font-size: 11px;
  padding: 3px 10px;
  cursor: pointer;
}
.mention-tab:hover { color: var(--label); border-color: var(--separator-strong); }
.mention-tab.is-on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--label); }
.mention-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 240px;
  overflow-y: auto;
  margin: 0 -6px;
  padding: 0 6px;
}
.mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--label);
  cursor: pointer;
  text-align: left;
}
.mention-item.is-hi, .mention-item:hover { background: var(--hover); }
.mention-item-name { flex: 1; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-item-kind { font-size: 10px; color: var(--label-3); flex: none; }
.mention-empty { margin: 6px 2px; font-size: 11px; color: var(--label-3); }
.mention-menu-foot { margin: 0; font-size: 10px; color: var(--label-4); border-top: 1px solid var(--separator); padding-top: 6px; }

/* 引用缩略图可点击 */
.nd-ref.is-clickable { cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.nd-ref.is-clickable:hover { border-color: var(--brand-line); transform: translateY(-1px); }

/* ============ Lightbox 素材大图预览 ============ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(10, 8, 14, 0.72);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  color: #fff;
}
.lightbox-title { font-size: 13px; font-weight: 600; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox-kind {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 1px 8px;
}
.lightbox-head .icon-btn { margin-left: auto; color: rgba(255, 255, 255, 0.85); }
.lightbox-head .icon-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.lightbox-body {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  max-height: 84vh;
}
.lightbox-body img {
  max-width: 92vw;
  max-height: 84vh;
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  object-fit: contain;
}
.lightbox-body video {
  max-width: 92vw;
  max-height: 84vh;
  border-radius: 10px;
  background: #000;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}
.lightbox-audio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.85);
}
.lightbox-text {
  max-width: 720px;
  max-height: 76vh;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 20px 24px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  line-height: 1.8;
  white-space: pre-wrap;
}