:root {
    --dz-brand: #2362A2;
    --dz-brand-600: #1f5790;
    --dz-brand-700: #184a7c;
    --dz-page-bg: #0E4488;
    --dz-card: #ffffff;
    --dz-text: #1f2933;
    --dz-muted: #6b7280;
    --dz-border: #d0d5dd;
    --dz-input-border: #8a93a3;
    --dz-banner-bg: #fde3e3;
    --dz-banner-border: #f3c6c6;
    --dz-alert: #c0392b;
    --dz-success: #2e7d32;
    --dz-warning: #8a5200;
    --dz-info: #2362A2;
    --dz-footer: #f4f9ff;
    --dz-radius: 12px;
    --dz-input-radius: 6px;
    --dz-shadow: 0 18px 50px rgba(13, 38, 66, 0.30);
    --dz-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c-7 0-11 7-11 7s4 7 11 7 11-7 11-7-4-7-11-7zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E");
    --eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 4.3 3.3 3 21 20.7 19.7 22l-3.2-3.2A11.6 11.6 0 0 1 12 19C5 19 1 12 1 12a18 18 0 0 1 4.4-5L2 4.3zM12 7a5 5 0 0 1 5 5c0 .5-.1 1-.2 1.5l-2.1-2.1A2 2 0 0 0 12 9.9L9.9 7.8C10.5 7.3 11.2 7 12 7z'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html, body { height: 100%; }

.dz-body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--dz-font);
    color: var(--dz-text);
    background-color: var(--dz-page-bg);
    background-image:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 2px, transparent 2px, transparent 90px),
        linear-gradient(135deg, #1E74C4 0%, #165CA8 30%, #0E4488 48%, #073462 72%, #002356 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}

.dz-body::before {
    content: "";
    position: fixed;
    inset: 10px;
    border: 2px solid #0D95F7;
    border-left: 0;
    border-radius: 2px;
    pointer-events: none;
}

.dz-shell {
    width: 100%;
    max-width: 460px;
}

.dz-card {
    background: var(--dz-card);
    border-radius: var(--dz-radius);
    box-shadow: var(--dz-shadow);
    padding: 36px 36px 28px;
}

.dz-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.dz-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--dz-brand);
}

.dz-locale { position: relative; flex-shrink: 0; }

.dz-locale-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--dz-brand);
    font: inherit;
    font-size: 13px;
    padding: 4px 2px;
}

.dz-caret {
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
}

.dz-locale-menu {
    position: absolute;
    inset-inline-end: 0;
    top: 100%;
    margin: 6px 0 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--dz-border);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(13, 38, 66, 0.18);
    min-width: 140px;
    z-index: 20;
}
.dz-locale-menu[hidden] { display: none; }

.dz-locale-item {
    display: block;
    padding: 8px 14px;
    color: var(--dz-text);
    text-decoration: none;
    font-size: 14px;
}
.dz-locale-item:hover { background: #f2f6fc; }
.dz-locale-item-active { color: var(--dz-brand); font-weight: 600; }

.dz-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--dz-banner-bg);
    border: 1px solid var(--dz-banner-border);
    border-radius: 8px;
    padding: 12px 12px 12px 14px;
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.4;
    color: #5b2b27;
}
.dz-banner-icon {
    flex-shrink: 0;
    width: 18px; height: 18px;
    margin-top: 1px;
    background: no-repeat center / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C0392B'%3E%3Cpath d='M12 2 1 21h22L12 2zm0 6c.6 0 1 .4 1 1v5a1 1 0 0 1-2 0V9c0-.6.4-1 1-1zm0 9.3a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'/%3E%3C/svg%3E");
}
.dz-banner-text { flex: 1; overflow-wrap: anywhere; }
.dz-banner-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #9a4b44;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

