* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; font-family: -apple-system, "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
       background: #0f1420; color: #e8ecf4; font-size: 16px; }
header { position: sticky; top: 0; z-index: 10; background: #131a2a; border-bottom: 1px solid #232d45; padding: 10px 14px; }
.brand { font-size: 19px; font-weight: 800; }
.brand .sub { color: #8b96b0; font-weight: 400; font-size: 14px; }
.hrow { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
select, button, textarea { font-size: 15px; border-radius: 10px; border: 1px solid #2c3a58;
  background: #1a2338; color: #e8ecf4; padding: 9px 12px; }
button { cursor: pointer; }
.progress { flex: 1; height: 30px; background: #1a2338; border-radius: 10px; position: relative; overflow: hidden; }
#pbar { height: 100%; width: 0; background: linear-gradient(90deg, #2a9d5c, #3ecf7a); transition: width .3s; }
#ptext { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
main { padding: 12px; max-width: 900px; margin: 0 auto; padding-bottom: 60px; }
.card { background: #151d31; border: 1px solid #232d45; border-radius: 14px; padding: 14px; margin-bottom: 12px; }
#info .code { font-size: 22px; font-weight: 800; }
#info .name { color: #8b96b0; margin-left: 8px; }
#info .row { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: 14.5px; }
#info .k { color: #8b96b0; }
.pos { color: #ff6b6b; font-weight: 700; } .neg { color: #3ecf7a; font-weight: 700; }
.tag { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 13px; font-weight: 700; }
.tag.good { background: #143d28; color: #3ecf7a; } .tag.bad { background: #4a1f24; color: #ff6b6b; }
.tag.unsure { background: #4a3a16; color: #ffcf5c; } .tag.none { background: #232d45; color: #8b96b0; }
#chart { height: 380px; }
#chartWrap { position: relative; }
#overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
#overlay text { font-size: 11px; font-weight: 700; }
.chart-tools { display: flex; gap: 10px; margin-top: 8px; }
.tool { flex: 1; padding: 9px 0; font-size: 14px; }
.tool.on { border-color: #e8b50a; color: #e8b50a; }
.legend .ma { color: #e8b50a; }
.ev-head { font-size: 17px; font-weight: 800; margin-bottom: 10px; }
.ev-sub { font-size: 12.5px; color: #8b96b0; font-weight: 400; margin-left: 8px; }
.rule { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: #1a2338;
  border-radius: 10px; margin-bottom: 8px; border-left: 4px solid #2c3a58; }
.rule.pass { border-left-color: #3ecf7a; } .rule.fail { border-left-color: #ff6b6b; }
.rule .mark { font-size: 18px; font-weight: 800; flex-shrink: 0; }
.rule.pass .mark { color: #3ecf7a; } .rule.fail .mark { color: #ff6b6b; }
.rule .rn { font-weight: 700; font-size: 15px; }
.rule .rv { margin-left: auto; font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.rule .rt { font-size: 12.5px; color: #8b96b0; margin-top: 2px; }
.rule .rd { font-size: 13px; color: #aeb8d0; margin-top: 4px; line-height: 1.5; }
@media (min-width: 700px) { #chart { height: 480px; } }
.legend { display: flex; gap: 14px; font-size: 12.5px; color: #8b96b0; margin-top: 6px; }
.legend .up { color: #ff6b6b; } .legend .dn { color: #3ecf7a; }
.vbtns { display: flex; gap: 10px; }
.vbtn { flex: 1; padding: 14px 0; font-size: 17px; font-weight: 800; border-width: 2px; }
.vbtn kbd { font-size: 11px; opacity: .6; margin-left: 4px; }
.vbtn.good { border-color: #2a9d5c; } .vbtn.good.on { background: #2a9d5c; color: #fff; }
.vbtn.bad { border-color: #c0392b; } .vbtn.bad.on { background: #c0392b; color: #fff; }
.vbtn.unsure { border-color: #b97c1e; } .vbtn.unsure.on { background: #b97c1e; color: #fff; }
#note { width: 100%; min-height: 64px; margin-top: 10px; resize: vertical; }
.nav { display: flex; gap: 10px; margin-bottom: 12px; }
.nav button { flex: 1; padding: 13px 0; font-size: 16px; font-weight: 700; }
.qhead { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 10px; }
.qhead select { margin-left: auto; padding: 6px 10px; font-size: 13px; }
#queue { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.qitem { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: #1a2338;
  border-radius: 10px; font-size: 14px; border: 1px solid transparent; }
.qitem.cur { border-color: #e94560; }
.qitem .dt { color: #8b96b0; font-size: 12.5px; }
.qitem .dot { width: 10px; height: 10px; border-radius: 50%; background: #2c3a58; flex-shrink: 0; }
.qitem .dot.good { background: #3ecf7a; } .qitem .dot.bad { background: #ff6b6b; } .qitem .dot.unsure { background: #ffcf5c; }
.qitem .r { margin-left: auto; font-weight: 700; }
.stats { font-size: 14.5px; line-height: 2; color: #aeb8d0; }
.stats b { color: #e8ecf4; }