html, body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ── Field ── */
.field-input {
    width: 100%;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
    font-family: 'Inter', sans-serif;
    background: #fff;
}
.field-input:focus { border-color: #111; }
.field-input::placeholder { color: #d1d5db; }
.field-input.error { border-color: #ef4444; }

label.fl {
    display: block;
    font-size: 10px; font-weight: 700;
    color: #9ca3af;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

/* ── Tab slider ── */
#loginTab, #registerTab { color: #9ca3af; }
#loginTab.active, #registerTab.active { color: #111; }

/* ── Password toggle ── */
.pwd-wrap { position: relative; }
.pwd-wrap .field-input { padding-right: 44px; }
.pwd-toggle {
    position: absolute; right: 14px; top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    cursor: pointer;
    transition: color 0.15s;
    background: none; border: none; padding: 0;
}
.pwd-toggle:hover { color: #111; }

/* ── Strength bar ── */
.strength-bar { display: flex; gap: 4px; margin-top: 8px; }
.strength-bar div { height: 3px; flex: 1; border-radius: 99px; background: #f0f0f0; transition: background 0.2s; }
.strength-label { font-size: 11px; color: #9ca3af; margin-top: 4px; }

/* ── Toast ── */
.toast {
    position: fixed; bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: #111; color: #fff;
    padding: 10px 20px; border-radius: 99px;
    font-size: 13px; font-weight: 500;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 100; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { background: #ef4444; }