:root { --ink:#14213d; --muted:#6b7280; --line:#e5e7eb; --bg:#f7f8fa; --accent:#f5b700; --good:#15803d; --warn:#b45309; --bad:#b91c1c; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--ink); background:var(--bg); }
a { color:#1d4ed8; text-decoration:none; } a:hover { text-decoration:underline; }
header.top { background:var(--ink); color:#fff; padding:10px 24px; display:flex; align-items:center; gap:24px; position:sticky; top:0; z-index:50; box-shadow:0 1px 6px rgba(0,0,0,.18); }
header.top .brand { font-weight:700; letter-spacing:.2px; } header.top .brand span { color:var(--accent); }
header.top nav { display:flex; gap:18px; flex:1; } header.top nav a { color:#dbe2f0; } header.top nav a.on { color:#fff; font-weight:600; }
header.top form { margin:0; } header.top .who { color:#aab4c8; font-size:13px; margin-right:10px; }
main { max-width:1180px; margin:24px auto; padding:0 24px; }
.banner { background:#fff7e0; border:1px solid #f3d37a; padding:8px 14px; border-radius:8px; margin-bottom:16px; font-size:14px; }
.card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px 20px; margin-bottom:18px; }
.card h2 { margin:0 0 10px; font-size:17px; } h1 { font-size:22px; margin:0 0 16px; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; }
.tile { background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.tile .n { font-size:26px; font-weight:700; } .tile .l { color:var(--muted); font-size:13px; }
button, .btn { font:inherit; padding:8px 14px; border-radius:8px; border:1px solid var(--ink); background:var(--ink); color:#fff; cursor:pointer; }
button.ghost, .btn.ghost { background:#fff; color:var(--ink); } button.danger { background:var(--bad); border-color:var(--bad); }
button:disabled { opacity:.5; cursor:default; }
input[type=text], input[type=password], textarea, select { font:inherit; padding:8px 10px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; }
textarea { width:100%; min-height:120px; } label { display:block; font-weight:600; margin:12px 0 4px; }
.muted { color:var(--muted); } .small { font-size:13px; } .right { text-align:right; } .row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
th, td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; } th { font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); background:#fafbfc; }
td.num { font-variant-numeric:tabular-nums; white-space:nowrap; } tr:last-child td { border-bottom:0; }
.score { display:inline-block; min-width:38px; text-align:center; font-weight:700; padding:2px 8px; border-radius:6px; background:#eef2ff; }
.score.hi { background:#dcfce7; color:var(--good); } .score.mid { background:#fef3c7; color:var(--warn); } .score.lo { background:#f3f4f6; color:var(--muted); }
.tag { display:inline-block; font-size:12px; padding:1px 7px; border-radius:999px; background:#eef2f7; color:#334155; margin-right:4px; }
.tag.star { background:#fde68a; color:#7c5800; } .tag.ok { background:#dcfce7; color:var(--good); } .tag.warn { background:#fee2e2; color:var(--bad); }
.tabs { display:flex; gap:6px; margin-bottom:14px; } .tabs a { padding:6px 12px; border-radius:8px; background:#fff; border:1px solid var(--line); color:var(--ink); } .tabs a.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.avatar { width:34px; height:34px; border-radius:50%; vertical-align:middle; margin-right:8px; background:#e5e7eb; }
.msg { border-left:3px solid var(--line); padding:6px 12px; margin:8px 0; white-space:pre-wrap; word-break:break-word; } .msg.me { border-color:var(--accent); background:#fffbeb; }
.msg .meta { color:var(--muted); font-size:12px; }
.grid2 { display:grid; grid-template-columns:1.2fr 1fr; gap:18px; } @media (max-width:900px) { .grid2 { grid-template-columns:1fr; } }
.bars div { display:flex; align-items:center; gap:8px; margin:3px 0; font-size:14px; } .bars .bar { height:8px; background:#e5e7eb; border-radius:4px; flex:1; max-width:160px; } .bars .bar i { display:block; height:8px; background:var(--ink); border-radius:4px; }
.w0{width:0}.w1{width:20%}.w2{width:40%}.w3{width:60%}.w4{width:80%}.w5{width:100%}
pre.log { background:#0f172a; color:#d1e0ff; padding:12px; border-radius:8px; font-size:12.5px; max-height:220px; overflow:auto; white-space:pre-wrap; }
.center { max-width:460px; margin:70px auto; } .err { color:var(--bad); font-weight:600; } .ok { color:var(--good); font-weight:600; }
.preview { background:#f8fafc; border:1px dashed #cbd5e1; border-radius:8px; padding:10px 12px; white-space:pre-wrap; }
ul.clean { margin:6px 0; padding-left:18px; } .search { width:260px; }

.yn { display:inline-block; min-width:38px; text-align:center; font-size:12.5px; font-weight:700; padding:2px 9px; border-radius:6px; }
.yn.yes { background:#dcfce7; color:#15803d; } .yn.no { background:#fee2e2; color:#b91c1c; } .yn.na { background:#f3f4f6; color:#6b7280; }

a.yn { text-decoration:none; } a.yn.yes:hover { background:#bbf7d0; text-decoration:none; }
.metric { font-size:12px; color:var(--muted); margin-top:3px; white-space:nowrap; }
.facts { display:grid; gap:6px; margin:10px 0 12px; } .fact { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px; }
.fact .k { min-width:230px; color:#334155; } .fact .v { color:#334155; }