/* 鼠标测试工具页面样式 */

/* ========== 页面头部 ========== */
.tool-hero {
  background: linear-gradient(135deg, #0066cc 0%, #0052a3 50%, #003d7a 100%);
  color: white;
  padding: 50px 0 40px;
  text-align: center;
}

.tool-hero h1 {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 12px;
}

.tool-hero p {
  font-size: 16px;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto 24px;
  line-height: 1.7;
}

.tool-hero-badges {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  opacity: 0.85;
}

.tool-hero-badges span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ========== Tab 导航 ========== */
.test-tabs {
  background: #fff;
  border-bottom: 2px solid var(--border-color);
  position: sticky;
  top: 67px;
  z-index: 50;
}

.test-tabs .container {
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.test-tabs .container::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  flex-shrink: 0;
  padding: 16px 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-light);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}

.tab-btn:hover {
  color: var(--primary-color);
  background: var(--hover-bg);
}

.tab-btn.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
  font-weight: 600;
}

.tab-icon {
  font-size: 18px;
}

/* ========== 测试面板通用 ========== */
.test-panel {
  display: none;
  padding: 40px 0;
  min-height: 500px;
}

.test-panel.active {
  display: block;
}

.test-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 20px;
}

.test-card-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.test-card-desc {
  color: var(--text-light);
  font-size: 13px;
  margin-bottom: 20px;
  line-height: 1.6;
}

/* 统计数字网格 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.stat-box {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}

.stat-label {
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 6px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: var(--primary-color);
  font-variant-numeric: tabular-nums;
}

.stat-value.small {
  font-size: 20px;
}

/* 重置按钮 */
.btn-reset {
  background: #f0f0f0;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-reset:hover {
  background: #e0e0e0;
}

/* ========== 按键测试 ========== */
.mouse-visual {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  margin: 30px 0;
  flex-wrap: wrap;
}

/* 鼠标俯视图 SVG */
.mouse-diagram {
  width: 200px;
  height: 340px;
  flex-shrink: 0;
}

/* SVG 内按键通用样式 */
.mouse-btn {
  cursor: pointer;
  transition: fill 0.12s;
}

.mouse-btn:hover {
  fill: #d0d8e0;
}

.mouse-btn.pressed {
  fill: #0066cc !important;
}

.mouse-btn.double-click-warning {
  fill: #ff4d4f !important;
}

/* 按键信息面板（右侧） */
.click-info-panel {
  flex: 1;
  min-width: 260px;
}

/* 按键卡片网格 */
.btn-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.btn-card {
  background: #f8f9fa;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.15s;
}

.btn-card.active {
  border-color: var(--primary-color);
  background: #f0f7ff;
}

.btn-card.warning {
  border-color: #ff4d4f;
  background: #fff2f0;
}

.btn-card-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ddd;
  flex-shrink: 0;
  transition: background 0.15s;
}

.btn-card.active .btn-card-indicator {
  background: var(--primary-color);
  box-shadow: 0 0 6px rgba(0, 102, 204, 0.4);
}

.btn-card.warning .btn-card-indicator {
  background: #ff4d4f;
  box-shadow: 0 0 6px rgba(255, 77, 79, 0.4);
}

.btn-card-info {
  flex: 1;
  min-width: 0;
}

.btn-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color);
}

.btn-card-detail {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 2px;
}

