:root {
  --bg: #0f1115;
  --panel: #171a21;
  --border: #2a2e38;
  --text: #e6e8ec;
  --muted: #8b909c;
  --accent: #5b8cff;
  --good: #3ecf8e;
  --bad: #ff6b6b;
  --warn: #ffb454;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  padding: 32px 24px 80px;
}

.wrap {
  max-width: 980px;
  margin: 0 auto;
}

h1 { font-size: 22px; margin-bottom: 4px; }
.subtitle { color: var(--muted); margin-bottom: 28px; font-size: 14px; }

.step {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 18px;
}

.step.hidden { display: none; }

.step h2 {
  font-size: 15px;
  margin: 0 0 14px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

label { display: block; font-size: 13px; margin: 12px 0 6px; color: var(--muted); }

input[type=text], input[type=number], input[type=email], select {
  width: 100%;
  background: #0d0f13;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 14px;
}

input[type=file] { font-size: 14px; }

button {
  background: var(--accent);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  margin-top: 14px;
}

button.secondary { background: #2a2e38; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > div { flex: 1; min-width: 200px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
th { color: var(--muted); font-weight: 500; }

.status-queued { color: var(--muted); }
.status-running { color: var(--warn); }
.status-done { color: var(--good); }
.status-error { color: var(--bad); }

.hint { color: var(--muted); font-size: 12px; margin-top: 4px; }
.error-banner { color: var(--bad); font-size: 13px; margin-top: 10px; }

details { margin-top: 10px; }
summary { cursor: pointer; color: var(--muted); font-size: 13px; }

.table-scroll { overflow-x: auto; }

.live-view { display: flex; gap: 18px; margin-top: 12px; flex-wrap: wrap; }
.live-view img { max-width: 480px; width: 100%; border: 1px solid var(--border); border-radius: 8px; background: #000; }
.live-view .table-scroll { flex: 1; min-width: 280px; max-height: 400px; overflow-y: auto; }