/* 键盘测试页（/keyboard-test/）：键盘图来自 App 的 src/keyboard.js，生成网站时复制成 assets/kb-draw.js */
.tool{padding:22px 24px 20px}
.tool-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;font-size:13.5px;color:#4A5468;cursor:pointer}
.chips button[aria-pressed="true"]{border-color:var(--primary);color:var(--primary);background:var(--primary-soft);font-weight:600}
.stat{display:flex;gap:18px;margin-left:auto;font-size:14px;color:var(--sub);white-space:nowrap}
.stat b{color:var(--text);font-size:18px}
.kb-box{border-radius:14px;outline:none;position:relative}
html.kbd-nav .kb-box:focus-visible{box-shadow:0 0 0 3px rgba(47,107,255,.25)}
.kb-box svg{display:block;width:100%;height:auto}
.k.done rect.tp{fill:#CDEFDD!important}
.k.done rect.sd{fill:#8FD3AE!important}
.k.down rect.tp{fill:#2F6BFF!important}
.k.down rect.sd{fill:#1F4FCC!important}
.k.down text{fill:#fff!important}
.k.warn rect.tp{fill:#FFE3C2!important}
.k.warn rect.sd{fill:#F0A64A!important}
.focus-tip{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(247,249,252,.72);border-radius:14px;font-weight:600;color:var(--primary);cursor:pointer;font-size:17px}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin:14px 0 0;font-size:13px;color:var(--sub)}
.legend i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:6px}
.now{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.now div{background:#F5F7FB;border-radius:12px;padding:10px 14px}
.now small{display:block;color:var(--faint);font-size:12.5px}
.now b{font-size:17px;word-break:break-all}
.warns{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.warns div{background:#FFF6EA;border:1px solid #F5D9A8;color:#8A5A12;border-radius:10px;padding:8px 14px;font-size:14px}
.mouse{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:center;margin-top:22px;padding:18px 20px;border:1.5px dashed #C9D6EE;border-radius:14px;background:#FAFCFF;user-select:none;cursor:pointer}
.mouse svg{width:150px;height:auto}
.mouse .mb{fill:#fff;stroke:#C9D2E2;stroke-width:1.5}
.mouse .mb.hit{fill:#CDEFDD;stroke:#8FD3AE}
.mouse .mb.down{fill:#2F6BFF;stroke:#1F4FCC}
.mrows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px;font-size:14px}
.mrows span{display:flex;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 12px}
.mrows span b{color:var(--primary)}
.tool-tip{margin:16px 0 0;font-size:13px;color:var(--sub)}
.mobile-tip{display:none;background:#FFF6EA;border:1px solid #F5D9A8;color:#8A5A12;border-radius:12px;padding:12px 16px;margin-bottom:14px;font-size:14px}
.cta-box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:26px 30px;background:linear-gradient(135deg,#EEF4FF,#E7F8FD)}
.cta-box h2{margin:0 0 6px;font-size:22px}
.cta-box p{margin:0;color:var(--sub)}
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.how .card{padding:20px 22px}
.how b{display:block;font-size:17px;margin-bottom:6px}
.how p{margin:0;color:var(--sub);font-size:14.5px}
.rel{display:flex;gap:12px;flex-wrap:wrap}
.rel a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:14px;color:#3A4458}
.rel a:hover{border-color:var(--primary);color:var(--primary)}
@media (max-width:899px){
  .now{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mouse{grid-template-columns:1fr;justify-items:center}
  .mrows{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .how{grid-template-columns:1fr}
  .cta-box{grid-template-columns:1fr}
  .stat{margin-left:0}
}
@media (max-width:599px){
  .mobile-tip{display:block}
  .tool{padding:16px}
}

/* 其他测试（5 个测试页互相跳转） */
.tests{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:16px 0 0;font-size:14px;color:var(--sub)}
.tests a{padding:5px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);color:#3A4458}
.tests a:hover{border-color:var(--primary);color:var(--primary)}
.tests a[aria-current]{border-color:var(--primary);background:var(--primary-soft);color:var(--primary);font-weight:600}
/* 鼠标测试页：只有鼠标测试区，放大 */
.mouse-only .mouse{margin-top:0;grid-template-columns:280px minmax(0,1fr);padding:28px 30px}
.mouse-only .mouse svg{width:220px}
.mouse-only .mrows{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:899px){.mouse-only .mouse{grid-template-columns:1fr}.mouse-only .mrows{grid-template-columns:repeat(2,minmax(0,1fr))}}