:root {
    --navy-950: #0b2d4c;
    --navy-900: #103a61;
    --navy-800: #184e7a;
    --blue-600: #3275a4;
    --gold-500: #d8ae47;
    --gold-300: #f0d47f;
    --green-500: #2e8b62;
    --ink: #102f51;
    --muted: #617792;
    --line: #d9e2ec;
    --surface: #ffffff;
    --surface-soft: #f5f8fb;
    --danger: #b42318;
    --danger-soft: #fff1f0;
    --shadow: 0 28px 70px rgba(13, 47, 80, .2);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    min-height: 100vh;
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 8% 12%, rgba(46,139,98,.12), transparent 28%),
        radial-gradient(circle at 90% 7%, rgba(216,174,71,.16), transparent 27%),
        #edf3f8;
}
button, input { font: inherit; }
a { color: inherit; }

.login-page { display: grid; place-items: center; padding: clamp(18px, 4vw, 52px); }
.login-shell {
    width: min(1120px, 100%);
    min-height: min(720px, calc(100vh - 70px));
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    overflow: hidden;
    border: 1px solid rgba(18, 61, 99, .11);
    border-radius: 26px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.login-brand-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: clamp(38px, 5vw, 68px);
    color: #fff;
    background:
        linear-gradient(145deg, rgba(7,40,68,.98), rgba(21,75,116,.96)),
        var(--navy-900);
}
.login-brand-panel::before {
    content: "";
    position: absolute;
    inset: auto -12% -34% auto;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
    box-shadow: 0 0 0 58px rgba(255,255,255,.025), 0 0 0 120px rgba(255,255,255,.018);
}
.login-brand-panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--green-500) 0 24%, var(--gold-500) 24% 54%, #2c6f9d 54% 82%, rgba(255,255,255,.85) 82%);
    opacity: .82;
}
.brand-glow { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.brand-glow-green { width: 270px; height: 270px; left: -145px; top: 30%; background: radial-gradient(circle, rgba(46,139,98,.24), transparent 68%); }
.brand-glow-gold { width: 310px; height: 310px; right: -160px; top: -150px; background: radial-gradient(circle, rgba(216,174,71,.25), transparent 68%); }

.login-brand-content, .brand-message, .brand-footer { position: relative; z-index: 1; }
.login-brand-content { display: flex; align-items: center; gap: 25px; }
.login-logo {
    width: clamp(92px, 9vw, 126px);
    height: clamp(116px, 11vw, 154px);
    object-fit: contain;
    filter: drop-shadow(0 14px 16px rgba(0,0,0,.25));
}
.brand-kicker, .brand-message > span, .login-form-header > span {
    display: block;
    color: var(--gold-300);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.login-brand-content h1 {
    max-width: 450px;
    margin: 7px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.15rem, 4vw, 3.45rem);
    line-height: .98;
    letter-spacing: -.03em;
}
.login-brand-content p { margin: 12px 0 0; color: rgba(230,240,249,.82); font-size: .96rem; }
.brand-message { max-width: 480px; margin: clamp(45px, 8vh, 90px) 0; }
.brand-message h2 { margin: 10px 0 14px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.05; }
.brand-message p { max-width: 440px; margin: 0; color: rgba(231,240,248,.82); font-size: 1.02rem; line-height: 1.72; }
.brand-footer { display: flex; align-items: center; gap: 12px; color: rgba(229,239,247,.78); font-size: .82rem; }
.brand-footer p { margin: 0; }
.security-icon { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(255,255,255,.07); color: var(--gold-300); font-weight: 900; }

.login-form-panel { position: relative; display: grid; place-items: center; padding: clamp(28px, 5vw, 68px); background: linear-gradient(180deg, #fff, #fbfcfe); }
.language-switch { position: absolute; top: 28px; right: 30px; display: flex; gap: 8px; }
.language-option {
    min-width: 54px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    text-decoration: none;
    font-size: .72rem;
    font-weight: 850;
    transition: .18s ease;
}
.language-option:hover, .language-option.is-active { border-color: rgba(24,78,122,.42); background: #eef5fa; color: var(--navy-900); transform: translateY(-1px); }
.language-option img { width: 21px; height: 14px; object-fit: cover; border-radius: 2px; }

.login-form-wrap { width: min(100%, 410px); }
.mobile-brand { display: none; }
.login-form-header { margin-bottom: 28px; }
.login-form-header > span { color: #ad8124; }
.login-form-header h2 { margin: 8px 0 9px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 3vw, 2.55rem); line-height: 1.08; color: var(--navy-900); }
.login-form-header p { margin: 0; color: var(--muted); line-height: 1.58; }
.login-alert { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 20px; padding: 13px 15px; border: 1px solid #f3c6c2; border-radius: 10px; background: var(--danger-soft); color: var(--danger); }
.login-alert > span { width: 23px; height: 23px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--danger); color: #fff; font-size: .75rem; font-weight: 900; }
.login-alert p { margin: 1px 0 0; font-size: .86rem; line-height: 1.45; }

.login-form { display: grid; }
.login-form label { margin: 0 0 8px; color: #365570; font-size: .8rem; font-weight: 800; }
.input-shell { position: relative; margin-bottom: 19px; }
.input-shell input {
    width: 100%;
    height: 52px;
    padding: 0 48px 0 46px;
    border: 1px solid #cdd9e5;
    border-radius: 10px;
    outline: none;
    background: #fff;
    color: var(--ink);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.input-shell input::placeholder { color: #95a5b6; }
.input-shell input:hover { border-color: #aabfd1; }
.input-shell input:focus { border-color: var(--blue-600); box-shadow: 0 0 0 4px rgba(50,117,164,.13); background: #fff; }
.field-icon { position: absolute; z-index: 1; left: 15px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: #7690a8; pointer-events: none; }
.field-icon svg, .password-toggle svg, .login-submit svg, .public-return svg { width: 100%; height: 100%; fill: currentColor; }
.password-toggle { position: absolute; right: 8px; top: 50%; width: 38px; height: 38px; display: grid; place-items: center; transform: translateY(-50%); border: 0; border-radius: 7px; background: transparent; color: #6e879e; cursor: pointer; }
.password-toggle:hover, .password-toggle:focus-visible { background: #edf3f8; color: var(--navy-900); outline: none; }
.password-toggle svg { width: 20px; height: 20px; }

.login-submit {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 3px;
    border: 1px solid var(--navy-800);
    border-radius: 9px;
    background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
    color: #fff;
    box-shadow: 0 12px 24px rgba(16,58,97,.18);
    font-weight: 850;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.login-submit:hover { transform: translateY(-1px); box-shadow: 0 16px 28px rgba(16,58,97,.24); filter: brightness(1.04); }
.login-submit:active { transform: translateY(0); }
.login-submit svg { width: 19px; height: 19px; }
.public-return { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; color: #667e96; text-decoration: none; font-size: .84rem; font-weight: 700; }
.public-return:hover { color: var(--navy-900); text-decoration: underline; text-underline-offset: 4px; }
.public-return svg { width: 17px; height: 17px; }

@media (max-width: 850px) {
    .login-page { padding: 0; background: #fff; }
    .login-shell { min-height: 100vh; grid-template-columns: 1fr; border: 0; border-radius: 0; box-shadow: none; }
    .login-brand-panel { display: none; }
    .login-form-panel { min-height: 100vh; padding: 92px 26px 42px; }
    .mobile-brand { display: flex; align-items: center; gap: 15px; margin-bottom: 34px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
    .mobile-brand img { width: 67px; height: 82px; object-fit: contain; filter: drop-shadow(0 7px 8px rgba(17,61,97,.17)); }
    .mobile-brand div { display: grid; }
    .mobile-brand strong { font-family: Georgia, "Times New Roman", serif; color: var(--navy-900); font-size: 1.45rem; line-height: 1.08; }
    .mobile-brand span { margin-top: 5px; color: #ad8124; font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
    .language-switch { top: 25px; right: 24px; }
}

@media (max-width: 480px) {
    .login-form-panel { place-items: start stretch; padding: 82px 20px 32px; }
    .login-form-wrap { width: 100%; }
    .login-form-header h2 { font-size: 2rem; }
    .mobile-brand strong { font-size: 1.24rem; }
    .mobile-brand img { width: 56px; height: 70px; }
    .language-switch { top: 20px; right: 18px; }
    .language-option { min-width: 49px; height: 34px; padding: 0 8px; }
}

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