.login-page{background:radial-gradient(circle at top left, #0056a414, transparent 28%), radial-gradient(circle at bottom right, #33a94814, transparent 24%), var(--bg-primary);justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.login-card{border:1px solid var(--border);background:var(--bg-elevated);border-radius:16px;width:100%;max-width:420px;padding:32px;box-shadow:0 20px 50px #0f172a14}.login-brand{align-items:center;gap:16px;margin-bottom:28px;display:flex}.login-brand-logo{background:var(--brand-blue);color:#fff;border-radius:14px;justify-content:center;align-items:center;width:52px;height:52px;font-size:24px;font-weight:700;display:flex}.login-title{color:var(--text-primary);font-size:24px;font-weight:700}.login-subtitle{font-size:var(--font-size-sm);color:var(--text-muted);margin-top:4px}.login-form{flex-direction:column;gap:18px;display:flex}.login-field{flex-direction:column;gap:8px;display:flex}.login-label{font-size:var(--font-size-sm);color:var(--text-secondary);font-weight:600}.login-input-wrap{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);background:#fff;align-items:center;gap:10px;padding:0 12px;display:flex}.login-input-wrap:focus-within{border-color:var(--brand-blue);box-shadow:var(--focus-ring)}.login-input{color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;padding:12px 0}.login-error{border-radius:var(--radius-sm);color:#b91c1c;font-size:var(--font-size-sm);background:#fef2f2;border:1px solid #fecaca;padding:10px 12px}.login-submit{border-radius:var(--radius-sm);background:var(--brand-blue);color:#fff;width:100%;font-size:var(--font-size-sm);transition:background var(--transition-fast);justify-content:center;align-items:center;gap:8px;padding:12px 16px;font-weight:600;display:inline-flex}.login-submit:hover:not(:disabled){background:var(--brand-blue-hover)}.login-submit:disabled{opacity:.7;cursor:not-allowed}.login-spinner{animation:.8s linear infinite login-spin}.orBtn{text-align:center;color:#6c757d;font-size:.875rem}@keyframes login-spin{to{transform:rotate(360deg)}}