:root {
    --brand-radius: 14px;
}

/* App bar: dark, glassy */
.appbar-dark {
    background: rgba(18,22,28,.82);
    color: #fff;
    backdrop-filter: saturate(120%) blur(6px);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Centered top links */
.top-link {
    color: rgba(255,255,255,.85);
    padding: .35rem .75rem;
    border-radius: 10px;
    text-decoration: none;
}

    .top-link.active, .top-link:hover {
        background: rgba(255,255,255,.08);
        color: #fff;
    }

/* Brand avatars */
.brand-avatar {
    box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}

.brand-avatar-lg {
    width: 64px;
    height: 64px;
}

/* Main surface: dark gradient background */
.app-surface {
    min-height: calc(100vh - 56px);
    background: radial-gradient(800px 240px at 80% -10%, rgba(255,99,71,.12), transparent), radial-gradient(900px 280px at 10% -12%, rgba(59,130,246,.10), transparent), #0f1217;
    padding-bottom: 2rem;
}

/* Route progress line */
.nav-progress {
    height: 3px;
    position: sticky;
    top: 56px;
    z-index: 1001;
}

/* Loading overlay */
.loading-overlay {
    z-index: 1300;
}

.loading-card {
    background: rgba(20,24,30,.92);
    color: #fff;
    padding: 1.75rem 2rem;
    border-radius: var(--brand-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.06);
    display: flex;
    flex-direction: column;
    align-items: center;
}