:root {
    --oa-ink: #15233f;
    --oa-muted: #6f7d95;
    --oa-blue: #1687f7;
    --oa-purple: #6356e8;
}

* { box-sizing: border-box; }

.oa-auth-page {
    min-height: 100%;
    margin: 0;
    color: var(--oa-ink);
    background:
        radial-gradient(circle at 10% 15%, rgba(168, 117, 237, .30), transparent 29rem),
        radial-gradient(circle at 92% 92%, rgba(58, 193, 237, .24), transparent 32rem),
        #f4f7fc;
}

.oa-auth-layout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.oa-auth-shell {
    width: min(1180px, 100%);
    min-height: min(740px, calc(100vh - 64px));
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(420px, .94fr);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 30px;
    background: rgba(255, 255, 255, .80);
    box-shadow: 0 28px 70px rgba(40, 62, 104, .18);
}

.oa-auth-brand {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: clamp(44px, 8vw, 94px);
    color: #fff;
    background: linear-gradient(135deg, #9368d9 0%, #4978df 48%, #56c8eb 100%);
}

.oa-auth-brand::before,
.oa-auth-brand::after {
    position: absolute;
    z-index: -1;
    content: "";
    border-radius: 999px;
    filter: blur(1px);
}

.oa-auth-brand::before {
    width: 420px;
    height: 420px;
    top: -175px;
    right: -130px;
    background: rgba(255, 255, 255, .20);
}

.oa-auth-brand::after {
    width: 340px;
    height: 340px;
    bottom: -160px;
    left: -160px;
    border: 1px solid rgba(255, 255, 255, .38);
    background: rgba(35, 98, 198, .20);
}

.oa-brand-orb {
    position: absolute;
    z-index: -1;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 0 0 10px rgba(255,255,255,.10), 0 0 60px rgba(255,255,255,.75);
}

.oa-brand-orb-one { top: 28%; right: 26%; }
.oa-brand-orb-two { bottom: 23%; right: 12%; transform: scale(.62); }

.oa-brand-content { max-width: 530px; }
.oa-brand-logo-link {
    display: flex;
    width: max-content;
    margin-bottom: 16px;
}
.oa-brand-logo { width: auto; height: 72px; max-width: 280px; object-fit: contain; object-position: left; filter: drop-shadow(0 8px 16px rgba(25, 38, 78, .20)); }

.oa-brand-eyebrow,
.oa-login-kicker {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .11em;
}

.oa-brand-eyebrow {
    padding: 8px 12px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.30);
    color: rgba(255,255,255,.96);
}

.oa-auth-brand h1 {
    margin: 18px 0;
    color: #fff;
    font-size: clamp(38px, 3.25vw, 48px);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -.045em;
}

.oa-auth-brand h1 span {
    display: block;
    white-space: nowrap;
}

.oa-auth-brand p {
    max-width: 470px;
    margin: 0;
    color: rgba(255,255,255,.88);
    font-size: 16px;
    line-height: 1.85;
}

.oa-auth-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px;
    background: rgba(255,255,255,.88);
}

.oa-auth-form-wrap { width: min(100%, 390px); }
.oa-mobile-brand { display: none; text-align: center; }
.oa-mobile-brand img { height: 58px; max-width: 240px; object-fit: contain; }

.oa-login-card {
    padding: 12px 0;
}

