/* ============================================================
   Game Demo Wizard — dt-game-demo.css
   3 步 wizard: list → script+style → images → videos
   命名空间: .gd-*  依赖: desktop.css 的 P5 CSS 变量
   ============================================================ */

/* ---------- View Root ---------- */
#game-demo-view { display: none; }
#game-demo-view.dt-view.active { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
/* min-height:0 修 flex 陷阱：默认 min-height:auto 让长内容撑大 .gd-panel，
   panels-area 的 overflow-y:auto 失效 → 实际滚的是 .dt-content（外层 desktop），
   导致 .gd-dag-monitor 的 position:sticky 无法 stick（sticky 锚定最近滚动祖先）。 */
.gd-panel { display: none; flex: 1; min-height: 0; flex-direction: column; overflow: hidden; position: relative; }
.gd-panel.active { display: flex; }

/* ---------- MyWork: Project List ---------- */
.gd-my-page { flex: 1; overflow-y: auto; padding: 32px 36px; background: var(--p5-dark, #0a0a0f); }
.gd-my-page::-webkit-scrollbar { width: 6px; }
.gd-my-page::-webkit-scrollbar-thumb { background: var(--p5-input-bg, #1a1a22); }
.gd-my-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; flex-wrap: wrap; gap: 16px; }
.gd-labs-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--p5-border);
  color: var(--p5-text-secondary);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.gd-labs-back-btn:hover,
.gd-labs-back-btn:focus-visible {
  border-color: var(--p5-red);
  color: var(--p5-red);
  outline: none;
}
.gd-labs-back-btn svg { width: 14px; height: 14px; }
.gd-my-title { font-family: var(--font-display, 'Oswald', Impact, sans-serif); font-size: 38px; letter-spacing: 4px; margin: 0; color: var(--p5-text, #e8e8e8); font-weight: 700; }
.gd-my-sub { font-size: 11px; letter-spacing: 2px; color: var(--p5-text-secondary, #b5b5b5); margin-top: 8px; text-transform: uppercase; font-weight: 600; }
.gd-my-sub .gd-sub-active { color: var(--p5-red, #e63946); }
.gd-my-head-actions { display: flex; gap: 12px; align-items: center; }
.gd-my-search {
  padding: 8px 14px; background: var(--p5-card, #16161d);
  border: 1px solid var(--p5-border, #24242e); color: var(--p5-text, #e8e8e8);
  font-size: 13px; min-width: 240px; font-family: inherit;
}
.gd-my-search:focus { outline: none; border-color: var(--p5-red, #e63946); }
.gd-btn-new {
  padding: 9px 22px; background: var(--p5-red, #e63946); border: none;
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  cursor: pointer; font-family: inherit; transition: background 0.15s;
}
.gd-btn-new:hover { background: #ff4757; }

.gd-my-title-row { display: flex; align-items: center; gap: 14px; }
.gd-btn-showcase {
  padding: 6px 12px; background: transparent;
  border: 1px solid var(--p5-red, #e63946);
  color: var(--p5-red, #e63946);
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 0.15s;
}
.gd-btn-showcase:hover {
  background: var(--p5-red, #e63946);
  color: #fff;
}
.gd-btn-showcase svg { color: inherit; }

.gd-my-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

/* ---------- Project Card ---------- */
.gd-card {
  background: var(--p5-card, #16161d);
  border: 1px solid var(--p5-border, #24242e);
  cursor: pointer; transition: all 0.2s; overflow: hidden;
  display: flex; flex-direction: column;
}
.gd-card:hover { border-color: var(--p5-red, #e63946); transform: translateY(-2px); }
.gd-card-cover {
  aspect-ratio: 16/9; background: var(--p5-input-bg, #1a1a22);
  position: relative; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.gd-card-cover video, .gd-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gd-card-cover-empty { color: rgba(255,255,255,0.35); display: flex; align-items: center; justify-content: center; }

/* Gradient placeholders — 4 rotating themes (借鉴漫剧 .md-proj-card .poster.g-*) */
.gd-card-cover.gd-grad-0 { background: linear-gradient(135deg, #3a1420, #7a2030 50%, #c02836); }
.gd-card-cover.gd-grad-1 { background: linear-gradient(135deg, #0a0e18, #1a2340 55%, #405578); }
.gd-card-cover.gd-grad-2 { background: linear-gradient(135deg, #1a1a24, #3a2d38 55%, #f5b53d); }
.gd-card-cover.gd-grad-3 { background: linear-gradient(135deg, #1a0e2e, #4a1a6a 55%, #a560d0); }
.gd-card-id-badge {
  position: absolute; top: 10px; left: 10px;
  padding: 3px 8px; background: var(--p5-red, #e63946); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
}
.gd-card-status {
  position: absolute; top: 10px; right: 10px;
  padding: 3px 8px; background: rgba(0,0,0,0.7); color: #4caf50;
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
}
.gd-card-status.draft { color: #b5b5b5; }
.gd-card-status.running { color: #5b8def; }
.gd-card-status.done { color: #4caf50; }
.gd-card-status.failed { color: #f44336; }

/* ---------- Single-active-project lock — GENERATING badge + card halo ---------- */
.gd-card-busy-pulse {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 14px;
  background: var(--p5-red, #e63946);
  color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  border: 1px solid rgba(255, 255, 255, 0.25);
  z-index: 3;
  animation: gd-busy-pulse 1.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gd-busy-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.75); opacity: 1; }
  50%      { box-shadow: 0 0 18px 6px rgba(230, 57, 70, 0); opacity: 0.85; }
}
.gd-card.busy { box-shadow: 0 0 0 1px var(--p5-red, #e63946), 0 0 14px rgba(230, 57, 70, 0.35); }
.gd-card.busy .gd-card-cover::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 2;
  pointer-events: none;
}

/* Delete button — hover reveal at bottom-right of cover */
.gd-card-delete {
  position: absolute; right: 8px; bottom: 8px; z-index: 4;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); border: none; color: #ff6b6b;
  cursor: pointer; opacity: 0;
  transition: opacity 0.2s, background 0.2s, color 0.2s;
}
.gd-card:hover .gd-card-delete { opacity: 1; }
.gd-card-delete:hover { background: var(--p5-red, #e63946); color: #fff; }
[data-theme="light"] .gd-card-delete { background: rgba(255,255,255,0.7); color: var(--p5-red, #e63946); }
[data-theme="light"] .gd-card-delete:hover { background: var(--p5-red, #e63946); color: #fff; }

/* Share button — sits left of delete, hover reveal on cover */
.gd-card-share {
  position: absolute; right: 44px; bottom: 8px; z-index: 4;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); border: none; color: #fff;
  cursor: pointer; opacity: 0;
  transition: opacity 0.2s, background 0.2s, color 0.2s;
}
.gd-card:hover .gd-card-share { opacity: 1; }
.gd-card-share:hover { background: var(--p5-red, #e63946); color: #fff; }
[data-theme="light"] .gd-card-share { background: rgba(255,255,255,0.7); color: var(--p5-red, #e63946); }
[data-theme="light"] .gd-card-share:hover { background: var(--p5-red, #e63946); color: #fff; }
.gd-card-info { padding: 12px 14px; flex: 1; }
.gd-card-title { font-size: 14px; font-weight: 600; color: var(--p5-text, #e8e8e8); margin: 0 0 4px; }
.gd-card-meta { font-size: 11px; color: var(--p5-muted, #7a7a7a); }

.gd-card-new {
  border: 2px dashed var(--p5-border, #24242e); cursor: pointer;
  aspect-ratio: 16/12; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 8px; color: var(--p5-muted, #7a7a7a);
  transition: all 0.2s; background: transparent;
}
.gd-card-new:hover { border-color: var(--p5-red, #e63946); color: var(--p5-red, #e63946); }
.gd-card-new svg { width: 32px; height: 32px; }
.gd-card-new span { font-size: 12px; letter-spacing: 1.5px; font-weight: 700; }

.gd-empty {
  text-align: center; padding: 80px 20px; color: var(--p5-muted, #7a7a7a);
}
.gd-empty h3 { font-family: var(--font-display, 'Oswald', sans-serif); letter-spacing: 2px; color: var(--p5-text-secondary, #b5b5b5); margin: 0 0 12px; }

/* ---------- Wizard Stepper ---------- */
.gd-stepper {
  display: flex; align-items: center; padding: 14px 24px;
  background: var(--p5-dark, #0a0a0f);
  border-bottom: 1px solid var(--p5-border, #24242e);
  gap: 16px; flex: 0 0 auto;
}
.gd-stepper-back {
  padding: 7px 14px; background: transparent;
  border: 1px solid var(--p5-border, #24242e);
  color: var(--p5-text-secondary, #b5b5b5);
  font-size: 11px; letter-spacing: 1.5px; cursor: pointer;
  font-weight: 600; font-family: inherit; transition: all 0.15s;
}
.gd-stepper-back:hover { color: var(--p5-red, #e63946); border-color: var(--p5-red, #e63946); }
.gd-step-rail { display: flex; gap: 4px; flex: 1; }
.gd-step-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 14px;
  background: var(--p5-card, #16161d); color: var(--p5-muted, #7a7a7a);
  font-size: 11px; letter-spacing: 1.5px; font-weight: 600;
  transition: all 0.2s;
  cursor: pointer;
}
.gd-step-item .num {
  display: inline-flex; width: 20px; height: 20px;
  align-items: center; justify-content: center;
  background: var(--p5-input-bg, #1a1a22); color: var(--p5-muted, #7a7a7a);
  font-weight: 700; font-size: 11px;
}
.gd-step-item.active { background: var(--p5-red, #e63946); color: #fff; cursor: default; }
.gd-step-item.active .num { background: rgba(0,0,0,0.4); color: #fff; }
.gd-step-item.done { background: rgba(76,175,80,0.15); color: #4caf50; }
.gd-step-item.done .num { background: #4caf50; color: #fff; }
.gd-step-item.done:hover, .gd-step-item.reachable:hover {
  background: var(--p5-red, #e63946); color: #fff;
}
.gd-step-item.done:hover .num, .gd-step-item.reachable:hover .num {
  background: rgba(0,0,0,0.4); color: #fff;
}
.gd-step-item.locked {
  cursor: not-allowed; opacity: 0.45;
  pointer-events: none; /* physical click block — defense-in-depth on top of gdJumpStep reachable guard */
}
.gd-step-item.locked:hover { background: var(--p5-card, #16161d); color: var(--p5-muted, #7a7a7a); }

/* ---------- Wizard Panels Area ---------- */
/* min-height:0 同 .gd-panel — 否则 step-panel 长内容撑大 panels-area，overflow-y:auto 不生效，
   滚动祖先回退到外层 .dt-content，dag-monitor 的 sticky top:0 失效。 */
.gd-panels-area {
  flex: 1; min-height: 0; overflow-y: auto; padding: 32px;
  background: var(--p5-dark, #0a0a0f);
}
.gd-panels-area::-webkit-scrollbar { width: 6px; }
.gd-panels-area::-webkit-scrollbar-thumb { background: var(--p5-input-bg, #1a1a22); }
.gd-step-panel { display: none; max-width: 1200px; margin: 0 auto; }
.gd-step-panel.active { display: block; }

/* ---------- Section Title ---------- */
.gd-section-title {
  font-size: 17px; font-weight: 700; margin: 0 0 16px;
  display: flex; align-items: center; gap: 12px;
  color: var(--p5-text, #e8e8e8); letter-spacing: 0.5px;
}
.gd-section-title:not(:first-child) { margin-top: 32px; }
.gd-section-title .gd-num-badge {
  display: inline-flex; width: 26px; height: 26px;
  align-items: center; justify-content: center;
  background: var(--p5-red, #e63946); color: #fff;
  font-weight: 700; font-size: 13px;
}
.gd-section-hint {
  font-size: 12px; color: var(--p5-text-secondary, #b5b5b5);
  margin: 0 0 16px; line-height: 1.5;
}

/* ---------- Step 1: Brief Form ---------- */
.gd-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gd-form-grid .full { grid-column: 1 / -1; }
.gd-form-grid label {
  display: block; font-size: 11px; color: var(--p5-text-secondary, #b5b5b5);
  margin-bottom: 6px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600;
}
.gd-form-grid input, .gd-form-grid select, .gd-form-grid textarea {
  width: 100%; padding: 10px 12px;
  background: var(--p5-card, #16161d); border: 1px solid var(--p5-border, #24242e);
  color: var(--p5-text, #e8e8e8); font-size: 14px; font-family: inherit;
}
.gd-form-grid textarea { min-height: 70px; resize: vertical; }
.gd-form-grid input:focus, .gd-form-grid select:focus, .gd-form-grid textarea:focus {
  outline: none; border-color: var(--p5-red, #e63946);
}

/* ---------- Script Summary ---------- */
.gd-script-summary {
  background: var(--p5-card, #16161d);
  border-left: 3px solid var(--p5-red, #e63946);
  padding: 14px 18px; margin: 16px 0 0; font-size: 13px;
}
.gd-script-summary h4 { margin: 0 0 8px; font-size: 15px; color: var(--p5-text, #e8e8e8); }
.gd-script-summary p { margin: 4px 0; color: var(--p5-text-secondary, #b5b5b5); }
.gd-script-summary .field { color: var(--p5-red, #e63946); margin-right: 6px; font-weight: 600; }

/* ---------- Cost Estimate ---------- */
.gd-cost-card {
  background: var(--p5-card, #16161d);
  border-left: 3px solid #f4b400;
  padding: 12px 18px;
  margin: 14px 0 0;
  font-size: 13px;
}
.gd-cost-card.insufficient { border-left-color: #f44336; }
.gd-cost-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #f4b400; letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 700; margin-bottom: 8px;
}
.gd-cost-head .gd-cost-meta {
  margin-left: auto; color: var(--p5-text-secondary, #888);
  font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px;
}
.gd-cost-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 3px 0; color: var(--p5-text-secondary, #b5b5b5);
}
.gd-cost-row b { color: var(--p5-text, #e8e8e8); font-weight: 600; }
.gd-cost-row.total {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed rgba(255,255,255,0.12);
  color: var(--p5-text, #e8e8e8);
}
.gd-cost-row.total b { color: #f4b400; }
.gd-cost-row.balance b { color: #4caf50; }
.gd-cost-row.balance.insufficient b { color: #f44336; }

/* ---------- Style Gallery ---------- */
.gd-styles-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.gd-style-card {
  background: var(--p5-card, #16161d); border: 2px solid var(--p5-border, #24242e);
  cursor: pointer; transition: all 0.2s; position: relative;
}
.gd-style-card:hover { border-color: var(--p5-red, #e63946); }
.gd-style-card.selected {
  border-color: var(--p5-red, #e63946);
  box-shadow: 0 0 0 1px var(--p5-red, #e63946) inset, 0 0 16px rgba(230,57,70,0.3);
}
.gd-style-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.gd-style-cover-placeholder {
  width: 100%; aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.6);
}
.gd-style-cover-placeholder.gd-grad-0 { background: linear-gradient(135deg, #3a1420, #7a2030 50%, #c02836); }
.gd-style-cover-placeholder.gd-grad-1 { background: linear-gradient(135deg, #0a0e18, #1a2340 55%, #405578); }
.gd-style-cover-placeholder.gd-grad-2 { background: linear-gradient(135deg, #1a1a24, #3a2d38 55%, #f5b53d); }
.gd-style-cover-placeholder.gd-grad-3 { background: linear-gradient(135deg, #1a0e2e, #4a1a6a 55%, #a560d0); }
.gd-style-card .name { padding: 8px 10px 4px; font-size: 13px; font-weight: 600; color: var(--p5-text, #e8e8e8); }
.gd-style-card .cat { padding: 0 10px 8px; font-size: 10px; color: var(--p5-muted, #7a7a7a); text-transform: uppercase; letter-spacing: 1px; }
.gd-style-card .gd-style-check {
  position: absolute; top: 8px; right: 8px;
  width: 20px; height: 20px; background: var(--p5-red, #e63946);
  color: #fff; display: none; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.gd-style-card.selected .gd-style-check { display: flex; }
/* Zoom-to-lightbox button — mirrors .gd-hover-btn spec (used on image cards)
   for visual consistency. Hover-revealed top-left badge. */
.gd-style-zoom {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.75); border: none; color: #fff;
  cursor: pointer; opacity: 0;
  font-size: 14px;
  transition: opacity 0.2s, background 0.15s;
}
.gd-style-card:hover .gd-style-zoom { opacity: 1; }
.gd-style-card .gd-style-zoom:hover { background: var(--p5-red, #e63946); }
[data-theme="light"] .gd-style-card .gd-style-zoom { background: rgba(255,255,255,0.85); color: var(--p5-text, #1a1816); }
[data-theme="light"] .gd-style-card .gd-style-zoom:hover { background: var(--p5-red, #e63946); color: #fff; }

/* ---------- Image Lightbox (webp display → click → PNG original) ---------- */
.gd-lightbox-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.88); z-index: 2000;
  align-items: center; justify-content: center;
  padding: 40px;
}
.gd-lightbox-overlay.active { display: flex; }
.gd-lightbox-stage {
  display: flex; flex-direction: column; align-items: center;
  max-width: 100%; max-height: 100%; gap: 12px;
}
.gd-lightbox-stage img {
  max-width: min(1400px, 92vw);
  max-height: 82vh;
  object-fit: contain;
  display: block;
  background: #0a0a0f;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
.gd-lightbox-caption {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px; letter-spacing: 0.5px;
  text-align: center;
  max-width: 80vw;
}
.gd-lightbox-caption:empty { display: none; }
.gd-lightbox-close {
  position: fixed; top: 18px; right: 22px;
  width: 38px; height: 38px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: background 0.15s, border-color 0.15s;
  z-index: 2;
}
.gd-lightbox-close:hover { background: var(--p5-red); border-color: var(--p5-red); }

/* ---------- Step 2: Image Grids ---------- */
.gd-images-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px; margin-bottom: 12px;
}
.gd-images-grid.portraits {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.gd-image-card {
  background: var(--p5-card, #16161d); border: 1px solid var(--p5-border, #24242e);
  position: relative; overflow: hidden; transition: border-color 0.15s;
}
.gd-image-card:hover { border-color: var(--p5-red, #e63946); }
.gd-image-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.gd-image-card.portrait img { aspect-ratio: 2/3; }
.gd-image-card.grid-card img { aspect-ratio: 16/9; }
.gd-image-card .label {
  padding: 8px 10px; font-size: 12px;
  display: flex; justify-content: space-between; align-items: center;
  color: var(--p5-text, #e8e8e8); font-weight: 500;
}
.gd-image-card .placeholder {
  width: 100%; aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 8px;
  background: var(--p5-input-bg, #1a1a22); color: var(--p5-muted, #7a7a7a);
}
.gd-image-card.portrait .placeholder { aspect-ratio: 2/3; }
/* Compact placeholder — drops the aspect-ratio so failed/blocked cards
   don't reserve full portrait empty space (was: 2:3 staring void). */
.gd-image-card .placeholder.is-compact {
  aspect-ratio: auto;
  padding: 18px 12px;
  min-height: 0;
  gap: 10px;
}
.gd-image-card.portrait .placeholder.is-compact { aspect-ratio: auto; }
/* Status text under the icon — readable label so PAUSED / QUEUED isn't
   mistaken for an error (D fix). */
.gd-status-text {
  font-size: 11px; line-height: 1.4;
  color: var(--p5-muted, #7a7a7a);
  text-align: center; letter-spacing: 0.3px;
  font-weight: 500;
  padding: 0 8px;
}
.gd-status-text.is-failed { color: #f44336; font-weight: 600; }
.gd-status-text.is-blocked { color: #f5c518; font-weight: 600; }
.gd-image-card .gd-hover-actions {
  position: absolute; top: 8px; right: 8px;
  display: none; gap: 4px;
}
.gd-image-card:hover .gd-hover-actions { display: flex; }
.gd-image-card .gd-hover-btn {
  width: 28px; height: 28px; background: rgba(0,0,0,0.75);
  border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: background 0.15s;
}
.gd-image-card .gd-hover-btn:hover { background: var(--p5-red, #e63946); }

.gd-status-pill {
  font-size: 10px; padding: 2px 7px; letter-spacing: 0.8px;
  font-weight: 700; text-transform: uppercase;
}
.gd-status-pill.pending { background: rgba(122,122,122,0.15); color: var(--p5-muted, #7a7a7a); }
.gd-status-pill.queued  { background: rgba(122,122,122,0.18); color: var(--p5-muted, #7a7a7a); }
.gd-status-pill.paused  { background: rgba(245,181,61,0.15); color: #f5b53d; }
/* finishing = paused 子状态（vendor 已派单不可撤回，pause 不冻结已 submit 任务）。
   与 paused 同色调表达"队列冻结"，但略亮（0.22 vs 0.15）+ 高亮黄表示"还在收尾"。 */
.gd-status-pill.finishing { background: rgba(245,181,61,0.22); color: #ffc857; }
.gd-status-pill.running { background: rgba(91,141,239,0.15); color: #5b8def; }

/* sql/172 — version dots: rendered below the .label of each shot card to switch
   between historical render versions (retry/regen creates v2/v3...). Only shown
   when there are ≥2 versions (single-version cards omit the dots row entirely).
   Sits in normal flow (parent .gd-image-card has overflow:hidden — absolute
   positioning would be clipped). Active dot = solid red; non-active = outlined;
   failed render = dim red. */
.gd-render-dots {
  display: flex; justify-content: center; gap: 5px;
  padding: 6px 8px; border-top: 1px solid var(--p5-border, #24242e);
  background: rgba(0,0,0,0.35);
}
.gd-render-dot {
  width: 8px; height: 8px; padding: 0; border: 1px solid rgba(255,255,255,0.45);
  background: transparent; cursor: pointer; transition: all 0.15s;
}
.gd-render-dot:hover { border-color: var(--p5-red, #e63946); transform: scale(1.3); }
.gd-render-dot.active { background: var(--p5-red, #e63946); border-color: var(--p5-red, #e63946); }
.gd-render-dot.failed { border-color: rgba(244,67,54,0.55); background: rgba(244,67,54,0.25); }
.gd-status-pill.done { background: rgba(76,175,80,0.15); color: #4caf50; }
.gd-status-pill.failed { background: rgba(244,67,54,0.15); color: #f44336; }
.gd-queued-icon { color: rgba(122,122,122,0.5); display: inline-flex; }
.gd-failed-icon { color: #f44336; display: inline-flex; }

/* Failed image card — red tint + Retry button overlay */
.gd-image-card.is-failed { border-color: rgba(244,67,54,0.4); }
.gd-image-card.is-failed .placeholder { background: rgba(244,67,54,0.05); flex-direction: column; gap: 12px; }

/* Blocked image card — content moderation hard-block. Yellow accent (warning
   semantics per rules-ui-global A6) so user distinguishes "retryable failure"
   vs "content needs editing at Step 1". */
.gd-blocked-icon { color: #f5c518; display: inline-flex; }
.gd-image-card.is-blocked { border-color: rgba(245,197,24,0.4); }
.gd-image-card.is-blocked .placeholder {
  background: rgba(245,197,24,0.05);
  flex-direction: column; gap: 8px; padding: 0 12px;
}
.gd-failed-hint {
  font-size: 10px; line-height: 1.4;
  color: #f5c518;
  padding: 0 4px; max-width: 100%;
  text-align: center; word-break: break-word;
}
.gd-card-retry {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px;
  background: var(--p5-red, #e63946); border: none;
  color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  cursor: pointer; transition: background 0.15s, opacity 0.15s; font-family: inherit;
}
.gd-card-retry:hover:not(:disabled) { background: #ff4757; }
/* In-flight retry — visually dead so user doesn't keep mashing.
   pointer-events:none guards against double-click in the API window. */
.gd-card-retry:disabled,
.gd-hover-btn:disabled {
  background: #4a4a4a; color: #999;
  cursor: not-allowed; opacity: 0.55;
  pointer-events: none;
}

/* Bug 3 — failure reason on retry cards. Sits inside .placeholder right
   under the retry button (flex-column gap 8/12). Constrained width + 2-line
   clamp so long vendor errors don't blow up the card. Full text via title. */
.gd-card-reason {
  font-size: 10px; line-height: 1.3;
  color: #ff8a8a;
  padding: 0 10px;
  margin-top: 4px;
  text-align: center;
  word-break: break-word;
  max-width: 90%;
  max-height: 2.6em;
  overflow: hidden;
}

/* ---------- Step 3: Video Progress ---------- */
/* Video card grid (Step 3) — same auto-fill responsive layout as image grid */
.gd-video-progress {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px; margin-bottom: 12px;
}
.gd-image-card.video-card video {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
  background: var(--p5-input-bg, #1a1a22);
}
.gd-image-card.video-card .placeholder { aspect-ratio: 16/9; }
.gd-image-card.video-card .gd-dur-tag {
  display: inline-block; padding: 1px 6px; margin-left: 4px;
  background: rgba(255,255,255,0.08); color: var(--p5-muted, #7a7a7a);
  font-size: 9px; font-weight: 600; letter-spacing: 1px; vertical-align: middle;
}
.gd-image-card.video-card .gd-video-play-overlay {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); color: #fff; border: 2px solid rgba(255,255,255,0.85);
  border-radius: 50%;
  cursor: pointer; opacity: 0; transition: opacity 0.15s;
}
.gd-image-card.video-card:hover .gd-video-play-overlay { opacity: 1; }

/* Full-screen video playback modal */
.gd-video-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.85);
  display: none; align-items: center; justify-content: center;
  z-index: 9999;
}
.gd-video-modal-overlay.active { display: flex; }
.gd-video-modal-box {
  position: relative; width: min(90vw, 1280px); max-height: 90vh;
}
.gd-video-modal-box video {
  width: 100%; max-height: 90vh; background: #000; display: block;
}
/* Media slot wraps either <video> (CDN mp4) or <iframe> (YouTube). For YT we
   need 16:9 aspect so the iframe scales correctly inside the modal box. */
.gd-video-modal-media { width: 100%; background: #000; }
.gd-video-modal-media iframe {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  max-height: 90vh; border: 0; background: #000;
}
.gd-video-modal-close {
  position: absolute; top: -40px; right: 0;
  width: 32px; height: 32px;
  background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer; font-family: inherit;
}
.gd-video-modal-close:hover { background: rgba(255,255,255,0.1); }
.gd-video-modal-download {
  position: absolute; top: -40px; right: 44px;
  width: 32px; height: 32px;
  background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #fff;
  cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
}
.gd-video-modal-download:hover { background: rgba(255,255,255,0.1); }
.gd-video-modal-download svg { stroke: #fff; }

/* Legacy row styles (kept for backwards-compat in case any old project state still renders rows) */
.gd-video-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0; font-size: 13px;
  border-bottom: 1px solid var(--p5-border, #24242e);
}
.gd-video-row:last-child { border-bottom: none; }
.gd-video-row .gd-video-label { flex: 0 0 220px; color: var(--p5-text, #e8e8e8); font-weight: 500; }
.gd-video-row .gd-video-label .small { font-size: 11px; color: var(--p5-muted, #7a7a7a); margin-left: 4px; font-weight: normal; }
.gd-video-row .gd-video-bar { flex: 1; height: 6px; background: var(--p5-input-bg, #1a1a22); position: relative; overflow: hidden; }
.gd-video-row .gd-video-bar-fill { position: absolute; top: 0; left: 0; bottom: 0; background: var(--p5-red, #e63946); transition: width 0.4s; }
.gd-video-row .gd-video-status { flex: 0 0 70px; text-align: right; }

.gd-final-block { margin-top: 28px; }
/* 2-column layout: video + actions on the left, version sidebar on the right.
   Sidebar collapses to 0 when the renders count is < 2 (gdRenderConcatHistory
   sets aside[hidden]) — :has() lets the grid fall back to single-column so
   the video stretches the full width on single-version projects. */
.gd-final-row {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 16px;
  align-items: start;
  margin: 12px auto 0;
  max-width: 1300px;
}
.gd-final-row:has(.gd-final-history[hidden]) { grid-template-columns: 1fr; }
.gd-final-main { min-width: 0; }
.gd-final-video {
  width: 100%; max-width: 1024px; margin: 0 auto; display: block;
  background: #000; border: 1px solid var(--p5-border, #24242e);
}
.gd-final-actions { display: flex; gap: 12px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }

/* ---------- Concat history sidebar (Step 3) ---------- */
.gd-final-history {
  background: var(--p5-card, #16161d);
  border: 1px solid var(--p5-border, #24242e);
  padding: 12px;
  max-height: 560px;
  overflow-y: auto;
  position: sticky;
  top: 12px;
}
.gd-final-history-title {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--p5-muted, #7a7a7a);
  font-weight: 700;
}
.gd-final-history-list { display: flex; flex-direction: column; gap: 6px; }
.gd-history-tile {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.02);
  transition: border-color .15s ease, background .15s ease;
}
.gd-history-tile:hover {
  border-color: var(--p5-border, #24242e);
  background: rgba(255,255,255,0.04);
}
.gd-history-tile.active {
  border-color: var(--p5-red, #e63946);
  background: rgba(230, 57, 70, 0.08);
}
.gd-history-tile-num {
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: 14px;
  color: var(--p5-red, #e63946);
  min-width: 30px;
  letter-spacing: 0.5px;
}
.gd-history-tile-meta { flex: 1; min-width: 0; }
.gd-history-tile-date {
  font-size: 12px; color: var(--p5-text, #e5e5e5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gd-history-tile-sub {
  font-size: 10px; color: var(--p5-muted, #7a7a7a);
  margin-top: 2px;
  letter-spacing: 0.5px;
}
.gd-history-tile-active {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 6px;
  background: var(--p5-red, #e63946);
  color: #fff;
}

/* H5 fallback — sidebar stacks below video on narrow viewports so video
   isn't crushed to a tiny strip on phones / split-screen tablets. */
@media (max-width: 768px) {
  .gd-final-row { grid-template-columns: 1fr; }
  .gd-final-history { position: static; max-height: 320px; }
}

/* ---------- Action Bar ---------- */
.gd-action-bar {
  display: flex; gap: 12px; justify-content: flex-end; align-items: center;
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--p5-border, #24242e);
}
/* Attention pulse — applied briefly to a CTA button after the user takes an
   action that enables it (e.g. picking a style enables Next). Pulses twice
   then auto-removes. Used by gdSelectStyle. */
@keyframes gd-btn-attention {
  0%   { box-shadow: 0 0 0 0   rgba(230,57,70,0.7); }
  70%  { box-shadow: 0 0 0 14px rgba(230,57,70,0); }
  100% { box-shadow: 0 0 0 0   rgba(230,57,70,0); }
}
.gd-btn-primary.gd-attention {
  animation: gd-btn-attention 1.2s ease-out 2;
}
.gd-action-bar .gd-status-text {
  margin-right: auto; font-size: 13px;
  color: var(--p5-text-secondary, #b5b5b5);
  display: flex; align-items: center; gap: 8px;
}
.gd-action-bar .gd-status-text.error { color: #f44336; }

/* ---------- Reusable Buttons (P5 P-Style) ---------- */
.gd-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; background: var(--p5-red, #e63946); border: none;
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  cursor: pointer; font-family: inherit; transition: background 0.15s;
}
.gd-btn-primary:hover:not(:disabled) { background: #ff4757; }
.gd-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.gd-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; background: transparent;
  border: 1px solid var(--p5-border, #24242e); color: var(--p5-text, #e8e8e8);
  font-size: 12px; font-weight: 600; letter-spacing: 1px;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.gd-btn-ghost:hover:not(:disabled) { border-color: var(--p5-red, #e63946); color: var(--p5-red, #e63946); }
.gd-btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; }

/* Pause/Resume queue button */
.gd-btn-pause {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; background: transparent;
  border: 1px solid #f5b53d; color: #f5b53d;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.gd-btn-pause:hover { background: #f5b53d; color: #16161d; }
.gd-btn-pause.paused { border-color: #4caf50; color: #4caf50; }
.gd-btn-pause.paused:hover { background: #4caf50; color: #16161d; }

/* Paused banner — explains pause semantics so user understands running tasks finish */
.gd-paused-banner {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 16px; margin-bottom: 18px;
  background: rgba(245,181,61,0.1);
  border-left: 4px solid #f5b53d;
  color: var(--p5-text, #e8e8e8);
}
.gd-paused-banner .banner-head {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  color: #f5b53d;
}
.gd-paused-banner .banner-body {
  font-size: 11px; color: var(--p5-text-secondary, #b5b5b5); line-height: 1.5;
}
.gd-paused-banner .banner-body b { color: var(--p5-text, #e8e8e8); }
.gd-btn-success {
  padding: 10px 22px; background: #4caf50; border: none;
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  cursor: pointer; font-family: inherit;
}

/* ---------- Spinner ---------- */
.gd-spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--p5-border, #24242e);
  border-top-color: var(--p5-red, #e63946);
  border-radius: 50%; animation: gdSpin 0.8s linear infinite;
}
/* Bigger spinner inside the empty image-card placeholder so the running state
   is clearly visible at card scale. Doesn't affect inline spinners in retry
   buttons or status text. */
.gd-image-card .placeholder .gd-spinner {
  width: 40px; height: 40px;
  border-width: 3px;
}
@keyframes gdSpin { to { transform: rotate(360deg); } }

/* ---------- DAG Monitor (sticky-top inside panels-area) ----------
   原右下角浮动用户不易注意 → 改 sticky top + 红色脉冲边框 ripple。
   max-width 与 .gd-step-panel 一致，居中对齐内容。 */
.gd-dag-monitor {
  position: sticky; top: 0; z-index: 5;
  max-width: 1200px; margin: 0 auto 16px;
  background: var(--p5-card, #16161d);
  border: 1px solid var(--p5-red, #e63946);
  padding: 12px 14px; display: none;
}
.gd-dag-monitor.active {
  display: block;
  animation: gdDagBorderPulse 1.6s ease-in-out infinite;
}
.gd-dag-head {
  font-size: 10px; letter-spacing: 2px;
  color: var(--p5-text-secondary, #b5b5b5);
  text-transform: uppercase; margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center;
}
.gd-dag-head .gd-dag-timer { color: var(--p5-red, #e63946); font-weight: 700; }
.gd-dag-step {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; font-size: 12px;
}
.gd-dag-step .dot {
  width: 8px; height: 8px;
  background: var(--p5-input-bg, #1a1a22); flex: 0 0 auto;
}
.gd-dag-step[data-status="running"] .dot { background: var(--p5-red, #e63946); animation: gdDagPulse 1s infinite; }
.gd-dag-step[data-status="done"] .dot { background: #4caf50; }
.gd-dag-step[data-status="failed"] .dot { background: #f44336; }
.gd-dag-step[data-status="running"] .label { color: var(--p5-red, #e63946); }
.gd-dag-step[data-status="done"] .label { color: #4caf50; }
.gd-dag-step .label { flex: 1; color: var(--p5-text-secondary, #b5b5b5); }
.gd-dag-step .timer { font-size: 10px; color: var(--p5-muted, #7a7a7a); }
@keyframes gdDagPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes gdDagBorderPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.55); }
  50%      { box-shadow: 0 0 0 10px rgba(230, 57, 70, 0); }
}

/* ---------- Modal (Regen prompt) ---------- */
.gd-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.7); z-index: 1000;
  align-items: center; justify-content: center;
}
.gd-modal-overlay.active { display: flex; }
.gd-modal-box {
  background: var(--p5-card, #16161d);
  border: 1px solid var(--p5-border, #24242e);
  padding: 24px 28px; min-width: 480px; max-width: 720px;
  width: 90vw;
}
.gd-modal-box h3 {
  margin: 0 0 6px; font-size: 16px;
  color: var(--p5-text, #e8e8e8); letter-spacing: 0.5px;
}
.gd-modal-box .gd-modal-hint {
  font-size: 12px; color: var(--p5-muted, #7a7a7a);
  margin: 0 0 14px;
}
.gd-modal-box textarea {
  width: 100%; padding: 10px 12px;
  background: var(--p5-input-bg, #1a1a22);
  border: 1px solid var(--p5-border, #24242e);
  color: var(--p5-text, #e8e8e8);
  font-family: inherit; font-size: 12px; line-height: 1.5;
  min-height: 220px; resize: vertical;
}
.gd-modal-box textarea:focus { outline: none; border-color: var(--p5-red, #e63946); }
.gd-modal-actions {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px;
}

/* ---------- Modal: Credits Insufficient（替换原 toast） ---------- */
.gd-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 28px; height: 28px;
  background: transparent; border: 0;
  color: var(--p5-muted, #7a7a7a);
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s;
}
.gd-modal-close:hover { color: var(--p5-red-2, #ff6b6b); }
.gd-credits-box {
  position: relative;
  min-width: 360px; max-width: 420px;
  padding: 40px 36px 28px;
  text-align: center;
}
/* 顶部红色装饰条，呼应平台 P5 风格 */
.gd-credits-accent {
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--p5-red, #e63946), var(--p5-red-2, #ff6b6b), transparent);
}
.gd-credits-title {
  font-size: 16px; font-weight: 700; letter-spacing: 2px;
  color: var(--p5-text, #e8e8e8);
  margin: 0 0 12px;
  text-transform: uppercase;
}
.gd-credits-msg {
  font-size: 13px; line-height: 1.7;
  color: var(--p5-text-secondary, #b5b5b5);
  margin: 0 0 24px;
}
/* 成本明细块（明细行 + 合计 + 余额 + 缺口） */
.gd-credits-breakdown {
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid var(--p5-border, #24242e);
  border-bottom: 1px solid var(--p5-border, #24242e);
  padding: 14px 24px 16px;
  margin: 0 -36px 14px;
  text-align: left;
}
.gd-credits-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 0;
  font-size: 13px;
  color: var(--p5-text-secondary, #b5b5b5);
}
.gd-credits-row span { font-weight: 500; }
.gd-credits-row span i {
  font-style: normal; color: var(--p5-muted, #7a7a7a);
  font-size: 11px; margin-left: 4px;
}
.gd-credits-row b {
  font-weight: 700; color: var(--p5-text, #e8e8e8);
  font-family: 'Oswald', 'Inter', sans-serif;
  font-size: 14px;
}
.gd-credits-row.total {
  font-size: 13px;
  color: var(--p5-text, #e8e8e8);
  font-weight: 600;
  letter-spacing: 0.5px;
}
.gd-credits-row.total b { font-size: 16px; }
.gd-credits-row.balance b,
.gd-credits-row.shortage b { font-size: 16px; }
.gd-credits-row.balance span,
.gd-credits-row.shortage span {
  color: var(--p5-text, #e8e8e8); font-weight: 600;
}
.gd-credits-low { color: var(--p5-red-2, #ff6b6b) !important; }
.gd-credits-divider {
  height: 1px; background: var(--p5-border, #24242e);
  margin: 8px 0;
}
.gd-credits-units {
  font-size: 10px; letter-spacing: 1px;
  color: var(--p5-muted, #7a7a7a);
  margin: 0 0 22px;
  text-transform: lowercase;
}

/* 弹窗里"下一步是干嘛"描述块 */
.gd-credits-step { text-align: left; }
.gd-credits-step-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--p5-red-2, #ff6b6b);
  margin-bottom: 8px;
}
.gd-credits-step-desc {
  font-size: 13px; line-height: 1.7;
  color: var(--p5-text, #e8e8e8);
  font-weight: 500;
}
.gd-credits-cost {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--p5-border, #24242e);
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--p5-muted, #888);
  letter-spacing: 0.3px;
}
.gd-credits-cost .gd-cc-need b { color: var(--p5-red, #e63946); font-size: 14px; font-weight: 700; }
.gd-credits-cost .gd-cc-bal { opacity: 0.85; }

.gd-credits-step-label .gd-help-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--p5-red, #e63946); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0;
  margin-left: 6px; cursor: help; position: relative;
  vertical-align: middle; outline: none;
  text-transform: none;
}
/* 透明 hit-area 桥：跨过 icon → popover 之间 10px 空隙，避免鼠标过路时 :hover 丢失。
   伪元素是 icon 的子节点，cursor 命中它时 .gd-help-icon:hover 仍激活。 */
.gd-help-icon::after {
  content: ''; position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  width: 380px; height: 14px;
  pointer-events: auto;
}
.gd-help-popover {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: #0e0e14; border: 1px solid var(--p5-border, #24242e);
  padding: 10px; min-width: 360px;
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  z-index: 100; pointer-events: none;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
.gd-help-popover::before {
  content: ''; position: absolute;
  top: -7px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 7px solid var(--p5-border, #24242e);
}
.gd-help-popover::after {
  content: ''; position: absolute;
  top: -6px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 6px solid #0e0e14;
}
.gd-help-icon:hover .gd-help-popover,
.gd-help-icon:focus .gd-help-popover,
.gd-help-icon:focus-within .gd-help-popover {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.gd-help-title {
  font-size: 11px; color: #fff;
  text-align: center; letter-spacing: 1.2px;
  font-weight: 700; padding: 2px 0 6px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--p5-border, #24242e);
}
.gd-help-imgs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.gd-help-imgs img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  border: 1px solid var(--p5-border, #24242e);
  display: block;
}
.gd-help-imgs img.gd-help-img-clickable {
  cursor: zoom-in; transition: border-color 0.15s, transform 0.15s;
}
.gd-help-imgs img.gd-help-img-clickable:hover {
  border-color: var(--p5-red, #e63946);
  transform: scale(1.03);
}
.gd-help-text {
  font-size: 11px; color: var(--p5-red-2, #ff6b6b);
  text-align: center; letter-spacing: 0.5px;
  font-weight: 600; padding: 2px 0;
}
.gd-credits-cta {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 200px; justify-content: center;
  padding: 12px 28px; font-size: 13px; letter-spacing: 2px;
  font-weight: 700; text-transform: uppercase;
}
.gd-credits-cta svg { transition: transform .2s; }
.gd-credits-cta:hover svg { transform: translateX(4px); }

/* ---------- LLM-designed shots preview (Step 1) ---------- */
.gd-shots-preview {
  margin: 16px 0 24px;
  background: var(--p5-card, #16161d);
  border: 1px solid var(--p5-border, #24242e);
  padding: 14px 16px;
}
.gd-shots-head {
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  color: var(--p5-text-secondary, #b5b5b5);
  margin-bottom: 12px;
  display: flex; justify-content: space-between; align-items: center;
}
.gd-shots-meta { font-weight: 500; color: var(--p5-muted, #7a7a7a); }
.gd-shot-row { padding: 10px 0; border-bottom: 1px solid var(--p5-border, #24242e); }
.gd-shot-row:last-child { border-bottom: none; }
.gd-shot-row.grid { background: rgba(230,57,70,0.04); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.gd-shot-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.gd-shot-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px;
  background: var(--p5-input-bg, #1a1a22); color: var(--p5-text, #e8e8e8);
  font-size: 11px; font-weight: 700;
}
.gd-shot-type {
  font-size: 11px; font-weight: 600; letter-spacing: 1px;
  color: var(--p5-text, #e8e8e8);
}
.gd-shot-dur {
  margin-left: auto; font-size: 11px; color: var(--p5-muted, #7a7a7a);
}
.gd-shot-desc {
  font-size: 11px; color: var(--p5-text-secondary, #b5b5b5);
  padding-left: 30px; line-height: 1.5;
}

/* ---------- interaction_kind tag (shown in shot rows + image cards) ---------- */
.gd-kind-tag {
  display: inline-block; padding: 2px 8px;
  background: rgba(91,141,239,0.15); color: #5b8def;
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase;
}
.gd-grid-flag {
  display: inline-block; padding: 2px 8px;
  background: var(--p5-red, #e63946); color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
}

/* ---------- Cover tag (manually-set cover indicator on image cards) ---------- */
.gd-cover-tag {
  display: inline-block; margin-left: 6px;
  padding: 1px 6px; background: var(--p5-red, #e63946); color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  vertical-align: middle;
}
.gd-image-card.is-cover { box-shadow: inset 0 0 0 2px var(--p5-red, #e63946); }
.gd-hover-btn.active { color: var(--p5-red, #e63946); }
.gd-hover-btn.active:hover { color: #fff; background: var(--p5-red, #e63946); }

/* ---------- Failed video row + retry button ---------- */
.gd-video-row.is-failed { background: rgba(244,67,54,0.06); }
.gd-video-row.is-failed .gd-video-bar-fill { background: #f44336; }
.gd-status-pill.failed { color: #f44336; background: rgba(244,67,54,0.12); }
.gd-btn-retry {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; margin-left: 8px;
  background: transparent; border: 1px solid var(--p5-red, #e63946);
  color: var(--p5-red, #e63946);
  font-size: 11px; font-weight: 600; letter-spacing: 1px;
  cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.gd-btn-retry:hover { background: var(--p5-red, #e63946); color: #fff; }

/* ---------- Share dialog (mirror dt-comic share visual spec) ---------- */
.gd-share-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.gd-share-dialog {
  background: #111;
  border: 1px solid #2a2a2a;
  width: 90%;
  max-width: 480px;
  color: #e0e0e0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .gd-share-dialog {
  background: #fff;
  border-color: var(--p5-border, #e2e2e8);
  color: #222;
}
.gd-share-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #222;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
[data-theme="light"] .gd-share-dialog-header {
  border-bottom-color: var(--p5-border, #e2e2e8);
  color: #1a1a1a;
}
.gd-share-dialog-close {
  background: none;
  border: none;
  color: #666;
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.gd-share-dialog-close:hover { color: #fff; }
[data-theme="light"] .gd-share-dialog-close:hover { color: #1a1a1a; }
.gd-share-dialog-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gd-share-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.gd-share-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--p5-red, #e63946);
  cursor: pointer;
}
.gd-share-toggle-label {
  font-size: 14px;
  color: #ddd;
}
[data-theme="light"] .gd-share-toggle-label { color: #333; }
.gd-share-url-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.gd-share-url-row input {
  flex: 1;
  min-width: 0;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  color: #ccc;
  padding: 8px 10px;
  font-size: 12px;
  font-family: monospace;
  user-select: all;
}
[data-theme="light"] .gd-share-url-row input {
  background: var(--p5-surface, #fafafa);
  border-color: var(--p5-border, #e2e2e8);
  color: #333;
}
.gd-share-url-row input:focus {
  outline: none;
  border-color: var(--p5-red, #e63946);
}
.gd-share-copy-btn {
  background: var(--p5-red, #e63946);
  color: #fff;
  border: none;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.gd-share-copy-btn:hover { background: #ff6b6b; }
.gd-share-socials {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.gd-share-socials-label {
  color: var(--p5-text-secondary, #888);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.gd-share-socials-btns {
  display: inline-flex;
  gap: 8px;
}
.gd-share-social-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--p5-text-secondary, #888);
  border: 1px solid var(--p5-border, #2a2a2a);
  cursor: pointer;
  transition: color .15s, border-color .15s;
  padding: 0;
}
.gd-share-social-btn:hover { color: var(--p5-red, #e63946); border-color: var(--p5-red, #e63946); }
.gd-share-hint {
  color: #888;
  font-size: 12px;
  line-height: 1.5;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .gd-form-grid { grid-template-columns: 1fr; }
  .gd-my-page { padding: 20px 16px; }
  .gd-panels-area { padding: 20px 16px; }
  .gd-step-rail { overflow-x: auto; }
  .gd-step-item span:last-child { display: none; }
  .gd-modal-box { min-width: auto; padding: 18px; }
}

/* ────────────────────────────────────────────────────────────────────
   Step 1 cold-start showcase — 3-thumbnail proof grid above the form.
   Mirrors .md-vsc-* visual treatment so Game Demo / Manga Drama feel
   like the same family. Click thumb → gdPlayVideoModal(url).
   ──────────────────────────────────────────────────────────────────── */
.gd-showcase { margin: 0 0 22px; padding: 0; }
.gd-showcase:empty { display: none; }   /* no pool → collapse, no empty header */

.gd-vsc-header {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0 14px;
}
.gd-vsc-line { flex: 1; height: 1px; background: var(--p5-border, #24242e); }
.gd-vsc-title {
  font-family: var(--font-display, inherit);
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--p5-text-secondary, #b5b5b5);
  text-transform: uppercase; font-weight: 600; white-space: nowrap;
}
.gd-vsc-change {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--p5-border, #24242e);
  color: var(--p5-text-secondary, #b5b5b5);
  font-family: var(--font-display, inherit);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.gd-vsc-change:hover { border-color: var(--p5-red, #e63946); color: var(--p5-red, #e63946); }
.gd-vsc-change svg { display: block; }

.gd-vsc-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 980px) { .gd-vsc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gd-vsc-row { grid-template-columns: 1fr; } }

.gd-vsc-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  padding: 0;
  background: var(--p5-input-bg, #1a1a22);
  border: 1px solid var(--p5-border, #24242e);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.gd-vsc-thumb:hover { border-color: var(--p5-red, #e63946); }
.gd-vsc-video {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
}
.gd-vsc-play {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  margin: auto;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  pointer-events: none;
  transition: background 0.15s, transform 0.15s;
}
.gd-vsc-thumb:hover .gd-vsc-play {
  background: var(--p5-red, #e63946);
  transform: scale(1.08);
}
.gd-vsc-play svg { width: 18px; height: 18px; display: block; }