.kl-gate,
.kl-login,
.kl-subnav,
.kl-topbar {
    --kl-blue: var(--hk-blue, #0a2952);
    --kl-blue-pale: var(--hk-blue-pale, #e6ecf5);
    --kl-gold: var(--hk-gold, #e2a62a);
    --kl-gold-dark: var(--hk-gold-dark, #b8841f);
    --kl-white: var(--hk-white, #ffffff);
}

.kl-gate { padding: 4.5rem 0 5rem; }
.kl-gate__card {
    max-width: 560px;
    margin: 0 auto;
    padding: 2.75rem 2.25rem 2.25rem;
    text-align: center;
    background: var(--kl-white);
    border-top: 6px solid var(--kl-gold);
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(10, 41, 82, 0.14);
}
.kl-gate__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1rem;
    font-size: 1.35rem;
    color: var(--kl-gold);
    background: var(--kl-blue);
    border-radius: 50%;
}
.kl-gate__message { margin: 0 0 1.5rem; color: #3b4456; }
.kl-gate__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0; }

.kl-login { text-align: left; }
.kl-gate .kl-login { text-align: left; }
.kl-login__title { margin: 0 0 0.5rem; font-size: 1.75rem; text-align: center; color: var(--kl-blue); }
.kl-login__intro { margin: 0 0 1.5rem; text-align: center; color: #3b4456; }
.kl-login__error {
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    font-weight: 600;
    color: #b42318;
    background: #fde8e7;
    border-radius: 10px;
}
.kl-login__form { display: flex; flex-direction: column; gap: 0.35rem; }
.kl-login__label { margin-top: 0.5rem; font-weight: 600; color: var(--kl-blue); }
.kl-login__field {
    width: 100%;
    padding: 0.7rem 0.9rem;
    font: inherit;
    font-weight: 400;
    border: 1px solid rgba(10, 41, 82, 0.25);
    border-radius: 12px;
}
.kl-login__field:focus { outline: none; border-color: var(--kl-gold); box-shadow: 0 0 0 3px rgba(226, 166, 42, 0.25); }
.kl-login__check { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; color: #3b4456; }
.kl-login__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    font: inherit;
    font-weight: 700;
    color: var(--kl-blue);
    text-decoration: none;
    background: var(--kl-gold);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.kl-login__submit:hover { color: var(--kl-blue); background: var(--hk-gold-light, #f0c25a); }
.kl-login__forgot { align-self: center; margin-top: 0.75rem; font-size: 0.9rem; color: var(--kl-blue); }
.kl-login__logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    padding: 0.7rem 1.4rem;
    font-weight: 600;
    color: var(--kl-blue);
    text-decoration: none;
    background: var(--kl-blue-pale);
    border-radius: 999px;
}
.kl-login__logout:hover { color: var(--kl-blue); background: #d6dfee; }
.kl-login--welcome { text-align: center; }
.kl-login__pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0 0 0.5rem; padding: 0; list-style: none; }
.kl-login__pages a {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-weight: 600;
    color: var(--kl-blue);
    text-decoration: none;
    background: var(--kl-white);
    border: 1px solid rgba(10, 41, 82, 0.18);
    border-radius: 999px;
}
.kl-login__pages a:hover { background: var(--kl-gold); border-color: var(--kl-gold); }

.kl-subnav { margin: 0 0 2rem; }
.kl-subnav ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.kl-subnav a {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    font-weight: 600;
    color: var(--kl-blue);
    text-decoration: none;
    background: var(--kl-blue-pale);
    border-radius: 999px;
    transition: background 0.2s ease;
}
.kl-subnav a:hover { background: var(--kl-gold); color: var(--kl-blue); }
.kl-subnav a.is-active { color: var(--kl-white); background: var(--kl-blue); }

.kl-topbar { display: flex; align-items: center; gap: 0.9rem; }
.kl-topbar__name { opacity: 0.85; }
.kl-topbar__logout { font-weight: 600; }

@media (max-width: 575.98px) {
    .kl-gate__card { padding: 2.25rem 1.25rem 1.5rem; }
    .kl-topbar__name { display: none; }
}