/* 工具 UI。颜色、字体一律用 style.css 的变量，括号里是退回值。类名全部 t- 前缀，只作用在 .tool 内。 */
.tool {
  --t-on-accent: var(--on-accent, var(--surface, #fff));
  --t-ctl: 6px;
  --t-btn: 32px;
  font-family: var(--font-sans, system-ui, -apple-system, 'Segoe UI', sans-serif);
  color: var(--ink, #0a0a0a);
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.tool *, .tool *::before, .tool *::after { box-sizing: border-box; }
.tool [hidden] { display: none !important; }
.tool .t-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; }
.tool :focus-visible { outline: 2px solid var(--accent, #1f3fbf); outline-offset: 2px; }
.tool .t-meta { margin: 0; font-size: 12px; line-height: 1.5; color: var(--mute, #6b6b66); }
.tool .t-label { font-size: 12px; font-weight: 500; color: var(--mute, #6b6b66); }
.tool .t-lead { margin: 0 0 8px; font-size: 14px; font-weight: 500; color: var(--ink-2, #44443f); }
.tool .t-fine { margin: 12px 0 0; font-size: 14px; color: var(--ink-2, #44443f); }
.tool .t-fine + .t-meta { margin-top: 4px; }
.tool .t-h2 { margin: 0; font: 600 20px/1.3 var(--font-sans, system-ui, sans-serif); }
.tool .t-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tool .t-row--between { justify-content: space-between; margin-top: 16px; }

/* 卡片：唯一容器 */
.tool .t-card { background: var(--surface, #fff); border: 1px solid var(--line, #e3e3df); border-radius: 8px; padding: 16px; }

/* 按钮 */
.tool .t-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--t-btn); padding: 0 12px; border-radius: var(--t-ctl); border: 1px solid transparent; font: 500 14px/1 var(--font-sans, system-ui, sans-serif); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color 0.15s, border-color 0.15s, opacity 0.15s; }
.tool .t-btn--primary { background: var(--accent, #1f3fbf); color: var(--t-on-accent); }
.tool .t-btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent, #1f3fbf) 88%, var(--ink, #0a0a0a)); }
.tool .t-btn--primary:disabled { opacity: 0.45; cursor: not-allowed; }
.tool .t-btn--primary.is-loading { opacity: 0.8; cursor: progress; }
.tool .t-btn--secondary { background: var(--surface, #fff); color: var(--ink, #0a0a0a); border-color: var(--line, #e3e3df); }
.tool .t-btn--secondary:hover:not(:disabled) { border-color: var(--ink-2, #44443f); }
.tool .t-btn--secondary:disabled { color: var(--mute, #6b6b66); cursor: not-allowed; }
.tool .t-btn--sm { height: 28px; padding: 0 10px; }
.tool .t-textbtn { background: none; border: 0; padding: 0; color: var(--accent, #1f3fbf); font: 500 14px/1.4 var(--font-sans, system-ui, sans-serif); cursor: pointer; }
.tool .t-textbtn:hover { text-decoration: underline; }
.tool .t-go { min-width: 132px; }
.tool .t-spin { display: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: t-spin 0.8s linear infinite; }
.tool .is-loading .t-spin { display: inline-block; }
@keyframes t-spin { to { transform: rotate(360deg); } }
.tool .t-icon { flex: none; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--t-ctl); background: var(--surface, #fff); border: 1px solid var(--line, #e3e3df); color: var(--ink, #0a0a0a); cursor: pointer; }
.tool .t-icon:hover { border-color: var(--ink-2, #44443f); }
.tool .t-ico { font-size: 11px; line-height: 1; }

/* 页签 */
.tool .t-tabs { display: flex; border-bottom: 1px solid var(--line, #e3e3df); margin: 0 0 16px; }
.tool .t-tab { display: inline-flex; align-items: center; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 12px; font: 500 14px/1.4 var(--font-sans, system-ui, sans-serif); color: var(--ink-2, #44443f); cursor: pointer; }
.tool .t-tab:hover { color: var(--ink, #0a0a0a); }
.tool .t-tab[aria-selected='true'] { color: var(--accent, #1f3fbf); border-bottom-color: var(--accent, #1f3fbf); }

/* 输入 */
.tool .t-panel { display: flex; flex-direction: column; gap: 8px; }
.tool .t-field { display: block; width: 100%; min-width: 0; background: var(--surface, #fff); color: var(--ink, #0a0a0a); border: 1px solid var(--line, #e3e3df); border-radius: var(--t-ctl); font: 400 16px/1.4 var(--font-sans, system-ui, sans-serif); padding: 10px 12px; }
.tool .t-field::placeholder { color: var(--mute, #6b6b66); }
.tool .t-field:hover { border-color: var(--ink-2, #44443f); }
.tool .t-field[aria-invalid='true'] { border-color: var(--warn, #b45309); }
.tool textarea.t-field { min-height: 132px; resize: vertical; }
.tool .t-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 132px; border: 1px dashed var(--ink-2, #44443f); border-radius: var(--t-ctl); background: var(--surface, #fff); text-align: center; padding: 16px; cursor: pointer; position: relative; font-size: 14px; color: var(--ink-2, #44443f); }
.tool .t-drop.is-over { border-color: var(--accent, #1f3fbf); background: color-mix(in srgb, var(--accent, #1f3fbf) 6%, var(--surface, #fff)); }
.tool .t-drop:focus-within { outline: 2px solid var(--accent, #1f3fbf); outline-offset: 2px; }
.tool .t-msg, .tool .t-note { margin: 8px 0 0; padding: 8px 12px; border-radius: var(--t-ctl); font-size: 14px; background: var(--surface, #fff); border: 1px solid var(--line, #e3e3df); color: var(--ink-2, #44443f); }
.tool .t-msg[data-kind='warn'], .tool .t-note[data-kind='warn'] { background: var(--warn-soft, #fef3e2); color: var(--warn, #b45309); border-color: transparent; }
.tool .t-note { margin: 0 0 16px; }

/* 分段选择 */
.tool .t-grp { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tool .t-seg { display: inline-flex; border: 1px solid var(--line, #e3e3df); border-radius: var(--t-ctl); overflow: hidden; background: var(--surface, #fff); max-width: 100%; }
.tool .t-seg button { height: var(--t-btn); padding: 0 12px; border: 0; border-right: 1px solid var(--line, #e3e3df); background: none; color: var(--ink-2, #44443f); font: 500 14px/1 var(--font-sans, system-ui, sans-serif); cursor: pointer; white-space: nowrap; }
.tool .t-seg button:last-child { border-right: 0; }
.tool .t-seg button:hover { color: var(--ink, #0a0a0a); }
.tool .t-seg button[aria-pressed='true'] { color: var(--accent, #1f3fbf); background: color-mix(in srgb, var(--accent, #1f3fbf) 8%, var(--surface, #fff)); }

/* 工作区 */
.tool .t-work { margin-top: 32px; }
.tool .t-work:empty { margin: 0; }
.tool .t-pick { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.tool .t-pars { width: 100%; max-height: 360px; overflow: auto; border: 1px solid var(--line, #e3e3df); border-radius: var(--t-ctl); }
.tool .t-par { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-top: 1px solid var(--line, #e3e3df); font-size: 14px; line-height: 1.5; cursor: pointer; }
.tool .t-par:first-child { border-top: 0; }
.tool .t-par input { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: var(--accent, #1f3fbf); }
.tool .t-edhead { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.tool .t-bar-row { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.tool .t-progress { margin: 0 0 16px; }
.tool .t-bar { height: 4px; border-radius: 2px; background: var(--line, #e3e3df); overflow: hidden; margin-bottom: 6px; }
.tool .t-bar i { display: block; height: 100%; width: 0; background: var(--accent, #1f3fbf); transition: transform 0.15s; }
.tool .t-ed { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }

/* 镜头行 */
.tool .t-scenes { padding: 0; min-width: 0; overflow: hidden; }
.tool .t-scene { display: grid; grid-template-columns: 24px 120px minmax(0, 1fr) auto; gap: 16px; padding: 16px; border-top: 1px solid var(--line, #e3e3df); align-items: start; cursor: pointer; }
.tool .t-scene:first-child { border-top: 0; }
.tool .t-scene.is-active { box-shadow: inset 3px 0 0 var(--accent, #1f3fbf); }
.tool .t-n { font-size: 12px; color: var(--mute, #6b6b66); padding-top: 2px; }
.tool .t-thumb { aspect-ratio: 16/10; border-radius: 4px; background: var(--line, #e3e3df); color: var(--ink-2, #44443f); font-size: 12px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px; overflow: hidden; }
.tool .t-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; margin: -4px; width: calc(100% + 8px); height: calc(100% + 8px); max-width: none; }
.tool .t-thumb.is-card { font-weight: 600; line-height: 1.3; background: var(--frame, #0a0a0a); color: #fff; }
.tool .t-thumb.t-card-gradient { background: linear-gradient(135deg, #1f3fbf, #6d28d9); color: #fff; }
.tool .t-thumb.t-card-quote { background: #f7f7f5; color: #0a0a0a; box-shadow: inset 4px 0 0 #1f3fbf; }
.tool .t-sbody { min-width: 0; }
.tool .t-stext { display: block; width: 100%; resize: none; overflow: hidden; background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 2px 4px; margin: 0 0 6px -4px; font: 400 14px/1.6 var(--font-sans, system-ui, sans-serif); color: var(--ink, #0a0a0a); }
.tool .t-stext:hover { border-color: var(--line, #e3e3df); }
.tool .t-stext:focus { border-color: var(--accent, #1f3fbf); background: var(--surface, #fff); }
.tool .t-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.tool .t-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid var(--line, #e3e3df); border-radius: 4px; font: 400 12px/1 var(--font-sans, system-ui, sans-serif); color: var(--ink-2, #44443f); background: var(--paper, #f7f7f5); }
.tool .t-tag--edit { border-style: dashed; color: var(--accent, #1f3fbf); background: none; cursor: pointer; font-weight: 500; }
.tool .t-kwinput { width: 100%; max-width: 280px; margin-bottom: 6px; padding: 6px 8px; border: 1px solid var(--accent, #1f3fbf); border-radius: var(--t-ctl); background: var(--surface, #fff); color: var(--ink, #0a0a0a); font: 400 16px/1.4 var(--font-sans, system-ui, sans-serif); }
.tool .t-swarn { margin: 0 0 6px; color: var(--warn, #b45309); font-size: 12px; }
.tool .t-scredit { margin: 0; font-size: 12px; color: var(--mute, #6b6b66); overflow-wrap: anywhere; }
.tool .t-scredit a { color: inherit; text-decoration: underline; }
.tool .t-sacts { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.tool .t-secs { width: 72px; padding: 4px 6px; border: 1px solid var(--line, #e3e3df); border-radius: 4px; background: var(--surface, #fff); color: var(--ink, #0a0a0a); font: 400 16px/1.2 var(--font-sans, system-ui, sans-serif); }

/* 预览与导出 */
.tool .t-preview { position: sticky; top: 16px; min-width: 0; }
.tool .t-frame { margin: 0 auto; background: var(--frame, #0a0a0a); border-radius: 8px; overflow: hidden; line-height: 0; }
.tool .t-frame[data-ratio='9:16'] { max-width: 240px; }
.tool .t-frame[data-ratio='1:1'] { max-width: 280px; }
.tool .t-frame[data-ratio='16:9'] { max-width: 100%; }
.tool .t-canvas { width: 100%; height: auto; display: block; }
.tool .t-player { display: flex; align-items: center; gap: 8px; margin: 12px auto 0; max-width: 100%; }
.tool .t-seek { flex: 1; min-width: 0; accent-color: var(--accent, #1f3fbf); height: 24px; }
.tool .t-time { white-space: nowrap; }
.tool .t-export { border-top: 1px solid var(--line, #e3e3df); margin-top: 16px; padding-top: 16px; }
.tool .t-export-btn { width: 100%; }
.tool .t-exportmsg { margin: 8px 0 0; font-size: 14px; color: var(--ink-2, #44443f); }
.tool .t-exportmsg[data-kind='warn'] { color: var(--warn, #b45309); background: var(--warn-soft, #fef3e2); padding: 8px 12px; border-radius: var(--t-ctl); }
.tool .t-exportmsg:empty { display: none; }
.tool .t-exportmsg a, .tool .t-upsell a { color: var(--accent, #1f3fbf); }
.tool .t-result { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-top: 12px; }
.tool .t-good { margin: 0; padding: 6px 10px; border-radius: var(--t-ctl); background: var(--good-soft, #e8f7ed); color: var(--good, #15803d); font-size: 14px; }
.tool .t-resultvideo { width: 100%; max-height: 360px; border-radius: 6px; background: var(--frame, #0a0a0a); }
.tool .t-credits { width: 100%; resize: vertical; padding: 8px; border: 1px solid var(--line, #e3e3df); border-radius: 4px; background: var(--paper, #f7f7f5); color: var(--ink-2, #44443f); font: 400 12px/1.5 var(--font-sans, system-ui, sans-serif); }
.tool .t-upsell { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line, #e3e3df); font-size: 14px; color: var(--ink-2, #44443f); }
.tool .t-credit { margin: 12px 0 0; font-size: 12px; color: var(--mute, #6b6b66); }
.tool .t-credit a { color: inherit; text-decoration: underline; }

/* 窄屏 */
@media (max-width: 900px) {
  .tool .t-ed { grid-template-columns: minmax(0, 1fr); }
  .tool .t-preview { position: static; order: -1; }
}
@media (max-width: 640px) {
  .tool { --t-btn: 44px; }
  .tool .t-btn, .tool .t-btn--sm, .tool .t-icon, .tool .t-seg button, .tool .t-tab, .tool .t-tag--edit { min-height: 44px; }
  .tool .t-btn--sm { height: 44px; }
  .tool .t-icon { width: 44px; height: 44px; }
  .tool .t-textbtn { min-height: 44px; padding: 0 8px; display: inline-flex; align-items: center; }
  .tool .t-tabs { overflow-x: auto; }
  .tool .t-tab { flex: 1; justify-content: center; padding: 8px; white-space: nowrap; }
  .tool .t-row--between { flex-direction: column; align-items: stretch; }
  .tool .t-row--between .t-row { justify-content: space-between; }
  .tool .t-go { flex: 1; }
  .tool .t-grp { width: 100%; }
  .tool .t-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); width: 100%; }
  .tool .t-bar-row { gap: 16px; }
  .tool .t-par { min-height: 44px; }
  .tool .t-par input { width: 24px; height: 24px; }
  .tool .t-scene { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .tool .t-n { display: none; }
  .tool .t-sacts { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
  .tool .t-seek { height: 44px; }
  .tool .t-secs { min-height: 44px; }
  .tool .t-kwinput { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tool * { animation: none !important; transition: none !important; }
  .tool .t-spin { animation: none !important; border-right-color: currentColor; }
}