/* SalesVidGen — Premium v3 shell: home grid, six-step bar, live progress, footer.
   Uses the app theme tokens only, so every theme (aurora, sunset, ivory…) carries over. */

.pv-page { max-width: 1040px; margin: 0 auto; min-width: 0; overflow-x: clip; font-variant-numeric: lining-nums; }
.pv-steps-nav { max-width: 100%; overflow: hidden; }
.pv-muted { color: var(--text-tertiary); font-size: 0.9rem; }
.pv-empty { color: var(--text-secondary); padding: 2rem 0; }
.pv-empty p { margin-bottom: 1rem; }

/* ---------- Home ---------- */
.pv-home-head { display: grid; gap: 0.9rem; justify-items: start; padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--border-color); }
.pv-home-title { font-family: var(--font-display); font-size: clamp(2rem, 6vw, 2.75rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.pv-home-intro { max-width: 58ch; color: var(--text-secondary); font-size: 1rem; line-height: 1.6; }
.pv-home-new { font-size: 1rem; padding: 0.9rem 1.6rem; margin-top: 0.4rem; text-decoration: none; }
.pv-home-sub { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; margin-bottom: 1.1rem; }
.pv-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.pv-card { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; border-radius: var(--radius); }
.pv-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.pv-card-pic { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border-color); background: var(--gradient-accent-subtle); }
.pv-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.pv-card:hover .pv-card-img { transform: scale(1.03); }
.pv-card:hover .pv-card-pic { border-color: var(--accent); }
.pv-card-blank { font-family: var(--font-display); font-size: 4.5rem; line-height: 1; color: var(--accent); opacity: 0.55; }
.pv-card-text { display: grid; gap: 0.3rem; padding: 0.8rem 0.15rem 0; min-width: 0; }
.pv-card-chip { justify-self: start; font-size: 0.78rem; font-weight: 600; color: var(--text-primary); background: var(--accent-subtle); border: 1px solid var(--border-strong); border-radius: 8px; padding: 0.2rem 0.65rem; }
.pv-card.is-film .pv-card-chip { color: var(--success); background: var(--success-bg); border-color: transparent; }
.pv-card-title { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.3; color: var(--text-primary); overflow-wrap: anywhere; }
.pv-card-who { font-size: 0.85rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.pv-card-date { font-size: 0.8rem; color: var(--text-tertiary); font-variant-numeric: lining-nums tabular-nums; }
.pv-home-older { margin-top: 2.5rem; }
.pv-older summary { cursor: pointer; color: var(--text-secondary); font-weight: 600; padding: 0.5rem 0; }
.pv-older summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pv-older-note { margin: 0.2rem 0 0.4rem; max-width: 58ch; }
.pv-older-list { list-style: none; padding: 0; margin: 0; display: grid; }
.pv-older-row { display: grid; gap: 0.6rem; padding: 0.85rem 0; border-bottom: 1px solid var(--border-color); }
.pv-older-info { display: grid; gap: 0.15rem; min-width: 0; }
.pv-older-name { font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.pv-older-meta { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; font-size: 0.85rem; color: var(--text-secondary); font-variant-numeric: lining-nums tabular-nums; }
.pv-older-state { font-size: 0.85rem; color: var(--text-tertiary); }
.pv-older-state.is-ready { color: var(--success); font-weight: 600; }
.pv-older-video { width: 100%; max-width: 240px; aspect-ratio: 9 / 16; max-height: 60vh; background: #000; border-radius: var(--radius-sm); }
.pv-older-dl { justify-self: start; font-size: 0.86rem; font-weight: 600; color: var(--accent); }
.pv-older-dl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 721px) { .pv-older-row:has(.pv-older-video) { grid-template-columns: 1fr 200px; align-items: start; } .pv-older-dl { grid-column: 2; } }

/* ---------- Video screen: header + six-step bar ---------- */
.pv-crumb { display: inline-block; font-size: 0.85rem; color: var(--text-secondary); text-decoration: none; margin-bottom: 0.9rem; }
.pv-crumb:hover { color: var(--text-primary); }
.pv-crumb::before { content: '‹ '; }
.pv-head { margin-bottom: 1.4rem; }
.pv-head-title { font-family: var(--font-display); font-size: clamp(1.5rem, 4.5vw, 2rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; overflow-wrap: anywhere; }
.pv-head-meta { color: var(--text-secondary); font-size: 0.9rem; margin-top: 0.35rem; }

.pv-stepper { position: relative; list-style: none; margin: 0 0 1.5rem; padding: 0 0 0.4rem; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.4rem; }
.pv-chip { position: relative; min-width: 0; }
.pv-chip + .pv-chip::before { content: ''; position: absolute; top: 1.45rem; right: calc(100% - 0.1rem); width: 0.3rem; height: 1px; background: var(--border-strong); }
.pv-chip-btn { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; padding: 0.7rem 0.75rem 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s var(--ease), background 0.2s var(--ease); }
button.pv-chip-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.pv-chip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pv-chip-num { font-family: var(--font-display); font-size: 1.55rem; line-height: 1; color: var(--text-tertiary); }
.pv-chip-name { font-size: 0.95rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pv-chip.is-done .pv-chip-num { color: var(--success); }
.pv-chip.is-done .pv-chip-name { color: var(--text-primary); }
.pv-chip.is-open .pv-chip-num { color: var(--accent); }
.pv-chip.is-current .pv-chip-btn { background: var(--accent-subtle); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--text-primary); cursor: default; }
.pv-chip.is-current .pv-chip-num { color: var(--accent); }
.pv-chip.is-later .pv-chip-btn { opacity: 0.45; cursor: not-allowed; border-style: dashed; }

/* ---------- Live progress ---------- */
.pv-auto-panel { margin-bottom: 1rem; }
.pv-lost { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; padding: 0.75rem 1rem; margin-bottom: 1rem; border-radius: var(--radius-sm); background: var(--warning-bg); color: var(--warning); font-size: 0.9rem; }
.pv-prog { padding: 0.95rem 1.1rem; margin-bottom: 1.6rem; border-left: 3px solid var(--border-strong); background: var(--bg-surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.pv-prog.is-running { border-left-color: var(--accent); }
.pv-prog.is-failed { border-left-color: var(--error); background: var(--error-bg); }
.pv-prog-head { display: flex; align-items: center; gap: 0.6rem; }
.pv-prog-now { font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.pv-pulse { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: pvPulse 1.6s ease-out infinite; }
@keyframes pvPulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 100% { box-shadow: 0 0 0 9px transparent; } }
.pv-prog-time { margin-top: 0.3rem; font-size: 0.86rem; color: var(--text-secondary); font-variant-numeric: lining-nums tabular-nums; }
.pv-prog-count { margin-top: 0.75rem; font-size: 0.8rem; font-weight: 600; color: var(--text-tertiary); font-variant-numeric: lining-nums tabular-nums; }
.pv-items { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pv-item { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.6rem; border: 1px solid var(--border-color); border-radius: 999px; font-size: 0.78rem; color: var(--text-secondary); max-width: 100%; }
.pv-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-item-state { font-weight: 700; color: var(--text-tertiary); }
.pv-item.is-working, .pv-item.is-checking, .pv-item.is-redrawing { border-color: var(--accent); color: var(--text-primary); }
.pv-item.is-working .pv-item-state { color: var(--accent); }
.pv-item.is-checking .pv-item-state, .pv-item.is-redrawing .pv-item-state { color: var(--warning); }
.pv-item.is-done .pv-item-state { color: var(--success); }
.pv-item.is-failed { border-color: var(--error); }
.pv-item.is-failed .pv-item-state { color: var(--error); }
.pv-prog-fail { color: var(--error); font-weight: 600; line-height: 1.45; }
.pv-prog-actions { margin-top: 0.7rem; }
.pv-prog-idle { color: var(--text-secondary); line-height: 1.5; }
.pv-prog-last { margin-top: 0.25rem; font-size: 0.82rem; color: var(--text-tertiary); }

/* ---------- Step body + footer ---------- */
.pv-step-title { font-family: var(--font-display); font-size: clamp(1.45rem, 4vw, 1.85rem); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 1.1rem; }
.pv-body { min-height: 8rem; padding-bottom: 1.5rem; }
.pv-foot { position: sticky; bottom: 0; z-index: 5; padding: 0.85rem 0 calc(0.85rem + env(safe-area-inset-bottom, 0px)); background: var(--bg-base); border-top: 1px solid var(--border-color); }
.pv-foot-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.pv-foot-row .pv-next { margin-left: auto; }
.pv-auto-btn:empty { display: none; }
.pv-next-why { margin-top: 0.45rem; text-align: right; font-size: 0.82rem; color: var(--text-tertiary); }
.pv-foot-msg { margin-top: 0.5rem; text-align: right; font-size: 0.86rem; color: var(--error); }
.pv-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; padding: 2px; }
.pv-seg-btn { border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 0.85rem; font-weight: 600; padding: 0.4rem 0.95rem; border-radius: 999px; cursor: pointer; }
.pv-seg-btn.is-on { background: var(--accent-subtle); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--accent); }
.pv-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Phone ---------- */
@media (max-width: 720px) {
  .pv-stepper { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; gap: 0.4rem; max-width: 100%; }
  .pv-stepper::-webkit-scrollbar { display: none; }
  .pv-chip { flex: 0 0 auto; scroll-snap-align: center; }
  .pv-chip + .pv-chip::before { display: none; }
  .pv-chip-btn { flex-direction: row; align-items: center; gap: 0.45rem; padding: 0.55rem 0.8rem; }
  .pv-chip-num { font-size: 1.3rem; }
  .pv-foot-row .pv-next { order: -1; width: 100%; justify-content: center; margin-left: 0; padding: 0.8rem; }
  .pv-next-why, .pv-foot-msg { text-align: left; }
  .pv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.75rem; }
  .pv-home-new { width: 100%; justify-content: center; }
}
@media (max-width: 360px) { .pv-cards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .pv-pulse { animation: none; }
  .pv-card-img, .pv-chip-btn { transition: none; }
  .pv-card:hover .pv-card-img { transform: none; }
}

/* Switched-off boxes and dropdowns look switched off on every step (they looked live before). */
.pv-body :is(input, textarea, select):disabled { opacity: .55; cursor: not-allowed; border-style: dashed; }