.login-mode-toggle{display:flex;gap:0;margin-bottom:20px;background:#f1f5f9;border-radius:10px;padding:3px}
.login-mode-btn{flex:1;padding:8px 0;border:none;background:transparent;border-radius:8px;font-size:13px;font-weight:600;color:#6b7280;cursor:pointer;transition:all 0.2s}
.login-mode-btn.active{background:#fff;color:#1f2937;box-shadow:0 1px 3px rgba(0,0,0,0.08)}
.login-bodies{position:relative}
.login-form-body{transition:opacity 0.2s}
.login-qr-body{display:none;text-align:center}
.login-qr-body.active{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background:#fff}
.login-qr-body canvas{margin:0 auto;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,0.08)}
.login-qr-body .qr-hint{margin-top:14px;font-size:12px;color:#9ca3af;line-height:1.6}
.login-qr-body .qr-back{margin-top:20px;display:inline-flex;align-items:center;gap:6px;padding:8px 20px;border-radius:8px;border:1.5px solid #e5e7eb;background:#fff;font-size:13px;color:#6b7280;cursor:pointer;transition:all 0.2s}
.login-qr-body .qr-back:hover{border-color:#4361ee;color:#4361ee}
/* Dark mode */
[data-theme="dark"] .login-mode-toggle{background:#252836}
[data-theme="dark"] .login-mode-btn{color:#94a3b8}
[data-theme="dark"] .login-mode-btn.active{background:#1a1d2e;color:#e5e7eb;box-shadow:0 2px 8px rgba(0,0,0,.3)}
[data-theme="dark"] .login-qr-body{background:#1a1d2e}
[data-theme="dark"] .login-qr-body .qr-hint{color:#94a3b8}
[data-theme="dark"] .login-qr-body .qr-back{background:#252836;color:#94a3b8;border-color:#3a3d4e}
[data-theme="dark"] .login-qr-body .qr-back:hover{background:#2a2d3e;border-color:#4a4d5e}