/* 重绘项目详情页样式，负责项目上下文栏、操作区和剧集卡片布局。 */
.redraw-project-header {
  min-height: var(--control-height-lg);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: 14px;
}

.redraw-project-back {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  color: var(--web-text-secondary);
  background: var(--web-surface);
  border: 1px solid var(--web-line-strong);
  border-radius: 8px;
}

.redraw-project-heading {
  min-width: 0;
  flex: 1;
}

.redraw-project-heading strong {
  display: block;
  overflow: hidden;
  color: var(--web-text);
  font-size: 20px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.redraw-project-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.redraw-episode-toolbar {
  min-height: var(--control-height-lg);
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.redraw-episode-toolbar > span {
  color: var(--web-project-count);
  font-size: 12px;
  white-space: nowrap;
}

.redraw-episode-empty button {
  min-height: 42px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--web-text-strong);
  background: var(--creative-accent);
  border: 1px solid var(--creative-accent);
  border-radius: 9px;
  font-weight: 650;
  cursor: pointer;
}

.model-warning {
  color: var(--creative-accent);
  border-color: var(--web-line-emphasis);
}

.redraw-episode-empty button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.redraw-episode-grid {
  min-height: 260px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  align-items: start;
  gap: var(--space-md);
}

.redraw-episode-card {
  min-width: 0;
  color: var(--web-text);
  background: var(--web-surface);
  border: 1px solid var(--web-line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
}

.redraw-episode-card:hover {
  border-color: var(--web-project-card-hover-line);
}

.redraw-episode-cover {
  aspect-ratio: 16 / 9;
  position: relative;
  display: grid;
  place-items: center;
  color: var(--web-episode-placeholder);
  background: var(--web-surface);
  border-bottom: 1px solid var(--web-line-strong);
  overflow: hidden;
}

.redraw-episode-cover :deep(.loading-media),
.redraw-episode-cover :deep(.loading-media-element) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.redraw-episode-status {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 7px;
  color: var(--web-episode-status-text);
  background: var(--web-surface-raised);
  border: 1px solid var(--web-line-strong);
  border-radius: 5px;
  font-size: 11px;
}

.redraw-episode-status.is-draft {
  color: var(--web-text-tertiary);
  background: var(--web-surface-raised);
  border-color: var(--web-line-strong);
}

.redraw-episode-status.is-uploaded {
  color: var(--web-accent-muted);
  background: color-mix(in srgb, var(--web-accent-muted) 10%, var(--web-surface));
  border-color: color-mix(in srgb, var(--web-accent-muted) 28%, var(--web-line));
}

.redraw-episode-status.is-analyzing {
  color: var(--web-warning);
  background: color-mix(in srgb, var(--web-warning) 11%, var(--web-surface));
  border-color: color-mix(in srgb, var(--web-warning) 30%, var(--web-line));
}

.redraw-episode-status.is-ready {
  color: var(--web-primary-hover);
  background: var(--web-brand-soft);
  border-color: var(--web-primary-light);
}

.redraw-episode-status.is-generating {
  color: var(--web-info);
  background: color-mix(in srgb, var(--web-info) 11%, var(--web-surface));
  border-color: color-mix(in srgb, var(--web-info) 30%, var(--web-line));
}

.redraw-episode-status.is-failed {
  color: var(--web-danger);
  background: var(--web-danger-soft);
  border-color: color-mix(in srgb, var(--web-danger) 30%, var(--web-line));
}

.redraw-episode-status.is-completed {
  color: var(--web-complete);
  background: color-mix(in srgb, var(--web-success) 11%, var(--web-surface));
  border-color: var(--web-success-border);
}

.redraw-episode-copy {
  padding: 10px 12px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.redraw-episode-copy > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.redraw-episode-copy small,
.redraw-episode-meta {
  color: var(--web-project-tooltip-label);
  font-size: 11px;
}

.redraw-episode-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.redraw-episode-copy button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  color: var(--web-episode-copy);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
}

.redraw-episode-copy button:hover {
  background: var(--web-episode-copy-hover);
}

.redraw-episode-meta {
  padding: 0 12px 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.redraw-episode-empty {
  min-height: 280px;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: var(--web-text-tertiary);
  background: var(--web-surface);
  border: 1px dashed var(--web-line-emphasis);
  border-radius: var(--radius-lg);
  text-align: center;
}

.redraw-episode-empty p {
  margin: 0 0 6px;
  color: var(--web-project-state-text);
  font-size: 12px;
}

@media (max-width: 767px) {
  .redraw-project-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .redraw-project-actions {
    width: 100%;
    margin-left: 54px;
  }

  .redraw-project-actions > button {
    flex: 1;
  }

  .redraw-episode-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .redraw-episode-toolbar :deep(.project-search-field) {
    width: 100%;
  }

  .redraw-episode-grid {
    grid-template-columns: 1fr;
  }
}
