@layer components {
    .sub-nav {
        border-bottom: 1px solid var(--border); background: var(--bg);
        position: sticky; top: 60px; z-index: 30;
    }
    .sub-nav .container { display: flex; gap: var(--space-6); }
    .sub-nav-link {
        padding: 14px 0; font-size: var(--text-sm); font-weight: 500;
        color: var(--steel-600); border-bottom: 2px solid transparent;
        transition: all var(--transition);
    }
    .sub-nav-link:hover { color: var(--primary-600); }
    .sub-nav-link.active { color: var(--primary-600); border-bottom-color: var(--primary-600); }
    @media (max-width: 768px) {
        .sub-nav .container { overflow-x: auto; gap: var(--space-4); }
        .sub-nav-link { white-space: nowrap; font-size: var(--text-xs); }
    }
}