:root {
    color-scheme: light;
    --login-navy: #132d4b;
    --login-blue: #1d4770;
    --login-gold: #c8a052;
    --login-ink: #182b40;
    --login-muted: #718096;
    --login-line: #dce3eb;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body.login-page {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 42px 22px 70px;
    color: var(--login-ink);
    font-family: Cairo, Arial, sans-serif;
    background:
        radial-gradient(ellipse at 15% 12%, rgba(200,160,82,.13), transparent 34%),
        radial-gradient(ellipse at 92% 84%, rgba(29,71,112,.1), transparent 33%),
        #f2f5f8;
}

.login-shell {
    width: min(100%, 960px);
    min-height: 535px;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(19,45,75,.08);
    border-radius: 22px;
    box-shadow: 0 28px 80px rgba(20,43,68,.15), 0 4px 12px rgba(20,43,68,.04);
}

.login-brand {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 46px 42px 38px;
    overflow: hidden;
    color: #fff;
    text-align: center;
    background: linear-gradient(145deg, var(--login-navy), #183c61 58%, #102741);
}

.login-brand::before, .login-brand::after {
    content: "";
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
}
.login-brand::before { width: 430px; height: 430px; top: -245px; right: -190px; }
.login-brand::after { width: 350px; height: 350px; bottom: -230px; left: -160px; }

.brand-emblem {
    width: 116px;
    height: 116px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border: 1px solid rgba(229,199,133,.58);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 8px rgba(255,255,255,.045), 0 14px 35px rgba(0,0,0,.2);
}
.brand-emblem img { width: 88px; height: 88px; object-fit: contain; }
.brand-kicker { color: #e7cc8e; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.login-brand h1 { margin: 13px 0 10px; font-size: clamp(25px, 3vw, 32px); line-height: 1.55; font-weight: 800; }
.login-brand > p { max-width: 335px; margin: 0; color: #d1dce7; font-size: 13px; line-height: 2; }
.brand-divider { width: min(100%, 245px); display: flex; align-items: center; gap: 12px; margin-top: 29px; color: #e6c77f; font-size: 12px; }
.brand-divider span { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(230,199,127,.75)); }
.brand-divider span:last-child { transform: rotate(180deg); }
.brand-footer { margin-top: 35px; color: #b9c8d7; font-size: 10px; }
.brand-footer i, .login-security i { display: inline-block; width: 3px; height: 3px; margin: 0 8px 3px; border-radius: 50%; background: var(--login-gold); }

.login-panel { display: flex; flex-direction: column; justify-content: center; padding: 62px clamp(32px, 6vw, 70px); }
.login-heading { margin-bottom: 30px; }
.login-mark { width: 45px; height: 45px; display: grid; place-items: center; margin-bottom: 21px; color: var(--login-blue); border-radius: 13px; background: #edf3f8; font-size: 25px; }
.form-kicker { color: #9a7a3b; font-size: 11px; font-weight: 700; }
.login-heading h2 { margin: 5px 0 3px; color: var(--login-navy); font-size: 25px; font-weight: 800; }
.login-heading p { margin: 0; color: var(--login-muted); font-size: 12px; }
.login-alert { display: flex; align-items: center; gap: 9px; margin: -12px 0 18px; padding: 10px 12px; color: #9d3434; border: 1px solid #f0cccc; border-radius: 9px; background: #fff6f5; font-size: 12px; }
.login-alert > span { width: 19px; height: 19px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; border-radius: 50%; background: #c34d4d; font-weight: 700; }
.login-form { display: grid; gap: 10px; }
.login-form label { margin-top: 5px; color: #344960; font-size: 12px; font-weight: 700; }
.input-wrap { position: relative; }
.input-wrap > span { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: #8192a4; font-size: 17px; }
.input-wrap input { width: 100%; height: 49px; padding: 0 43px 0 14px; color: var(--login-ink); border: 1px solid var(--login-line); border-radius: 9px; outline: none; background: #fff; font-size: 13px; transition: border-color .18s, box-shadow .18s; }
.input-wrap input::placeholder { color: #a2adba; }
.input-wrap input:focus { border-color: #53799f; box-shadow: 0 0 0 3px rgba(45,94,143,.12); }
.login-submit { height: 49px; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; color: #fff; border: 0; border-radius: 9px; background: linear-gradient(100deg, #183c61, #245783); box-shadow: 0 7px 16px rgba(24,60,97,.2); font-size: 13px; font-weight: 700; transition: transform .18s, box-shadow .18s; }
.login-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(24,60,97,.25); }
.login-submit span { color: #e7cb88; font-size: 19px; line-height: 1; }
.login-security { margin-top: 28px; padding-top: 16px; color: #7f8c9a; border-top: 1px solid #edf0f3; text-align: center; font-size: 10px; }
.security-dot { display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: #43a77c; box-shadow: 0 0 0 3px #e8f5ef; }
.login-page-footer { position: fixed; right: 15px; bottom: 14px; left: 15px; color: #8a97a5; text-align: center; font-size: 10px; }
.login-page-footer span { padding-right: 4px; }

@media (max-width: 700px) {
    body.login-page { padding: 18px 14px 55px; }
    .login-shell { max-width: 470px; min-height: 0; grid-template-columns: 1fr; border-radius: 17px; }
    .login-brand { padding: 26px 24px 24px; }
    .brand-emblem { width: 76px; height: 76px; margin-bottom: 12px; box-shadow: 0 0 0 5px rgba(255,255,255,.045); }
    .brand-emblem img { width: 59px; height: 59px; }
    .brand-kicker { font-size: 10px; }
    .login-brand h1 { margin: 6px 0; font-size: 21px; }
    .login-brand > p { display: none; }
    .brand-divider { margin-top: 12px; }
    .brand-footer { display: none; }
    .login-panel { padding: 29px 27px 27px; }
    .login-heading { margin-bottom: 20px; }
    .login-mark { width: 37px; height: 37px; margin-bottom: 12px; font-size: 20px; }
    .login-heading h2 { font-size: 22px; }
    .login-security { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }