.login-page{background:var(--color-bg-primary);justify-content:center;align-items:center;min-height:100vh;display:flex;position:relative;overflow:hidden}.login-page:before{content:"";pointer-events:none;background:radial-gradient(circle,#0f766e0f 0%,#0000 70%);width:80%;height:80%;position:absolute;top:-40%;left:-20%}.login-page:after{content:"";pointer-events:none;background:radial-gradient(circle,#d4a8530a 0%,#0000 70%);width:60%;height:60%;position:absolute;bottom:-30%;right:-10%}.login-card{z-index:1;width:100%;max-width:560px;padding:var(--space-10);background:var(--color-bg-secondary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);position:relative}.login-logo{align-items:center;gap:var(--space-3);margin-bottom:var(--space-2);display:flex}.login-logo-icon{border-radius:var(--radius-lg);width:40px;height:40px;font-size:var(--text-xl);font-weight:var(--weight-bold);color:#fff;letter-spacing:-.02em;background:linear-gradient(145deg,#0f766e,#0d9488);justify-content:center;align-items:center;display:flex;box-shadow:0 4px 12px #0f766e59}.login-logo-text{font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--color-text-primary);letter-spacing:-.02em}.login-subtitle{font-size:var(--text-sm);color:var(--color-text-tertiary);margin-bottom:var(--space-8);line-height:var(--leading-relaxed)}.login-form{gap:var(--space-4);flex-direction:column;display:flex}.form-group{gap:var(--space-1);flex-direction:column;display:flex}.form-label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-secondary)}.form-input{padding:var(--space-3)var(--space-4);background:var(--color-bg-tertiary);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);color:var(--color-text-primary);font-size:var(--text-md);transition:all var(--duration-normal)var(--ease-default);outline:none}.form-input:hover{border-color:var(--color-border-strong)}.form-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-subtle)}.otp-input-group{gap:var(--space-2);justify-content:center;display:flex}.otp-input{text-align:center;width:48px;height:56px;font-family:var(--font-mono);font-size:var(--text-xl);font-weight:var(--weight-bold);background:var(--color-bg-tertiary);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);color:var(--color-text-primary);transition:all var(--duration-normal)var(--ease-default);outline:none}.otp-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-subtle)}.login-btn{padding:var(--space-3)var(--space-6);background:var(--color-accent);color:#fff;font-weight:var(--weight-semibold);font-size:var(--text-md);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--duration-normal)var(--ease-default);border:none;position:relative;overflow:hidden}.login-btn:hover:not(:disabled){background:var(--color-accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px #0f766e4d}.login-btn:active:not(:disabled){transform:translateY(0)}.login-btn:disabled{opacity:.6;cursor:not-allowed}.login-btn-loading{align-items:center;gap:var(--space-2);display:inline-flex}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.login-error{padding:var(--space-3)var(--space-4);background:var(--color-danger-subtle);color:var(--color-danger-text);border-radius:var(--radius-md);font-size:var(--text-sm);border:1px solid #ef444433}.login-success{padding:var(--space-3)var(--space-4);background:var(--color-success-subtle);color:var(--color-success-text);border-radius:var(--radius-md);font-size:var(--text-sm);border:1px solid #22c55e33}.login-back{align-items:center;gap:var(--space-1);font-size:var(--text-sm);color:var(--color-text-tertiary);cursor:pointer;margin-top:var(--space-2);transition:color var(--duration-fast)var(--ease-default);background:0 0;border:none;padding:0;display:inline-flex}.login-back:hover{color:var(--color-text-secondary)}.login-info{font-size:var(--text-xs);color:var(--color-text-tertiary);text-align:center;margin-top:var(--space-4)}.dev-role-picker{margin-top:var(--space-6);border-top:1px solid var(--color-border-subtle);padding-top:var(--space-5)}.dev-role-header{align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);display:flex}.dev-badge{text-transform:uppercase;letter-spacing:.08em;border-radius:var(--radius-full);background:var(--color-warning-subtle);color:var(--color-warning-text);border:1px solid #d4a8534d;padding:3px 8px;font-size:10px;font-weight:800}.dev-label{font-size:var(--text-xs);color:var(--color-text-tertiary);font-weight:var(--weight-medium)}.dev-role-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.dev-role-card{align-items:center;gap:var(--space-3);background:var(--color-bg-tertiary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--duration-fast)var(--ease-default);text-align:left;font-family:var(--font-sans);padding:10px 12px;display:flex}.dev-role-card:hover:not(:disabled){border-color:var(--color-accent);background:var(--color-accent-subtle);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.dev-role-card:active:not(:disabled){transform:translateY(0)}.dev-role-card:disabled{opacity:.5;cursor:wait}.dev-role-icon{background:var(--color-bg-primary);border-radius:var(--radius-md);flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:20px;display:flex}.dev-role-info{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.dev-role-name{font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--color-text-primary);line-height:1.2}.dev-role-title{color:var(--color-text-tertiary);font-size:10px;line-height:1.2}.dev-role-landing{color:var(--color-accent-text);font-size:10px;font-weight:var(--weight-medium);line-height:1.2}@media (max-width:600px){.dev-role-grid{grid-template-columns:1fr}.login-card{max-width:400px}}