.dz-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.4;
    border: 1px solid transparent;
}
.dz-alert-icon {
    flex-shrink: 0;
    width: 18px; height: 18px;
    margin-top: 1px;
    background-color: currentColor;
    -webkit-mask: no-repeat center / contain var(--dz-alert-mask);
    mask: no-repeat center / contain var(--dz-alert-mask);
    --dz-alert-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
}
.dz-alert-error   { background: #fdecea; border-color: #f5c2c2; color: var(--dz-alert); }
.dz-alert-warning { background: #fff6e6; border-color: #f3d9a8; color: var(--dz-warning); }
.dz-alert-success { background: #eaf5ea; border-color: #bfe0bf; color: var(--dz-success); }
.dz-alert-info    { background: #eaf1fa; border-color: #c2d6ee; color: var(--dz-info); }
.dz-alert-text { flex: 1; color: var(--dz-text); overflow-wrap: anywhere; }

.dz-required-note { font-size: 12px; color: var(--dz-muted); margin-bottom: 12px; }
.dz-required { color: var(--dz-alert); }

.dz-form-group { margin-bottom: 16px; }

.dz-label {
    display: block;
    font-size: 13px;
    color: var(--dz-text);
    margin-bottom: 6px;
}

.dz-label-wrapper {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 6px;
    color: var(--dz-alert);
}
.dz-label-wrapper .dz-label { margin-bottom: 0; color: var(--dz-text); }

.dz-input {
    width: 100%;
    padding: 11px 12px;
    font: inherit;
    font-size: 14px;
    color: var(--dz-text);
    background: #fff;
    border: 1px solid var(--dz-input-border);
    border-radius: var(--dz-input-radius);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dz-input::placeholder { color: #98a2b3; }
.dz-input:focus {
    outline: none;
    border-color: var(--dz-brand);
    box-shadow: 0 0 0 3px rgba(35, 98, 162, 0.15);
}
.dz-input[aria-invalid="true"] {
    border-color: var(--dz-alert);
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

.dz-input-pass { position: relative; }
.dz-input-pass .dz-input { padding-inline-end: 42px; }
.dz-pass-toggle {
    position: absolute;
    top: 50%;
    inset-inline-end: 8px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    line-height: 0;
}
.dz-eye, .dz-eye-off {
    display: block;
    width: 20px; height: 20px;
    background-color: var(--dz-muted);
    -webkit-mask: no-repeat center / contain;
    mask: no-repeat center / contain;
}
.dz-eye { -webkit-mask-image: var(--eye); mask-image: var(--eye); }
.dz-eye-off { -webkit-mask-image: var(--eye-off); mask-image: var(--eye-off); }
.dz-pass-toggle.is-visible .dz-eye { -webkit-mask-image: var(--eye-off); mask-image: var(--eye-off); }

.dz-field-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 7px;
    font-size: 13px;
    color: var(--dz-alert);
    overflow-wrap: anywhere;
}
.dz-field-error::before {
    content: "";
    flex-shrink: 0;
    margin-top: 1px;
    width: 15px; height: 15px;
    background: no-repeat center / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C0392B'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm3.5 12.1-1.4 1.4L12 13.4l-2.1 2.1-1.4-1.4L10.6 12 8.5 9.9l1.4-1.4L12 10.6l2.1-2.1 1.4 1.4L13.4 12z'/%3E%3C/svg%3E");
}

.dz-form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 20px;
}
.dz-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--dz-text);
    cursor: pointer;
}
.dz-checkbox input {
    width: 16px; height: 16px;
    accent-color: var(--dz-brand);
    margin: 0;
}

.dz-link {
    color: var(--dz-brand);
    text-decoration: none;
    font-size: 13px;
}
.dz-link:hover { text-decoration: underline; }

.dz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 16px;
    border-radius: var(--dz-input-radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.dz-btn-block { width: 100%; }
.dz-btn-primary { background: var(--dz-brand); color: #fff; }
.dz-btn-primary:hover { background: var(--dz-brand-600); }
.dz-btn-primary:active { background: var(--dz-brand-700); }
.dz-btn-primary:disabled { opacity: .7; cursor: default; }

.dz-form-buttons { margin-top: 8px; }
.dz-btn-default { background: #fff; color: var(--dz-brand); border-color: var(--dz-border); }
.dz-btn-default:hover { background: #f2f6fc; }
.dz-btn-lg { font-size: 15px; }
.dz-helper { font-size: 12px; color: var(--dz-muted); margin-top: 6px; }
.dz-form-group-error .dz-input { border-color: var(--dz-alert); box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12); }
.dz-feedback-icon { display: none; }

.dz-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--dz-muted);
    font-size: 13px;
    margin: 24px 0 16px;
}
.dz-divider::before, .dz-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--dz-border);
}
.dz-divider span { padding: 0 12px; }

.dz-social { list-style: none; margin: 0; padding: 0; }
.dz-social li { margin-bottom: 12px; }
.dz-social-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 48px;
    border: 1px solid var(--dz-brand);
    border-radius: var(--dz-input-radius);
    background: #fff;
    color: var(--dz-brand);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background-color .15s ease;
}
.dz-social-btn:hover { background: #f2f6fc; }
.dz-social-icon {
    position: absolute;
    inset-inline-start: 16px;
    width: 20px; height: 20px;
    background: no-repeat center / contain;
}
.dz-social-name { color: var(--dz-brand); }

.dz-social-google {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E");
}
.dz-social-microsoft {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23'%3E%3Cpath fill='%23f25022' d='M1 1h10v10H1z'/%3E%3Cpath fill='%237fba00' d='M12 1h10v10H12z'/%3E%3Cpath fill='%2300a4ef' d='M1 12h10v10H1z'/%3E%3Cpath fill='%23ffb900' d='M12 12h10v10H12z'/%3E%3C/svg%3E");
}
.dz-social-facebook {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231877F2' d='M24 12a12 12 0 1 0-13.9 11.9v-8.4H7v-3.5h3.1V9.4c0-3 1.8-4.7 4.5-4.7 1.3 0 2.7.2 2.7.2v3h-1.5c-1.5 0-2 .9-2 1.9v2.2h3.4l-.5 3.5h-2.9v8.4A12 12 0 0 0 24 12z'/%3E%3C/svg%3E");
}
.dz-social-linkedin,
.dz-social-linkedin-openid-connect {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230A66C2' d='M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z'/%3E%3C/svg%3E");
}

.dz-info, .dz-register {
    text-align: center;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #eef0f3;
    font-size: 14px;
}
.dz-register .dz-link, .dz-info .dz-link { font-size: 14px; text-decoration: underline; }

@media (max-width: 480px) {
    .dz-card { padding: 28px 22px 22px; }
    .dz-title { font-size: 20px; }
}

.dz-btn:focus-visible,
.dz-btn-default:focus-visible,
.dz-social-btn:focus-visible,
.dz-link:focus-visible,
.dz-pass-toggle:focus-visible,
.dz-locale-toggle:focus-visible,
.dz-locale-item:focus-visible,
.dz-banner-close:focus-visible,
.dz-checkbox input:focus-visible {
    outline: 2px solid var(--dz-brand);
    outline-offset: 2px;
    border-radius: var(--dz-input-radius);
}

.dz-username {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--dz-muted);
}
.dz-username-name { font-weight: 600; color: var(--dz-text); overflow-wrap: anywhere; }

#kc-error-message, #kc-info-message {
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid #f5c2c2;
    background: #fdecea;
    color: var(--dz-text);
    overflow-wrap: anywhere;
}
#kc-info-message { background: #eaf1fa; border-color: #c2d6ee; }
#kc-error-message .instruction, #kc-info-message .instruction { margin: 0; }
#kc-error-message a, #kc-info-message a { color: var(--dz-brand); }

#kc-select-credential-form { display: flex; flex-direction: column; gap: 10px; }
#kc-select-credential-form button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: start;
    padding: 12px 14px;
    font: inherit;
    color: var(--dz-text);
    background: #fff;
    border: 1px solid var(--dz-input-border);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
#kc-select-credential-form button:hover {
    background: #f2f6fc;
    border-color: var(--dz-brand);
}
#kc-otp-login-form label[for^="kc-otp-credential-"] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--dz-input-border);
    border-radius: 8px;
    cursor: pointer;
}
#kc-otp-login-form input[type="radio"][name="selectedCredentialId"] {
    accent-color: var(--dz-brand);
    margin-inline-end: 6px;
}
#kc-otp-login-form input[type="radio"]:checked + label {
    border-color: var(--dz-brand);
    background: #f2f6fc;
}