/* Video Studio - 对齐其他工具页（1152px 工作区） */
.vs-page {
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

.vs-hero[hidden] { display: none !important; }

.vs-hero {
  text-align: center;
  padding: 16px 0 24px;
}
.vs-hero-badge {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 9999px;
  background: hsl(var(--surface, 0 0% 98%));
  border: 1px solid hsl(var(--border, 0 0% 90%));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  margin: 0 auto 24px;
  width: fit-content;
  font-size: 14px;
  font-weight: 500;
  color: hsl(var(--fg, 0 0% 9%));
}
.vs-hero-badge svg { color: hsl(var(--primary, 0 0% 9%)); }
.vs-hero-title {
  margin: 0 0 8px;
  font-size: clamp(24px, 5vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: hsl(var(--fg, 0 0% 9%));
}
.vs-hero-desc {
  display: none;
  margin: 0 auto;
  max-width: 640px;
  font-size: 16px;
  line-height: 1.6;
  color: hsl(var(--text-secondary, 0 0% 45%));
}
@media (min-width: 640px) {
  .vs-hero { padding: 48px 0 32px; }
  .vs-hero-badge { display: inline-flex; }
  .vs-hero-desc { display: block; font-size: 18px; }
}

.vs-wrap {
  width: 100%;
}

.vs-history {
  margin-top: 16px;
  max-width: 896px;
  margin-left: auto;
  margin-right: auto;
}
.vs-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.vs-history-title {
  font-size: 13px;
  font-weight: 700;
  color: #18181b;
}
.vs-history-count {
  font-size: 12px;
  color: #a1a1aa;
}
.vs-history-list {
  border-radius: 16px;
  border: 1px solid #e4e4e7;
  background: #fff;
  overflow: hidden;
}
.vs-history-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 14px;
}
.vs-history-item + .vs-history-item { border-top: 1px solid #f4f4f5; }
.vs-history-item:hover { background: #fafafa; }
.vs-history-open {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 4px 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.vs-history-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.vs-history-item:hover .vs-history-actions { opacity: 1; }
@media (max-width: 640px) {
  .vs-history-actions { opacity: 1; }
}
.vs-history-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #e4e4e7;
}
.vs-history-main {
  flex: 1;
  min-width: 0;
}
.vs-history-name {
  font-size: 13px;
  font-weight: 700;
  color: #18181b;
}
.vs-history-name-row .vs-history-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vs-history-time {
  margin-top: 2px;
  font-size: 12px;
  color: #a1a1aa;
}

.vs-board[hidden] { display: none !important; }
.vs-board {
  margin-top: 16px;
}
.vs-board-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 16px 0 14px;
  color: #a1a1aa;
  font-size: 12px;
  font-weight: 600;
}
.vs-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.vs-step-dot {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e4e4e7;
  display: grid;
  place-items: center;
  color: #71717a;
  font-size: 12px;
  font-weight: 700;
}
.vs-step.is-active .vs-step-dot {
  border-color: #18181b;
  color: #18181b;
}
.vs-step.is-done .vs-step-dot {
  background: #18181b;
  border-color: #18181b;
  color: #fff;
}
.vs-step-text { color: #71717a; }
.vs-step.is-active .vs-step-text { color: #18181b; }
.vs-step.is-skipped .vs-step-dot {
  background: #f4f4f5;
  border-color: #e4e4e7;
  color: #a1a1aa;
}
.vs-step.is-skipped .vs-step-text { color: #a1a1aa; }

.vs-board-grid {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 980px) {
  .vs-board-grid { grid-template-columns: 1fr; }
}

.vs-board-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vs-side-card {
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.vs-side-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.vs-side-title { font-size: 13px; font-weight: 700; color: #18181b; }
.vs-side-subtle { font-size: 12px; color: #a1a1aa; }
.vs-side-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e4e4e7;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-top: 10px;
}
.vs-side-btn:hover { background: #fafafa; }
.vs-side-btn-primary {
  background: #18181b;
  color: #fff;
  border-color: #18181b;
}
.vs-side-btn-primary:hover { opacity: 0.92; background: #18181b; }

.vs-project-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  margin-top: 8px;
}
.vs-project-empty {
  margin: 8px 0 0;
  font-size: 12px;
  color: #a1a1aa;
  text-align: center;
  padding: 12px 8px;
}
.vs-project-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid #e4e4e7;
  background: #fff;
  box-sizing: border-box;
}
.vs-project-open {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.vs-project-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.vs-project-item:hover .vs-project-actions,
.vs-project-item.is-active .vs-project-actions {
  opacity: 1;
}
@media (max-width: 980px) {
  .vs-project-actions { opacity: 1; }
}
.vs-project-action-btn {
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid #e4e4e7;
  background: #fff;
  font-size: 10px;
  font-weight: 700;
  color: #52525b;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.vs-project-action-btn:hover { background: #fafafa; }
.vs-project-action-danger { color: #ef4444; border-color: #fecaca; }
.vs-project-action-danger:hover { background: #fef2f2; }
.vs-project-item:hover { background: #fafafa; }
.vs-project-item.is-active { border-color: #d4d4d8; background: #fafafa; }
.vs-project-avatar { width: 34px; height: 34px; border-radius: 999px; background: #e4e4e7; flex-shrink: 0; }
.vs-project-meta { min-width: 0; flex: 1; }
.vs-project-name-row,
.vs-history-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.vs-project-name {
  font-size: 13px;
  font-weight: 700;
  color: #18181b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.vs-project-status {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}
.vs-status-video { background: #dcfce7; color: #15803d; }
.vs-status-keyframe { background: #fef3c7; color: #b45309; }
.vs-status-frame { background: #dbeafe; color: #1d4ed8; }
.vs-status-text { background: #f4f4f5; color: #52525b; }
.vs-status-script { background: #fef3c7; color: #b45309; }
.vs-status-draft { background: #f4f4f5; color: #a1a1aa; }
.vs-project-avatar.has-video,
.vs-history-avatar.has-video {
  background: linear-gradient(135deg, #18181b 0%, #52525b 100%);
}
.vs-project-time { font-size: 12px; color: #a1a1aa; margin-top: 2px; }

.vs-board-main { display: flex; flex-direction: column; gap: 14px; }
.vs-panel {
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.vs-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.vs-panel-title { display: inline-flex; align-items: center; gap: 10px; }
.vs-panel-title-main { font-size: 13px; font-weight: 800; color: #18181b; }
.vs-panel-title-sub { font-size: 12px; color: #a1a1aa; margin-top: 2px; }

.vs-scheme-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.vs-scheme-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.vs-scheme-tab {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 13px;
  text-align: left;
  flex-shrink: 0;
  font-weight: 600;
  color: #71717a;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.35;
  max-width: 100%;
}
.vs-scheme-tab:hover { color: #18181b; }
.vs-scheme-tab.is-selected {
  background: #18181b;
  color: #fff;
  border-color: #18181b;
  box-shadow: 0 2px 8px rgba(24, 24, 27, 0.12);
}
.vs-scheme-tab.is-selected .vs-scheme-tab-no { color: #fff; }
.vs-scheme-tab-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 220px; vertical-align: bottom; }
.vs-scheme-tab-no { font-weight: 800; margin-right: 4px; }
.vs-scheme-panel {
  border: 1px solid #e4e4e7;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.vs-scheme-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #f0f0f2;
  background: #fafafa;
  flex-wrap: wrap;
}
.vs-scheme-info[hidden] { display: none !important; }
.vs-scheme-info-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.vs-scheme-info-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.vs-scheme-info-label { font-size: 13px; font-weight: 700; color: #18181b; flex-shrink: 0; }
.vs-scheme-info-style { font-size: 12px; color: #71717a; }
.vs-scheme-body { padding: 14px; }
.vs-scheme-body[hidden] { display: none !important; }
.vs-scheme-toggle-btn .vs-scheme-chevron { transition: transform 0.2s ease; }
.vs-scheme-toggle-btn[aria-expanded="false"] .vs-scheme-chevron { transform: rotate(180deg); }
.vs-scheme-right { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.vs-scheme-meta { font-size: 12px; color: #71717a; font-weight: 600; }
.vs-scheme-mini-primary {
  background: #18181b !important;
  color: #fff !important;
  border-color: #18181b !important;
}
.vs-scheme-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #e4e4e7;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  color: #52525b;
}

.vs-shot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px) {
  .vs-shot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .vs-shot-grid { grid-template-columns: 1fr; }
}
.vs-shot-card {
  border: 1px solid #e4e4e7;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}
.vs-shot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.vs-shot-head-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.vs-shot-title { font-size: 14px; font-weight: 800; color: #18181b; }
.vs-shot-time { font-size: 12px; color: #a1a1aa; font-weight: 600; flex-shrink: 0; }
.vs-shot-params {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.vs-shot-param-select {
  appearance: none;
  padding: 6px 28px 6px 12px;
  border-radius: 999px;
  border: 1px solid #e4e4e7;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-size: 12px;
  font-weight: 600;
  color: #52525b;
  font-family: inherit;
  cursor: pointer;
  min-width: 72px;
}
.vs-shot-param-select:hover { border-color: #d4d4d8; background-color: #fafafa; }
.vs-shot-desc { font-size: 12px; line-height: 1.65; color: #52525b; }
.vs-shot-line { margin-bottom: 6px; }
.vs-shot-line:last-child { margin-bottom: 0; }
.vs-shot-k { color: #18181b; font-weight: 700; }
.vs-shot-v { color: #52525b; }
.vs-shot-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.vs-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  color: #52525b;
  font-size: 12px;
  font-weight: 600;
}
.vs-shot-body { font-size: 12px; line-height: 1.6; color: #52525b; }
.vs-shot-body b { color: #18181b; font-weight: 700; }
.vs-shot-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #a1a1aa;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.vs-shot-edit-btn:hover { background: #f4f4f5; color: #52525b; }
.vs-shot-edit-btn svg { display: block; }
.vs-shot-edit {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e4e4e7;
}
.vs-shot-edit-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #71717a;
  margin-bottom: 4px;
}
.vs-shot-edit-visual,
.vs-shot-edit-script {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #e4e4e7;
  font-size: 12px;
  line-height: 1.5;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 8px;
  color: #18181b;
  background: #fafafa;
}
.vs-shot-edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.vs-shot-save-btn,
.vs-shot-cancel-btn {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.vs-shot-save-btn {
  border: none;
  background: #18181b;
  color: #fff;
}
.vs-shot-save-btn:hover { opacity: 0.92; }
.vs-shot-cancel-btn {
  border: 1px solid #e4e4e7;
  background: #fff;
  color: #52525b;
}
.vs-shot-cancel-btn:hover { background: #fafafa; }
.vs-shot-frame-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.vs-shot-foot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f4f4f5;
}
.vs-shot-regen-btn {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #e4e4e7;
  background: #fafafa;
  font-size: 12px;
  font-weight: 700;
  color: #52525b;
  cursor: pointer;
  font-family: inherit;
}
.vs-shot-regen-btn:hover { background: #f4f4f5; }
.vs-shot-card.is-regenerating {
  opacity: 0.72;
  pointer-events: none;
  position: relative;
}
.vs-shot-card.is-regenerating::after {
  content: '生成中...';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  color: #18181b;
}

.vs-gen-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px) {
  .vs-gen-grid { grid-template-columns: 1fr; }
}
.vs-gen-card {
  border: 1px solid #e4e4e7;
  border-radius: 16px;
  padding: 14px;
  background: #fff;
}
.vs-gen-title { font-size: 13px; font-weight: 800; color: #18181b; margin-bottom: 4px; }
.vs-gen-desc { font-size: 12px; color: #a1a1aa; line-height: 1.6; margin-bottom: 12px; }
.vs-gen-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.vs-gen-field label { display: block; font-size: 12px; color: #a1a1aa; margin-bottom: 6px; font-weight: 600; }
.vs-gen-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  font-size: 13px;
  font-weight: 700;
  color: #18181b;
}
.vs-gen-speed { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.vs-gen-speed-label { font-size: 12px; color: #a1a1aa; font-weight: 700; }
.vs-segment-tight { min-width: 0; }
.vs-gen-action {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #e4e4e7;
  background: #f4f4f5;
  font-size: 13px;
  font-weight: 800;
  cursor: not-allowed;
  font-family: inherit;
  color: #a1a1aa;
}
.vs-gen-action-primary {
  background: #18181b;
  border-color: #18181b;
  color: #fff;
  cursor: pointer;
}
.vs-gen-action-primary:hover { opacity: 0.92; }
.vs-gen-foot { font-size: 12px; color: #a1a1aa; text-align: center; margin-top: 10px; }
.vs-gen-foot-warn { color: #ef4444; }

.vs-gen-select-native {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  font-size: 13px;
  font-weight: 700;
  color: #18181b;
  font-family: inherit;
  box-sizing: border-box;
}
.vs-shot-preview {
  width: 100%;
  aspect-ratio: 9/16;
  border-radius: 10px;
  object-fit: cover;
  margin-bottom: 8px;
  background: #f4f4f5;
  display: block;
}
.vs-shot-preview-btn {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 8px;
  border: none;
  background: transparent;
  cursor: zoom-in;
  border-radius: 10px;
  overflow: hidden;
  font-family: inherit;
}
.vs-shot-preview-btn:hover { opacity: 0.92; }
.vs-zoomable { cursor: zoom-in; }
video.vs-zoomable { cursor: pointer; }
.vs-panel[hidden] { display: none !important; }
.vs-video-fallback-banner {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 13px;
  line-height: 1.5;
}
.vs-video-fallback-banner strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  color: #c2410c;
}
.vs-video-fallback-banner span {
  display: block;
  margin-bottom: 6px;
  word-break: break-word;
}
.vs-video-fallback-banner p {
  margin: 0;
  color: #a16207;
  font-size: 12px;
}
.picset-kling-status-banner {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 13px;
  line-height: 1.5;
}
.picset-kling-status-banner[hidden] { display: none !important; }
.picset-kling-status-banner strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  color: #b45309;
}
.picset-kling-status-banner span { display: block; }
.picset-kling-status-banner p { margin: 6px 0 0; font-size: 12px; }
.picset-kling-status-hint { color: #a16207 !important; }
.vs-video-result-wrap {
  border-radius: 14px;
  overflow: hidden;
  background: #0a0a0a;
  margin-bottom: 12px;
}
.vs-video-player {
  display: block;
  width: 100%;
  max-height: 520px;
  background: #000;
}
.vs-video-keyframe {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  background: #18181b;
}
.vs-video-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.vs-video-result-actions .vs-gen-action {
  flex: 1;
  min-width: 140px;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.vs-video-result-actions .vs-gen-action-primary {
  cursor: pointer;
}
.vs-video-result-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 12px;
}
.vs-video-result-thumbs[hidden] { display: none !important; }
.vs-video-thumb {
  position: relative;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  padding: 0;
  border-radius: 10px;
  border: 2px solid transparent;
  background: #f4f4f5;
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
}
.vs-video-thumb.is-active { border-color: #18181b; }
.vs-video-thumb img,
.vs-video-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vs-video-thumb-badge {
  position: absolute;
  left: 4px;
  top: 4px;
  z-index: 1;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}
.vs-spinner-dark {
  border-color: rgba(24, 24, 27, 0.2);
  border-top-color: #18181b;
}
.vs-gen-action-primary .vs-spinner-dark {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}
.vs-gen-action:not(:disabled) {
  cursor: pointer;
  color: #18181b;
  background: #f4f4f5;
}
.vs-gen-foot-warn { color: #ef4444; }

.vs-task-progress {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fafafa;
  border: 1px solid #f0f0f2;
}
.vs-task-progress[hidden] { display: none !important; }
.vs-task-progress-card { margin-top: 10px; margin-bottom: 4px; }
.vs-task-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.vs-task-progress-text {
  font-size: 13px;
  color: #52525b;
  line-height: 1.4;
}
.vs-task-progress-track {
  height: 4px;
  border-radius: 999px;
  background: #e4e4e7;
  overflow: hidden;
}
.vs-task-progress-fill {
  height: 100%;
  width: 35%;
  border-radius: inherit;
  background: linear-gradient(90deg, #18181b 0%, #52525b 100%);
  transition: width 0.35s ease;
}
.vs-composer .vs-task-progress { margin: 0 16px 16px; }

.vs-storyboard-sheet-wrap {
  margin: 0 0 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #f0f0f2;
  background: #fafafa;
}
.vs-storyboard-sheet-wrap[hidden] { display: none !important; }
.vs-storyboard-sheet-wrap.is-reveal {
  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.12);
  animation: vsSheetReveal 1.2s ease;
}
@keyframes vsSheetReveal {
  0% { box-shadow: 0 0 0 0 rgba(24, 24, 27, 0.28); }
  100% { box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.12); }
}
.vs-storyboard-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.vs-storyboard-sheet-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.vs-storyboard-sheet-title {
  font-size: 14px;
  font-weight: 600;
  color: #18181b;
}
.vs-storyboard-sheet-meta {
  font-size: 12px;
  color: #71717a;
}
.vs-storyboard-sheet-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
}
.vs-storyboard-sheet-btn[hidden] { display: none !important; }
.vs-storyboard-sheet-btn:hover { opacity: 0.94; }
.vs-storyboard-sheet-img[hidden] { display: none !important; }
.vs-storyboard-sheet-img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  background: #fff;
  border-radius: 12px;
}
.vs-storyboard-sheet-media {
  position: relative;
}
.vs-storyboard-sheet-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 12px;
  background: rgba(15, 15, 18, 0.52);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
}
.vs-storyboard-sheet-overlay[hidden] { display: none !important; }

.vs-gen-placeholder {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #ececee;
  background: #fff;
  min-height: 280px;
}
.vs-gen-placeholder[hidden] { display: none !important; }
.vs-gen-placeholder-shimmer {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 16px;
  text-align: center;
  background: linear-gradient(110deg, #f4f4f5 8%, #ececef 18%, #f8f8f9 33%, #f4f4f5 50%);
  background-size: 220% 100%;
  animation: vs-gen-placeholder-shimmer 1.8s ease-in-out infinite;
}
@keyframes vs-gen-placeholder-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.vs-gen-placeholder-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  color: #a1a1aa;
}
.vs-gen-placeholder-shimmer p {
  margin: 0;
  font-size: 13px;
  color: #71717a;
  line-height: 1.5;
}

/* 文字分镜脚本生成中 */
.vs-script-loading {
  border: 1px solid #ececee;
  border-radius: 14px;
  background: #fff;
  padding: 20px 18px 18px;
  margin-bottom: 16px;
}
.vs-script-loading[hidden] { display: none !important; }
.vs-script-loading-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}
.vs-script-loading-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f4f4f5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vs-script-loading-copy { min-width: 0; flex: 1; }
.vs-script-loading-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: #18181b;
}
.vs-script-loading-sub {
  margin: 0;
  font-size: 13px;
  color: #71717a;
  line-height: 1.5;
}
.vs-script-loading-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.vs-script-loading-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: #a1a1aa;
  background: #f4f4f5;
  border: 1px solid transparent;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.vs-script-loading-step.is-active {
  color: #18181b;
  background: #fff;
  border-color: #e4e4e7;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.vs-script-loading-step.is-done {
  color: #16a34a;
  background: #f0fdf4;
}
.vs-script-loading-step-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}
.vs-script-loading-step.is-active .vs-script-loading-step-dot {
  opacity: 1;
  animation: vs-script-step-pulse 1.2s ease-in-out infinite;
}
@keyframes vs-script-step-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.65; }
}
.vs-script-loading-track {
  height: 4px;
  border-radius: 999px;
  background: #f4f4f5;
  overflow: hidden;
  margin-bottom: 18px;
}
.vs-script-loading-fill {
  height: 100%;
  width: 8%;
  border-radius: inherit;
  background: linear-gradient(90deg, #a1a1aa, #52525b);
  transition: width 0.45s ease;
}
.vs-script-loading-skeleton { min-height: 120px; }
.vs-script-sk-schemes {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.vs-script-sk-tab {
  flex: 1;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(110deg, #f4f4f5 8%, #ececef 18%, #f8f8f9 33%, #f4f4f5 50%);
  background-size: 220% 100%;
  animation: vs-gen-placeholder-shimmer 1.8s ease-in-out infinite;
  opacity: 0.55;
}
.vs-script-sk-tab.is-active { opacity: 1; }
.vs-script-sk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px) {
  .vs-script-sk-grid { grid-template-columns: 1fr; }
}
.vs-script-sk-card {
  border: 1px solid #f0f0f2;
  border-radius: 12px;
  padding: 14px;
  background: #fafafa;
}
.vs-script-sk-line {
  height: 10px;
  border-radius: 6px;
  margin-bottom: 8px;
  background: linear-gradient(110deg, #f0f0f2 8%, #e4e4e7 18%, #f8f8f9 33%, #f0f0f2 50%);
  background-size: 220% 100%;
  animation: vs-gen-placeholder-shimmer 1.8s ease-in-out infinite;
}
.vs-script-sk-line.w60 { width: 60%; }
.vs-script-sk-line.w40 { width: 40%; }
.vs-script-sk-block {
  height: 72px;
  border-radius: 8px;
  margin-top: 4px;
  background: linear-gradient(110deg, #ececef 8%, #e4e4e7 18%, #f4f4f5 33%, #ececef 50%);
  background-size: 220% 100%;
  animation: vs-gen-placeholder-shimmer 1.8s ease-in-out infinite;
}
.vs-shot-panel.is-script-loading .vs-scheme-bar,
.vs-shot-panel.is-script-loading #vsStoryboardSheetWrap,
.vs-shot-panel.is-script-loading #vsShotGrid {
  display: none !important;
}

.vs-video-result-placeholder {
  margin-bottom: 12px;
  min-height: 320px;
}
.vs-video-result-placeholder .vs-gen-placeholder-shimmer {
  min-height: 320px;
}

.vs-sheet-edit-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(15, 15, 18, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.vs-sheet-edit-modal[hidden] { display: none !important; }
.vs-sheet-edit-panel {
  width: min(1080px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18);
}
.vs-sheet-edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #f0f0f2;
}
.vs-sheet-edit-head h3 { margin: 0; font-size: 16px; color: #18181b; }
.vs-sheet-edit-hint { margin: 0; padding: 12px 18px 0; font-size: 13px; color: #71717a; }
.vs-sheet-edit-body { padding: 14px 18px 18px; }
.vs-sheet-edit-canvas {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e4e4e7;
  background: #fafafa;
  cursor: crosshair;
}
.vs-sheet-edit-canvas img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}
.vs-sheet-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #18181b;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  pointer-events: none;
}
.vs-sheet-pin.is-loading { background: #52525b; }
.vs-sheet-annotations {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vs-sheet-ann-item {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #f0f0f2;
  background: #fafafa;
}
.vs-sheet-ann-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #18181b;
  font-weight: 600;
}
.vs-sheet-ann-item textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  border: 1px solid #e4e4e7;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  font-family: inherit;
}
.vs-sheet-edit-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 18px 18px;
}

.canvas-loading {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(255,255,255,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
}
.canvas-loading[hidden] { display: none !important; }
.canvas-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 32px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.canvas-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e4e4e7;
  border-top-color: #18181b;
  border-radius: 50%;
  animation: vs-spin 0.6s linear infinite;
}
.canvas-loading-inner p { margin: 0; font-size: 14px; color: #52525b; }

.vs-composer {
  max-width: 896px;
  margin: 0 auto;
  border-radius: 24px;
  border: 1px solid hsl(var(--border, 0 0% 90%));
  background: hsl(var(--card, 0 0% 100%));
  box-shadow: 0 16px 42px rgba(16, 18, 25, 0.06);
  overflow: visible;
}

.vs-prompt-wrap {
  position: relative;
}
.vs-prompt {
  display: block;
  width: 100%;
  min-height: 96px;
  border: none;
  background: transparent;
  padding: 16px 20px 24px;
  font-size: 14px;
  line-height: 1.5;
  color: hsl(var(--fg, 0 0% 9%));
  outline: none;
  resize: vertical;
  box-sizing: border-box;
  font-family: inherit;
}
.vs-prompt::placeholder { color: hsl(var(--text-subtle, 0 0% 60%)); }
.vs-char-count {
  position: absolute;
  right: 16px;
  bottom: 8px;
  font-size: 11px;
  color: hsl(var(--text-subtle, 0 0% 60%));
  pointer-events: none;
}

/* 上传图片缩略图条（对齐截图） */
.vs-attachment-chips {
  margin: 8px 16px 0;
  padding: 8px 0 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vs-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid #e4e4e7;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  font-size: 13px;
  font-weight: 700;
  color: #18181b;
}
.vs-attachment-thumb {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #e4e4e7;
  overflow: hidden;
  flex-shrink: 0;
}
.vs-attachment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vs-attachment-chip-close {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: #a1a1aa;
  cursor: pointer;
  font-size: 16px;
  line-height: 22px;
}
.vs-attachment-chip-close:hover {
  background: #f4f4f5;
  color: #18181b;
}

.vs-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}
.vs-toolbar-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 16px 16px;
  flex: 1;
  min-width: 0;
}

/* 上传：独立按钮 + 隐藏的文件 input（与线上一致） */
.vs-file-input {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
.vs-upload-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid hsl(var(--border, 0 0% 90%));
  background: hsl(var(--card, 0 0% 100%));
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  color: hsl(var(--fg, 0 0% 9%));
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
  font-family: inherit;
}
.vs-upload-btn:hover {
  background: hsl(var(--secondary, 0 0% 96%));
}
.vs-upload-btn.has-files {
  border-color: #10b981;
  background: #f0fdf4;
  color: #10b981;
}

.vs-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 9999px;
  border: 1px solid hsl(var(--border, 0 0% 90%));
  background: hsl(var(--card, 0 0% 100%));
  font-size: 12px;
  font-weight: 600;
  color: hsl(var(--fg, 0 0% 9%));
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: background 0.15s, border-color 0.12s;
  white-space: nowrap;
}
.vs-tag:hover { background: hsl(var(--secondary, 0 0% 96%)); }
.vs-tag svg { flex-shrink: 0; color: #52525b; }
.vs-tag.is-active,
.vs-tag-menu-btn.is-active {
  border: 2px solid #18181b;
  padding: 5px 11px;
}
/* 比例 / 时长：纯文字下拉，无箭头 */
.vs-tag-menu-plain .vs-tag-menu-btn {
  gap: 0;
  min-width: 48px;
  justify-content: center;
}
.vs-tag-menu-plain .vs-tag-menu-panel {
  min-width: 88px;
}

/* 声音：默认「无声音」，展开后显示生成声音 + 口播 */
.vs-audio-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.vs-audio-expanded {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.vs-audio-expanded[hidden] { display: none !important; }
.vs-audio-collapsed[hidden] { display: none !important; }
.vs-audio-gen.is-on {
  background: hsl(var(--secondary, 0 0% 96%));
}
.vs-voiceover-menu .vs-voiceover-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 130;
  min-width: 168px;
  padding: 6px;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.vs-voiceover-menu .vs-voiceover-panel[hidden] { display: none !important; }
.vs-voice-lang-wrap {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f2;
}
.vs-voice-lang-label {
  margin: 0 0 6px;
  font-size: 12px;
  color: #71717a;
}
.vs-voice-lang-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
}
.vs-voice-lang-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  color: #18181b;
  text-align: left;
  cursor: pointer;
}
.vs-voice-lang-opt:hover {
  background: #f4f4f5;
}
.vs-voice-lang-opt.is-selected {
  background: #f4f4f5;
  font-weight: 600;
}
.vs-voice-lang-check {
  width: 14px;
  flex-shrink: 0;
  color: #18181b;
  opacity: 0;
  font-size: 12px;
  line-height: 1;
}
.vs-voice-lang-opt.is-selected .vs-voice-lang-check {
  opacity: 1;
}
.vs-voice-lang-select {
  width: 100%;
  min-width: 168px;
  padding: 8px 10px;
  border: 1px solid #e4e4e7;
  border-radius: 10px;
  font-size: 13px;
  color: #18181b;
  background: #fff;
  appearance: auto;
}
.vs-voice-lang-wrap[hidden] { display: none !important; }
.vs-segment {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: #fff;
  border-radius: 12px;
  min-width: 168px;
}
.vs-segment-opt {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 9999px;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: #71717a;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.vs-segment-opt:hover { color: #18181b; }
.vs-segment-opt.is-selected {
  background: #18181b;
  color: #fff;
  font-weight: 600;
}

/* 分镜模式下拉面板 */
.vs-mode-menu .vs-mode-panel {
  min-width: 280px;
  padding: 10px;
  left: 0;
}
.vs-mode-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  margin-bottom: 12px;
  background: #fff;
  border-radius: 12px;
}
.vs-mode-tab {
  flex: 1;
  padding: 8px 10px;
  border: none;
  border-radius: 9999px;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: #71717a;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.vs-mode-tab.is-selected {
  background: #18181b;
  color: #fff;
}
.vs-mode-field-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 500;
  color: #a1a1aa;
}
.vs-mode-select-wrap {
  position: relative;
  margin-bottom: 12px;
}
.vs-mode-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: 12px;
  background: #f4f4f5;
  font-size: 13px;
  font-weight: 600;
  color: #18181b;
  cursor: pointer;
  font-family: inherit;
}
.vs-mode-select:hover { background: #ececee; }
.vs-mode-select-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 140;
  padding: 6px;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  max-height: 280px;
  overflow-y: auto;
}
.vs-mode-select-panel[hidden] { display: none !important; }
.vs-mode-select-opt {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  color: #18181b;
  cursor: pointer;
  font-family: inherit;
}
.vs-mode-select-opt:hover { background: #f4f4f5; }
.vs-mode-select-opt.is-selected { background: #f4f4f5; font-weight: 600; }
.vs-mode-grid-box {
  position: relative;
  padding: 10px;
  border: 1px solid #e4e4e7;
  border-radius: 14px;
  background: #fff;
}
.vs-mode-grid-tag {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}
.vs-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  border-radius: 8px;
  overflow: hidden;
}
.vs-mode-cell {
  aspect-ratio: 1;
  background: var(--c, #e4e4e7);
  background-image: linear-gradient(135deg, var(--c, #e4e4e7) 0%, rgba(0, 0, 0, 0.06) 100%);
}
.vs-mode-script-hint {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: #71717a;
}
.vs-tag-menu-btn[aria-expanded="true"] {
  background: hsl(var(--secondary, 0 0% 96%));
}
.vs-chevron { opacity: 0.65; flex-shrink: 0; }

.vs-tag-menu {
  position: relative;
  display: inline-flex;
}
.vs-tag-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 120;
  min-width: 160px;
  padding: 6px;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.vs-tag-menu[hidden],
.vs-tag-menu-panel[hidden] { display: none !important; }
.vs-tag-menu-opt {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  color: #18181b;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.vs-tag-menu-opt:hover { background: #f4f4f5; }
.vs-tag-menu-opt.is-selected { background: #f4f4f5; font-weight: 600; }

/* 带货等：勾选式下拉 */
.vs-check-menu {
  min-width: 148px;
  padding: 6px;
}
.vs-check-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #18181b;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.vs-check-opt:hover { background: #f4f4f5; }
.vs-check-mark {
  flex-shrink: 0;
  color: #18181b;
  opacity: 0;
}
.vs-check-opt.is-selected .vs-check-mark {
  opacity: 1;
}

.vs-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 16px 16px 0;
  padding: 10px 20px;
  border-radius: 16px;
  border: none;
  background: hsl(var(--primary, 0 0% 9%));
  color: hsl(var(--primary-fg, 0 0% 100%));
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}
.vs-submit:disabled {
  cursor: not-allowed;
}
.vs-submit:not(:disabled):hover { opacity: 0.9; }

.vs-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vs-spin 0.6s linear infinite;
  vertical-align: middle;
}
@keyframes vs-spin { to { transform: rotate(360deg); } }

/* 生成结果 */
.vs-result {
  margin-top: 24px;
  border-radius: 24px;
  border: 1px solid hsl(var(--border, 0 0% 90%));
  background: hsl(var(--card, 0 0% 100%));
  padding: 40px 24px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(16, 18, 25, 0.05);
}
.vs-result[hidden] { display: none !important; }
.vs-result-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.vs-result-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: hsl(var(--secondary, 0 0% 96%));
  display: flex;
  align-items: center;
  justify-content: center;
}
.vs-result-icon svg { color: hsl(var(--text-subtle, 0 0% 60%)); }
.vs-result-text {
  margin: 0;
  font-size: 14px;
  color: hsl(var(--text-secondary, 0 0% 45%));
}
.vs-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.vs-btn-secondary,
.vs-btn-primary {
  padding: 8px 24px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.vs-btn-secondary {
  border: 1px solid hsl(var(--border, 0 0% 90%));
  background: #fff;
  color: hsl(var(--fg, 0 0% 9%));
}
.vs-btn-secondary:hover { background: #fafafa; }
.vs-btn-primary {
  border: none;
  background: hsl(var(--primary, 0 0% 9%));
  color: #fff;
}
.vs-btn-primary:hover { opacity: 0.9; }

.vs-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.vs-dialog {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.vs-dialog-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: #18181b;
}
.vs-dialog-msg {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.6;
  color: #71717a;
}
.vs-dialog-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e4e4e7;
  font-size: 14px;
  font-family: inherit;
  margin-bottom: 16px;
}
.vs-dialog-input:focus {
  outline: none;
  border-color: #a1a1aa;
}
.vs-dialog-actions {
  display: flex;
  gap: 8px;
}
.vs-dialog-btn {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.vs-dialog-btn-cancel {
  border: 1px solid #e4e4e7;
  background: #fff;
  color: #18181b;
}
.vs-dialog-btn-primary {
  border: none;
  background: #18181b;
  color: #fff;
}
.vs-dialog-btn-danger {
  border: none;
  background: #ef4444;
  color: #fff;
}
.vs-dialog-btn-cancel:hover { background: #fafafa; }
.vs-dialog-btn-primary:hover { opacity: 0.92; }
.vs-dialog-btn-danger:hover { opacity: 0.92; }

.vs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.vs-lightbox-media {
  max-width: min(960px, 100%);
  max-height: calc(100vh - 80px);
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}
.vs-lightbox-media img,
.vs-lightbox-media video {
  display: block;
  max-width: min(960px, 100%);
  max-height: calc(100vh - 80px);
  width: auto;
  height: auto;
}
.vs-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.vs-lightbox-close:hover { background: rgba(255, 255, 255, 0.24); }
body.vs-modal-open { overflow: hidden; }