:root {
    --auth-gradient-start: #da3068;
    --auth-gradient-end: #3e149f;
    --auth-accent: #3e149f;
    --auth-card-bg: linear-gradient(145deg, rgba(227, 191, 227, 0.85), rgba(185, 163, 227, 0.9));
    --auth-card-shadow: 0 18px 38px rgba(62, 20, 159, 0.18);
}

/* Shared layout */
.auth-page {
    background: #f6f6fb;
    min-height: 100vh;
    color: #2f1c6a;
    font-family: "Inter", "Segoe UI", sans-serif;
}

.auth-page .info-section {
    background: linear-gradient(135deg, var(--auth-gradient-start), var(--auth-gradient-end));
    color: #fff;
    padding: 4rem 0;
    position: relative;
}

.auth-page .info-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.25), transparent 55%);
    pointer-events: none;
}

.auth-page .card-hover {
    background: var(--auth-card-bg);
    border: none;
    border-radius: 28px;
    box-shadow: var(--auth-card-shadow);
    backdrop-filter: blur(6px);
    color: #2f1c6a;
}

.auth-page .card-hover h1,
.auth-page .card-hover p {
    color: inherit;
}

.auth-page .text-secondary {
    color: rgba(47, 28, 106, 0.72) !important;
}

/* Form controls */
.auth-page .form-control,
.auth-page .form-select {
    border-radius: 999px;
    border: 1px solid rgba(62, 20, 159, 0.14);
    padding: 0.75rem 1.15rem;
    background: rgba(255, 255, 255, 0.92);
    color: inherit;
    box-shadow: inset 0 1px 2px rgba(62, 20, 159, 0.05);
}

.auth-page .form-control:focus,
.auth-page .form-select:focus {
    border-color: rgba(218, 48, 104, 0.6);
    box-shadow: 0 0 0 0.2rem rgba(218, 48, 104, 0.15);
}

/* Buttons */
.auth-page .btn-primary,
.auth-page .btn-outline-secondary {
    border-radius: 999px;
    padding: 0.9rem 1.4rem;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.auth-page .btn-primary,
.auth-page .btn-outline-secondary:hover {
    background: linear-gradient(135deg, var(--auth-gradient-start), var(--auth-gradient-end));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 24px rgba(62, 20, 159, 0.25);
}

.auth-page .btn-outline-secondary {
    background: transparent;
    border: 2px solid rgba(62, 20, 159, 0.25);
    color: var(--auth-accent);
}

.auth-page .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(62, 20, 159, 0.3);
}

.auth-page a.fw-semibold {
    color: var(--auth-accent);
}

.auth-page a.fw-semibold:hover {
    color: var(--auth-gradient-start);
}

/* Google container spacing */
.auth-page .g_id_signin,
.auth-page #g_id_onload {
    width: 100%;
}

/* Page-specific tweaks */
.auth-register .card-hover,
.auth-login .card-hover,
.auth-forgot .card-hover,
.auth-change .card-hover {
    padding: clamp(2rem, 3vw, 3.5rem);
}

.auth-login .card-hover .btn-outline-secondary,
.auth-change .card-hover .btn-outline-secondary {
    border-width: 2px;
}

.auth-forgot .card-hover,
.auth-change .card-hover {
    max-width: 520px;
    margin: 0 auto;
}

.auth-page .alert-danger {
    border-radius: 18px;
}

.auth-page .form-label {
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: rgba(47, 28, 106, 0.8);
}