.dpo-login-root { display:flex; height:100vh; font-family:'Inter',-apple-system,sans-serif; overflow:hidden; }

.dpo-login-brand {
    flex:0 0 45%;
    background:linear-gradient(135deg, #032845 0%, #021d35 60%, #032845 100%);
    display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
}
.dpo-login-brand::before {
    content:''; position:absolute; top:-40%; right:-20%; width:500px; height:500px;
    background:radial-gradient(circle, rgba(46,163,242,0.1) 0%, transparent 70%); border-radius:50%;
}
.dpo-login-brand-wrap { position:relative; z-index:2; text-align:center; padding:30px; color:#fff; }
.dpo-login-badge { margin-bottom:16px; }
.dpo-login-brand-title { font-size:32px; font-weight:800; line-height:1.2; margin-bottom:10px; }
.dpo-login-brand-tagline { font-size:14px; color:rgba(255,255,255,0.6); margin-bottom:20px; }
.dpo-login-pills { display:flex; flex-direction:column; gap:6px; align-items:center; margin-bottom:20px; }
.dpo-login-pill {
    display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.1); border-radius:20px; padding:6px 16px;
    font-size:12px; color:rgba(255,255,255,0.7); font-weight:500;
}
.dpo-login-partners { font-size:13px; margin-top:8px; }

.dpo-login-form-area {
    flex:1; display:flex; align-items:center; justify-content:center;
    background: #dce4f0;
    background-image: linear-gradient(160deg, #e8edf6 0%, #d5dded 40%, #c8d3e6 70%, #bfcce0 100%);
    padding:40px; position:relative;
}
.dpo-login-form-area::before {
    content:''; position:absolute; top:10%; right:5%; width:300px; height:300px;
    background:radial-gradient(circle, rgba(46,163,242,0.08) 0%, transparent 70%); border-radius:50%;
}
.dpo-login-form-wrap { width:100%; max-width:400px; position:relative; z-index:2; }
.dpo-login-form-card {
    background:#fff; border-radius:16px; padding:40px 36px;
    box-shadow:0 4px 24px rgba(0,0,0,0.06); border:1px solid #e2e8f0;
}
.dpo-login-form-header { margin-bottom:28px; }
.dpo-login-kicker {
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px;
    color:#2ea3f2; margin-bottom:8px;
}
.dpo-login-title { font-size:26px; font-weight:800; color:#0f2b46; margin-bottom:4px; }
.dpo-login-desc { font-size:14px; color:#64748b; }

.dpo-login-error {
    background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.2); border-radius:8px;
    padding:10px 14px; margin-bottom:16px; font-size:13px; color:#ef4444; font-weight:500;
}

.dpo-login-field { margin-bottom:18px; }
.dpo-login-field label {
    display:block; font-size:13px; font-weight:600; color:#0f2b46; margin-bottom:6px;
}
.dpo-login-field input {
    width:100%; padding:10px 14px; border:1px solid #e2e8f0; border-radius:8px;
    font-size:14px; color:#1e293b; background:#f8fafc; transition:border-color 0.2s;
    font-family:inherit; box-sizing:border-box;
}
.dpo-login-field input:focus { outline:none; border-color:#2ea3f2; background:#fff; }

.dpo-login-btn {
    width:100%; padding:12px; background:linear-gradient(135deg, #2ea3f2 0%, #0066cc 100%);
    color:#fff; border:none; border-radius:8px;
    font-size:15px; font-weight:700; cursor:pointer; transition:all 0.2s; font-family:inherit;
    display:flex; align-items:center; justify-content:center; gap:8px;
    box-shadow:0 4px 16px rgba(46,163,242,0.3);
}
.dpo-login-btn:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 6px 24px rgba(46,163,242,0.4); }
.dpo-login-btn:disabled { opacity:0.7; cursor:not-allowed; }

.dpo-login-spinner {
    width:18px; height:18px; border:2px solid rgba(255,255,255,0.3);
    border-top-color:#fff; border-radius:50%; animation:dpo-spin 0.6s linear infinite;
}
@keyframes dpo-spin { to { transform:rotate(360deg); } }

.dpo-login-footer { text-align:center; margin-top:20px; font-size:11px; color:#94a3b8; }

@media (max-width:768px) {
    .dpo-login-root { flex-direction:column; }
    .dpo-login-brand { flex:none; padding:40px 20px; }
    .dpo-login-brand-title { font-size:28px; }
    .dpo-login-form-area { padding:24px; }
    .dpo-login-form-card { padding:28px 24px; }
}