/* 领先短视频生产工作台 v16 · LibTV workflow logic, Apple-inspired light UI */
.v15-studio {
  --v16-blue: #087cf0;
  --v16-ink: #17191d;
  --v16-sub: #697482;
  --v16-line: #dfe5ec;
  --v16-soft: #f4f7fa;
  --v16-green: #19a66f;
  background: #f3f5f8;
  color: var(--v16-ink);
}

.v15-topbar {
  height: 74px;
  flex-basis: 74px;
  padding: 0 22px;
  border-color: rgba(31, 45, 61, .09);
  box-shadow: 0 1px 22px rgba(31, 45, 61, .045);
}

.v15-project-name small,
.v15-project-switch,
.v15-revision,
.v15-cloud-state,
.v15-top-actions > .v15-save-version,
.v15-view-modes button {
  font-size: 12px;
}

.v15-project-name input { width: 220px; font-size: 15px; }
.v15-shell { grid-template-columns: 124px minmax(0, 1fr); }
.v15-palette { padding: 16px 12px; }
.v15-palette-title b { font-size: 13px; }
.v15-palette-title span { font-size: 11px; }
.v15-palette > button {
  height: 58px;
  margin-bottom: 4px;
  border-radius: 14px;
  gap: 5px;
  font-size: 11px;
}
.v15-palette > button .material-icons-round { font-size: 21px; }

.v15-studio .v13-canvas-toolbar {
  min-height: 64px;
  height: 64px;
  padding: 10px 16px;
}
.v15-studio .v13-tool-group { gap: 5px; }
.v15-studio .v13-tool-group button {
  height: 40px;
  padding: 0 12px;
  border-radius: 11px;
  font-size: 11px;
}
.v15-studio .v13-tool-group button .material-icons-round { font-size: 18px; }
.v15-studio .v13-tool-group .v16-template-button {
  border: 1px solid #cfe3f8;
  background: #eff7ff;
  color: #096fcf;
  font-weight: 700;
}

