:root {
  --ink:#17202a; --muted:#62707d; --line:#d9dee3; --soft:#f4f6f7;
  --accent:#0b6b53; --warn:#9a6700; --bad:#b42318; --info:#1f4e79;
}
* { box-sizing:border-box; }
body {
  margin:0; color:var(--ink); background:#fff;
  font:14px/1.55 "Segoe UI","Microsoft YaHei",sans-serif;
}
header { border-bottom:4px solid var(--accent); background:#17202a; color:#fff; }
.wrap { width:min(1440px,calc(100% - 48px)); margin:0 auto; }
header .wrap { padding:22px 0 0; }
h1 { margin:0 0 4px; font-size:24px; font-weight:650; }
h2 { margin:0 0 14px; font-size:19px; }
h3 { margin:0 0 10px; font-size:15px; color:var(--muted); font-weight:650; }
.sub-line { color:#cdd5dc; font-size:13px; margin-bottom:14px; }
nav { display:flex; gap:2px; }
nav a {
  color:#cdd5dc; text-decoration:none; padding:9px 18px; font-weight:650;
  border:1px solid transparent; border-bottom:0; border-radius:4px 4px 0 0;
}
nav a:hover { color:#fff; background:#22303e; }
nav a.on { color:var(--ink); background:#fff; }
main { padding:26px 0 60px; }
section { margin:0 0 26px; }

.panel { border:1px solid var(--line); padding:18px 20px; margin-bottom:20px; }
.panel > h2 { border-bottom:1px solid var(--line); padding-bottom:10px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px 18px; }
.field { display:flex; flex-direction:column; min-width:0; }
.field label { font-size:12px; color:var(--muted); font-weight:650; margin-bottom:4px; }
.field .hint { font-size:11px; color:var(--muted); margin-top:4px; line-height:1.4; }
input[type=text], input[type=password], input[type=number], select, textarea {
  font:13px/1.4 inherit; font-family:inherit; padding:7px 9px;
  border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:3px;
}
input:focus, select:focus, textarea:focus { outline:2px solid #cfe6de; border-color:var(--accent); }
textarea { resize:vertical; min-height:64px; font-family:Consolas,monospace; font-size:12px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.grow { flex:1 1 240px; min-width:0; }

button {
  font:13px/1 inherit; font-weight:650; padding:9px 16px; border-radius:3px; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:var(--ink);
}
button:hover:not(:disabled) { background:var(--soft); }
button:disabled { opacity:.5; cursor:not-allowed; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.primary:hover:not(:disabled) { background:#095440; }
button.danger { color:var(--bad); border-color:#e8b7b2; }
button.danger:hover:not(:disabled) { background:#fff1f0; }
button.sm { padding:5px 10px; font-size:12px; font-weight:400; }

.check { display:flex; align-items:center; gap:7px; font-size:13px; cursor:pointer; }
.check input { margin:0; }

.model-box { border:1px solid var(--line); max-height:250px; overflow-y:auto; padding:4px; background:#fff; }
.model-box .empty { color:var(--muted); padding:14px; font-size:13px; }
.model-item { display:flex; align-items:center; gap:8px; padding:5px 8px; cursor:pointer; border-radius:3px; }
.model-item:hover { background:var(--soft); }
.model-item input { margin:0; }
.model-item .name { font-family:Consolas,monospace; font-size:12.5px; overflow-wrap:anywhere; }
.model-item .src { margin-left:auto; font-size:11px; color:var(--muted); white-space:nowrap; }

.tag { display:inline-block; border:1px solid currentColor; padding:1px 6px; font-size:11px; font-weight:650; border-radius:3px; white-space:nowrap; }
.tag.ok { color:var(--accent); background:#eef9f5; }
.tag.warn { color:var(--warn); background:#fff8e6; }
.tag.bad { color:var(--bad); background:#fff1f0; }
.tag.info { color:var(--info); background:#eef4fa; }

.notice { border-left:4px solid var(--warn); background:#fff8e6; padding:11px 14px; margin:12px 0; font-size:13px; }
.notice.bad { border-color:var(--bad); background:#fff1f0; }
.notice.info { border-color:var(--info); background:#eef4fa; }

.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); border-right:0; margin-bottom:22px; }
.metric { padding:16px 18px; border-right:1px solid var(--line); min-width:0; }
.metric .label { color:var(--muted); font-size:12px; text-transform:uppercase; }
.metric .value { margin-top:4px; font-size:19px; font-weight:650; overflow-wrap:anywhere; }

.table-wrap { width:100%; overflow-x:auto; border:1px solid var(--line); }
table { border-collapse:collapse; width:100%; }
th { background:var(--soft); color:#34414c; font-weight:650; text-align:left; white-space:nowrap; }
th,td { padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:#fafbfb; }
.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.mono { font-family:Consolas,monospace; font-size:12px; }
.note-cell { font-size:12px; color:#4f5b65; max-width:340px; overflow-wrap:anywhere; }
.bar-track { width:120px; height:8px; background:#e7eaed; }
.bar { height:100%; background:var(--accent); }

.progress { height:6px; background:#e7eaed; margin:12px 0; }
.progress > div { height:100%; background:var(--accent); width:0; transition:width .2s; }
.console {
  background:#111a22; color:#d7e2ea; font:12px/1.6 Consolas,monospace;
  padding:12px 14px; height:300px; overflow-y:auto; white-space:pre-wrap; overflow-wrap:anywhere;
}
.console .ok { color:#6ed3ae; }
.console .bad { color:#ff9c8f; }
.console .warn { color:#f0c76a; }
.console .dim { color:#7d8f9c; }

.split { display:grid; grid-template-columns:290px 1fr; gap:22px; align-items:start; }
.run-list { border:1px solid var(--line); max-height:74vh; overflow-y:auto; }
.run-item { padding:11px 13px; border-bottom:1px solid var(--line); cursor:pointer; }
.run-item:last-child { border-bottom:0; }
.run-item:hover { background:var(--soft); }
.run-item.on { background:#eef9f5; border-left:3px solid var(--accent); padding-left:10px; }
.run-item .t { font-weight:650; font-size:13px; }
.run-item .m { font-size:11.5px; color:var(--muted); margin-top:3px; overflow-wrap:anywhere; }
.empty-state { color:var(--muted); padding:40px 20px; text-align:center; }

footer { border-top:1px solid var(--line); color:var(--muted); padding:16px 0 30px; font-size:12px; }
a { color:var(--accent); }

@media (max-width:900px) {
  .wrap { width:calc(100% - 24px); }
  .metrics { grid-template-columns:1fr 1fr; }
  .split { grid-template-columns:1fr; }
}