:root {
    --bs-primary: #5b3df5;
    --bs-primary-rgb: 91, 61, 245;
    --bs-body-bg: #f4f6fb;
    --bs-body-color: #1d2233;
    --bs-border-color: #e4e9f2;
}

body {
    background:
        radial-gradient(circle at top right, rgba(91, 61, 245, 0.08), transparent 40%),
        radial-gradient(circle at bottom left, rgba(19, 201, 168, 0.08), transparent 35%),
        var(--bs-body-bg);
}

.navbar.app-navbar {
    backdrop-filter: blur(6px);
    background-color: rgba(20, 24, 38, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 24px rgba(15, 20, 32, 0.22);
}

.app-navbar .navbar-brand {
    font-weight: 700;
    letter-spacing: 0.01em;
}

.app-navbar .nav-link {
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.86);
    font-weight: 500;
    padding: 0.4rem 0.9rem;
    transition: all 0.2s ease;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus-visible {
    background-color: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.app-navbar .nav-link.active {
    background: linear-gradient(120deg, rgba(91, 61, 245, 0.95), rgba(19, 201, 168, 0.95));
    color: #fff;
    box-shadow: 0 8px 14px rgba(91, 61, 245, 0.32);
}

.page-shell {
    padding-bottom: 2rem;
}

.auth-hero {
    margin-top: 1.5rem;
    text-align: center;
}

.auth-title {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.auth-card,
.surface-card {
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 1rem;
    box-shadow: 0 20px 50px rgba(17, 24, 39, 0.12);
}

.auth-card {
    max-width: 28rem;
}

.form-control,
.btn {
    border-radius: 0.75rem;
}

.form-control:focus {
    border-color: rgba(91, 61, 245, 0.55);
    box-shadow: 0 0 0 0.2rem rgba(91, 61, 245, 0.15);
}

.btn-primary {
    font-weight: 600;
    box-shadow: 0 12px 20px rgba(91, 61, 245, 0.24);
}

.btn-primary:hover {
    box-shadow: 0 12px 24px rgba(91, 61, 245, 0.33);
    transform: translateY(-1px);
}

.alert-soft {
    border: 1px solid transparent;
    border-radius: 0.8rem;
}

.alert-soft.alert-danger {
    background: rgba(220, 53, 69, 0.12);
    border-color: rgba(220, 53, 69, 0.2);
}

.alert-soft.alert-info {
    background: rgba(13, 202, 240, 0.12);
    border-color: rgba(13, 202, 240, 0.2);
}

.alert-soft.alert-success {
    background: rgba(25, 135, 84, 0.12);
    border-color: rgba(25, 135, 84, 0.2);
}

.app-footer {
    color: #677086;
    font-size: 0.9rem;
}