:root { --bg:#f5f6f8; --card:#fff; --ink:#1d2330; --mute:#6b7385; --line:#e2e5ea; --ok:#167a3e; --warn:#a35b00; --bad:#b3261e; --acc:#2456c9; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; background:var(--bg); color:var(--ink); }
header { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; padding:12px 18px; background:#1d2330; color:#fff; }
header .muted { color:#b9c0cf; }
.status { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.pill { display:inline-block; padding:2px 8px; border-radius:10px; background:#e8ecf5; color:var(--ink); font-size:12px; white-space:nowrap; }
header .pill { background:#343c4f; color:#fff; }
.pill.REPLAY { background:#2456c9; color:#fff; } .pill.LIVE { background:#b3261e; color:#fff; } .pill.MOCK { background:#a35b00; color:#fff; }
.bar { display:inline-block; width:90px; height:8px; background:#454e63; border-radius:4px; vertical-align:middle; overflow:hidden; }
.bar i { display:block; height:100%; background:#5fd38a; }
main { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:14px 18px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 14px; min-width:0; overflow:auto; }
.card.wide { grid-column:1 / -1; }
h2 { font-size:15px; margin:4px 0 10px; }
table { border-collapse:collapse; width:100%; font-size:13px; }
th, td { text-align:left; padding:4px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--mute); font-weight:600; }
.muted { color:var(--mute); } .small { font-size:12px; font-weight:normal; }
.ok { color:var(--ok); font-weight:600; } .warn { color:var(--warn); font-weight:600; } .bad { color:var(--bad); font-weight:600; }
.err { color:var(--bad); margin-left:8px; }
button { font:inherit; padding:3px 10px; border:1px solid var(--acc); background:var(--acc); color:#fff; border-radius:5px; cursor:pointer; }
button:disabled { opacity:.45; cursor:not-allowed; }
button.link { background:none; color:var(--acc); border:none; padding:0; text-decoration:underline; }
input { font:inherit; padding:3px 6px; border:1px solid var(--line); border-radius:5px; }
.row { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.ev { margin:2px 0 0 0; padding-left:16px; color:var(--mute); font-size:12px; }
.steps { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:6px 0 10px; }
.step { border:1px solid var(--acc); color:var(--acc); border-radius:6px; padding:3px 8px; font-size:12px; background:#f0f4ff; }
.arrow { color:var(--mute); }
button.rej { background:var(--bad); border-color:var(--bad); }
.runbox button, #tasks button { margin:4px 6px 0 0; }
.runbox { margin-top:10px; padding:8px 10px; border-left:4px solid var(--acc); background:#f0f4ff; border-radius:4px; }
.kb li { margin-bottom:8px; } .kb .score { color:var(--mute); font-size:12px; }
#trace { display:block; max-height:330px; overflow:auto; }
.hidden { display:none; }
#trace.hidden { display:none; }
footer { padding:0 18px 18px; }
@media (max-width: 900px) { main { grid-template-columns:1fr; } }