/* 剧情版分镜增强（参考 S2） */
.v1-fenjing-extra-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--w-6, rgba(255, 255, 255, 0.06));
}

.v1-fenjing-extra-toolbar .v1-fj-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.375rem;
  font-size: 0.7rem;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--w-70, rgba(255, 255, 255, 0.7));
  transition: all 0.15s ease;
}

.v1-fenjing-extra-toolbar .v1-fj-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.v1-fenjing-extra-toolbar .v1-fj-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.v1-fenjing-extra-toolbar .v1-fj-btn.primary {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.35);
  color: #93c5fd;
}

.v1-fenjing-extra-toolbar .v1-fj-btn.accent {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.35);
  color: #c4b5fd;
}

.v1-fenjing-extra-toolbar .v1-fj-btn.warn {
  background: rgba(251, 146, 60, 0.12);
  border-color: rgba(251, 146, 60, 0.35);
  color: #fdba74;
}

/* 整张分镜卡片可点击打开详情，操作按钮仍可点 */
.fenjing-card.v1-fenjing-card-open:not(.add-card) {
  cursor: pointer;
}

.fenjing-card.v1-fenjing-card-open:not(.add-card) > * {
  pointer-events: none;
}

.fenjing-card.v1-fenjing-card-open:not(.add-card) .card-actions,
.fenjing-card.v1-fenjing-card-open:not(.add-card) .card-actions *,
.fenjing-card.v1-fenjing-card-open:not(.add-card) button,
.fenjing-card.v1-fenjing-card-open:not(.add-card) .card-generate-btn,
.fenjing-card.v1-fenjing-card-open:not(.add-card) .card-delete-btn {
  pointer-events: auto;
}

.fenjing-card.v1-fenjing-card-open:not(.add-card) .card-delete-btn {
  pointer-events: auto;
}

.fenjing-card.v1-fenjing-card-open:not(.add-card) .v1-card-thumb,
.fenjing-card.v1-fenjing-card-open:not(.add-card) .v1-card-videos,
.fenjing-card.v1-fenjing-card-open:not(.add-card) .v1-card-videos *,
.fenjing-card.v1-fenjing-card-open:not(.add-card) .card-video-stats,
.fenjing-card.v1-fenjing-card-open:not(.add-card) .v1-card-play-btn {
  pointer-events: auto;
}

.fenjing-card .v1-card-videos {
  margin-top: 0.35rem;
}

.fenjing-card .v1-video-strip-label {
  font-size: 0.62rem;
  color: #4ade80;
  margin-bottom: 0.35rem;
}

.fenjing-card .v1-video-strip-empty {
  font-size: 0.62rem;
  color: var(--w-35, rgba(255, 255, 255, 0.35));
}

.fenjing-card .v1-video-strip-status {
  font-size: 0.62rem;
  margin-top: 0.25rem;
}

.fenjing-card .v1-video-strip-status.is-generating {
  color: #a78bfa;
}

.fenjing-card .v1-video-strip-status.is-failed {
  color: #f87171;
}

.v1-video-strip,
.v1-videos-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.v1-video-thumb {
  position: relative;
  width: 4.5rem;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 0.375rem;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.v1-video-thumb.is-compact {
  width: 3.6rem;
}

.v1-video-thumb:hover {
  transform: translateY(-1px);
  border-color: rgba(59, 130, 246, 0.55);
}

.v1-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.v1-video-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.55rem;
  color: var(--w-50, rgba(255, 255, 255, 0.5));
}

.v1-video-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.v1-video-thumb:hover .v1-video-thumb-play {
  opacity: 1;
}

.v1-video-thumb-index {
  position: absolute;
  left: 0.2rem;
  bottom: 0.15rem;
  font-size: 0.55rem;
  padding: 0.05rem 0.25rem;
  border-radius: 0.2rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}

.fenjing-card .v1-card-play-btn {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.12);
}

.v1-modal-videos-host {
  margin: 0.75rem 1.25rem 1rem;
  padding: 0.75rem;
  border: 1px solid var(--w-6, rgba(255, 255, 255, 0.06));
  border-radius: 0.625rem;
  background: rgba(0, 0, 0, 0.2);
}

.v1-modal-videos-title {
  font-size: 0.75rem;
  color: var(--w-70, rgba(255, 255, 255, 0.7));
  margin-bottom: 0.5rem;
}

.v1-videos-grid .v1-video-thumb {
  width: 7.5rem;
}

.v1-videos-grid-empty,
.v1-videos-pending,
.v1-videos-failed {
  font-size: 0.7rem;
  color: var(--w-50, rgba(255, 255, 255, 0.5));
}

.v1-video-pending,
.v1-video-failed-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.v1-pending-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #a78bfa;
  animation: v1-pulse 1s ease-in-out infinite;
}

@keyframes v1-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.v1-video-player-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(6px);
}

.v1-video-player-overlay.is-open {
  display: flex;
}

