:root{
  --bg:#0f1216; --panel:#151a21; --panel-2:#1b222b; --panel-3:#202834;
  --text:#e6e9ee; --muted:#9aa4b2; --faint:#6b7686;
  --border:#252d38; --border-2:#2f3947;
  --accent:#4bb6c9; --accent-2:#6ea8fe;
  --code-bg:#11161d; --code-text:#cdd6e0; --code-border:#232b36;
  --err:#ff6b78; --err-bg:rgba(255,107,120,.14); --err-border:rgba(255,107,120,.35);
  --ok:#5fd39a; --ok-bg:rgba(95,211,154,.12); --ok-border:rgba(95,211,154,.32);
  --warn:#f0a35e; --warn-bg:rgba(240,163,94,.12); --warn-border:rgba(240,163,94,.32);
  --chip-bg:#1a2733; --chip-text:#7fc9d8; --chip-border:#25414d;
  --shadow:0 8px 30px rgba(0,0,0,.40);
  --sel:rgba(75,182,201,.28);
}
html.light{
  --bg:#f6f8fb; --panel:#ffffff; --panel-2:#f1f4f8; --panel-3:#e7ecf2;
  --text:#1b2531; --muted:#5b6673; --faint:#8a95a3;
  --border:#e1e6ed; --border-2:#d3dae3;
  --accent:#0e7c91; --accent-2:#2f6fd6;
  --code-bg:#f3f5f9; --code-text:#2b3644; --code-border:#e2e7ee;
  --err:#c8323f; --err-bg:rgba(200,50,63,.10); --err-border:rgba(200,50,63,.30);
  --ok:#1f9d63; --ok-bg:rgba(31,157,99,.10); --ok-border:rgba(31,157,99,.30);
  --warn:#c9711f; --warn-bg:rgba(201,113,31,.10); --warn-border:rgba(201,113,31,.30);
  --chip-bg:#eaf4f7; --chip-text:#0c6274; --chip-border:#cfe6ec;
  --shadow:0 8px 26px rgba(20,35,60,.12);
  --sel:rgba(14,124,145,.20);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased; font-size:15px;
}
::selection{background:var(--sel);}
a{color:var(--accent-2); text-decoration:none;}
a:hover{text-decoration:underline;}
code,kbd{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:50; height:56px;
  display:flex; align-items:center; gap:14px; padding:0 20px;
  background:color-mix(in srgb, var(--panel) 92%, transparent);
  border-bottom:1px solid var(--border); backdrop-filter:saturate(1.2) blur(8px);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px; white-space:nowrap;}
.brand .dot{width:11px;height:11px;border-radius:3px;background:var(--accent);box-shadow:0 0 12px var(--accent);}
.brand small{color:var(--muted); font-weight:500; font-size:12px;}
.spacer{flex:1;}
.tbtn{
  height:34px; min-width:34px; padding:0 12px; border-radius:9px; cursor:pointer;
  border:1px solid var(--border-2); background:var(--panel-2); color:var(--text); font-size:13px;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
}
.tbtn:hover{border-color:var(--accent); color:var(--accent);}
.icon-btn{padding:0; width:34px; justify-content:center; font-size:15px;}

/* ---------- layout ---------- */
.wrap{max-width:1120px; margin:0 auto; padding:26px 24px 90px;}
.grid{display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:22px; align-items:start;}
/* min-width:0 everywhere a grid/flex child could otherwise be sized by its min-content --
   without it the raw-JSON block widens its whole column. */
.grid > *{min-width:0;}
@media (max-width:900px){ .grid{grid-template-columns:minmax(0,1fr);} }

.card{
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:20px; box-shadow:var(--shadow);
}
.card + .card{margin-top:18px;}
.card h2{font-size:15px; margin:0 0 4px; letter-spacing:.2px;}
.card .hint{color:var(--faint); font-size:12.5px; margin:0 0 16px;}

/* ---------- form ---------- */
.field{margin-bottom:15px;}
.field > label{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); margin-bottom:6px;}
.field .sub{font-size:12px; color:var(--faint); margin-top:5px;}
input[type=text], select, textarea{
  width:100%; border-radius:9px; border:1px solid var(--border-2);
  background:var(--panel-2); color:var(--text); font-size:14px; outline:none;
  padding:0 11px; height:38px; font-family:inherit;
}
textarea{height:auto; min-height:88px; padding:9px 11px; resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.55;}
input[type=text]:focus, select:focus, textarea:focus{border-color:var(--accent);}
input[type=text]::placeholder, textarea::placeholder{color:var(--faint);}
.row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px;}

/* file drop */
.drop{
  border:1px dashed var(--border-2); border-radius:11px; background:var(--panel-2);
  padding:16px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s;
}
.drop:hover, .drop.over{border-color:var(--accent); background:var(--panel-3);}
.drop.filled{border-style:solid; border-color:var(--chip-border);}
.drop .big{font-size:13.5px;}
.drop .small{font-size:12px; color:var(--faint); margin-top:3px;}
.drop input[type=file]{display:none;}
.drop .name{color:var(--chip-text); font-weight:600; word-break:break-all;}

