.base-textfield {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 1px solid var(--c-border);
  border-radius: 0.5rem;
  background-color: var(--c-app-bg);
  color: var(--c-base-text);
  transition: border-color 0.15s ease;
}

.base-textfield:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px var(--c-brand-highlight);
}

.base-textfield::placeholder {
  color: var(--c-base-subtitle-text);
}

.base-textfield--error {
  border-color: #EF4444;
  animation: textfield-shake 0.3s ease;
}

@keyframes textfield-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}