.auth-shell {
    --ink:#202d36;
    --muted:#697780;
    --accent:#176b60;
    min-height:100svh;
    display:grid;
    grid-template-columns:1fr 1fr;
    background:#fafbf9;
    color:var(--ink);
    font-family:inherit;
}

.auth-shell * {
    box-sizing:border-box;
}

.auth-brand {
    position:relative;
    overflow:hidden;
    background:radial-gradient(ellipse at 10% 80%,#24695b 0,transparent 55%),linear-gradient(145deg,#112e2c,#163f39);
    color:#fff;
    display:flex;
    flex-direction:column;
    padding:52px clamp(32px,5vw,88px);
    min-height:100svh;
}

.auth-brand:before {
    content:"";
    position:absolute;
    width:620px;
    height:620px;
    border:1px solid #ffffff0d;
    border-radius:50%;
    left:-310px;
    top:12%;
    box-shadow:0 0 0 80px #ffffff03,0 0 0 160px #ffffff02;
    pointer-events:none;
}

.auth-logo {
    display:flex;
    align-items:center;
    gap:16px;
    color:#fff!important;
    position:relative;
    width:fit-content;
}

.auth-logo img {
    width:64px;
    height:64px;
    object-fit:contain;
    background:#fff;
    border-radius:18px;
    padding:8px;
}

.auth-logo>span {
    font-size:19px;
    font-weight:700;
}

.auth-logo small {
    display:block;
    font-weight:400;
    font-size:12px;
    color:#b7cec8;
    margin-top:7px;
}

.auth-brand-copy {
    position:relative;
    margin:auto 0;
    padding:76px 0;
}

.auth-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    letter-spacing:.2px;
    color:#d3e1d8;
}

.auth-eyebrow:before {
    content:"";
    height:1px;
    width:28px;
    background:#c4ad75;
}

.auth-brand h2 {
    color:#fff;
    font-size:clamp(34px,3.4vw,54px);
    line-height:1.7;
    font-weight:800;
    margin:22px 0;
}

.auth-brand h2 em {
    font-style:normal;
    color:#d4bd86;
}

.auth-brand-copy>p {
    max-width:390px;
    color:#bbd0cb;
    font-size:15px;
    line-height:2.2;
}

.auth-workflow {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:54px;
    border-top:1px solid #ffffff21;
    padding-top:26px;
}

.auth-workflow span {
    color:#d4bd86;
    font-size:12px;
}

.auth-workflow strong {
    display:block;
    color:#edf4f1;
    font-size:13px;
    margin:14px 0 8px;
}

.auth-workflow small {
    color:#aac2bb;
    font-size:11px;
}

.auth-brand-footer {
    display:flex;
    align-items:center;
    gap:9px;
    color:#adc4bc;
    font-size:11px;
    position:relative;
}

.auth-status-dot {
    width:6px;
    height:6px;
    background:#c9b479;
    border-radius:50%;
}

.auth-brand-latin {
    margin-inline-start:auto;
    letter-spacing:4px;
    font-size:11px;
    color:#e2eae5;
}

.auth-main {
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:42px clamp(24px,5vw,88px) 24px;
    background:radial-gradient(ellipse at 100% 0,#eef2ec,transparent 60%);
}

.auth-main-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#78847d;
    font-size:11px;
    gap:12px;
}

.auth-language {
    border:1px solid #dce3dc;
    padding:7px 12px;
    border-radius:7px;
    color:#4d6057;
    display:flex;
    gap:12px;
}

.auth-form-container {
    width:100%;
    max-width:410px;
    margin:auto;
    padding:48px 0;
}

.auth-symbol {
    display:flex;
    align-items:center;
    justify-content:center;
    background:#e8f0e9;
    color:#216b5b;
    border:1px solid #dbe7dd;
    width:52px;
    height:52px;
    border-radius:16px;
    font-size:25px;
    margin-bottom:25px;
}

.auth-kicker {
    color:#7b877e;
    font-size:12px;
    display:block;
    margin-bottom:9px;
}

.auth-title {
    color:#202f2a!important;
    font-weight:800;
    font-size:clamp(23px,2.1vw,31px);
    line-height:1.65;
    margin:0 0 10px;
}