.v1-video-player-shell {
  position: relative;
  width: min(92vw, 56rem);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.v1-vp-video {
  width: 100%;
  max-height: 70vh;
  border-radius: 0.75rem;
  background: #000;
}

.v1-vp-close,
.v1-vp-prev,
.v1-vp-next {
  position: absolute;
  z-index: 2;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  border-radius: 999px;
}

.v1-vp-close {
  top: -2.5rem;
  right: 0;
  width: 2rem;
  height: 2rem;
  font-size: 1.25rem;
}

.v1-vp-prev,
.v1-vp-next {
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.5rem;
}

.v1-vp-prev { left: -3rem; }
.v1-vp-next { right: -3rem; }

.v1-vp-strip {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.v1-vp-thumb {
  flex: 0 0 auto;
  width: 5.5rem;
  aspect-ratio: 16 / 9;
  border: 2px solid transparent;
  border-radius: 0.375rem;
  overflow: hidden;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.v1-vp-thumb.is-active {
  border-color: #3b82f6;
}

.v1-vp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fenjing-card .v1-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 0.5rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--w-6, rgba(255, 255, 255, 0.06));
}

.fenjing-card .v1-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fenjing-card .v1-card-thumb.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--w-30, rgba(255, 255, 255, 0.3));
  font-size: 0.65rem;
}

.fenjing-card .v1-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
}

.fenjing-card .v1-card-meta .meta-chip {
  font-size: 0.6rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

.fenjing-card .card-delete-btn.v1-trash {
  color: #ef4444b3;
}

/* 分镜详情弹窗：内容区可滚动 */
.fenjing-modal.v1-fenjing-modal-fixed {
  max-height: 85vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.fenjing-modal.v1-fenjing-modal-fixed > .modal-header {
  flex-shrink: 0;
}

.v1-fenjing-modal-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--c-primary-30, rgba(59, 130, 246, 0.3)) transparent;
  padding-bottom: 0.75rem;
}

.v1-fenjing-modal-body::-webkit-scrollbar {
  width: 0.375rem;
}

.v1-fenjing-modal-body::-webkit-scrollbar-thumb {
  background: var(--c-primary-30, rgba(59, 130, 246, 0.3));
  border-radius: 999px;
}

.v1-fenjing-detail-shot {
  margin: 0.75rem 1.25rem 1rem;
  padding: 0.75rem;
  border: 1px solid var(--w-6, rgba(255, 255, 255, 0.06));
  border-radius: 0.625rem;
  background: rgba(0, 0, 0, 0.2);
}

.v1-fenjing-detail-shot .shot-title {
  font-size: 0.75rem;
  color: var(--w-60, rgba(255, 255, 255, 0.6));
  margin-bottom: 0.5rem;
}

.v1-fenjing-detail-shot .shot-preview {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 0.5rem;
  background: #000;
  margin-bottom: 0.5rem;
}

.v1-fenjing-detail-shot .shot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.v1-fenjing-detail-shot .shot-actions button {
  font-size: 0.7rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.375rem;
  border: 1px solid rgba(59, 130, 246, 0.3);
  background: rgba(59, 130, 246, 0.1);
  color: #93c5fd;
  cursor: pointer;
}

.v1-fenjing-detail-shot .shot-actions button:hover {
  background: rgba(59, 130, 246, 0.2);
}

.v1-fenjing-detail-edit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0 1.25rem 0.75rem;
}

.v1-fenjing-detail-edit label {
  display: block;
  font-size: 0.65rem;
  color: var(--w-50, rgba(255, 255, 255, 0.5));
  margin-bottom: 0.25rem;
}

.v1-fenjing-detail-edit input,
.v1-fenjing-detail-edit textarea,
.v1-fenjing-detail-edit select,
.v1-ui-select {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.75rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid var(--w-8, rgba(255, 255, 255, 0.08));
  background: rgba(0, 0, 0, 0.25);
  color: var(--w-90, rgba(255, 255, 255, 0.9));
  resize: vertical;
}

.v1-fenjing-detail-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 1.25rem 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--w-6, rgba(255, 255, 255, 0.06));
}

.v1-fenjing-detail-footer button {
  font-size: 0.7rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.375rem;
  border: 1px solid var(--w-10, rgba(255, 255, 255, 0.1));
  background: rgba(255, 255, 255, 0.04);
  color: var(--w-80, rgba(255, 255, 255, 0.8));
  cursor: pointer;
}

/* 与原生 modal-duration 徽章风格一致 */
.v1-duration-editor.modal-duration {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.75rem;
  color: var(--w-50, rgba(255, 255, 255, 0.5));
  background: var(--w-5, rgba(255, 255, 255, 0.05));
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  border: none;
  cursor: pointer;
}

.v1-duration-editor .v1-duration-select {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  min-width: 3.25rem;
  background: transparent;
  border: none;
  color: var(--w-50, rgba(255, 255, 255, 0.5));
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0 0.9rem 0 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
}

.v1-duration-editor .v1-duration-select:focus {
  outline: none;
}

.v1-duration-editor .v1-duration-select option {
  background: #1e1e28;
  color: #e8e8ef;
}