.field {
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 16px;
}

.field label {
    font-family: var(--font-d); font-size: 11px; font-weight: 700;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--chrome-dim);
}

.field-wrap {
    position: relative;
}

.field-icon {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--chrome-dim); font-size: 15px; pointer-events: none;
    transition: color .2s;
}

.field input {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-dim);
    border-radius: var(--r);
    padding: 11px 14px 11px 40px;
    color: var(--white); font-family: var(--font-b); font-size: 14px;
    outline: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
}

.field input::placeholder { color: var(--chrome-dim); }

.field input:focus {
    border-color: var(--red);
    background: rgba(200,16,46,0.04);
    box-shadow: 0 0 0 3px rgba(200,16,46,0.1);
}

.field input:focus + .field-icon,
.field-wrap:focus-within .field-icon { color: var(--red); }

/* ─── PASSWORD TOGGLE ───────────────────────────── */
.field-pw-toggle {
    position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: var(--chrome-dim); font-size: 14px; padding: 2px;
    transition: color .2s;
}

.field-pw-toggle:hover { color: var(--white); }

.field input.has-toggle { padding-right: 40px; }

/* ─── FIELD ERROR ───────────────────────────────── */
.field-error {
    font-size: 11px; color: var(--red-hot);
    display: none; margin-top: -2px;
}

.field.has-error input { border-color: var(--red-hot); }
.field.has-error .field-error { display: block; }

.field-row {
    display: flex; align-items: center; justify-content: flex-end;
    margin-top: -8px; margin-bottom: 16px;
}