:root { --fg:#1c1c1e; --dim:#666; --line:#d5d5da; --accent:#2b6cb0; --bad:#c0392b; --good:#1e8449; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, "Microsoft YaHei", sans-serif; color:var(--fg); font-size:14px; }
.banner { background:#fef3c7; color:#7c5a00; padding:8px 14px; font-size:12.5px; border-bottom:1px solid #f0e0a0; }
.toolbar { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); }
.spacer { flex:1; }
.status.bad { color:var(--bad); } .status.good { color:var(--good); }
.tabs { display:flex; gap:4px; padding:8px 14px 0; border-bottom:1px solid var(--line); }
.tab { background:none; border:1px solid transparent; border-bottom:none; padding:8px 16px; cursor:pointer; color:var(--dim); border-radius:6px 6px 0 0; }
.tab.active { color:var(--accent); border-color:var(--line); background:#fff; font-weight:600; }
.panel { display:none; padding:14px; }
.panel.active { display:block; }
.card { border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-bottom:12px; }
.card h3 { margin:0 0 6px; font-size:13px; color:var(--dim); font-weight:600; }
.row { display:flex; align-items:center; gap:10px; margin:8px 0; }
.row > h3 { margin:0; font-size:13px; color:var(--dim); font-weight:600; }
.mono { font-family: Consolas, monospace; white-space:pre-wrap; }
.console { background:#0f172a; color:#d5e2f0; padding:10px; border-radius:8px; max-height:220px; overflow:auto; font-size:12px; }
.console.diag { max-height:none; height:calc(100vh - 330px); min-height:240px; white-space:pre; }
button { padding:6px 12px; border:1px solid var(--line); background:#fff; border-radius:6px; cursor:pointer; }
button:disabled { opacity:.5; cursor:not-allowed; }
button:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
progress { width:100%; height:14px; }