.representative-login {
    margin: 0;
    min-height: 100vh;
    background: #101d3e;
    color: #17294f;
}
.login-aurora { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.login-aurora span {
    position: absolute;
    width: 70vw;
    height: 70vw;
    border-radius: 50%;
    background: radial-gradient(circle, #315898 0%, transparent 67%);
    opacity: .65;
    top: -45%;
    right: -20%;
    animation: representative-drift 22s ease-in-out infinite alternate;
}
.login-aurora span:nth-child(2) {
    background: radial-gradient(circle, #23768d 0%, transparent 65%);
    top: 35%; right: 45%; animation-delay: -9s; animation-duration: 28s;
}
.login-aurora span:nth-child(3) {
    background: radial-gradient(circle, #565087 0%, transparent 65%);
    top: 40%; right: -25%; opacity: .35; animation-delay: -15s;
}
@keyframes representative-drift {
    to { transform: translate(14%, 20%) scale(1.18); }
}
.representative-shell {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
}
.representative-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 24px;
    width: 100%;
    max-width: 1240px;
}
.representative-panel {
    min-width: 0;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 24px 70px #050c2333;
    background: #f5f5f5;
    overflow: hidden;
}
.representative-banner { display: flex; align-items: center; padding: 10px; }
.representative-banner a { display: block; width: 100%; border-radius: 18px; }
.representative-banner img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 18px; }
.representative-form {
    padding: 36px clamp(24px, 3.4vw, 52px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
}
.representative-brand { text-align: center; margin-bottom: 26px; }
.representative-brand img { width: 180px; max-width: 65%; max-height: 85px; object-fit: contain; }
.representative-eyebrow { display: block; color: #64738a; font-size: 12px; margin-top: 20px; margin-bottom: 8px; }
.representative-brand h1 { color: #17294f; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.9; margin: 0; font-weight: 700; }
.representative-content { width: 100%; }
.representative-content h2 { font-size: 19px; }
.representative-content .mb-11 { margin-bottom: 24px !important; }
.representative-content .mb-10 { margin-bottom: 22px !important; }
.representative-content .mb-8 { margin-bottom: 20px !important; }
.representative-content .form-control {
    min-height: 52px; border: 1px solid #dce2ec; border-radius: 12px;
    background: #f8fafd !important; color: #17294f; font-size: 15px;
}
.representative-content .form-control:focus { border-color: #4268a8; box-shadow: 0 0 0 4px #4268a815; }
.representative-content input[type="tel"] { text-align: right; }
.representative-content .btn { min-height: 50px; border-radius: 12px; transition: background-color .2s, box-shadow .2s; }
.representative-content .btn-primary { background: #1c3467 !important; border: 1px solid #1c3467 !important; color: #fff !important; }
.representative-content .btn-primary:hover { background: #294b8a !important; }
.representative-content .representative-alternate { background: #fff !important; color: #203b70 !important; border: 1px solid #d4ddeb !important; }
.representative-content .representative-alternate:hover { background: #edf2fa !important; }
.representative-content .link-primary { color: #284d8c !important; text-underline-offset: 5px; }
.representative-login a:focus-visible, .representative-login button:focus-visible { outline: 3px solid #6495db; outline-offset: 4px; }
.error-validate-alert { font-size: 12px; margin: 6px 0; color: #b42338; }
.loader { display: none; width: 30px; aspect-ratio: 1; border-radius: 50%; border: 4px solid #dce4f2; border-right-color: #284d8c; animation: representative-spin 1s linear infinite; }
.loader.active { display: inline-block; }
@keyframes representative-spin { to { transform: rotate(1turn); } }
@media (max-width: 767px) {
    .representative-shell { padding: 24px 16px; }
    .representative-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 540px; }
    .representative-panel { border-radius: 20px; }
    .representative-form { padding: 30px 24px; }
    .representative-brand img { width: 160px; }
    .representative-brand h1 { font-size: 18px; }
    .login-aurora span { width: 130vw; height: 130vw; }
    .input-container { max-width: 100%; gap: 6px !important; }
    .input-container input { width: min(40px, 10vw) !important; height: 44px !important; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .login-aurora span { animation: none; }
    .representative-content .btn { transition: none; }
}