.login-page {
    --login-split: 47%;
    display: grid;
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
    min-height: 100vh;
    min-height: 100svh;
    background: #f5f8f5;
}
.login-story {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    padding: clamp(30px, 4.5vw, 76px);
    background: radial-gradient(circle at 88% 17%, rgba(83, 163, 130, .22), transparent 32%), linear-gradient(145deg, #123f38, #0c302d 78%);
}
.login-story::before {
    position: absolute;
    z-index: -1;
    right: -160px;
    bottom: -190px;
    width: 490px;
    height: 490px;
    border: 1px solid rgba(179, 223, 195, .12);
    border-radius: 50%;
    box-shadow: 0 0 0 72px rgba(179, 223, 195, .035), 0 0 0 145px rgba(179, 223, 195, .025);
    content: '';
}
.login-story .brand { align-self: flex-start; gap: 13px; color: #f5faf4; font-size: 24px; }
.login-story .brand-icon { width: 45px; height: 45px; border-color: rgba(194, 227, 207, .52); border-radius: 13px; font-size: 29px; }
.login-story .brand small { margin-top: 2px; color: #a8d4b9; }
.login-story-content { width: 100%; max-width: 590px; margin: auto 0; }
.login-story .eyebrow { color: #a5d9bb; font-size: 10px; letter-spacing: .2em; }
.login-story h1 { max-width: 610px; font-size: clamp(42px, 4.25vw, 72px); line-height: 1.09; letter-spacing: -.055em; font-weight: 600; }
.login-story h1 > span { display: block; }
.login-story p { max-width: 440px; margin: 24px 0 0; color: #c6ddd0; font-size: 15px; line-height: 1.7; }
.login-pulse {
    display: grid;
    place-items: center;
    width: min(100%, 470px);
    height: 104px;
    margin-top: 38px;
    padding: 10px 16px;
    border: 1px solid rgba(177, 220, 194, .18);
    border-radius: 18px;
    background: linear-gradient(105deg, rgba(236, 255, 241, .07), rgba(236, 255, 241, .025));
}
.login-pulse svg { width: 100%; height: 80px; }
.login-pulse path { fill: none; stroke: #8ec6a4; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.login-story-footer { display: flex; align-items: center; gap: 8px; color: #a6cbb3; font-size: 11px; letter-spacing: .02em; }
.login-story-dot { width: 7px; height: 7px; border-radius: 50%; background: #76c69b; box-shadow: 0 0 0 4px rgba(118, 198, 155, .13); }

.login-form {
    min-width: 0;
    min-height: 100vh;
    min-height: 100svh;
    padding: 36px clamp(22px, 5vw, 86px);
    background: #f7faf8;
}
.login-form-inner {
    width: min(100%, 440px);
    max-width: none;
    padding: 0;
}
.login-form .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: #268267; font-size: 10px; letter-spacing: .16em; }
.login-form .eyebrow::before { width: 8px; height: 8px; border-radius: 50%; background: #37a07d; box-shadow: 0 0 0 4px #e4f2e9; content: ''; }
.login-form h2 { color: #173d34; font-size: clamp(26px, 2.15vw, 31px); line-height: 1.2; letter-spacing: -.035em; font-weight: 650; }
.login-form .login-intro { max-width: 390px; margin: 10px 0 30px; color: #667e72; font-size: 13px; line-height: 1.55; }
.login-form .notice { margin: 0 0 20px; border-radius: 11px; line-height: 1.5; }
#login-form { display: grid; gap: 20px; }
.login-form form label { margin: 0; }
.login-form .login-field { min-width: 0; }
.login-form .login-field,
.login-password-field > label { margin: 0; color: #34584b; font-size: 12px; font-weight: 650; }
.login-form input {
    min-height: 50px;
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid #d4e3d9;
    border-radius: 11px;
    background: #fff;
    color: #173d34;
    font-size: 14px;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.login-form input::placeholder { color: #94a99d; }
.login-form input:-webkit-autofill,
.login-form input:-webkit-autofill:hover,
.login-form input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: #173d34;
    caret-color: #173d34;
}
.login-form input:focus { outline: none; border-color: #2d9275; background: #fff; box-shadow: 0 0 0 4px rgba(45, 146, 117, .13); }
.login-form input[aria-invalid="true"] { border-color: #c66b5c; }
.login-password-field { min-width: 0; margin: 0; }
.login-password-control { position: relative; margin-top: 8px; }
.login-password-control input { margin-top: 0; padding-right: 58px; }
.login-password-control input::-ms-reveal { display: none; }
.login-password-control button {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: #eef6f1;
    color: #176d57;
    cursor: pointer;
}
.login-password-control button svg { width: 20px; height: 20px; }
.login-password-control button[aria-pressed="true"] .login-password-slash { display: none; }
.login-password-control button:hover { background: #e1f0e6; color: #145d49; }
.login-password-control button:focus-visible { outline: 2px solid #2d9275; outline-offset: 2px; }
.login-form .login-submit {
    position: relative;
    overflow: hidden;
    min-height: 52px;
    gap: 9px;
    border-radius: 11px;
    background: linear-gradient(110deg, #1a7864, #228e72);
    box-shadow: 0 9px 18px rgba(24, 112, 89, .18);
    font-size: 13px;
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.login-form .login-submit:hover:not(:disabled) { background: #176f5b; box-shadow: 0 12px 22px rgba(24, 112, 89, .23); transform: translateY(-1px); }
.login-form .login-submit:focus-visible { outline: 3px solid #8bd3ad; outline-offset: 3px; }
.login-submit-arrow { font-size: 17px; line-height: 0; }
.login-form .login-submit:disabled { cursor: wait; }
.login-form .login-help { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid #e7eee9; color: #728a7d; font-size: 11px; line-height: 1.6; }
.login-loading {
    position: fixed;
    z-index: 50;
    inset: 0;
    display: block;
    overflow: hidden;
    background: rgba(11, 48, 40, .16);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: login-screen-in .18s ease-out both;
}
.login-loading[hidden] { display: none; }
.login-loading-content {
    position: absolute;
    top: 50%;
    left: var(--login-split);
    width: min(380px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    isolation: isolate;
    text-align: center;
    transform: translate(-50%, -50%);
    animation: login-panel-in .28s ease-out both;
}
.login-loading-content::before {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: min(440px, 120vw);
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(239, 255, 246, .62) 0%, rgba(205, 242, 224, .2) 42%, transparent 72%);
    content: '';
    filter: blur(18px);
    opacity: .72;
    transform: translate(-50%, -50%);
}
.login-ecg {
    display: block;
    width: min(100%, 320px);
    max-height: 132px;
    margin: 0 auto;
    overflow: visible;
    filter: drop-shadow(0 5px 12px rgba(20, 116, 91, .18));
}
.login-ecg path { stroke-width: 18; }
.login-ecg-base { stroke: rgba(255, 255, 255, .68); }
.login-ecg-trace {
    stroke: #2e9878;
    stroke-dasharray: 14 100;
    stroke-dashoffset: 114;
    filter: drop-shadow(0 0 8px rgba(46, 152, 120, .55));
    animation: login-ecg-sweep .82s linear infinite;
}
.login-loading-copy { margin-top: 8px; text-shadow: 0 2px 14px rgba(255, 255, 255, .9); }
.login-loading-copy h3 { color: #17483c; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.login-loading-copy p { margin: 5px 0 0; color: #58766b; font-size: 12px; line-height: 1.5; }
@keyframes login-screen-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes login-panel-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes login-ecg-sweep { from { stroke-dashoffset: 114; } to { stroke-dashoffset: 0; } }

@media (max-width: 950px) {
    .login-page { --login-split: 42.5%; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
    .login-story { padding: 34px; }
    .login-story h1 { font-size: clamp(38px, 5vw, 55px); }
    .login-form { padding: 28px; }
}
@media (max-width: 900px) {
    .login-page {
        --login-split: 50%;
        --login-gutter: clamp(20px, 5vw, 32px);
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .login-story {
        flex: 0 0 auto;
        min-height: 0;
        gap: 22px;
        padding: max(22px, env(safe-area-inset-top)) max(var(--login-gutter), env(safe-area-inset-right)) 38px max(var(--login-gutter), env(safe-area-inset-left));
    }
    .login-story .brand {
        align-self: auto;
        width: min(100%, 440px);
        margin: 0 auto;
        gap: 12px;
        font-size: 23px;
    }
    .login-story .brand-icon { flex: 0 0 40px; width: 40px; height: 40px; font-size: 27px; border-radius: 12px; }
    .login-story .brand small { font-size: 7px; letter-spacing: .17em; }
    .login-story > div.login-story-content { max-width: 440px; margin: 0 auto; }
    .login-story .eyebrow { margin-bottom: 8px; font-size: 9px; letter-spacing: .13em; }
    .login-story h1 { max-width: 27ch; font-size: clamp(23px, 5.8vw, 30px); line-height: 1.18; letter-spacing: -.035em; }
    .login-story h1 > span { display: inline; }
    .login-story p, .login-pulse, .login-story-footer { display: none; }
    .login-form {
        position: relative;
        z-index: 1;
        flex: 1 0 auto;
        align-items: flex-start;
        min-height: 0;
        margin-top: -18px;
        padding: 26px max(var(--login-gutter), env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(var(--login-gutter), env(safe-area-inset-left));
        border-radius: 24px 24px 0 0;
    }
    .login-form-inner { margin: 0 auto; }
    .login-form > .login-form-inner > .eyebrow { display: none; }
    .login-form h2 { font-size: clamp(25px, 5.6vw, 30px); line-height: 1.2; }
    .login-form .login-intro { margin: 8px 0 22px; font-size: 14px; line-height: 1.5; }
    #login-form { gap: 18px; }
    .login-form .login-field,
    .login-password-field > label { font-size: 13px; line-height: 1.4; }
    .login-form input { min-width: 0; min-height: 52px; margin-top: 7px; font-size: 16px; font-weight: 400; }
    .login-password-control { margin-top: 7px; }
    .login-password-control input { margin-top: 0; }
    .login-form .login-submit { min-height: 52px; font-size: 15px; }
    .login-form .login-help { margin-top: 22px; padding-top: 16px; font-size: 12px; line-height: 1.5; }
    .login-loading-content { padding: 0; }
}
@media (max-width: 900px) and (max-height: 500px) {
    .login-story { padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: 32px; }
    .login-story-content { display: none; }
    .login-form { padding-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .login-form input, .login-form .login-submit { transition: none; }
    .login-loading, .login-loading-content, .login-ecg-trace { animation: none; }
    .login-ecg-trace { stroke-dasharray: none; stroke-dashoffset: 0; }
}