:root {
    --login-ink: #10243a;
    --login-muted: #66768a;
    --login-line: #dbe4ec;
    --login-blue: #1371ba;
    --login-navy: #0b2b47;
}

* { box-sizing: border-box; }

body.login-page {
    min-height: 100vh;
    margin: 0;
    color: var(--login-ink);
    background: #edf3f7;
    font-family: "DM Sans", Arial, sans-serif;
}

.login-shell {
    display: flex;
    width: 100%;
    min-height: 100vh;
    max-width: none;
    margin: 0;
    background: #fff;
}

.login-panel { position: relative; }

.login-panel-brand {
    display: flex;
    width: 48%;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(145deg, #062844 0%, #0b568a 57%, #127db9 100%);
}

.brand-content {
    position: relative;
    z-index: 1;
    align-self: center;
    max-width: 500px;
    padding: 70px 11%;
}

.brand-glow { position: absolute; border-radius: 50%; opacity: .2; }
.brand-glow-one { width: 430px; height: 430px; top: -155px; right: -160px; background: #71d2ff; }
.brand-glow-two { width: 330px; height: 330px; bottom: -155px; left: -145px; border: 46px solid #66c4f0; }

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 72px;
    padding: 11px;
    margin-bottom: 38px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 18px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(5px);
}

.brand-mark img { width: 100%; height: 100%; object-fit: contain; /*filter: brightness(0) invert(1);*/ }
.brand-eyebrow, .form-eyebrow { margin: 0 0 11px; font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.brand-eyebrow { color: #a8e1ff; }
.brand-content h1, .form-intro h2 { margin: 0; font-family: Outfit, sans-serif; letter-spacing: -.035em; }
.brand-content h1 { max-width: 400px; font-size: clamp(38px, 4vw, 58px); line-height: 1.05; }
.brand-copy { max-width: 435px; margin: 22px 0 38px; color: rgba(255, 255, 255, .78); font-size: 16px; line-height: 1.65; }
.brand-features { display: grid; gap: 15px; }
.brand-features div { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.92); font-size: 14px; }
.brand-features i { width: 28px; height: 28px; padding-top: 7px; border-radius: 8px; color: #9ce0ff; background: rgba(255,255,255,.12); text-align: center; }
.brand-footer { position: absolute; z-index: 1; bottom: 28px; left: 11%; margin: 0; color: rgba(255,255,255,.5); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }

.login-panel-form { display: flex; width: 52%; background: #fff; }
.form-wrap { align-self: center; width: min(100%, 455px); margin: auto; padding: 52px 42px; }
.mobile-brand { display: none; }
.form-intro { margin-bottom: 36px; }
.form-eyebrow { color: var(--login-blue); }
.form-intro h2 { font-size: 34px; line-height: 1.15; }
.form-intro p:not(.form-eyebrow) { margin: 12px 0 0; color: var(--login-muted); font-size: 15px; line-height: 1.55; }
.field-group { position: relative; margin-bottom: 24px; }
.field-group label { display: block; margin-bottom: 8px; color: #23384d; font-size: 13px; font-weight: 600; }
.field-control { position: relative; }
.field-control > i { position: absolute; z-index: 1; top: 17px; left: 16px; color: #7b8a9a; font-size: 15px; }
.field-control input { width: 100%; height: 50px; padding: 0 45px; border: 1px solid var(--login-line); border-radius: 10px; outline: 0; color: var(--login-ink); background: #fbfcfd; font: 15px "DM Sans", sans-serif; transition: border-color .2s, box-shadow .2s, background .2s; }
.field-control input::placeholder { color: #a4b0bd; }
.field-control input:focus { border-color: #4d9bd3; background: #fff; box-shadow: 0 0 0 4px rgba(19,113,186,.1); }
.password-toggle { position: absolute; top: 0; right: 0; width: 50px; height: 50px; border: 0; color: #718197; background: transparent; cursor: pointer; }
.password-toggle:hover { color: var(--login-blue); }
.field-error { display: block; min-height: 17px; margin-top: 5px; color: #be3030; font-size: 12px; }
.login-error { display: flex; gap: 9px; align-items: flex-start; padding: 12px 14px; margin: -3px 0 20px; border: 1px solid #f1cdcf; border-radius: 9px; color: #9d3138; background: #fff4f4; font-size: 13px; }
.login-error i { margin-top: 2px; }
.sign-in-button { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 52px; padding: 0 19px 0 22px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #1371ba, #0b4e83); box-shadow: 0 10px 20px rgba(14,87,144,.23); font: 600 15px "DM Sans", sans-serif; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.sign-in-button:hover { box-shadow: 0 13px 25px rgba(14,87,144,.31); transform: translateY(-1px); }
.sign-in-button i { font-size: 13px; }
.form-footer { margin: 26px 0 0; color: #8b98a6; font-size: 12px; text-align: center; }
.login-link { color: var(--login-blue); font-weight: 700; text-decoration: none; }
.login-link:hover { color: #0b4e83; text-decoration: underline; }
.login-success { display: flex; gap: 9px; align-items: flex-start; padding: 12px 14px; margin: -3px 0 20px; border: 1px solid #bfe7d7; border-radius: 9px; color: #177356; background: #effaf5; font-size: 13px; }
.login-success i { margin-top: 2px; }

@media (max-width: 780px) {
    .login-shell { display: block; min-height: 100vh; }
    .login-panel-brand { display: none; }
    .login-panel-form { width: 100%; min-height: 100vh; }
    .form-wrap { padding: 42px 28px; }
    .mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 48px; color: var(--login-navy); font-family: Outfit, sans-serif; font-size: 20px; font-weight: 600; }
    .mobile-brand img { width: 42px; height: 42px; object-fit: contain; }
}

@media (max-width: 420px) {
    .form-wrap { padding: 32px 22px; }
    .form-intro h2 { font-size: 29px; }
    .mobile-brand { margin-bottom: 35px; }
}