:root {
    --auth-ink: var(--ace-ink);
    --auth-muted: #667089;
    --auth-line: #e3e5ef;
    --auth-violet: var(--ace-violet);
    --auth-violet-deep: var(--ace-violet-deep);
    --auth-green: var(--ace-green-text);
    --auth-red: var(--ace-red-text);
}

* { box-sizing: border-box; }

html { min-width: 0; min-height: 100%; background: #f7f8fc; }

body.auth-page {
    min-width: 0;
    min-height: 100vh;
    margin: 0;
    color: var(--auth-ink);
    background: var(--ace-bg);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.auth-shell {
    position: relative;
    z-index: 1;
    width: min(1120px, calc(100% - 2 * var(--ace-gutter)));
    margin: 0 auto;
    padding: 24px 0 42px;
}

.auth-home {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid rgba(218, 220, 233, .9);
    border-radius: 12px;
    color: var(--auth-muted);
    background: rgba(255, 255, 255, .78);
    text-decoration: none;
    font-size: 13px;
    font-weight: 750;
    backdrop-filter: blur(12px);
    transition: color .18s ease, border-color .18s ease, transform .18s ease;
}

.auth-home:hover { color: var(--auth-violet-deep); border-color: #cfc5ff; transform: translateX(-2px); }

.auth-stage {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr);
    min-height: 600px;
    margin-top: 22px;
    overflow: hidden;
    border: 1px solid rgba(218, 220, 233, .95);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(36, 28, 82, .13);
}

.auth-showcase {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(34px, 5vw, 58px);
    overflow: hidden;
    color: #fff;
    background: linear-gradient(145deg, #4a28b3 0%, #7952f5 100%);
}

/* The shared one-line wordmark (.ace-wordmark--light --lg in brand.css); this only lifts it above the decoration. */
.auth-brand { position: relative; z-index: 1; align-self: flex-start; }

/* Copy (and the signup trial note) sit together, centred in the space under the wordmark. */
.auth-showcase-copy { position: relative; z-index: 1; margin: auto 0; }
.auth-showcase-copy:has(+ .auth-trust-note) { margin-bottom: 0; }

.auth-showcase h2 {
    max-width: 480px;
    margin: 18px 0 13px;
    color: #fff;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.04;
    letter-spacing: -.025em;
}

/* Login has no showcase heading: its one line reads as the lead. */
.auth-showcase-copy p:only-child { color: #fff; font-size: clamp(22px, 2.4vw, 28px); font-weight: 750; line-height: 1.35; letter-spacing: -.02em; }
.auth-showcase-copy p { max-width: 480px; margin: 0; color: rgba(255, 255, 255, .82); font-size: 15px; line-height: 1.7; }

.auth-trust-note {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(9px);
}

.auth-trust-note > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #fff; background: rgba(255, 255, 255, .15); }
.auth-trust-note span { min-width: 0; color: rgba(255, 255, 255, .86); font-size: 13px; line-height: 1.5; }
.auth-trust-note strong { display: block; margin-bottom: 3px; color: #fff; font-size: 14px; }
.auth-trust-note { position: relative; z-index: 1; max-width: 480px; margin: 30px 0 auto; }

.auth-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(34px, 6vw, 68px);
    background: #fff;
}

.auth-panel-heading { margin-bottom: 30px; }

.auth-panel-heading h1 { margin: 15px 0 9px; font-size: clamp(32px, 4vw, 46px); line-height: 1.08; letter-spacing: -.025em; }
.auth-panel-heading p { max-width: 520px; margin: 0; color: var(--auth-muted); font-size: 15px; line-height: 1.65; }
.auth-form { display: grid; gap: 19px; }

.auth-field { display: grid; gap: 8px; min-width: 0; color: var(--auth-ink); font-size: 13px; font-weight: 800; }
.auth-field > small { color: var(--auth-muted); font-size: 12px; font-weight: 600; line-height: 1.5; }
.auth-field > small:empty { display: none; }
.auth-input-wrap { position: relative; display: block; min-width: 0; }
.auth-input-wrap > i { position: absolute; top: 50%; left: 16px; z-index: 1; width: 18px; color: #8a91a5; text-align: center; transform: translateY(-50%); }

.auth-input-wrap input {
    display: block;
    width: 100%;
    height: 50px;
    min-width: 0;
    padding: 0 15px 0 47px;
    border: 1px solid var(--auth-line);
    border-radius: 13px;
    outline: none;
    color: var(--auth-ink);
    background: #fbfbfe;
    font-size: 14px;
    font-weight: 650;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.auth-input-wrap--password input { padding-right: 50px; }
.auth-input-wrap input::placeholder { color: #9ba1b1; font-weight: 550; }
.auth-input-wrap input:focus { border-color: var(--auth-violet); background: #fff; box-shadow: 0 0 0 4px rgba(121, 82, 245, .11); }
.auth-field.has-error input { border-color: var(--auth-red); box-shadow: 0 0 0 4px rgba(192, 52, 60, .09); }

.password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    color: #7e869b;
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
}

.password-toggle:hover { color: var(--auth-violet-deep); background: #f0ebff; }
.password-toggle:focus-visible,
.auth-submit:focus-visible,
.auth-home:focus-visible,
.auth-switch a:focus-visible,
.auth-forgot a:focus-visible { outline: 3px solid rgba(121, 82, 245, .35); outline-offset: 2px; }

.auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    margin-top: 3px;
    padding: 0 18px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(125deg, var(--auth-violet-deep), var(--auth-violet));
    box-shadow: 0 13px 28px rgba(101, 61, 203, .22);
    cursor: pointer;
    font-size: 14px;
    font-weight: 850;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.auth-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 17px 34px rgba(101, 61, 203, .28); }
.auth-submit:disabled { cursor: wait; opacity: .72; }
.auth-submit.is-loading i { animation: auth-spin .8s linear infinite; }

.auth-status { padding: 11px 13px; border: 1px solid #f0bac2; border-radius: 12px; color: #9e3040; background: #fff1f3; font-size: 13px; font-weight: 700; line-height: 1.5; }
.auth-status.is-success { border-color: #a9ddc8; color: #0b704e; background: #ecfaf5; }
.auth-switch { margin: 27px 0 0; color: var(--auth-muted); text-align: center; font-size: 14px; font-weight: 650; }
.auth-switch a { color: var(--auth-violet-deep); font-weight: 850; text-decoration: none; white-space: nowrap; }
.auth-switch a:hover { text-decoration: underline; }

.password-quality { display: block; height: 5px; overflow: hidden; border-radius: 999px; background: #eceef4; }
.password-quality i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--auth-red); transition: width .2s ease, background .2s ease; }
.password-match.is-match { color: var(--auth-green); }
.password-match.is-mismatch { color: var(--auth-red); }

@keyframes auth-spin { to { transform: rotate(360deg); } }

@media (max-width: 850px) {
    .auth-stage { grid-template-columns: minmax(0, 1fr); }
    .auth-showcase { padding: 32px; }
    .auth-showcase-copy { margin: 36px 0 0; }
    .auth-showcase h2 { max-width: 620px; font-size: clamp(30px, 8vw, 44px); }
    .auth-trust-note { width: min(460px, 100%); margin-top: 28px; }
    .auth-panel { padding: 42px; }
}

@media (max-width: 620px) {
    .auth-shell { padding-top: 12px; }
    .auth-home { min-height: 38px; }
    .auth-stage { min-height: 0; margin-top: 12px; border-radius: 22px; }
    .auth-showcase { padding: 25px 23px; }
    .auth-brand.ace-wordmark img { width: 44px; height: 44px; }
    .auth-brand.ace-wordmark span { font-size: 20px; }
    .auth-showcase-copy { margin: 26px 0 0; }
    .auth-showcase h2 { margin-top: 13px; font-size: 30px; }
    .auth-showcase-copy p { font-size: 14px; }
    .auth-trust-note { margin-top: 22px; }
    .auth-panel { padding: 31px 20px 28px; }
    .auth-panel-heading { margin-bottom: 24px; }
    .auth-panel-heading h1 { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-home,
    .auth-input-wrap input,
    .auth-submit,
    .password-quality i { transition: none; }
    .auth-submit.is-loading i { animation: none; }
}

.auth-forgot { margin: 0; text-align: right; font-size: 14px; }
.auth-forgot a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 4px; }
.auth-forgot a,
.auth-field small a { color: var(--ace-link); font-weight: 650; }
a.auth-submit { text-decoration: none; }