/* Structural layout: app shell, content container, navbar and footer. */
.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-main {
    flex: 1;
}

.app-container {
    width: min(100% - 2rem, 1120px);
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    border-bottom: 1px solid var(--app-border);
    background: rgba(21, 14, 46, 0.84);
    backdrop-filter: blur(18px);
}

.navbar-brand {
    color: var(--app-text);
    font-weight: 750;
    letter-spacing: -0.03em;
}

.navbar-brand::before {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    margin-right: 0.55rem;
    content: "";
    border-radius: 999px;
    background: radial-gradient(circle at 32% 28%, var(--app-primary-soft), var(--app-primary-strong) 82%);
    box-shadow: 0 0 0 0.28rem rgba(245, 196, 81, 0.14), inset 0 -2px 3px rgba(0, 0, 0, 0.28);
}

/* Section navigation: muted by default, gold pill for the active area. */
.navbar .nav-link {
    color: var(--app-muted);
    font-weight: 600;
    border-radius: 999px;
    padding-inline: 0.85rem;
    transition: color 140ms ease, background 140ms ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
    color: var(--app-text-strong);
}

.navbar .nav-link.active {
    color: var(--app-text-strong);
    background: rgba(245, 196, 81, 0.16);
    box-shadow: inset 0 0 0 1px rgba(245, 196, 81, 0.4);
}

.navbar-toggler {
    border-color: var(--app-border);
    border-radius: 999px;
}

.app-footer {
    border-top: 1px solid var(--app-border);
    background: rgba(21, 14, 46, 0.5);
}

.app-version-badge {
    opacity: 0.45;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

@media (max-width: 575.98px) {
    .app-container {
        width: min(100% - 1rem, 1120px);
    }
}