:root { --bg:#0f1115; --card:#181b22; --ink:#e6e8ee; --muted:#9aa3b2; --line:#262b36;
  --accent:#3b82f6; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
.topbar { display:flex; align-items:center; justify-content:space-between;
  padding:.7rem 1.2rem; background:var(--card); border-bottom:1px solid var(--line); }
.brand { color:var(--ink); text-decoration:none; font-weight:700; }
.topbar nav { display:flex; gap:1rem; align-items:center; }
.who { color:var(--muted); }
.container { max-width:880px; margin:1.5rem auto; padding:0 1rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:1.2rem 1.4rem; margin-bottom:1.2rem; }
.card.narrow { max-width:380px; margin:3rem auto; }
h1 { margin-top:0; font-size:1.4rem; } h2 { font-size:1.1rem; }
label { display:block; margin:.6rem 0; }
/* Style inputs BY EXCLUSION, not by enumerating names. The old rule listed
   input[name=username], input[name=password] and a few types, so any field
   with a different name silently fell back to the browser default — white on
   a dark page. On the trainer signup form that left `username` themed and
   `email`/`temp_password` white, which made the themed one look DISABLED next
   to its neighbours (reported 2026-08-23). A hand-maintained selector list
   drifts the moment someone adds a field; this cannot. */
input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
textarea, select {
  display:block; width:100%; margin-top:.2rem; padding:.5rem .6rem; background:#0d0f14;
  border:1px solid var(--line); border-radius:6px; color:var(--ink); }
/* Placeholders must read as a prompt, not as disabled text. */
input::placeholder, textarea::placeholder { color:var(--muted); opacity:1; }
button,.button { display:inline-block; background:var(--accent); color:#fff; border:0;
  border-radius:6px; padding:.5rem .9rem; cursor:pointer; text-decoration:none; font:inherit; }
button.link { background:none; color:var(--accent); padding:0; }
form.inline { display:inline; }
.upload { display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; }
.steps { list-style:none; padding:0; margin:0; display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; }
.steps .step { display:flex; align-items:center; gap:.5rem; }
.steps .num { display:inline-flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem;
  border-radius:999px; background:var(--line); color:var(--ink); font-size:.8rem; font-weight:700; flex:0 0 auto; }
.steps .step.done .num { background:var(--ok); color:#06240f; }
.file-label { cursor:pointer; }
.file-name { max-width:18rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
button:disabled, .button:disabled { opacity:.45; cursor:not-allowed; }
.muted { color:var(--muted); } .error { color:var(--err); } .ok { color:var(--ok); }
.error-box,.result { background:#0d0f14; border:1px solid var(--line); border-radius:6px;
  padding:.8rem; overflow:auto; white-space:pre-wrap; }
.report { overflow-x:auto; }
.report h1 { font-size:1.3rem; } .report h2 { font-size:1.05rem; margin-top:1.4rem; }
.report table { width:100%; border-collapse:collapse; margin:.4rem 0 1rem; }
.report th,.report td { text-align:left; padding:.4rem .6rem; border-bottom:1px solid var(--line);
  white-space:nowrap; }
.report blockquote { margin:.8rem 0; padding:.4rem .9rem; border-left:3px solid var(--line);
  color:var(--muted); }
details.card summary { cursor:pointer; color:var(--muted); font-size:.85rem; }
table.jobs { width:100%; border-collapse:collapse; }
table.jobs th,table.jobs td { text-align:left; padding:.5rem .4rem; border-bottom:1px solid var(--line); }
td.file { word-break:break-all; }
dl.meta { display:grid; grid-template-columns:auto 1fr; gap:.2rem .8rem; }
dl.meta dt { color:var(--muted); }
.badge { padding:.1rem .5rem; border-radius:999px; font-size:.8rem; font-weight:600; }
.badge-queued { background:#33404f; color:#cbd5e1; }
.badge-processing { background:#3a2f12; color:var(--warn); }
.badge-done { background:#12331f; color:var(--ok); }
.badge-failed { background:#3a1518; color:var(--err); }
.badge-downloading { background:#1d2c3a; color:#7dd3fc; }
.veo-form { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin:.4rem 0; }
.veo-form input[type=url] { flex:1 1 16rem; width:auto; }
.veo-form label { display:flex; align-items:center; gap:.3rem; margin:0; }
.veo-form input[type=text], .veo-form input[type=number] { width:auto; display:inline-block; }
.or { margin-top:1.4rem; font-size:1rem; color:var(--muted); }
.small { font-size:.8rem; }
.badge-ok { background:#12331f; color:var(--ok); }
.badge-warn { background:#3a2f12; color:var(--warn); }
.badge-fail { background:#3a1518; color:var(--err); }
table.checks td:first-child { font-weight:600; }
.statusbar { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  margin-bottom:1rem; font-size:.85rem; }
.statusbar .build { margin-left:auto; font-family:monospace; font-size:.75rem; }
.buildbar { text-align:center; padding:1rem .4rem 1.4rem; }
.buildbar .build { color:var(--muted); font-size:.75rem; font-family:monospace; }

/* The overlay player. Without a max-width the <video> renders at the file's
   intrinsic size — 2048 px for a dual-camera composite — and pushes the page
   sideways, which is what it did while it was embedded in the results card.
   It now lives on its own page (overlay_view.html); this keeps it contained
   there, and contains it anywhere else it is ever embedded. */
.overlay-video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  background: #000;
}