/* Source-first job cards and progress, shared by the real app and local preview. */
#app .submission-note { margin: 2px 0 0; color: var(--muted); font-size: .73rem; line-height: 1.5; }
#app .job-source { display: flex; align-items: center; gap: 16px; padding: 14px; background: rgba(255, 255, 255, .55); border: 1px solid var(--line); border-radius: 15px; }
#app .video-thumb { position: relative; isolation: isolate; flex: 0 0 112px; width: 112px; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(circle at 68% 28%, #f6a578, #b64d24 58%, #4b2a22); border: 1px solid rgba(108, 54, 29, .18); border-radius: 11px; box-shadow: 0 8px 18px rgba(84, 41, 23, .12); }
#app .job-source .video-thumb { flex-basis: 152px; width: 152px; }
#app .video-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
#app .video-thumb img[hidden], #app .video-thumb .video-thumb-placeholder[hidden] { display: none; }
#app .video-thumb-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: #fff4e8; font-size: 1.25rem; text-shadow: 0 2px 10px #3c211a; }
#app .job-source-copy { display: grid; min-width: 0; gap: 4px; }
#app .job-source-copy > span { color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
#app .job-source-copy strong { color: var(--ink); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
#app .job-source-copy a { width: fit-content; color: var(--accent); font-size: .72rem; font-weight: 700; }
#app .job-source-copy a[hidden] { display: none; }
#app .video-history-item { grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: 16px; }
#app .history-main { display: grid; min-width: 0; gap: 8px; }
#app .video-history-item .history-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
#app .video-history-item .history-meta span:last-child { text-align: left; }
#app .video-history-item .history-source-link { width: fit-content; color: var(--accent); font-size: .78rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
#app .video-history-item .history-item-heading { min-width: 0; }
#app .video-history-item .history-item-heading strong { color: var(--ink); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
#app .result-card.is-processing { position: relative; isolation: isolate; overflow: hidden; }
#app .result-card.is-processing::before { position: absolute; z-index: -1; top: -155px; right: -110px; width: 350px; height: 350px; background: radial-gradient(circle, rgba(240, 126, 69, .16), transparent 68%); content: ""; animation: job-ambient 8s ease-in-out infinite alternate; pointer-events: none; }
#app .result-card.is-processing .job-progress-step.is-active .job-progress-dot { position: relative; background: #fff3e9; border-color: var(--accent-bright); box-shadow: 0 0 0 6px rgba(235, 108, 48, .12); }
#app .result-card.is-processing .job-progress-step.is-active .job-progress-dot::after { position: absolute; inset: -8px; border: 2px solid rgba(235, 108, 48, .65); border-radius: 50%; content: ""; animation: job-orbit 2.2s ease-out infinite; }
#app .result-card.is-processing .job-progress-step.is-active .job-progress-label strong { color: var(--accent-dark); }
#app .result-card.is-processing .job-progress-step.is-active .job-progress-label small::after { content: "…"; animation: job-blink 1.3s step-end infinite; }
#app .result-card.is-processing .video-thumb::after { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 28%, rgba(255, 255, 255, .19) 49%, transparent 70%); content: ""; transform: translateX(-120%); animation: job-scan 5s ease-in-out infinite; pointer-events: none; }
:root[data-theme="dark"] #app .job-source { background: rgba(35, 23, 18, .64); border-color: #654738; }
:root[data-theme="dark"] #app .result-card.is-processing .job-progress-step.is-active .job-progress-dot { background: #3d261b; }
:root[data-theme="dark"] #app .result-card.is-processing .job-progress-step.is-active .job-progress-label strong { color: #ffb083; }
@keyframes job-orbit { 0% { opacity: .8; transform: scale(.72); } 70%, 100% { opacity: 0; transform: scale(1.45); } }
@keyframes job-scan { 0%, 36% { transform: translateX(-120%); } 61%, 100% { transform: translateX(120%); } }
@keyframes job-ambient { from { opacity: .55; transform: translate(-15px, 15px); } to { opacity: 1; transform: translate(18px, -12px); } }
@keyframes job-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .3; } }
@media (max-width: 600px) {
  #app .video-history-item { grid-template-columns: 86px minmax(0, 1fr); gap: 11px; }
  #app .video-history-item .video-thumb { width: 86px; flex-basis: 86px; }
  #app .video-history-item .history-item-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  #app .video-history-item .history-item-heading strong { white-space: normal; }
  #app .job-source .video-thumb { width: 100px; flex-basis: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  #app .result-card.is-processing::before,
  #app .result-card.is-processing .job-progress-step.is-active .job-progress-dot::after,
  #app .result-card.is-processing .job-progress-step.is-active .job-progress-label small::after,
  #app .result-card.is-processing .video-thumb::after { animation: none; }
}