:root {
    --primary: #7c3aed;
    --primary-dark: #5b21b6;
    --secondary: #0ea5e9;
    --accent: #f472b6;
    --bg-gradient: radial-gradient(circle at 10% 20%, rgba(249, 168, 212, 0.45), transparent 45%), radial-gradient(circle at 80% 0%, rgba(14, 165, 233, 0.35), transparent 45%), linear-gradient(180deg, #f8fafc 0%, #eef2ff 60%, #ffffff 100%);
}

body {
    font-family: 'Space Grotesk', sans-serif;
    background: var(--bg-gradient);
    color: #0f172a;
    min-height: 100vh;
}

.app-navbar {
    backdrop-filter: blur(18px);
    background: rgba(248, 250, 252, 0.85);
    border-bottom: 1px solid rgba(120, 53, 15, 0.05);
}

.app-navbar .nav-link,
.app-navbar .navbar-brand {
    color: #0f172a !important;
}

.btn-primary {
    background: linear-gradient(120deg, var(--primary), var(--accent));
    border: none;
    box-shadow: 0 20px 40px rgba(124, 58, 237, 0.25);
}

.btn-outline-secondary {
    color: var(--primary-dark);
    border-color: rgba(91, 33, 182, 0.25);
}

main {
    position: relative;
    padding-top: 3rem;
}

.card-highlight {
    border: none;
    border-radius: 1.5rem;
    background: #ffffff;
    box-shadow: 0 35px 80px rgba(79, 70, 229, 0.12);
    color: #0f172a;
}

.card-highlight .text-muted {
    color: #64748b !important;
}

.badge-pill {
    border-radius: 999px;
    padding-inline: .9rem;
}

.text-teal {
    color: var(--secondary) !important;
}

footer {
    background: rgba(248, 250, 252, 0.85);
    color: #475569;
}

@media (max-width: 991.98px) {
    .app-navbar {
        backdrop-filter: none;
    }

    .app-offcanvas {
        --bs-offcanvas-width: min(75vw, 360px);
        width: var(--bs-offcanvas-width);
        height: 100vh;
    }

    .app-offcanvas .navbar-nav {
        width: 100%;
        row-gap: 0.75rem;
    }

    .app-offcanvas .nav-auth {
        width: 100%;
    }

    .app-offcanvas .offcanvas-body {
        overflow-y: auto;
    }

    .app-offcanvas .navbar-nav .nav-link,
    .app-offcanvas .dropdown,
    .app-offcanvas .dropdown-toggle,
    .app-offcanvas .btn {
        width: 100%;
        text-align: left;
    }
}