/*
 * Customer access
 * A self-contained visual layer for the login and registration experience.
 */

.account-page:has(.account-auth-page) {
    min-height: 100svh;
    background: #eef2f5;
}

.account-auth-page {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 28px;
    background: #eef2f5;
}

.account-auth-page > .container {
    width: min(100%, 1500px);
    max-width: none;
    margin: 0;
}

.account-auth-shell {
    width: 100%;
    height: min(820px, calc(100svh - 56px));
    min-height: 720px;
    max-height: 820px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
    overflow: hidden;
    border: 1px solid #d9e2e8;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(15, 34, 48, .10);
}

/* Visual panel */
.account-auth-visual {
    position: relative;
    min-height: 0;
    overflow: hidden;
    background: #071e31;
}

.account-auth-visual > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% center;
}

.account-auth-visual::after {
    background: linear-gradient(90deg, rgba(3, 19, 32, .97) 0%, rgba(4, 26, 43, .90) 48%, rgba(4, 26, 43, .36) 100%);
}

.account-auth-brand {
    top: 42px;
    left: clamp(34px, 5vw, 74px);
    color: #fff;
    font-size: clamp(1.3rem, 1.8vw, 1.62rem);
}

.account-auth-brand i { background: #e21d2a; }
.account-auth-brand small { color: #fff; }
.auth-mobile-logo { display: none; }

.account-auth-visual-copy {
    top: 27%;
    right: auto;
    bottom: auto;
    left: clamp(34px, 6vw, 86px);
    max-width: 430px;
}

.account-auth-visual-copy .eyebrow { color: #f4b6bb; }

.account-auth-visual-copy h1 {
    max-width: 420px;
    color: #fff;
    font-size: clamp(2.55rem, 3.4vw, 3.65rem);
    line-height: 1.04;
    letter-spacing: -.055em;
}

.account-auth-visual-copy h1 span { color: #f13b44; }

.account-auth-visual-copy > p:not(.eyebrow) {
    max-width: 360px;
    color: #d5e0e8;
    font-size: .95rem;
    line-height: 1.62;
}

.account-auth-rule { background: #ef3540; }

.account-auth-services {
    right: 42px;
    bottom: 28px;
    left: 42px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 9px;
    background: rgba(4, 24, 40, .78);
    box-shadow: none;
}

.account-auth-services > span { color: #fff; }
.account-auth-services > span + span { border-left-color: rgba(255, 255, 255, .16); }
.account-auth-services .icon { color: #f04c54; }
.account-auth-services small { color: #b9c7d1; }

/* Form panel */
.account-auth-shell > .account-auth-card {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 54px 48px;
    border: 0;
    border-left: 1px solid #e2e8ec;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    scrollbar-width: thin;
    scrollbar-color: #c8d2d8 transparent;
}

.account-auth-shell > .account-auth-card::-webkit-scrollbar { width: 6px; }
.account-auth-shell > .account-auth-card::-webkit-scrollbar-thumb { border-radius: 12px; background: #c8d2d8; }

.account-auth-card .account-auth-tabs,
.account-auth-card .account-auth-pane,
.account-auth-card .account-auth-heading,
.account-auth-card .account-auth-form,
.account-auth-card .account-auth-switch {
    width: min(100%, 470px);
    max-width: none;
}

.account-auth-card .account-auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 0 auto 30px;
    padding: 4px;
    border: 1px solid #dce5ea;
    border-radius: 8px;
    background: #f4f7f8;
}

.account-auth-tabs button {
    min-height: 43px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #60717f;
    font: 800 .8rem/1 inherit;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.account-auth-tabs button:hover { color: #19384e; }
.account-auth-tabs button.active { background: #14344a; color: #fff; }

.account-auth-tabs button:focus-visible,
.account-auth-switch button:focus-visible {
    outline: 3px solid rgba(218, 26, 34, .2);
    outline-offset: 2px;
}

.account-auth-pane[hidden] { display: none !important; }

.account-auth-card .account-auth-heading {
    margin: 0 auto;
    text-align: center;
}

.account-auth-user-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 13px;
    color: #d51b25;
    border-color: #d51b25;
}

.account-auth-user-icon .icon { width: 29px; height: 29px; }
.account-auth-card .account-auth-heading .eyebrow { margin-bottom: 6px; color: #d51b25; }

.account-auth-card .account-auth-heading h2 {
    color: #102b3e;
    font-size: 1.72rem;
    letter-spacing: -.04em;
}

.account-auth-card .account-auth-heading p:not(.eyebrow) {
    margin: 7px 0 25px;
    color: #71818d;
    font-size: .82rem;
}

.account-auth-card .account-auth-form {
    display: grid;
    gap: 15px;
    margin: 0 auto;
}

.account-auth-form label {
    display: grid;
    gap: 7px;
    color: #263a49;
    font-size: .78rem;
    font-weight: 800;
}

.account-auth-form label small { color: #81909b; font-weight: 600; }

.account-auth-form input {
    width: 100%;
    max-width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 0 14px;
    border-color: #ccd8df;
    border-radius: 6px;
    background: #fff;
    color: #163044;
    font-size: .9rem;
}

.account-auth-form input:focus {
    border-color: #d51b25;
    box-shadow: 0 0 0 3px rgba(213, 27, 37, .10);
}

.account-auth-form .btn {
    width: 100%;
    min-height: 51px;
    margin-top: 4px;
    border-radius: 6px;
    background: #d51b25;
    box-shadow: none;
    font-size: .86rem;
}

.account-auth-form .btn:hover { background: #b9141d; transform: none; }

.account-auth-card .account-auth-switch {
    margin: 18px auto 0;
    color: #75848f;
    font-size: .78rem;
    text-align: center;
}

.account-auth-switch button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #ca1721;
    font: 800 inherit;
    cursor: pointer;
}

/* Compact variation for registration while preserving the same frame height. */
.account-auth-card[data-auth-active="register"] { padding-top: 34px; padding-bottom: 30px; }
.account-auth-card[data-auth-active="register"] .account-auth-tabs { margin-bottom: 18px; }
.account-auth-card[data-auth-active="register"] .account-auth-user-icon { width: 54px; height: 54px; margin-bottom: 8px; }
.account-auth-card[data-auth-active="register"] .account-auth-user-icon .icon { width: 27px; height: 27px; }
.account-auth-card[data-auth-active="register"] .account-auth-heading p:not(.eyebrow) { margin-bottom: 18px; }
.account-auth-card[data-auth-active="register"] .account-auth-form { gap: 10px; }
.account-auth-card[data-auth-active="register"] .account-auth-form input { height: 43px; }
.account-auth-card[data-auth-active="register"] .account-auth-form .btn { min-height: 47px; margin-top: 3px; }
.account-auth-card[data-auth-active="register"] .account-auth-switch { margin-top: 13px; }

@media (max-width: 1050px) and (min-width: 761px) {
    .account-auth-page { padding: 18px; }
    .account-auth-shell { grid-template-columns: 1fr 1fr; }
    .account-auth-shell > .account-auth-card { padding-right: 32px; padding-left: 32px; }
    .account-auth-visual-copy { left: 42px; }
    .account-auth-visual-copy h1 { font-size: 2.9rem; }
    .account-auth-services { right: 22px; left: 22px; }
    .account-auth-services small { display: none; }
}

@media (max-width: 760px) {
    .account-auth-page { display: block; min-height: 100svh; padding: 0; }
    .account-auth-page > .container { width: 100%; }
    .account-auth-shell { height: auto; min-height: 100svh; max-height: none; display: block; border: 0; border-radius: 0; box-shadow: none; }
    .account-auth-visual { height: 330px; min-height: 330px; }
    .account-auth-visual > img { object-position: 62% center; }
    .account-auth-brand { top: 25px; left: 24px; }
    .account-auth-visual-copy { top: 114px; left: 24px; max-width: 300px; }
    .account-auth-visual-copy h1 { font-size: 2.35rem; }
    .account-auth-visual-copy > p:not(.eyebrow) { max-width: 270px; margin-top: 10px; font-size: .84rem; }
    .account-auth-rule { margin-top: 13px; }
    .account-auth-services { right: 16px; bottom: 14px; left: 16px; }
    .account-auth-services > span { display: block; padding: 10px 7px; text-align: center; }
    .account-auth-services .icon { display: block; margin: 0 auto 4px; }
    .account-auth-services b { display: block; font-size: .64rem; }
    .account-auth-services small { display: none; }
    .account-auth-shell > .account-auth-card { height: auto; min-height: 0; overflow: visible; padding: 34px 22px 42px; border: 0; }
    .account-auth-card .account-auth-tabs,
    .account-auth-card .account-auth-pane,
    .account-auth-card .account-auth-heading,
    .account-auth-card .account-auth-form,
    .account-auth-card .account-auth-switch { width: 100%; }
    .account-auth-card .account-auth-tabs { margin-bottom: 25px; }
    .account-auth-card[data-auth-active="register"] { padding-top: 30px; padding-bottom: 40px; }
}

.account-auth-divider{display:flex;align-items:center;gap:12px;margin:19px 0 13px;color:#81909a;font-size:.72rem}.account-auth-divider:before,.account-auth-divider:after{height:1px;flex:1;content:'';background:#e2e8ec}.account-auth-divider span{display:grid;place-items:center;width:20px;height:20px;border:1px solid #e2e8ec;border-radius:50%;background:#fff}.account-google-login{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;color:#304756;border:1px solid #d5e0e6;border-radius:8px;background:#fff;font-size:.82rem;font-weight:800;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}.account-google-login>span{display:grid;place-items:center;width:22px;height:22px;color:#4285f4;border-radius:50%;background:#f5f8fb;font-size:.9rem;font-weight:900;font-family:Arial,sans-serif}.account-google-login:hover,.account-google-login:focus-visible{color:#203946;border-color:#aebfca;background:#f9fbfc;box-shadow:0 4px 12px rgba(16,43,62,.08);outline:0}

/* Corporate finish for customer sign-in and registration. */
.account-page:has(.account-auth-page),.account-auth-page{background:#f4f6f8}.account-auth-page{padding:24px}.account-auth-page>.container{width:min(100%,1400px)}.account-auth-shell{height:min(800px,calc(100svh - 48px));min-height:690px;max-height:800px;grid-template-columns:minmax(0,1.05fr) minmax(440px,.95fr);border-color:#d7e0e6;border-radius:12px;box-shadow:0 16px 40px rgba(16,42,59,.09)}.account-auth-visual::after{background:linear-gradient(90deg,rgba(3,23,38,.96),rgba(4,31,50,.86) 58%,rgba(4,31,50,.38))}.account-auth-brand{top:38px}.account-auth-visual-copy{top:29%;max-width:450px}.account-auth-visual-copy h1{font-size:clamp(2.45rem,3.2vw,3.45rem);line-height:1.02}.account-auth-services{right:48px;bottom:36px;left:48px;border-radius:6px;background:rgba(5,29,46,.82)}.account-auth-shell>.account-auth-card{align-items:flex-start;padding:60px clamp(48px,6vw,82px);border-left-color:#dbe3e8}.account-auth-card .account-auth-tabs,.account-auth-card .account-auth-pane,.account-auth-card .account-auth-heading,.account-auth-card .account-auth-form,.account-auth-card .account-auth-switch{width:min(100%,440px);margin-right:0;margin-left:0}.account-auth-card .account-auth-tabs{gap:0;margin-bottom:32px;padding:0;border:0;border-bottom:1px solid #dce5ea;border-radius:0;background:transparent}.account-auth-tabs button{position:relative;min-height:47px;border-radius:0;color:#758490;font-size:.76rem;letter-spacing:.01em}.account-auth-tabs button.active{color:#132f42;background:transparent}.account-auth-tabs button.active:after{position:absolute;right:10px;bottom:-1px;left:10px;height:3px;content:'';background:#df0715}.account-auth-card .account-auth-heading{text-align:left}.account-auth-user-icon{width:42px;height:42px;margin:0 0 16px;color:#d30715;border:1px solid #f0c5c9;border-radius:7px;background:#fff5f5}.account-auth-user-icon .icon{width:21px;height:21px}.account-auth-card .account-auth-heading .eyebrow{margin-bottom:5px;font-size:.64rem;letter-spacing:.13em}.account-auth-card .account-auth-heading h2{font-size:1.9rem;line-height:1.05}.account-auth-card .account-auth-heading p:not(.eyebrow){margin:8px 0 27px;font-size:.83rem;line-height:1.55}.account-auth-card .account-auth-form{gap:17px}.account-auth-form label{gap:8px;color:#516674;font-size:.65rem;letter-spacing:.07em;text-transform:uppercase}.account-auth-form input{height:52px;padding-inline:14px;border-color:#cbd8df;border-radius:5px;color:#163044;font-size:.88rem;font-weight:500;letter-spacing:0;text-transform:none}.account-auth-form input::placeholder{color:#a0afb8}.account-auth-form .btn{min-height:52px;margin-top:5px;border-radius:5px;background:#d80714;font-size:.8rem;letter-spacing:.01em}.account-auth-form .btn:hover{background:#b90611}.account-auth-card .account-auth-switch{margin-top:16px;font-size:.76rem;text-align:left}.account-auth-switch a,.account-auth-switch button{color:#c50914;font-weight:800}.account-auth-divider{width:min(100%,440px);margin:21px 0 14px}.account-google-login{width:min(100%,440px);min-height:50px;border-radius:5px;font-size:.79rem}.account-auth-card[data-auth-active="register"]{padding-top:42px;padding-bottom:36px}.account-auth-card[data-auth-active="register"] .account-auth-tabs{margin-bottom:24px}.account-auth-card[data-auth-active="register"] .account-auth-user-icon{width:42px;height:42px;margin-bottom:12px}.account-auth-card[data-auth-active="register"] .account-auth-form{gap:12px}.account-auth-card[data-auth-active="register"] .account-auth-form input{height:46px}.account-auth-card[data-auth-active="register"] .account-auth-form .btn{min-height:50px}
@media(max-width:900px){.account-auth-page{padding:18px}.account-auth-shell>.account-auth-card{padding:42px 40px}.account-auth-services{right:28px;left:28px}}
@media(max-width:900px){.account-auth-page{padding:0}.account-auth-shell>.account-auth-card{padding:32px 24px 42px;border-top:1px solid #dfe6ea;border-left:0}.account-auth-card .account-auth-tabs,.account-auth-card .account-auth-pane,.account-auth-card .account-auth-heading,.account-auth-card .account-auth-form,.account-auth-card .account-auth-switch,.account-auth-divider,.account-google-login{width:100%}.account-auth-card .account-auth-tabs{margin-bottom:27px}.account-auth-card[data-auth-active="register"]{padding-top:30px;padding-bottom:40px}}

/* Tablets and compact laptops use a stacked layout before the form becomes narrow. */
@media (max-width: 900px) {
    .account-auth-page { display: block; min-height: 100svh; padding: 18px; }
    .account-auth-page > .container { width: 100%; }
    .account-auth-shell {
        height: auto;
        min-height: 0;
        max-height: none;
        display: block;
        border-radius: 16px;
    }
    .account-auth-visual { height: 310px; min-height: 310px; }
    .account-auth-visual-copy { top: 112px; left: 42px; max-width: 330px; }
    .account-auth-visual-copy h1 { max-width: 330px; font-size: 2.65rem; }
    .account-auth-visual-copy > p:not(.eyebrow) { max-width: 305px; margin-top: 11px; }
    .account-auth-brand { top: 29px; left: 42px; }
    .account-auth-services { right: 28px; bottom: 22px; left: 28px; }
    .account-auth-services > span { padding: 11px 9px; }
    .account-auth-services small { display: none; }
    .account-auth-shell > .account-auth-card {
        height: auto;
        min-height: 0;
        overflow: visible;
        padding: 42px 32px 48px;
        border-top: 1px solid #e2e8ec;
        border-left: 0;
    }
    .account-auth-card .account-auth-tabs,
    .account-auth-card .account-auth-pane,
    .account-auth-card .account-auth-heading,
    .account-auth-card .account-auth-form,
    .account-auth-card .account-auth-switch { width: min(100%, 520px); }
    .account-auth-card[data-auth-active="register"] { padding-top: 34px; padding-bottom: 46px; }
}

@media (max-width: 520px) {
    .account-auth-page { padding: 0; }
    .account-auth-shell { border: 0; border-radius: 0; box-shadow: none; }
    .account-auth-visual { height: 292px; min-height: 292px; }
    .account-auth-brand { top: 23px; left: 23px; font-size: 1.25rem; }
    .account-auth-visual-copy { top: 102px; left: 23px; max-width: 285px; }
    .account-auth-visual-copy h1 { max-width: 280px; font-size: 2.25rem; }
    .account-auth-visual-copy > p:not(.eyebrow) { max-width: 260px; font-size: .88rem; }
    .account-auth-services { right: 14px; bottom: 13px; left: 14px; }
    .account-auth-services > span { display: block; padding: 9px 5px; text-align: center; }
    .account-auth-services .icon { display: block; margin: 0 auto 3px; }
    .account-auth-services b { display: block; font-size: .65rem; }
    .account-auth-shell > .account-auth-card { padding: 34px 22px 42px; }
    .account-auth-card .account-auth-tabs { margin-bottom: 24px; }
    .account-auth-tabs button { min-height: 44px; font-size: .82rem; }
    .account-auth-form input { height: 50px; font-size: 16px; }
    .account-auth-form .btn { min-height: 51px; }
    .account-auth-card[data-auth-active="register"] { padding-top: 30px; padding-bottom: 40px; }
    .account-auth-card[data-auth-active="register"] .account-auth-form input { height: 47px; font-size: 16px; }
}

/* Mobile keeps only the brand above the access form. */
@media (max-width: 900px) {
    .account-auth-visual {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible;
        padding: 26px 22px 14px;
        background: #fff;
    }
    .account-auth-visual > img,
    .account-auth-visual::after,
    .account-auth-visual-copy,
    .account-auth-services { display: none !important; }
    .account-auth-brand { display: none !important; }
    .auth-mobile-logo {
        display: grid;
        place-items: center;
        width: max-content;
        margin: 0 auto;
        color: #102b3e;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 1.48rem;
        font-weight: 700;
        letter-spacing: -.045em;
        line-height: 1;
        text-decoration: none;
    }
    .auth-mobile-logo strong { font: inherit; }
    .auth-mobile-logo strong span { color: #d81c27; }
    .auth-mobile-logo small {
        display: block;
        width: 100%;
        margin-top: 7px;
        padding-top: 5px;
        color: #c41721;
        border-top: 2px solid #d81c27;
        font-family: "Segoe UI", Arial, sans-serif;
        font-size: .43rem;
        font-weight: 800;
        letter-spacing: .17em;
        line-height: 1;
        text-align: center;
    }
    .account-auth-shell > .account-auth-card {
        padding-top: 28px;
        border-top: 1px solid #e2e8ec;
    }
}

/* Keep the desktop hierarchy aligned with the form, after legacy responsive rules. */
@media (min-width: 761px) {
    .account-auth-card .account-auth-heading { text-align: left !important; }
}

/* Centered, self-contained access form. The logo stays with the form instead of the image panel. */
.account-form-brand {
    position: static;
    display: grid;
    grid-template-columns: auto 9px auto;
    place-items: center;
    gap: 2px;
    width: max-content;
    margin: 0 auto 24px;
    padding-bottom: 0;
    color: #102b3e;
    font-size: 1.36rem;
    line-height: 1;
    text-decoration: none;
}

.account-form-brand i { width: 9px; height: 9px; background: #d80714; }
.account-form-brand small {
    position: static;
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 5px;
    padding-top: 5px;
    color: #c50914;
    border-top: 2px solid #d80714;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: .4rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-align: center;
}

/* Registration keeps both sign-up options adjacent and visible. */
.account-auth-card[data-auth-active="register"] .account-google-login { margin-top: 8px; }
.account-auth-card[data-auth-active="register"] .account-auth-switch { margin-top: 10px; }
.account-register-personal-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.account-register-personal-fields > label { min-width: 0; }

@media (min-width: 901px) {
    .account-auth-card[data-auth-active="register"] .account-register-form,
    .account-auth-card[data-auth-active="register"] .account-google-login,
    .account-auth-card[data-auth-active="register"] .account-auth-switch { width: min(100%, 500px); }
}

@media (max-width: 900px) {
    .account-register-personal-fields { grid-template-columns: 1fr; gap: 8px; }
}

@media (min-width: 901px) {
    .account-auth-page { padding: 16px; }
    .account-auth-shell {
        height: min(790px, calc(100svh - 32px));
        min-height: 0;
        max-height: none;
    }
    .account-auth-shell > .account-auth-card {
        align-items: center;
        justify-content: center;
        overflow: visible;
        padding: 24px 36px 18px !important;
    }
    .account-auth-card .account-auth-tabs,
    .account-auth-card .account-auth-pane,
    .account-auth-card .account-auth-heading,
    .account-auth-card .account-auth-form,
    .account-auth-card .account-auth-switch,
    .account-auth-divider,
    .account-google-login { width: min(100%, 430px); margin-right: auto; margin-left: auto; }
    .account-auth-card .account-auth-heading,
    .account-auth-card .account-auth-pane .account-auth-heading { text-align: center !important; }
    .account-auth-user-icon,
    .account-auth-card[data-auth-active="register"] .account-auth-user-icon { margin-right: auto; margin-left: auto; }
    .account-auth-card .account-auth-switch { text-align: center; }
    .account-auth-card[data-auth-active="register"] { padding-top: 18px !important; padding-bottom: 14px !important; }
    .account-auth-card[data-auth-active="register"] .account-form-brand { margin-bottom: 16px; }
    .account-auth-card[data-auth-active="register"] .account-auth-tabs { margin-bottom: 16px; }
    .account-auth-card[data-auth-active="register"] .account-auth-heading p:not(.eyebrow) { margin-bottom: 12px; }
    .account-auth-card[data-auth-active="register"] .account-auth-form { gap: 8px; }
    .account-auth-card[data-auth-active="register"] .account-auth-form input { height: 44px; }
    .account-auth-card[data-auth-active="register"] .account-auth-form .btn { min-height: 46px; }
    .account-auth-card[data-auth-active="register"] .account-auth-divider { margin: 10px auto 7px; }
    .account-auth-card[data-auth-active="register"] .account-google-login { min-height: 44px; }
    .account-auth-card[data-auth-active="register"] .account-auth-switch { margin-top: 8px; }
}

@media (min-width: 901px) and (max-height: 760px) {
    .account-form-brand { margin-bottom: 16px; transform: scale(.92); transform-origin: center top; }
    .account-auth-card .account-auth-tabs { margin-bottom: 18px; }
    .account-auth-card .account-auth-heading p:not(.eyebrow) { margin-bottom: 16px; }
    .account-auth-card[data-auth-active="register"] .account-auth-form { gap: 5px; }
    .account-auth-card[data-auth-active="register"] .account-auth-form label { gap: 4px; }
    .account-auth-card[data-auth-active="register"] .account-auth-form input { height: 40px; }
    .account-auth-card[data-auth-active="register"] .account-auth-form .btn { min-height: 43px; }
    .account-auth-card[data-auth-active="register"] .account-auth-user-icon { width: 38px; height: 38px; margin-bottom: 7px; }
    .account-auth-card[data-auth-active="register"] .account-auth-user-icon .icon { width: 20px; height: 20px; }
}

@media (max-width: 900px) {
    .account-form-brand { display: none; }
}

/* Keep both registration paths visible on common mobile viewports. */
@media (max-width: 900px) {
    .account-auth-card[data-auth-active="register"] .account-auth-tabs { margin-bottom: 16px; }
    .account-auth-card[data-auth-active="register"] .account-auth-user-icon { width: 36px; height: 36px; margin-bottom: 8px; }
    .account-auth-card[data-auth-active="register"] .account-auth-user-icon .icon { width: 18px; height: 18px; }
    .account-auth-card[data-auth-active="register"] .account-auth-heading h2 { font-size: 1.65rem; }
    .account-auth-card[data-auth-active="register"] .account-auth-heading p:not(.eyebrow) { margin: 5px 0 14px; }
    .account-auth-card[data-auth-active="register"] .account-auth-form { gap: 8px; }
    .account-auth-card[data-auth-active="register"] .account-auth-form label { gap: 5px; }
    .account-auth-card[data-auth-active="register"] .account-auth-form input { height: 43px; }
    .account-auth-card[data-auth-active="register"] .account-auth-form .btn { min-height: 46px; }
    .account-auth-card[data-auth-active="register"] .account-auth-switch { margin-top: 11px; }
    .account-auth-card[data-auth-active="register"] .account-auth-divider { margin: 12px 0 9px; }
    .account-auth-card[data-auth-active="register"] .account-google-login { min-height: 45px; }
}

.account-google-login.is-disabled { color: #82909a; background: #f7f9fa; cursor: not-allowed; opacity: .78; }
.account-google-login.is-disabled:hover { color: #82909a; border-color: #d5e0e6; background: #f7f9fa; box-shadow: none; }
.account-google-login small { color: #8a98a1; font-size: .64rem; font-weight: 700; }

/* The responsive WebP source keeps the original visual framing and PNG fallback. */
.account-auth-visual > picture { position: absolute; inset: 0; display: block; }
.account-auth-visual > picture > img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
@media (max-width: 900px) { .account-auth-visual > picture { display: none !important; } }

/* Official logo assets replace the legacy text-built marks. */
.account-auth-brand{position:absolute;z-index:2;top:38px;left:clamp(30px,6vw,88px);width:230px;padding:8px 10px;background:#fff;border-radius:4px}.account-auth-brand img{display:block;width:100%;height:auto}.account-form-brand{width:215px!important;margin:0 auto 18px!important}.account-form-brand img{display:block;width:100%;height:auto}.auth-mobile-logo img{display:block;width:200px;height:auto}@media(max-width:900px){.auth-mobile-logo{width:200px!important;font-size:0!important}.account-auth-brand{display:none!important}.account-form-brand{display:none!important}}

/* Treat narrow tablets and phones as one clean access layout. */
@media (max-width: 900px) {
    .account-auth-page { padding: 0; background: #fff; }
    .account-auth-shell { min-height: 100svh; border: 0; border-radius: 0; box-shadow: none; }
    .account-auth-shell > .account-auth-card {
        align-items: center;
        justify-content: flex-start;
        padding: 28px 22px 42px;
        background: #fff;
    }
    .account-auth-card .account-auth-heading { text-align: center !important; }
    .account-auth-card .account-auth-tabs,
    .account-auth-card .account-auth-pane,
    .account-auth-card .account-auth-heading,
    .account-auth-card .account-auth-form,
    .account-auth-card .account-auth-switch,
    .account-google-login { width: min(100%, 520px); }
}

/* Registration needs room for the required privacy choice on compact desktop screens. */
@media (min-width: 901px) and (max-height: 800px) {
    .account-auth-shell:has(.account-auth-card[data-auth-active="register"]) { height: auto; min-height: calc(100svh - 32px); max-height: none; overflow: visible; }
    .account-auth-card[data-auth-active="register"] { padding-top: 12px !important; padding-bottom: 14px !important; }
    .account-auth-card[data-auth-active="register"] .account-auth-form { gap: 6px; }
    .account-auth-card[data-auth-active="register"] .account-auth-form input { height: 40px; }
    .account-auth-card[data-auth-active="register"] .account-auth-form .btn { min-height: 43px; }
    .account-auth-card[data-auth-active="register"] .account-register-form .privacy-consent { margin: 0 0 5px; font-size: .60rem !important; line-height: 1.2; }
    .account-auth-card[data-auth-active="register"] .account-google-login { min-height: 40px; }
    .account-auth-card[data-auth-active="register"] .account-auth-switch { margin-top: 5px; }
}

@media (min-width: 901px) {
    .account-auth-card[data-auth-active="register"] .account-form-brand { margin-bottom: 10px !important; }
    .account-auth-card[data-auth-active="register"] .account-auth-tabs { margin-bottom: 10px; }
}