#h3-composer-tools{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:12px;
  margin:16px 0 4px;
}
.h3-lang-field{display:flex;flex-direction:column;gap:6px;min-width:220px}
.h3-lang-field span{color:var(--muted);font-size:12px}
.h3-lang-field[hidden]{display:none!important}
.h3-lang-field select{
  height:40px;
  border:1px solid var(--line);
  background:var(--field);
  color:var(--ink);
  border-radius:12px;
  padding:0 34px 0 12px;
  outline:none;
}
.h3-lang-field select:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.h3-field-title{display:inline-flex;align-items:center;gap:6px;min-height:18px}
.h3-help-button{
  position:relative;
  display:inline-grid;
  place-items:center;
  width:17px;
  height:17px;
  padding:0;
  border:1px solid color-mix(in srgb,var(--muted) 46%,transparent);
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font:700 11px/1 system-ui,sans-serif;
  cursor:help;
}
.h3-help-button:hover,.h3-help-button:focus-visible,.h3-help-button.is-open{
  border-color:var(--accent);
  color:var(--accent);
  outline:none;
}
.h3-help-button::after{
  content:attr(data-help);
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  z-index:80;
  width:min(280px,calc(100vw - 36px));
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface);
  color:var(--ink);
  box-shadow:0 14px 34px #00000024;
  font:400 12px/1.55 system-ui,sans-serif;
  text-align:left;
  white-space:normal;
  pointer-events:none;
  display:none;
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}
.h3-help-button:hover::after,.h3-help-button:focus-visible::after,.h3-help-button.is-open::after{
  display:block;
}
.h3-audio-mode-help{
  flex:1 0 100%;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:6px 10px;
  align-items:start;
  margin-top:2px;
  padding:11px 13px;
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));
  border-radius:12px;
  background:color-mix(in srgb,var(--accent) 5%,var(--surface));
}
.h3-audio-mode-help strong{color:var(--ink);font-size:12px;white-space:nowrap}
.h3-audio-mode-help span{color:var(--muted);font-size:12px;line-height:1.55}
.h3-xgpu-token-field{
  flex:1 0 100%;display:grid;grid-template-columns:1fr;
  gap:12px;align-items:center;padding:12px 13px;border:1px solid var(--line);
  border-radius:12px;background:var(--field)
}
.h3-xgpu-token-field[hidden]{display:none!important}
.h3-xgpu-token-field>span{display:flex;flex-direction:column;gap:3px}
.h3-xgpu-token-field b{font-size:12px;color:var(--ink)}
.h3-xgpu-token-field small{font-size:11px;color:var(--muted)}
.h3-xgpu-token-field input{width:100%;height:38px;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);padding:0 11px;outline:none}
.h3-xgpu-token-field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}
#h3-audio-notice{
  position:fixed;
  left:50%;
  bottom:28px;
  z-index:100;
  width:min(520px,calc(100vw - 32px));
  padding:13px 16px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));
  border-radius:13px;
  background:var(--surface);
  color:var(--ink);
  box-shadow:0 16px 40px #0000002e;
  font-size:13px;
  line-height:1.5;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,12px);
  transition:opacity .2s ease,transform .2s ease;
}
#h3-audio-notice.is-visible{opacity:1;transform:translate(-50%,0)}
#h3-dubbing-phase{
  width:100%;
  box-sizing:border-box;
  margin:16px 0 4px;
  padding:18px;
  border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));
  border-radius:18px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 6%,var(--surface)),var(--surface) 54%);
  color:var(--ink);
  box-shadow:0 12px 32px color-mix(in srgb,var(--accent) 7%,transparent);
}
#h3-dubbing-phase[hidden]{display:none!important}
.h3-dub-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.h3-dub-head>div{display:flex;flex-direction:column;gap:3px}
.h3-dub-head strong{font-size:16px;letter-spacing:.01em}
.h3-dub-head span{font-size:12px;color:var(--muted)}
.h3-dub-head em{max-width:55%;padding:7px 10px;border-radius:10px;background:#dc5b5b16;color:#d95757;font-size:12px;font-style:normal;line-height:1.45}
.h3-dub-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0 0 18px;padding:0;list-style:none}
.h3-dub-steps li{position:relative;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}
.h3-dub-steps li:not(:last-child)::after{content:"";position:absolute;left:31px;right:8px;top:13px;height:1px;background:var(--line)}
.h3-dub-steps b{position:relative;z-index:1;display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:11px}
.h3-dub-steps span{position:relative;z-index:1;background:var(--surface);padding-right:9px}
.h3-dub-steps .is-current{color:var(--ink);font-weight:700}
.h3-dub-steps .is-current b{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent)}
.h3-dub-steps .is-done{color:var(--accent)}
.h3-dub-steps .is-done b{border-color:color-mix(in srgb,var(--accent) 42%,var(--line));background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--accent)}
.h3-dub-intro{display:flex;flex-direction:column;gap:5px;padding:14px;border:1px dashed color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:13px;background:color-mix(in srgb,var(--accent) 3%,var(--field))}
.h3-dub-intro b{font-size:13px}.h3-dub-intro span{color:var(--muted);font-size:12px;line-height:1.6}
.h3-dub-lines{display:flex;flex-direction:column;gap:12px}
.h3-dub-line{padding:15px;border:1px solid var(--line);border-radius:15px;background:var(--surface)}
.h3-dub-line header{display:flex;align-items:center;gap:10px}
.h3-dub-line header>b{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:color-mix(in srgb,var(--accent) 10%,var(--field));color:var(--accent);font-size:11px}
.h3-dub-line header>strong{font-size:14px}
.h3-dub-line header>label{display:flex;align-items:center;gap:6px;margin-left:auto;color:var(--muted);font-size:11px}
.h3-dub-line select,.h3-dub-line textarea{border:1px solid var(--line);border-radius:9px;background:var(--field);color:var(--ink);outline:none}
.h3-dub-line select{height:32px;padding:0 25px 0 9px}
.h3-dub-line textarea{width:100%;box-sizing:border-box;padding:9px 10px;resize:vertical;font:inherit;line-height:1.5}
.h3-dub-line select:focus,.h3-dub-line textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}
.h3-dub-line blockquote{margin:12px 0;padding:0;color:var(--ink);font-size:13px;line-height:1.65}
.h3-dub-text{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:11px}
.h3-dub-sliders{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.h3-dub-sliders label{display:grid;grid-template-columns:1fr auto;gap:7px 10px;align-items:center;color:var(--ink);font-size:11px}
.h3-dub-sliders label>span{grid-column:1/-1;display:flex;justify-content:space-between}.h3-dub-sliders small{color:var(--muted);font-weight:400}
.h3-dub-sliders input{width:100%;accent-color:var(--accent)}
.h3-dub-sliders output,.h3-dub-advanced output{min-width:36px;color:var(--accent);font:700 11px/1 ui-monospace,monospace;text-align:right}
.h3-dub-advanced{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.h3-dub-advanced summary{cursor:pointer;color:var(--ink);font-size:12px;font-weight:700;list-style:none}
.h3-dub-advanced summary::-webkit-details-marker{display:none}.h3-dub-advanced summary::after{content:"⌄";float:right;color:var(--muted)}.h3-dub-advanced[open] summary::after{content:"⌃"}
.h3-dub-advanced summary small{margin-left:6px;color:var(--muted);font-weight:400}
.h3-dub-advanced>div{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;padding-top:12px}
.h3-dub-advanced label{display:grid;grid-template-columns:38px 1fr 34px;gap:8px;align-items:center;color:var(--muted);font-size:11px}
.h3-dub-advanced input{width:100%;accent-color:var(--accent)}
.h3-dub-empty{margin-top:12px;padding:10px;border-radius:10px;background:var(--field);color:var(--muted);font-size:11px;text-align:center}
.h3-dub-takes{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.h3-dub-take{display:grid;grid-template-columns:16px 54px minmax(0,1fr) 58px;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:11px;background:var(--field);font-size:11px;cursor:pointer}
.h3-dub-take.is-selected{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent) 6%,var(--field))}
.h3-dub-take input{accent-color:var(--accent)}.h3-dub-take audio{width:100%;height:30px}.h3-dub-take small{color:var(--muted);text-align:right}
.h3-dub-take-note{display:block;margin-top:6px;color:var(--muted);font-size:10px;text-align:right}
.h3-dub-line footer{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.h3-dub-line footer button{height:32px;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font-size:11px;cursor:pointer}
.h3-dub-line footer button:last-child{border-color:color-mix(in srgb,var(--accent) 42%,var(--line));color:var(--accent)}
.h3-dub-line footer button:hover{border-color:var(--accent)}.h3-dub-line footer button:disabled{opacity:.5;cursor:default}
@media (max-width:760px){
  .h3-lang-field{min-width:min(100%,160px);flex:1 1 160px}
  .h3-audio-mode-help{grid-template-columns:1fr;gap:4px}
  .h3-xgpu-token-field{grid-template-columns:1fr}
  #h3-dubbing-phase{padding:14px}
  .h3-dub-head{flex-direction:column}.h3-dub-head em{max-width:100%}
  .h3-dub-line header{flex-wrap:wrap}.h3-dub-line header>label{width:100%;margin-left:0}.h3-dub-line header select{flex:1}
  .h3-dub-sliders,.h3-dub-advanced>div{grid-template-columns:1fr}
  .h3-dub-take{grid-template-columns:16px 48px 1fr}.h3-dub-take small{display:none}.h3-dub-take audio{min-width:0}
}
#h3-dialogue-lang{
  height:40px;
  border:1px solid var(--line);
  background:var(--field);
  color:var(--ink);
  border-radius:12px;
  padding:0 12px;
}
#h3-tips-btn{
  height:40px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  border-radius:12px;
  padding:0 14px;
  cursor:pointer;
}
#h3-tips-btn:hover{border-color:var(--line-strong);color:var(--accent)}
#h3-tips-mask{
  position:fixed;
  inset:0;
  z-index:40;
  background:#00000073;
  display:grid;
  place-items:center;
  padding:24px;
}
#h3-tips-mask[hidden]{display:none!important}
.h3-tips-dialog{
  position:relative;
  width:min(720px,100%);
  max-height:min(82vh,760px);
  overflow:auto;
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:28px 28px 24px;
}
.h3-tips-close{
  position:absolute;
  top:12px;
  right:14px;
  width:36px;
  height:36px;
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:28px;
  cursor:pointer;
}
.h3-tips-body h3{margin:0 0 8px;font-size:22px}
.h3-tips-body p{margin:0 0 14px;color:var(--muted);font-size:13px}
.h3-tips-body ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:10px;font-size:13px;line-height:1.55}
.h3-tips-body code{background:var(--field);padding:1px 6px;border-radius:6px}
.h3-tips-body pre{
  margin:16px 0 0;
  background:var(--field);
  border-radius:14px;
  padding:12px 14px;
  white-space:pre-wrap;
  font-size:12px;
  line-height:1.55;
}

