body { font-family: "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
       margin: 0; background: #f0f2f5; color: #333; }
header { background: #1f2937; color: #fff; padding: 18px 28px; }
header h1 { margin: 0 0 6px; font-size: 20px; }
header .sub { color: #9ca3af; font-size: 13px; }
nav { background: #111827; padding: 8px 28px; display: flex; align-items: center; gap: 22px; }
nav a { color: #93c5fd; text-decoration: none; font-size: 14px; }
nav a:hover { text-decoration: underline; }
.navbtn { background: #1f2937; color: #cbd5e1; border: 1px solid #374151;
          border-radius: 4px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.navbtn:hover { background: #374151; }
.stats { display: flex; gap: 14px; padding: 18px 28px; flex-wrap: wrap; }
.stat { flex: 0 0 140px; border-radius: 10px; padding: 14px; text-align: center; }
.stat .num { font-size: 30px; font-weight: 700; }
.stat .lbl { font-size: 13px; color: #666; }
.toolbar { padding: 0 28px 12px; font-size: 13px; color: #666; }
main, section#data { padding: 0 28px 40px; }
main { display: flex; flex-direction: column; gap: 14px; }
.sech2 { font-size: 17px; margin: 26px 0 8px; }
.card { background: #fff; border-radius: 10px; padding: 14px 18px;
        box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.cardhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge { color: #fff; border-radius: 4px; font-size: 12px; padding: 2px 8px; }
.badge.gray { background: #9ca3af; }
.type { background: #eef1f4; border-radius: 4px; padding: 2px 8px; font-size: 12px; }
.meta { color: #666; font-size: 13px; }
.detail { margin: 10px 0; font-size: 14px; }
.kv { border-collapse: collapse; font-size: 13px; margin-bottom: 8px; }
.kv th { text-align: left; background: #f7f8fa; padding: 4px 10px;
         border: 1px solid #e5e7eb; white-space: nowrap; }
.kv td { padding: 4px 10px; border: 1px solid #e5e7eb; }
.mono { font-family: "JetBrains Mono", Consolas, monospace; }
.diff { color: #c0392b; font-weight: 700; }
.mm { color: #c0392b; font-weight: 700; background: #fdecea; }
.lvl-error { color: #c0392b; }
.lvl-warning { color: #b7791f; }
.lvl-review { color: #7048e8; }
details.catgroup { background: #fff; border-radius: 10px; margin: 10px 0;
                   box-shadow: 0 1px 3px rgba(0,0,0,.08); padding: 10px 16px; }
details.catgroup > summary { cursor: pointer; font-size: 15px; user-select: none; }
.catcnt { color: #888; font-size: 13px; font-weight: 400; }
details.pair { border: 1px solid #e5e7eb; border-radius: 8px; margin: 10px 0; padding: 8px 14px; }
details.pair > summary { cursor: pointer; font-size: 14px; user-select: none; }
.pairbody { padding: 6px 0; }
.pagetitle { font-size: 13px; color: #555; margin: 14px 0 4px; font-weight: 600; }
.tblwrap { overflow-x: auto; margin-top: 4px; }
.mirtbl { border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.mirtbl th, .mirtbl td { border: 1px solid #e5e7eb; padding: 3px 8px; }
.mirtbl th { background: #f7f8fa; position: sticky; left: 0; z-index: 1; }
.mirtbl tr th:first-child { background: #eef1f4; font-weight: 600; }
.rowtag { font-size: 11px; padding: 1px 6px; border-radius: 3px; color: #fff; white-space: nowrap; }
.rowtag.ok { background: #2e7d32; }
.rowtag.a { background: #1d4ed8; }
.rowtag.b { background: #b45309; }
.rowtag.miss { background: #9ca3af; }
.missrow td { color: #999; font-style: italic; background: #fafafa; }
.imgwrap { margin: 8px 0 4px; }
.imgtitle { font-size: 12px; color: #888; margin-bottom: 4px; }
.imgwrap img { max-width: 100%; max-height: 560px; border: 1px solid #ddd;
               border-radius: 6px; display: block; }