.auth-description {
    color:#758077;
    font-size:13px;
    line-height:2.1;
    margin-bottom:30px;
}

.auth-field {
    margin-bottom:22px;
}

.auth-field>label {
    display:block;
    font-size:12px;
    font-weight:600;
    color:#34483c;
    margin-bottom:10px;
}

.auth-field input:not([type=checkbox]) {
    width:100%;
    height:52px;
    padding:0 15px;
    background:#fff;
    color:#23372d;
    border:1px solid #dce3dc;
    border-radius:10px;
    font-family:inherit;
    font-size:13px;
    transition:border-color .15s,box-shadow .15s;
}

.auth-field input::placeholder {
    color:#929d96;
    font-size:12px;
}

.auth-field input:focus {
    outline:0;
    border-color:#438577;
    box-shadow:0 0 0 3px #23755e12;
}

.auth-password {
    position:relative;
}

.auth-password input {
    padding-inline-end:70px!important;
}

.auth-password button {
    position:absolute;
    inset-inline-end:9px;
    top:8px;
    bottom:8px;
    border:0;
    background:transparent;
    color:#4f7566;
    padding:0 10px;
    font-size:11px;
    border-radius:6px;
    cursor:pointer;
}

.auth-options {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    font-size:11px;
    margin:3px 0 29px;
}

.auth-remember {
    display:flex;
    gap:8px;
    align-items:center;
    color:#69796e;
    cursor:pointer;
}

.auth-remember input {
    width:16px;
    height:16px;
    accent-color:#176b60;
}

.auth-shell a {
    color:#206f5e;
    text-decoration:none;
}

.auth-shell a:hover {
    text-decoration:underline;
}

.auth-submit {
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    background:#1b685a;
    color:white;
    border:0;
    border-radius:10px;
    min-height:52px;
    padding:14px 20px;
    font-family:inherit;
    font-weight:600;
    font-size:13px;
    box-shadow:0 6px 14px #195d4914;
    cursor:pointer;
    transition:background .15s,transform .15s;
}

.auth-submit:hover {
    background:#115344;
    transform:translateY(-1px);
}

.auth-submit:disabled {
    opacity:.65;
    cursor:wait;
    transform:none;
}

.auth-help {
    border-top:1px solid #e2e7df;
    margin-top:30px;
    padding-top:23px;
    font-size:11px;
    color:#7b877d;
    text-align:center;
    line-height:2.2;
}

.auth-help>span {
    color:#8d9b8e;
    margin-inline-end:6px;
}

.auth-footer {
    color:#929d94;
    font-size:10px;
    text-align:center;
    line-height:2;
}

.auth-footer span {
    margin:0 9px;
    color:#b9c2b8;
}

.auth-back {
    font-size:12px;
    display:inline-block;
    margin-bottom:25px;
}

.auth-steps {
    display:flex;
    list-style:none;
    padding:0;
    margin:0 0 28px;
    gap:12px;
    font-size:10px;
    color:#8c978f;
}

.auth-steps li {
    padding-bottom:10px;
    border-bottom:2px solid #e1e7df;
    flex:1;
}

.auth-steps [aria-current=step] {
    color:#1b685a;
    border-color:#1b685a;
    font-weight:700;
}

.auth-steps .is-complete {
    color:#587d6b;
    border-color:#9ebead;
}

.auth-field small {
    display:block;
    margin-top:8px;
    color:#7e8a80;
    font-size:11px;
    line-height:1.9;
}

.auth-otp {
    text-align:center;
    font-size:24px!important;
    letter-spacing:10px;
}

.auth-otp::placeholder {
    letter-spacing:2px;
}

.auth-alert {
    color:#a43636;
    background:#fff1ee;
    border:1px solid #efd2cd;
    border-radius:10px;
    padding:12px 15px;
    margin-bottom:22px;
    font-size:12px;
    line-height:2;
}

.auth-alert ul {
    margin:0;
    padding-inline-start:18px;
}

.auth-alert-success {
    color:#226341;
    background:#eaf5ec;
    border-color:#cce4d0;
}