details.adv{margin-bottom:16px;}
details.adv > summary{
  cursor:pointer; font-size:12.5px; color:var(--muted); list-style:none;
  padding:7px 0; user-select:none;
}
details.adv > summary::-webkit-details-marker{display:none;}
details.adv > summary::before{content:"\25B8"; display:inline-block; margin-right:8px; transition:transform .15s;}
details.adv[open] > summary::before{transform:rotate(90deg);}
details.adv > summary:hover{color:var(--accent);}

.actions{display:flex; gap:10px; align-items:center; margin-top:4px;}
.btn-primary{
  flex:1; height:42px; border-radius:10px; border:1px solid var(--accent);
  background:var(--accent); color:#04161b; font-weight:700; font-size:14px; cursor:pointer;
}
html.light .btn-primary{color:#fff;}
.btn-primary:hover:not(:disabled){filter:brightness(1.08);}
.btn-primary:disabled{opacity:.55; cursor:not-allowed;}

/* ---------- status ---------- */
.status{
  display:none; margin-top:16px; padding:11px 13px; border-radius:10px; font-size:13.5px;
  border:1px solid var(--border-2); background:var(--panel-2);
}
.status.show{display:block;}
.status.busy{border-color:var(--chip-border); background:var(--chip-bg); color:var(--chip-text);}
.status.err{border-color:var(--err-border); background:var(--err-bg); color:var(--err);}
.status.ok{border-color:var(--ok-border); background:var(--ok-bg); color:var(--ok);}
.spinner{
  display:inline-block; width:12px; height:12px; margin-right:8px; vertical-align:-1px;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- results ---------- */
.empty{
  border:1px dashed var(--border-2); border-radius:14px; padding:56px 24px;
  text-align:center; color:var(--faint); font-size:13.5px;
}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-bottom:18px;}
.stat{background:var(--panel-2); border:1px solid var(--border); border-radius:11px; padding:12px 13px; min-width:0;}
.stat .v{font-size:22px; font-weight:700; line-height:1.2;}
.stat .k{font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--faint); margin-top:2px;}
.stat.good .v{color:var(--ok);} .stat.bad .v{color:var(--err);} .stat.warn .v{color:var(--warn);}

.dl{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--chip-bg); border:1px solid var(--chip-border);
  border-radius:11px; padding:13px 15px; margin-bottom:18px;
}
.dl .lbl{font-size:12.5px; color:var(--chip-text);}
.dl a.download{
  padding:8px 15px; border-radius:9px; background:var(--accent); color:#04161b;
  font-weight:700; font-size:13px; text-decoration:none;
}
html.light .dl a.download{color:#fff;}
.dl a.download:hover{filter:brightness(1.08); text-decoration:none;}

h3.sect{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); margin:20px 0 8px;}
.chips{display:flex; flex-wrap:wrap; gap:6px;}
.chip{
  background:var(--chip-bg); border:1px solid var(--chip-border); color:var(--chip-text);
  border-radius:7px; padding:3px 9px; font-size:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.chip.none{background:var(--panel-2); border-color:var(--border-2); color:var(--faint);}
ul.notes{margin:6px 0 0; padding-left:20px; color:var(--muted); font-size:13px;}

pre.json{
  background:var(--code-bg); border:1px solid var(--code-border); color:var(--code-text);
  border-radius:10px; padding:13px; overflow:auto; max-height:340px; min-width:0;
  font-size:12px; line-height:1.55; margin:0;
}

/* ---------- stage-by-stage logs ---------- */
details.adv.logs{margin:18px 0 4px;}
details.adv.logs > summary{font-size:13px; color:var(--text); font-weight:600;}
.logdl{margin:8px 0 2px;}
a.loglink{font-size:12.5px;}

details.stage{
  border:1px solid var(--border); border-radius:9px; background:var(--panel-2);
  margin:8px 0; overflow:hidden;
}
details.stage.bad{border-color:var(--err-border);}
details.stage > summary{
  cursor:pointer; list-style:none; user-select:none;
  display:flex; align-items:center; gap:10px; padding:9px 12px; font-size:13px;
}
details.stage > summary::-webkit-details-marker{display:none;}
details.stage > summary::before{
  content:"\25B8"; color:var(--faint); transition:transform .15s; flex:none;
}
details.stage[open] > summary::before{transform:rotate(90deg);}
details.stage .phase{
  flex:none; font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  padding:2px 7px; border-radius:6px; border:1px solid var(--border-2);
  color:var(--muted); background:var(--panel-3);
}
details.stage .phase.engine{color:var(--chip-text); border-color:var(--chip-border); background:var(--chip-bg);}
details.stage .st-title{flex:1; font-weight:600; min-width:0;}
details.stage .st-dur{
  flex:none; color:var(--faint); font-size:11.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
details.stage .st-fail{flex:none; color:var(--err); font-size:10.5px; font-weight:700;}
.st-body{padding:2px 12px 12px; border-top:1px solid var(--border);}
.st-sub{
  font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint);
  margin:11px 0 4px;
}
.kv{display:grid; grid-template-columns:minmax(110px,auto) minmax(0,1fr); gap:2px 12px; font-size:12.5px;}
.kv-k{color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.kv-v{color:var(--text); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; word-break:break-word;}
ul.st-dec{margin:4px 0 0; padding-left:18px; color:var(--muted); font-size:12.5px;}
ul.st-dec li{margin:2px 0; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; word-break:break-word;}