/* Auth pages — layout from design, all colors via MudBlazor CSS variables */

@keyframes auth-fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Full-page wrapper */
.auth-page {
    min-height: 100vh;
    background: var(--mud-palette-background-grey, #f4f5f7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* Subtle radial glow in corner (uses primary color at low opacity) */
.auth-page::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in oklab, var(--mud-palette-primary) 8%, transparent), transparent 70%);
    pointer-events: none;
}

/* Card */
.auth-card {
    width: 100%;
    max-width: 420px;
    border-radius: 16px !important;
    overflow: hidden !important;
    animation: auth-fadeUp 0.45s ease both;
}

/* Card header — primary color background */
.auth-card-header {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    padding: 28px 32px 24px;
    position: relative;
    overflow: hidden;
}

/* Decorative fish watermark */
.auth-card-header-fish {
    position: absolute;
    bottom: -30px;
    right: -20px;
    opacity: 0.08;
    line-height: 0;
    pointer-events: none;
}

/* Logo box in header */
.auth-logo-box {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Card body */
.auth-card-body {
    padding: 28px 32px 32px;
}

/* Step indicator row */
.auth-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

.auth-step-connector {
    flex: 1;
    height: 1px;
    background: var(--mud-palette-divider);
}

/* Step dot */
.auth-step-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    transition: background 0.25s, color 0.25s;
}

.auth-step-dot.active {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.auth-step-dot.inactive {
    background: var(--mud-palette-action-default, rgba(0, 0, 0, 0.08));
    color: var(--mud-palette-text-secondary);
}

/* Download card below main card */
.auth-download-wrap {
    width: 100%;
    max-width: 420px;
    margin-top: 16px;
    border-radius: 12px !important;
    overflow: hidden !important;
}