/* ===== 修复提示词光标错位 =====
   透明textarea + 高亮层方案里，@素材token 必须与 textarea 里同样的字占据完全相同的宽度，
   否则 token 之后的文字会漂移，导致“光标在A、删除在B”。
   去掉会撑宽的 padding / 加粗，只保留不影响排版的颜色高亮；缩略图悬浮不受影响。 */
.prompt-mention-token{
  padding:0 !important;
  margin:0 !important;
  font-weight:inherit !important;
  letter-spacing:inherit !important;
  border-radius:2px;
  /* 用内阴影模拟一点点内边距的视觉高亮，但不占据布局宽度 */
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
/* 关键：textarea 与高亮层必须有完全相同的“可排版宽度”，否则换行行数不同→竖向光标错位。
   textarea 出现滚动条会吃掉 ~17px 宽度，而高亮层没有滚动条 → 两者错位。
   用 scrollbar-gutter 让两者都恒定预留滚动条空间，并统一换行规则。 */
.prompt-editor textarea{
  overflow-wrap:break-word !important;
  word-break:normal !important;
  white-space:pre-wrap !important;
  letter-spacing:normal !important;
  scrollbar-width:none !important;          /* Firefox: 滚动条不占宽度 */
}
.prompt-editor textarea::-webkit-scrollbar{  /* Chrome/Edge/Safari: 隐藏滚动条并归零宽度 */
  width:0 !important;
  height:0 !important;
  display:none !important;
}
.h3-cancel-button{
  display:block;
  width:100%;
  margin-top:10px;
  height:44px;
  border:1px solid #ef8585;
  border-radius:13px;
  background:#ef85851f;
  color:#ef8585;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
}
.h3-cancel-button[hidden]{display:none!important}
.h3-cancel-button:hover{filter:brightness(1.08)}
.h3-cancel-button:disabled{opacity:.6;cursor:default}
.prompt-highlight{
  overflow-wrap:break-word !important;
  word-break:normal !important;
  white-space:pre-wrap !important;
  letter-spacing:normal !important;
}