:root { --bg:#f6f7f9; --card:#fff; --ink:#1b1f24; --muted:#5f6b7a; --line:#e2e6ea; --accent:#3b5bdb;
  --ok:#2b8a3e; --bad:#c92a2a; --warn:#e67700; --mono:ui-monospace,SFMono-Regular,Menlo,monospace; }
@media (prefers-color-scheme: dark) { :root { --bg:#111418; --card:#1a1f25; --ink:#e7ebef; --muted:#9aa5b1;
  --line:#2b323a; --accent:#748ffc; --ok:#51cf66; --bad:#ff6b6b; --warn:#ffa94d; } }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--ink); }
header { background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
header .in { max-width:1100px; margin:auto; padding:10px 16px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
header b { margin-right:12px; }
nav a { color:var(--muted); text-decoration:none; padding:6px 10px; border-radius:6px; }
nav a.on, nav a:hover { color:var(--ink); background:var(--bg); }
header form { margin-left:auto; }
main { max-width:1100px; margin:auto; padding:20px 16px 60px; }
h1 { font-size:22px; margin:4px 0 16px; } h2 { font-size:17px; margin:0 0 10px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:16px; }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.muted { color:var(--muted); } .small { font-size:13px; }
.ok { color:var(--ok); } .bad { color:var(--bad); } .warn { color:var(--warn); }
.pill { display:inline-block; padding:1px 8px; border-radius:99px; font-size:12px; border:1px solid currentColor; }
button, .btn { font:inherit; border:1px solid var(--line); background:var(--card); color:var(--ink); padding:7px 14px;
  border-radius:7px; cursor:pointer; text-decoration:none; display:inline-block; }
button.primary, .btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.danger { color:var(--bad); }
button:disabled { opacity:.5; cursor:default; }
input, select, textarea { font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line);
  border-radius:6px; padding:7px 9px; width:100%; }
label { display:block; font-size:13px; color:var(--muted); margin:8px 0 3px; }
.row { display:flex; gap:10px; align-items:end; flex-wrap:wrap; } .row > * { flex:1; min-width:140px; }
.row > button, .row > .btn, .row > .fit { flex:0 0 auto; min-width:0; }
table { width:100%; border-collapse:collapse; } td, th { text-align:left; padding:7px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:13px; color:var(--muted); font-weight:600; }
pre.log { background:#0d1117; color:#d1d7e0; font:13px/1.45 var(--mono); padding:12px; border-radius:8px;
  height:60vh; overflow:auto; white-space:pre-wrap; margin:0; }
.fields { display:grid; gap:0 12px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.err { background:color-mix(in srgb,var(--bad) 12%,transparent); border:1px solid var(--bad); padding:8px 12px; border-radius:7px; }
.center { max-width:420px; margin:8vh auto; }
.shots img { width:100%; border:1px solid var(--line); border-radius:6px; }
#screen { width:100%; max-width:1000px; border:1px solid var(--line); border-radius:8px; cursor:pointer; background:#000; display:block; }
.kv td:first-child { color:var(--muted); width:40%; }