/* Shared account shell keeps login and both recovery steps on one visual rail. */
.auth-page {
    --auth-violet: var(--cafe-primary, #711cff);
    --auth-lilac: var(--cafe-accent, #ae83ff);
    --auth-teal: var(--cafe-price, #28d3b4);
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: 100%;
    box-sizing: border-box;
    place-items: center;
    overflow: hidden;
    padding: clamp(28px, 5vh, 64px) clamp(20px, 4vw, 64px);
    color: var(--cafe-text, #f7f7fb);
    background:
        radial-gradient(ellipse at 12% 8%, color-mix(in srgb, var(--cafe-primary, #711cff) 16%, transparent), transparent 36%),
        radial-gradient(ellipse at 91% 88%, color-mix(in srgb, var(--cafe-accent, #ae83ff) 10%, transparent), transparent 35%),
        var(--cafe-canvas, #05070b);
}

/* The route scrolls inside the app frame; only its page surface needs replacing. */
.shell-main:has(.auth-page),
.shell-main:has(.auth-page) .content { background: var(--cafe-canvas, #05070b) !important; }

.auth-ambient { position: absolute; z-index: -1; width: min(42vw, 520px); aspect-ratio: 1; pointer-events: none; filter: blur(1px); }
.auth-ambient--violet { top: -34%; left: 10%; background: radial-gradient(circle, rgb(113 28 255 / 13%), transparent 67%); }
.auth-ambient--soft-violet { right: -18%; bottom: -48%; background: radial-gradient(circle, color-mix(in srgb, var(--cafe-accent, #ae83ff) 12%, transparent), transparent 66%); }

.auth-layout {
    display: grid;
    width: min(1120px, 100%);
    min-height: min(690px, calc(100dvh - 72px));
    grid-template-columns: minmax(0, .94fr) minmax(390px, 1.06fr);
    overflow: hidden;
    border: 1px solid rgb(182 190 211 / 19%);
    border-radius: 28px;
    background: linear-gradient(135deg, rgb(19 21 33 / 96%), rgb(8 10 17 / 96%) 67%);
    box-shadow: 0 30px 90px rgb(0 0 0 / 48%), 0 0 42px rgb(113 28 255 / 10%), inset 0 1px 0 rgb(255 255 255 / 8%);
}

/* Story is shared atmosphere; the panel remains the only place with actions. */
.auth-story {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: clamp(30px, 4vw, 56px);
    border-right: 1px solid rgb(182 190 211 / 14%);
    background:
        radial-gradient(ellipse at 12% 83%, rgb(113 28 255 / 16%), transparent 43%),
        radial-gradient(ellipse at 82% 10%, rgb(174 39 255 / 19%), transparent 45%),
        linear-gradient(145deg, #111321, #080a11 72%);
}

.auth-story::before,
.auth-story::after {
    position: absolute;
    right: -18%;
    bottom: 18%;
    left: -18%;
    height: 1px;
    transform: rotate(-24deg);
    background: linear-gradient(90deg, transparent, rgb(147 72 255 / 0%), rgb(147 72 255 / 48%), transparent);
    content: '';
    pointer-events: none;
}
.auth-story::after { bottom: 14%; transform: rotate(-24deg) translateX(22px); opacity: .45; }
.auth-brand-lockup, .auth-story-copy, .auth-story-footer { position: relative; z-index: 1; }
.auth-brand-lockup { display: flex; align-items: center; gap: 14px; }
.auth-brand-mark { display: block; width: 58px; height: 58px; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 4px 18px rgb(157 55 255 / 35%)); }
.auth-eyebrow { margin: 0; color: #b49aff; font-size: 12px; font-weight: 800; letter-spacing: .16em; line-height: 1.5; text-transform: uppercase; }
.auth-brand-name { display: block; margin-top: 3px; color: #f7f5ff; font-size: 16px; font-weight: 800; letter-spacing: .08em; }
.auth-story-copy { max-width: 440px; margin-block: auto; padding-block: 52px; }
.auth-mode-pill { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid rgb(174 131 255 / 33%); border-radius: 999px; color: #e5dcff; background: rgb(113 28 255 / 12%); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.auth-mode-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--auth-teal); box-shadow: 0 0 12px rgb(40 211 180 / 75%); }
.auth-story h1 { margin: 25px 0 14px; color: #fff; font-size: clamp(40px, 3.7vw, 54px); font-weight: 900; letter-spacing: -.055em; line-height: .99; text-shadow: 0 8px 30px rgb(0 0 0 / 32%); }
.auth-story h1 span { color: #bb91ff; text-shadow: 0 0 34px rgb(113 28 255 / 36%); }
.auth-story-copy > p { max-width: 350px; margin: 0; color: #c1c1d0; font-size: 16px; line-height: 1.7; }
.auth-feature-list { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.auth-feature-list span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid rgb(182 190 211 / 16%); border-radius: 9px; color: #dedbe8; background: rgb(255 255 255 / 4%); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.auth-feature-list i { color: #a77aff; }
.auth-story-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #9c98ad; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.auth-level-badge { display: inline-flex; align-items: center; gap: 7px; color: #c3a5ff; white-space: nowrap; }
.auth-level-badge i { color: #ffd167; }

.auth-panel { align-self: center; width: min(100%, 520px); box-sizing: border-box; justify-self: center; padding: clamp(28px, 4vw, 52px); }
.auth-panel-heading { display: flex; align-items: center; gap: 16px; }
.auth-panel-icon { display: grid; width: 54px; height: 54px; flex: 0 0 auto; place-items: center; border: 1px solid rgb(174 131 255 / 39%); border-radius: 16px; color: #d2b7ff; background: linear-gradient(145deg, rgb(113 28 255 / 30%), rgb(31 33 50 / 72%)); box-shadow: 0 0 26px rgb(113 28 255 / 14%), inset 0 1px 0 rgb(255 255 255 / 13%); font-size: 1.15rem; }
.auth-panel-heading h2 { margin: 4px 0 2px; color: #fff; font-size: clamp(24px, 2.1vw, 30px); font-weight: 850; letter-spacing: -.035em; line-height: 1.1; }
.auth-panel-subtitle { margin: 0; color: var(--cafe-text-muted, #c5c0d3); font-size: 16px; font-weight: 600; }
.auth-panel-rule { display: flex; align-items: center; gap: 10px; margin: 26px 0 22px; color: #a77aff; font-size: 12px; }
.auth-panel-rule span { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgb(174 131 255 / 28%)); }
.auth-panel-rule span:last-child { transform: rotate(180deg); }

/* One input treatment prevents MudBlazor's default blue controls from changing by route. */
.auth-form { width: 100%; }
.auth-form .mud-input-control { margin-top: 0; }
.auth-form .mud-typography { font-size: 16px; }
.auth-form .mud-input-outlined-border { border-color: rgb(182 190 211 / 25%); }
.auth-form .mud-input-root { border-radius: 11px; background: rgb(4 6 12 / 48%); }
.auth-form .mud-input-slot { font-size: 16px; }
/* MudBlazor makes its actual input inherit at higher specificity than the wrapper. */
.auth-form .mud-input > input.mud-input-root { font-size: 16px; }
.auth-form .mud-input-root:hover .mud-input-outlined-border { border-color: rgb(174 131 255 / 64%); }
.auth-form .mud-input-root.mud-input-focused .mud-input-outlined-border { border-color: #a77aff; box-shadow: 0 0 0 3px rgb(113 28 255 / 12%); }
.auth-form .mud-input-slot::placeholder { color: #9897a8; opacity: 1; }
.auth-form .mud-input-label { color: #c1bdd0; font-size: 16px; }
.auth-form .mud-input-control .mud-typography-caption { color: #aaa7b9; font-size: 16px; }
.auth-form .mud-button-root { min-height: 50px; border-radius: 11px; font-size: 16px; font-weight: 800; letter-spacing: .06em; }
.auth-primary-button.mud-button-root { color: var(--cafe-text, #f7f7fb); background: var(--cafe-primary, #711cff); box-shadow: var(--cafe-shadow-primary, 0 8px 28px rgb(113 28 255 / 34%)); }
.auth-primary-button.mud-button-root:hover { background: var(--cafe-primary-hover, #812dff); }
.auth-secondary-button.mud-button-root { border-color: rgb(174 131 255 / 62%); color: #dfd0ff; background: rgb(113 28 255 / 5%); }
.auth-text-link { align-self: flex-end; min-height: 44px; display: flex; align-items: center; color: #bd9aff !important; cursor: pointer; font-size: 16px; }
.auth-success { display: grid; gap: 16px; }
.auth-success-icon { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid rgb(40 211 180 / 45%); border-radius: 17px; color: #53e0bd; background: rgb(40 211 180 / 10%); box-shadow: 0 0 24px rgb(40 211 180 / 12%); font-size: 20px; }
.auth-success h3 { margin: 0; color: #fff; font-size: 20px; font-weight: 800; }
.auth-success p { margin: 0 0 3px; color: #c1c1d0; font-size: 16px; line-height: 1.65; }
.auth-success .mud-button-root { min-height: 50px; font-size: 16px; }
.auth-version { margin: 22px 0 0; color: #89869b; font-size: 10px; letter-spacing: .1em; text-align: center; }
.auth-version span { padding-inline: 5px; color: #9b71eb; }

@media (max-width: 900px) {
    .auth-page { overflow: visible; padding: 38px 22px; }
    .auth-layout { width: min(650px, 100%); min-height: 0; grid-template-columns: minmax(0, 1fr); border-radius: 23px; }
    .auth-story { min-height: 310px; padding: 28px 34px; border-right: 0; border-bottom: 1px solid rgb(182 190 211 / 14%); }
    .auth-brand-mark { width: 48px; height: 48px; }
    .auth-story-copy { padding-block: 30px 22px; }
    .auth-story h1 { margin-top: 18px; font-size: clamp(36px, 6vw, 48px); }
    .auth-feature-list { margin-top: 20px; }
    .auth-story-footer { margin-top: 8px; }
    .auth-panel { width: 100%; padding: 34px; }
}

@media (max-width: 600px) {
    .auth-page { min-height: 100%; padding: 66px 14px 24px; background: radial-gradient(ellipse at 88% 8%, rgb(99 36 204 / 18%), transparent 38%), #05070b; }
    .auth-layout { border-radius: 19px; }
    .auth-story { min-height: 0; padding: 22px 20px 18px; }
    .auth-brand-lockup { gap: 10px; }
    .auth-brand-mark { width: 42px; height: 42px; }
    .auth-eyebrow { font-size: 11px; letter-spacing: .12em; }
    .auth-brand-name { font-size: 14px; }
    .auth-story-copy { padding-block: 25px 20px; }
    .auth-mode-pill { gap: 7px; padding: 7px 9px; font-size: 11px; }
    .auth-story h1 { margin: 16px 0 9px; font-size: clamp(34px, 10vw, 42px); }
    .auth-story-copy > p { font-size: 16px; line-height: 1.55; }
    .auth-feature-list { gap: 6px; margin-top: 15px; }
    .auth-feature-list span { gap: 6px; padding: 7px 8px; font-size: 10px; letter-spacing: .035em; }
    .auth-story-footer { flex-wrap: wrap; gap: 8px; font-size: 10px; letter-spacing: .07em; }
    .auth-level-badge { gap: 5px; }
    .auth-panel { padding: 25px 20px 22px; }
    .auth-panel-heading { gap: 12px; }
    .auth-panel-icon { width: 46px; height: 46px; border-radius: 13px; }
    .auth-panel-heading h2 { font-size: 23px; }
    .auth-panel-subtitle { font-size: 16px; letter-spacing: 0; }
    .auth-panel-rule { margin: 21px 0 18px; }
    .auth-form .mud-input-slot { font-size: 16px; }
    .auth-form .mud-input-control .mud-typography-caption { font-size: 16px; }
    .auth-form .mud-button-root { font-size: 16px; }
    .auth-text-link { font-size: 16px; }
    .auth-version { margin-top: 17px; }
}

/* The challenge stays legible and keyboard friendly without relying on a single tiny textbox. */
.auth-captcha-preview {
    position: relative;
    height: 50px;
    overflow: hidden;
    border: 1px solid rgb(182 190 211 / 22%);
    border-radius: 14px;
    background: rgb(4 6 12 / 58%);
}
.auth-captcha-image { display: block; width: 200px; height: 25px; max-width: none; }
.auth-captcha-image--top { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.auth-captcha-image--bottom { position: absolute; top: 25px; left: 0; transform: translateX(var(--captcha-offset)); }
.auth-captcha-slider { margin-top: 1px; }
.code-entry-set { min-width: 0; margin: 2px 0 0; padding: 0; border: 0; }
.code-entry-legend { margin-bottom: 9px; color: #c9c5d6; font-size: 16px; font-weight: 750; }
.code-entry-slots { display: flex; justify-content: center; gap: 8px; }
.auth-form .code-entry-slot {
    width: 44px;
    height: 50px;
    box-sizing: border-box;
    border: 1px solid rgb(182 190 211 / 28%);
    border-radius: 11px;
    outline: none;
    color: #f7f5ff;
    background: rgb(4 6 12 / 54%);
    font-family: inherit;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.auth-form .code-entry-slot:focus-visible { border-color: #a77aff; background: rgb(113 28 255 / 10%); box-shadow: 0 0 0 3px rgb(113 28 255 / 18%); }
.code-entry-hint { margin: 8px 0 0; color: #c5c0d3; font-size: 16px; line-height: 1.45; }

@media (max-width: 380px) {
    .code-entry-slots { gap: 5px; }
    .auth-form .code-entry-slot { width: 38px; height: 46px; font-size: 18px; }
    .code-entry-hint { font-size: 16px; }
}

@media (prefers-reduced-motion: no-preference) {
    .auth-primary-button.mud-button-root,
    .auth-secondary-button.mud-button-root { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
    .auth-primary-button.mud-button-root:hover,
    .auth-secondary-button.mud-button-root:hover { transform: translateY(-1px); }
}