:root {
    --slm-space-1: 0.25rem;
    --slm-space-2: 0.5rem;
    --slm-space-3: 0.75rem;
    --slm-space-4: 1rem;
    --slm-space-5: 1.25rem;
    --slm-space-6: 1.5rem;
    --slm-space-8: 2rem;
    --slm-space-10: 2.5rem;

    --slm-font-xs: 0.76rem;
    --slm-font-sm: var(--theme-font-size-sm, 0.875rem);
    --slm-font-md: var(--theme-font-size-base, 1rem);
    --slm-font-lg: var(--theme-font-size-lg, 1.25rem);
    --slm-font-xl: clamp(1.55rem, 1.2rem + 1vw, 2.15rem);
}

* { box-sizing: border-box; }

html,
body { min-height: 100%; }

body {
    margin: 0;
    background: var(--slm-page-gradient);
    color: var(--slm-text);
    font-family: var(--theme-body-font);
    line-height: 1.55;
}

.slm-app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--slm-primary); }
a:hover { color: var(--slm-gold-hover); }

.slm-shell-container {
    width: min(100% - 2rem, var(--slm-shell-max));
    margin-inline: auto;
}

.slm-site-header {
    position: sticky;
    top: 0;
    z-index: 1040;
    border-bottom: 1px solid color-mix(in srgb, var(--theme-primary) 28%, transparent);
    background: color-mix(in srgb, var(--theme-header-background) 88%, transparent);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

.slm-site-header .navbar { padding: 0.7rem 0; }
.slm-topbar { min-height: 4.1rem; }

.slm-site-header .navbar-brand {
    color: var(--theme-navigation-text);
    letter-spacing: 0.02em;
    font-weight: 800;
}

.slm-site-header .nav-link {
    color: var(--theme-navigation-text);
    font-weight: 600;
    border-bottom: 2px solid transparent;
}

.slm-site-header .nav-link.active,
.slm-site-header .nav-link:hover {
    color: var(--theme-navigation-hover-text);
    border-bottom-color: color-mix(in srgb, var(--theme-primary) 45%, transparent);
}

.slm-site-header .navbar-toggler {
    border-color: var(--slm-border);
    padding: 0.4rem 0.55rem;
    background: var(--slm-surface-soft);
}

#slmMobileNav .list-group-item,
#slmMobileNav .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
}

.slm-pill-badge {
    display: inline-flex;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--slm-primary), var(--slm-primary-strong));
    color: var(--theme-primary-contrast);
    justify-content: center;
    align-items: center;
    font-size: 0.72rem;
    margin-left: 0.35rem;
    font-weight: 800;
}

main.container,
main.container-fluid,
main.slm-member-shell,
main.slm-admin-content {
    width: min(100%, var(--slm-content-max));
    padding-block: var(--slm-space-6) var(--slm-space-10);
}

.slm-page-topbar {
    border-bottom: 1px solid color-mix(in srgb, var(--theme-primary) 16%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--theme-surface-elevated) 92%, transparent), color-mix(in srgb, var(--theme-surface) 75%, transparent));
}

.slm-page-topbar__inner {
    min-height: 5.5rem;
    padding-block: var(--slm-space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--slm-space-4);
    flex-wrap: wrap;
}

.slm-page-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--slm-primary);
    font-weight: 700;
}

.slm-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--slm-space-2);
}

.slm-page-title { font-size: var(--slm-font-xl); line-height: 1.2; font-weight: 900; margin: 0; letter-spacing: -0.02em; }
.slm-section-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--slm-primary); }
.slm-card-title { font-size: 1rem; font-weight: 700; margin: 0; }

.slm-meta,
.slm-small-notice { color: var(--slm-text-muted); font-size: 0.86rem; }

.slm-stat-number { font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); line-height: 1.15; font-weight: 800; }

.slm-icon-chip {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
    color: var(--theme-primary-contrast);
    background: linear-gradient(145deg, var(--slm-primary), var(--slm-primary-strong));
    box-shadow: var(--slm-cta-glow);
}

.offcanvas,
.modal-content,
.dropdown-menu {
    background: var(--slm-surface);
    border-color: var(--slm-border);
    color: var(--slm-text);
}

.slm-site-footer {
    margin-top: auto;
    border-top: 1px solid color-mix(in srgb, var(--theme-primary) 18%, transparent);
    background: color-mix(in srgb, var(--theme-footer-background) 88%, transparent);
}

.slm-site-footer__inner {
    min-height: 3.5rem;
    padding-block: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--slm-space-3);
    flex-wrap: wrap;
    color: var(--slm-text-muted);
    font-size: 0.84rem;
}

.slm-site-footer__links { display: flex; gap: var(--slm-space-3); }
.slm-site-footer__links a { color: var(--slm-text-muted); text-decoration: none; }
.slm-site-footer__links a:hover { color: var(--slm-primary); }

@media (max-width: 991.98px) {
    .slm-shell-container { width: min(100% - 1.25rem, var(--slm-shell-max)); }
    .slm-page-topbar__inner { align-items: flex-start; }
}

@media (max-width: 767.98px) {
    .slm-page-topbar__inner { padding-block: var(--slm-space-3); }
    .slm-page-actions,
    .slm-page-actions .btn { width: 100%; }
}

.slm-widget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--slm-space-4);
}