.btn-card-count {
  font-size: 18px;
  font-weight: bold;
  color: var(--primary-color);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* 额外按键卡片（底部一排） */
.btn-cards-extra {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.btn-card-unknown {
  margin-top: 12px;
  padding: 10px 14px;
  background: #fffbe6;
  border: 1px dashed #faad14;
  border-radius: 8px;
  font-size: 12px;
  color: #ad6800;
  display: none;
}

.btn-card-unknown.visible {
  display: block;
}

.click-log {
  max-height: 200px;
  overflow-y: auto;
  font-size: 13px;
  font-family: "SF Mono", "Consolas", monospace;
  background: #f8f9fa;
  border-radius: 6px;
  padding: 12px;
  margin-top: 15px;
}

.click-log-entry {
  padding: 4px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
}

.click-log-entry:last-child {
  border-bottom: none;
}

.click-log-entry.warning {
  color: #ff4d4f;
  font-weight: 600;
}

/* ========== 滚轮测试 ========== */
.scroll-area {
  height: 300px;
  background: #f8f9fa;
  border: 2px dashed #ddd;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: ns-resize;
  transition: border-color 0.2s, background 0.2s;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.scroll-area:hover {
  border-color: var(--primary-color);
}

.scroll-area.scrolling-up {
  border-color: #52c41a;
  background: #f6ffed;
}

.scroll-area.scrolling-down {
  border-color: #1890ff;
  background: #e6f7ff;
}

.scroll-direction-icon {
  font-size: 48px;
  margin-bottom: 10px;
  transition: transform 0.2s;
}

.scroll-area.scrolling-up .scroll-direction-icon {
  transform: translateY(-5px);
  color: #52c41a;
}

.scroll-area.scrolling-down .scroll-direction-icon {
  transform: translateY(5px);
  color: #1890ff;
}

.scroll-hint {
  color: #999;
  font-size: 14px;
}

/* 滚轮事件条形图 */
.scroll-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 60px;
  margin-top: 15px;
  padding: 0 5px;
}

.scroll-bar {
  flex: 1;
  min-width: 3px;
  max-width: 6px;
  border-radius: 2px 2px 0 0;
  transition: height 0.1s;
}

.scroll-bar.up {
  background: #52c41a;
}

.scroll-bar.down {
  background: #1890ff;
}

/* ========== 回报率测试 ========== */
.polling-display {
  text-align: center;
  padding: 30px 0;
}

.polling-rate-big {
  font-size: 72px;
  font-weight: bold;
  color: var(--primary-color);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.polling-unit {
  font-size: 20px;
  color: var(--text-light);
  margin-left: 8px;
}

.polling-status {
  margin-top: 10px;
  font-size: 14px;
  color: var(--text-light);
}

.polling-status.active {
  color: #52c41a;
}

.polling-hint {
  margin-top: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  text-align: center;
  color: var(--text-light);
  font-size: 13px;
  line-height: 1.6;
}

/* 回报率时间线图 */
.polling-chart {
  width: 100%;
  height: 120px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-top: 20px;
}

/* ========== 轨迹画板 ========== */
.canvas-wrapper {
  position: relative;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  background: #fff;
}

.trace-canvas {
  display: block;
  cursor: crosshair;
}

.canvas-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background: #f8f9fa;
  border-top: 1px solid var(--border-color);
}

.canvas-info {
  font-size: 12px;
  color: var(--text-light);
}

.color-picker-group {
  display: flex;
  gap: 6px;
  align-items: center;
}

.color-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}

.color-dot:hover,
.color-dot.active {
  border-color: var(--text-color);
  transform: scale(1.15);
}

/* ========== 反应速度测试 ========== */
.reaction-area {
  height: 350px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
  position: relative;
}

.reaction-area.state-idle {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.reaction-area.state-waiting {
  background: linear-gradient(135deg, #f5576c 0%, #ff6b6b 100%);
  color: white;
}

.reaction-area.state-ready {
  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
  color: white;
}

.reaction-area.state-result {
  background: #f8f9fa;
  border: 2px solid var(--border-color);
  color: var(--text-color);
}

.reaction-area.state-too-early {
  background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
  color: white;
}

.reaction-text {
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  padding: 0 20px;
}

.reaction-sub-text {
  font-size: 14px;
  margin-top: 10px;
  opacity: 0.85;
}

.reaction-result-value {
  font-size: 64px;
  font-weight: bold;
  color: var(--primary-color);
  font-variant-numeric: tabular-nums;
}

.reaction-result-unit {
  font-size: 18px;
  color: var(--text-light);
}

.reaction-history {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 15px;
}

.reaction-history-item {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.reaction-history-item.fast {
  background: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.reaction-history-item.normal {
  background: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}

.reaction-history-item.slow {
  background: #fff7e6;
  color: #faad14;
  border: 1px solid #ffd591;
}

/* ========== CTA 区域 ========== */
.tool-cta {
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
  border: 1px solid #bae0ff;
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  margin: 40px 0;
}

.tool-cta h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: var(--text-color);
}

.tool-cta p {
  color: var(--text-light);
  margin-bottom: 20px;
  font-size: 14px;
}

.tool-cta-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.tool-cta .btn-primary {
  background: var(--primary-color);
  color: white;
  padding: 12px 28px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s;
  display: inline-block;
}

.tool-cta .btn-primary:hover {
  background: var(--primary-dark);
  text-decoration: none;
}

.tool-cta .btn-secondary {
  background: white;
  color: var(--primary-color);
  padding: 12px 28px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--primary-color);
  transition: all 0.2s;
  display: inline-block;
}

.tool-cta .btn-secondary:hover {
  background: var(--primary-color);
  color: white;
  text-decoration: none;
}

/* ========== 说明区域 ========== */
.tool-info-section {
  padding: 40px 0;
  background: #fafafa;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.info-card {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 24px;
}

.info-card-icon {
  font-size: 28px;
  margin-bottom: 12px;
}

.info-card h4 {
  font-size: 15px;
  margin-bottom: 8px;
}

.info-card p {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.7;
}

/* ========== 键盘测试 ========== */

/* 按键捕获状态指示器 */
.kb-capture-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
  border: 1px solid #a5d6a7;
  border-radius: 10px;
  margin-bottom: 25px;
  font-size: 14px;
  color: #2e7d32;
  font-weight: 500;
}
.kb-capture-dot {
  width: 10px;
  height: 10px;
  background: #4caf50;
  border-radius: 50%;
  animation: kb-capture-pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes kb-capture-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.5); }
  50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(76, 175, 80, 0); }
}

