/* 
 *
 * 视觉规格（与 Dart 对齐）：
 *   - 46px 高
 *   - 白底胶囊（半径 24）
 *   - 无边框
 *   - 10% 粉色阴影（accent #f759a8 @ 10%）
 *   - padding: 0 16 0 24
 *   - 文字深色 #333，占位符 #999
 */
.wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  width: 100%;
}

.label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.input {
  width: 100%;
  height: var(--auth-field-height);
  padding: 0 var(--spacing-lg) 0 var(--spacing-xxl);
  border: none;
  border-radius: var(--radius-xxxl);
  background: var(--color-auth-surface);
  color: var(--color-auth-text-primary);
  font-size: var(--font-size-md);
  box-shadow: 0 3px 5px var(--color-auth-input-shadow);
  outline: none;
  transition: box-shadow 0.15s ease;
}

.input::placeholder {
  color: var(--color-auth-input-placeholder);
}

.input:focus {
  box-shadow: 0 3px 5px var(--color-auth-input-shadow),
    0 0 0 2px var(--color-accent);
}

.invalid {
  box-shadow: 0 3px 5px rgba(255, 77, 79, 0.18),
    0 0 0 1px var(--color-error);
}

.invalid:focus {
  box-shadow: 0 3px 5px rgba(255, 77, 79, 0.18),
    0 0 0 2px var(--color-error);
}

.error {
  font-size: var(--font-size-sm);
  color: var(--color-error);
}
