:root {
    --gh-surface: rgba(15, 23, 42, 0.82);
    --gh-border: rgba(148, 163, 184, 0.16);
    --gh-shadow: 0 18px 50px rgba(2, 6, 23, 0.28);
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 0%, rgba(79, 70, 229, 0.18), transparent 30rem),
        radial-gradient(circle at 90% 15%, rgba(6, 182, 212, 0.12), transparent 28rem),
        #080d19;
}

.auth-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding-block: 2rem;
}

.auth-card {
    width: min(100%, 30rem);
    box-shadow: var(--gh-shadow);
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(8, 13, 25, 0.82);
    border-color: var(--gh-border) !important;
    backdrop-filter: blur(18px);
}

.brand-mark {
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    margin-right: .75rem;
    border-radius: .75rem;
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    color: white;
    font-weight: 800;
}

.dashboard-shell {
    max-width: 1440px;
}

.dashboard-hero {
    padding: 2rem;
    border: 1px solid var(--gh-border);
    border-radius: 1.25rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, .9), rgba(15, 23, 42, .72));
    box-shadow: var(--gh-shadow);
}

.dashboard-section {
    padding: 1.5rem;
    border: 1px solid var(--gh-border);
    border-radius: 1.25rem;
    background: rgba(15, 23, 42, 0.48);
}

.card {
    border-color: var(--gh-border);
    border-radius: 1rem;
    background: var(--gh-surface);
    box-shadow: 0 8px 28px rgba(2, 6, 23, 0.16);
}

.card:hover {
    border-color: rgba(99, 102, 241, 0.42);
    transform: translateY(-2px);
    transition: transform .2s ease, border-color .2s ease;
}

.chart-container {
    position: relative;
    height: 260px;
}

.chart-card .card-body {
    padding: 1.25rem;
}

pre {
    max-height: 28rem;
    border: 1px solid rgba(148, 163, 184, .15);
}

@media (max-width: 767.98px) {
    .dashboard-hero,
    .dashboard-section {
        padding: 1rem;
        border-radius: 1rem;
    }

    .chart-container {
        height: 220px;
    }
}