:root {
  --kpm-primary: #B91C1C;
  --kpm-primary-dark: #991B1B;
  --kpm-text: #1F2937;
  --kpm-muted: #6B7280;
  --kpm-bg: #F8FAFC;
  --kpm-surface: #FFFFFF;
  --kpm-border: #E5E7EB;
  --kpm-success: #15803D;
  --kpm-warning: #D97706;
  --kpm-danger: #DC2626;
  --font-system: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  font-family: var(--font-system);
  color: var(--kpm-text);
  background-color: var(--kpm-bg);
  min-height: 100vh;
}

.bg-kpm-primary {
  background-color: var(--kpm-primary) !important;
}

.text-kpm-primary {
  color: var(--kpm-primary) !important;
}

.btn-kpm-primary {
  background-color: var(--kpm-primary);
  border-color: var(--kpm-primary);
  color: #ffffff;
  font-weight: 600;
  min-height: 44px;
}

.btn-kpm-primary:hover,
.btn-kpm-primary:focus,
.btn-kpm-primary:active {
  background-color: var(--kpm-primary-dark);
  border-color: var(--kpm-primary-dark);
  color: #ffffff;
}

.card-kpm {
  background: var(--kpm-surface);
  border: 1px solid var(--kpm-border);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.timer-box {
  font-size: 1.25rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 10px;
  background: #E2E8F0;
  color: #1E293B;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.timer-box.timer-warning {
  background: #FEF3C7;
  color: var(--kpm-warning);
}

.timer-box.timer-danger {
  background: #FEE2E2;
  color: var(--kpm-danger);
  animation: pulse 1s infinite alternate;
}

@keyframes pulse {
  from { transform: scale(1); }
  to { transform: scale(1.04); }
}

/* Radio button style option cards */
.option-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 18px;
  border: 1.5px solid var(--kpm-border);
  background-color: #ffffff;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.15s ease-in-out;
  color: var(--kpm-text);
  min-height: 48px;
}

.option-btn:hover:not(:disabled) {
  border-color: var(--kpm-primary);
  background-color: #FEF2F2;
}

.option-btn.selected {
  border-color: var(--kpm-primary);
  background-color: #FEF2F2;
  box-shadow: 0 0 0 1px var(--kpm-primary);
  font-weight: 600;
}

.option-btn:disabled {
  cursor: not-allowed;
  opacity: 0.85;
}

.option-label {
  display: inline-block;
  font-weight: 700;
  margin-right: 8px;
  width: 24px;
}