* { box-sizing: border-box; margin: 0; padding: 0; }
body { font: 13px/1.4 "Microsoft YaHei", sans-serif; background: #f5f6f8; color: #222; }
header { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid #ddd; padding: 8px 14px; }
header h1 { font-size: 16px; margin-bottom: 6px; }
.toolbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.toolbar label { display: flex; gap: 4px; align-items: center; }
select, button { font: inherit; padding: 2px 6px; }
#meta { color: #888; font-size: 12px; margin-left: auto; }
main { padding: 8px 10px; overflow-x: auto; }
table.chart { border-collapse: collapse; background: #fff; margin: 0 auto; }
table.chart th, table.chart td { border: 1px solid #d8d8d8; text-align: center; padding: 0 3px; height: 20px; white-space: nowrap; }
table.chart thead th { background: #e8eef7; font-weight: 600; position: sticky; top: 0; }
table.chart thead tr.grp th { background: #cfe0f5; }
td.issue { background: #f2f7ff; font-weight: 600; }
td.sjh { color: #c00; font-weight: 700; letter-spacing: 2px; }
td.kj { color: #06a; font-weight: 700; letter-spacing: 2px; }
td.metric { background: #fbfbf0; }
td.omit { color: #999; font-size: 11px; }
td.omit.hot { color: #d60; font-weight: 700; }
td.hit { background: #e33; color: #fff; font-weight: 700; }
td.hit2 { background: #f90; color: #fff; font-weight: 700; }
td.hit3 { background: #36c; color: #fff; font-weight: 700; }
td.same { background: #6c3; color: #fff; font-weight: 700; }
tr.stat td { background: #eef3fa; font-weight: 600; color: #345; font-size: 11px; }
tr.stat td:first-child { background: #dbe7f5; }
tr.dup-sjh td.sjh { background: #ffe9e9; }
#loading { text-align: center; color: #999; padding: 60px; }
.legend { margin: 8px auto; width: fit-content; font-size: 12px; color: #666; }
.legend b { display: inline-block; width: 14px; height: 14px; border-radius: 2px; vertical-align: -2px; margin: 0 3px 0 10px; }