.nc-short-drama-voice {
  --sdv-ink: #172033;
  --sdv-muted: #667085;
  --sdv-line: #e5e7eb;
  --sdv-paper: #fff;
  --sdv-canvas: #f4f3ef;
  --sdv-accent: #8b5cf6;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 300px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  color: var(--sdv-ink);
  background: var(--sdv-canvas);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.nc-short-drama-voice *,
.nc-short-drama-voice *::before,
.nc-short-drama-voice *::after { box-sizing: border-box; }
.nc-sdv-rail,
.nc-sdv-editor,
.nc-sdv-inspector { min-width: 0; overflow: auto; padding: 20px; }
.nc-sdv-rail { border-right: 1px solid var(--sdv-line); background: var(--sdv-paper); }
.nc-sdv-inspector { border-left: 1px solid var(--sdv-line); background: var(--sdv-paper); }
.nc-sdv-rail header,
.nc-sdv-editor > header,
.nc-sdv-inspector header { margin-bottom: 16px; }
.nc-sdv-rail h2,
.nc-sdv-editor h2,
.nc-sdv-inspector h2 { margin: 4px 0 0; }
.nc-sdv-shot,
.nc-sdv-inspector button,
.nc-sdv-line button {
  width: 100%;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--sdv-line);
  border-radius: 10px;
  color: inherit;
  background: var(--sdv-paper);
  text-align: left;
}
.nc-sdv-shot { display: grid; gap: 4px; cursor: default; }
.nc-sdv-shot small { color: var(--sdv-muted); }
.nc-sdv-shot.is-selected {
  border-color: var(--sdv-accent);
  background: color-mix(in srgb, var(--sdv-accent) 8%, var(--sdv-paper));
}
.nc-sdv-shot.is-locked { border-color: #12b76a; }
.nc-sdv-line,
.nc-sdv-empty,
.nc-sdv-timeline {
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid var(--sdv-line);
  border-radius: 12px;
  background: var(--sdv-paper);
}
.nc-sdv-line header { display: flex; justify-content: space-between; gap: 12px; }
.nc-sdv-line.has-conflict { border-color: #f04438; box-shadow: 0 0 0 2px #fee4e2; }
.nc-sdv-line.is-playing { border-color: var(--sdv-accent); box-shadow: 0 0 0 2px #ede9fe; }
.nc-sdv-status { color: var(--sdv-muted); font-size: 13px; }
.nc-sdv-line-type {
  padding: 2px 7px;
  border-radius: 999px;
  color: #6941c6;
  background: #f4ebff;
  font-size: 12px;
}
.nc-sdv-line label { display: grid; gap: 6px; margin-top: 12px; }
.nc-sdv-line textarea {
  min-height: 72px;
  resize: vertical;
  border: 1px solid var(--sdv-line);
  border-radius: 8px;
  padding: 9px;
  color: inherit;
  background: #fafafa;
}
.nc-sdv-subtitle-controls {
  display: grid;
  grid-template-columns: minmax(120px, .8fr) minmax(110px, 1fr) minmax(110px, 1fr);
  gap: 10px;
  margin-top: 10px;
  color: var(--sdv-muted);
}
.nc-sdv-subtitle-controls label { margin: 0; }
.nc-sdv-subtitle-controls input[type="number"] {
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--sdv-line);
  border-radius: 8px;
  background: #fff;
}
.nc-sdv-time-note { margin: 8px 0 0; color: var(--sdv-muted); font-size: 12px; }
.nc-sdv-timing {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  padding: 9px 11px;
  border: 1px solid #d0d5dd;
  border-radius: 9px;
  font-size: 12px;
}
.nc-sdv-timing strong { font-size: 13px; }
.nc-sdv-timing button {
  width: auto;
  margin: 0 0 0 auto;
  padding: 6px 10px;
}
.nc-sdv-timing.is-valid {
  color: #067647;
  border-color: #abefc6;
  background: #ecfdf3;
}
.nc-sdv-timing.is-warning {
  color: #93370d;
  border-color: #fedf89;
  background: #fffaeb;
}
.nc-sdv-timing.is-error {
  color: #b42318;
  border-color: #fecdca;
  background: #fffbfa;
}
.nc-sdv-params {
  display: grid;
  grid-template-columns: minmax(150px, 1.5fr) repeat(3, minmax(74px, .6fr));
  gap: 10px;
  margin: 10px 0;
  color: var(--sdv-muted);
}
.nc-sdv-params label { margin: 0; }
.nc-sdv-params select,
.nc-sdv-params input {
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--sdv-line);
  border-radius: 8px;
  background: #fff;
}
.nc-sdv-actions { display: flex; gap: 8px; }
.nc-sdv-actions button { text-align: center; cursor: pointer; }
.nc-sdv-line audio { width: 100%; margin-top: 8px; }
.nc-sdv-timeline header,
.nc-sdv-timeline-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nc-sdv-timeline-track {
  position: relative;
  height: 68px;
  margin: 14px 0;
  border-radius: 10px;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, #f2f4f7 0, #f2f4f7 calc(10% - 1px), #d0d5dd 10%);
}
.nc-sdv-timeline-block {
  position: absolute;
  top: 14px;
  height: 40px;
  min-width: 28px;
  overflow: hidden;
  padding: 7px 9px;
  border: 1px solid #c4b5fd;
  border-radius: 8px;
  color: #4c1d95;
  background: #ede9fe;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: grab;
}
.nc-sdv-timeline-block > i[data-resize-edge] {
  position: absolute;
  inset-block: 0;
  width: 7px;
  cursor: ew-resize;
}
.nc-sdv-timeline-block > i[data-resize-edge="start"] { left: 0; }
.nc-sdv-timeline-block > i[data-resize-edge="end"] { right: 0; }
.nc-sdv-timeline-block.has-conflict { border-color: #f04438; color: #b42318; background: #fee4e2; }
.nc-sdv-timeline-block.is-playing { border-color: #7f56d9; color: #fff; background: #7f56d9; }
.nc-sdv-playhead {
  position: absolute;
  z-index: 3;
  inset: 0 auto 0 0;
  width: 2px;
  background: #f04438;
  pointer-events: none;
}
.nc-sdv-timeline-actions { justify-content: flex-start; }
.nc-sdv-timeline-actions button { width: auto; margin: 0; }
.nc-sdv-blockers {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid #fecdca;
  border-radius: 10px;
  color: #b42318;
  background: #fffbfa;
}
.nc-sdv-blockers p { margin: 6px 0 0; }
.nc-sdv-error { color: #b42318; }
.nc-sdv-history { margin-top: 10px; color: var(--sdv-muted); }
.nc-sdv-history ul { display: grid; gap: 8px; padding: 8px 0 0; list-style: none; }
.nc-sdv-history li { display: flex; align-items: center; gap: 8px; }
.nc-sdv-history li span { flex: 1; }
.nc-sdv-history li button { width: auto; margin: 0; padding: 6px 9px; }
.nc-sdv-inspector dl div { display: flex; justify-content: space-between; }
.nc-sdv-inspector button:disabled,
.nc-sdv-line button:disabled { cursor: not-allowed; opacity: .48; }
.nc-sdv-alignment {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #d9c98f;
  border-radius: 12px;
  background: #fffaf0;
}
.nc-sdv-alignment header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.nc-sdv-alignment header span { color: #8b6b16; font-size: 12px; }
.nc-sdv-alignment dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 10px;
}
.nc-sdv-alignment dl div {
  display: block;
  padding: 8px;
  border-radius: 8px;
  background: #fff;
}
.nc-sdv-alignment dt { color: #667085; font-size: 11px; }
.nc-sdv-alignment dd { margin: 4px 0 0; font-weight: 700; }
.nc-sdv-alignment-note {
  color: #6b5a2b;
  font-size: 12px;
  line-height: 1.5;
}
.nc-sdv-alignment-review {
  padding: 8px 10px;
  border-radius: 8px;
  color: #175cd3;
  background: #eff8ff;
  font-size: 12px;
  line-height: 1.5;
}
.nc-sdv-alignment-editor {
  display: grid;
  gap: 10px;
  max-height: 380px;
  margin: 10px 0;
  padding-right: 4px;
  overflow: auto;
}
.nc-sdv-alignment-line {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid #e5dec3;
  border-radius: 10px;
  background: #fff;
}
.nc-sdv-alignment-line.has-error {
  border-color: #f04438;
  background: #fffbfa;
}
.nc-sdv-alignment-line.has-low-confidence {
  border-color: #f79009;
  background: #fffcf5;
}
.nc-sdv-alignment-line > small { color: #667085; }
.nc-sdv-alignment-words {
  padding: 7px 9px;
  border-radius: 8px;
  background: #f8fafc;
  color: #475467;
  font-size: 12px;
}
.nc-sdv-alignment-words summary { cursor: pointer; font-weight: 700; }
.nc-sdv-alignment-words div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}
.nc-sdv-alignment-word {
  padding: 3px 5px;
  border-radius: 5px;
  background: #ecfdf3;
  color: #027a48;
}
.nc-sdv-alignment-word.is-low {
  background: #fef0c7;
  color: #b54708;
}
.nc-sdv-alignment-unmatched {
  margin: 0;
  padding: 7px 9px;
  border-radius: 7px;
  background: #fee4e2;
  color: #b42318;
  font-size: 12px;
}
.nc-sdv-alignment-boundaries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.nc-sdv-alignment-boundaries label {
  margin: 0;
  color: #667085;
  font-size: 11px;
}
.nc-sdv-alignment-boundaries input {
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid #d0d5dd;
  border-radius: 7px;
  background: #fff;
}
.nc-sdv-alignment-line-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nc-sdv-alignment-line-actions button {
  width: auto;
  margin: 0;
  padding: 6px 8px;
  font-size: 11px;
}
@media (max-width: 980px) {
  .nc-short-drama-voice {
    grid-template-columns: 220px minmax(0, 1fr);
    overflow: auto;
  }
  .nc-sdv-inspector { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--sdv-line); }
}
@media (max-width: 700px) {
  .nc-short-drama-voice { display: block; overflow: auto; }
  .nc-sdv-rail,
  .nc-sdv-editor,
  .nc-sdv-inspector { overflow: visible; border: 0; border-bottom: 1px solid var(--sdv-line); }
  .nc-sdv-params { grid-template-columns: 1fr 1fr; }
  .nc-sdv-subtitle-controls { grid-template-columns: 1fr; }
}