.oa-login-heading { margin-bottom: 28px; }
.oa-login-kicker { color: #5368bf; }
.oa-login-heading h2 { margin: 8px 0 6px; color: #17233d; font-size: 30px; font-weight: 700; letter-spacing: -.035em; }
.oa-login-heading p { margin: 0; color: var(--oa-muted); font-size: 14px; }

.oa-auth-alert { margin-bottom: 18px; padding: 12px 14px; border: 1px solid; border-radius: 12px; font-size: 13px; }
.oa-auth-alert p { margin: 0; }
.oa-auth-alert p + p { margin-top: 3px; }
.oa-auth-alert-success { color: #137945; border-color: #b6e8ca; background: #effbf4; }
.oa-auth-alert-error { color: #bc2745; border-color: #ffd0d9; background: #fff3f5; }

.oa-google-button,
.oa-login-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    border-radius: 13px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.oa-google-button { border: 1px solid #dbe2ee; color: #35435d; background: #fff; box-shadow: 0 5px 12px rgba(27, 45, 79, .05); }
.oa-google-button:hover { color: #35435d; background: #f8fbff; transform: translateY(-1px); box-shadow: 0 10px 18px rgba(27, 45, 79, .09); }
.oa-google-button svg { margin-right: 12px; }

.oa-login-divider { position: relative; margin: 25px 0; text-align: center; }
.oa-login-divider::before { position: absolute; top: 50%; right: 0; left: 0; height: 1px; content: ""; background: #e5eaf2; }
.oa-login-divider span { position: relative; z-index: 1; padding: 0 13px; color: #8a96aa; background: #fff; font-size: 12px; }

.oa-login-form { display: grid; gap: 17px; }
.oa-login-form label { display: block; margin-bottom: 7px; color: #344159; font-size: 12px; font-weight: 600; }
.oa-auth-input { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #d9e1ed; border-radius: 13px; color: #1d2b44; outline: none; background: #fbfcff; font-size: 14px; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.oa-password-field { position: relative; }
.oa-password-field .oa-auth-input { padding-right: 50px; }
.oa-password-toggle { position: absolute; top: 50%; right: 7px; display: inline-flex; width: 38px; height: 38px; padding: 0; transform: translateY(-50%); align-items: center; justify-content: center; border: 0; border-radius: 10px; color: #6e7b91; background: transparent; cursor: pointer; transition: color .2s ease, background .2s ease; }
.oa-password-toggle:hover { color: #167ee6; background: #edf6ff; }
.oa-password-toggle:focus-visible { color: #167ee6; outline: 2px solid #278df4; outline-offset: 1px; background: #edf6ff; }
.oa-password-toggle[aria-pressed="true"] { color: #167ee6; }
.oa-auth-input::placeholder { color: #a6b0c1; }
.oa-auth-input:focus { border-color: #278df4; background: #fff; box-shadow: 0 0 0 4px rgba(39, 141, 244, .13); }
.oa-auth-input.oa-input-error { border-color: #f05272; }
.oa-login-form .text-red-600 { margin-top: 6px; font-size: 12px; }

.oa-login-links { display: flex; justify-content: space-between; gap: 16px; margin-top: 2px; font-size: 12px; font-weight: 600; }
.oa-login-links a { color: #4463db; text-decoration: none; }
.oa-login-links a:hover { color: #167ee6; text-decoration: underline; }

.oa-login-submit { border: 0; color: #fff; cursor: pointer; background: linear-gradient(100deg, #6654e8, #1689f5); box-shadow: 0 12px 22px rgba(63, 103, 222, .27); }
.oa-login-submit:hover { transform: translateY(-1px); box-shadow: 0 16px 28px rgba(63, 103, 222, .34); }
.oa-login-submit:focus { outline: 3px solid rgba(30, 139, 246, .25); outline-offset: 3px; }

.oa-auth-footer { margin: 24px 0 0; color: #8b96aa; font-size: 11px; line-height: 1.6; text-align: center; }
.oa-auth-footer a { color: inherit; }

@media (max-width: 820px) {
    .oa-auth-layout { padding: 18px; }
    .oa-auth-shell { display: block; min-height: 0; border-radius: 24px; }
    .oa-auth-brand { display: none; }
    .oa-auth-form-panel { padding: 36px 24px 30px; }
    .oa-mobile-brand { display: block; margin-bottom: 24px; }
}

@media (min-width: 821px) and (max-width: 1100px) {
    .oa-auth-brand { padding: 44px; }
    .oa-auth-brand h1 { font-size: clamp(32px, 4.2vw, 40px); }
}

@media (max-width: 430px) {
    .oa-auth-layout { padding: 0; }
    .oa-auth-shell { min-height: 100vh; border: 0; border-radius: 0; }
    .oa-auth-form-panel { min-height: 100vh; padding: 32px 22px; }
    .oa-login-heading h2 { font-size: 27px; }
}