/* 通用数字键盘 — 替代系统输入法 */
/* 用 clamp() 流式缩放，自动适配所有屏幕尺寸 */

input.numpad-active {
  border-color: var(--module-color) !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}
input[data-numpad-ready] {
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

.numpad-panel {
  position: fixed;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  width: clamp(200px, 45vw, 420px);
  background: var(--surface);
  border: 1px solid var(--surface-dim);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  z-index: var(--z-modal);
  transition: transform 0.2s var(--ease-out);
  padding: clamp(6px, 1.2vw, 12px);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.numpad-panel.show {
  transform: translateX(-50%) translateY(0);
}
.numpad-panel.dragging {
  cursor: grabbing;
  transform: none;
}

.numpad-handle {
  text-align: center;
  padding: var(--space-1) 0;
  color: var(--text-muted);
  font-size: var(--text-caption);
  position: relative;
}
.numpad-handle::before {
  content: '⋮⋮';
  letter-spacing: 2px;
}
.numpad-close {
  position: absolute; top: 2px; right: 8px;
  font-size: 18px; color: var(--text-muted); cursor: pointer;
  padding: 4px 8px; line-height: 1;
}
.numpad-close:active { color: var(--text-primary); }

.numpad-display {
  text-align: center;
  font-size: clamp(18px, 3vw, 24px);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  padding: clamp(4px, 0.8vw, 8px) 0;
  min-height: clamp(28px, 4vw, 36px);
}
.numpad-display.numpad-placeholder {
  color: var(--text-muted);
}

.numpad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2px, 0.5vw, 8px);
}

.numpad-key {
  padding: clamp(8px, 1.8vw, 20px) 0;
  border-radius: var(--radius-sm);
  background: var(--bg-cream);
  color: var(--text-primary);
  font-size: clamp(14px, 2.2vw, 20px);
  font-weight: var(--weight-bold);
  font-family: var(--font-body);
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.numpad-key:active,
.numpad-key.pressed {
  background: var(--surface-dim);
}

.numpad-del {
  background: var(--wrong-bg);
  color: var(--wrong);
  font-size: clamp(12px, 1.8vw, 16px);
}
.numpad-ok {
  background: var(--module-color, var(--correct));
  color: var(--text-on-accent);
  font-size: clamp(12px, 1.8vw, 16px);
}
.numpad-ok:active,
.numpad-ok.pressed {
  opacity: 0.8;
  background: var(--module-color, var(--correct));
}