.input {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.input::placeholder {
  color: rgba(111, 89, 81, 0.75);
}

.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 123, 84, 0.2);
}

.input.error {
  border-color: #e14f4f;
  background: rgba(225, 79, 79, 0.08);
  animation: shakeX 0.22s ease;
}

.input.success {
  border-color: #2d9e64;
  background: rgba(45, 158, 100, 0.08);
  animation: popIn 0.22s ease;
}

@keyframes shakeX {
  0% { transform: translateX(0); }
  30% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

@keyframes popIn {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

input:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent-cool);
  outline-offset: 2px;
}

::selection {
  color: #fff;
  background: #ff6e75;
}