* { box-sizing: border-box; }

.sign-in-page {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 32px 20px;
    font: 16px/1.5 "Segoe UI", sans-serif;
    color: #142943;
    background: radial-gradient(ellipse at 18% 0%, #e3f2fd, transparent 58%), #eff4f8;
}

.sign-in-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    width: min(100%, 870px);
    overflow: hidden;
    border: 1px solid #d4e0ec;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 22px 65px #163d671c;
}

.sign-in-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 68px;
    min-height: 450px;
    padding: 44px 38px;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(148deg, #101f37, #183e65);
}

.sign-in-brand::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -176px;
    top: -176px;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 31px, #b3e0ff23 32px 33px);
    pointer-events: none;
}

.sign-in-logo {
    display: block;
    width: 138px;
    height: auto;
    padding: 8px 10px;
    background: #fff;
    border-radius: 9px;
}

.sign-in-product h1 {
    margin: 0 0 14px;
    font-size: clamp(33px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.sign-in-product p { max-width: 27ch; margin: 0; color: #d7e6f5; }

.sign-in-panel { display: grid; align-items: center; padding: 44px clamp(26px, 5vw, 62px); }
.sign-in-panel h2 { margin: 0; font-size: 33px; line-height: 1.14; letter-spacing: -0.035em; }
.sign-in-intro { margin: 8px 0 24px; color: #52677b; }
.sign-in-panel label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; }

.sign-in-panel input,
.sign-in-panel button {
    display: block;
    width: 100%;
    min-height: 46px;
    border-radius: 9px;
    font: inherit;
}

.sign-in-panel input {
    margin-bottom: 16px;
    padding: 9px 12px;
    color: inherit;
    border: 1px solid #a5b7c9;
    background: #fbfdff;
}

.sign-in-panel button {
    margin-top: 23px;
    padding: 10px 16px;
    border: 0;
    background: #145697;
    color: #fff;
    font-weight: 650;
    cursor: pointer;
}

.sign-in-panel button:hover { background: #103f70; }
.sign-in-panel :is(input, button, a):focus-visible { outline: 3px solid #307ebf; outline-offset: 2px; }
.sign-in-panel input[aria-invalid="true"] { border-color: #a12a36; }
.sign-in-support { margin: 22px 0 0; font-size: 14px; color: #52677b; }
.sign-in-support a { color: #145697; text-underline-offset: 3px; }
.sign-in-error { margin: 0 0 16px; padding: 10px 12px; border-radius: 8px; color: #851e2a; background: #fcecef; font-size: 14px; }

@media (max-width: 640px) {
    .sign-in-page { padding: 18px 12px; }
    .sign-in-shell { grid-template-columns: 1fr; border-radius: 17px; }
    .sign-in-brand { min-height: 0; gap: 22px; padding: 24px; }
    .sign-in-brand::after { transform: scale(.72); }
    .sign-in-logo { width: 112px; }
    .sign-in-product h1 { font-size: 32px; margin-bottom: 8px; }
    .brand-break { display: none; }
    .sign-in-panel { padding: 27px 24px 31px; }
    .sign-in-panel h2 { font-size: 28px; }
}

.sign-in-reset { margin: 14px 0 0; font-size: 14px; }
.sign-in-reset a { color: #145697; text-underline-offset: 3px; }
.sign-in-status { padding: 10px 12px; border-radius: 8px; color: #1d593a; background: #e9f7ee; }