.auth-shell {
    --auth-bg: #070b14;
    --auth-card: #0e1626;
    --auth-fg: #e6edf7;
    --auth-muted: #93a4bd;
    --auth-border: #22304a;
    --auth-accent: #22d3ee;
    --auth-accent-fg: #04121a;
    --auth-error: #ff6b81;
    align-items: center;
    background: radial-gradient(ellipse at 50% 0%, rgba(0, 64, 128, 0.55), transparent 65%), var(--auth-bg);
    color: var(--auth-fg);
    display: flex;
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1rem;
    box-sizing: border-box;
}

html[data-theme='light'] .auth-shell {
    --auth-bg: #f4f7fb;
    --auth-card: #ffffff;
    --auth-fg: #0e1626;
    --auth-muted: #566579;
    --auth-border: #c8d3e2;
    --auth-accent: #0891b2;
    --auth-accent-fg: #ffffff;
    --auth-error: #c62828;
    background: var(--auth-bg);
}

.auth-card {
    background: var(--auth-card);
    border: 1px solid var(--auth-border);
    border-radius: 12px;
    box-sizing: border-box;
    max-width: 25rem;
    overflow: hidden;
    padding: 1.5rem;
    position: relative;
    width: 100%;
}

/* Film-strip perforation along the top edge of the card. */
.auth-card::before {
    background: repeating-linear-gradient(90deg, var(--auth-border) 0 10px, transparent 10px 20px);
    content: '';
    height: 6px;
    left: 0;
    opacity: 0.8;
    position: absolute;
    right: 0;
    top: 0;
}

.auth-card h1 {
    background: linear-gradient(90deg, #ff8a3d, #ffc83d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: 'Space Grotesk', Inter, system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    margin: 0.5rem 0 0.25rem;
}

.auth-card .auth-subtitle {
    color: var(--auth-muted);
    margin: 0 0 1rem;
}

.auth-card label {
    color: var(--auth-muted);
    display: block;
    font-size: 0.875rem;
    margin: 0.75rem 0 0.25rem;
}

.auth-card input:not([type='hidden']):not([type='checkbox']) {
    background: transparent;
    border: 1px solid var(--auth-border);
    border-radius: 6px;
    box-sizing: border-box;
    color: inherit;
    font-size: 1rem;
    padding: 0.6rem 0.75rem;
    width: 100%;
}

.auth-card .auth-remember {
    align-items: center;
    color: var(--auth-fg);
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.auth-card .auth-remember input {
    accent-color: var(--auth-accent);
    height: 1.1rem;
    width: 1.1rem;
}

.auth-card input:focus-visible,
.auth-card button:focus-visible {
    outline: 2px solid var(--auth-accent);
    outline-offset: 2px;
}

.auth-card button {
    background: var(--auth-accent);
    border: 0;
    border-radius: 6px;
    color: var(--auth-accent-fg);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1.25rem;
    padding: 0.7rem 1rem;
    width: 100%;
}

.auth-card a {
    color: var(--auth-accent);
}

.auth-card a.auth-button {
    background: var(--auth-accent);
    border-radius: 6px;
    color: var(--auth-accent-fg);
    display: block;
    font-weight: 600;
    padding: 0.7rem 1rem;
    text-align: center;
    text-decoration: none;
}

.auth-error {
    color: var(--auth-error);
    margin: 0 0 0.5rem;
    padding-left: 0;
}

ul.auth-error {
    list-style: none;
}

/* Auth card inside the main layout (keeps the app bar visible). */
.auth-shell.auth-embedded {
    --auth-card: var(--mud-palette-surface);
    --auth-fg: var(--mud-palette-text-primary);
    --auth-muted: var(--mud-palette-text-secondary);
    --auth-border: var(--mud-palette-lines-inputs);
    --auth-accent: var(--mud-palette-primary);
    --auth-accent-fg: var(--mud-palette-primary-text);
    --auth-error: var(--mud-palette-error);
    background: transparent;
    justify-content: center;
    min-height: 60vh;
    padding: 0;
}

.auth-shell.auth-embedded .auth-card h1 {
    background: none;
    color: inherit;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}