/* Login and signup only; other account workflows keep their existing layout. */
@font-face {
    font-family: "CP Auth Sans";
    src: url("/fonts/wizard/noto-sans-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "CP Auth Icons";
    src: url("/fonts/wizard/material-icons-outlined.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

.cp-auth-page {
    --cp-auth-primary: #4c23ff;
    --cp-auth-cyan: #06b6d4;
    --cp-input-accent: var(--cp-auth-primary);
    --cp-input-border: #dce0ee;
    --cp-input-ink: #252641;
    --cp-input-muted: #5d6475;
    --cp-input-surface: rgb(255 255 255 / 88%);
    --cp-input-radius: 12px;
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    padding: 40px 24px;
    color: #252641;
    background: radial-gradient(ellipse at 4% 8%, rgb(6 182 212 / 26%) 0%, transparent 42%),
        radial-gradient(ellipse at 94% 12%, rgb(225 66 184 / 22%) 0%, transparent 43%),
        radial-gradient(ellipse at 48% 100%, rgb(76 35 255 / 18%) 0%, transparent 58%), #f0f2ff;
    font-family: "CP Auth Sans", system-ui, sans-serif;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.6;
}

.cp-auth-page .material-icons-outlined {
    font-family: "CP Auth Icons";
    font-weight: normal;
    font-style: normal;
    font-size: 22px;
    letter-spacing: normal;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
}

.cp-auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .94fr);
    width: 100%;
    max-width: 1160px;
    margin-inline: auto;
    overflow: hidden;
    isolation: isolate;
    background: rgb(255 255 255 / 38%);
    border: 1px solid rgb(255 255 255 / 85%);
    border-radius: 28px;
    box-shadow: 0 28px 80px rgb(64 41 115 / 13%), 0 6px 20px rgb(64 41 115 / 5%);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
    backdrop-filter: blur(24px) saturate(135%);
}

.cp-auth-content {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 48px 48px 44px;
    background: linear-gradient(145deg, rgb(255 255 255 / 82%), rgb(255 255 255 / 64%));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%);
}

.cp-auth-content-inner {
    width: 100%;
    max-width: 450px;
    min-width: 0;
    margin-inline: auto;
}

.cp-auth-brand {
    display: inline-flex;
    margin-bottom: 34px;
    border-radius: 6px;
}

