.login-page {
    min-height: 100vh;
    height: auto;
    grid-template-columns: minmax(0, 1.05fr) minmax(440px, .95fr);
    background: #edf5f9;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.login-side {
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding: clamp(36px, 6vw, 96px);
    background: radial-gradient(circle at 12% 15%, #168cae 0, transparent 34%),
        linear-gradient(145deg, #062b46 8%, #075778 56%, #087d91 100%);
    isolation: isolate;
}

.login-side::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .25;
    background-image: linear-gradient(#ffffff18 1px, transparent 1px), linear-gradient(90deg, #ffffff18 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(130deg, transparent 25%, #000 100%);
}

.login-circle {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    border: 1px solid #ffffff35;
    background: linear-gradient(145deg, #ffffff32, #ffffff04 62%);
    box-shadow: 22px 30px 65px #001b3666, inset 12px 12px 32px #ffffff19, inset -16px -18px 30px #003e5666;
    pointer-events: none;
}

.login-circle-one { width: 350px; height: 350px; top: -135px; right: -100px; }
.login-circle-two { width: 230px; height: 230px; right: 8%; bottom: 7%; }
.login-circle-three { width: 115px; height: 115px; left: -46px; bottom: 19%; }

.login-side .hero { position: relative; z-index: 1; max-width: 610px; padding: 0; }
.login-hero-logo { width: 104px; height: 104px; max-height: none; border-radius: 24px; padding: 8px; box-shadow: 0 18px 40px #001a345e; }
.login-eyebrow { display: block; margin-top: 56px; color: #b9e4ec; font-size: 11px; font-weight: 800; letter-spacing: 2.4px; }
.login-side .hero h1 { margin: 13px 0 8px; font-size: clamp(56px, 6vw, 94px); font-weight: 800; line-height: 1; letter-spacing: -5px; }
.login-side .hero h1 em { color: #85e8df; }
.login-side .hero .login-tagline { margin: 0; color: #e7fbff; font-size: clamp(14px, 1.6vw, 19px); font-weight: 700; letter-spacing: 3px; line-height: 1.5; }
.login-side .hero .login-intro { max-width: 465px; margin: 36px 0 0; color: #c9e6ed; font-size: 15px; line-height: 1.8; }
.login-features { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.login-features .feature { display: flex; align-items: center; gap: 9px; margin: 0; padding: 10px 14px; border: 1px solid #ffffff26; border-radius: 999px; background: #ffffff12; color: #effcff; font-size: 12px; backdrop-filter: blur(8px); }
.login-features .feature span { flex: 0 0 22px; margin: 0; color: #063d52; background: #8ce9dd; font-weight: 800; }

.login-panel { position: relative; min-height: 100vh; padding: 48px; background: radial-gradient(circle at 86% 12%, #d8f5f4 0, transparent 30%), #f1f7fa; }
.login-panel::before { content: ""; position: absolute; width: 210px; height: 210px; right: 5%; bottom: 8%; border-radius: 50%; background: #d8edf3; filter: blur(2px); box-shadow: 0 22px 50px #417c9340; pointer-events: none; }
.login-card { position: relative; width: 100%; max-width: 490px; padding: clamp(28px, 4vw, 52px); border: 1px solid #fff; border-radius: 28px; background: #fffffff2; box-shadow: 0 30px 80px #0c3c5721, 0 3px 12px #0c3c5709; }
.login-card-brand { display: flex; align-items: center; gap: 14px; padding-bottom: 26px; border-bottom: 1px solid #e8eff3; }
.login-form-logo { width: 58px; height: 58px; max-height: none; margin: 0; padding: 4px; border: 1px solid #e5eef1; border-radius: 14px; background: #fff; }
.login-card-brand strong { display: block; color: #123b53; font-size: 16px; font-weight: 800; letter-spacing: .8px; }
.login-card-brand small { display: block; margin-top: 3px; color: #6a8998; font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.login-card-heading { margin: 32px 0 26px; }
.login-welcome { color: #078595; font-size: 10px; font-weight: 800; letter-spacing: 1.8px; }
.login-card h2 { margin: 10px 0 8px; color: #102f45; font-size: clamp(26px, 3vw, 34px); line-height: 1.2; letter-spacing: -1px; }
.login-card-heading p { margin: 0; color: #718997; line-height: 1.6; }
.login-card label { margin: 18px 0 8px; color: #28485a; font-size: 12px; font-weight: 700; }
.login-card input { height: 50px; padding: 12px 15px; border: 1px solid #dce8ee; border-radius: 12px; background: #f8fbfc; transition: border-color .2s, box-shadow .2s, background .2s; }
.login-card input:focus { border-color: #0b9da8; background: #fff; box-shadow: 0 0 0 4px #0b9da81c; }
.login-card input::placeholder { color: #9caeb8; }
.login-card .btn.block { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; margin-top: 18px; border-radius: 12px; }
.login-card .btn.primary { margin-top: 30px; background: linear-gradient(105deg, #075c80, #079aac); box-shadow: 0 12px 24px #087e9a34; transition: transform .2s, box-shadow .2s; }
.login-card .btn.primary:hover { transform: translateY(-2px); box-shadow: 0 17px 28px #087e9a40; }
.login-card .btn.ghost { color: #14647c; background: #f1f8fa; border-color: #d9edf1; }
.login-card .alert.error { border-radius: 12px; }
.login-passkey-note { min-height: 18px; margin-top: 6px; color: #a14f34; font-size: 12px; line-height: 1.5; }
.login-card #passkey-login:not([hidden]) { border-color: #b9d9e7; background: #f0f8fb; color: #125a78; }
.login-card #passkey-login:disabled { opacity: .65; cursor: wait; }
.login-card #passkey-login[hidden] { display: none !important; }

@media (max-width: 950px) {
    .login-page { grid-template-columns: 1fr; }
    .login-side { display: flex; min-height: 260px; padding: 30px 6%; }
    .login-side .hero { display: flex; align-items: center; flex-wrap: wrap; column-gap: 20px; }
    .login-hero-logo { width: 66px; height: 66px; border-radius: 16px; }
    .login-eyebrow { width: calc(100% - 86px); margin: 0; font-size: 10px; }
    .login-side .hero h1 { margin: 8px 0 2px; font-size: clamp(38px, 7vw, 60px); letter-spacing: -2px; }
    .login-side .hero .login-tagline { width: 100%; font-size: 12px; letter-spacing: 2px; }
    .login-side .hero .login-intro, .login-features { display: none; }
    .login-circle-one { width: 230px; height: 230px; top: -130px; }
    .login-circle-two { width: 130px; height: 130px; right: 4%; bottom: -50px; }
    .login-panel { min-height: auto; padding: 30px 20px 50px; }
}

@media (max-width: 540px) {
    .login-side { min-height: 205px; padding: 26px 22px; }
    .login-side .hero { gap: 0 14px; }
    .login-hero-logo { width: 56px; height: 56px; }
    .login-eyebrow { width: calc(100% - 70px); font-size: 8px; letter-spacing: 1.3px; }
    .login-side .hero h1 { font-size: 41px; }
    .login-side .hero .login-tagline { font-size: 10px; letter-spacing: 1.4px; }
    .login-panel { padding: 20px 14px 35px; }
    .login-card { padding: 27px 22px; border-radius: 22px; }
    .login-card-heading { margin: 25px 0 20px; }
    .login-card h2 { font-size: 27px; }
}