
    body.union-auth-form { background: linear-gradient(90deg, rgba(8, 50, 66, .88), rgba(8, 50, 66, .18)), url("../assets/branding/UNIONPICTUREFULLACTIVITY.png") center / cover fixed; }
    .union-auth-form .vertical-align-wrap { position: relative; min-height: calc(100vh - 154px); height: auto; }
    .union-auth-form .auth-main { position: relative; isolation: isolate; padding: 32px 24px; }
    .union-auth-form .auth-main::before { content: ""; display: block; position: absolute; inset: 0 auto 0 0; width: calc(5vw + 344px); max-width: 100%; height: 100%; background: #b8cbd3; z-index: -1; pointer-events: none; }
    .union-auth-form .auth-box { width: 480px; max-width: 100%; margin: 0 0 0 5vw; }
    .union-auth-form .auth-box > .card { padding: 0; border: 1px solid #d6e5e9; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 48px rgba(4, 35, 48, .22); }
    .union-auth-form .card .header { padding: 26px 28px 12px; border-top: 5px solid #00b6d5; background: linear-gradient(110deg, #effbfe, #f4f9e8); }
    .union-auth-form .card .header::after { content: ""; display: block; height: 3px; width: 72px; margin-top: 14px; background: linear-gradient(90deg, #a7cc31 65%, #f4da00 65%); border-radius: 3px; }
    .union-auth-form .card .body { padding: 20px 28px 28px; }
    .union-auth-form h1 { font-size: 26px; font-weight: 700; color: #103b4c; margin: 0 0 8px; }
    .union-auth-form .register-intro { color: #506772; font-size: 14px; margin-bottom: 6px; }
    .union-auth-form .form-group { margin-bottom: 16px; }
    .union-auth-form .control-label { display: block; color: #153f50; font-weight: 600; margin-bottom: 6px; }
    .union-auth-form .required-mark { color: #007c98; }
    .union-auth-form .field-note { display: block; margin-top: 5px; font-size: 12px; color: #526a76; }
    .union-auth-form .form-control { height: auto; min-height: 44px; font-size: 14px; padding: 10px 12px; border: 1px solid #b8ccd5; border-radius: 7px; color: #153f50; background: #fff; }
    .union-auth-form .form-control:focus { border-color: #008eab; box-shadow: 0 0 0 3px rgba(0, 182, 213, .16); }
    .union-auth-form input[type=file] { font-size: 13px; }
    .union-auth-form .password-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .union-auth-form .btn-primary { margin-top: 8px; min-height: 46px; border-radius: 7px; background: #007f9e; border-color: #007f9e; color: white; font-weight: 700; }
    .union-auth-form .btn-primary:hover { background: #006580; border-color: #006580; }
    .union-auth-form a { color: #007b98; font-weight: 600; }
    .union-auth-form .social-options { display: flex; justify-content: center; gap: 14px; }
    .union-auth-form .social-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid #b8ccd5; border-radius: 10px; background: #fff; font-size: 21px; text-decoration: none; }
    .union-auth-form .social-icon:hover { background: #effbfe; border-color: #008eab; }
    .union-auth-form :focus-visible { outline: 3px solid #a7cc31; outline-offset: 3px; }
    .union-auth-form .social-icon:disabled { opacity: .45; cursor: not-allowed; }
    .union-auth-form .field-error { display: block; color: #a52332; font-size: 13px; margin-top: 5px; }
    @media (max-width: 600px) {
        .union-auth-form .auth-main { padding: 20px 14px; }
        .union-auth-form .auth-main::before { width: 100%; }
        .union-auth-form .auth-box { margin: 0 auto; width: 100%; }
        .union-auth-form .card .header, .union-auth-form .card .body { padding-left: 20px; padding-right: 20px; }
        .union-auth-form .password-fields { grid-template-columns: 1fr; gap: 0; }
    }
.union-auth-form .auth-box { color: #153f50; font-size: 14px; }
.union-auth-form .btn-link { color: #007b98; }
.union-auth-form .alert { border-radius: 8px; font-size: 14px; }
.union-auth-form .auth-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.union-auth-form .verification-email { overflow-wrap: anywhere; }
.union-auth-form .verification-actions { display: grid; gap: 12px; }
.union-auth-form .verification-actions .verification-button { width: 100%; border-radius: 7px; }
.union-auth-form .verification-actions .verification-button-primary { background: #007f9e; border-color: #007f9e; color: #fff; }
.union-auth-form .verification-actions .verification-button-primary:hover { background: #006580; }
.union-auth-form .verification-steps { padding-left: 0; }
@media (max-width: 600px) {
    .union-auth-form .verification-steps li { flex-wrap: wrap; }
}