/* 按键信息面板 */
.kb-info-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 25px;
}
.kb-info-item {
  flex: 1;
  min-width: 120px;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 12px 16px;
  text-align: center;
}
.kb-info-label {
  display: block;
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 4px;
}
.kb-info-value {
  display: block;
  font-size: 18px;
  font-weight: bold;
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
  font-variant-numeric: tabular-nums;
  color: var(--text-color);
}

/* 虚拟键盘布局 */
.kb-layout-wrapper {
  overflow-x: auto;
  padding: 5px 0;
  -webkit-overflow-scrolling: touch;
}
/*
 * CSS Grid 对齐方案（display: contents）：
 * 主键盘、导航区、小键盘的 .kb-row 全部展平为网格直接子元素，
 * 共享 6 行 × 50px 行高 + 6px 间距 = 332px 统一高度。
 * 小键盘 +/Enter 使用 grid-row: span 2 跨两行 = 106px。
 */
.kb-layout-full {
  display: inline-grid;
  grid-template-rows: repeat(6, 50px);
  grid-template-columns: min-content 20px min-content 20px min-content;
  grid-auto-flow: dense;
  row-gap: 6px;
  margin: 0 auto;
}
/* display:contents 让行元素直接参与网格布局 */
.kb-layout,
.kb-nav-wrapper,
.kb-numpad-wrap,
.kb-numpad {
  display: contents;
}
.kb-row {
  display: flex;
  gap: 4px;
  align-items: center;
}
/* 主键盘行：第 1-6 行，第 1 列 */
.kb-layout > .kb-row {
  grid-column: 1;
}
.kb-key {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 44px;
  padding: 0 8px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-bottom: 3px solid #bfbfbf;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #333;
  cursor: default;
  user-select: none;
  transition: all 0.08s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  white-space: nowrap;
}
.kb-key.pressed {
  background: var(--primary-color, #1890ff);
  color: #fff;
  border-color: var(--primary-color, #1890ff);
  border-bottom-color: #096dd9;
  transform: translateY(2px);
  box-shadow: none;
}
.kb-key.chatter {
  background: #ff4d4f !important;
  color: #fff !important;
  border-color: #ff4d4f !important;
  animation: kb-chatter-flash 0.5s ease;
}
@keyframes kb-chatter-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* 键盘特殊宽度 */
.kb-key-wide { min-width: 70px; }
.kb-key-tab { min-width: 56px; }
.kb-key-caps { min-width: 60px; }
.kb-key-enter { min-width: 80px; }
.kb-key-shift { min-width: 80px; }
.kb-key-ctrl { min-width: 44px; font-size: 11px; }
.kb-key-space { min-width: 240px; }
.kb-key-spacer { width: 30px; }
.kb-key-spacer-sm { width: 14px; }
.kb-key-spacer-md { width: 20px; }

/* 导航 + 方向键：display:contents 让子元素直接参与外层网格 */
.kb-nav-wrapper {
  display: contents;
}
/* 导航区：第 1-3 行，第 3 列，间距与主键盘一致 */
.kb-nav-cluster {
  grid-column: 3;
  grid-row: 1 / 4;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 导航/方向键 统一按键宽度（以 Home 键为基准） */
.kb-nav-cluster .kb-key,
.kb-arrow-section .kb-key {
  min-width: 56px;
  padding: 0 4px;
}

/* 方向键区域：第 5-6 行，第 3 列，←↓→ 贴底对齐 Ctrl */
.kb-arrow-section {
  grid-column: 3;
  grid-row: 5 / 7;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.kb-arrow-top {
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
}
.kb-arrow-bottom {
  display: flex;
  gap: 4px;
}

/* 小键盘行：第 5 列，整体下移 1 行与主键盘数字行对齐 */
.kb-numpad > .kb-row {
  grid-column: 5;
}
.kb-numpad > .kb-row:nth-child(1) { grid-row: 2; }
.kb-numpad > .kb-row:nth-child(2) { grid-row: 3; }
.kb-numpad > .kb-row:nth-child(3) { grid-row: 4; }
.kb-numpad > .kb-row:nth-child(4) { grid-row: 5; }
.kb-numpad > .kb-row:nth-child(5) { grid-row: 6; }
/* 小键盘高键（+/Enter 跨两行 = 50+6+50 = 106px） */
.kb-key-numpad-tall {
  height: 106px !important;
  align-self: flex-start;
}
/* 小键盘宽键 (0)：2 个按键 + 1 个间距 = 44+4+44 = 92px */
.kb-key-numpad-wide {
  min-width: 92px !important;
}

/* NKRO 大号数字 */
.nkro-number {
  font-size: 72px;
  font-weight: bold;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #333;
  margin-bottom: 5px;
}
.nkro-active-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 36px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px dashed #d9d9d9;
}
.nkro-key-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  background: var(--primary-color, #1890ff);
  color: #fff;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
  animation: nkro-pop 0.15s ease;
}
@keyframes nkro-pop {
  0% { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

/* 按键延迟 - 目标键按钮 */
.kb-target-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kb-target-btn {
  padding: 8px 20px;
  background: #f0f5ff;
  border: 1px solid #d6e4ff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--primary-color, #1890ff);
  cursor: pointer;
  transition: all 0.2s;
}
.kb-target-btn:hover {
  background: #d6e4ff;
}
.kb-target-btn.active {
  background: var(--primary-color, #1890ff);
  color: #fff;
  border-color: var(--primary-color, #1890ff);
}

/* 键位冲突测试 */
.kb-ghost-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}
.kb-ghost-combo {
  background: #f8f9fa;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 15px;
  transition: border-color 0.3s;
}
.kb-ghost-combo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.kb-ghost-combo-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
.kb-ghost-status {
  font-size: 13px;
  font-weight: 500;
  color: #999;
}
.kb-ghost-keys {
  display: flex;
  gap: 6px;
}
.kb-ghost-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-bottom: 2px solid #bfbfbf;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #666;
  transition: all 0.15s;
}
.kb-ghost-key.active {
  background: #52c41a;
  color: #fff;
  border-color: #52c41a;
  border-bottom-color: #389e0d;
}

/* ========== 响应式 ========== */
@media (max-width: 768px) {
  .tool-hero {
    padding: 35px 0 30px;
  }

  .tool-hero h1 {
    font-size: 24px;
  }

  .tool-hero p {
    font-size: 14px;
  }

  .tab-btn {
    padding: 12px 16px;
    font-size: 13px;
  }

  .tab-label {
    display: none;
  }

  .tab-icon {
    font-size: 20px;
  }

  .test-panel {
    padding: 20px 0;
  }

  .test-card {
    padding: 20px 15px;
  }

  .mouse-diagram {
    width: 160px;
    height: 272px;
  }

  .btn-cards-grid {
    grid-template-columns: 1fr;
  }

  .mouse-visual {
    gap: 20px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-value {
    font-size: 22px;
  }

  .polling-rate-big {
    font-size: 48px;
  }

  .reaction-area {
    height: 260px;
  }

  .reaction-result-value {
    font-size: 48px;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .tool-cta {
    padding: 25px 15px;
  }

  .scroll-area {
    height: 200px;
  }

  /* 键盘测试响应式 - 768px */
  /* 网格行高: 44px, 间距: 5px, 高键: 44+5+44=93px */
  .kb-layout-full {
    grid-template-rows: repeat(6, 44px);
    grid-template-columns: min-content 16px min-content 16px min-content;
    row-gap: 5px;
  }
  .kb-key {
    height: 38px;
    min-width: 38px;
    font-size: 11px;
  }
  .kb-key-wide { min-width: 58px; }
  .kb-key-tab { min-width: 48px; }
  .kb-key-caps { min-width: 52px; }
  .kb-key-enter { min-width: 68px; }
  .kb-key-shift { min-width: 68px; }
  .kb-key-ctrl { min-width: 38px; font-size: 10px; }
  .kb-key-space { min-width: 180px; }
  .kb-nav-cluster .kb-key,
  .kb-arrow-section .kb-key {
    min-width: 48px;
  }
  .kb-nav-cluster {
    gap: 11px;
  }
  .kb-arrow-top {
    margin-bottom: 5px;
  }
  .kb-key-numpad-tall {
    height: 93px !important;
  }
  .kb-key-numpad-wide {
    min-width: 76px !important;
  }
  .nkro-number {
    font-size: 48px;
  }
  .kb-info-panel {
    gap: 10px;
  }
  .kb-info-item {
    min-width: 100px;
    padding: 10px 12px;
  }
  .kb-ghost-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .mouse-diagram {
    width: 200px;
    height: 280px;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .stat-box {
    padding: 12px 8px;
  }

  /* 键盘测试响应式 - 480px */
  /* 网格行高: 36px, 间距: 4px, 高键: 36+4+36=76px */
  .kb-layout-full {
    grid-template-rows: repeat(6, 36px);
    grid-template-columns: min-content 12px min-content 12px min-content;
    row-gap: 4px;
  }
  .kb-key {
    height: 32px;
    min-width: 32px;
    font-size: 10px;
    border-bottom-width: 2px;
  }
  .kb-key-wide { min-width: 48px; }
  .kb-key-tab { min-width: 40px; }
  .kb-key-caps { min-width: 44px; }
  .kb-key-enter { min-width: 56px; }
  .kb-key-shift { min-width: 52px; }
  .kb-key-ctrl { min-width: 32px; font-size: 9px; }
  .kb-key-space { min-width: 120px; }
  .kb-nav-cluster .kb-key,
  .kb-arrow-section .kb-key {
    min-width: 40px;
  }
  .kb-nav-cluster {
    gap: 8px;
  }
  .kb-arrow-top {
    margin-bottom: 4px;
  }
  .kb-key-numpad-tall {
    height: 76px !important;
  }
  .kb-key-numpad-wide {
    min-width: 64px !important;
  }
  .nkro-number {
    font-size: 40px;
  }
  .kb-info-item {
    min-width: 80px;
    padding: 8px 10px;
  }
  .kb-info-value {
    font-size: 15px;
  }
  .kb-ghost-grid {
    grid-template-columns: 1fr 1fr;
  }
  .kb-ghost-key {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
}