:root {
    --auth-ink: #172033;
    --auth-muted: #6d7890;
    --auth-line: #e5e9f2;
    --auth-primary: #3559e0;
    --auth-secondary: #7c3aed;
}

* { box-sizing: border-box; }

body.auth-page {
    min-height: 100vh;
    margin: 0;
    color: var(--auth-ink);
    background: radial-gradient(circle at top left, rgba(53,89,224,.16), transparent 28%), radial-gradient(circle at bottom right, rgba(124,58,237,.18), transparent 24%), #f7f8fc;
    font-family: "Source Sans 3", sans-serif;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1.1fr);
    overflow: hidden;
}

.auth-visual {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: clamp(2rem, 6vw, 6rem);
    color: #fff;
    background: linear-gradient(140deg, #172554 0%, #3559e0 48%, #7c3aed 100%);
    isolation: isolate;
    overflow: hidden;
}

.auth-visual::before,
.auth-visual::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;
    z-index: -1;
}

.auth-visual::before { width: 34rem; height: 34rem; top: -13rem; right: -11rem; }
.auth-visual::after { width: 23rem; height: 23rem; bottom: -10rem; left: -9rem; }

.auth-visual-content { max-width: 30rem; }
.auth-visual .brand-mark {
    width: 3.5rem; height: 3.5rem; display: grid; place-items: center;
    margin-bottom: 2rem; border-radius: 1.1rem; color: #172554;
    background: #fff; box-shadow: 0 1rem 2rem rgba(13, 23, 65, .2); font-size: 1.5rem;
}
.auth-visual h1 { max-width: 11ch; margin: 0 0 1rem; font-size: clamp(2.5rem, 4vw, 4.5rem); line-height: .98; letter-spacing: 0; }
.auth-visual p { max-width: 34rem; margin: 0; color: rgba(255,255,255,.8); font-size: 1.15rem; line-height: 1.6; }

.auth-content { display: grid; place-items: center; padding: 2rem; }
.auth-card { width: min(100%, 32rem); padding: 2rem; border: 1px solid rgba(255,255,255,.65); border-radius: 1.6rem; background: rgba(255,255,255,.72); box-shadow: 0 24px 45px rgba(23, 32, 51, .12); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.auth-logo { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 2.5rem; color: var(--auth-ink); font-size: 1.35rem; font-weight: 700; text-decoration: none; }
.auth-logo i { color: var(--auth-primary); font-size: 1.6rem; }
.auth-heading { margin-bottom: 2rem; }
.auth-heading h2 { margin: 0 0 .45rem; font-size: 2rem; letter-spacing: 0; }
.auth-heading p { margin: 0; color: var(--auth-muted); font-size: 1rem; }
.auth-alert { border: 0; border-radius: .95rem; backdrop-filter: blur(10px); }
.auth-pills { display: flex; flex-wrap: wrap; gap: .55rem; margin: -.5rem 0 1.25rem; }
.auth-pills span { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .75rem; border-radius: 999px; color: var(--auth-ink); background: rgba(255,255,255,.72); box-shadow: 0 .5rem 1rem rgba(53, 89, 224, .08); font-size: .88rem; }
.auth-stat-grid { display: grid; gap: 1rem; margin-top: 2rem; }
.auth-stat-card { padding: 1rem 1.15rem; border: 1px solid rgba(255,255,255,.18); border-radius: 1rem; background: rgba(255,255,255,.12); backdrop-filter: blur(10px); }
.auth-stat-card strong { display: block; font-size: 1rem; margin-bottom: .2rem; }
.auth-stat-card span { color: rgba(255,255,255,.82); }
.auth-orb { position: absolute; border-radius: 50%; background: rgba(255,255,255,.12); filter: blur(2px); }
.auth-orb-one { width: 14rem; height: 14rem; top: 8%; right: 10%; }
.auth-orb-two { width: 10rem; height: 10rem; bottom: 12%; left: 8%; background: rgba(255,255,255,.1); }
.auth-field { position: relative; margin-bottom: 1rem; }
.auth-field > i { position: absolute; top: 50%; left: 1rem; z-index: 2; color: #8490a7; transform: translateY(-50%); }
.auth-field .form-control { height: 3.35rem; padding: .7rem 3rem; border: 1px solid rgba(255,255,255,.68); border-radius: 1rem; color: var(--auth-ink); background: rgba(255,255,255,.8); box-shadow: 0 .65rem 1.4rem rgba(35, 48, 91, .06); }
.auth-field .form-control:focus { border-color: var(--auth-primary); box-shadow: 0 0 0 .2rem rgba(53, 89, 224, .13); }
.password-toggle { position: absolute; top: 50%; right: .8rem; z-index: 3; width: 2rem; height: 2rem; padding: 0; border: 0; color: #8490a7; background: transparent; transform: translateY(-50%); }
.password-toggle:hover, .password-toggle:focus { color: var(--auth-primary); }
.auth-submit { width: 100%; height: 3.35rem; border: 0; border-radius: 1rem; background: linear-gradient(100deg, var(--auth-primary), var(--auth-secondary)); box-shadow: 0 .95rem 1.6rem rgba(53, 89, 224, .24); font-weight: 600; }
.auth-submit:hover { background: linear-gradient(100deg, #294bd0, #6d28d9); }
.auth-link { color: var(--auth-primary); font-weight: 600; text-decoration: none; }
.auth-link:hover { color: var(--auth-secondary); }
.auth-footnote { margin-top: 1.5rem; color: var(--auth-muted); font-size: .85rem; }
.auth-back { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.5rem; }

@media (max-width: 800px) {
    .auth-shell { display: block; }
    .auth-visual { min-height: 15rem; align-items: center; padding: 2.5rem 1.5rem; }
    .auth-visual-content { width: 100%; }
    .auth-visual .brand-mark { margin-bottom: 1rem; }
    .auth-visual h1 { font-size: 2.5rem; }
    .auth-visual p { font-size: 1rem; }
    .auth-content { min-height: calc(100vh - 15rem); padding: 2.5rem 1.5rem; }
    .auth-logo { margin-bottom: 1.75rem; }
}