* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: #0f0f0f;
    color: #e0e0e0;
    line-height: 1.6;
}

nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    background: #1a1a2e;
    border-bottom: 1px solid #333;
}
nav .logo { font-size: 1.5rem; font-weight: 700; color: #00d4ff; text-decoration: none; }
nav .subtitle { color: #888; font-size: 0.9rem; }

main { max-width: 900px; margin: 2rem auto; padding: 0 1rem; }
h2 { margin-bottom: 1rem; color: #fff; }
h3 { margin-bottom: 0.75rem; color: #fff; }

/* ── Progress bar ── */
.progress-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding: 1rem 0;
    border-bottom: 1px solid #222;
}
.progress-step {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    opacity: 0.3;
}
.progress-step.done { opacity: 0.6; }
.progress-step.done .step-num { background: #1a3c1a; color: #4dff4d; }
.progress-step.active { opacity: 1; }
.progress-step.active .step-num { background: #00d4ff; color: #000; }
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #333;
    color: #888;
    font-size: 0.8rem;
    font-weight: 700;
}
.step-label { font-size: 0.85rem; color: #ccc; }
.progress-step.clickable { cursor: pointer; }
.progress-step.clickable:hover { opacity: 0.9; }
.progress-step.clickable:hover .step-num { background: #00d4ff; color: #000; }
.step-link { display: flex; align-items: center; gap: 0.4rem; text-decoration: none; color: inherit; }

/* ── Step card ── */
.step-card {
    background: #1a1a2e;
    border-radius: 10px;
    padding: 2rem;
}
.step-card .hint { color: #888; margin-bottom: 1.5rem; font-size: 0.95rem; }

/* ── Forms ── */
label {
    display: block;
    font-weight: 600;
    color: #aaa;
    margin-bottom: 0.4rem;
    margin-top: 1rem;
    font-size: 0.9rem;
}
textarea {
    width: 100%;
    background: #0f0f0f;
    color: #e0e0e0;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 0.75rem;
    font-size: 0.95rem;
    resize: vertical;
    font-family: inherit;
}
textarea:focus { outline: none; border-color: #00d4ff; }

/* ── Buttons ── */
.actions { margin-top: 1.5rem; display: flex; gap: 0.75rem; align-items: center; }
.btn-primary, .btn-secondary, .btn-select, .btn-small {
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-block;
}
.btn-primary { background: #00d4ff; color: #000; }
.btn-primary:hover { background: #00b8e6; }
.btn-secondary { background: #333; color: #ccc; }
.btn-secondary:hover { background: #444; }
.btn-select { background: #1a3c1a; color: #4dff4d; width: 100%; margin-top: 0.5rem; }
.btn-select:hover { background: #2a5c2a; }
.btn-small { background: #333; color: #ccc; padding: 0.3rem 0.8rem; font-size: 0.85rem; }

/* ── Image grid ── */
.image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}
.image-option {
    background: #0f0f0f;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 0.5rem;
    text-align: center;
}
.image-option:hover { border-color: #00d4ff; }
.angle-label { display: block; font-size: 0.8rem; font-weight: 600; color: #00d4ff; text-transform: uppercase; margin-bottom: 0.4rem; }
.image-option img { width: 100%; border-radius: 6px; }

/* ── Media preview ── */
.step-card video, .step-card audio {
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
    margin: 1rem 0;
}
.done-card video { max-width: 360px; }

/* ── Loading ── */
.loading-card {
    text-align: center;
    padding: 4rem 2rem;
    background: #1a1a2e;
    border-radius: 10px;
}
.loading-card h3 { color: #00d4ff; margin-top: 1.5rem; }
.loading-card p { color: #aaa; margin-top: 0.75rem; font-size: 1rem; }
.timing { color: #666 !important; font-size: 0.85rem !important; margin-top: 1rem !important; font-style: italic; }
.brief-box { background: #0f0f0f; border-radius: 6px; padding: 1rem; margin-top: 1.5rem; text-align: left; max-width: 600px; margin-left: auto; margin-right: auto; }
.brief-box label { color: #666; font-size: 0.8rem; text-transform: uppercase; margin: 0; }
.brief-box p { color: #ccc; margin-top: 0.3rem; }
.label-hint { font-weight: 400; color: #666; font-size: 0.85rem; }
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #333;
    border-top-color: #00d4ff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Error ── */
.error-card {
    background: #2a1a1a;
    border: 1px solid #3c1a1a;
    border-radius: 10px;
    padding: 2rem;
}
.error-card h3 { color: #ff6b6b; }
.error-detail {
    margin-top: 1rem;
    padding: 1rem;
    background: #1a1010;
    border-radius: 6px;
    color: #ccc;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.error-info { flex: 1; }
.error-msg { color: #ff9b9b; margin-top: 0.3rem; font-size: 0.9rem; word-break: break-word; }
.error-hint { color: #ffcc00; margin-top: 0.5rem; font-size: 0.85rem; }
.error-hint a { color: #00d4ff; }

/* ── Caption box ── */
.caption-box { margin-top: 1.5rem; }
.caption-box pre {
    background: #0f0f0f;
    padding: 1rem;
    border-radius: 6px;
    white-space: pre-wrap;
    color: #bbb;
    font-size: 0.9rem;
}

/* ── Create job (index) ── */
.create-job {
    background: #1a1a2e;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}
.create-job textarea { margin-bottom: 1rem; }
.create-job button { background: #00d4ff; color: #000; border: none; padding: 0.6rem 1.5rem; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 1rem; }
.create-job button:hover { background: #00b8e6; }

/* ── Job list (index) ── */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.6rem 1rem; text-align: left; border-bottom: 1px solid #222; }
th { color: #888; font-size: 0.85rem; text-transform: uppercase; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: #1a1a2e; }

.status {
    display: inline-block; padding: 0.2rem 0.6rem; border-radius: 4px;
    font-size: 0.8rem; font-weight: 600; text-transform: uppercase;
}
.status-pending { background: #444; color: #aaa; }
.status-running { background: #1a3a5c; color: #4da6ff; }
.status-completed { background: #1a3c1a; color: #4dff4d; }
.status-failed { background: #3c1a1a; color: #ff4d4d; }

.empty { color: #666; text-align: center; padding: 2rem; }