.auth-alert.validation-summary-valid {
    display:none;
}

.auth-field-error {
    color:#ad3939;
    font-size:11px;
    display:block;
    line-height:1.8;
    margin-top:6px;
}

.auth-field input.input-validation-error {
    border-color:#c77575;
}

.auth-shell :focus-visible {
    outline:3px solid #bc9c56;
    outline-offset:3px;
}

@media(min-width:1500px) {
    .auth-form-container {
        max-width:440px;
    }
}

/* Shared personal-code, authenticator and SMS login verification. */
.auth-verification .auth-back {
    display:inline-flex;
    align-items:center;
    min-height:44px;
    margin-bottom:12px;
}

.auth-verification-steps {
    margin-bottom:24px;
    font-size:12px;
}

.auth-verification-method {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    padding:12px 14px;
    border:1px solid #dce7de;
    border-radius:12px;
    background:#f0f5ef;
    color:#607468;
    font-size:12px;
    margin-bottom:24px;
}

.auth-verification-method strong {
    margin-inline-start:auto;
    color:#245e4e;
}

.auth-verification-method-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#41846d;
    flex-shrink:0;
}

.auth-verification-notice {
    color:#607468;
    font-size:12px;
    line-height:1.9;
    margin-bottom:18px;
}

.auth-field input.auth-verification-code {
    /* A real, visible input avoids segmented-input paste and mobile autofill issues. */
    height:64px;
    min-width:0;
    font-size:24px;
    letter-spacing:.3em;
    text-align:center;
    font-variant-numeric:tabular-nums;
    border-radius:12px;
    padding-inline:16px;
    scroll-margin-block:24px;
}

.auth-field input.auth-verification-code::placeholder {
    font-size:24px;
    color:#a5b4aa;
}

.auth-verification .auth-password input {
    /* Symmetric space keeps the six digits centered beside the visibility button. */
    padding-inline:60px!important;
}

.auth-verification .auth-password button {
    min-width:44px;
    min-height:44px;
}

.auth-verification input[aria-invalid=true] {
    border-color:#c77575;
}

.auth-verification .auth-alert[hidden] {
    display:none;
}

.auth-verification-status {
    display:block;
    color:#607468;
    font-size:12px;
    text-align:center;
    line-height:1.9;
}

.auth-verification-status:not(:empty) {
    margin-top:12px;
}

@media(max-width:1000px) {
    .auth-brand {
        padding:40px 30px;
    }
    .auth-main {
        padding:32px 30px 24px;
    }
    .auth-workflow {
        gap:10px;
    }
    .auth-workflow small {
        font-size:10px;
    }
    .auth-brand h2 {
        font-size:36px;
    }
}

@media(max-width:760px) {
    .auth-shell {
        /* The theme's viewport-height flex body must not squeeze the header. */
        display:flex;
        flex-direction:column;
        flex:0 0 auto;
    }
    .auth-brand {
        flex:0 0 auto;
        min-height:90px;
        padding:22px 24px;
        background:linear-gradient(110deg,#205348,#122f2c);
    }
    .auth-logo img {
        flex-shrink:0;
        width:46px;
        height:46px;
        border-radius:12px;
        padding:6px;
    }
    .auth-logo>span {
        font-size:16px;
    }
    .auth-logo small {
        font-size:10px;
        margin-top:4px;
    }
    .auth-brand-copy,.auth-brand-footer {
        display:none;
    }
    .auth-main {
        flex:1 0 auto;
        min-height:0;
        padding:22px 24px;
    }
    .auth-form-container {
        padding:36px 0;
    }
    .auth-title {
        font-size:25px;
    }
    .auth-description {
        margin-bottom:24px;
    }
    .auth-footer {
        margin-top:10px;
    }
    .auth-steps {
        gap:8px;
    }
    .auth-verification .auth-title {
        font-size:24px;
    }
    .auth-verification .auth-password input {
        padding-inline:48px!important;
        letter-spacing:.18em;
    }
}

@media(prefers-reduced-motion:reduce) {
    .auth-shell * {
        transition:none!important;
    }
}