html, body {
    height: 100%;
    margin: 0;
    background: var(--bg-sidebar);
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-wrap { width: 100%; max-width: 400px; padding: 20px; }
.login-logo { display: flex; align-items: center; gap: 14px; justify-content: center; margin-bottom: 28px; }
.login-logo-icon {
    width: 44px; height: 44px; background: var(--primary); border-radius: 12px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.login-title-text { font-size: 22px; font-weight: 800; color: #fff; }
.login-sub-text   { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 2px; }
.login-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--sh-md); padding: 28px;
}
.login-heading { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.login-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 22px; }
.lf-group { margin-bottom: 16px; }
.lf-label {
    display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; color: var(--text-muted); margin-bottom: 5px;
}
.lf-input {
    width: 100%; padding: 10px 12px; border: 1.5px solid var(--border-strong);
    border-radius: var(--r-sm); font-size: 14px; font-family: var(--font); color: var(--text);
    background: var(--bg-card); outline: none; transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.lf-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glass); }
.lf-error {
    background: var(--danger-light); border: 1px solid #fca5a5; color: var(--danger-dark);
    border-radius: var(--r-sm); padding: 9px 14px; font-size: 13px; margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
}
.lf-success {
    background: var(--success-light); border: 1px solid #a7f3d0; color: var(--success-dark);
    border-radius: var(--r-sm); padding: 12px 14px; font-size: 13px; line-height: 1.6;
    display: flex; align-items: flex-start; gap: 8px;
}
.lf-submit {
    width: 100%; padding: 11px; background: var(--primary); color: #fff; border: none;
    border-radius: var(--r-sm); font-size: 14px; font-weight: 700; cursor: pointer;
    font-family: var(--font); transition: background .15s, box-shadow .15s; margin-top: 4px;
}
.lf-submit:hover { background: var(--primary-dark, #4D237E); box-shadow: 0 4px 12px rgba(94, 43, 154,.3); }
.login-footer { text-align: center; margin-top: 20px; font-size: 11px; color: rgba(255,255,255,.35); }