:root {
  --bg: #faf9f7; --fg: #1a1a1a; --muted: #6b6b6b; --line: #e2e0dc;
  --accent: #2f6f4f; --warn: #8a5a00; --bad: #a33; --card: #fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --bg:#161615; --fg:#eceae6; --muted:#9a9793; --line:#302e2c;
    --accent:#7fbf9a; --warn:#d9a441; --bad:#e08585; --card:#1e1e1c;
  }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
header { display:flex; justify-content:space-between; align-items:center;
  gap:1rem; padding:1rem 1.25rem; border-bottom:1px solid var(--line); flex-wrap:wrap; }
h1 { font-size:1.1rem; margin:0; letter-spacing:-0.01em; }
.key { display:flex; gap:.4rem; align-items:center; }
input, select, textarea, button { font:inherit; color:inherit; }
input, select, textarea { background:var(--card); border:1px solid var(--line);
  border-radius:6px; padding:.45rem .6rem; width:100%; }
button { background:var(--accent); color:#fff; border:0; border-radius:6px;
  padding:.5rem .9rem; cursor:pointer; }
button:disabled { opacity:.5; cursor:not-allowed; }
nav { display:flex; gap:.25rem; padding:.75rem 1.25rem 0; flex-wrap:wrap; }
nav button { background:transparent; color:var(--muted); border-bottom:2px solid transparent;
  border-radius:0; padding:.5rem .75rem; }
nav button[aria-selected=true] { color:var(--fg); border-bottom-color:var(--accent); }
main { display:grid; grid-template-columns:minmax(320px,1fr) minmax(320px,1fr);
  gap:1.25rem; padding:1.25rem; align-items:start; }
@media (max-width:820px) { main { grid-template-columns:1fr; } }
section { background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:1rem; }
h2 { font-size:.9rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin:.1rem 0 .75rem; }
label { display:block; margin-bottom:.75rem; font-size:.85rem; color:var(--muted); }
label input, label select, label textarea { margin-top:.25rem; color:var(--fg); }
.row { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
@media (max-width:520px) { .row { grid-template-columns:1fr; } }
.muted { color:var(--muted); font-size:.82rem; }
.notice { background:color-mix(in srgb, var(--warn) 12%, transparent);
  border:1px solid var(--warn); color:var(--warn);
  padding:.6rem .8rem; border-radius:8px; margin-bottom:.9rem; font-size:.88rem; }
ol#joblist { list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.job { border:1px solid var(--line); border-radius:8px; padding:.7rem .8rem; }
.job header { padding:0; border:0; margin-bottom:.35rem; }
.status { font-size:.75rem; text-transform:uppercase; letter-spacing:.05em;
  padding:.1rem .45rem; border-radius:99px; border:1px solid var(--line); }
.status.COMPLETED { color:var(--accent); border-color:var(--accent); }
.status.FAILED, .status.CANCELLED { color:var(--bad); border-color:var(--bad); }
.qc-fail { color:var(--warn); }
video, img.result { width:100%; border-radius:6px; margin-top:.5rem; }