.cp-auth-brand img { display: block; max-width: 100%; height: auto; mix-blend-mode: multiply; }
.cp-auth-heading { margin-bottom: 28px; }
.cp-auth-eyebrow { margin: 0 0 10px; color: var(--cp-auth-primary); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.cp-auth-heading h1 { margin: 0 0 10px; color: #20213e; font-size: clamp(28px, 2.6vw, 36px); font-weight: 700; line-height: 1.2; letter-spacing: -.035em; }
.cp-auth-subtitle { margin: 0; color: #5d6475; font-size: 14px; line-height: 1.65; }

.cp-auth-visual {
    position: relative;
    min-width: 0;
    min-height: 760px;
    overflow: hidden;
    background: #071521;
}

/* The signup artwork fills the entire taller form, rather than floating in a box. */
.cp-auth-page--signup .cp-auth-visual { min-height: 980px; }
.cp-auth-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; }
.cp-auth-page--signup .cp-auth-art { object-position: 50% 43%; }
.cp-auth-visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(3 14 24 / 55%), transparent 22%, transparent 62%, rgb(3 14 24 / 94%) 100%); }
.cp-auth-visual-top { position: absolute; z-index: 1; inset: 32px auto auto 32px; display: flex; align-items: center; gap: 9px; max-width: calc(100% - 64px); padding: 9px 13px; color: #f0f6ff; background: rgb(255 255 255 / 9%); border: 1px solid rgb(255 255 255 / 20%); border-radius: 100px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 10px; font-weight: 600; letter-spacing: .16em; }
.cp-auth-visual-mark { flex: 0 0 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #37e2f2, #cf50ed); box-shadow: 0 0 15px rgb(128 103 248 / 55%); }
.cp-auth-visual-copy { position: absolute; z-index: 1; inset: auto 32px 32px; max-width: 400px; padding: 24px; color: #fff; background: rgb(8 17 35 / 52%); border: 1px solid rgb(255 255 255 / 20%); border-radius: 20px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), 0 12px 32px rgb(0 0 0 / 10%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cp-auth-visual-kicker { display: block; margin-bottom: 13px; color: #8adbed; font-size: 9px; font-weight: 600; letter-spacing: .16em; }
.cp-auth-visual-copy h2 { margin: 0 0 15px; color: #fff; font-size: clamp(30px, 3vw, 40px); font-weight: 600; line-height: 1.16; letter-spacing: -.035em; text-wrap: balance; }
.cp-auth-visual-copy p { max-width: 330px; margin: 0; color: #c3d4df; font-size: 13px; line-height: 1.7; }

.cp-auth-page a { color: var(--cp-auth-primary); }
.cp-auth-page a:hover { color: #3112b8; }
.cp-auth-page a:focus-visible, .cp-auth-page button:focus-visible { outline: 3px solid #825df4; outline-offset: 4px; }
.cp-auth-page .btn-filter { min-height: 48px; border: 1px solid #dce0ee; border-radius: 12px; background: rgb(255 255 255 / 75%); color: #33374f; box-shadow: inset 0 1px 0 #fff; font-size: 13px; letter-spacing: 0; }
.cp-auth-page .btn-filter:hover { border-color: #b5a2ed; background: rgb(255 255 255 / 95%); }
.cp-auth-page .btn-filter span { display: inline-flex; align-items: center; justify-content: center; }
.cp-auth-page .separator { gap: 16px; margin: 26px 0; }
.cp-auth-page .separator p { color: #5d6475; font-size: 10px; font-weight: 600 !important; letter-spacing: .1em; white-space: nowrap; }
.cp-auth-page .separator .line { background-color: #e0e1ed; }
.cp-auth-page .cp-auth-form { margin-top: 0 !important; }
.cp-auth-page .cp-auth-form .form-label { color: #373b55; font-size: 13px; font-weight: 600; }
.cp-auth-page .cp-auth-form .form-control, .cp-auth-page .cp-auth-form .form-select { min-width: 0; min-height: 48px; font-size: 14px; }
.cp-auth-page .cp-auth-form .form-text, .cp-auth-page .cp-control-hint { color: #5d6475; font-size: 11px; line-height: 1.7; }
.cp-auth-page .cp-auth-form .input-group-text { min-width: 46px; justify-content: center; color: #5d6475; border-color: #dce0ee; border-radius: 0 12px 12px 0; }
.cp-auth-page .cp-auth-form .form-check { line-height: 1.65; }
.cp-auth-page .cp-auth-form .form-check-label { font-size: 12px; font-weight: 400; }
.cp-auth-page .cp-auth-form .form-check-input:checked { background-color: var(--cp-auth-primary); border-color: var(--cp-auth-primary); }
.cp-auth-page .cp-auth-form button[type="submit"], .cp-auth-page .cp-auth-form input[type="submit"], .cp-auth-page .cp-auth-form .me-btn { min-height: 48px; border: 0; border-radius: 12px; background: linear-gradient(110deg, #076f9b, #6441db 52%, #b329b7) !important; font-size: 14px; font-weight: 600; box-shadow: 0 7px 18px rgb(107 57 217 / 23%), inset 0 1px 0 rgb(255 255 255 / 25%); }
.cp-auth-page .cp-auth-form button[type="submit"]:hover, .cp-auth-page .cp-auth-form .me-btn:hover { filter: brightness(1.08); }
.cp-auth-page .cp-auth-form button[type="submit"]:disabled { filter: none; opacity: .65; }
.cp-auth-page .cp-auth-form .text-start { color: #5d6475; font-size: 12px; }
.cp-auth-page .cp-auth-form .text-start a { font-weight: 600; }
.cp-auth-page .cp-auth-form .row > *, .cp-auth-page .cp-auth-form .input-group { min-width: 0; }
.cp-auth-page .cp-register-alert { overflow-wrap: anywhere; }
.cp-auth-page .cp-register-alert[hidden] { display: none !important; }

@media (min-width: 992px) and (max-width: 1199px) {
    .cp-auth-content { padding: 40px 32px; }
    .cp-auth-visual-copy { inset-inline: 28px; }
}

@media (max-width: 991.98px) {
    .cp-auth-page { padding: 28px 20px; }
    .cp-auth-shell { display: block; max-width: 580px; border-radius: 24px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
    .cp-auth-content { padding: 40px 44px; }
    .cp-auth-visual { display: none; }
    .cp-auth-heading h1 { font-size: 32px; }
}

@media (max-width: 575.98px) {
    .cp-auth-page { padding: 16px 12px; }
    .cp-auth-shell { border-radius: 20px; }
    .cp-auth-content { padding: 28px 24px 30px; }
    .cp-auth-brand { margin-bottom: 28px; }
    .cp-auth-brand img { width: 135px; }
    .cp-auth-heading h1 { font-size: 28px; }
    .cp-auth-subtitle { font-size: 13px; }
    .cp-auth-page .cp-auth-form .form-control, .cp-auth-page .cp-auth-form .form-select { font-size: 16px; }
    .cp-auth-page .cp-auth-form .form-check-label { font-size: 12px; }
}

@media (max-width: 374.98px) {
    .cp-auth-content { padding-inline: 20px; }
    /* Keep the full 304px challenge visible on small phones without clipping. */
    .cp-auth-page .g-recaptcha:has(> div) { max-width: 100%; height: 66px; transform: scale(.82); transform-origin: left top; }
}

@media (prefers-reduced-motion: reduce) {
    .cp-auth-page *, .cp-auth-page *::before, .cp-auth-page *::after { transition: none !important; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .cp-auth-content { background: #fff; }
    .cp-auth-visual-copy { background: rgb(8 17 35 / 92%); }
}

@media (prefers-reduced-transparency: reduce) {
    .cp-auth-shell { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .cp-auth-content { background: #fff; }
    .cp-auth-visual-copy { background: #081123; -webkit-backdrop-filter: none; backdrop-filter: none; }
}