:root{
  --ground:#E8EEF1; --panel:#FBFDFD; --panel-2:#F0F5F7; --ink:#182830; --muted:#5E7078;
  --line:#C9D6DC; --accent:#0E7C86; --accent-ink:#fff;
  --ok:#0E7C86; --warn:#B4681B; --err:#A3342B; --busy:#3C6E9F;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#10181C; --panel:#162026; --panel-2:#1C282F; --ink:#E6EEF1; --muted:#93A7B0;
    --line:#2A3A43; --accent:#22A5B0; --accent-ink:#08161A;
    --ok:#22A5B0; --warn:#D9913F; --err:#E0776B; --busy:#6FA6D6;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;font-size:15px;line-height:1.5}
header{display:flex;align-items:center;gap:14px;padding:14px 22px;
  background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand b{font-size:17px;letter-spacing:-.01em}
.brand .meta{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--muted);
  margin-left:10px;text-transform:uppercase;letter-spacing:.08em}
main{max-width:960px;margin:0 auto;padding:22px 18px 60px;display:flex;flex-direction:column;gap:18px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}
.panel h2{margin:0 0 12px;font-size:14px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);font-weight:600}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
input[type=text],input:not([type]){flex:1;min-width:220px;padding:9px 12px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:inherit}
button{padding:9px 15px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);
  color:var(--ink);font:inherit;font-weight:500;cursor:pointer}
button:hover{border-color:var(--accent)}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
button.primary:disabled{opacity:.45;cursor:not-allowed}
button:disabled{opacity:.45;cursor:not-allowed}
button.danger{color:var(--err);border-color:var(--line)}
.hint{color:var(--muted);font-size:13.5px;margin:10px 0 0}
code{font-family:'IBM Plex Mono',monospace;font-size:12.5px;background:var(--panel-2);
  padding:1px 5px;border-radius:4px;border:1px solid var(--line)}
.list{display:flex;flex-direction:column;gap:8px}
.card{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);
  text-decoration:none;color:inherit}
.card:hover{border-color:var(--accent)}
.card-name{font-weight:600}
.card-sub{color:var(--muted);font-size:12.5px;font-family:'IBM Plex Mono',monospace}
.badge{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;
  border:1px solid currentColor;white-space:nowrap}
.s-idle{color:var(--muted)} .s-ok{color:var(--ok)} .s-warn{color:var(--warn)}
.s-err{color:var(--err)} .s-busy{color:var(--busy)}
.drop{border:1.5px dashed var(--line);border-radius:10px;padding:26px;text-align:center;
  color:var(--muted);background:var(--panel-2);cursor:pointer}
.drop.over{border-color:var(--accent);color:var(--ink)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--line)}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
td input{width:76px;padding:5px 8px;border-radius:6px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--ink);font:inherit;font-family:'IBM Plex Mono',monospace}
tr.del{opacity:.4;text-decoration:line-through}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.grid2{grid-template-columns:1fr}}
.shot{width:100%;border:1px solid var(--line);border-radius:8px;background:#fff}
pre.log{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:12px;
  font-family:'IBM Plex Mono',monospace;font-size:12px;max-height:260px;overflow:auto;margin:0;
  white-space:pre-wrap;color:var(--muted)}
.steps{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.step{font-size:12px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);
  color:var(--muted);font-weight:500}
.step.on{border-color:var(--accent);color:var(--accent)}
.step.done{border-color:var(--ok);color:var(--ok)}
.warnbox{border:1px solid var(--warn);color:var(--warn);border-radius:8px;padding:10px 12px;
  font-size:13.5px;margin-top:10px}
.errbox{border:1px solid var(--err);color:var(--err);border-radius:8px;padding:10px 12px;
  font-size:13.5px;margin-top:10px}
a.back{color:var(--muted);text-decoration:none;font-size:13px}
a.back:hover{color:var(--accent)}