@import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
:root {
    --login-primary: #1769ff;
    --login-primary-dark: #0f4ed8;
    --login-primary-soft: #edf4ff;
    --login-ink: #172033;
    --login-muted: #718096;
    --login-line: #dfe7f2;
    --login-bg: #f4f7fb;
    --login-danger: #dc3545;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
    body.login-page {
        margin: 0;
        min-height: 100vh;
        color: var(--login-ink);
        background: var(--login-bg);
        font-family: 'Prompt', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }

.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(420px, 1.05fr) minmax(460px, .95fr);
}

.login-visual {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: clamp(48px, 7vw, 100px);
    color: #fff;
    background: linear-gradient(140deg, #0d49cd 0%, #1769ff 55%, #56a1ff 100%);
}
.login-visual-content { position: relative; z-index: 3; max-width: 610px; }
.login-brand-mark {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 21px;
    color: #fff;
    background: rgba(255,255,255,.17);
    border: 1px solid rgba(255,255,255,.26);
    box-shadow: 0 18px 45px rgba(3, 42, 125, .22);
    backdrop-filter: blur(12px);
}
.login-brand-mark svg { width: 38px; height: 38px; }
.login-brand-copy { margin-top: 30px; }
.login-brand-eyebrow { display: block; font-size: .82rem; font-weight: 800; letter-spacing: .2em; opacity: .78; }
.login-brand-copy h1 { margin: 8px 0 15px; font-size: clamp(2.35rem, 4vw, 4rem); font-weight: 850; letter-spacing: -.05em; }
.login-brand-copy p { margin: 0; max-width: 520px; color: rgba(255,255,255,.82); font-size: 1.05rem; line-height: 1.8; }
.login-feature-card {
    width: min(100%, 480px);
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 46px;
    padding: 17px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(14px);
}
.login-feature-icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 15px; background: rgba(255,255,255,.18); }
.login-feature-icon svg { width: 27px; height: 27px; }
.login-feature-card strong, .login-feature-card span { display: block; }
.login-feature-card strong { font-size: .95rem; }
.login-feature-card span { margin-top: 3px; color: rgba(255,255,255,.72); font-size: .79rem; line-height: 1.5; }
.login-orb { position: absolute; border-radius: 50%; background: rgba(255,255,255,.1); }
.login-orb-one { width: 390px; height: 390px; right: -140px; top: -120px; }
.login-orb-two { width: 280px; height: 280px; left: -120px; bottom: -90px; }
.login-grid { position: absolute; inset: 0; opacity: .09; background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom right, #000, transparent 75%); }

.login-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 90px clamp(28px, 6vw, 92px) 50px;
    background: #fff;
}
.login-language { position: absolute; top: 28px; right: 34px; display: flex; align-items: center; gap: 8px; }
.login-language-icon { width: 35px; height: 35px; display: grid; place-items: center; color: var(--login-primary); background: var(--login-primary-soft); border-radius: 11px; }
.login-language-icon svg { width: 19px; height: 19px; }
.login-language form { display: block !important; }
.login-language .form-select {
    min-width: 108px;
    min-height: 42px;
    padding: .45rem 2rem .45rem .8rem;
    border-color: var(--login-line);
    border-radius: 11px;
    color: #45536b;
    font-weight: 700;
    box-shadow: none;
}
.login-language .form-select:focus { border-color: #8bb7ff; box-shadow: 0 0 0 .2rem rgba(23,105,255,.1); }
.login-form-wrap { width: min(100%, 470px); }
.login-mobile-brand { display: none; }
.login-heading { margin-bottom: 32px; }
.login-kicker { display: block; color: var(--login-primary); font-size: .82rem; font-weight: 800; letter-spacing: .04em; }
.login-heading h2 { margin: 7px 0 8px; color: var(--login-ink); font-size: 2.2rem; font-weight: 850; letter-spacing: -.045em; }
.login-heading p { margin: 0; color: var(--login-muted); line-height: 1.65; }
.login-form { display: grid; gap: 21px; }
.login-field { min-width: 0; }
.login-field .form-label { margin-bottom: 8px; color: #3d4a60; font-size: .86rem; font-weight: 750; }
.login-input-wrap { position: relative; }
.login-input-icon { position: absolute; z-index: 2; top: 50%; left: 16px; width: 22px; height: 22px; transform: translateY(-50%); color: #8b98ad; pointer-events: none; }
.login-input-icon svg { width: 100%; height: 100%; }
.login-input-wrap .form-control {
    min-height: 54px;
    padding: .75rem 3.2rem .75rem 3.15rem;
    border: 1px solid var(--login-line);
    border-radius: 14px;
    color: var(--login-ink);
    background: #fbfcfe;
    font-size: .95rem;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.login-input-wrap .form-control::placeholder { color: #a6b0c0; }
.login-input-wrap .form-control:focus { border-color: #75a9ff; background: #fff; box-shadow: 0 0 0 .24rem rgba(23,105,255,.1); }
.login-password-toggle { position: absolute; z-index: 3; top: 50%; right: 10px; width: 38px; height: 38px; display: grid; place-items: center; transform: translateY(-50%); color: #758197; background: transparent; border: 0; border-radius: 10px; }
.login-password-toggle:hover { color: var(--login-primary); background: var(--login-primary-soft); }
.login-password-toggle:focus-visible { outline: 3px solid rgba(23,105,255,.22); }
.login-password-toggle svg { width: 21px; height: 21px; }
.login-eye-hide { display: none; }
.login-password-toggle.is-visible .login-eye-show { display: none; }
.login-password-toggle.is-visible .login-eye-hide { display: block; }
.login-field-error { display: block; margin-top: 6px; font-size: .78rem; }
.login-options { display: flex; align-items: center; justify-content: space-between; }
.login-remember { min-height: 22px; }
.login-remember .form-check-input { width: 1.1rem; height: 1.1rem; margin-top: .14rem; border-color: #c9d3e1; }
.login-remember .form-check-input:checked { border-color: var(--login-primary); background-color: var(--login-primary); }
.login-remember .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(23,105,255,.12); }
.login-remember .form-check-label { color: #58667c; font-size: .86rem; }
.login-submit {
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--login-primary-dark), var(--login-primary));
    font-weight: 800;
    box-shadow: 0 13px 25px rgba(23,105,255,.23);
    transition: transform .18s ease, box-shadow .18s ease;
}
.login-submit svg { width: 21px; height: 21px; }
.login-submit:hover, .login-submit:focus { color: #fff; transform: translateY(-1px); box-shadow: 0 16px 30px rgba(23,105,255,.3); }
.login-submit:active { transform: translateY(0); }
.login-validation-summary:empty { display: none; }
.login-validation-summary {
    padding: 13px 15px;
    color: #b42335;
    background: #fff0f2;
    border: 1px solid #ffd5db;
    border-radius: 12px;
    font-size: .84rem;
}
.login-validation-summary ul { margin: 0; padding-left: 1.15rem; }
.login-footer { margin-top: 32px; padding-top: 22px; color: #98a3b4; border-top: 1px solid #edf1f6; text-align: center; font-size: .76rem; }

@media (max-width: 991.98px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-visual { display: none; }
    .login-panel { min-height: 100vh; padding: 110px 24px 38px; background: radial-gradient(circle at top right, #edf5ff, transparent 38%), #f7f9fc; }
    .login-form-wrap { padding: 30px; border: 1px solid #e6ebf2; border-radius: 24px; background: #fff; box-shadow: 0 18px 50px rgba(31,58,99,.1); }
    .login-mobile-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 27px; }
    .login-brand-mark-mobile { width: 46px; height: 46px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--login-primary-dark), var(--login-primary)); }
    .login-brand-mark-mobile svg { width: 27px; height: 27px; }
    .login-mobile-brand strong { font-size: 1.05rem; }
}

@media (max-width: 575.98px) {
    .login-panel { align-items: flex-start; padding: 88px 15px 22px; }
    .login-language { top: 18px; right: 18px; }
    .login-language-icon { display: none; }
    .login-language .form-select { min-width: 94px; }
    .login-form-wrap { padding: 24px 20px; border-radius: 20px; }
    .login-heading { margin-bottom: 26px; }
    .login-heading h2 { font-size: 1.85rem; }
    .login-input-wrap .form-control { min-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
    .login-submit, .login-input-wrap .form-control { transition: none; }
}