.v15-studio .v13-canvas-layout { grid-template-columns: minmax(0, 1fr) 380px; }
.v15-studio .v13-canvas-stage {
  background-color: #f6f8fb;
  background-image: radial-gradient(#c9d2de 1px, transparent 1px);
  background-size: 24px 24px;
}
.v15-studio .v13-canvas-note { font-size: 11px; }

.v15-studio .v13-node {
  width: 280px;
  min-height: 196px;
  padding: 15px;
  border-color: #dce3eb;
  border-radius: 18px;
  box-shadow: 0 14px 38px rgba(42, 60, 82, .09);
}
.v15-studio .v13-node-head small { font-size: 10px; }
.v15-studio .v13-node-head strong { font-size: 13px; }
.v15-studio .v13-node > p { min-height: 48px; font-size: 11px; line-height: 1.6; }
.v15-node-placeholder { height: 74px; font-size: 10px; }
.v15-node-model-chip { height: 30px; font-size: 10px; }
.v15-studio .v13-node-foot { min-height: 31px; font-size: 10px; }
.v15-studio .v13-node-foot button { height: 26px; font-size: 10px; }
.v15-studio .v13-port { top: 86px; }

.v15-studio .v13-inspector { padding: 22px; }
.v15-studio .v13-inspector-title small { font-size: 10px; }
.v15-studio .v13-inspector-title strong { font-size: 15px; }
.v15-node-state { max-width: 126px; font-size: 10px; }
.v15-studio .v13-inspector label { margin-top: 16px; font-size: 11px; }
.v15-studio .v13-inspector .v12-input,
.v15-studio .v13-inspector select { height: 46px; font-size: 13px; }
.v15-studio .v13-inspector .v12-textarea { min-height: 210px; padding: 13px; font-size: 13px; }
.v15-node-model-select { min-height: 72px; }
.v15-node-model-select b { font-size: 12px; }
.v15-node-model-select small { font-size: 10px; }
.v15-node-model-select > em { font-size: 10px; }
.v15-studio .v13-inspector-actions { gap: 8px; margin-top: 16px; }
.v15-studio .v13-inspector-actions .v12-btn {
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 11px;
}
.v15-production-rule b { font-size: 11px; }
.v15-production-rule span { font-size: 10px; }

.v15-script-review { padding: 14px; }
.v15-script-review > header b { font-size: 12px; }
.v15-script-review > header span,
.v15-script-review > header > em,
.v15-script-core span,
.v15-script-core small,
.v15-script-review > label,
.v15-hook-options button,
.v15-shot-review p,
.v15-shot-review em { font-size: 10px !important; }
.v15-script-core strong,
.v15-shot-review b { font-size: 11px; }

.v16-gate-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 12px;
}
.v16-gate-strip > div {
  min-width: 0;
  padding: 8px;
  border: 1px solid #e1e7ee;
  border-radius: 11px;
  background: #f7f9fb;
  display: flex;
  align-items: center;
  gap: 6px;
}
.v16-gate-strip i {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  border-radius: 50%;
  background: #e8edf3;
  color: #7a8591;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 10px;
}
.v16-gate-strip i .material-icons-round { font-size: 14px; }
.v16-gate-strip b,
.v16-gate-strip small { display: block; white-space: nowrap; }
.v16-gate-strip b { font-size: 9px; }
.v16-gate-strip small { margin-top: 2px; color: #9099a4; font-size: 8px; }
.v16-gate-strip > .done { border-color: #ccebdd; background: #effaf4; }
.v16-gate-strip > .done i { background: var(--v16-green); color: #fff; }

.v16-storyboard-panel {
  display: none;
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 22px;
  background: #f3f5f8;
  overflow: auto;
}
.v15-studio.storyboard-mode .v13-canvas-layout { grid-template-columns: minmax(0, 1fr); }
.v15-studio.storyboard-mode .v13-canvas-stage,
.v15-studio.storyboard-mode .v13-inspector,
.v15-studio.storyboard-mode .v13-timeline-head,
.v15-studio.storyboard-mode .v13-timeline { display: none; }
.v15-studio.storyboard-mode .v16-storyboard-panel { display: block; }

.v16-storyboard-head {
  position: sticky;
  z-index: 5;
  top: -22px;
  margin: -22px -22px 18px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--v16-line);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.v16-board-steps { display: flex; align-items: center; gap: 10px; }
.v16-board-step { display: flex; align-items: center; gap: 9px; }
.v16-board-step:not(:last-child)::after {
  content: '';
  width: 44px;
  height: 1px;
  margin-left: 3px;
  background: #d8dee6;
}
.v16-board-step i {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 2px solid #cbd3dc;
  border-radius: 50%;
  color: #687481;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.v16-board-step.done i { border-color: var(--v16-green); background: var(--v16-green); color: #fff; }
.v16-board-step i .material-icons-round { font-size: 17px; }
.v16-board-step b,
.v16-board-step small { display: block; white-space: nowrap; }
.v16-board-step b { font-size: 12px; }
.v16-board-step small { margin-top: 3px; color: #8a949f; font-size: 10px; }
.v16-storyboard-head > div:last-child { display: flex; align-items: center; gap: 10px; }
.v16-storyboard-head > div:last-child > span { max-width: 240px; color: #6e7884; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v16-storyboard-head button,
.v16-storyboard-footer button,
.v16-storyboard-table button,
.v16-storyboard-empty button {
  height: 36px;
  padding: 0 12px;
  border: 1px solid #dbe2e9;
  border-radius: 10px;
  background: #fff;
  color: #4f5a66;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 650;
}
.v16-storyboard-head button .material-icons-round { font-size: 16px; }

.v16-storyboard-summary {
  display: grid;
  grid-template-columns: 1.4fr .7fr .6fr 1.3fr;
  gap: 12px;
  margin-bottom: 16px;
}
.v16-storyboard-summary > div {
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid var(--v16-line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(40, 56, 74, .04);
}
.v16-storyboard-summary small,
.v16-storyboard-summary b { display: block; }
.v16-storyboard-summary small { color: #89939f; font-size: 10px; }
.v16-storyboard-summary b { margin-top: 6px; font-size: 12px; line-height: 1.45; }

.v16-storyboard-table-wrap {
  border: 1px solid var(--v16-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(40, 56, 74, .055);
  overflow: auto;
}
.v16-storyboard-table { width: 100%; min-width: 1500px; border-collapse: collapse; table-layout: fixed; }
.v16-storyboard-table th,
.v16-storyboard-table td { padding: 13px 12px; border-right: 1px solid #e6ebf0; border-bottom: 1px solid #e6ebf0; vertical-align: top; text-align: left; }
.v16-storyboard-table th:last-child,
.v16-storyboard-table td:last-child { border-right: 0; }
.v16-storyboard-table tbody tr:last-child td { border-bottom: 0; }
.v16-storyboard-table th { background: #f7f9fb; color: #66717d; font-size: 10px; font-weight: 750; }
.v16-storyboard-table td { color: #3c4651; font-size: 11px; line-height: 1.55; }
.v16-storyboard-table td:nth-child(1) { width: 48px; text-align: center; }
.v16-storyboard-table td:nth-child(2) { width: 50px; }
.v16-storyboard-table td:nth-child(3) { width: 260px; }
.v16-storyboard-table td:nth-child(4) { width: 170px; }
.v16-storyboard-table td:nth-child(5) { width: 230px; }
.v16-storyboard-table td:nth-child(6) { width: 145px; }
.v16-storyboard-table td:nth-child(7) { width: 95px; }
.v16-storyboard-table td:nth-child(8) { width: 135px; }
.v16-storyboard-table td:nth-child(9) { width: 105px; }
.v16-storyboard-table td:nth-child(10) { width: 90px; }
.v16-storyboard-table p { margin: 4px 0 0; }
.v16-storyboard-table small { display: block; margin-top: 5px; color: #84909c; }
.v16-model-pill,
.v16-status { display: inline-block; padding: 5px 8px; border-radius: 99px; background: #eef5fc; color: #3476b7; font-size: 10px; }
.v16-status { background: #f1f3f6; color: #7b8590; }
.v16-status.done { background: #eaf8f0; color: #238558; }
.v16-storyboard-table button { height: 30px; padding: 0 9px; color: var(--v16-blue); }

.v16-storyboard-footer {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--v16-line);
  border-radius: 14px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #6f7a86;
  font-size: 11px;
}
.v16-storyboard-footer > span { display: flex; align-items: center; gap: 6px; }
.v16-storyboard-footer > span .material-icons-round { color: var(--v16-green); font-size: 18px; }
.v16-storyboard-footer > div { display: flex; gap: 8px; }
.v16-storyboard-footer button.primary { border-color: var(--v16-blue); background: var(--v16-blue); color: #fff; }
.v16-storyboard-empty { min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.v16-storyboard-empty > .material-icons-round { width: 56px; height: 56px; border-radius: 18px; background: #eaf4ff; color: var(--v16-blue); display: grid; place-items: center; font-size: 28px; }
.v16-storyboard-empty h2 { margin: 18px 0 7px; font-size: 20px; }
.v16-storyboard-empty p { max-width: 480px; margin: 0 0 18px; color: #7d8792; font-size: 12px; line-height: 1.6; }

.v15-studio .v13-taskbar { height: 46px; flex-basis: 46px; }
.v15-studio .v13-taskbar > div { font-size: 10px; }
.v15-studio .v13-timeline-head strong { font-size: 12px; }
.v15-studio .v13-timeline-head span,
.v15-studio .v13-timeline-head button,
.v15-studio .v13-track-clip small { font-size: 10px; }
.v15-studio .v13-track-clip b { font-size: 11px; }

@media (max-width: 1440px) {
  .v15-shell { grid-template-columns: 104px minmax(0, 1fr); }
  .v15-studio .v13-canvas-layout { grid-template-columns: minmax(0, 1fr) 340px; }
  .v15-studio .v13-tool-group button { padding: 0 9px; }
  .v16-storyboard-head { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .v15-studio *, .v15-studio *::before, .v15-studio *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}