/* Keyboard Checker — status pulse + scrollbar + responsive */

.kc-hud-status::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success); margin-right: 6px; vertical-align: middle;
  animation: kc-pulse 1.4s ease-in-out infinite;
}
@keyframes kc-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.kc-stage::-webkit-scrollbar { height: 8px; }
.kc-stage::-webkit-scrollbar-track { background: var(--bg); border-radius: 4px; }
.kc-stage::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.kc-stage::-webkit-scrollbar-thumb:hover { background: var(--primary); }

@media (max-width: 768px) {
  .kc-toolbar { padding: 10px 12px; gap: 6px; }
  .kc-pill { font-size: 0.7rem; padding: 6px 10px; }
  .kc-stage { padding: 16px; }
  .kc-hud { padding: 12px; gap: 10px; }
  .kc-hud-left, .kc-hud-right { gap: 14px; }
}